@feugene/granularity 0.13.0 → 0.16.0

package/dist/types/src/components/GrSelect/GrSelect.vue.d.ts

@@ -1,13 +1,32 @@
-import { type GrSelectModelValue, type GrSelectOption, type GrSelectOptionOrGroup, type GrSelectOptionsView, type GrSelectSize, type GrSelectUnderline, type GrSelectVariant, type GrSelectView } from './grSelectStyles';
-export type { GrSelectModelValue, GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectOptionsView, GrSelectSize, GrSelectUnderline, GrSelectVariant, GrSelectView, } from './grSelectStyles';
+import type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from '../GrBadge/grBadgeStyles';
+import { type GrSelectState, type GrSelectModelValue, type GrSelectValue, type GrSelectOption, type GrSelectOptionOrGroup, type GrSelectOptionsView, type GrSelectSize, type GrSelectUnderline, type GrSelectVariant, type GrSelectView } from './grSelectStyles';
+export type { GrSelectModelValue, GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectOptionsView, GrSelectSize, GrSelectState, GrSelectUnderline, GrSelectValue, GrSelectVariant, GrSelectView, } from './grSelectStyles';
 /**
  * Пропсы публичного GR-примитива «Select».
  */
-export interface GrSelectProps {
-    modelValue: GrSelectModelValue;
+export interface GrSelectProps<TValue extends GrSelectValue = string> {
+    modelValue: GrSelectModelValue<TValue>;
     /** Список опций. Поддерживает плоский массив опций и группы опций (`{ label, options }`). */
-    options?: GrSelectOptionOrGroup[];
+    options?: GrSelectOptionOrGroup<TValue>[];
     disabled?: boolean;
+    /** Только для чтения: значение видно и уходит в форму, но не меняется. */
+    readonly?: boolean;
+    /** Визуальное и ARIA-состояние ошибки. */
+    invalid?: boolean;
+    /**
+     * Визуальный оттенок рамки: `default | success | warning | danger`. `invalid`
+     * сильнее — ошибка перекрывает любую другую подсветку. В `view="link"` рамки
+     * нет, и состояние туда не применяется.
+     */
+    state?: GrSelectState;
+    /**
+     * Имя поля-идентификатора, когда значения опций — объекты. Без него объекты
+     * сравнивались бы по ссылке, и пришедшая снаружи копия с тем же `id` не
+     * совпала бы ни с одной опцией.
+     */
+    valueKey?: string;
+    /** Обязательное поле (`aria-required`). */
+    required?: boolean;
     ariaLabel?: string;
     view?: GrSelectView;
     size?: GrSelectSize;
@@ -15,6 +34,14 @@ export interface GrSelectProps {
     placeholder?: string;
     /** Multiple selection. */
     multiple?: boolean;
+    /**
+     * Вид чипов выбранных значений в режиме `multiple`. Чип — это `GrBadge`: своя
+     * плашка на светлой теме почти не отличалась от фона поля.
+     */
+    tagTone?: GrBadgeTone;
+    tagDark?: boolean;
+    tagSize?: GrBadgeSize;
+    tagRadius?: GrBadgeRadius;
     /** Как отображать список опций: нативный `<select>` или кастомная панель. */
     optionsView?: GrSelectOptionsView;
     /** Разрешает ввод/выбор значения, которого нет в `options`. */
@@ -27,6 +54,12 @@ export interface GrSelectProps {
     filterable?: boolean;
     /** Placeholder поля поиска (`filterable`). i18n: fallback `gr.select.searchPlaceholder`. */
     filterPlaceholder?: string;
+    /**
+     * Текст поиска как контролируемое значение (`v-model:search`). Без него
+     * `loading` был декоративным: набранное пользователем наружу не выходило, и
+     * сходить за опциями на сервер было не с чем.
+     */
+    search?: string;
     /**
      * Состояние загрузки: вместо списка опций панель показывает индикатор загрузки.
      * Полезно для удалённой подгрузки опций. Форсит `optionsView="panel"`.
@@ -45,8 +78,19 @@ export interface GrSelectProps {
     customValuePlaceholder?: string;
     /** Максимальная высота панели (только в `optionsView="panel"`). */
     dropdownMaxHeight?: number;
+    /**
+     * Виртуализация панели: в DOM живёт только окно вокруг вьюпорта. Высоту окна
+     * задаёт `dropdownMaxHeight`.
+     *
+     * Только для `optionsView="panel"`: у нативного `<select>` панели нет вовсе.
+     * Несовместим с `view="link"` — там ширина панели равна ширине отрисованной
+     * опции и прыгала бы при прокрутке.
+     */
+    virtual?: boolean;
     /** Закрывать панель после выбора (только в `optionsView="panel"`). */
     closeOnSelect?: boolean;
+    /** Сколько chips показать до сворачивания в «+N» (только `tags`). */
+    maxTagCount?: number;
     /** Разрешает очистку выбранного значения. */
     clearable?: boolean;
     /** i18n-label для кнопки очистки (`aria-label`). */
@@ -61,119 +105,99 @@ export interface GrSelectProps {
      * В `view="default"` не используется.
      */
     underline?: GrSelectUnderline;
+    /**
+     * Контролируемое состояние панели (`v-model:open`). Без пропа панель ведёт
+     * себя сама (uncontrolled), с ним — слушайте `update:open` и меняйте проп.
+     * Только для `optionsView="panel"`: у нативного `<select>` панель браузерная.
+     */
+    open?: boolean;
+    /**
+     * Имя для нативной формы: в native-режиме уходит на сам `<select>`, в
+     * panel-режиме значения сериализуются hidden-инпутами (ключ — `keyOf`).
+     */
+    name?: string;
+    /**
+     * Ширины аддонов `prefix`/`suffix` — общий контракт контролов пакета
+     * (`docs/form-controls.md`). Аддоны живут в панельном триггере: внутрь
+     * нативного `<select>` разметку положить нельзя.
+     */
+    prefixMinWidth?: string;
+    prefixMaxWidth?: string;
+    suffixMinWidth?: string;
+    suffixMaxWidth?: string;
+    prefixFixed?: boolean;
+    suffixFixed?: boolean;
 }
-declare var __VLS_1: {}, __VLS_3: {
-    selectedOptions: GrSelectOption[];
-    selectedValues: string[];
-    displayLabel: string;
-    placeholder: string | undefined;
-    hasSelection: boolean;
-}, __VLS_26: {
-    option: GrSelectOption;
-    selected: boolean;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    value?: (props: typeof __VLS_3) => any;
-} & {
-    option?: (props: typeof __VLS_26) => any;
+export interface GrSelectEmits<TValue extends GrSelectValue = string> {
+    (e: 'update:modelValue', value: GrSelectModelValue<TValue>): void;
+    /** Значение изменилось — тот же payload, что у `update:modelValue`. */
+    (e: 'change', value: GrSelectModelValue<TValue>): void;
+    /** Значение снято кнопкой очистки. */
+    (e: 'clear'): void;
+    /** Панель открылась/закрылась (`v-model:open`). */
+    (e: 'update:open', value: boolean): void;
+    /**
+     * Панель открылась/закрылась.
+     * @deprecated Используйте `update:open` (`v-model:open`); алиас будет снят после 1.0.
+     */
+    (e: 'visibleChange', visible: boolean): void;
+    /** Текст поиска как контролируемое значение (`v-model:search`). */
+    (e: 'update:search', value: string): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+    /** Пользователь набрал запрос — сигнал сходить за опциями. */
+    (e: 'search', value: string): void;
+}
+declare const __VLS_export: <TValue extends GrSelectValue = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & __VLS_PrettifyLocal<GrSelectProps<TValue> & {
+        onSearch?: ((value: string) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((value: GrSelectModelValue<TValue>) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: GrSelectModelValue<TValue>) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onVisibleChange?: ((visible: boolean) => any) | undefined;
+        "onUpdate:search"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        focus: () => void;
+        blur: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Собственные `<option>` для нативного режима. */
+        default?: () => any;
+        /** Аддон слева в панельном триггере (в нативном режиме недоступен). */
+        prefix?: () => any;
+        /** Аддон справа в панельном триггере, перед крестиком и шевроном. */
+        suffix?: () => any;
+        /** Отображение значения в триггере вместо текста по умолчанию. */
+        value?: (props: {
+            selectedOptions: GrSelectOption<TValue>[];
+            selectedValues: TValue[];
+            displayLabel: string;
+            placeholder?: string;
+            hasSelection: boolean;
+        }) => any;
+        /** Строка списка вместо подписи опции. */
+        option?: (props: {
+            option: GrSelectOption<TValue>;
+            selected: boolean;
+        }) => any;
+        /** Содержимое панели, пока едут опции. */
+        loading?: () => any;
+        /** Содержимое панели, когда подходящих опций нет. */
+        empty?: () => any;
+    };
+    emit: GrSelectEmits<TValue>;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSelectProps>, {
-    options: undefined;
-    disabled: boolean;
-    ariaLabel: undefined;
-    view: string;
-    size: undefined;
-    placeholder: undefined;
-    multiple: boolean;
-    optionsView: string;
-    allowCustomValue: boolean;
-    filterable: boolean;
-    filterPlaceholder: undefined;
-    loading: boolean;
-    loadingText: undefined;
-    noResultsText: undefined;
-    tags: boolean;
-    customValuePlaceholder: undefined;
-    dropdownMaxHeight: number;
-    closeOnSelect: boolean;
-    clearable: undefined;
-    clearLabel: undefined;
-    variant: undefined;
-    underline: undefined;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: GrSelectModelValue) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSelectProps>, {
-    options: undefined;
-    disabled: boolean;
-    ariaLabel: undefined;
-    view: string;
-    size: undefined;
-    placeholder: undefined;
-    multiple: boolean;
-    optionsView: string;
-    allowCustomValue: boolean;
-    filterable: boolean;
-    filterPlaceholder: undefined;
-    loading: boolean;
-    loadingText: undefined;
-    noResultsText: undefined;
-    tags: boolean;
-    customValuePlaceholder: undefined;
-    dropdownMaxHeight: number;
-    closeOnSelect: boolean;
-    clearable: undefined;
-    clearLabel: undefined;
-    variant: undefined;
-    underline: undefined;
-}>>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: GrSelectModelValue) => any) | undefined;
-}>, {
-    variant: GrSelectVariant;
-    size: GrSelectSize;
-    clearable: boolean;
-    underline: GrSelectUnderline;
-    view: GrSelectView;
-    loading: boolean;
-    options: GrSelectOptionOrGroup[];
-    multiple: boolean;
-    disabled: boolean;
-    placeholder: string;
-    ariaLabel: string;
-    filterable: boolean;
-    allowCustomValue: boolean;
-    closeOnSelect: boolean;
-    dropdownMaxHeight: number;
-    loadingText: string;
-    noResultsText: string;
-    clearLabel: string;
-    optionsView: GrSelectOptionsView;
-    filterPlaceholder: string;
-    tags: boolean;
-    customValuePlaceholder: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<Required<T>[K]>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
 } : {

package/dist/types/src/components/GrSelect/composables/useSelectNavigation.d.ts

@@ -0,0 +1,52 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { GrSelectOption, GrSelectValue } from '../grSelectStyles';
+import type { GrSelectPanelItem } from './useSelectPanelItems';
+/**
+ * Клавиатура ходит и по опциям, и по строке «Add …» (как в `GrAutocomplete`):
+ * иначе при непустом списке Enter не мог бы выбрать подсвеченную опцию, а при
+ * активной опции — закоммитить произвольное значение.
+ */
+export type GrSelectNavigableItem<TValue extends GrSelectValue> = {
+    kind: 'add';
+} | {
+    kind: 'option';
+    value: TValue;
+    index: number;
+};
+export interface UseSelectNavigationOptions<TValue extends GrSelectValue> {
+    panelItems: ComputedRef<GrSelectPanelItem<TValue>[]>;
+    flatOptions: ComputedRef<GrSelectOption<TValue>[]>;
+    canAddCustom: ComputedRef<boolean>;
+    sameValue: (a: unknown, b: unknown) => boolean;
+    isSelected: (value: TValue) => boolean;
+    open: Ref<boolean>;
+    locked: ComputedRef<boolean>;
+    showSearchInput: ComputedRef<boolean>;
+    virtualEnabled: ComputedRef<boolean>;
+    addOffset: ComputedRef<number>;
+    listboxId: string;
+    optionDomId: (index: number) => string;
+    /** Подвинуть окно виртуализации к строке набора. */
+    scrollVirtualToIndex: (index: number) => void;
+    /** Действия выбора: они трогают модель и эмиты, поэтому живут в компоненте. */
+    openDropdown: () => void;
+    closeDropdown: () => void;
+    addCustom: () => void;
+    toggleValue: (value: TValue) => void;
+}
+export interface SelectNavigation<TValue extends GrSelectValue> {
+    navigableItems: ComputedRef<GrSelectNavigableItem<TValue>[]>;
+    /** Индекс активного элемента: пишется и снаружи — строка «Add …» подсвечивается наведением. */
+    activeIndex: Ref<number>;
+    activeItem: ComputedRef<GrSelectNavigableItem<TValue> | undefined>;
+    addOptionDomId: ComputedRef<string>;
+    activeValue: ComputedRef<TValue | undefined>;
+    activeDescendantId: ComputedRef<string | undefined>;
+    triggerActiveDescendant: ComputedRef<string | undefined>;
+    searchActiveDescendant: ComputedRef<string | undefined>;
+    onOptionHover: (panelIndex: number) => void;
+    onComboKeydown: (event: KeyboardEvent) => void;
+    initActiveIndex: () => void;
+    resetActive: () => void;
+}
+export declare function useSelectNavigation<TValue extends GrSelectValue>(options: UseSelectNavigationOptions<TValue>): SelectNavigation<TValue>;

package/dist/types/src/components/GrSelect/composables/useSelectPanelItems.d.ts

@@ -0,0 +1,67 @@
+import type { ComputedRef } from 'vue';
+import type { GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectValue } from '../grSelectStyles';
+/**
+ * Элемент рендера панели: либо заголовок группы, либо опция.
+ * Группировка сохраняется, фильтрация по запросу скрывает пустые группы.
+ */
+export type GrSelectPanelItem<TValue extends GrSelectValue> = {
+    kind: 'group';
+    label: string;
+    key: string;
+}
+/** `groupKey` связывает опцию с заголовком её группы для скринридера. */
+ | {
+    kind: 'option';
+    option: GrSelectOption<TValue>;
+    key: string;
+    groupKey?: string;
+};
+export type GrSelectPanelOptionRow<TValue extends GrSelectValue> = {
+    option: GrSelectOption<TValue>;
+    key: string;
+    index: number;
+};
+export type GrSelectPanelRow<TValue extends GrSelectValue> = {
+    kind: 'group';
+    label: string;
+    key: string;
+    options: GrSelectPanelOptionRow<TValue>[];
+    /**
+     * Есть ли в этой отрисовке видимый заголовок. При виртуализации окно может
+     * начаться серединой группы: обёртка нужна всё равно, а заголовка нет —
+     * имя тогда идёт в `aria-label`.
+     */
+    labelVisible?: boolean;
+    /** Позиция заголовка в `panelItems` — по ней его замеряет виртуализатор. */
+    labelIndex?: number;
+} | ({
+    kind: 'option';
+} & GrSelectPanelOptionRow<TValue>);
+/**
+ * Состав панели `GrSelect`: плоский набор строк, их группировка и признак
+ * «набранное можно добавить».
+ *
+ * Отвечает только на вопрос «что показывать в списке». Окно виртуализации,
+ * клавиатура и вид — не здесь.
+ */
+export interface UseSelectPanelItemsOptions<TValue extends GrSelectValue> {
+    optionsResolved: ComputedRef<GrSelectOptionOrGroup<TValue>[]>;
+    flatOptions: ComputedRef<GrSelectOption<TValue>[]>;
+    isOptionGroup: (item: GrSelectOptionOrGroup<TValue>) => item is GrSelectOptionGroup<TValue>;
+    modelSingle: ComputedRef<TValue | ''>;
+    selectedValues: ComputedRef<TValue[]>;
+    hasModelInOptions: ComputedRef<boolean>;
+    sameValue: (a: unknown, b: unknown) => boolean;
+    /** Текст поиска: он же кандидат в кастомные значения. */
+    query: () => string;
+    allowCustomValue: () => boolean;
+    filterable: () => boolean;
+    multiple: () => boolean;
+    isPanelView: () => boolean;
+}
+export interface SelectPanelItems<TValue extends GrSelectValue> {
+    panelItems: ComputedRef<GrSelectPanelItem<TValue>[]>;
+    panelRows: ComputedRef<GrSelectPanelRow<TValue>[]>;
+    canAddCustom: ComputedRef<boolean>;
+}
+export declare function useSelectPanelItems<TValue extends GrSelectValue>(options: UseSelectPanelItemsOptions<TValue>): SelectPanelItems<TValue>;

package/dist/types/src/components/GrSelect/composables/useSelectValues.d.ts

@@ -0,0 +1,37 @@
+import type { ComputedRef } from 'vue';
+import type { GrSelectModelValue, GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectValue } from '../grSelectStyles';
+/**
+ * Значение и опции `GrSelect`: плоский список, выбранное, подпись триггера.
+ *
+ * Здесь живёт всё, что отвечает на вопрос «что выбрано и как это назвать», и
+ * ничего про панель, клавиатуру и вид. Сравнения идут через ключ значения
+ * (`selectValue.ts`), а не через `===`: модель приходит снаружи отдельной
+ * копией, и объекты по ссылке не совпали бы ни с одной опцией.
+ */
+export interface UseSelectValuesOptions<TValue extends GrSelectValue> {
+    modelValue: () => GrSelectModelValue<TValue>;
+    options: () => GrSelectOptionOrGroup<TValue>[] | undefined;
+    multiple: () => boolean;
+    /** Имя поля-идентификатора для объектных значений. */
+    valueKey: () => string | undefined;
+    placeholder: () => string | undefined;
+}
+export interface SelectValues<TValue extends GrSelectValue> {
+    optionsResolved: ComputedRef<GrSelectOptionOrGroup<TValue>[]>;
+    /** Плоский список всех опций (группы «развёрнуты»). */
+    flatOptions: ComputedRef<GrSelectOption<TValue>[]>;
+    isOptionGroup: (item: GrSelectOptionOrGroup<TValue>) => item is GrSelectOptionGroup<TValue>;
+    keyOf: (value: unknown) => string;
+    sameValue: (a: unknown, b: unknown) => boolean;
+    modelSingle: ComputedRef<TValue | ''>;
+    modelMultiple: ComputedRef<TValue[]>;
+    selectedValues: ComputedRef<TValue[]>;
+    hasSelection: ComputedRef<boolean>;
+    /** Восстанавливает типизированное значение из строки, пришедшей из DOM. */
+    fromDomValue: (raw: string) => TValue;
+    selectedOptions: ComputedRef<GrSelectOption<TValue>[]>;
+    hasModelInOptions: ComputedRef<boolean>;
+    displayLabel: ComputedRef<string>;
+    displayText: ComputedRef<string>;
+}
+export declare function useSelectValues<TValue extends GrSelectValue>(options: UseSelectValuesOptions<TValue>): SelectValues<TValue>;

package/dist/types/src/components/GrSelect/composables/useSelectVirtualization.d.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { GrSelectValue } from '../grSelectStyles';
+import type { GrSelectPanelItem, GrSelectPanelRow } from './useSelectPanelItems';
+export interface UseSelectVirtualizationOptions<TValue extends GrSelectValue> {
+    panelItems: ComputedRef<GrSelectPanelItem<TValue>[]>;
+    panelRows: ComputedRef<GrSelectPanelRow<TValue>[]>;
+    canAddCustom: ComputedRef<boolean>;
+    /** Контейнер списка: по нему считается окно и замеряются строки. */
+    listboxEl: Ref<HTMLElement | null>;
+    enabled: () => boolean;
+    maxHeight: () => number;
+}
+export interface SelectVirtualization<TValue extends GrSelectValue> {
+    virtualEnabled: ComputedRef<boolean>;
+    /** Сдвиг набора: строка «Add …» стоит перед опциями. */
+    addOffset: ComputedRef<number>;
+    scrollToIndex: (index: number) => void;
+    /** Замер строки: оценка высоты уточняется по реальному узлу. */
+    measure: (index: number, el: Element | null) => void;
+    /** ARIA набора для опции; вне виртуализации набор виден по DOM. */
+    optionSetProps: (index: number) => Record<string, number> | undefined;
+    addOptionSetProps: ComputedRef<Record<string, number> | undefined>;
+    showAddOption: ComputedRef<boolean>;
+    renderedPanelRows: ComputedRef<GrSelectPanelRow<TValue>[]>;
+    listboxStyle: ComputedRef<Record<string, string>>;
+}
+export declare function useSelectVirtualization<TValue extends GrSelectValue>(options: UseSelectVirtualizationOptions<TValue>): SelectVirtualization<TValue>;

package/dist/types/src/components/GrSelect/config.d.ts

@@ -1 +1 @@
-export declare const grSelectConfig: import("@feugene/unocss-preset-granular").GranularComponentDescriptor<"GrSelect">;
+export declare const grSelectConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrSelect">;

package/dist/types/src/components/GrSelect/grSelectStyles.d.ts

@@ -1,25 +1,59 @@
+import type { GrComponentSize, GrControlState } from '../shared/sizes';
 export type GrSelectView = 'default' | 'link';
-export type GrSelectSize = 'xs' | 'sm' | 'md' | 'lg';
+export type GrSelectSize = GrComponentSize;
 export type GrSelectVariant = 'primary' | 'default' | 'muted' | 'danger';
 export type GrSelectUnderline = 'auto' | 'always' | 'none';
 export type GrSelectOptionsView = 'native' | 'panel';
-export type GrSelectOption = {
-    value: string;
+/**
+ * Тип значения опции. Ограничен примитивами, которые переживают путь через DOM:
+ * нативный `<select>` хранит в `option.value` только строку, поэтому значение
+ * должно однозначно восстанавливаться из своего строкового представления.
+ * Объектные модели потребовали бы отдельного key-экстрактора — см. `docs/components.md`.
+ */
+/**
+ * Значение опции. Объект допустим, но тогда обязателен проп `valueKey`: в DOM
+ * значение живёт строкой, и без ключа объекты неотличимы друг от друга.
+ */
+export type GrSelectValue = string | number | object;
+export type GrSelectState = GrControlState;
+export type GrSelectOption<TValue extends GrSelectValue = string> = {
+    value: TValue;
     label: string;
     disabled?: boolean;
 };
 /** Группа опций: заголовок `label` + вложенные опции `options`. */
-export type GrSelectOptionGroup = {
+export type GrSelectOptionGroup<TValue extends GrSelectValue = string> = {
     label: string;
-    options: GrSelectOption[];
+    options: GrSelectOption<TValue>[];
 };
 /** Элемент списка опций: либо одиночная опция, либо группа опций. */
-export type GrSelectOptionOrGroup = GrSelectOption | GrSelectOptionGroup;
-export type GrSelectModelValue = string | string[];
-export declare const defaultBaseClass = "w-full rounded-md border border-[var(--gr-brd)] bg-[var(--gr-bg)] text-[var(--gr-fg)] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
-export declare const linkBaseClass = "cursor-pointer inline-block w-auto align-baseline appearance-none bg-transparent border border-transparent px-0 py-0 rounded-[6px] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+export type GrSelectOptionOrGroup<TValue extends GrSelectValue = string> = GrSelectOption<TValue> | GrSelectOptionGroup<TValue>;
+export type GrSelectModelValue<TValue extends GrSelectValue = string> = TValue | TValue[];
+export declare const defaultBaseClass = "w-full rounded-[var(--gr-radius-control)] border bg-[var(--gr-bg)] text-[var(--gr-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+/**
+ * Цвет рамки по состоянию — та же карта, что у `GrInput` и `GrTextarea`: поля
+ * одной формы обязаны показывать ошибку одинаково.
+ */
+export declare const borderClassByState: Record<GrSelectState, string>;
+/**
+ * Ошибка валидации красится своей ролью, а не декоративным тоном `danger`:
+ * `state="danger"` — это подсветка по решению разработчика, `invalid` — вердикт
+ * валидации, и тема вправе развести их по цвету.
+ */
+export declare const invalidBorderClass = "border-[var(--gr-invalid-brd)] focus-visible:ring-[var(--gr-invalid-ring)]";
+export declare const linkBaseClass = "cursor-pointer inline-block w-auto align-baseline appearance-none bg-transparent border border-transparent px-0 py-0 rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
 export declare const selectSizeClassBySize: Record<GrSelectSize, string>;
 export declare const selectLinkSizeClassBySize: Record<GrSelectSize, string>;
+/**
+ * Ссылка — это ТЕКСТ на фоне страницы, поэтому опасный тон берётся из
+ * `--gr-danger-text`, а не из насыщенного `--gr-danger` (последний под текст не
+ * рассчитан). Hover/active выводятся подмесом `--gr-fg` — той же формулой, что
+ * `GrLink`. `primary` берётся из `--gr-primary-text` по той же причине: на фоне
+ * страницы насыщенный `--gr-primary` под текст не рассчитан.
+ *
+ * Классы записаны литералами, а не собраны интерполяцией: safelist и скан
+ * UnoCSS читают исходник, и вычисленная строка для них не класс.
+ */
 export declare const selectLinkVariantClassByVariant: Record<GrSelectVariant, string>;
 /**
  * Variant-классы для видимой метки в `view="link"` + `optionsView="native"`.
@@ -38,6 +72,9 @@ export declare const grSelectLinkNativeOverlayClass = "peer absolute inset-0 w-f
  * Классы видимой метки для `view="link"` + `optionsView="native"` (поверх прозрачного `<select>`).
  * Получает все link-стили (size/variant/underline), а также focus-ring через `peer-focus-visible`.
  */
+export declare const grSelectLinkNativeLabelBaseClass = "pointer-events-none inline-block whitespace-nowrap align-baseline rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)]";
+export declare const grSelectLinkNativeLabelDisabledClass = "cursor-not-allowed text-[var(--gr-muted-fg)] no-underline";
+export declare const grSelectLinkNativeLabelFocusClass = "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--gr-ring)]";
 export declare function grSelectLinkNativeLabelClass(options: {
     size: GrSelectSize;
     variant: GrSelectVariant;
@@ -50,6 +87,8 @@ export declare function grSelectClass(options: {
     disabled: boolean;
     variant: GrSelectVariant;
     underline: GrSelectUnderline;
+    state?: GrSelectState;
+    invalid?: boolean;
 }): string;
 export declare function grSelectNativeClass(options: {
     view: GrSelectView;
@@ -58,6 +97,8 @@ export declare function grSelectNativeClass(options: {
     variant: GrSelectVariant;
     underline: GrSelectUnderline;
     showNativeChevron: boolean;
+    state?: GrSelectState;
+    invalid?: boolean;
 }): string;
 export declare function grSelectTriggerClass(options: {
     view: GrSelectView;
@@ -66,5 +107,19 @@ export declare function grSelectTriggerClass(options: {
     disabled: boolean;
     variant: GrSelectVariant;
     underline: GrSelectUnderline;
+    state?: GrSelectState;
+    invalid?: boolean;
 }): string;
 export declare const grSelectPanelClasses = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] overflow-hidden";
+export declare const selectOptionBaseClass = "rounded-[var(--gr-radius-md)] px-3 py-2 text-left text-[length:var(--gr-text-sm)]";
+export declare const selectOptionLinkWidthClass = "block min-w-full w-max whitespace-nowrap";
+export declare const selectOptionWidthClass = "w-full";
+export declare const selectOptionEnabledClass = "hover:bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]";
+export declare const selectOptionActiveClass = "bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]";
+/** Выключенная опция гасится токеном текста — по той же причине, что и контрол. */
+export declare const selectOptionDisabledClass = "cursor-not-allowed text-[var(--gr-muted-fg)]";
+export declare function grSelectOptionClass(options: {
+    view: GrSelectView;
+    disabled: boolean;
+    active: boolean;
+}): string;

package/dist/types/src/components/GrSelect/index.d.ts

@@ -1,6 +1,10 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrSelectComponent from './GrSelect.vue';
 export { default } from './GrSelect.vue';
 export { default as GrSelect } from './GrSelect.vue';
 export { grSelectConfig } from './config';
 export type { GrSelectConfigurableProps } from './defaults';
-export type { GrSelectModelValue, GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectOptionsView, GrSelectProps, GrSelectSize, GrSelectUnderline, GrSelectVariant, GrSelectView, } from './GrSelect.vue';
+export type { GrSelectModelValue, GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectOptionsView, GrSelectProps, GrSelectSize, GrSelectState, GrSelectUnderline, GrSelectVariant, GrSelectView, } from './GrSelect.vue';
 export { grSelectSafelist } from './safelist';
+export type { GrSelectEmits } from './GrSelect.vue';
+export type GrSelectInstance = ComponentExposed<typeof GrSelectComponent>;

package/dist/types/src/components/GrSelect/selectValue.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Сравнение значений `GrSelect` — чистая арифметика без Vue и без пропов.
+ *
+ * Вынесено отдельным модулем, потому что от состояния компонента здесь не
+ * зависит ничего: только само значение и имя поля-идентификатора. Тестируется
+ * напрямую, без монтирования.
+ */
+/**
+ * Ключ значения: для объектов — поле `valueKey`, иначе само значение строкой.
+ * Через него идут все сравнения — `===` для объектов означал бы сравнение
+ * ссылок, а модель обычно приходит снаружи отдельной копией.
+ */
+export declare function selectValueKey(value: unknown, valueKey?: string): string;
+/**
+ * `0` — валидное значение, поэтому «пусто» проверяется явно, а не через falsy:
+ * прежняя проверка `if (!value)` теряла ноль вместе с пустой строкой.
+ */
+export declare function isEmptySelectValue(value: unknown): boolean;
+/** Модель к массиву: скаляр становится набором из одного, пустое — пустым. */
+export declare function toSelectArray<TValue>(value: TValue | TValue[] | ''): TValue[];