origam 2.16.0 → 2.17.1

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

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorEffect = useColorEffect;
+var _vue = require("vue");
+var _color = require("../../utils/Commons/color.util.cjs");
+var _gradient = require("../../utils/Commons/gradient.util.cjs");
+function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _vue.ref)(false), isDisabled = (0, _vue.ref)(false)) {
+  const color = (0, _vue.computed)(() => props.color);
+  const bgColor = (0, _vue.computed)(() => props.bgColor);
+  const colorClasses = (0, _vue.computed)(() => {
+    if (isHover.value || isActive.value || isDisabled.value) return [];
+    const classes = [];
+    const bgVal = bgColor.value;
+    const fgVal = color.value;
+    if (bgVal && (0, _color.isUtilityIntent)(bgVal)) {
+      classes.push(`origam--bg-${bgVal}`);
+    }
+    if (fgVal && (0, _color.isUtilityIntent)(fgVal)) {
+      classes.push(`origam--color-${fgVal}`);
+    } else if (!fgVal && bgVal && (0, _color.isUtilityIntent)(bgVal)) {}
+    return classes;
+  });
+  const colorStyles = (0, _vue.computed)(() => {
+    void isDisabled.value;
+    const bgRole = isHover.value ? "hover" : isActive.value ? "active" : "default";
+    let bgDecl = null;
+    let fgDecl = null;
+    let bgIntentFg = null;
+    let bgIsGradient = false;
+    let clipText = false;
+    if (bgColor.value && (0, _gradient.isGradient)(bgColor.value)) {
+      const grad = (0, _gradient.resolveGradient)(bgColor.value);
+      if (grad) {
+        bgDecl = `background-image: ${grad}`;
+        bgIsGradient = true;
+      }
+    } else if (bgColor.value && (0, _color.isIntent)(bgColor.value)) {
+      const m = (0, _color.tokenStylesForIntent)(bgColor.value, bgRole);
+      bgDecl = `background-color: ${m["background-color"]}`;
+      bgIntentFg = (0, _color.tokenStylesForIntent)(bgColor.value, "default").color;
+    } else if (bgColor.value === "transparent") {
+      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)("transparent", bgRole)}`;
+    } else if (bgColor.value && typeof bgColor.value === "string" && (0, _color.isCssColor)(bgColor.value)) {
+      (0, _color.warnLegacyColor)("bgColor", bgColor.value);
+      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)(bgColor.value, bgRole)}`;
+    }
+    if (color.value && (0, _gradient.isGradient)(color.value)) {
+      const grad = (0, _gradient.resolveGradient)(color.value);
+      if (grad) {
+        fgDecl = "color: transparent";
+        bgDecl = `background-image: ${grad}`;
+        clipText = true;
+      }
+    } else if (color.value && (0, _color.isIntent)(color.value)) {
+      if (bgIntentFg && bgColor.value && (0, _color.isIntent)(bgColor.value) && color.value === bgColor.value) {
+        fgDecl = `color: ${bgIntentFg}`;
+      } else {
+        fgDecl = `color: ${(0, _color.tokenForegroundForIntent)(color.value)}`;
+      }
+    } else if (color.value && typeof color.value === "string" && (0, _color.isCssColor)(color.value)) {
+      if (color.value !== "transparent") (0, _color.warnLegacyColor)("color", color.value);
+      fgDecl = `color: ${color.value}`;
+    } else if (!color.value && bgIntentFg && !bgIsGradient) {
+      fgDecl = `color: ${bgIntentFg}`;
+    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _color.isParsableColor)(bgColor.value)) {
+      const parsed = (0, _color.parseColor)(bgColor.value);
+      if (parsed.a == null || parsed.a === 1) {
+        fgDecl = `color: ${(0, _color.getForeground)(parsed)}`;
+      }
+    }
+    const styles = [];
+    if (bgDecl) styles.push(bgDecl);
+    if (fgDecl) styles.push(fgDecl);
+    if (clipText) {
+      styles.push("background-clip: text");
+      styles.push("-webkit-background-clip: text");
+    }
+    return styles;
+  });
+  return {
+    colorClasses,
+    colorStyles,
+    color,
+    bgColor
+  };
+}

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

@@ -0,0 +1,39 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { IBgColorProps, IColorProps } from '../../interfaces/Commons/color.interface';
+/*********************************************************
+ * useColorEffect
+ *
+ * @description
+ * Hover/active/disabled-aware bg+fg colour resolver — refactored for
+ * design-tokens / intent support (Lot 1).
+ * Deliberately independent from `useColor`: the role/state derivation
+ * (default / hover / active slots) is a different algorithm from the
+ * legacy static resolver, not a variant of it — kept in its own file
+ * rather than forced to share a base.
+ *
+ * Returns the same shape as before — `{ colorStyles, color, bgColor }` —
+ * so existing callers (`OrigamAudio`, `OrigamVideo`) keep working
+ * without changes.
+ *
+ * `colorStyles` is an array of CSS declarations like
+ * `'background-color: …'`, either pointing to a token
+ * (`var(--origam-color__action--primary---bg)`) when `props.color` is
+ * an intent, or to a raw value when it's a hex/rgb (legacy).
+ *
+ * State resolution: `isHover.value` / `isActive.value` bump an intent
+ * `bgColor` to its `bgHover` / `bgActive` token rung (color-mix
+ * fallback when the token is missing). The flat `hoverColor` /
+ * `activeColor` / `hoverBgColor` / `activeBgColor` per-state override
+ * props were removed (folded into the `hover` / `active` object props
+ * on components that support them — see `color.interface.ts`); neither
+ * real caller of this composable (`OrigamAudio`, `OrigamVideo`) ever
+ * declared them, so the foreground/background scalars are now just
+ * `props.color` / `props.bgColor` — only the darken-derivation role
+ * (`bgRole`) still reacts to `isHover` / `isActive`.
+ ********************************************************/
+export declare function useColorEffect(props: IColorProps & IBgColorProps, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>, isDisabled?: Ref<boolean> | ComputedRef<boolean>): {
+    colorClasses: ComputedRef<string[]>;
+    colorStyles: ComputedRef<string[]>;
+    color: ComputedRef<import("../../types").TColor>;
+    bgColor: ComputedRef<import("../../types").TColor>;
+};

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

@@ -0,0 +1,90 @@
+import { computed, ref } from "vue";
+import {
+  getForeground,
+  isCssColor,
+  isIntent,
+  isParsableColor,
+  isUtilityIntent,
+  parseColor,
+  rawBgExprWithState,
+  tokenForegroundForIntent,
+  tokenStylesForIntent,
+  warnLegacyColor
+} from "../../utils/Commons/color.util.js";
+import { isGradient, resolveGradient } from "../../utils/Commons/gradient.util.js";
+export function useColorEffect(props, isHover = ref(false), isActive = ref(false), isDisabled = ref(false)) {
+  const color = computed(() => props.color);
+  const bgColor = computed(() => props.bgColor);
+  const colorClasses = computed(() => {
+    if (isHover.value || isActive.value || isDisabled.value) return [];
+    const classes = [];
+    const bgVal = bgColor.value;
+    const fgVal = color.value;
+    if (bgVal && isUtilityIntent(bgVal)) {
+      classes.push(`origam--bg-${bgVal}`);
+    }
+    if (fgVal && isUtilityIntent(fgVal)) {
+      classes.push(`origam--color-${fgVal}`);
+    } else if (!fgVal && bgVal && isUtilityIntent(bgVal)) {
+    }
+    return classes;
+  });
+  const colorStyles = computed(() => {
+    void isDisabled.value;
+    const bgRole = isHover.value ? "hover" : isActive.value ? "active" : "default";
+    let bgDecl = null;
+    let fgDecl = null;
+    let bgIntentFg = null;
+    let bgIsGradient = false;
+    let clipText = false;
+    if (bgColor.value && isGradient(bgColor.value)) {
+      const grad = resolveGradient(bgColor.value);
+      if (grad) {
+        bgDecl = `background-image: ${grad}`;
+        bgIsGradient = true;
+      }
+    } else if (bgColor.value && isIntent(bgColor.value)) {
+      const m = tokenStylesForIntent(bgColor.value, bgRole);
+      bgDecl = `background-color: ${m["background-color"]}`;
+      bgIntentFg = tokenStylesForIntent(bgColor.value, "default").color;
+    } else if (bgColor.value === "transparent") {
+      bgDecl = `background-color: ${rawBgExprWithState("transparent", bgRole)}`;
+    } else if (bgColor.value && typeof bgColor.value === "string" && isCssColor(bgColor.value)) {
+      warnLegacyColor("bgColor", bgColor.value);
+      bgDecl = `background-color: ${rawBgExprWithState(bgColor.value, bgRole)}`;
+    }
+    if (color.value && isGradient(color.value)) {
+      const grad = resolveGradient(color.value);
+      if (grad) {
+        fgDecl = "color: transparent";
+        bgDecl = `background-image: ${grad}`;
+        clipText = true;
+      }
+    } else if (color.value && isIntent(color.value)) {
+      if (bgIntentFg && bgColor.value && isIntent(bgColor.value) && color.value === bgColor.value) {
+        fgDecl = `color: ${bgIntentFg}`;
+      } else {
+        fgDecl = `color: ${tokenForegroundForIntent(color.value)}`;
+      }
+    } else if (color.value && typeof color.value === "string" && isCssColor(color.value)) {
+      if (color.value !== "transparent") warnLegacyColor("color", color.value);
+      fgDecl = `color: ${color.value}`;
+    } else if (!color.value && bgIntentFg && !bgIsGradient) {
+      fgDecl = `color: ${bgIntentFg}`;
+    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && isParsableColor(bgColor.value)) {
+      const parsed = parseColor(bgColor.value);
+      if (parsed.a == null || parsed.a === 1) {
+        fgDecl = `color: ${getForeground(parsed)}`;
+      }
+    }
+    const styles = [];
+    if (bgDecl) styles.push(bgDecl);
+    if (fgDecl) styles.push(fgDecl);
+    if (clipText) {
+      styles.push("background-clip: text");
+      styles.push("-webkit-background-clip: text");
+    }
+    return styles;
+  });
+  return { colorClasses, colorStyles, color, bgColor };
+}

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

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCreateLayout = useCreateLayout;
+var _vue = require("vue");
+var _resizeObserver = require("./resizeObserver.composable.cjs");
+var _layout = require("../../consts/Commons/layout.const.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
+var _layout2 = require("../../utils/Commons/layout.util.cjs");
+function useCreateLayout(props) {
+  const parentLayout = (0, _vue.inject)(_layout.ORIGAM_LAYOUT_KEY, null);
+  const uid = (0, _getCurrentInstance.getUid)();
+  const layoutId = (0, _vue.computed)(() => props.id || `${_layout.LAYOUT_ID_PREFIX}${uid}`);
+  const rootZIndex = (0, _vue.computed)(() => parentLayout ? parentLayout.rootZIndex.value - _layout.NESTED_LAYOUT_ZINDEX_STEP : _layout.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, _resizeObserver.useResizeObserver)();
+  const computedOverlaps = (0, _vue.computed)(() => {
+    const map = /* @__PURE__ */new Map();
+    const overlaps = props.overlaps ?? [];
+    for (const overlap of overlaps.filter(item => item.includes(_layout.LAYOUT_OVERLAP_SEPARATOR))) {
+      const [top, bottom] = overlap.split(_layout.LAYOUT_OVERLAP_SEPARATOR);
+      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, _commons.int)(topAmount.value)
+      });
+      map.set(top, {
+        position: bottomPosition.value,
+        amount: -(0, _commons.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, _layout2.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, _commons.convertToUnit)(mainRect.value.left) ?? _layout.LAYOUT_DEFAULT_OFFSET;
+    const right = (0, _commons.convertToUnit)(mainRect.value.right) ?? _layout.LAYOUT_DEFAULT_OFFSET;
+    const top = (0, _commons.convertToUnit)(mainRect.value.top) ?? _layout.LAYOUT_DEFAULT_OFFSET;
+    const bottom = (0, _commons.convertToUnit)(mainRect.value.bottom) ?? _layout.LAYOUT_DEFAULT_OFFSET;
+    return {
+      "left": left,
+      "right": right,
+      "top": top,
+      "bottom": bottom,
+      [_layout.LAYOUT_POSITION_VARS.left]: left,
+      [_layout.LAYOUT_POSITION_VARS.right]: right,
+      [_layout.LAYOUT_POSITION_VARS.top]: top,
+      [_layout.LAYOUT_POSITION_VARS.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, _getCurrentInstance.getCurrentInstance)("createLayout");
+  const isMounted = (0, _vue.shallowRef)(false);
+  (0, _vue.onMounted)(() => {
+    isMounted.value = true;
+  });
+  (0, _vue.provide)(_layout.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, _commons.findChildrenWithProvide)(_layout.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 * _layout.LAYOUT_ITEM_ZINDEX_STEP - index.value * _layout.LAYOUT_ITEM_ZINDEX_STEP);
+      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 : _layout.LAYOUT_ITEM_HIDDEN_OFFSET) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}%)`,
+          "position": absolute.value || rootZIndex.value !== _layout.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, _commons.convertToUnit)(item.top)} - ${(0, _commons.convertToUnit)(item.bottom)})` : elementSize.value ? `${(0, _commons.convertToUnit)(elementSize.value)}` : void 0,
+          left: isOppositeHorizontal ? void 0 : (0, _commons.convertToUnit)(item.left),
+          right: isOppositeHorizontal ? (0, _commons.convertToUnit)(item.right) : void 0,
+          top: position.value !== "bottom" ? (0, _commons.convertToUnit)(item.top) : void 0,
+          bottom: position.value !== "top" ? (0, _commons.convertToUnit)(item.bottom) : void 0,
+          "width": !isHorizontal ? `calc(100% - ${(0, _commons.convertToUnit)(item.left)} - ${(0, _commons.convertToUnit)(item.right)})` : elementSize.value ? `${(0, _commons.convertToUnit)(elementSize.value)}` : void 0
+        };
+      });
+      const layoutItemScrimStyles = (0, _vue.computed)(() => ({
+        "z-index": zIndex.value - _layout.LAYOUT_SCRIM_ZINDEX_OFFSET
+      }));
+      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 [_layout.LAYOUT_CLASS, {
+      [_layout.LAYOUT_FULL_HEIGHT_CLASS]: props.fullHeight
+    }];
+  });
+  const layoutStyles = (0, _vue.computed)(() => {
+    const left = (0, _commons.convertToUnit)(mainRect.value.left) ?? _layout.LAYOUT_DEFAULT_OFFSET;
+    const right = (0, _commons.convertToUnit)(mainRect.value.right) ?? _layout.LAYOUT_DEFAULT_OFFSET;
+    const top = (0, _commons.convertToUnit)(mainRect.value.top) ?? _layout.LAYOUT_DEFAULT_OFFSET;
+    const bottom = (0, _commons.convertToUnit)(mainRect.value.bottom) ?? _layout.LAYOUT_DEFAULT_OFFSET;
+    const out = {
+      "z-index": parentLayout ? rootZIndex.value : void 0,
+      "position": parentLayout ? "relative" : void 0,
+      "overflow": parentLayout ? "hidden" : void 0
+    };
+    out[_layout.LAYOUT_POSITION_VARS.left] = left;
+    out[_layout.LAYOUT_POSITION_VARS.right] = right;
+    out[_layout.LAYOUT_POSITION_VARS.top] = top;
+    out[_layout.LAYOUT_POSITION_VARS.bottom] = bottom;
+    return out;
+  });
+  return {
+    layoutClasses,
+    layoutStyles,
+    getLayoutItem,
+    items,
+    layoutRect,
+    layoutRef: resizeRef,
+    layoutId
+  };
+}

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

@@ -0,0 +1,65 @@
+import type { Ref, StyleValue } from 'vue';
+import type { TDirectionBoth } from '../../types/Commons/anchor.type';
+/*********************************************************
+ * useCreateLayout
+ *
+ * @description
+ * Root of the layout system — provides `ORIGAM_LAYOUT_KEY` so
+ * `useLayout` / `useLayoutItem` consumers down the tree can register
+ * (drawers, toolbars, bottom-navs…) and read back the reserved main
+ * area.
+ * Independent from `useLayout` / `useLayoutItem` at the call level (no
+ * direct function dependency) — the three only share the
+ * `ORIGAM_LAYOUT_KEY` provide/inject contract.
+ ********************************************************/
+export declare function useCreateLayout(props: {
+    id?: string;
+    overlaps?: Array<string>;
+    fullHeight?: boolean;
+}): {
+    layoutClasses: import("vue").ComputedRef<(string | {
+        "origam-layout--full-height": boolean | undefined;
+    })[]>;
+    layoutStyles: import("vue").ComputedRef<StyleValue>;
+    getLayoutItem: (id: string) => {
+        size: number;
+        position: TDirectionBoth;
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        id: string;
+    } | undefined;
+    items: import("vue").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: import("vue").ComputedRef<string>;
+};