@feugene/granularity 0.42.0 → 0.44.0

package/dist/types/composables/useScrollSpy.d.ts

@@ -0,0 +1,59 @@
+import type { Ref } from 'vue';
+/**
+ * Отслеживание того, до какого раздела дочитали.
+ *
+ * Композабл владеет всем, что следует из **положения прокрутки**: линией
+ * активации, выбором раздела, прокруткой к нему и закрепом на время этой
+ * прокрутки. Всё, что следует из того, что пункт оглавления является
+ * **ссылкой** — разметка, `aria-current`, модификаторы клика, — остаётся у
+ * компонента `GrScrollSpy`.
+ *
+ * ```ts
+ * const spy = useScrollSpy({
+ *   sections: () => ids.value,
+ *   offset: () => headerHeight.value,
+ *   onChange: id => emit('activeChange', id),
+ * })
+ * ```
+ */
+export interface UseScrollSpyOptions {
+    /**
+     * Идентификаторы разделов. Порядок задаёт порядок пунктов у потребителя, но
+     * на ответ не влияет: активный выбирается по геометрии.
+     */
+    sections: () => readonly string[];
+    /**
+     * Элемент раздела. По умолчанию — `document.getElementById`.
+     *
+     * Дефолт не догадка: идентификаторы разделов и есть цели ссылок `#id`, то
+     * есть DOM-id по определению жанра.
+     */
+    elementFor?: (id: string) => HTMLElement | null | undefined;
+    /** Скроллпорт. Не задан — ищется от первого раздела, не найден — документ. */
+    scroller?: () => HTMLElement | null | undefined;
+    /**
+     * Отступ линии активации от верха скроллпорта, **в пикселях**.
+     *
+     * Именно число, а не CSS-длина: резолв `4rem` или `var(...)` требует
+     * `getComputedStyle`, то есть DOM, — а композабл обязан оставаться
+     * проверяемым без него. Длину резолвит потребитель.
+     */
+    offset?: () => number;
+    /** Наблюдение выключено: `active` сбрасывается в `null`. */
+    disabled?: () => boolean;
+    /** Активный сменился. Зовётся на смене, а не на каждой записи наблюдателя. */
+    onChange?: (id: string | null, previous: string | null) => void;
+}
+export interface UseScrollSpyReturn {
+    /** Активный раздел. `null` — линия ещё не дошла до первого. */
+    active: Readonly<Ref<string | null>>;
+    /** Прокрутить к разделу и закрепить его активным до следующей прокрутки. */
+    scrollTo: (id: string, options?: {
+        behavior?: ScrollBehavior;
+    }) => void;
+    /** Перечитать отступ, скроллпорт и геометрию. */
+    refresh: () => void;
+    /** Закрепить активным вручную: страницу прокручивает не оглавление. */
+    pin: (id: string | null) => void;
+}
+export declare function useScrollSpy(options: UseScrollSpyOptions): UseScrollSpyReturn;

package/dist/types/granular-provider/shared.d.ts

@@ -11,6 +11,7 @@ export declare const granularityDefaultThemes: readonly GranularityThemeName[];
  * `@feugene/granularity/components/<Name>`.
  */
 export declare const granularityComponentConfigs: {
+    GrAffix: GranularComponentDescriptor<"GrAffix">;
     GrAlert: GranularComponentDescriptor<"GrAlert">;
     GrAutocomplete: GranularComponentDescriptor<"GrAutocomplete">;
     GrAvatar: GranularComponentDescriptor<"GrAvatar">;
@@ -21,6 +22,7 @@ export declare const granularityComponentConfigs: {
     GrButton: GranularComponentDescriptor<"GrButton">;
     GrButtonGroup: GranularComponentDescriptor<"GrButtonGroup">;
     GrCard: GranularComponentDescriptor<"GrCard">;
+    GrCarousel: GranularComponentDescriptor<"GrCarousel">;
     GrCheckbox: GranularComponentDescriptor<"GrCheckbox">;
     GrCheckboxGroup: GranularComponentDescriptor<"GrCheckboxGroup">;
     GrChip: GranularComponentDescriptor<"GrChip">;
@@ -68,6 +70,7 @@ export declare const granularityComponentConfigs: {
     GrRadioGroup: GranularComponentDescriptor<"GrRadioGroup">;
     GrRating: GranularComponentDescriptor<"GrRating">;
     GrResponseErrorBanner: GranularComponentDescriptor<"GrResponseErrorBanner">;
+    GrScrollSpy: GranularComponentDescriptor<"GrScrollSpy">;
     GrSegmented: GranularComponentDescriptor<"GrSegmented">;
     GrSelect: GranularComponentDescriptor<"GrSelect">;
     GrSidebar: GranularComponentDescriptor<"GrSidebar">;
@@ -85,6 +88,7 @@ export declare const granularityComponentConfigs: {
     GrTimeline: GranularComponentDescriptor<"GrTimeline">;
     GrToaster: GranularComponentDescriptor<"GrToaster">;
     GrTooltip: GranularComponentDescriptor<"GrTooltip">;
+    GrTransfer: GranularComponentDescriptor<"GrTransfer">;
     GrTree: GranularComponentDescriptor<"GrTree">;
     GrTreeSelect: GranularComponentDescriptor<"GrTreeSelect">;
     GrValue: GranularComponentDescriptor<"GrValue">;

package/dist/types/i18n/messages/en.d.ts

@@ -9,6 +9,35 @@ export declare const en: {
     en: {
         gr: () => Promise<{
             default: {
+                transfer: {
+                    sourceTitle: string;
+                    targetTitle: string;
+                    search: string;
+                    toTarget: string;
+                    toSource: string;
+                    selectAll: string;
+                    moveUp: string;
+                    moveDown: string;
+                    selected: string;
+                    shown: string;
+                    empty: string;
+                    emptyFiltered: string;
+                    moved: string;
+                    reordered: string;
+                    reorderFiltered: string;
+                    cancelled: string;
+                };
+                carousel: {
+                    roledescription: string;
+                    slideRoledescription: string;
+                    slidePosition: string;
+                    previous: string;
+                    next: string;
+                    play: string;
+                    pause: string;
+                    indicators: string;
+                    autoplayStopped: string;
+                };
                 chip: {
                     remove: string;
                     removeNamed: string;
@@ -147,6 +176,9 @@ export declare const en: {
                 navbar: {
                     openMenu: string;
                 };
+                scrollSpy: {
+                    label: string;
+                };
                 responseError: {
                     networkTitle: string;
                     networkMessage: string;
@@ -370,6 +402,35 @@ export declare const en: {
                     label: string;
                 };
             };
+            transfer: {
+                sourceTitle: string;
+                targetTitle: string;
+                search: string;
+                toTarget: string;
+                toSource: string;
+                selectAll: string;
+                moveUp: string;
+                moveDown: string;
+                selected: string;
+                shown: string;
+                empty: string;
+                emptyFiltered: string;
+                moved: string;
+                reordered: string;
+                reorderFiltered: string;
+                cancelled: string;
+            };
+            carousel: {
+                roledescription: string;
+                slideRoledescription: string;
+                slidePosition: string;
+                previous: string;
+                next: string;
+                play: string;
+                pause: string;
+                indicators: string;
+                autoplayStopped: string;
+            };
             chip: {
                 remove: string;
                 removeNamed: string;
@@ -508,6 +569,9 @@ export declare const en: {
             navbar: {
                 openMenu: string;
             };
+            scrollSpy: {
+                label: string;
+            };
             responseError: {
                 networkTitle: string;
                 networkMessage: string;

package/dist/types/i18n/messages/es.d.ts

@@ -2,6 +2,35 @@ export declare const es: {
     es: {
         gr: () => Promise<{
             default: {
+                transfer: {
+                    sourceTitle: string;
+                    targetTitle: string;
+                    search: string;
+                    toTarget: string;
+                    toSource: string;
+                    selectAll: string;
+                    moveUp: string;
+                    moveDown: string;
+                    selected: string;
+                    shown: string;
+                    empty: string;
+                    emptyFiltered: string;
+                    moved: string;
+                    reordered: string;
+                    reorderFiltered: string;
+                    cancelled: string;
+                };
+                carousel: {
+                    roledescription: string;
+                    slideRoledescription: string;
+                    slidePosition: string;
+                    previous: string;
+                    next: string;
+                    play: string;
+                    pause: string;
+                    indicators: string;
+                    autoplayStopped: string;
+                };
                 chip: {
                     remove: string;
                     removeNamed: string;
@@ -141,6 +170,9 @@ export declare const es: {
                 navbar: {
                     openMenu: string;
                 };
+                scrollSpy: {
+                    label: string;
+                };
                 responseError: {
                     networkTitle: string;
                     networkMessage: string;
@@ -365,6 +397,35 @@ export declare const es: {
                     label: string;
                 };
             };
+            transfer: {
+                sourceTitle: string;
+                targetTitle: string;
+                search: string;
+                toTarget: string;
+                toSource: string;
+                selectAll: string;
+                moveUp: string;
+                moveDown: string;
+                selected: string;
+                shown: string;
+                empty: string;
+                emptyFiltered: string;
+                moved: string;
+                reordered: string;
+                reorderFiltered: string;
+                cancelled: string;
+            };
+            carousel: {
+                roledescription: string;
+                slideRoledescription: string;
+                slidePosition: string;
+                previous: string;
+                next: string;
+                play: string;
+                pause: string;
+                indicators: string;
+                autoplayStopped: string;
+            };
             chip: {
                 remove: string;
                 removeNamed: string;
@@ -504,6 +565,9 @@ export declare const es: {
             navbar: {
                 openMenu: string;
             };
+            scrollSpy: {
+                label: string;
+            };
             responseError: {
                 networkTitle: string;
                 networkMessage: string;

package/dist/types/i18n/messages/ru.d.ts

@@ -2,6 +2,35 @@ export declare const ru: {
     ru: {
         gr: () => Promise<{
             default: {
+                transfer: {
+                    sourceTitle: string;
+                    targetTitle: string;
+                    search: string;
+                    toTarget: string;
+                    toSource: string;
+                    selectAll: string;
+                    moveUp: string;
+                    moveDown: string;
+                    selected: string;
+                    shown: string;
+                    empty: string;
+                    emptyFiltered: string;
+                    moved: string;
+                    reordered: string;
+                    reorderFiltered: string;
+                    cancelled: string;
+                };
+                carousel: {
+                    roledescription: string;
+                    slideRoledescription: string;
+                    slidePosition: string;
+                    previous: string;
+                    next: string;
+                    play: string;
+                    pause: string;
+                    indicators: string;
+                    autoplayStopped: string;
+                };
                 chip: {
                     remove: string;
                     removeNamed: string;
@@ -142,6 +171,9 @@ export declare const ru: {
                 navbar: {
                     openMenu: string;
                 };
+                scrollSpy: {
+                    label: string;
+                };
                 responseError: {
                     networkTitle: string;
                     networkMessage: string;
@@ -367,6 +399,35 @@ export declare const ru: {
                     label: string;
                 };
             };
+            transfer: {
+                sourceTitle: string;
+                targetTitle: string;
+                search: string;
+                toTarget: string;
+                toSource: string;
+                selectAll: string;
+                moveUp: string;
+                moveDown: string;
+                selected: string;
+                shown: string;
+                empty: string;
+                emptyFiltered: string;
+                moved: string;
+                reordered: string;
+                reorderFiltered: string;
+                cancelled: string;
+            };
+            carousel: {
+                roledescription: string;
+                slideRoledescription: string;
+                slidePosition: string;
+                previous: string;
+                next: string;
+                play: string;
+                pause: string;
+                indicators: string;
+                autoplayStopped: string;
+            };
             chip: {
                 remove: string;
                 removeNamed: string;
@@ -507,6 +568,9 @@ export declare const ru: {
             navbar: {
                 openMenu: string;
             };
+            scrollSpy: {
+                label: string;
+            };
             responseError: {
                 networkTitle: string;
                 networkMessage: string;

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components/GrAffix';
 export * from './components/GrAlert';
 export * from './components/GrAutocomplete';
 export * from './components/GrAvatar';
@@ -8,6 +9,7 @@ export * from './components/GrBreadcrumbs';
 export * from './components/GrButton';
 export * from './components/GrButtonGroup';
 export * from './components/GrCard';
+export * from './components/GrCarousel';
 export * from './components/GrCheckbox';
 export * from './components/GrCheckboxGroup';
 export * from './components/GrChip';
@@ -55,6 +57,7 @@ export * from './components/GrRadio';
 export * from './components/GrRadioGroup';
 export * from './components/GrRating';
 export * from './components/GrResponseErrorBanner';
+export * from './components/GrScrollSpy';
 export * from './components/GrSegmented';
 export * from './components/GrSelect';
 export * from './components/GrSidebar';
@@ -72,6 +75,7 @@ export * from './components/GrTextarea';
 export * from './components/GrTimeline';
 export * from './components/GrToaster';
 export * from './components/GrTooltip';
+export * from './components/GrTransfer';
 export * from './components/GrTree';
 export * from './components/GrTreeSelect';
 export * from './components/GrValue';
@@ -83,6 +87,8 @@ export { usePortalTarget } from './composables/usePortalTarget';
 export type { PortalTarget } from './composables/usePortalTarget';
 export { useOverlayLayer } from './composables/useOverlayLayer';
 export type { OverlayLayerHandle, UseOverlayLayerOptions } from './composables/useOverlayLayer';
+export { useScrollSpy } from './composables/useScrollSpy';
+export type { UseScrollSpyOptions, UseScrollSpyReturn } from './composables/useScrollSpy';
 export { useRovingFocus } from './composables/useRovingFocus';
 export type { GrRovingEdge, GrRovingOrientation, UseRovingFocusOptions, UseRovingFocusReturn, } from './composables/useRovingFocus';
 export * from './composables/useGrComponentConfig';