Khafid Prayoga
ba6485a3e7
feat(division): update division list components and add mock api - Replace patient API endpoint with division mock endpoint - Simplify table columns and headers for division list - Add mock API endpoint for division list with tree/flat format feat(select-tree): add collapsible tree select component with lazy loading Implement a tree select component with collapsible sections and lazy loading of child items. Includes: - Collapsible component wrappers for Vue - Command component wrappers for combobox functionality - Tree select item component with loading states - Example implementation in dev page todo: - scroll on overflow - long text truncate possibly with tooltip - more than > 5 depth of child - mutate the children lazy - integration backend for search based text and return keys feat(select-tree): add command-item component for tree selection adjust hover bg-accent (remove state on-highlighted at styling) to avoid conflict on global component refactor(select-tree): extract TreeItem interface to shared type file Move TreeItem interface to a dedicated type file for better code organization and reusability. Update components to import the interface and add styling improvements to the tree-select component. adjust text size for tree to sm refactor(select-tree): rename tree-select-item to leaf and improve component - Rename component to better reflect its purpose as a leaf node - Improve UI with better spacing and hover states - Simplify toggle logic using v-model - Add checkmark icon for selected items checkpoint wip
41 lines
940 B
Vue
41 lines
940 B
Vue
<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-12': 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>
|