adata-ui 2.1.41-beta.7 → 2.1.41-beta.9

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

@@ -1,199 +1,199 @@
-<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-start gap-[34px] lg:gap-13"
-    :class="colsClass"
-  >
-    <div class="flex flex-col">
-      <ol class="relative flex flex-col gap-1.5">
-        <!-- Одна непрерывная линия с прогрессивной заливкой (как в макете),
-             а не дискретные сегменты между шагами. Линия проходит ЗА кружками,
-             поэтому их фон обязан быть непрозрачным (см. ниже). -->
-        <span
-          v-if="steps.length > 1"
-          class="absolute inset-y-9 left-[31px] z-0 w-0.5 overflow-hidden rounded bg-badge"
-          aria-hidden="true"
-        >
-          <span
-            class="ss-line-fill absolute inset-x-0 top-0 rounded bg-brand"
-            :style="{ height: `${(active / (steps.length - 1)) * 100}%` }"
-          />
-        </span>
-
-        <li
-          v-for="(step, i) in steps"
-          :key="i"
-          class="ss-step relative z-10 flex cursor-pointer gap-[15px] rounded-14 px-4 py-3.5"
-          :class="i === active ? 'ss-step-on bg-main' : ''"
-          @click="goTo(i)"
-        >
-          <!-- Фон кружка только НЕПРОЗРАЧНЫМИ токенами: bg-brand-subtle в тёмной
-               теме = #068DFF1A (10% альфы), и линия прогресса просвечивала
-               сквозь пройденный шаг. Для дарка берём непрозрачный brand-900. -->
-          <span
-            class="relative z-10 flex size-[34px] shrink-0 items-center justify-center rounded-full text-body-md font-bold transition-all duration-300"
-            :class="i === active
-              ? 'ss-num-glow scale-[1.08] bg-brand text-inverted'
-              : i < active
-                ? 'bg-brand-100 text-brand dark:bg-brand-900 dark:text-brand-300'
-                : 'bg-canvas text-secondary'"
-          >
-            {{ i + 1 }}
-          </span>
-          <div>
-            <p
-              class="text-body-md-strong transition-colors"
-              :class="i === active ? 'text-primary' : 'text-secondary'"
-            >
-              {{ step.title }}
-            </p>
-            <p class="mt-[3px] text-body-sm leading-normal text-secondary">
-              {{ step.description }}
-            </p>
-          </div>
-        </li>
-      </ol>
-
-      <slot name="steps-footer" />
-    </div>
-
-    <div
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-    >
-      <slot
-        name="panel"
-        :active="active"
-        :step="steps[active]"
-        :progress="progress"
-        :count="steps.length"
-        :fill-width="fillWidth"
-        :go-to="goTo"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.ss-line-fill {
-  transition: height .6s cubic-bezier(.4, 0, .2, 1);
-}
-
-.ss-step {
-  background: transparent;
-  transition: background .4s, box-shadow .4s;
-}
-
-.ss-step-on {
-  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--color-brand-500) 30%, transparent);
-}
-
-.ss-num-glow {
-  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-brand-500) 55%, transparent);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ss-line-fill,
-  .ss-step {
-    transition: none;
-  }
-}
-</style>
+<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-start gap-[34px] lg:gap-13"
+    :class="colsClass"
+  >
+    <div class="flex flex-col">
+      <ol class="relative flex flex-col gap-1.5">
+        <!-- Одна непрерывная линия с прогрессивной заливкой (как в макете),
+             а не дискретные сегменты между шагами. Линия проходит ЗА кружками,
+             поэтому их фон обязан быть непрозрачным (см. ниже). -->
+        <span
+          v-if="steps.length > 1"
+          class="absolute inset-y-9 left-[31px] z-0 w-0.5 overflow-hidden rounded bg-badge"
+          aria-hidden="true"
+        >
+          <span
+            class="ss-line-fill absolute inset-x-0 top-0 rounded bg-brand"
+            :style="{ height: `${(active / (steps.length - 1)) * 100}%` }"
+          />
+        </span>
+
+        <li
+          v-for="(step, i) in steps"
+          :key="i"
+          class="ss-step relative z-10 flex cursor-pointer gap-[15px] rounded-14 px-4 py-3.5"
+          :class="i === active ? 'ss-step-on bg-main' : ''"
+          @click="goTo(i)"
+        >
+          <!-- Фон кружка только НЕПРОЗРАЧНЫМИ токенами: bg-brand-subtle в тёмной
+               теме = #068DFF1A (10% альфы), и линия прогресса просвечивала
+               сквозь пройденный шаг. Для дарка берём непрозрачный brand-900. -->
+          <span
+            class="relative z-10 flex size-[34px] shrink-0 items-center justify-center rounded-full text-body-md font-bold transition-all duration-300"
+            :class="i === active
+              ? 'ss-num-glow scale-[1.08] bg-brand text-inverted'
+              : i < active
+                ? 'bg-brand-100 text-brand dark:bg-brand-900 dark:text-brand-300'
+                : 'bg-canvas text-secondary'"
+          >
+            {{ i + 1 }}
+          </span>
+          <div>
+            <p
+              class="text-body-md-strong transition-colors"
+              :class="i === active ? 'text-primary' : 'text-secondary'"
+            >
+              {{ step.title }}
+            </p>
+            <p class="mt-[3px] text-body-sm leading-normal text-secondary">
+              {{ step.description }}
+            </p>
+          </div>
+        </li>
+      </ol>
+
+      <slot name="steps-footer" />
+    </div>
+
+    <div
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <slot
+        name="panel"
+        :active="active"
+        :step="steps[active]"
+        :progress="progress"
+        :count="steps.length"
+        :fill-width="fillWidth"
+        :go-to="goTo"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ss-line-fill {
+  transition: height .6s cubic-bezier(.4, 0, .2, 1);
+}
+
+.ss-step {
+  background: transparent;
+  transition: background .4s, box-shadow .4s;
+}
+
+.ss-step-on {
+  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--color-brand-500) 30%, transparent);
+}
+
+.ss-num-glow {
+  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-brand-500) 55%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ss-line-fill,
+  .ss-step {
+    transition: none;
+  }
+}
+</style>

package/components/elements/table/ATable.vue

@@ -1,93 +1,93 @@
-<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>
+<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-main',
-  base: 'min-w-full table-fixed ',
-  divide: '',
-  thead: 'relative bg-badge',
-  tbody: '',
-  tr: {
-    base: 'even:bg-muted',
-    selected: 'bg-muted',
-    active: 'hover:bg-action-secondary-hover cursor-pointer',
-  },
-  th: {
-    base: 'text-left rtl:text-right',
-    padding: 'px-4 py-3.5',
-    color: 'text-primary',
-    font: 'font-semibold',
-    size: 'text-body-sm',
-  },
-  td: {
-    base: '',
-    padding: {
-      sm: 'px-3 py-2',
-      md: 'px-4 py-4'
-    },
-    color: 'text-primary',
-    font: '',
-    size: 'text-body-md',
-  },
-  progress: {
-    wrapper: 'absolute inset-x-0 h-[2px] animate-pulse bg-action-primary',
-  },
-}
+export const ui = {
+  wrapper: 'relative overflow-x-auto rounded bg-main',
+  base: 'min-w-full table-fixed ',
+  divide: '',
+  thead: 'relative bg-badge',
+  tbody: '',
+  tr: {
+    base: 'even:bg-muted',
+    selected: 'bg-muted',
+    active: 'hover:bg-action-secondary-hover cursor-pointer',
+  },
+  th: {
+    base: 'text-left rtl:text-right',
+    padding: 'px-4 py-3.5',
+    color: 'text-primary',
+    font: 'font-semibold',
+    size: 'text-body-sm',
+  },
+  td: {
+    base: '',
+    padding: {
+      sm: 'px-3 py-2',
+      md: 'px-4 py-4'
+    },
+    color: 'text-primary',
+    font: '',
+    size: 'text-body-md',
+  },
+  progress: {
+    wrapper: 'absolute inset-x-0 h-[2px] animate-pulse bg-action-primary',
+  },
+}