sit-onyx 1.0.0-beta.76 → 1.0.0-beta.78

package/dist/components/OnyxMoreList/OnyxMoreList.vue.d.ts

@@ -3,34 +3,42 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * List of components to render. Each child must implement the `useMoreChild()` composable.
+         * List of components to render. Each child must implement the `useMoreListChild()` composable.
          */
-        default(): unknown;
+        default(props: {
+            attributes: object;
+        }): unknown;
         /**
          * Slot to display at the end if not all default slot elements fit in the available width.
          */
-        more(props: MoreListSlotBindings): unknown;
+        more(props: MoreListSlotBindings & {
+            attributes: object;
+        }): unknown;
     }> & {
         /**
-         * List of components to render. Each child must implement the `useMoreChild()` composable.
+         * List of components to render. Each child must implement the `useMoreListChild()` composable.
          */
-        default(): unknown;
+        default(props: {
+            attributes: object;
+        }): unknown;
         /**
          * Slot to display at the end if not all default slot elements fit in the available width.
          */
-        more(props: MoreListSlotBindings): unknown;
+        more(props: MoreListSlotBindings & {
+            attributes: object;
+        }): unknown;
     };
     refs: {
-        parentRef: unknown;
+        parentRef: HTMLDivElement;
     };
-    rootEl: any;
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxMoreListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     visibilityChange: (args_0: MoreListSlotBindings) => any;
 }, string, import("vue").PublicProps, Readonly<OnyxMoreListProps> & Readonly<{
     onVisibilityChange?: ((args_0: MoreListSlotBindings) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/OnyxMoreList/types.d.ts

@@ -1,19 +1,10 @@
 import type { MoreListInjectionKey } from "../../composables/useMoreList";
 export type OnyxMoreListProps = {
-    /**
-     * Component to render (e.g. `<ul>` or `<div>`).
-     */
-    is: string;
     /**
      * Injection key to use. Must match the one used in the child components.
      * Will not be reactive so it must not be changed.
      */
     injectionKey: MoreListInjectionKey;
-    /**
-     * Whether the intersection observer should be disabled (e.g. when more feature is currently not needed due to mobile layout).
-     * Can increase performance.
-     */
-    disabled?: boolean;
 };
 export type MoreListSlotBindings = {
     /**

package/dist/composables/useMoreList.d.ts

@@ -1,40 +1,22 @@
 import { type InjectionKey, type Ref } from "vue";
-/**
- * Template ref of either a native HTML element or a custom Vue component.
- */
-export type HTMLOrInstanceRef = Element | {
-    $el: Element;
-} | null | undefined;
+import { type VueTemplateRefElement } from "./useResizeObserver";
 /**
  * Injection key for providing "more" data to child components of a list to e.g. render a "+3 more" indicator.
  */
-export type MoreListInjectionKey = InjectionKey<{
-    /**
-     * Map of components in the list. Key = unique ID, value = component template ref
-     */
-    components: Map<string, Ref<HTMLOrInstanceRef>>;
-    /**
-     * List of component IDs that are currently fully visible.
-     */
-    visibleElements: Ref<string[]>;
-    /**
-     * Whether the intersection observer should be disabled (e.g. when more feature is currently not needed due to mobile layout).
-     */
-    disabled: Ref<boolean>;
-}>;
+export type MoreListInjectionKey = InjectionKey<ReturnType<typeof useMoreList>>;
 export type UseMoreListOptions = {
     /**
-     * Vue template ref for the parent element containing the list of components.
+     * Vue template ref for the parent element containing the more indicator as well as the list of components.
      */
-    parentRef: Ref<HTMLOrInstanceRef>;
+    parentRef: Ref<VueTemplateRefElement>;
     /**
-     * Refs for the individual components in the list.
+     * Vue template ref for the element containing the list of components.
      */
-    componentRefs: Map<string, Ref<HTMLOrInstanceRef>>;
+    listRef: Ref<VueTemplateRefElement>;
     /**
-     * Whether the intersection observer should be disabled (e.g. when more feature is currently not needed due to mobile layout).
+     * Vue template ref for the more indicator element that might be shown if not all elements are visible.
      */
-    disabled?: Ref<boolean>;
+    moreIndicatorRef: Ref<VueTemplateRefElement>;
 };
 /**
  * Composable for managing a list of components where e.g. a "+3" more indicator should be shown if not all components
@@ -44,30 +26,45 @@ export type UseMoreListOptions = {
  *
  * ```vue
  * <script lang="ts" setup>
- * import { ref, type ComponentInstance } from "vue";
- * import { useMore } from "../../composables/useMore";
- * import OnyxNavButton from "../OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue";
+ * import { provide, ref, watch } from "vue";
+ * import { useMoreList, NAV_BAR_MORE_LIST_INJECTION_KEY } from "sit-onyx";
  *
  * const parentRef = ref<HTMLElement>();
- * const componentRefs = ref<ComponentInstance<typeof OnyxNavButton>[]>([]);
+ * const listRef = ref<HTMLElement>();
+ * const moreIndicatorRef = ref<HTMLElement>();
  *
- * const { visibleElements, hiddenElements } = useMore({ parentRef, componentRefs });
+ * const more = useMoreList({ parentRef, listRef, moreIndicatorRef });
+ * provide(NAV_BAR_MORE_LIST_INJECTION_KEY, more);
  * </script>
  *
  * <template>
- *   <div ref="parentRef" class="onyx-more">
- *     <OnyxNavButton v-for="i in 16" ref="componentRefs" :key="i" :label="`Nav button ${i}`" />
+ *   <div ref="parentRef" class="more-list">
+ *     <div ref="listRef" class="more-list__elements">
+ *        <OnyxNavButton v-for="i in 16" ref="componentRefs" :key="i" :label="`Nav button ${i}`" />
+ *     </div>
+ *
+ *     <div ref="moreIndicatorRef" class="more-list__indicator">
+ *        +{{ more.hiddenElements.value.length }} more
+ *     </div>
  *   </div>
  * </template>
  *
  * <style lang="scss">
- * @use "../../styles/mixins/layers.scss";
+ * .more-list {
+ *   display: flex;
+ *   align-items: center;
+ *   gap: var(--onyx-spacing-4xs);
  *
- * .onyx-more {
- *   @include layers.component() {
- *     display: flex;
- *     align-items: center;
+ *   &__elements {
+ *     display: inherit;
+ *     align-items: inherit;
+ *     gap: inherit;
  *     overflow-x: clip;
+ *    }
+ *
+ *   &__indicator {
+ *     min-width: max-content;
+ *     max-width: 100%;
  *   }
  * }
  * </style>
@@ -81,38 +78,38 @@ export declare const useMoreList: (options: UseMoreListOptions) => {
     /**
      * IDs of currently fully or partially hidden components in the list.
      */
-    hiddenElements: import("vue").ComputedRef<string[]>;
+    hiddenElements: Ref<string[], string[]>;
+    /**
+     * Map of widths for all components in the list. Key = component ID.
+     * Components in the list must inject this map and add a ref for their width to it.
+     *
+     * @see `useMoreListChild()`
+     */
+    componentMap: import("vue").Reactive<Map<string, number>>;
 };
 /**
- * Composable that must be implemented in all list children when using `useMore` to correctly observe the visibility of the elements.
+ * Composable that must be implemented in all list children when using `useMoreList` to correctly observe the visibility of the elements.
  *
  * @example
  *
  * ```vue
  * <script lang="ts" setup
- * const { componentRef, isVisible } = useMoreChild();
+ * const { componentRef, isVisible } = useMoreListChild();
  * </script>
  *
  * <template
- *  <div ref="componentRef" :class="{ hidden: !isVisible }"> Your content... </div>
+ *  <div v-show="isVisible" ref="componentRef"> Your content... </div>
  * </template>
- *
- * <style>
- * .hidden {
- *  visibility: hidden;
- * }
- * </style>
  * ```
  */
 export declare const useMoreListChild: (injectionKey: MoreListInjectionKey) => {
     /**
      * Component template ref.
      */
-    componentRef: Ref<HTMLOrInstanceRef, HTMLOrInstanceRef>;
+    componentRef: Ref<VueTemplateRefElement, VueTemplateRefElement>;
     /**
      * Whether the component is currently visible.
-     * Should hide itself visually (e.g. using "visibility: hidden").
-     * Do not use v-if, v-show or "display: none" since the more feature does not work then when resizing
+     * Should hide itself visually (e.g. using `v-show="isVisible"`).
      */
     isVisible: import("vue").ComputedRef<boolean>;
 };

package/dist/composables/useResizeObserver.d.ts

@@ -7,7 +7,17 @@ export type UseResizeObserverOptions = {
      */
     box?: ResizeObserverBoxOptions;
 };
-export declare const useResizeObserver: (target: Ref<HTMLElement | undefined>, options?: UseResizeObserverOptions) => {
+/**
+ * Template ref of either a native HTML element or a custom Vue component.
+ */
+export type VueTemplateRefElement = Element | {
+    $el: Element;
+} | null | undefined;
+export declare const useResizeObserver: (target?: Ref<VueTemplateRefElement>, options?: UseResizeObserverOptions) => {
     width: Ref<number, number>;
     height: Ref<number, number>;
 };
+/**
+ * Gets the native HTML element of a template ref.
+ */
+export declare const getTemplateRefElement: (ref: VueTemplateRefElement) => Element | undefined;