feat(heade): add header component

components/header/Header.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const tagList = ref<{
+  requestType: string
+  url: string
+}[]>([
+  {
+    requestType: 'GET',
+    url: 'https://livraison-app.vercel.app',
+  },
+  {
+    requestType: 'POST',
+    url: 'https://livraison-app.vercel.app',
+  },
+])
+
+const sidebar = useSidebarStore()
+
+const { show } = storeToRefs(sidebar)
+
+const linkQuery = useRouteQuery('link')
+
+function remakeRouteQuery() {
+  if (linkQuery.value === undefined)
+    linkQuery.value = tagList.value[0].url
+}
+
+watch(linkQuery, () => {
+  if (linkQuery.value === undefined)
+    linkQuery.value = tagList.value[0].url
+})
+
+onMounted(() => {
+  remakeRouteQuery()
+})
+</script>
+
+<template>
+  <div class="flex h-14 items-center">
+    <SidebarIconAction v-if="!show" />
+    <Dnd
+      v-model="tagList"
+      class=""
+      :animation="100"
+    >
+      <HeaderTag v-for="tag in tagList" :key="tag.url" :label="tag.requestType" :url="tag.url" />
+    </Dnd>
+    <HeaderIconAdd />
+  </div>
+</template>

components/header/icon/Add.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'HeaderIconAdd',
+})
+</script>
+
+<template>
+  <div class="flex justify-center items-center ">
+    <Icon name="carbon:add" class="text-5 mt-0 cursor-pointer icon-hover" />
+  </div>
+</template>

components/header/tag/Tag.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+  url: string
+}>()
+</script>
+
+<template>
+  <div class="float-left cursor-pointer leading-5 flex flex-[0_0_auto] p-x-2 items-center">
+    <Label :class="props.label">{{ props.label }}</Label>
+    <Label class="truncate pl-0.5 w-30 inline-block">{{ props.url }}</Label>
+    <Icon name="carbon:close" class="text-5 mt-0 icon-hover" />
+  </div>
+</template>
+
+<style>
+
+</style>

components/layout/Root.vue

@@ -2,14 +2,23 @@
 defineOptions({
   name: 'LayoutRoot',
 })
+
+const sidebar = useSidebarStore()
+
+const { panSize } = storeToRefs(sidebar)
 </script>
 
 <template>
   <LayoutBasic :border-positions="[]">
-    <Splitpanes>
+    <Splitpanes @resize="panSize.size = $event[0].size">
       <Sidebar />
       <SplitpanesPane :size="80" :min-size="70" :max-size="85">
-        <slot />
+        <!-- header -->
+        <Header />
+        <!-- bodyer -->
+        <div class="mx-4">
+          <slot />
+        </div>
       </SplitpanesPane>
     </Splitpanes>
   </LayoutBasic>

composables/useRouteHash.ts

@@ -0,0 +1,61 @@
+import { customRef, nextTick, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { toValue, tryOnScopeDispose } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { ReactiveRouteOptions, RouteHashValueRaw } from '~/types/router'
+
+let _hash: RouteHashValueRaw
+
+export function useRouteHash(
+  defaultValue?: MaybeRefOrGetter<RouteHashValueRaw>,
+  {
+    mode = 'replace',
+    route = useRoute(),
+    router = useRouter(),
+  }: ReactiveRouteOptions = {},
+) {
+  _hash = route.hash
+
+  tryOnScopeDispose(() => {
+    _hash = undefined
+  })
+
+  let _trigger: () => void
+
+  const proxy = customRef<RouteHashValueRaw>((track, trigger) => {
+    _trigger = trigger
+
+    return {
+      get() {
+        track()
+
+        return _hash || toValue(defaultValue)
+      },
+      set(v) {
+        if (v === _hash)
+          return
+
+        _hash = v === null ? undefined : v
+
+        trigger()
+
+        nextTick(() => {
+          const { params, query } = route
+
+          router[toValue(mode)]({ params, query, hash: _hash as string })
+        })
+      },
+    }
+  })
+
+  watch(
+    () => route.hash,
+    () => {
+      _hash = route.hash
+      _trigger()
+    },
+    { flush: 'sync' },
+  )
+
+  return proxy
+}

composables/useRouteParams.ts

@@ -0,0 +1,103 @@
+import { customRef, nextTick, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { toValue, tryOnScopeDispose } from '@vueuse/shared'
+import type { Ref } from 'vue'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { LocationAsRelativeRaw, RouteParamValueRaw, Router } from 'vue-router'
+import type { ReactiveRouteOptionsWithTransform } from '~/types/router'
+
+const _queue = new WeakMap<Router, Map<string, any>>()
+
+export function useRouteParams(
+  name: string
+): Ref<null | string | string[]>
+
+export function useRouteParams<
+  T extends RouteParamValueRaw = RouteParamValueRaw,
+  K = T,
+>(
+  name: string,
+  defaultValue?: MaybeRefOrGetter<T>,
+  options?: ReactiveRouteOptionsWithTransform<T, K>
+): Ref<K>
+
+export function useRouteParams<
+  T extends RouteParamValueRaw = RouteParamValueRaw,
+  K = T,
+>(
+  name: string,
+  defaultValue?: MaybeRefOrGetter<T>,
+  options: ReactiveRouteOptionsWithTransform<T, K> = {},
+): Ref<K> {
+  const {
+    mode = 'replace',
+    route = useRoute(),
+    router = useRouter(),
+    transform = value => value as any as K,
+  } = options
+
+  if (!_queue.has(router))
+    _queue.set(router, new Map())
+
+  const _paramsQueue = _queue.get(router)!
+
+  let param = route.params[name] as any
+
+  tryOnScopeDispose(() => {
+    param = undefined
+  })
+
+  let _trigger: () => void
+
+  const proxy = customRef<any>((track, trigger) => {
+    _trigger = trigger
+
+    return {
+      get() {
+        track()
+
+        return transform(param !== undefined ? param : toValue(defaultValue))
+      },
+      set(v) {
+        if (param === v)
+          return
+
+        param = v
+        _paramsQueue.set(name, v)
+
+        trigger()
+
+        nextTick(() => {
+          if (_paramsQueue.size === 0)
+            return
+
+          const newParams = Object.fromEntries(_paramsQueue.entries())
+          _paramsQueue.clear()
+
+          const { params, query, hash } = route
+
+          router[toValue(mode)]({
+            params: {
+              ...params,
+              ...newParams,
+            },
+            query,
+            hash,
+          } as LocationAsRelativeRaw)
+        })
+      },
+    }
+  })
+
+  watch(
+    () => route.params[name],
+    (v) => {
+      param = v
+
+      _trigger()
+    },
+    { flush: 'sync' },
+  )
+
+  return proxy as Ref<K>
+}

composables/useRouteQuery.ts

@@ -0,0 +1,100 @@
+import { customRef, nextTick, watch } from 'vue'
+import { toValue, tryOnScopeDispose } from '@vueuse/shared'
+import { useRoute, useRouter } from 'vue-router'
+import type { Router } from 'vue-router'
+import type { Ref } from 'vue'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { ReactiveRouteOptionsWithTransform, RouteQueryValueRaw } from '~/types/router'
+
+const _queue = new WeakMap<Router, Map<string, any>>()
+
+export function useRouteQuery(
+  name: string
+): Ref<null | string | string[]>
+
+export function useRouteQuery<
+  T extends RouteQueryValueRaw = RouteQueryValueRaw,
+  K = T,
+>(
+  name: string,
+  defaultValue?: MaybeRefOrGetter<T>,
+  options?: ReactiveRouteOptionsWithTransform<T, K>
+): Ref<K>
+
+export function useRouteQuery<
+  T extends RouteQueryValueRaw = RouteQueryValueRaw,
+  K = T,
+>(
+  name: string,
+  defaultValue?: MaybeRefOrGetter<T>,
+  options: ReactiveRouteOptionsWithTransform<T, K> = {},
+): Ref<K> {
+  const {
+    mode = 'replace',
+    route = useRoute(),
+    router = useRouter(),
+    transform = value => value as any as K,
+  } = options
+
+  if (!_queue.has(router))
+    _queue.set(router, new Map())
+
+  const _queriesQueue = _queue.get(router)!
+
+  let query = route.query[name] as any
+
+  tryOnScopeDispose(() => {
+    query = undefined
+  })
+
+  let _trigger: () => void
+
+  const proxy = customRef<any>((track, trigger) => {
+    _trigger = trigger
+
+    return {
+      get() {
+        track()
+
+        return transform(query !== undefined ? query : toValue(defaultValue))
+      },
+      set(v) {
+        if (query === v)
+          return
+
+        query = v
+        _queriesQueue.set(name, v)
+
+        trigger()
+
+        nextTick(() => {
+          if (_queriesQueue.size === 0)
+            return
+
+          const newQueries = Object.fromEntries(_queriesQueue.entries())
+          _queriesQueue.clear()
+
+          const { params, query, hash } = route
+
+          router[toValue(mode)]({
+            params,
+            query: { ...query, ...newQueries },
+            hash,
+          })
+        })
+      },
+    }
+  })
+
+  watch(
+    () => route.query[name],
+    (v) => {
+      query = v
+
+      _trigger()
+    },
+    { flush: 'sync' },
+  )
+
+  return proxy as any as Ref<K>
+}

pages/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-const showSidebar = useSidebarStore()
+const linkQuery = useRouteQuery('link')
 </script>
 
 <template>
   <div>
-    <SidebarIconAction v-if="!showSidebar.show" />
+    {{ linkQuery }}
   </div>
 </template>

store/sidebar.ts

@@ -9,7 +9,7 @@ export const useSidebarStore = defineStore('sidebar', () => {
     maxSize: number
   }>({
     minSize: 15,
-    size: 0,
+    size: 20,
     maxSize: 30,
   })