dev: hotfix refactor

+ merged pub/custom-ui and pub/base into my-ui - droped pub/custom-ui
2025-10-05 09:45:17 +07:00
parent 72627b8a37
commit 2da4e616ba
219 changed files with 474 additions and 474 deletions
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-normal outline-none hover:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>*]:text-sm [&>*]:font-normal', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { TreeItem } from './type'
+import { Check } from 'lucide-vue-next'
+import CommandItem from './command-item.vue'
+
+defineProps<{
+  item: TreeItem
+  selectedValue?: string
+  shouldAlign?: boolean
+}>()
+
+const emit = defineEmits(['select'])
+
+function handleSelect(value: string) {
+  emit('select', value)
+}
+</script>
+
+<template>
+  <div class="leaf-node min-w-max">
+    <CommandItem
+      :value="item.value"
+      class="flex items-center justify-between p-2 w-full text-sm font-normal hover:text-primary cursor-pointer rounded-md"
+      :class="{ 'pl-8': shouldAlign }"
+      @select="() => handleSelect(item.value)"
+    >
+      <span class="text-sm font-normal">{{ item.label }}</span>
+      <Check
+        v-if="selectedValue === item.value"
+        class="w-4 h-4 text-primary ml-2 flex-shrink-0"
+      />
+    </CommandItem>
+  </div>
+</template>
+
+<style scoped>
+.leaf-node {
+  @apply w-full;
+}
+</style>
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { TreeItem } from './type'
+import { Check, ChevronRight, Loader2 } from 'lucide-vue-next'
+import TreeView from './tree-view.vue'
+
+const props = defineProps<{
+  item: TreeItem
+  selectedValue?: string
+  onFetchChildren: (parentId: string) => Promise<void>
+  level?: number
+}>()
+
+const emit = defineEmits(['select'])
+
+const hasChildren = computed(() => props.item.children && props.item.children.length > 0)
+
+const isOpen = ref(false)
+const isLoading = ref(false)
+const isChevronRotated = ref(false)
+
+function handleSelect(value: string) {
+  emit('select', value)
+}
+
+function handleLabelClick() {
+  handleSelect(props.item.value)
+}
+
+watch(isOpen, async (newValue) => {
+  console.log(`[TreeNode] ${props.item.label} - isOpen changed to:`, newValue)
+
+  isChevronRotated.value = newValue
+
+  if (newValue && props.item.hasChildren && !props.item.children && !isLoading.value) {
+    console.log(`[TreeNode] Fetching children for: ${props.item.label}`)
+    isLoading.value = true
+    try {
+      await props.onFetchChildren(props.item.value)
+      console.log(`[TreeNode] Fetch completed for: ${props.item.label}`, props.item.children)
+      // Force reactivity update dengan nextTick
+      await nextTick()
+    } catch (error) {
+      console.error('Gagal memuat data anak:', error)
+      // Tutup kembali jika gagal fetch
+      isOpen.value = false
+    } finally {
+      isLoading.value = false
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="tree-node min-w-max">
+    <Collapsible v-model:open="isOpen" class="w-full">
+      <!-- Node Header -->
+      <div class="flex items-center justify-start w-full p-2 rounded-md hover:bg-accent gap-2">
+        <!-- Chevron Toggle Button -->
+        <CollapsibleTrigger as-child>
+          <Button
+            variant="ghost"
+            class="h-4 w-4 p-0 flex items-center justify-center"
+          >
+            <Loader2 v-if="isLoading" class="w-4 h-4 animate-spin text-muted-foreground" />
+            <ChevronRight
+              v-else
+              class="w-4 h-4 transition-transform duration-200 ease-in-out text-muted-foreground"
+              :class="{
+                'rotate-90': isChevronRotated,
+              }"
+            />
+          </Button>
+        </CollapsibleTrigger>
+
+        <!-- Node Label -->
+        <span
+          class="text-sm font-normal cursor-pointer hover:text-primary flex-1 flex items-center justify-between"
+          @click="handleLabelClick"
+        >
+          {{ item.label }}
+          <!-- Check Icon untuk selected state -->
+          <Check
+            v-if="selectedValue === item.value"
+            class="w-4 h-4 text-primary ml-2 flex-shrink-0"
+          />
+        </span>
+      </div>
+
+      <!-- Children Container -->
+      <CollapsibleContent class="pl-6">
+        <div v-if="!hasChildren" class="text-sm text-muted-foreground p-2">
+          {{ isLoading ? 'Memuat...' : 'Tidak ada data' }}
+        </div>
+        <TreeView
+          v-else
+          :data="item.children!"
+          :selected-value="selectedValue"
+          :on-fetch-children="onFetchChildren"
+          :level="(level || 0) + 1"
+          @select="handleSelect"
+        />
+      </CollapsibleContent>
+    </Collapsible>
+  </div>
+</template>
+
+<style scoped>
+.tree-node {
+  @apply w-full;
+}
+
+/* Animasi tambahan untuk smooth transition */
+.tree-node .collapsible-content {
+  transition: all 0.2s ease-in-out;
+}
+</style>
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { TreeItem } from './type'
+import { ChevronsUpDown } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+import TreeView from './tree-view.vue'
+
+const props = defineProps<{
+  data: TreeItem[]
+  onFetchChildren: (parentId: string) => Promise<void>
+}>()
+
+const modelValue = defineModel<string>()
+const open = ref(false)
+
+function handleSelect(newVal: string) {
+  modelValue.value = newVal
+  open.value = false
+}
+
+function findLabel(value: string, items: TreeItem[]): string | undefined {
+  for (const item of items) {
+    if (item.value === value) return item.label
+    if (item.children) {
+      const found = findLabel(value, item.children)
+      if (found) return found
+    }
+  }
+}
+
+const selectedLabel = computed(() => {
+  return modelValue.value ? findLabel(modelValue.value, props.data) : '--- select item'
+})
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button variant="outline" role="combobox" class="w-full justify-between bg-white border-1 border-gray-400">
+        <span
+        class="font-normal text-muted-foreground" :class="cn(
+          'font-normal',
+          !modelValue && 'text-muted-foreground',
+          modelValue && 'text-black',
+        )"
+        >
+          {{ selectedLabel }}
+        </span>
+        <ChevronsUpDown class="w-4 h-4 ml-2 opacity-50 shrink-0" />
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="min-w-full max-w-[350px] p-0">
+      <Command>
+        <CommandInput placeholder="Cari item..." />
+        <CommandEmpty>Item tidak ditemukan.</CommandEmpty>
+        <CommandList class="max-h-[300px] overflow-x-auto overflow-y-auto">
+          <CommandGroup>
+            <TreeView
+              :data="data"
+              :selected-value="modelValue"
+              :on-fetch-children="onFetchChildren"
+              :level="0"
+              @select="handleSelect"
+            />
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { TreeItem } from './type'
+import Leaf from './leaf.vue'
+import TreeNode from './tree-node.vue'
+
+const props = defineProps<{
+  data: TreeItem[]
+  selectedValue?: string
+  onFetchChildren: (parentId: string) => Promise<void>
+  level?: number
+}>()
+
+const emit = defineEmits(['select'])
+
+function handleSelect(value: string) {
+  emit('select', value)
+}
+
+// Computed untuk mendeteksi apakah ada node dengan children dalam level ini
+const hasAnyChildrenInLevel = computed(() => {
+  return props.data.some(item => item.hasChildren)
+})
+
+// Computed untuk menentukan apakah perlu alignment berdasarkan level
+const shouldAlignLeaves = computed(() => {
+  // Di root level (level 0), selalu align leaf dengan tree nodes jika ada mixed content
+  // Di level lain, hanya align jika ada mixed content
+  const isRootLevel = (props.level || 0) === 0
+  const hasMixedContent = hasAnyChildrenInLevel.value && props.data.some(item => !item.hasChildren)
+
+  return isRootLevel ? hasAnyChildrenInLevel.value : hasMixedContent
+})
+</script>
+
+<template>
+  <div class="tree-view min-w-max">
+    <template v-for="item in data" :key="item.value">
+      <TreeNode
+        v-if="item.hasChildren"
+        :item="item"
+        :selected-value="selectedValue"
+        :on-fetch-children="onFetchChildren"
+        :level="level || 0"
+        @select="handleSelect"
+      />
+      <Leaf
+        v-else
+        :item="item"
+        :selected-value="selectedValue"
+        :should-align="shouldAlignLeaves"
+        @select="handleSelect"
+      />
+    </template>
+  </div>
+</template>
@@ -0,0 +1,6 @@
+export interface TreeItem {
+  value: string
+  label: string
+  hasChildren: boolean
+  children?: TreeItem[]
+}