@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.9 → 1.0.10

package/env.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue"
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "dist/perisai-ui.umd.js",
   "module": "dist/perisai-ui.es.js",
   "scripts": {

package/src/index.ts

@@ -6,8 +6,8 @@ import './globals.css'
 export * from './shadcn/breadcrumb';
 export * from './shadcn/accordion';
 export * from './shadcn/spinner';
-export * from './shadcn/tree';
 
+export * from './ui/tree';
 export { default as InputOTP } from './ui/InputOTP.vue';
 export { default as InputOTPGroup } from './ui/InputOTPGroup.vue';
 export { default as InputOTPSeparator } from './ui/InputOTPSeparator.vue';

package/src/ui/tree/index.ts

@@ -0,0 +1 @@
+export { default as Tree } from './tree.vue';

package/src/ui/tree/tree-node.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from "vue"
+
+const props = defineProps<{
+  node: any
+  level: number
+  expandedIds: Array<string | number>
+}>()
+
+const emit = defineEmits<{
+  (e: "toggle", id: string | number): void
+  (e: "nodeClick", node: any): void
+}>()
+
+const isExpanded = computed(() => props.expandedIds.includes(props.node.id))
+
+const handleClick = () => {
+  emit("toggle", props.node.id)
+  emit("nodeClick", props.node)
+}
+</script>
+
+<template>
+  <li>
+    <button
+      type="button"
+      class="flex w-full items-center gap-1 px-2 py-1 text-xs text-slate-200 hover:bg-slate-800/80 rounded-md transition-colors"
+      :style="{ paddingLeft: `${8 + level * 12}px` }"
+      @click="handleClick"
+    >
+      <span
+        v-if="node.children?.length"
+        class="inline-flex w-3 justify-center text-muted-foreground transition-transform duration-200"
+        :class="isExpanded ? 'rotate-90' : 'rotate-0'"
+      >
+        ▶
+      </span>
+
+      <span class="truncate">{{ node.title }}</span>
+    </button>
+
+    <ul
+      v-if="isExpanded && node.children?.length"
+      class="ml-4 mt-0.5 space-y-0.5 pl-2"
+    >
+      <TreeNode
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :level="level + 1"
+        :expanded-ids="expandedIds"
+        @toggle="emit('toggle', $event)"
+        @nodeClick="emit('nodeClick', $event)"
+      />
+    </ul>
+  </li>
+</template>

package/src/ui/tree/tree.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import TreeNode from "./tree-node.vue"
+
+export interface TreeItem {
+  id: string | number
+  title: string
+  icon?: any
+  children?: TreeItem[]
+}
+
+const props = defineProps<{
+  items: TreeItem[]
+}>()
+
+const emit = defineEmits<{
+  (e: "nodeClick", node: TreeItem): void
+}>()
+
+const expandedIds = ref<Array<string | number>>([])
+
+const toggleNode = (id: string | number) => {
+  const list = expandedIds.value.slice()
+  const idx = list.indexOf(id)
+  if (idx >= 0) list.splice(idx, 1)
+  else list.push(id)
+  expandedIds.value = list
+}
+</script>
+
+<template>
+  <ul class="space-y-0.5">
+    <TreeNode
+      v-for="node in items"
+      :key="node.id"
+      :node="node"
+      :level="0"
+      :expanded-ids="expandedIds"
+      @toggle="toggleNode"
+      @nodeClick="emit('nodeClick', $event)"
+    />
+  </ul>
+</template>