adata-ui 2.1.41-beta.2 → 2.1.41-beta.20

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

@@ -1,112 +1,112 @@
-<script setup lang="ts">
-import AChips from '~/components/elements/chips/AChips.vue'
-import {isEqual} from "lodash-es";
-
-type Item = {
-  id: number | string
-  name: string
-}
-
-interface Props {
-  multiple?: boolean
-  clearable?: boolean
-  disabled?: boolean
-  label: string
-}
-
-const items = defineModel<Item[]>('selectedItems')
-type Emits = {
-  (e: 'delete', item: Item): void
-}
-
-
-const props = withDefaults(defineProps<Props>(), {
-  clearable: true,
-  disabled: false,
-  label: 'select'
-})
-const emits = defineEmits<Emits>()
-const disabledStyles =
-  'disabled:pointer-events-none disabled:bg-action-disabled disabled:text-action-disabled-fg'
-const isOpen = defineModel<boolean>('isOpen')
-
-
-const buttonElement = ref()
-const countOfVisibleItems = computed(() => {
-  if (!items.value?.length) return undefined
-  const maxCountOfVisibleItems = Math.floor((buttonElement.value?.offsetWidth - 50) / 120)
-  if (maxCountOfVisibleItems > items.value.length) return items.value.length
-  else return maxCountOfVisibleItems
-})
-const visibleItems = computed(() => {
-  if (!items.value.length && !countOfVisibleItems) return undefined
-  return items.value.slice(0, countOfVisibleItems.value)
-})
-const countOfUnvisibleItems = computed(() => {
-  if (!items.value?.length && !countOfVisibleItems.value) return undefined
-  return items.value.length - countOfVisibleItems.value
-})
-const deleteItem = (item: Item) => {
-  emits('delete', item)
-  items.value = items.value?.filter(el => !isEqual(el, item))
-}
-const onClear = () => {
-  items.value = []
-}
-
-
-</script>
-
-<template>
-  <div>
-    <!--    <pre>{{ items }} items</pre>-->
-    <!-- осознанно константная тень фокуса #1B64B3: документированное исключение -->
-    <button
-      ref="buttonElement"
-      class="relative flex w-full items-center justify-between gap-2 rounded-sm border border-solid border-default bg-muted px-4 py-1.5 hover:border-brand focus-visible:outline-(--border-color-focus) focus-visible:shadow-[0_0_0_4px#1B64B3]"
-      :class="[disabledStyles]"
-      :disabled="disabled"
-      @click="isOpen = !isOpen"
-    >
-      <div>
-        <div
-          v-if="visibleItems && visibleItems.length"
-          class="flex gap-2"
-        >
-          <a-chips
-            v-for="item in visibleItems"
-            :key="item.id"
-            class="max-w-[100px]"
-            @click.stop="deleteItem( item)"
-          >
-            {{ item.name }}
-            <button class="rounded-full bg-badge">
-              <a-icon-x-mark class="size-3" />
-            </button>
-          </a-chips>
-          <a-chips v-if="countOfUnvisibleItems">
-            + {{ countOfUnvisibleItems }}
-          </a-chips>
-        </div>
-        <div v-else>
-          {{ label }}
-        </div>
-      </div>
-      <button
-        v-if="visibleItems && countOfVisibleItems"
-        class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-badge"
-        @click.stop="onClear"
-      >
-        <a-icon-x-mark class="!m-0 text-base" />
-      </button>
-      <a-icon-chevron-up
-        class="!m-0 text-secondary transition-all "
-        :class="{'rotate-180': isOpen}"
-      />
-    </button>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import AChips from '~/components/elements/chips/AChips.vue'
+import {isEqual} from "lodash-es";
+
+type Item = {
+  id: number | string
+  name: string
+}
+
+interface Props {
+  multiple?: boolean
+  clearable?: boolean
+  disabled?: boolean
+  label: string
+}
+
+const items = defineModel<Item[]>('selectedItems')
+type Emits = {
+  (e: 'delete', item: Item): void
+}
+
+
+const props = withDefaults(defineProps<Props>(), {
+  clearable: true,
+  disabled: false,
+  label: 'select'
+})
+const emits = defineEmits<Emits>()
+const disabledStyles =
+  'disabled:pointer-events-none disabled:bg-action-disabled disabled:text-action-disabled-fg'
+const isOpen = defineModel<boolean>('isOpen')
+
+
+const buttonElement = ref()
+const countOfVisibleItems = computed(() => {
+  if (!items.value?.length) return undefined
+  const maxCountOfVisibleItems = Math.floor((buttonElement.value?.offsetWidth - 50) / 120)
+  if (maxCountOfVisibleItems > items.value.length) return items.value.length
+  else return maxCountOfVisibleItems
+})
+const visibleItems = computed(() => {
+  if (!items.value.length && !countOfVisibleItems) return undefined
+  return items.value.slice(0, countOfVisibleItems.value)
+})
+const countOfUnvisibleItems = computed(() => {
+  if (!items.value?.length && !countOfVisibleItems.value) return undefined
+  return items.value.length - countOfVisibleItems.value
+})
+const deleteItem = (item: Item) => {
+  emits('delete', item)
+  items.value = items.value?.filter(el => !isEqual(el, item))
+}
+const onClear = () => {
+  items.value = []
+}
+
+
+</script>
+
+<template>
+  <div>
+    <!--    <pre>{{ items }} items</pre>-->
+    <!-- осознанно константная тень фокуса #1B64B3: документированное исключение -->
+    <button
+      ref="buttonElement"
+      class="relative flex w-full items-center justify-between gap-2 rounded-sm border border-solid border-default bg-muted px-4 py-1.5 hover:border-brand focus-visible:outline-(--border-color-focus) focus-visible:shadow-[0_0_0_4px#1B64B3]"
+      :class="[disabledStyles]"
+      :disabled="disabled"
+      @click="isOpen = !isOpen"
+    >
+      <div>
+        <div
+          v-if="visibleItems && visibleItems.length"
+          class="flex gap-2"
+        >
+          <a-chips
+            v-for="item in visibleItems"
+            :key="item.id"
+            class="max-w-[100px]"
+            @click.stop="deleteItem( item)"
+          >
+            {{ item.name }}
+            <button class="rounded-full bg-badge">
+              <a-icon-x-mark class="size-3" />
+            </button>
+          </a-chips>
+          <a-chips v-if="countOfUnvisibleItems">
+            + {{ countOfUnvisibleItems }}
+          </a-chips>
+        </div>
+        <div v-else>
+          {{ label }}
+        </div>
+      </div>
+      <button
+        v-if="visibleItems && countOfVisibleItems"
+        class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-badge"
+        @click.stop="onClear"
+      >
+        <a-icon-x-mark class="!m-0 text-base" />
+      </button>
+      <a-icon-chevron-up
+        class="!m-0 text-secondary transition-all "
+        :class="{'rotate-180': isOpen}"
+      />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -1,99 +1,99 @@
-<script setup lang="ts">
-import AInput from '~/components/forms/input/standard/AInputStandard.vue'
-
-import {isEqual} from 'lodash-es'
-
-
-defineOptions({
-  name: 'SelectList'
-})
-type Option = {
-  id: string | number
-  name: string
-}
-
-interface Props {
-  searchable?: boolean
-  simpleSearch?: boolean
-  searchLabel?: string
-  searchBy?: keyof Option
-  multiple?: boolean
-  options: Option[]
-}
-
-type Emits = {
-  (e: 'select', data: Option[]): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  searchable: false,
-  multiple: true,
-  searchLabel: 'Поиск...',
-  searchBy: 'name'
-})
-const emits = defineEmits<Emits>()
-const selected = defineModel<Option[]>('selected')
-const searchValue = defineModel<string>('searchValue', {default: ''})
-
-const setData = (option: Option) => {
-  const index = selected.value.findIndex((selectedOption) => selectedOption.id === option.id);
-
-  if (index === -1) {
-    // Добавить данные, если они не существуют в массиве selected
-    if (props.multiple) {
-      selected.value.push(option);
-    } else {
-      selected.value = [option];
-    }
-  } else {
-    // Удалить данные, если они уже существуют в массиве selected
-    selected.value.splice(index, 1);
-  }
-  emits('select', selected.value)
-};
-const isSelected = (option: Option) => {
-  return selected.value.some((selectedOption) => isEqual(selectedOption, option));
-};
-const formattedOptions = computed(() => {
-  if (!props.options) return []
-  if (props.simpleSearch) {
-    return props.options.filter(el => el[props.searchBy].toString().includes(searchValue.value))
-  }
-  return props.options
-})
-</script>
-
-<template>
-  <div class="flex flex-col gap-2 justify-items-start">
-    <div
-      v-if="searchable"
-      class="p-1"
-    >
-      <a-input
-        v-model="searchValue"
-        :label="searchLabel"
-        size="sm"
-        color="gray"
-        clearable
-      />
-    </div>
-    <template
-      v-for="option in formattedOptions"
-      :key="option.id"
-    >
-      <button
-        class="flex w-full items-center justify-between bg-action-secondary px-4 py-1.5 text-start hover:bg-action-secondary-hover"
-        @click="setData(option)"
-      >
-        {{ option.name }}
-        <span v-if="isSelected(option)">
-          <a-icon-check class="text-brand"/>
-        </span>
-      </button>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import AInput from '~/components/forms/input/standard/AInputStandard.vue'
+
+import {isEqual} from 'lodash-es'
+
+
+defineOptions({
+  name: 'SelectList'
+})
+type Option = {
+  id: string | number
+  name: string
+}
+
+interface Props {
+  searchable?: boolean
+  simpleSearch?: boolean
+  searchLabel?: string
+  searchBy?: keyof Option
+  multiple?: boolean
+  options: Option[]
+}
+
+type Emits = {
+  (e: 'select', data: Option[]): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  searchable: false,
+  multiple: true,
+  searchLabel: 'Поиск...',
+  searchBy: 'name'
+})
+const emits = defineEmits<Emits>()
+const selected = defineModel<Option[]>('selected')
+const searchValue = defineModel<string>('searchValue', {default: ''})
+
+const setData = (option: Option) => {
+  const index = selected.value.findIndex((selectedOption) => selectedOption.id === option.id);
+
+  if (index === -1) {
+    // Добавить данные, если они не существуют в массиве selected
+    if (props.multiple) {
+      selected.value.push(option);
+    } else {
+      selected.value = [option];
+    }
+  } else {
+    // Удалить данные, если они уже существуют в массиве selected
+    selected.value.splice(index, 1);
+  }
+  emits('select', selected.value)
+};
+const isSelected = (option: Option) => {
+  return selected.value.some((selectedOption) => isEqual(selectedOption, option));
+};
+const formattedOptions = computed(() => {
+  if (!props.options) return []
+  if (props.simpleSearch) {
+    return props.options.filter(el => el[props.searchBy].toString().includes(searchValue.value))
+  }
+  return props.options
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 justify-items-start">
+    <div
+      v-if="searchable"
+      class="p-1"
+    >
+      <a-input
+        v-model="searchValue"
+        :label="searchLabel"
+        size="sm"
+        color="gray"
+        clearable
+      />
+    </div>
+    <template
+      v-for="option in formattedOptions"
+      :key="option.id"
+    >
+      <button
+        class="flex w-full items-center justify-between bg-action-secondary px-4 py-1.5 text-start hover:bg-action-secondary-hover"
+        @click="setData(option)"
+      >
+        {{ option.name }}
+        <span v-if="isSelected(option)">
+          <a-icon-check class="text-brand"/>
+        </span>
+      </button>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +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>

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>