adata-ui 2.1.17 → 2.1.18

package/components/elements/table/ATable.vue

@@ -1,93 +1,93 @@
-<script setup lang="ts">
-import {ui} from './table.config'
-import { twMerge } from 'tailwind-merge'
-type Column = {
-  label: string
-  key: string | number
-  class?: string
-}
-type Row = {
-  [key: string]: any
-}
-interface Props {
-  columns: Column[],
-  columnAttribute?: keyof Column
-  rows: Row[]
-  loading?: boolean
-  size?: 'sm' | 'md'
-  classHead?: string
-}
-const props = withDefaults(defineProps<Props>(),{
-  columnAttribute: "label",
-  loading: true,
-  size: 'md',
-  classHead: '',
-})
-
-const {t} = useI18n()
-
-function getRowData (row, rowKey, defaultValue: any = '') {
-  return row[rowKey] ?? defaultValue
-}
-
-</script>
-
-<template>
-  <div :class="ui.wrapper">
-    <table :class="[ui.base, ui.divide]">
-      <thead :class="ui.thead">
-        <tr :class="twMerge(ui.tr.base, classHead)">
-          <th
-            v-for="(column, index) in columns"
-            :key="index"
-            scope="col"
-            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]"
-          >
-            <slot
-              :name="`${column.key}-header`"
-              :column="column"
-            >
-              <span>{{ t(column[columnAttribute]) }}</span>
-            </slot>
-          </th>
-        </tr>
-        <tr v-if="loading">
-          <td
-            :colspan="0"
-            :class="ui.progress.wrapper"
-          />
-        </tr>
-      </thead>
-      <tbody :class="ui.tbody">
-        <slot
-          name="extra_row-top"
-          :base-class="{row: ui.tr.base, td: [ui.td.base, ui.td.padding[size], ui.td.color, ui.td.font, ui.td.size]}"
-        />
-        <tr
-          v-for="(row, index) in rows"
-          :key="index"
-          :class="twMerge(ui.tr.base, row?.class)"
-        >
-          <td
-            v-for="(column, subIndex) in columns"
-            :key="subIndex"
-            :class="[ui.td.base, ui.td.padding[size], ui.td.color, ui.td.font, ui.td.size, column.class]"
-          >
-            <slot
-              :name="`${column.key}-data`"
-              :column="column"
-              :row="row"
-              :index="index"
-            >
-              {{ getRowData(row, column.key) }}
-            </slot>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import {ui} from './table.config'
+import { twMerge } from 'tailwind-merge'
+type Column = {
+  label: string
+  key: string | number
+  class?: string
+}
+type Row = {
+  [key: string]: any
+}
+interface Props {
+  columns: Column[],
+  columnAttribute?: keyof Column
+  rows: Row[]
+  loading?: boolean
+  size?: 'sm' | 'md'
+  classHead?: string
+}
+const props = withDefaults(defineProps<Props>(),{
+  columnAttribute: "label",
+  loading: true,
+  size: 'md',
+  classHead: '',
+})
+
+const {t} = useI18n()
+
+function getRowData (row, rowKey, defaultValue: any = '') {
+  return row[rowKey] ?? defaultValue
+}
+
+</script>
+
+<template>
+  <div :class="ui.wrapper">
+    <table :class="[ui.base, ui.divide]">
+      <thead :class="ui.thead">
+        <tr :class="twMerge(ui.tr.base, classHead)">
+          <th
+            v-for="(column, index) in columns"
+            :key="index"
+            scope="col"
+            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]"
+          >
+            <slot
+              :name="`${column.key}-header`"
+              :column="column"
+            >
+              <span>{{ t(column[columnAttribute]) }}</span>
+            </slot>
+          </th>
+        </tr>
+        <tr v-if="loading">
+          <td
+            :colspan="0"
+            :class="ui.progress.wrapper"
+          />
+        </tr>
+      </thead>
+      <tbody :class="ui.tbody">
+        <slot
+          name="extra_row-top"
+          :base-class="{row: ui.tr.base, td: [ui.td.base, ui.td.padding[size], ui.td.color, ui.td.font, ui.td.size]}"
+        />
+        <tr
+          v-for="(row, index) in rows"
+          :key="index"
+          :class="twMerge(ui.tr.base, row?.class)"
+        >
+          <td
+            v-for="(column, subIndex) in columns"
+            :key="subIndex"
+            :class="[ui.td.base, ui.td.padding[size], ui.td.color, ui.td.font, ui.td.size, column.class]"
+          >
+            <slot
+              :name="`${column.key}-data`"
+              :column="column"
+              :row="row"
+              :index="index"
+            >
+              {{ getRowData(row, column.key) }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/table/table.config.ts

@@ -1,32 +1,32 @@
-export const ui = {
-  wrapper: 'relative overflow-x-auto rounded bg-white dark:bg-gray-900',
-  base: 'min-w-full table-fixed ',
-  divide: '',
-  thead: 'relative bg-gray-100 dark:bg-[#E3E5E81A]',
-  tbody: '',
-  tr: {
-    base: 'even:bg-gray-50 dark:even:bg-[#E3E5E81A]',
-    selected: 'bg-gray-50 dark:bg-gray-800/50',
-    active: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer',
-  },
-  th: {
-    base: 'text-left rtl:text-right',
-    padding: 'px-4 py-3.5',
-    color: 'text-deepblue-900 dark:text-gray-200',
-    font: 'font-semibold',
-    size: 'text-xs',
-  },
-  td: {
-    base: '',
-    padding: {
-      sm: 'px-3 py-2',
-      md: 'px-4 py-4'
-    },
-    color: 'text-deepblue-900 dark:text-gray-200',
-    font: '',
-    size: 'text-sm',
-  },
-  progress: {
-    wrapper: 'absolute h-[2px] bg-deepblue-700 inset-x-0  animate-pulse',
-  },
-}
+export const ui = {
+  wrapper: 'relative overflow-x-auto rounded bg-white dark:bg-gray-900',
+  base: 'min-w-full table-fixed ',
+  divide: '',
+  thead: 'relative bg-gray-100 dark:bg-[#E3E5E81A]',
+  tbody: '',
+  tr: {
+    base: 'even:bg-gray-50 dark:even:bg-[#E3E5E81A]',
+    selected: 'bg-gray-50 dark:bg-gray-800/50',
+    active: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer',
+  },
+  th: {
+    base: 'text-left rtl:text-right',
+    padding: 'px-4 py-3.5',
+    color: 'text-deepblue-900 dark:text-gray-200',
+    font: 'font-semibold',
+    size: 'text-xs',
+  },
+  td: {
+    base: '',
+    padding: {
+      sm: 'px-3 py-2',
+      md: 'px-4 py-4'
+    },
+    color: 'text-deepblue-900 dark:text-gray-200',
+    font: '',
+    size: 'text-sm',
+  },
+  progress: {
+    wrapper: 'absolute h-[2px] bg-deepblue-700 inset-x-0  animate-pulse',
+  },
+}

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

@@ -1,169 +1,169 @@
-<template>
-  <div>
-    <ul>
-      <template
-        v-for="node in nestedTree"
-        :key="node.id"
-      >
-        <TreeSelectNodes
-          v-if="!node?.hidden"
-          :node="node"
-          :toggle-expand="toggleExpand"
-          :toggle-checkbox="toggleCheckbox"
-          :type="type"
-          :disabled="isDisabled(node.id)"
-        />
-      </template>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useTreeService } from '#adata-ui/components/elements/tree-select/TreeService.ts'
-import TreeSelectNodes from './components/tree-select-nodes.vue'
-import type { TreeData } from '#adata-ui/components/elements/tree-select/types'
-import type { TreeNestedNode } from '#adata-ui/components/elements/tree-select/types'
-import highlight from '#adata-ui/composables/highlight'
-import { useDebounceFn } from '@vueuse/core'
-
-interface Props {
-  options: TreeData[]
-  modelValue: (string | number)[]
-  type?: 'checkbox' | 'select'
-  isSearch?: boolean
-  disabled?: boolean
-  onlyOne?: boolean
-  searchText?: string
-  // eslint-disable-next-line vue/require-default-prop
-  asyncSearch?: (keyword: string) => TreeData[]
-  withoutId?: boolean
-}
-
-interface Emits {
-  (e: 'update:modelValue', item: (string | number)[]): void
-}
-
-const emits = defineEmits<Emits>()
-const props = withDefaults(defineProps<Props>(), {
-  type: 'checkbox',
-  searchText: '',
-  withoutId: false,
-  disabled: false,
-  onlyOne: false,
-})
-const {
-  nestedTree,
-  tree,
-  setState,
-  setExpandableClosed,
-  initTree,
-  collectSelectedIds,
-  updateNestedTree,
-  searchedData,
-  toggleHiddenNodes,
-  reset,
-  toggleExpandableNodes,
-} = useTreeService( props.withoutId )
-const selected = computed({
-  get() {
-    return props.modelValue
-  },
-  set(val) {
-    emits('update:modelValue', val)
-  }
-})
-
-initTree(props.options)
-const toggleExpand = (node) => {
-  if (node.expandable) {
-    setExpandableClosed(node.id, !node.expandableClosed)
-  }
-}
-
-const toggleCheckbox = (id, checked) => {
-  setState(id, checked ? 'checked' : 'unchecked')
-}
-
-function openFounded(nodes: TreeNestedNode[]) {
-  nodes.forEach((node) => {
-    node.expandableClosed = false
-    node.text = highlight(node.text, props.searchText)
-    if (node.child.length) {
-      openFounded(node.child)
-    }
-  })
-}
-
-function filterOptions(options: any[], search: string) {
-  return options
-    .map((option) => {
-      const matches = option.name.toLowerCase().includes(search.toLowerCase())
-      const matchesWithId = option.id?.toString().toLowerCase().includes(search.toLowerCase())
-      let filteredChildren = []
-
-      if (option.children) {
-        filteredChildren = filterOptions(option.children, search)
-      }
-
-      if (matches || matchesWithId || filteredChildren.length > 0) {
-        return {
-          ...option,
-          children: filteredChildren
-        }
-      }
-
-      return null
-    })
-    .filter(Boolean)
-}
-
-const debouncedSearch = useDebounceFn(async () => {
-  if (props.searchText !== '') {
-    if (props?.asyncSearch) {
-      const searchData = await props.asyncSearch(props.searchText)
-      searchedData(searchData, props.searchText)
-    } else {
-      const searchData = filterOptions(props.options, props.searchText)
-      searchedData(searchData, props.searchText)
-    }
-  } else {
-    toggleHiddenNodes(false)
-    toggleExpandableNodes(true)
-    updateNestedTree()
-  }
-}, 300)
-
-watch(
-  () => props.searchText,
-  (newVal) => debouncedSearch()
-)
-
-
-onMounted(() => {
-  if (props.modelValue && props.modelValue.length) {
-    props.modelValue.forEach((id) => {
-      setState(id, 'checked')
-    })
-  }
-
-  if (props.isSearch) {
-    // openFounded(nestedTree.value)
-  }
-})
-
-const isDisabled = (id: string | number) => {
-  return props.onlyOne ? selected.value.length > 0 && !selected.value.includes(id) : false
-}
-watch(
-  tree,
-  () => {
-    if (tree.value) {
-      selected.value = collectSelectedIds(tree.value)
-    }
-  },
-  { deep: true }
-)
-defineExpose({
-  reset
-})
-</script>
+<template>
+  <div>
+    <ul>
+      <template
+        v-for="node in nestedTree"
+        :key="node.id"
+      >
+        <TreeSelectNodes
+          v-if="!node?.hidden"
+          :node="node"
+          :toggle-expand="toggleExpand"
+          :toggle-checkbox="toggleCheckbox"
+          :type="type"
+          :disabled="isDisabled(node.id)"
+        />
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTreeService } from '#adata-ui/components/elements/tree-select/TreeService.ts'
+import TreeSelectNodes from './components/tree-select-nodes.vue'
+import type { TreeData } from '#adata-ui/components/elements/tree-select/types'
+import type { TreeNestedNode } from '#adata-ui/components/elements/tree-select/types'
+import highlight from '#adata-ui/composables/highlight'
+import { useDebounceFn } from '@vueuse/core'
+
+interface Props {
+  options: TreeData[]
+  modelValue: (string | number)[]
+  type?: 'checkbox' | 'select'
+  isSearch?: boolean
+  disabled?: boolean
+  onlyOne?: boolean
+  searchText?: string
+  // eslint-disable-next-line vue/require-default-prop
+  asyncSearch?: (keyword: string) => TreeData[]
+  withoutId?: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', item: (string | number)[]): void
+}
+
+const emits = defineEmits<Emits>()
+const props = withDefaults(defineProps<Props>(), {
+  type: 'checkbox',
+  searchText: '',
+  withoutId: false,
+  disabled: false,
+  onlyOne: false,
+})
+const {
+  nestedTree,
+  tree,
+  setState,
+  setExpandableClosed,
+  initTree,
+  collectSelectedIds,
+  updateNestedTree,
+  searchedData,
+  toggleHiddenNodes,
+  reset,
+  toggleExpandableNodes,
+} = useTreeService( props.withoutId )
+const selected = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emits('update:modelValue', val)
+  }
+})
+
+initTree(props.options)
+const toggleExpand = (node) => {
+  if (node.expandable) {
+    setExpandableClosed(node.id, !node.expandableClosed)
+  }
+}
+
+const toggleCheckbox = (id, checked) => {
+  setState(id, checked ? 'checked' : 'unchecked')
+}
+
+function openFounded(nodes: TreeNestedNode[]) {
+  nodes.forEach((node) => {
+    node.expandableClosed = false
+    node.text = highlight(node.text, props.searchText)
+    if (node.child.length) {
+      openFounded(node.child)
+    }
+  })
+}
+
+function filterOptions(options: any[], search: string) {
+  return options
+    .map((option) => {
+      const matches = option.name.toLowerCase().includes(search.toLowerCase())
+      const matchesWithId = option.id?.toString().toLowerCase().includes(search.toLowerCase())
+      let filteredChildren = []
+
+      if (option.children) {
+        filteredChildren = filterOptions(option.children, search)
+      }
+
+      if (matches || matchesWithId || filteredChildren.length > 0) {
+        return {
+          ...option,
+          children: filteredChildren
+        }
+      }
+
+      return null
+    })
+    .filter(Boolean)
+}
+
+const debouncedSearch = useDebounceFn(async () => {
+  if (props.searchText !== '') {
+    if (props?.asyncSearch) {
+      const searchData = await props.asyncSearch(props.searchText)
+      searchedData(searchData, props.searchText)
+    } else {
+      const searchData = filterOptions(props.options, props.searchText)
+      searchedData(searchData, props.searchText)
+    }
+  } else {
+    toggleHiddenNodes(false)
+    toggleExpandableNodes(true)
+    updateNestedTree()
+  }
+}, 300)
+
+watch(
+  () => props.searchText,
+  (newVal) => debouncedSearch()
+)
+
+
+onMounted(() => {
+  if (props.modelValue && props.modelValue.length) {
+    props.modelValue.forEach((id) => {
+      setState(id, 'checked')
+    })
+  }
+
+  if (props.isSearch) {
+    // openFounded(nestedTree.value)
+  }
+})
+
+const isDisabled = (id: string | number) => {
+  return props.onlyOne ? selected.value.length > 0 && !selected.value.includes(id) : false
+}
+watch(
+  tree,
+  () => {
+    if (tree.value) {
+      selected.value = collectSelectedIds(tree.value)
+    }
+  },
+  { deep: true }
+)
+defineExpose({
+  reset
+})
+</script>