adata-ui 2.1.41-beta.1 → 2.1.41

package/components/elements/tree-select/components/ATreeSelectNode.vue

@@ -1,104 +1,104 @@
-<script lang="ts" setup>
-import type { TreeViewNode } from '#adata-ui/components/elements/tree-select/types'
-
-interface Props {
-  node: TreeViewNode
-  toggleExpand: (node: TreeViewNode) => void | Promise<void>
-  toggleCheckbox: (id: string | number, checked: boolean) => void
-  type: 'checkbox' | 'select'
-  disabled: boolean
-}
-
-const props = defineProps<Props>()
-
-// explicit slot type breaks the recursive self-reference inference (TS7022)
-defineSlots<{ label?: (props: { node: TreeViewNode }) => unknown }>()
-
-const isDisabled = computed(() => props.disabled && props.node.state === 'unchecked')
-
-function onSelectToggle() {
-  if (isDisabled.value) return
-  props.toggleCheckbox(props.node.id, props.node.state !== 'checked')
-}
-</script>
-
-<template>
-  <li
-    :style="{ paddingLeft: `${node.level * 20}px` }"
-    :class="[{ 'bg-muted': node.state === 'checked' && type === 'select' }]"
-  >
-    <div
-      v-if="!node.hidden"
-      class="flex items-center gap-1 p-2"
-      :class="{ 'bg-action-disabled': isDisabled }"
-    >
-      <div class="flex min-w-4 items-center">
-        <a-icon-loader-circle
-          v-if="node.loading"
-          class="size-4 animate-spin text-icon-disabled"
-        />
-        <a-icon-chevron-down
-          v-else-if="node.expandable"
-          width="16"
-          height="16"
-          class="cursor-pointer transition-all"
-          :class="{ '-rotate-90': !node.expanded }"
-          @click="toggleExpand(node)"
-        />
-      </div>
-
-      <a-checkbox-v2
-        v-if="type === 'checkbox'"
-        size="lg"
-        side="right"
-        class="flex w-full items-center text-left"
-        :model-value="node.state === 'checked'"
-        :intermediate="node.state === 'indeterminate'"
-        :disabled="isDisabled"
-        :name="`${node.id}`"
-        @update:model-value="(checked) => toggleCheckbox(node.id, checked as boolean)"
-      >
-        <slot name="label" :node="node">
-          <span class="text-body-md-strong" v-html="node.text" />
-        </slot>
-      </a-checkbox-v2>
-
-      <div
-        v-else
-        role="button"
-        tabindex="0"
-        class="flex w-full cursor-pointer items-center justify-between gap-4"
-        :class="{ 'pointer-events-none opacity-60': isDisabled }"
-        @click="onSelectToggle"
-        @keydown.enter.prevent="onSelectToggle"
-        @keydown.space.prevent="onSelectToggle"
-      >
-        <slot name="label" :node="node">
-          <span :class="{ 'font-semibold': node.level === 0 }" v-html="node.text" />
-        </slot>
-        <a-icon-check
-          v-if="node.state === 'checked'"
-          class="min-w-4 text-brand"
-        />
-      </div>
-    </div>
-
-    <a-transition-height>
-      <ul v-if="node.expandable && node.expanded">
-        <a-tree-select-node
-          v-for="child in node.children"
-          :key="child.id"
-          :node="child"
-          :toggle-expand="toggleExpand"
-          :toggle-checkbox="toggleCheckbox"
-          :type="type"
-          :disabled="disabled"
-        >
-          <template v-if="$slots.label" #label="slotProps">
-            <slot name="label" v-bind="slotProps" />
-          </template>
-        </a-tree-select-node>
-      </ul>
-    </a-transition-height>
-  </li>
-</template>
+<script lang="ts" setup>
+import type { TreeViewNode } from '#adata-ui/components/elements/tree-select/types'
+
+interface Props {
+  node: TreeViewNode
+  toggleExpand: (node: TreeViewNode) => void | Promise<void>
+  toggleCheckbox: (id: string | number, checked: boolean) => void
+  type: 'checkbox' | 'select'
+  disabled: boolean
+}
+
+const props = defineProps<Props>()
+
+// explicit slot type breaks the recursive self-reference inference (TS7022)
+defineSlots<{ label?: (props: { node: TreeViewNode }) => unknown }>()
+
+const isDisabled = computed(() => props.disabled && props.node.state === 'unchecked')
+
+function onSelectToggle() {
+  if (isDisabled.value) return
+  props.toggleCheckbox(props.node.id, props.node.state !== 'checked')
+}
+</script>
+
+<template>
+  <li
+    :style="{ paddingLeft: `${node.level * 20}px` }"
+    :class="[{ 'bg-[#2C3E500D] dark:bg-[#E3E5E80D]': node.state === 'checked' && type === 'select' }]"
+  >
+    <div
+      v-if="!node.hidden"
+      class="flex items-center gap-1 p-2"
+      :class="{ 'bg-deepblue-50 dark:bg-gray-200/5': isDisabled }"
+    >
+      <div class="flex min-w-4 items-center">
+        <a-icon-loader-circle
+          v-if="node.loading"
+          class="size-4 animate-spin text-gray-400 dark:text-gray-500"
+        />
+        <a-icon-chevron-down
+          v-else-if="node.expandable"
+          width="16"
+          height="16"
+          class="cursor-pointer transition-all"
+          :class="{ '-rotate-90': !node.expanded }"
+          @click="toggleExpand(node)"
+        />
+      </div>
+
+      <a-checkbox-v2
+        v-if="type === 'checkbox'"
+        size="lg"
+        side="right"
+        class="flex w-full items-center text-left"
+        :model-value="node.state === 'checked'"
+        :intermediate="node.state === 'indeterminate'"
+        :disabled="isDisabled"
+        :name="`${node.id}`"
+        @update:model-value="(checked) => toggleCheckbox(node.id, checked as boolean)"
+      >
+        <slot name="label" :node="node">
+          <span class="text-body-md-strong" v-html="node.text" />
+        </slot>
+      </a-checkbox-v2>
+
+      <div
+        v-else
+        role="button"
+        tabindex="0"
+        class="flex w-full cursor-pointer items-center justify-between gap-4"
+        :class="{ 'pointer-events-none opacity-60': isDisabled }"
+        @click="onSelectToggle"
+        @keydown.enter.prevent="onSelectToggle"
+        @keydown.space.prevent="onSelectToggle"
+      >
+        <slot name="label" :node="node">
+          <span :class="{ 'font-semibold': node.level === 0 }" v-html="node.text" />
+        </slot>
+        <a-icon-check
+          v-if="node.state === 'checked'"
+          class="min-w-4 text-blue-700 dark:text-blue-400"
+        />
+      </div>
+    </div>
+
+    <a-transition-height>
+      <ul v-if="node.expandable && node.expanded">
+        <a-tree-select-node
+          v-for="child in node.children"
+          :key="child.id"
+          :node="child"
+          :toggle-expand="toggleExpand"
+          :toggle-checkbox="toggleCheckbox"
+          :type="type"
+          :disabled="disabled"
+        >
+          <template v-if="$slots.label" #label="slotProps">
+            <slot name="label" v-bind="slotProps" />
+          </template>
+        </a-tree-select-node>
+      </ul>
+    </a-transition-height>
+  </li>
+</template>

package/components/elements/tree-select/types.ts

@@ -1,63 +1,63 @@
-export type TreeNodeState = 'checked' | 'unchecked' | 'indeterminate'
-export type TreeNodeStateEditable = 'checked' | 'unchecked'
-
-export type TreeData = {
-  id?: number | string
-  name?: string
-  children?: TreeData[]
-  [key: string]: unknown
-}
-
-export interface TreeViewNode {
-  id: string | number
-  name: string
-  text: string
-  baseText: string
-  level: number
-  state: TreeNodeState
-  expandable: boolean
-  expanded: boolean
-  hidden: boolean
-  loaded: boolean
-  loading: boolean
-  parent: TreeViewNode | null
-  children: TreeViewNode[]
-  raw: TreeData
-}
-
-export interface TreeKeyConfig {
-  idKey?: string
-  nameKey?: string
-  childrenKey?: string
-  hasChildrenKey?: string
-}
-
-export interface TreeServiceOptions extends TreeKeyConfig {
-  withoutId?: boolean
-  lazy?: boolean
-  loadChildren?: (node: TreeViewNode) => Promise<TreeData[]> | TreeData[]
-}
-
-export interface TreeNode {
-  id: string | number
-  name: string
-  state: TreeNodeState
-  level: number
-  expandable: boolean
-  expandableClosed: boolean
-  parent: string | number | null
-  hidden?: boolean
-  child: (string | number)[]
-}
-
-export interface TreeNestedNode {
-  id: string | number
-  name: string
-  state: TreeNodeState
-  level: number
-  expandable: boolean
-  expandableClosed: boolean
-  text: string
-  hidden: boolean
-  child: TreeNestedNode[]
-}
+export type TreeNodeState = 'checked' | 'unchecked' | 'indeterminate'
+export type TreeNodeStateEditable = 'checked' | 'unchecked'
+
+export type TreeData = {
+  id?: number | string
+  name?: string
+  children?: TreeData[]
+  [key: string]: unknown
+}
+
+export interface TreeViewNode {
+  id: string | number
+  name: string
+  text: string
+  baseText: string
+  level: number
+  state: TreeNodeState
+  expandable: boolean
+  expanded: boolean
+  hidden: boolean
+  loaded: boolean
+  loading: boolean
+  parent: TreeViewNode | null
+  children: TreeViewNode[]
+  raw: TreeData
+}
+
+export interface TreeKeyConfig {
+  idKey?: string
+  nameKey?: string
+  childrenKey?: string
+  hasChildrenKey?: string
+}
+
+export interface TreeServiceOptions extends TreeKeyConfig {
+  withoutId?: boolean
+  lazy?: boolean
+  loadChildren?: (node: TreeViewNode) => Promise<TreeData[]> | TreeData[]
+}
+
+export interface TreeNode {
+  id: string | number
+  name: string
+  state: TreeNodeState
+  level: number
+  expandable: boolean
+  expandableClosed: boolean
+  parent: string | number | null
+  hidden?: boolean
+  child: (string | number)[]
+}
+
+export interface TreeNestedNode {
+  id: string | number
+  name: string
+  state: TreeNodeState
+  level: number
+  expandable: boolean
+  expandableClosed: boolean
+  text: string
+  hidden: boolean
+  child: TreeNestedNode[]
+}

package/components/elements/tree-select/utils.ts

@@ -1,30 +1,30 @@
-import type { TreeData, TreeKeyConfig } from '#adata-ui/components/elements/tree-select/types'
-
-export interface SelectedItem {
-  id: string | number
-  name: string
-}
-
-export function getSelectedItems(
-  options: TreeData[],
-  ids: (string | number)[],
-  keys: TreeKeyConfig = {},
-): SelectedItem[] {
-  const { idKey = 'id', nameKey = 'name', childrenKey = 'children' } = keys
-  const wanted = new Set(ids ?? [])
-  const result: SelectedItem[] = []
-
-  const walk = (items: TreeData[]): void => {
-    items.forEach((item) => {
-      const id = item[idKey] as string | number
-      if (wanted.has(id)) {
-        result.push({ id, name: String(item[nameKey] ?? '') })
-      }
-      const children = item[childrenKey] as TreeData[] | undefined
-      if (children?.length) walk(children)
-    })
-  }
-
-  walk(options ?? [])
-  return result
-}
+import type { TreeData, TreeKeyConfig } from '#adata-ui/components/elements/tree-select/types'
+
+export interface SelectedItem {
+  id: string | number
+  name: string
+}
+
+export function getSelectedItems(
+  options: TreeData[],
+  ids: (string | number)[],
+  keys: TreeKeyConfig = {},
+): SelectedItem[] {
+  const { idKey = 'id', nameKey = 'name', childrenKey = 'children' } = keys
+  const wanted = new Set(ids ?? [])
+  const result: SelectedItem[] = []
+
+  const walk = (items: TreeData[]): void => {
+    items.forEach((item) => {
+      const id = item[idKey] as string | number
+      if (wanted.has(id)) {
+        result.push({ id, name: String(item[nameKey] ?? '') })
+      }
+      const children = item[childrenKey] as TreeData[] | undefined
+      if (children?.length) walk(children)
+    })
+  }
+
+  walk(options ?? [])
+  return result
+}

package/components/elements/tree-select-mobile/ATreeSelectMobile.vue

@@ -1,79 +1,79 @@
-<template>
-  <ul>
-    <li
-      v-for="node in items"
-      :key="node.id"
-    >
-      <a-tree-select-nodes-mobile
-        v-model="selected"
-        :node="node"
-        :parent-id="node.id"
-        :default-open="defaultOpen"
-      />
-    </li>
-  </ul>
-</template>
-
-<script setup lang="ts">
-
-import ATreeSelectNodesMobile
-  from "#adata-ui/components/elements/tree-select-mobile/components/ATreeSelectNodesMobile.vue";
-
-type Item = {
-  id: number
-  name: string
-  children?: Item[]
-}
-
-interface Props {
-  items: Item[]
-  defaultValue?: number[]
-  defaultOpen?: boolean
-}
-
-type Emits = {
-  (e: 'updateSelectedNames', items: { id: number, name: string }[]): void
-  (e: 'updateSelected', data: number[]): void
-}
-
-
-const props = (withDefaults(defineProps<Props>(), {
-  defaultValue: () => [],
-  defaultOpen: false
-}))
-
-
-const emits = defineEmits<Emits>()
-
-
-const selected = defineModel()
-watch(selected, () => {
-  emits('updateSelected', selected.value)
-}, {deep: true})
-const getId = (items: Item[], ids: number[]): { id: number, name: string }[] => {
-  const result: { id: number, name: string }[] = [];
-
-  const search = (item: Item) => {
-    if (ids.includes(item.id)) {
-      result.push({id: item.id, name: item.name});
-    }
-
-    if (item.children?.length) {
-      item.children.forEach(child => search(child));
-    }
-  };
-
-  items.forEach(item => search(item));
-
-  return result;
-};
-
-const selectedIdName = computed<{ id: number, name: string }[]>(() => {
-  return getId(props.items, selected.value)
-})
-
-watch(selectedIdName, () => {
-  emits('updateSelectedNames', selectedIdName.value)
-}, {immediate: true, deep: true})
-
-</script>
+<template>
+  <ul>
+    <li
+      v-for="node in items"
+      :key="node.id"
+    >
+      <a-tree-select-nodes-mobile
+        v-model="selected"
+        :node="node"
+        :parent-id="node.id"
+        :default-open="defaultOpen"
+      />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+
+import ATreeSelectNodesMobile
+  from "#adata-ui/components/elements/tree-select-mobile/components/ATreeSelectNodesMobile.vue";
+
+type Item = {
+  id: number
+  name: string
+  children?: Item[]
+}
+
+interface Props {
+  items: Item[]
+  defaultValue?: number[]
+  defaultOpen?: boolean
+}
+
+type Emits = {
+  (e: 'updateSelectedNames', items: { id: number, name: string }[]): void
+  (e: 'updateSelected', data: number[]): void
+}
+
+
+const props = (withDefaults(defineProps<Props>(), {
+  defaultValue: () => [],
+  defaultOpen: false
+}))
+
+
+const emits = defineEmits<Emits>()
+
+
+const selected = defineModel()
+watch(selected, () => {
+  emits('updateSelected', selected.value)
+}, {deep: true})
+const getId = (items: Item[], ids: number[]): { id: number, name: string }[] => {
+  const result: { id: number, name: string }[] = [];
+
+  const search = (item: Item) => {
+    if (ids.includes(item.id)) {
+      result.push({id: item.id, name: item.name});
+    }
+
+    if (item.children?.length) {
+      item.children.forEach(child => search(child));
+    }
+  };
+
+  items.forEach(item => search(item));
+
+  return result;
+};
+
+const selectedIdName = computed<{ id: number, name: string }[]>(() => {
+  return getId(props.items, selected.value)
+})
+
+watch(selectedIdName, () => {
+  emits('updateSelectedNames', selectedIdName.value)
+}, {immediate: true, deep: true})
+
+</script>