adata-ui 2.1.41-beta.21 → 2.1.41-beta.22

package/components/elements/calendar-v2/date-utils.ts

@@ -0,0 +1,217 @@
+import type { DateRange, DisabledDates } from './types'
+
+/**
+ * Чистые date-хелперы календаря — без Vue, чтобы их можно было покрыть тестами
+ * и переиспользовать в потребителях.
+ *
+ * Все даты нормализуются к началу суток в ЛОКАЛЬНОЙ зоне: календарь показывает
+ * тот же день, который пользователь видит на часах. Сериализация в ISO делается
+ * вручную (`toISODate`), а не через `toISOString`, — иначе UTC-сдвиг съезжает на
+ * сутки для зон восточнее Гринвича (Алматы — UTC+5).
+ */
+
+export const MS_IN_DAY = 86_400_000
+
+/** Воскресенье — чтобы строить названия дней недели в любом порядке. */
+const WEEKDAY_REFERENCE = new Date(2024, 0, 7)
+
+export function startOfDay(date: Date): Date {
+  const next = new Date(date)
+  next.setHours(0, 0, 0, 0)
+  return next
+}
+
+export function isValidDate(value: unknown): value is Date {
+  return value instanceof Date && !Number.isNaN(value.getTime())
+}
+
+/** Приводит `Date | string | number | null` к нормализованной дате или null. */
+export function toDate(value: Date | string | number | null | undefined): Date | null {
+  if (value == null || value === '') return null
+  const date = value instanceof Date ? new Date(value) : new Date(value)
+  return isValidDate(date) ? date : null
+}
+
+export function isSameDay(a: Date | null, b: Date | null): boolean {
+  if (!a || !b) return false
+  return a.getFullYear() === b.getFullYear()
+    && a.getMonth() === b.getMonth()
+    && a.getDate() === b.getDate()
+}
+
+export function isSameMonth(a: Date | null, b: Date | null): boolean {
+  if (!a || !b) return false
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth()
+}
+
+export function addDays(date: Date, amount: number): Date {
+  const next = new Date(date)
+  next.setDate(next.getDate() + amount)
+  return next
+}
+
+/**
+ * Прибавляет месяцы, зажимая число: 31 января + 1 месяц = 28/29 февраля,
+ * а не 2/3 марта (как получилось бы при наивном setMonth).
+ */
+export function addMonths(date: Date, amount: number): Date {
+  const next = new Date(date)
+  const day = next.getDate()
+  next.setDate(1)
+  next.setMonth(next.getMonth() + amount)
+  next.setDate(Math.min(day, daysInMonth(next.getFullYear(), next.getMonth())))
+  return next
+}
+
+export function addYears(date: Date, amount: number): Date {
+  return addMonths(date, amount * 12)
+}
+
+export function daysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+export function startOfMonth(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), 1)
+}
+
+export function endOfMonth(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0)
+}
+
+export function startOfYear(date: Date): Date {
+  return new Date(date.getFullYear(), 0, 1)
+}
+
+export function endOfYear(date: Date): Date {
+  return new Date(date.getFullYear(), 11, 31)
+}
+
+export function startOfWeek(date: Date, firstDayOfWeek: number): Date {
+  const shift = (date.getDay() - firstDayOfWeek + 7) % 7
+  return startOfDay(addDays(date, -shift))
+}
+
+export function compareDays(a: Date, b: Date): number {
+  return startOfDay(a).getTime() - startOfDay(b).getTime()
+}
+
+export function isBeforeDay(a: Date, b: Date): boolean {
+  return compareDays(a, b) < 0
+}
+
+export function isAfterDay(a: Date, b: Date): boolean {
+  return compareDays(a, b) > 0
+}
+
+export function isWithinDays(date: Date, start: Date | null, end: Date | null): boolean {
+  if (!start || !end) return false
+  const from = compareDays(start, end) <= 0 ? start : end
+  const to = compareDays(start, end) <= 0 ? end : start
+  return !isBeforeDay(date, from) && !isAfterDay(date, to)
+}
+
+export function clampDate(date: Date, min: Date | null, max: Date | null): Date {
+  if (min && isBeforeDay(date, min)) return startOfDay(min)
+  if (max && isAfterDay(date, max)) return startOfDay(max)
+  return startOfDay(date)
+}
+
+/** Range всегда отдаётся наружу упорядоченным, как бы его ни кликали. */
+export function normalizeRange(range: DateRange): DateRange {
+  const { start, end } = range
+  if (start && end && isAfterDay(start, end)) {
+    return { start: end, end: start }
+  }
+  return range
+}
+
+export function isDateDisabled(
+  date: Date,
+  options: { min?: Date | null, max?: Date | null, disabledDates?: DisabledDates },
+): boolean {
+  const { min, max, disabledDates } = options
+
+  if (min && isBeforeDay(date, min)) return true
+  if (max && isAfterDay(date, max)) return true
+
+  if (typeof disabledDates === 'function') return disabledDates(date)
+  if (Array.isArray(disabledDates)) return disabledDates.some(item => isSameDay(item, date))
+
+  return false
+}
+
+/**
+ * Матрица месяца 6×7. Всегда шесть строк — иначе панель прыгает по высоте
+ * при переключении месяцев.
+ */
+export function buildMonthMatrix(year: number, month: number, firstDayOfWeek: number): Date[][] {
+  const first = startOfWeek(new Date(year, month, 1), firstDayOfWeek)
+  const weeks: Date[][] = []
+
+  for (let week = 0; week < 6; week++) {
+    const days: Date[] = []
+    for (let day = 0; day < 7; day++) {
+      days.push(addDays(first, week * 7 + day))
+    }
+    weeks.push(days)
+  }
+
+  return weeks
+}
+
+/** Номер ISO-недели — для колонки с номерами недель. */
+export function getISOWeek(date: Date): number {
+  const target = startOfDay(date)
+  // Четверг той же недели определяет год недели по ISO 8601.
+  target.setDate(target.getDate() + 3 - ((target.getDay() + 6) % 7))
+  const firstThursday = new Date(target.getFullYear(), 0, 4)
+  firstThursday.setDate(firstThursday.getDate() + 3 - ((firstThursday.getDay() + 6) % 7))
+  return 1 + Math.round((target.getTime() - firstThursday.getTime()) / (7 * MS_IN_DAY))
+}
+
+export function getWeekdayNames(locale: string, firstDayOfWeek: number, format: 'short' | 'narrow' = 'short'): string[] {
+  const formatter = new Intl.DateTimeFormat(locale, { weekday: format })
+  return Array.from({ length: 7 }, (_, index) =>
+    formatter.format(addDays(WEEKDAY_REFERENCE, (firstDayOfWeek + index) % 7)))
+}
+
+export function getMonthNames(locale: string, format: 'long' | 'short' = 'long'): string[] {
+  const formatter = new Intl.DateTimeFormat(locale, { month: format })
+  return Array.from({ length: 12 }, (_, month) => formatter.format(new Date(2024, month, 1)))
+}
+
+export function formatDate(date: Date | null, locale: string, options?: Intl.DateTimeFormatOptions): string {
+  if (!date) return ''
+  return new Intl.DateTimeFormat(locale, options ?? { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date)
+}
+
+/** Локальная дата в ГГГГ-ММ-ДД — формат, который обычно ждут бэкенды. */
+export function toISODate(date: Date | null): string {
+  if (!date) return ''
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${date.getFullYear()}-${month}-${day}`
+}
+
+/** 'дд.мм.гггг' → Date; возвращает null, если такой даты не существует. */
+export function parseDisplayDate(value: string): Date | null {
+  const match = /^\s*(\d{1,2})[.\-/](\d{1,2})[.\-/](\d{4})\s*$/.exec(value ?? '')
+  if (!match) return null
+
+  const day = Number(match[1])
+  const month = Number(match[2])
+  const year = Number(match[3])
+  const date = new Date(year, month - 1, day)
+
+  const isReal = date.getFullYear() === year
+    && date.getMonth() === month - 1
+    && date.getDate() === day
+
+  return isReal ? startOfDay(date) : null
+}
+
+/** Год, с которого начинается страница сетки лет (по 12 лет на страницу). */
+export function startOfYearPage(year: number, pageSize = 12): number {
+  return Math.floor(year / pageSize) * pageSize
+}

package/components/elements/calendar-v2/presets.ts

@@ -0,0 +1,58 @@
+import type { CalendarPreset } from './types'
+import { addDays, addMonths, endOfMonth, endOfYear, startOfDay, startOfMonth, startOfYear } from './date-utils'
+
+/**
+ * Готовый набор пресетов для режима `range`.
+ *
+ * `label` — ключи i18n; ACalendarV2 переводит их сам (`te` → `t`), а если ключа
+ * нет, покажет строку как есть. Набор можно фильтровать или дополнять:
+ *
+ * ```ts
+ * const presets = getRangePresets().filter(p => p.key !== 'year')
+ * ```
+ */
+export function getRangePresets(): CalendarPreset[] {
+  return [
+    {
+      key: 'today',
+      label: 'calendar.presets.today',
+      value: () => ({ start: startOfDay(new Date()), end: startOfDay(new Date()) }),
+    },
+    {
+      key: 'yesterday',
+      label: 'calendar.presets.yesterday',
+      value: () => {
+        const day = addDays(startOfDay(new Date()), -1)
+        return { start: day, end: day }
+      },
+    },
+    {
+      key: 'last7',
+      label: 'calendar.presets.last7',
+      value: () => ({ start: addDays(startOfDay(new Date()), -6), end: startOfDay(new Date()) }),
+    },
+    {
+      key: 'last30',
+      label: 'calendar.presets.last30',
+      value: () => ({ start: addDays(startOfDay(new Date()), -29), end: startOfDay(new Date()) }),
+    },
+    {
+      key: 'thisMonth',
+      label: 'calendar.presets.thisMonth',
+      value: () => ({ start: startOfMonth(new Date()), end: endOfMonth(new Date()) }),
+    },
+    {
+      key: 'prevMonth',
+      label: 'calendar.presets.prevMonth',
+      value: () => {
+        const prev = addMonths(new Date(), -1)
+        return { start: startOfMonth(prev), end: endOfMonth(prev) }
+      },
+    },
+    {
+      key: 'thisYear',
+      label: 'calendar.presets.thisYear',
+      value: () => ({ start: startOfYear(new Date()), end: endOfYear(new Date()) }),
+    },
+  ]
+}

package/components/elements/calendar-v2/types.ts

@@ -0,0 +1,84 @@
+/** Что выбирает календарь. */
+export type CalendarMode = 'single' | 'range' | 'multiple'
+
+/** Точность выбора: день, месяц целиком или год целиком. */
+export type CalendarPrecision = 'day' | 'month' | 'year'
+
+/** Какая сетка показана сейчас (внутреннее состояние навигации по заголовку). */
+export type CalendarPanel = 'days' | 'months' | 'years'
+
+export type CalendarSize = 'sm' | 'md'
+
+export interface DateRange {
+  start: Date | null
+  end: Date | null
+}
+
+export type CalendarModelValue = Date | DateRange | Date[] | null
+
+/** Быстрый выбор: «Последние 7 дней», «Этот месяц» и т.п. */
+export interface CalendarPreset {
+  key: string
+  /** Готовая строка либо ключ i18n — компонент переводит, если ключ существует. */
+  label: string
+  value: () => Date | DateRange | Date[]
+}
+
+export type DisabledDates = Date[] | ((date: Date) => boolean)
+
+/**
+ * Пропсы сетки, общие для ACalendarV2 и ADatePickerV2: пикер принимает их
+ * и прокидывает в календарь как есть. Новый проп сетки добавляется здесь один
+ * раз и появляется у обоих компонентов — останется только пробросить его
+ * в шаблоне пикера.
+ */
+export interface CalendarBaseProps {
+  /** single — одна дата, range — период, multiple — произвольный набор дат. */
+  mode?: CalendarMode
+  /** Точность выбора. month/year открывают сразу соответствующую сетку. */
+  precision?: CalendarPrecision
+  /** BCP-47. По умолчанию — текущая локаль приложения. */
+  locale?: string
+  min?: Date | string | number | null
+  max?: Date | string | number | null
+  /** Массив запрещённых дат либо предикат. */
+  disabledDates?: DisabledDates
+  /** 1 — понедельник (по умолчанию), 0 — воскресенье. */
+  firstDayOfWeek?: number
+  /** Сколько месяцев показывать рядом (1–2). Для периода удобны два. */
+  months?: number
+  /** Быстрый выбор сбоку. Готовый набор — `getRangePresets()` из ./presets. */
+  presets?: CalendarPreset[]
+  weekNumbers?: boolean
+  /** Выбор времени. Работает для single и range (по одному контролу на конец). */
+  showTime?: boolean
+  minuteStep?: number
+  size?: CalendarSize
+  highlightWeekends?: boolean
+}
+
+export interface CalendarDayCell {
+  date: Date
+  /** Стабильный ключ для v-for. */
+  key: string
+  label: number
+  isOutside: boolean
+  isToday: boolean
+  isSelected: boolean
+  isRangeStart: boolean
+  isRangeEnd: boolean
+  isInRange: boolean
+  isDisabled: boolean
+  isWeekend: boolean
+  isFocused: boolean
+}
+
+export interface CalendarUnitCell {
+  /** Номер месяца (0–11) или год. */
+  value: number
+  label: string
+  isSelected: boolean
+  isCurrent: boolean
+  isDisabled: boolean
+  isInRange: boolean
+}

package/components/elements/select/ASelectV2.vue

@@ -9,6 +9,8 @@ import { isEqual } from 'lodash-es'
 interface Props {
   label: string
   required?: boolean
+  inlineLabel?: boolean
+  autoWidth?: boolean
   options: T[]
   hideOverflow?: boolean
   keyToShow?: string
@@ -17,7 +19,7 @@ interface Props {
   clearable?: boolean
   hasButtons?: boolean
   disabled?: boolean
-  size?: 'sm' | 'md'
+  size?: 'xs' | 'sm' | 'md'
   error?: string | string[]
   startIcon?: object
   searchable?: boolean
@@ -46,6 +48,8 @@ interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   required: false,
+  inlineLabel: false,
+  autoWidth: false,
   hideOverflow: false,
   getOnlyKey: false,
   keyToShow: 'name',
@@ -133,10 +137,24 @@ const { x, y, strategy, update } = useFloating(positionReference, floating, {
     flip({ fallbackPlacements: dropdownFallback.value }),
     shift({ padding: 8 }),
     floatingSize({
-      apply({ availableHeight, elements, rects }) {
+      apply({ availableHeight, availableWidth, elements, rects }) {
         const el = elements.floating as HTMLElement
         const widthOverride = toCssSize(props.dropdownWidth)
-        el.style.width = widthOverride ?? `${rects.reference.width}px`
+        if (widthOverride) {
+          el.style.width = widthOverride
+          el.style.minWidth = ''
+          el.style.maxWidth = ''
+        }
+        else if (props.autoWidth) {
+          el.style.width = 'max-content'
+          el.style.minWidth = `${rects.reference.width}px`
+          el.style.maxWidth = `${availableWidth}px`
+        }
+        else {
+          el.style.width = `${rects.reference.width}px`
+          el.style.minWidth = ''
+          el.style.maxWidth = ''
+        }
         const maxHeightOverride = toCssSize(props.dropdownMaxHeight)
         el.style.maxHeight = maxHeightOverride
           ? `min(${maxHeightOverride}, ${availableHeight}px)`
@@ -276,7 +294,7 @@ const { visibleCount: visibleChipCount, hiddenCount: hiddenChipCount } = useChip
   gap: 6,
 })
 
-const showFloatingLabel = computed(() => !!props.label && !props.multiple)
+const showFloatingLabel = computed(() => !!props.label && !props.multiple && !props.inlineLabel)
 
 const isDefaultSelection = computed(() => {
   if (props.multiple) {
@@ -287,7 +305,11 @@ const isDefaultSelection = computed(() => {
 </script>
 
 <template>
-  <div ref="wrapper" class="select-v2 relative w-full text-body-md">
+  <div
+    ref="wrapper"
+    :class="autoWidth ? 'w-auto' : 'w-full'"
+    class="select-v2 relative text-body-md"
+  >
     <a-select-trigger
       ref="triggerRef"
       :label="label"
@@ -301,6 +323,8 @@ const isDefaultSelection = computed(() => {
       :clearable="clearable"
       :show-clear="!!valueToShow && clearable && !isDefaultSelection"
       :floating-label="showFloatingLabel"
+      :inline-label="inlineLabel"
+      :auto-width="autoWidth"
       :has-value="!!valueToShow"
       :data-test-id="dataTestId"
       @toggle="toggleOpen()"
@@ -361,7 +385,7 @@ const isDefaultSelection = computed(() => {
             </span>
           </span>
         </template>
-        <span v-else class="text-secondary">{{ label }}</span>
+        <span v-else-if="!inlineLabel" class="text-secondary">{{ label }}</span>
       </template>
     </a-select-trigger>
 
@@ -389,7 +413,7 @@ const isDefaultSelection = computed(() => {
               <a-input-standard
                 v-model="search"
                 :label="searchLabel"
-                :size="size"
+                :size="size === 'xs' ? 'sm' : size"
                 clearable
                 color="gray"
               />
@@ -399,7 +423,7 @@ const isDefaultSelection = computed(() => {
               <a-input-standard
                 v-model="searchValue"
                 :label="searchLabel"
-                :size="size"
+                :size="size === 'xs' ? 'sm' : size"
                 clearable
                 color="gray"
               />

package/components/elements/select/ui/select-trigger.vue

@@ -12,7 +12,7 @@ defineOptions({ name: 'SelectTrigger' })
 const props = withDefaults(defineProps<{
   label?: string
   required?: boolean
-  size?: 'sm' | 'md'
+  size?: 'xs' | 'sm' | 'md'
   disabled?: boolean
   error?: string | string[]
   isOpen?: boolean
@@ -26,6 +26,13 @@ const props = withDefaults(defineProps<{
   floatingLabel?: boolean
   /** Значение выбрано — лейбл поднят, иначе стоит на месте плейсхолдера. */
   hasValue?: boolean
+  /**
+   * Лейбл уезжает в строку значения — «Лейбл: значение» одной строкой вместо
+   * floating label над ним. Двоеточие рисуется только когда значение выбрано.
+   */
+  inlineLabel?: boolean
+  /** Кнопка сжимается по содержимому вместо w-full. */
+  autoWidth?: boolean
 }>(), {
   label: '',
   required: false,
@@ -39,6 +46,8 @@ const props = withDefaults(defineProps<{
   showClear: false,
   floatingLabel: false,
   hasValue: false,
+  inlineLabel: false,
+  autoWidth: false,
 })
 
 const emits = defineEmits<{
@@ -49,14 +58,30 @@ const emits = defineEmits<{
 const el = ref<HTMLButtonElement | null>(null)
 const valueEl = ref<HTMLElement | null>(null)
 
-/* Без floating label кнопка центрирует содержимое, с ним — прижимает значение к низу. */
 const layoutClass = computed(() => {
-  if (!props.floatingLabel) {
+  if (props.size === 'xs') return 'h-8 py-1'
+  if (props.inlineLabel || !props.floatingLabel) {
     return props.size === 'md' ? 'h-10 py-1.5' : 'h-9 py-1.5'
   }
   return props.size === 'md' ? 'h-10 pt-3 pb-0.5' : 'h-9 pt-3.5 pb-0.5'
 })
 
+const paddingClass = computed(() => {
+  if (props.size === 'xs') return props.clearable ? 'pl-3 pr-12' : 'pl-3 pr-8'
+  return props.clearable ? 'pl-4 pr-16' : 'pl-4 pr-9'
+})
+
+const chevronPosition = computed(() => (props.size === 'xs' ? 'right-3' : 'right-3'))
+const clearPosition = computed(() => (props.size === 'xs' ? 'right-9' : 'right-9'))
+
+const labelMode = computed<'inline' | 'floating' | 'placeholder' | 'none'>(() => {
+  if (!props.label) return 'none'
+  if (props.inlineLabel) return 'inline'
+  if (!props.floatingLabel) return 'none'
+  if (props.size === 'xs') return props.hasValue ? 'none' : 'placeholder'
+  return 'floating'
+})
+
 defineExpose({ el, valueEl })
 </script>
 
@@ -68,17 +93,19 @@ defineExpose({ el, valueEl })
     :aria-expanded="isOpen"
     :class="[
       layoutClass,
-      clearable ? 'pr-16' : 'pr-9',
+      paddingClass,
+      autoWidth ? 'w-auto' : 'w-full',
+      inlineLabel ? 'gap-1!' : '',
       { 'select-trigger--error': error },
       disabled
         ? 'border-default bg-badge/70'
         : (buttonBg || 'border-default bg-main'),
     ]"
-    class="select-trigger relative flex w-full items-center gap-2 rounded-10 border border-solid pl-4 text-primary transition-colors duration-200 hover:border-brand focus-visible:border-focus focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-hidden"
+    class="select-trigger relative flex items-center gap-2 rounded-10 border border-solid text-primary transition-colors duration-200 hover:border-brand focus-visible:border-focus focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-hidden"
     @click="emits('toggle')"
   >
     <span
-      v-if="floatingLabel && label"
+      v-if="labelMode === 'floating'"
       :data-size="size"
       class="select-trigger__label pointer-events-none absolute top-1.5 left-4 text-[10px] leading-none text-secondary"
       :class="hasValue ? 'select-trigger__label--floated' : 'select-trigger__label--placeholder'"
@@ -86,13 +113,28 @@ defineExpose({ el, valueEl })
       {{ label }}<span v-if="required" class="text-danger">&nbsp;*</span>
     </span>
 
+    <span
+      v-else-if="labelMode === 'placeholder'"
+      class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 truncate text-secondary"
+    >
+      {{ label }}<span v-if="required" class="text-danger">&nbsp;*</span>
+    </span>
+
     <component
       :is="startIcon"
       v-if="startIcon"
       class="shrink-0"
     />
 
-    <span ref="valueEl" class="relative w-full min-w-0 overflow-hidden text-start leading-tight">
+    <span v-if="labelMode === 'inline'" class="shrink-0 font-medium whitespace-nowrap">
+      {{ label }}<span v-if="required" class="text-danger">&nbsp;*</span><template v-if="hasValue">:</template>
+    </span>
+
+    <span
+      ref="valueEl"
+      :class="autoWidth ? 'w-auto' : 'w-full'"
+      class="relative min-w-0 overflow-hidden text-start leading-tight"
+    >
       <slot />
     </span>
 
@@ -102,7 +144,8 @@ defineExpose({ el, valueEl })
       role="button"
       tabindex="-1"
       aria-label="Очистить"
-      class="select-trigger__clear absolute top-1/2 right-9 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-badge"
+      :class="clearPosition"
+      class="select-trigger__clear absolute top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-badge"
       @click.stop="emits('clear')"
       @keydown.enter.stop.prevent="emits('clear')"
       @keydown.space.stop.prevent="emits('clear')"
@@ -111,8 +154,8 @@ defineExpose({ el, valueEl })
     </span>
 
     <span
-      :class="{ 'rotate-180': isOpen }"
-      class="absolute top-1/2 right-3 -translate-y-1/2 transition-transform duration-200"
+      :class="[chevronPosition, { 'rotate-180': isOpen }]"
+      class="absolute top-1/2 -translate-y-1/2 transition-transform duration-200"
     >
       <a-icon-chevron-down class="m-0! size-4 text-icon-disabled" />
     </span>

package/icons/download-2.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+       stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download preview-icon">
+    <path d="M12 15V3"/>
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+    <path d="m7 10 5 5 5-5"/>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>

package/icons/download-rounded.vue

@@ -3,10 +3,11 @@
 </script>
 
 <template>
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M5.83334 8.33337L10 12.5L14.1667 8.33337" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M10 12.5V2.5" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+       stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download preview-icon">
+    <path d="M12 15V3"/>
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+    <path d="m7 10 5 5 5-5"/>
   </svg>
 </template>
 

package/icons/play.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup="">
+
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+       stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play preview-icon">
+    <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>