⚠️ refactor (components): restructure components to custom-ui

2025-08-25 09:59:44 +07:00
parent 746d39ea14
commit 61b71f7e76
36 changed files with 255 additions and 73 deletions
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center">
+      <div class="ml-3 text-lg font-bold text-gray-900">
+        <Icon :name="prep.icon" class="mr-2 h-4 w-4 align-middle" />
+        {{ prep.title }}
+      </div>
+    </div>
+  </header>
+</template>
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+
+function emitSearchNavClick() {
+  props.refSearchNav.onClick()
+}
+
+function onInput(event: Event) {
+  props.refSearchNav.onInput((event.target as HTMLInputElement).value)
+}
+
+function btnClick() {
+  props.prep.addNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center justify-between">
+      <div class="flex items-center">
+        <div class="ml-3 text-lg font-bold text-gray-900">
+          <Icon :name="prep.icon" class="mr-2 h-4 w-4 align-middle" />
+          {{ prep.title }}
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="ml-3 text-lg text-gray-900">
+          <Input
+            type="text"
+            placeholder="Search"
+            class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
+            @click="emitSearchNavClick"
+            @input="onInput"
+          />
+        </div>
+        <div v-if="prep.addNav" class="m-2 flex items-center">
+          <Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
+            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
+            {{ prep.addNav.label }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+
+function emitSearchNavClick() {
+  props.refSearchNav.onClick()
+}
+
+function onInput(event: Event) {
+  props.refSearchNav.onInput((event.target as HTMLInputElement).value)
+}
+
+function btnClick() {
+  props.prep.addNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center">
+      <div class="ml-3 text-lg text-gray-900">
+        <Input
+          type="text"
+          placeholder="Search"
+          class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
+          @click="emitSearchNavClick"
+          @input="onInput"
+        />
+      </div>
+      <div v-if="prep.addNav" class="m-2 flex items-center">
+        <Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
+          <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
+          {{ prep.addNav.label }}
+        </Button>
+      </div>
+    </div>
+  </header>
+</template>