adata-ui 2.1.41-beta.13 → 2.1.41-beta.15

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

@@ -1,167 +1,167 @@
-<script setup lang="ts">
-/**
- * Общий «хром» триггера селектов нового ДС: рамка, плавающий лейбл, крестик очистки
- * и шеврон. Область значения приходит слотом, поэтому одна и та же кнопка обслуживает
- * и одиночный текст (ASelectV2, ACascadeSelectV2), и строку чипов (ASelectV2 multiple).
- *
- * `el` / `valueEl` отдаются наружу через defineExpose: первый нужен как reference-элемент
- * для floating-ui, второй — как контейнер измерения в useChipOverflow.
- */
-defineOptions({ name: 'SelectTrigger' })
-
-const props = withDefaults(defineProps<{
-  label?: string
-  required?: boolean
-  size?: 'sm' | 'md'
-  disabled?: boolean
-  error?: string | string[]
-  isOpen?: boolean
-  startIcon?: object
-  buttonBg?: string
-  /** Резервирует место под крестик (pr-16 вместо pr-9) — совпадает с прежним `clearable`. */
-  clearable?: boolean
-  /** Крестик показывается только когда есть что чистить. */
-  showClear?: boolean
-  /** Лейбл ведёт себя как floating label (иначе за плейсхолдер отвечает слот). */
-  floatingLabel?: boolean
-  /** Значение выбрано — лейбл поднят, иначе стоит на месте плейсхолдера. */
-  hasValue?: boolean
-}>(), {
-  label: '',
-  required: false,
-  size: 'sm',
-  disabled: false,
-  error: undefined,
-  isOpen: false,
-  startIcon: undefined,
-  buttonBg: '',
-  clearable: true,
-  showClear: false,
-  floatingLabel: false,
-  hasValue: false,
-})
-
-const emits = defineEmits<{
-  toggle: []
-  clear: []
-}>()
-
-const el = ref<HTMLButtonElement | null>(null)
-const valueEl = ref<HTMLElement | null>(null)
-
-/* Без floating label кнопка центрирует содержимое, с ним — прижимает значение к низу. */
-const layoutClass = computed(() => {
-  if (!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'
-})
-
-defineExpose({ el, valueEl })
-</script>
-
-<template>
-  <button
-    ref="el"
-    :disabled="disabled"
-    aria-haspopup="listbox"
-    :aria-expanded="isOpen"
-    :class="[
-      layoutClass,
-      clearable ? 'pr-16' : 'pr-9',
-      { '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"
-    @click="emits('toggle')"
-  >
-    <span
-      v-if="floatingLabel && label"
-      :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'"
-    >
-      {{ 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">
-      <slot />
-    </span>
-
-    <!-- span, а не вложенная <button>: вложенные кнопки ломают SSR-разметку при гидрации -->
-    <span
-      v-if="showClear"
-      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"
-      @click.stop="emits('clear')"
-      @keydown.enter.stop.prevent="emits('clear')"
-      @keydown.space.stop.prevent="emits('clear')"
-    >
-      <a-icon-x-mark class="m-0! size-3.5" />
-    </span>
-
-    <span
-      :class="{ 'rotate-180': isOpen }"
-      class="absolute top-1/2 right-3 -translate-y-1/2 transition-transform duration-200"
-    >
-      <a-icon-chevron-down class="m-0! size-4 text-icon-disabled" />
-    </span>
-  </button>
-</template>
-
-<style scoped>
-.select-trigger {
-  cursor: pointer;
-}
-
-.select-trigger:disabled {
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
-.select-trigger--error {
-  border-color: var(--border-color-danger);
-}
-
-.select-trigger__clear {
-  cursor: pointer;
-}
-
-.select-trigger__label {
-  transform-origin: 0 0;
-  transform: translateY(0) scale(1);
-  transition:
-    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
-    color 200ms ease-out;
-  will-change: transform;
-}
-
-.select-trigger__label--floated {
-  transform: translateY(0) scale(1);
-}
-
-.select-trigger__label--placeholder {
-  transform: translateY(7px) scale(1.4);
-}
-
-.select-trigger__label--placeholder[data-size="sm"] {
-  transform: translateY(5px) scale(1.4);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .select-trigger__label {
-    transition: none;
-  }
-}
-</style>
+<script setup lang="ts">
+/**
+ * Общий «хром» триггера селектов нового ДС: рамка, плавающий лейбл, крестик очистки
+ * и шеврон. Область значения приходит слотом, поэтому одна и та же кнопка обслуживает
+ * и одиночный текст (ASelectV2, ACascadeSelectV2), и строку чипов (ASelectV2 multiple).
+ *
+ * `el` / `valueEl` отдаются наружу через defineExpose: первый нужен как reference-элемент
+ * для floating-ui, второй — как контейнер измерения в useChipOverflow.
+ */
+defineOptions({ name: 'SelectTrigger' })
+
+const props = withDefaults(defineProps<{
+  label?: string
+  required?: boolean
+  size?: 'sm' | 'md'
+  disabled?: boolean
+  error?: string | string[]
+  isOpen?: boolean
+  startIcon?: object
+  buttonBg?: string
+  /** Резервирует место под крестик (pr-16 вместо pr-9) — совпадает с прежним `clearable`. */
+  clearable?: boolean
+  /** Крестик показывается только когда есть что чистить. */
+  showClear?: boolean
+  /** Лейбл ведёт себя как floating label (иначе за плейсхолдер отвечает слот). */
+  floatingLabel?: boolean
+  /** Значение выбрано — лейбл поднят, иначе стоит на месте плейсхолдера. */
+  hasValue?: boolean
+}>(), {
+  label: '',
+  required: false,
+  size: 'sm',
+  disabled: false,
+  error: undefined,
+  isOpen: false,
+  startIcon: undefined,
+  buttonBg: '',
+  clearable: true,
+  showClear: false,
+  floatingLabel: false,
+  hasValue: false,
+})
+
+const emits = defineEmits<{
+  toggle: []
+  clear: []
+}>()
+
+const el = ref<HTMLButtonElement | null>(null)
+const valueEl = ref<HTMLElement | null>(null)
+
+/* Без floating label кнопка центрирует содержимое, с ним — прижимает значение к низу. */
+const layoutClass = computed(() => {
+  if (!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'
+})
+
+defineExpose({ el, valueEl })
+</script>
+
+<template>
+  <button
+    ref="el"
+    :disabled="disabled"
+    aria-haspopup="listbox"
+    :aria-expanded="isOpen"
+    :class="[
+      layoutClass,
+      clearable ? 'pr-16' : 'pr-9',
+      { '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"
+    @click="emits('toggle')"
+  >
+    <span
+      v-if="floatingLabel && label"
+      :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'"
+    >
+      {{ 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">
+      <slot />
+    </span>
+
+    <!-- span, а не вложенная <button>: вложенные кнопки ломают SSR-разметку при гидрации -->
+    <span
+      v-if="showClear"
+      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"
+      @click.stop="emits('clear')"
+      @keydown.enter.stop.prevent="emits('clear')"
+      @keydown.space.stop.prevent="emits('clear')"
+    >
+      <a-icon-x-mark class="m-0! size-3.5" />
+    </span>
+
+    <span
+      :class="{ 'rotate-180': isOpen }"
+      class="absolute top-1/2 right-3 -translate-y-1/2 transition-transform duration-200"
+    >
+      <a-icon-chevron-down class="m-0! size-4 text-icon-disabled" />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.select-trigger {
+  cursor: pointer;
+}
+
+.select-trigger:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.select-trigger--error {
+  border-color: var(--border-color-danger);
+}
+
+.select-trigger__clear {
+  cursor: pointer;
+}
+
+.select-trigger__label {
+  transform-origin: 0 0;
+  transform: translateY(0) scale(1);
+  transition:
+    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
+    color 200ms ease-out;
+  will-change: transform;
+}
+
+.select-trigger__label--floated {
+  transform: translateY(0) scale(1);
+}
+
+.select-trigger__label--placeholder {
+  transform: translateY(7px) scale(1.4);
+}
+
+.select-trigger__label--placeholder[data-size="sm"] {
+  transform: translateY(5px) scale(1.4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .select-trigger__label {
+    transition: none;
+  }
+}
+</style>

package/components/elements/show-more/AShowMore.vue

@@ -1,35 +1,35 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-  loading: boolean
-}>(), {
-  loading: false,
-})
-
-const emit = defineEmits<{ (e: 'click'): void }>()
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <div class="flex items-center gap-4">
-    <hr class="h-[0.5px] w-full bg-(--border-color-default)">
-    <a-button
-      :loading="loading"
-      :disabled="loading"
-      class="flex items-center gap-2"
-      size="md"
-      variant="gray"
-      @click="emit('click')"
-    >
-      <slot>
-        <span>{{ t('actions.showMore') }}</span>
-        <a-icon-chevron-down />
-      </slot>
-    </a-button>
-    <hr class="h-[0.5px] w-full bg-(--border-color-default)">
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+withDefaults(defineProps<{
+  loading: boolean
+}>(), {
+  loading: false,
+})
+
+const emit = defineEmits<{ (e: 'click'): void }>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex items-center gap-4">
+    <hr class="h-[0.5px] w-full bg-(--border-color-default)">
+    <a-button
+      :loading="loading"
+      :disabled="loading"
+      class="flex items-center gap-2"
+      size="md"
+      variant="gray"
+      @click="emit('click')"
+    >
+      <slot>
+        <span>{{ t('actions.showMore') }}</span>
+        <a-icon-chevron-down />
+      </slot>
+    </a-button>
+    <hr class="h-[0.5px] w-full bg-(--border-color-default)">
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/show-more/AShowMoreV2.vue

@@ -1,26 +1,26 @@
-<script lang="ts" setup>
-withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
-
-const emit = defineEmits<{ (e: 'click'): void }>()
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <div class="flex items-center gap-3">
-    <hr class="h-px flex-1 border-0 bg-badge">
-    <button
-      type="button"
-      :disabled="loading"
-      class="inline-flex items-center gap-1.5 rounded-full border border-default bg-action-secondary px-4 py-1.5 text-body-md-medium text-quaternary transition-colors duration-150 hover:border-strong hover:bg-action-secondary-hover disabled:cursor-not-allowed disabled:opacity-60"
-      @click="emit('click')"
-    >
-      <a-icon-loader-circle v-if="loading" class="size-4 animate-spin" />
-      <slot>
-        <span>{{ t('actions.showMore') }}</span>
-        <a-icon-chevron-down v-if="!loading" class="size-4" />
-      </slot>
-    </button>
-    <hr class="h-px flex-1 border-0 bg-badge">
-  </div>
-</template>
+<script lang="ts" setup>
+withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
+
+const emit = defineEmits<{ (e: 'click'): void }>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex items-center gap-3">
+    <hr class="h-px flex-1 border-0 bg-badge">
+    <button
+      type="button"
+      :disabled="loading"
+      class="inline-flex items-center gap-1.5 rounded-full border border-default bg-action-secondary px-4 py-1.5 text-body-md-medium text-quaternary transition-colors duration-150 hover:border-strong hover:bg-action-secondary-hover disabled:cursor-not-allowed disabled:opacity-60"
+      @click="emit('click')"
+    >
+      <a-icon-loader-circle v-if="loading" class="size-4 animate-spin" />
+      <slot>
+        <span>{{ t('actions.showMore') }}</span>
+        <a-icon-chevron-down v-if="!loading" class="size-4" />
+      </slot>
+    </button>
+    <hr class="h-px flex-1 border-0 bg-badge">
+  </div>
+</template>

package/components/elements/skeleton/ASkeleton.vue

@@ -1,44 +1,44 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-defineOptions({
-  name: 'ASkeleton'
-})
-type Variant = 'circle' | 'square'
-
-interface Props {
-  width?: string
-  height: string
-  variant?: Variant
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'square',
-  width: '100%'
-})
-
-const styles = computed(() => {
-  const style = {
-    '--skeleton-height': props.height,
-    '--skeleton-width': props.width,
-    '--skeleton-radius': props.variant === 'square' ? '4px' : '50%'
-  }
-  return style
-})
-</script>
-
-<template>
-  <div
-    class="skeleton-loader animate-pulse bg-badge"
-    :style="styles"
-  />
-</template>
-
-<style scoped>
-.skeleton-loader {
-  width: var(--skeleton-width);
-  height: var(--skeleton-height);
-  border-radius: var(--skeleton-radius);
-}
-
-</style>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'ASkeleton'
+})
+type Variant = 'circle' | 'square'
+
+interface Props {
+  width?: string
+  height: string
+  variant?: Variant
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'square',
+  width: '100%'
+})
+
+const styles = computed(() => {
+  const style = {
+    '--skeleton-height': props.height,
+    '--skeleton-width': props.width,
+    '--skeleton-radius': props.variant === 'square' ? '4px' : '50%'
+  }
+  return style
+})
+</script>
+
+<template>
+  <div
+    class="skeleton-loader animate-pulse bg-badge"
+    :style="styles"
+  />
+</template>
+
+<style scoped>
+.skeleton-loader {
+  width: var(--skeleton-width);
+  height: var(--skeleton-height);
+  border-radius: var(--skeleton-radius);
+}
+
+</style>