origam 2.16.0 → 2.17.0

package/dist/src/composables/Commons/items.composable.cjs

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useItems = useItems;
 var _vue = require("vue");
-var _utils = require("../../utils/index.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
+var _listItem = require("../../utils/List/list-item.util.cjs");
 function useItems(props) {
   const items = (0, _vue.computed)(() => {
     if (props.items) {
-      return (0, _utils.transformListItems)(props, props.items);
+      return (0, _listItem.transformListItems)(props, props.items);
     }
     return [];
   });
@@ -19,7 +20,7 @@ function useItems(props) {
     });
   });
   const valueComparator = (0, _vue.computed)(() => {
-    return props.valueComparator ? props.valueComparator : _utils.deepEqual;
+    return props.valueComparator ? props.valueComparator : _commons.deepEqual;
   });
   const transformIn = value => {
     if (!hasNullItem.value) {
@@ -27,11 +28,11 @@ function useItems(props) {
     }
     return value.map(v => {
       if (props.returnObject && typeof v === "string") {
-        return (0, _utils.transformListItem)(props, v);
+        return (0, _listItem.transformListItem)(props, v);
       }
       return items.value.find(item => {
         return valueComparator.value(v, item.value);
-      }) || (0, _utils.transformListItem)(props, v);
+      }) || (0, _listItem.transformListItem)(props, v);
     });
   };
   const transformOut = value => {

package/dist/src/composables/Commons/items.composable.d.ts

@@ -1,11 +1,27 @@
-import type { IInternalListItem, IItemProps } from '../../interfaces';
+import type { IItemProps } from '../../interfaces/Commons/item.interface';
+import type { IInternalListItem } from '../../interfaces/List/list-children.interface';
 /*********************************************************
  * useItems
+ *
+ * @description
+ * Normalise `props.items` (formats varies : chaine, objet, `itemTitle`/
+ * `itemValue` custom…) en `IInternalListItem[]` via `transformListItems`,
+ * et fournit `transformIn`/`transformOut` pour convertir entre le
+ * v-model brut (valeurs primitives ou objets selon `props.returnObject`)
+ * et ces items internes — utilise par Select/Autocomplete/Combobox.
+ *
+ * @description
+ * `transformIn` filtre les `null` du modele SAUF si `null` est lui-meme
+ * une valeur d'item valide (`hasNullItem`) — sans cette exception, un item
+ * "Aucun" dont la valeur est `null` ne pourrait jamais etre selectionne.
+ * `valueComparator` (par defaut `deepEqual`) est ce qui decide si une
+ * valeur du modele correspond a un item existant plutot que de creer un
+ * item ad hoc.
  ********************************************************/
 export declare function useItems(props: IItemProps & {
     itemType?: string;
 }): {
     items: import("vue").ComputedRef<import("../../interfaces").IInternalListItemChildren<any>[]>;
-    transformIn: (value: any[]) => IInternalListItem[];
-    transformOut: (value: IInternalListItem[]) => any[];
+    transformIn: (value: Array<unknown>) => IInternalListItem[];
+    transformOut: (value: IInternalListItem[]) => Array<unknown>;
 };

package/dist/src/composables/Commons/items.composable.js

@@ -1,5 +1,6 @@
 import { computed } from "vue";
-import { deepEqual, transformListItem, transformListItems } from "../../utils/index.js";
+import { deepEqual } from "../../utils/Commons/commons.util.js";
+import { transformListItem, transformListItems } from "../../utils/List/list-item.util.js";
 export function useItems(props) {
   const items = computed(() => {
     if (props.items) {

package/dist/src/composables/Commons/layout.composable.cjs

@@ -3,15 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCreateLayout = useCreateLayout;
 exports.useLayout = useLayout;
-exports.useLayoutItem = useLayoutItem;
 var _vue = require("vue");
-var _composables = require("../../composables/index.cjs");
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _layout = require("../../consts/Commons/layout.const.cjs");
 function useLayout() {
-  const layout = (0, _vue.inject)(_consts.ORIGAM_LAYOUT_KEY);
+  const layout = (0, _vue.inject)(_layout.ORIGAM_LAYOUT_KEY);
   if (!layout) {
     throw new Error("[Origam] Could not find injected layout");
   }
@@ -21,261 +17,4 @@ function useLayout() {
     mainStyles: layout.mainStyles,
     mainId: layout.layoutId
   };
-}
-function useLayoutItem(options) {
-  const layout = (0, _vue.inject)(_consts.ORIGAM_LAYOUT_KEY);
-  if (!layout) {
-    return {
-      layoutItemStyles: (0, _vue.computed)(() => ({})),
-      layoutRect: (0, _vue.shallowRef)(void 0),
-      layoutItemScrimStyles: (0, _vue.computed)(() => ({})),
-      layoutId: "origam-layout-orphan"
-    };
-  }
-  const id = options.id ?? `layout-item-${(0, _utils.getUid)()}`;
-  const vm = (0, _utils.getCurrentInstance)("useLayoutItem");
-  (0, _vue.provide)(_consts.ORIGAM_LAYOUT_ITEM_KEY, (0, _vue.shallowRef)({
-    id
-  }));
-  const isKeptAlive = (0, _vue.shallowRef)(false);
-  (0, _vue.onDeactivated)(() => {
-    isKeptAlive.value = true;
-  });
-  (0, _vue.onActivated)(() => {
-    isKeptAlive.value = false;
-  });
-  const {
-    layoutItemStyles,
-    layoutItemScrimStyles
-  } = layout.register(vm, {
-    ...options,
-    active: (0, _vue.computed)(() => isKeptAlive.value ? false : options.active.value),
-    id
-  });
-  (0, _vue.onBeforeUnmount)(() => {
-    layout.unregister(id);
-  });
-  return {
-    layoutItemStyles,
-    layoutRect: layout.layoutRect,
-    layoutItemScrimStyles,
-    layoutId: layout.layoutId
-  };
-}
-function useCreateLayout(props) {
-  const parentLayout = (0, _vue.inject)(_consts.ORIGAM_LAYOUT_KEY, null);
-  const uid = (0, _utils.getUid)();
-  const layoutId = (0, _vue.computed)(() => props.id || `layout-${uid}`);
-  const rootZIndex = (0, _vue.computed)(() => parentLayout ? parentLayout.rootZIndex.value - 100 : _consts.ROOT_ZINDEX);
-  const registered = (0, _vue.ref)([]);
-  const positions = (0, _vue.reactive)(/* @__PURE__ */new Map());
-  const layoutSizes = (0, _vue.reactive)(/* @__PURE__ */new Map());
-  const priorities = (0, _vue.reactive)(/* @__PURE__ */new Map());
-  const activeItems = (0, _vue.reactive)(/* @__PURE__ */new Map());
-  const disabledTransitions = (0, _vue.reactive)(/* @__PURE__ */new Map());
-  const {
-    resizeRef,
-    contentRect: layoutRect
-  } = (0, _composables.useResizeObserver)();
-  const computedOverlaps = (0, _vue.computed)(() => {
-    const map = /* @__PURE__ */new Map();
-    const overlaps = props.overlaps ?? [];
-    for (const overlap of overlaps.filter(item => item.includes(":"))) {
-      const [top, bottom] = overlap.split(":");
-      if (!registered.value.includes(top) || !registered.value.includes(bottom)) continue;
-      const topPosition = positions.get(top);
-      const bottomPosition = positions.get(bottom);
-      const topAmount = layoutSizes.get(top);
-      const bottomAmount = layoutSizes.get(bottom);
-      if (!topPosition || !bottomPosition || !topAmount || !bottomAmount) continue;
-      map.set(bottom, {
-        position: topPosition.value,
-        amount: (0, _utils.int)(topAmount.value)
-      });
-      map.set(top, {
-        position: bottomPosition.value,
-        amount: -(0, _utils.int)(bottomAmount.value)
-      });
-    }
-    return map;
-  });
-  const layers = (0, _vue.computed)(() => {
-    const uniquePriorities = [...new Set([...priorities.values()].map(p => p.value))].sort((a, b) => a - b);
-    const layout = [];
-    for (const p of uniquePriorities) {
-      const items2 = registered.value.filter(id => priorities.get(id)?.value === p);
-      layout.push(...items2);
-    }
-    return (0, _utils.generateLayers)(layout, positions, layoutSizes, activeItems);
-  });
-  const transitionsEnabled = (0, _vue.computed)(() => {
-    return !Array.from(disabledTransitions.values()).some(ref2 => ref2.value);
-  });
-  const mainRect = (0, _vue.computed)(() => {
-    return layers.value[layers.value.length - 1].layer;
-  });
-  const mainStyles = (0, _vue.computed)(() => {
-    const left = (0, _utils.convertToUnit)(mainRect.value.left) ?? "0px";
-    const right = (0, _utils.convertToUnit)(mainRect.value.right) ?? "0px";
-    const top = (0, _utils.convertToUnit)(mainRect.value.top) ?? "0px";
-    const bottom = (0, _utils.convertToUnit)(mainRect.value.bottom) ?? "0px";
-    return {
-      "left": left,
-      "right": right,
-      "top": top,
-      "bottom": bottom,
-      "--origam-layout---position-left": left,
-      "--origam-layout---position-right": right,
-      "--origam-layout---position-top": top,
-      "--origam-layout---position-bottom": bottom,
-      ...(transitionsEnabled.value ? void 0 : {
-        transition: "none"
-      })
-    };
-  });
-  const items = (0, _vue.computed)(() => {
-    return layers.value.slice(1).map(({
-      id
-    }, index) => {
-      const {
-        layer
-      } = layers.value[index];
-      const size = layoutSizes.get(id);
-      const position = positions.get(id);
-      return {
-        id,
-        ...layer,
-        size: Number(size.value),
-        position: position.value
-      };
-    });
-  });
-  const getLayoutItem = id => {
-    return items.value.find(item => item.id === id);
-  };
-  const rootVm = (0, _utils.getCurrentInstance)("createLayout");
-  const isMounted = (0, _vue.shallowRef)(false);
-  (0, _vue.onMounted)(() => {
-    isMounted.value = true;
-  });
-  (0, _vue.provide)(_consts.ORIGAM_LAYOUT_KEY, {
-    register: (vm, {
-      id,
-      order,
-      position,
-      layoutSize,
-      elementSize,
-      active,
-      disableTransitions,
-      absolute
-    }) => {
-      priorities.set(id, order);
-      positions.set(id, position);
-      layoutSizes.set(id, layoutSize);
-      activeItems.set(id, active);
-      if (disableTransitions) {
-        disabledTransitions.set(id, disableTransitions);
-      }
-      const staleIds = registered.value.filter(existingId => existingId !== id && priorities.get(existingId)?.value === order.value && positions.get(existingId)?.value === position.value);
-      if (staleIds.length > 0) {
-        const staleSet = new Set(staleIds);
-        for (const staleId of staleIds) {
-          priorities.delete(staleId);
-          positions.delete(staleId);
-          layoutSizes.delete(staleId);
-          activeItems.delete(staleId);
-          disabledTransitions.delete(staleId);
-        }
-        registered.value = registered.value.filter(v => !staleSet.has(v));
-      }
-      const instances = (0, _utils.findChildrenWithProvide)(_consts.ORIGAM_LAYOUT_KEY, rootVm?.vnode);
-      const instanceIndex = instances.indexOf(vm);
-      if (instanceIndex > -1) registered.value.splice(instanceIndex, 0, id);else registered.value.push(id);
-      const index = (0, _vue.computed)(() => items.value.findIndex(i => i.id === id));
-      const zIndex = (0, _vue.computed)(() => rootZIndex.value + layers.value.length * 2 - index.value * 2);
-      const layoutItemStyles = (0, _vue.computed)(() => {
-        const isHorizontal = position.value === "left" || position.value === "right";
-        const isOppositeHorizontal = position.value === "right";
-        const isOppositeVertical = position.value === "bottom";
-        const styles = {
-          [position.value]: 0,
-          "z-index": zIndex.value,
-          "transform": `translate${isHorizontal ? "X" : "Y"}(${(active.value ? 0 : -110) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}%)`,
-          "position": absolute.value || rootZIndex.value !== _consts.ROOT_ZINDEX ? "absolute" : "fixed",
-          ...(transitionsEnabled.value ? void 0 : {
-            "transition": "none"
-          })
-        };
-        if (!isMounted.value) return styles;
-        const item = items.value[index.value];
-        if (!item) return styles;
-        const overlap = computedOverlaps.value.get(id);
-        if (overlap) {
-          item[overlap.position] += overlap.amount;
-        }
-        return {
-          ...styles,
-          "height": isHorizontal ? `calc(100% - ${(0, _utils.convertToUnit)(item.top)} - ${(0, _utils.convertToUnit)(item.bottom)})` : elementSize.value ? `${(0, _utils.convertToUnit)(elementSize.value)}` : void 0,
-          left: isOppositeHorizontal ? void 0 : (0, _utils.convertToUnit)(item.left),
-          right: isOppositeHorizontal ? (0, _utils.convertToUnit)(item.right) : void 0,
-          top: position.value !== "bottom" ? (0, _utils.convertToUnit)(item.top) : void 0,
-          bottom: position.value !== "top" ? (0, _utils.convertToUnit)(item.bottom) : void 0,
-          "width": !isHorizontal ? `calc(100% - ${(0, _utils.convertToUnit)(item.left)} - ${(0, _utils.convertToUnit)(item.right)})` : elementSize.value ? `${(0, _utils.convertToUnit)(elementSize.value)}` : void 0
-        };
-      });
-      const layoutItemScrimStyles = (0, _vue.computed)(() => ({
-        "z-index": zIndex.value - 1
-      }));
-      return {
-        layoutItemStyles,
-        layoutItemScrimStyles,
-        zIndex
-      };
-    },
-    unregister: id => {
-      priorities.delete(id);
-      positions.delete(id);
-      layoutSizes.delete(id);
-      activeItems.delete(id);
-      disabledTransitions.delete(id);
-      registered.value = registered.value.filter(v => v !== id);
-    },
-    mainRect,
-    mainStyles,
-    getLayoutItem,
-    items,
-    layoutRect,
-    rootZIndex,
-    layoutId
-  });
-  const layoutClasses = (0, _vue.computed)(() => {
-    return ["origam-layout", {
-      "origam-layout--full-height": props.fullHeight
-    }];
-  });
-  const layoutStyles = (0, _vue.computed)(() => {
-    const left = (0, _utils.convertToUnit)(mainRect.value.left) ?? "0px";
-    const right = (0, _utils.convertToUnit)(mainRect.value.right) ?? "0px";
-    const top = (0, _utils.convertToUnit)(mainRect.value.top) ?? "0px";
-    const bottom = (0, _utils.convertToUnit)(mainRect.value.bottom) ?? "0px";
-    const out = {
-      "z-index": parentLayout ? rootZIndex.value : void 0,
-      "position": parentLayout ? "relative" : void 0,
-      "overflow": parentLayout ? "hidden" : void 0
-    };
-    out["--origam-layout---position-left"] = left;
-    out["--origam-layout---position-right"] = right;
-    out["--origam-layout---position-top"] = top;
-    out["--origam-layout---position-bottom"] = bottom;
-    return out;
-  });
-  return {
-    layoutClasses,
-    layoutStyles,
-    getLayoutItem,
-    items,
-    layoutRect,
-    layoutRef: resizeRef,
-    layoutId
-  };
 }

package/dist/src/composables/Commons/layout.composable.d.ts

@@ -1,88 +1,19 @@
-import type { ComputedRef, CSSProperties, Ref, StyleValue } from 'vue';
-import type { TDirectionBoth } from "../../types";
 /*********************************************************
  * useLayout
+ *
+ * @description
+ * Reads the nearest `ORIGAM_LAYOUT_KEY` injection provided by
+ * `useCreateLayout` and exposes its main-area rect/styles.
+ * Throws when no layout provider is found in the tree — unlike
+ * `useLayoutItem`, a bare consumer of the main area has no sensible
+ * standalone fallback.
+ * Independent from `useLayoutItem` / `useCreateLayout` at the call
+ * level (no direct function dependency) — the three only share the
+ * `ORIGAM_LAYOUT_KEY` provide/inject contract.
  ********************************************************/
 export declare function useLayout(): {
     getLayoutItem: (id: string) => import("../../interfaces").ILayerItem | undefined;
-    mainRect: Ref<import("../../interfaces").ILayer, import("../../interfaces").ILayer>;
-    mainStyles: Ref<CSSProperties, CSSProperties>;
-    mainId: ComputedRef<string>;
-};
-/*********************************************************
- * useLayoutItem
- ********************************************************/
-export declare function useLayoutItem(options: {
-    id: string | undefined;
-    order: Ref<number>;
-    position: Ref<TDirectionBoth>;
-    layoutSize: Ref<number | string>;
-    elementSize: Ref<number | string | undefined>;
-    active: Ref<boolean> | ComputedRef<boolean>;
-    disableTransitions?: Ref<boolean>;
-    absolute: Ref<boolean | undefined>;
-}): {
-    layoutItemStyles: ComputedRef<CSSProperties>;
-    layoutRect: import("vue").ShallowRef<undefined, undefined>;
-    layoutItemScrimStyles: ComputedRef<CSSProperties>;
-    layoutId: string;
-} | {
-    layoutItemStyles: Ref<CSSProperties, CSSProperties>;
-    layoutRect: Ref<DOMRectReadOnly | undefined, DOMRectReadOnly | undefined>;
-    layoutItemScrimStyles: Ref<CSSProperties, CSSProperties>;
-    layoutId: ComputedRef<string>;
-};
-/*********************************************************
- * useCreateLayout
- ********************************************************/
-export declare function useCreateLayout(props: {
-    id?: string;
-    overlaps?: Array<string>;
-    fullHeight?: boolean;
-}): {
-    layoutClasses: ComputedRef<(string | {
-        'origam-layout--full-height': boolean | undefined;
-    })[]>;
-    layoutStyles: ComputedRef<StyleValue>;
-    getLayoutItem: (id: string) => {
-        size: number;
-        position: TDirectionBoth;
-        top: number;
-        bottom: number;
-        left: number;
-        right: number;
-        id: string;
-    } | undefined;
-    items: ComputedRef<{
-        size: number;
-        position: TDirectionBoth;
-        top: number;
-        bottom: number;
-        left: number;
-        right: number;
-        id: string;
-    }[]>;
-    layoutRect: Readonly<Ref<{
-        readonly bottom: number;
-        readonly height: number;
-        readonly left: number;
-        readonly right: number;
-        readonly top: number;
-        readonly width: number;
-        readonly x: number;
-        readonly y: number;
-        readonly toJSON: () => any;
-    } | undefined, {
-        readonly bottom: number;
-        readonly height: number;
-        readonly left: number;
-        readonly right: number;
-        readonly top: number;
-        readonly width: number;
-        readonly x: number;
-        readonly y: number;
-        readonly toJSON: () => any;
-    } | undefined>>;
-    layoutRef: Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
-    layoutId: ComputedRef<string>;
+    mainRect: import("vue").Ref<import("../../interfaces").ILayer, import("../../interfaces").ILayer>;
+    mainStyles: import("vue").Ref<import("vue").CSSProperties, import("vue").CSSProperties>;
+    mainId: import("vue").ComputedRef<string>;
 };