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

package/components/elements/star-rating/ui/Star.vue

@@ -1,74 +1,74 @@
-<script setup lang="ts">
-import HalfStar from "#adata-ui/icons/star/star-half-filled.vue";
-import FillStar from "#adata-ui/icons/star/star-filled.vue";
-import Star from "#adata-ui/icons/star/star.vue";
-import type {SelectEvent, StarMoveEvent} from "./../types";
-
-interface Props {
-  fill: number;
-  size?: number;
-  starId: number;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 16,
-  fill: 0,
-})
-
-const emit = defineEmits<{
-  (e: 'star-mouse-move', event: StarMoveEvent): void,
-  (e: 'star-selected', event: SelectEvent): void
-}>()
-
-const star = computed(() => {
-  if (props.fill === 0) {
-    return Star
-  } else if (props.fill > 0 && props.fill <= 50) {
-    return HalfStar
-  } else {
-    return FillStar
-  }
-})
-
-const getPosition = (event: MouseEvent) => {
-  const starWidth = (92 / 100) * props.size
-  const offset = Math.max(event.offsetX, 1)
-  const position = Math.round((100 / starWidth) * offset)
-
-  return Math.min(position, 100)
-}
-
-const mouseMoving = (event: MouseEvent) => {
-  if (event.touchAction !== 'undefined') {
-    emit('star-mouse-move', {
-      event: event,
-      position: getPosition(event),
-      id: props.starId
-    })
-  }
-}
-
-const selected = (event: MouseEvent) => {
-  emit('star-selected', {
-    id: props.starId,
-    position: getPosition(event)
-  })
-}
-</script>
-
-<template>
-  <div>
-    <component
-      :is="star"
-      class="cursor-pointer"
-      :width="size"
-      :height="size"
-      @mousemove="mouseMoving"
-      @click="selected"
-    />
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import HalfStar from "#adata-ui/icons/star/star-half-filled.vue";
+import FillStar from "#adata-ui/icons/star/star-filled.vue";
+import Star from "#adata-ui/icons/star/star.vue";
+import type {SelectEvent, StarMoveEvent} from "./../types";
+
+interface Props {
+  fill: number;
+  size?: number;
+  starId: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 16,
+  fill: 0,
+})
+
+const emit = defineEmits<{
+  (e: 'star-mouse-move', event: StarMoveEvent): void,
+  (e: 'star-selected', event: SelectEvent): void
+}>()
+
+const star = computed(() => {
+  if (props.fill === 0) {
+    return Star
+  } else if (props.fill > 0 && props.fill <= 50) {
+    return HalfStar
+  } else {
+    return FillStar
+  }
+})
+
+const getPosition = (event: MouseEvent) => {
+  const starWidth = (92 / 100) * props.size
+  const offset = Math.max(event.offsetX, 1)
+  const position = Math.round((100 / starWidth) * offset)
+
+  return Math.min(position, 100)
+}
+
+const mouseMoving = (event: MouseEvent) => {
+  if (event.touchAction !== 'undefined') {
+    emit('star-mouse-move', {
+      event: event,
+      position: getPosition(event),
+      id: props.starId
+    })
+  }
+}
+
+const selected = (event: MouseEvent) => {
+  emit('star-selected', {
+    id: props.starId,
+    position: getPosition(event)
+  })
+}
+</script>
+
+<template>
+  <div>
+    <component
+      :is="star"
+      class="cursor-pointer"
+      :width="size"
+      :height="size"
+      @mousemove="mouseMoving"
+      @click="selected"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/status-badge/AStatusBadge.vue

@@ -1,105 +1,121 @@
-<script lang="ts" setup>
-type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'warning'
-type BadgeView = 'default' | 'inverted' | 'transparent'
-type BadgeSize = 'xs' | 'sm' | 'lg'
-
-type StateType = {
-  [key in BadgeType]?: string
-}
-
-interface ViewType {
-  default: StateType
-  inverted: StateType
-  transparent: StateType
-}
-
-interface Props {
-  type?: BadgeType
-  view?: BadgeView
-  size?: BadgeSize
-  point?: boolean
-  customClasses?: string
-}
-
-defineOptions({ name: 'AStatusBadge' })
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'primary',
-  view: 'default',
-  size: 'lg',
-  point: false,
-  customClasses: '',
-})
-
-const typeSwitchValues: ViewType = {
-  default: {
-    primary: 'bg-[#068DFF] text-white border-transparent dark:bg-[#068DFF]/30 dark:text-blue-100',
-    success: 'bg-[#00A63E] text-white border-transparent dark:bg-[#00A63E]/30 dark:text-green-100',
-    danger: 'bg-[#E7000B] text-white border-transparent dark:bg-[#E7000B]/30 dark:text-red-100',
-    warning: 'bg-[#E17100] text-white border-transparent dark:bg-[#E17100]/30 dark:text-orange-100',
-    gray: 'bg-[#4A5565] text-white border-transparent dark:bg-[#4A5565]/30 dark:text-gray-100',
-  },
-  inverted: {
-    primary: 'bg-[#F0F8FF] text-[#068DFF] border-transparent dark:bg-[#068DFF]/10 dark:text-blue-400',
-    success: 'bg-[#DCFCE7] text-[#008236] border-transparent dark:bg-[#00A63E]/10 dark:text-green-400',
-    danger: 'bg-[#FFE2E2] text-[#C10007] border-transparent dark:bg-[#E7000B]/10 dark:text-red-400',
-    warning: 'bg-[#FEF3C6] text-[#9A5800] border-transparent dark:bg-[#E17100]/10 dark:text-orange-400',
-    gray: 'bg-[#F3F4F6] text-[#364153] border-transparent dark:bg-[#4A5565]/10 dark:text-gray-300',
-  },
-  transparent: {
-    primary: 'bg-white border-[#B3DCFF] text-[#0066BD] dark:bg-transparent dark:border-[#068DFF]/50 dark:text-blue-400',
-    success: 'bg-white border-[#7BF1A8] text-[#008236] dark:bg-transparent dark:border-[#00A63E]/50 dark:text-green-400',
-    danger: 'bg-white border-[#FFA2A2] text-[#C10007] dark:bg-transparent dark:border-[#E7000B]/50 dark:text-red-400',
-    warning: 'bg-white border-[#FFD230] text-[#9A5800] dark:bg-transparent dark:border-[#E17100]/50 dark:text-orange-400',
-    gray: 'bg-white border-[#D1D5DC] text-[#364153] dark:bg-transparent dark:border-[#4A5565]/50 dark:text-gray-300',
-  },
-}
-
-const pointSwitchValues: ViewType = {
-  default: {
-    primary: 'bg-white',
-    success: 'bg-white',
-    danger: 'bg-white',
-    warning: 'bg-white',
-    gray: 'bg-white',
-  },
-  inverted: {
-    primary: 'bg-[#068DFF] dark:bg-blue-400',
-    success: 'bg-[#00A63E] dark:bg-green-400',
-    danger: 'bg-[#E7000B] dark:bg-red-400',
-    warning: 'bg-[#E17100] dark:bg-orange-400',
-    gray: 'bg-[#6A7282] dark:bg-gray-300',
-  },
-  transparent: {
-    primary: 'bg-[#068DFF] dark:bg-blue-400',
-    success: 'bg-[#00A63E] dark:bg-green-400',
-    danger: 'bg-[#E7000B] dark:bg-red-400',
-    warning: 'bg-[#E17100] dark:bg-orange-400',
-    gray: 'bg-[#6A7282] dark:bg-gray-300',
-  },
-}
-
-const classes = computed(() =>
-  [
-    'text-body-md rounded-2xl select-none inline-flex gap-[5.5px] justify-center items-center border',
-    typeSwitchValues[props.view][props.type],
-    props.size === 'xs' ? 'px-2 py-[2px] text-body-sm font-bold' : '',
-    props.size === 'sm' ? 'px-[10px] py-1 text-body-sm font-semibold h-6' : '',
-    props.size === 'lg' ? 'px-3 py-[6px] font-semibold' : '',
-  ])
-
-const pointClasses = computed(() =>
-  [
-    'w-1.5 h-1.5 rounded-full shrink-0',
-    pointSwitchValues[props.view][props.type],
-  ])
-</script>
-
-<template>
-  <div :class="[[classes], customClasses]">
-    <slot name="point">
-      <span v-if="point" :class="pointClasses" />
-    </slot>
-    <slot />
-  </div>
-</template>
+<script lang="ts" setup>
+type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'warning'
+type BadgeView = 'default' | 'inverted' | 'transparent' | 'subtle'
+type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+
+type StateType = {
+  [key in BadgeType]?: string
+}
+
+interface ViewType {
+  default: StateType
+  inverted: StateType
+  transparent: StateType
+  subtle: StateType
+}
+
+interface Props {
+  type?: BadgeType
+  view?: BadgeView
+  size?: BadgeSize
+  point?: boolean
+  customClasses?: string
+}
+
+defineOptions({ name: 'AStatusBadge' })
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'default',
+  size: 'lg',
+  point: false,
+  customClasses: '',
+})
+
+const typeSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-[#068DFF] text-white border-transparent dark:bg-[#068DFF]/30 dark:text-blue-100',
+    success: 'bg-[#00A63E] text-white border-transparent dark:bg-[#00A63E]/30 dark:text-green-100',
+    danger: 'bg-[#E7000B] text-white border-transparent dark:bg-[#E7000B]/30 dark:text-red-100',
+    warning: 'bg-[#E17100] text-white border-transparent dark:bg-[#E17100]/30 dark:text-orange-100',
+    gray: 'bg-[#4A5565] text-white border-transparent dark:bg-[#4A5565]/30 dark:text-gray-100',
+  },
+  inverted: {
+    primary: 'bg-[#F0F8FF] text-[#068DFF] border-transparent dark:bg-[#068DFF]/10 dark:text-blue-400',
+    success: 'bg-[#DCFCE7] text-[#008236] border-transparent dark:bg-[#00A63E]/10 dark:text-green-400',
+    danger: 'bg-[#FFE2E2] text-[#C10007] border-transparent dark:bg-[#E7000B]/10 dark:text-red-400',
+    warning: 'bg-[#FEF3C6] text-[#9A5800] border-transparent dark:bg-[#E17100]/10 dark:text-orange-400',
+    gray: 'bg-[#F3F4F6] text-[#364153] border-transparent dark:bg-[#4A5565]/10 dark:text-gray-300',
+  },
+  transparent: {
+    primary: 'bg-white border-[#B3DCFF] text-[#0066BD] dark:bg-transparent dark:border-[#068DFF]/50 dark:text-blue-400',
+    success: 'bg-white border-[#7BF1A8] text-[#008236] dark:bg-transparent dark:border-[#00A63E]/50 dark:text-green-400',
+    danger: 'bg-white border-[#FFA2A2] text-[#C10007] dark:bg-transparent dark:border-[#E7000B]/50 dark:text-red-400',
+    warning: 'bg-white border-[#FFD230] text-[#9A5800] dark:bg-transparent dark:border-[#E17100]/50 dark:text-orange-400',
+    gray: 'bg-white border-[#D1D5DC] text-[#364153] dark:bg-transparent dark:border-[#4A5565]/50 dark:text-gray-300',
+  },
+  subtle: {
+    primary: 'bg-[#068DFF]/5 border-[#B3DCFF] text-[#068DFF] dark:bg-blue-500/10 dark:border-[#068DFF]/40 dark:text-blue-400',
+    success: 'bg-[#00A63E]/5 border-[#7BF1A8] text-[#00A63E] dark:bg-green-500/10 dark:border-[#00A63E]/40 dark:text-green-400',
+    danger: 'bg-[#E7000B]/5 border-[#FFA2A2] text-[#E7000B] dark:bg-red-500/10 dark:border-[#E7000B]/40 dark:text-red-400',
+    warning: 'bg-[#E17100]/5 border-[#FFD230] text-[#E17100] dark:bg-yellow-500/10 dark:border-[#E17100]/40 dark:text-orange-400',
+    gray: 'bg-[#4A5565]/5 border-[#D1D5DC] text-[#4A5565] dark:bg-gray-500/10 dark:border-[#4A5565]/40 dark:text-gray-300',
+  },
+}
+
+const pointSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-white',
+    success: 'bg-white',
+    danger: 'bg-white',
+    warning: 'bg-white',
+    gray: 'bg-white',
+  },
+  inverted: {
+    primary: 'bg-[#068DFF] dark:bg-blue-400',
+    success: 'bg-[#00A63E] dark:bg-green-400',
+    danger: 'bg-[#E7000B] dark:bg-red-400',
+    warning: 'bg-[#E17100] dark:bg-orange-400',
+    gray: 'bg-[#6A7282] dark:bg-gray-300',
+  },
+  transparent: {
+    primary: 'bg-[#068DFF] dark:bg-blue-400',
+    success: 'bg-[#00A63E] dark:bg-green-400',
+    danger: 'bg-[#E7000B] dark:bg-red-400',
+    warning: 'bg-[#E17100] dark:bg-orange-400',
+    gray: 'bg-[#6A7282] dark:bg-gray-300',
+  },
+  subtle: {
+    primary: 'bg-[#068DFF] dark:bg-blue-400',
+    success: 'bg-[#00A63E] dark:bg-green-400',
+    danger: 'bg-[#E7000B] dark:bg-red-400',
+    warning: 'bg-[#E17100] dark:bg-orange-400',
+    gray: 'bg-[#6A7282] dark:bg-gray-300',
+  },
+}
+
+const classes = computed(() =>
+  [
+    'text-body-md rounded-2xl select-none inline-flex gap-[5.5px] justify-center items-center border',
+    typeSwitchValues[props.view][props.type],
+    props.size === 'xs' ? 'px-2 py-[2px] text-body-sm font-bold' : '',
+    props.size === 'sm' ? 'px-[10px] py-1 text-body-sm font-semibold h-6' : '',
+    props.size === 'md' ? 'px-3 py-[6x] text-body-sm font-semibold h-7' : '',
+    props.size === 'lg' ? 'px-4 py-[6px] font-semibold' : '',
+  ])
+
+const pointClasses = computed(() =>
+  [
+    'w-1.5 h-1.5 rounded-full shrink-0',
+    pointSwitchValues[props.view][props.type],
+  ])
+</script>
+
+<template>
+  <div :class="[[classes], customClasses]">
+    <slot name="point">
+      <span v-if="point" :class="pointClasses" />
+    </slot>
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+interface Step {
+  title: string
+  description: string
+  icon?: Component
+  iconBg?: string
+  iconColor?: string
+  chips?: string[]
+}
+
+const props = withDefaults(defineProps<{
+  steps: Step[]
+  interval?: number
+  autoplay?: boolean
+  pauseOnHover?: boolean
+  modelValue?: number
+  colsClass?: string
+  expandable?: boolean
+}>(), {
+  interval: 5000,
+  autoplay: true,
+  pauseOnHover: true,
+  modelValue: undefined,
+  colsClass: 'lg:grid-cols-2',
+  expandable: true,
+})
+
+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 gap-4 lg:gap-10"
+    :class="colsClass"
+  >
+    <ol class="flex flex-col gap-3">
+      <li
+        v-for="(step, i) in steps"
+        :key="i"
+        class="ss-card group relative cursor-pointer overflow-hidden rounded-2xl border bg-white transition-all duration-300"
+        :class="i === active
+          ? 'ss-card-active border-blue-200'
+          : 'border-gray-200 hover:border-blue-100'"
+        @click="goTo(i)"
+      >
+        <div class="p-4">
+          <div
+            class="flex gap-4"
+            :class="expandable ? 'items-center' : 'items-start'"
+          >
+            <span
+              class="flex size-11 shrink-0 items-center justify-center rounded-xl"
+              :class="step.iconBg || 'bg-blue-50'"
+            >
+              <component
+                :is="step.icon"
+                v-if="step.icon"
+                class="size-5"
+                :class="step.iconColor || 'text-blue-600'"
+              />
+            </span>
+            <div class="min-w-0 flex-1">
+              <p class="text-body-md-strong md:text-body-lg-strong text-gray-900">
+                {{ step.title }}
+              </p>
+
+              <div v-if="!expandable">
+                <p class="mt-1 text-body-sm text-gray-500">
+                  {{ step.description }}
+                </p>
+                <div
+                  v-if="step.chips?.length"
+                  class="mt-3 flex flex-wrap gap-2"
+                >
+                  <a-status-badge
+                    v-for="(chip, ci) in step.chips"
+                    :key="ci"
+                    type="primary"
+                    view="inverted"
+                    size="xs"
+                    custom-classes="!text-body-sm-medium"
+                  >
+                    {{ chip }}
+                  </a-status-badge>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="expandable"
+            class="grid transition-all duration-500 ease-out"
+            :class="i === active
+              ? 'mt-3 grid-rows-[1fr] opacity-100'
+              : 'grid-rows-[0fr] opacity-0'"
+          >
+            <div class="overflow-hidden">
+              <p class="text-body-sm text-gray-500">
+                {{ step.description }}
+              </p>
+              <div
+                v-if="step.chips?.length"
+                class="mt-3 flex flex-wrap gap-2"
+              >
+                <a-status-badge
+                  v-for="(chip, ci) in step.chips"
+                  :key="ci"
+                  type="primary"
+                  view="inverted"
+                  size="xs"
+                  custom-classes="!text-body-sm-medium"
+                >
+                  {{ chip }}
+                </a-status-badge>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <span
+          v-if="i === active && autoplay && steps.length > 1"
+          class="absolute inset-x-0 bottom-0 h-1 bg-gray-100"
+        >
+          <span
+            class="block h-full rounded-r-full bg-gradient-to-r from-blue-600 to-blue-400 transition-[width] duration-100 ease-linear"
+            :style="{ width: fillWidth }"
+          />
+        </span>
+      </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-card-active {
+  box-shadow: 0 22px 60px -18px rgb(6 141 255 / 22%);
+}
+</style>