adata-ui 2.1.40-beta.8 → 2.1.40

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,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 { twMerge } from '#adata-ui/utils/twMerge'
+import {ui} from './table.config'
+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-body-sm',
+  },
+  td: {
+    base: '',
+    padding: {
+      sm: 'px-3 py-2',
+      md: 'px-4 py-4'
+    },
+    color: 'text-deepblue-900 dark:text-gray-200',
+    font: '',
+    size: 'text-body-md',
+  },
+  progress: {
+    wrapper: 'absolute h-[2px] bg-deepblue-700 inset-x-0  animate-pulse',
+  },
+}