adata-ui 2.1.40-beta.18 → 2.1.40-beta.19

package/components/elements/step-slider/AStepSliderColNumber.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+interface Step {
+  title: string
+  description: string
+}
+
+const props = withDefaults(defineProps<{
+  steps: Step[]
+  interval?: number
+  autoplay?: boolean
+  pauseOnHover?: boolean
+  modelValue?: number
+  colsClass?: string
+}>(), {
+  interval: 5000,
+  autoplay: true,
+  pauseOnHover: true,
+  modelValue: undefined,
+  colsClass: 'lg:grid-cols-2',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+  (e: 'change', value: number): void
+}>()
+
+const TICK = 50
+
+const internal = ref(props.modelValue ?? 0)
+
+const active = computed<number>({
+  get: () => props.modelValue ?? internal.value,
+  set: (value) => {
+    internal.value = value
+    emit('update:modelValue', value)
+    emit('change', value)
+  },
+})
+
+const elapsed = ref(0)
+let ticker: ReturnType<typeof setInterval> | null = null
+let lastTs = 0
+
+const progress = computed(() => {
+  if (!props.autoplay || props.steps.length <= 1)
+    return 1
+  return Math.min(1, elapsed.value / props.interval)
+})
+
+const fillWidth = computed(() => `${progress.value * 100}%`)
+
+function stopTicker() {
+  if (ticker) {
+    clearInterval(ticker)
+    ticker = null
+  }
+  lastTs = 0
+}
+
+function startTicker() {
+  stopTicker()
+  if (!props.autoplay || props.steps.length <= 1)
+    return
+  ticker = setInterval(() => {
+    const now = Date.now()
+    const dt = lastTs ? now - lastTs : TICK
+    lastTs = now
+    elapsed.value += dt
+    if (elapsed.value >= props.interval) {
+      elapsed.value = 0
+      active.value = (active.value + 1) % props.steps.length
+    }
+  }, TICK)
+}
+
+function goTo(index: number) {
+  active.value = index
+  elapsed.value = 0
+  startTicker()
+}
+
+function onMouseEnter() {
+  if (props.pauseOnHover)
+    stopTicker()
+}
+
+function onMouseLeave() {
+  if (props.pauseOnHover)
+    startTicker()
+}
+
+onMounted(startTicker)
+onBeforeUnmount(stopTicker)
+watch(() => [props.interval, props.autoplay, props.steps.length], () => {
+  elapsed.value = 0
+  startTicker()
+})
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-1 items-center gap-4 lg:gap-16"
+    :class="colsClass"
+  >
+    <ol class="flex flex-col gap-4">
+      <li
+        v-for="(step, i) in steps"
+        :key="i"
+        class="group relative flex cursor-pointer items-start gap-4 px-4 py-3"
+        @click="goTo(i)"
+      >
+        <span
+          v-if="i === active"
+          class="ss-card-glow absolute inset-0 z-[1] rounded-2xl bg-white"
+        />
+        <span
+          v-if="i < steps.length - 1"
+          class="absolute left-[34px] top-[46px] z-0 h-[calc(100%_-_18px)] w-0.5 -translate-x-1/2 rounded transition-colors"
+          :class="i < active ? 'bg-blue-600' : 'bg-gray-200'"
+        />
+        <span class="relative z-10 flex w-9 shrink-0 justify-center">
+          <span
+            class="text-body-md flex items-center justify-center rounded-full font-bold transition-all duration-300"
+            :class="i === active
+              ? 'ss-num-glow size-9 bg-blue-600 text-white'
+              : i < active
+                ? 'size-[34px] bg-blue-50 text-blue-600 group-hover:bg-blue-100'
+                : 'size-[34px] bg-gray-100 text-gray-400 group-hover:bg-gray-200'"
+          >
+            {{ i + 1 }}
+          </span>
+        </span>
+        <div class="relative z-10">
+          <p
+            class="text-body-lg-strong transition-colors"
+            :class="i === active
+              ? 'text-gray-900'
+              : i < active
+                ? 'text-[#5b6472]'
+                : 'text-gray-400'"
+          >
+            {{ step.title }}
+          </p>
+          <p class="text-body-md text-[#9ca3af]">
+            {{ step.description }}
+          </p>
+        </div>
+      </li>
+    </ol>
+
+    <div
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <div class="flex justify-center">
+        <slot
+          name="panel"
+          :active="active"
+          :step="steps[active]"
+          :progress="progress"
+          :count="steps.length"
+          :fill-width="fillWidth"
+          :go-to="goTo"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ss-num-glow {
+  box-shadow: 0 4px 12px rgb(6 141 255 / 45%);
+}
+
+.ss-card-glow {
+  box-shadow: 0 22px 60px -18px rgb(6 141 255 / 32%);
+}
+</style>

package/components/elements/table/ATable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { twMerge } from '#adata-ui/utils/twMerge'
 import {ui} from './table.config'
-import { twMerge } from 'tailwind-merge'
 type Column = {
   label: string
   key: string | number

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

@@ -14,7 +14,7 @@ export const ui = {
     padding: 'px-4 py-3.5',
     color: 'text-deepblue-900 dark:text-gray-200',
     font: 'font-semibold',
-    size: 'text-xs',
+    size: 'text-body-sm',
   },
   td: {
     base: '',
@@ -24,7 +24,7 @@ export const ui = {
     },
     color: 'text-deepblue-900 dark:text-gray-200',
     font: '',
-    size: 'text-sm',
+    size: 'text-body-md',
   },
   progress: {
     wrapper: 'absolute h-[2px] bg-deepblue-700 inset-x-0  animate-pulse',

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

@@ -1,30 +1,7 @@
-<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'
+import { useTreeService } from '#adata-ui/components/elements/tree-select/TreeService'
+import type { TreeData, TreeViewNode } from '#adata-ui/components/elements/tree-select/types'
 
 interface Props {
   options: TreeData[]
@@ -34,140 +11,147 @@ interface Props {
   disabled?: boolean
   onlyOne?: boolean
   searchText?: string
-  // eslint-disable-next-line vue/require-default-prop
-  asyncSearch?: (keyword: string) => TreeData[]
+  asyncSearch?: (keyword: string) => TreeData[] | Promise<TreeData[]>
   withoutId?: boolean
+  idKey?: string
+  nameKey?: string
+  childrenKey?: string
+  hasChildrenKey?: string
+  lazy?: boolean
+  loadChildren?: (node: TreeViewNode) => TreeData[] | Promise<TreeData[]>
 }
 
 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,
+  idKey: 'id',
+  nameKey: 'name',
+  childrenKey: 'children',
+  lazy: false,
 })
+
+const emits = defineEmits<Emits>()
+
 const {
-  nestedTree,
-  tree,
+  nodes,
+  build,
   setState,
-  setExpandableClosed,
-  initTree,
+  applyModel,
   collectSelectedIds,
-  updateNestedTree,
-  searchedData,
-  toggleHiddenNodes,
   reset,
-  toggleExpandableNodes,
-} = useTreeService( props.withoutId )
-const selected = computed({
-  get() {
-    return props.modelValue
-  },
-  set(val) {
-    emits('update:modelValue', val)
-  }
+  toggleExpand,
+  applySearch,
+  clearSearch,
+} = useTreeService({
+  withoutId: props.withoutId,
+  idKey: props.idKey,
+  nameKey: props.nameKey,
+  childrenKey: props.childrenKey,
+  hasChildrenKey: props.hasChildrenKey,
+  lazy: props.lazy,
+  loadChildren: props.loadChildren,
 })
 
-initTree(props.options)
-const toggleExpand = (node) => {
-  if (node.expandable) {
-    setExpandableClosed(node.id, !node.expandableClosed)
-  }
+function emitSelection() {
+  emits('update:modelValue', collectSelectedIds())
 }
 
-const toggleCheckbox = (id, checked) => {
+function toggleCheckbox(id: string | number, checked: boolean) {
   if (props.onlyOne && !checked) {
     reset()
-  } else {
+  }
+  else {
     setState(id, checked ? 'checked' : 'unchecked')
   }
+  emitSelection()
 }
 
-function openFounded(nodes: TreeNestedNode[]) {
-  nodes.forEach((node) => {
-    node.expandableClosed = false
-    node.text = highlight(node.text, props.searchText)
-    if (node.child.length) {
-      openFounded(node.child)
-    }
-  })
+const selected = computed(() => props.modelValue ?? [])
+function isDisabled(id: string | number) {
+  return props.onlyOne ? selected.value.length > 0 && !selected.value.includes(id) : false
 }
 
-function filterOptions(options: any[], search: string) {
+function filterOptions(options: TreeData[], search: string): TreeData[] {
+  const needle = search.toLowerCase()
   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
-        }
+      const name = String(option[props.nameKey] ?? '').toLowerCase()
+      const id = option[props.idKey] as string | number | undefined
+      const matches = name.includes(needle)
+      const matchesId = id?.toString().toLowerCase().includes(needle)
+      const children = (option[props.childrenKey] as TreeData[] | undefined) ?? []
+      const filteredChildren = children.length ? filterOptions(children, search) : []
+
+      if (matches || matchesId || filteredChildren.length > 0) {
+        return { ...option, [props.childrenKey]: filteredChildren }
       }
-
       return null
     })
-    .filter(Boolean)
+    .filter(Boolean) as TreeData[]
 }
 
 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()
+    const data = props.asyncSearch
+      ? await props.asyncSearch(props.searchText)
+      : filterOptions(props.options, props.searchText)
+    applySearch(data, props.searchText)
+  }
+  else {
+    clearSearch()
   }
 }, 300)
 
-watch(
-  () => props.searchText,
-  (newVal) => debouncedSearch()
-)
+watch(() => props.searchText, () => debouncedSearch())
 
+function initFromOptions() {
+  build(props.options)
+  applyModel(props.modelValue)
+  emitSelection()
+}
 
+build(props.options)
 onMounted(() => {
-  if (props.modelValue && props.modelValue.length) {
-    props.modelValue.forEach((id) => {
-      setState(id, 'checked')
-    })
-  }
-
-  if (props.isSearch) {
-    // openFounded(nestedTree.value)
-  }
+  applyModel(props.modelValue)
+  emitSelection()
 })
+watch(() => props.options, initFromOptions)
 
-const isDisabled = (id: string | number) => {
-  return props.onlyOne ? selected.value.length > 0 && !selected.value.includes(id) : false
+function resetSelection() {
+  reset()
+  emitSelection()
 }
-watch(
-  tree,
-  () => {
-    if (tree.value) {
-      selected.value = collectSelectedIds(tree.value)
-    }
-  },
-  { deep: true }
-)
-defineExpose({
-  reset
-})
+
+defineExpose({ reset: resetSelection })
 </script>
+
+<template>
+  <div>
+    <ul>
+      <template
+        v-for="node in nodes"
+        :key="node.id"
+      >
+        <a-tree-select-node
+          v-if="!node.hidden"
+          :node="node"
+          :toggle-expand="toggleExpand"
+          :toggle-checkbox="toggleCheckbox"
+          :type="type"
+          :disabled="isDisabled(node.id)"
+        >
+          <template v-if="$slots.label" #label="slotProps">
+            <slot name="label" v-bind="slotProps" />
+          </template>
+        </a-tree-select-node>
+      </template>
+    </ul>
+  </div>
+</template>