@skyservice-developers/vue-dev-kit 2.13.3 → 2.14.0

package/README.md

@@ -33,10 +33,11 @@ import {
   SkyTableRoot, SkyTableHeader, SkyTableHead, SkyTableBody, SkyTableRow, SkyTableCell,
   useTableSort, useTableSelection, useColumnVisibility,
   FunctionalCalendar, SkyDateRangePicker,
+  SkyFilterDropdown,
   // widgets
   SkyTileCard,
   // features
-  SkyCheckboxFilter,
+  SkyCheckboxFilter, SkySelectFilter,
   TableMassActions, TableColumnSettings, TableVirtualBody,
   // sdk
   navigate, SkyserviceAPI, isInsideIframe,
@@ -1110,7 +1111,7 @@ const range = reactive({ start: '', end: '' }) // { start, end } у формат
 
 ### SkyCheckboxFilter
 
-Кнопка-фільтр з дропдауном, пошуком і мульти-вибором (через `SkyCheckbox`). Лочить скрол сторінки, поки відкритий. Стилі повторюють адмінку Skymarket 1:1.
+Кнопка-фільтр з дропдауном, пошуком і мульти-вибором (через `SkyCheckbox`). Оболонку — тригер, панель, позиціювання, закриття — тримає `SkyFilterDropdown`. Стилі повторюють адмінку Skymarket 1:1.
 
 ```vue
 <SkyCheckboxFilter
@@ -1136,6 +1137,77 @@ const range = reactive({ start: '', end: '' }) // { start, end } у формат
 | `searchPlaceholder` | `String` | `'Пошук'` | Placeholder пошуку |
 | `disabled` | `Boolean` | `false` | Вимкнений стан |
 
+### SkySelectFilter
+
+Той самий фільтр-чіп, але з **одиничним** вибором — для випадків, коли бекенд приймає рівно
+одне значення. Після вибору дропдаун закривається.
+
+```vue
+<SkySelectFilter
+  v-model="categoryId"
+  title="Категорія"
+  all-label="Усі категорії"
+  :options="[
+    { value: 10, name: 'Напої', depth: 0 },
+    { value: 11, name: 'Кава', depth: 1 },
+  ]"
+/>
+```
+
+#### Props
+
+| Prop | Тип | За замовчуванням | Опис |
+|------|-----|------------------|------|
+| `title` | `String` | — | Заголовок фільтра (показується у тригері) |
+| `options` | `Array<{ value, name, depth? }>` | — | Опції; `depth` лише відступає рядок |
+| `modelValue` | `String\|Number\|null` | `null` | Обране значення (v-model); `null` — фільтр вимкнено |
+| `allLabel` | `String` | `''` | Лейбл рядка «без фільтра»; порожній — рядка немає |
+| `searchPlaceholder` | `String` | `'Пошук'` | Placeholder пошуку |
+| `emptyLabel` | `String` | `'Нічого не знайдено'` | Текст порожнього результату пошуку |
+| `searchable` | `Boolean` | `true` | Показувати поле пошуку |
+| `disabled` | `Boolean` | `false` | Вимкнений стан |
+
+---
+
+## SkyFilterDropdown
+
+Оболонка фільтра: тригер-чіп + панель. Бере на себе тільки спільне — стан відкриття,
+позиціювання, закриття і доступність; вміст панелі за викликачем. На ній побудовані
+`SkyCheckboxFilter` і `SkySelectFilter`; бери її напряму для фільтра з власним вмістом.
+
+Панель телепортується у `<body>` (щоб `transform` у предка не ламав `position: fixed`),
+перепозиціюється на скрол і resize, притискається до країв екрана й розкривається вгору,
+коли знизу тісно. Скрол сторінки **не** локиться. Закриття — клік поза межами, `Esc`.
+
+```vue
+<SkyFilterDropdown title="Період" summary="Цей тиждень">
+  <template #default="{ close }">
+    <button @click="close">Готово</button>
+  </template>
+</SkyFilterDropdown>
+```
+
+#### Props
+
+| Prop | Тип | За замовчуванням | Опис |
+|------|-----|------------------|------|
+| `title` | `String` | — | Лейбл чіпа |
+| `summary` | `String` | `''` | Заміняє `title`, коли обрано рівно одне |
+| `badge` | `String\|Number` | `''` | Показується поруч із `title` (напр. лічильник) |
+| `align` | `'start'\|'end'` | `'start'` | До якого краю тригера притискається панель |
+| `width` | `Number` | `280` | Ширина панелі в px |
+| `disabled` | `Boolean` | `false` | Вимкнений стан |
+
+#### Slots / Events / Expose
+
+| | |
+|---|---|
+| slot `default` | `{ close }` — вміст панелі |
+| events | `open`, `close` |
+| expose | `open()`, `close()`, `toggle()`, `isOpen` |
+
+CSS-змінні (`--sky-filter-*`) — див. [доки](https://74cfe434-a2b3-4d49-8fa7-db7343e399dc.apps.platform365.online/components/sky-filter-dropdown).
+
 ---
 
 ## sky-service-ui-components
@@ -1287,6 +1359,7 @@ src/
 │       ├── table/       # примітиви композиційної таблиці (Root/Header/Head/Body/Row/Cell/Empty)
 │       ├── SkyTable/     # готова віртуал-скрол таблиця (Header/Row/Footer/DynamicScroller/items/*)
 │       ├── SkyTileCard/
+│       ├── SkyFilterDropdown/  # оболонка фільтра (тригер + панель) + FilterSearch
 │       ├── functional-calendar/ # форк vue-functional-calendar, перенесений зі SkyMarket 1:1
 │       ├── SkyDateRangePicker/  # DatePickerRange зі SkyMarket, store/langs → props/локальний стан
 │       └── <Component>/
@@ -1296,7 +1369,8 @@ src/
 │       └── table/   # skyTableFeatures + useTableSort / useTableSelection / useColumnVisibility
 ├── features/          # фічові блоки (orchestration shared/ui)
 │   ├── index.ts
-│   ├── SkyCheckboxFilter/
+│   ├── SkyCheckboxFilter/  # мульти-вибір на SkyFilterDropdown
+│   ├── SkySelectFilter/    # одиничний вибір на SkyFilterDropdown
 │   ├── table/         # TableMassActions / TableColumnSettings / TableVirtualBody
 │   └── data-table/    # SkyDataTable на TanStack v9 + перемикач колонок
 ├── sdk/               # TypeScript SDK (без Vue залежностей)

package/dist/features/SkySelectFilter/SkySelectFilter.vue.d.ts

@@ -0,0 +1,73 @@
+type OptionValue = string | number;
+interface Option {
+    value: OptionValue;
+    name: string;
+    /** Nesting level for tree-shaped lists; indents the row, nothing more. */
+    depth?: number;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title: string;
+    options: Option[];
+    /** `null` — nothing picked, i.e. the filter is off. */
+    modelValue?: OptionValue | null;
+    /** Label of the leading "no filter" row; omit to hide that row. */
+    allLabel?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    searchable?: boolean;
+    disabled?: boolean;
+}>, {
+    modelValue: null;
+    allLabel: string;
+    searchPlaceholder: string;
+    emptyLabel: string;
+    searchable: boolean;
+    disabled: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (args_0: OptionValue | null) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title: string;
+    options: Option[];
+    /** `null` — nothing picked, i.e. the filter is off. */
+    modelValue?: OptionValue | null;
+    /** Label of the leading "no filter" row; omit to hide that row. */
+    allLabel?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    searchable?: boolean;
+    disabled?: boolean;
+}>, {
+    modelValue: null;
+    allLabel: string;
+    searchPlaceholder: string;
+    emptyLabel: string;
+    searchable: boolean;
+    disabled: boolean;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: OptionValue | null) => any) | undefined;
+}>, {
+    modelValue: OptionValue | null;
+    disabled: boolean;
+    searchPlaceholder: string;
+    allLabel: string;
+    emptyLabel: string;
+    searchable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<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_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/features/SkySelectFilter/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SkySelectFilter.vue';

package/dist/features/index.d.ts

@@ -1,3 +1,4 @@
 export { default as SkyCheckboxFilter } from './SkyCheckboxFilter';
+export { default as SkySelectFilter } from './SkySelectFilter';
 export * from './table';
 export * from './data-table';

package/dist/shared/ui/SkyFilterDropdown/FilterSearch.vue.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    modelValue: string;
+    placeholder?: string;
+    /** Rendered as the field's accessible name (the row has no visible label). */
+    label?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    modelValue: string;
+    placeholder?: string;
+    /** Rendered as the field's accessible name (the row has no visible label). */
+    label?: string;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/shared/ui/SkyFilterDropdown/SkyFilterDropdown.vue.d.ts

@@ -0,0 +1,86 @@
+declare function open(): void;
+declare function close(): void;
+declare function toggle(): void;
+declare function __VLS_template(): {
+    default?(_: {
+        close: typeof close;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** Chip label, always visible. */
+    title: string;
+    /** Replaces the title when exactly one thing is picked (e.g. the option name). */
+    summary?: string;
+    /** Shown next to the title when several things are picked (e.g. the count). */
+    badge?: string | number;
+    disabled?: boolean;
+    /** Which trigger edge the panel lines up with when it fits. */
+    align?: "start" | "end";
+    /** Panel width in px; the panel never grows past the viewport. */
+    width?: number;
+}>, {
+    summary: string;
+    badge: string;
+    disabled: boolean;
+    align: string;
+    width: number;
+}>>, {
+    open: typeof open;
+    close: typeof close;
+    toggle: typeof toggle;
+    isOpen: import('vue').Ref<boolean, boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    open: () => void;
+    close: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** Chip label, always visible. */
+    title: string;
+    /** Replaces the title when exactly one thing is picked (e.g. the option name). */
+    summary?: string;
+    /** Shown next to the title when several things are picked (e.g. the count). */
+    badge?: string | number;
+    disabled?: boolean;
+    /** Which trigger edge the panel lines up with when it fits. */
+    align?: "start" | "end";
+    /** Panel width in px; the panel never grows past the viewport. */
+    width?: number;
+}>, {
+    summary: string;
+    badge: string;
+    disabled: boolean;
+    align: string;
+    width: number;
+}>>> & Readonly<{
+    onOpen?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    disabled: boolean;
+    summary: string;
+    badge: string | number;
+    align: "start" | "end";
+    width: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<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_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/shared/ui/SkyFilterDropdown/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SkyFilterDropdown.vue';

package/dist/shared/ui/index.d.ts

@@ -13,6 +13,7 @@ export { default as SkyCardHeader } from './SkyCardHeader';
 export { default as SkyCardRow } from './SkyCardRow';
 export { default as SkyCheckbox } from './SkyCheckbox';
 export { default as SkyDateRangePicker } from './SkyDateRangePicker';
+export { default as SkyFilterDropdown } from './SkyFilterDropdown';
 export { default as SkyInput } from './SkyInput';
 export { default as SkyLoader } from './SkyLoader';
 export { default as SkySelect } from './SkySelect';