origam 2.5.0 → 2.6.1

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

@@ -1,6 +1,6 @@
 import { computed, isRef } from "vue";
-import { BORDER_RADIUS_REGEX, PREDIFINED_ROUNDED } from "../../consts/index.js";
-import { convertToUnit, formatRoundedStylesVar, getCurrentInstanceName } from "../../utils/index.js";
+import { BORDER_RADIUS_REGEX, PREDEFINED_ROUNDED } from "../../consts/index.js";
+import { convertToUnit, formatRoundedStylesVar, getCurrentInstanceName, isCustomBorderRadius } from "../../utils/index.js";
 const UTILITY_ROUNDED = /* @__PURE__ */ new Set([
   "none",
   "xs",
@@ -22,7 +22,7 @@ export function useRounded(props, name = getCurrentInstanceName()) {
       classes.push(`origam--rounded-${rounded}`);
       return classes;
     }
-    if (typeof rounded === "string" && PREDIFINED_ROUNDED.includes(rounded)) {
+    if (typeof rounded === "string" && PREDEFINED_ROUNDED.includes(rounded)) {
       classes.push(`${name}--rounded-${rounded}`);
       return classes;
     }
@@ -40,20 +40,29 @@ export function useRounded(props, name = getCurrentInstanceName()) {
     "large": "var(--origam-radius---xl, 16px)",
     "x-large": "var(--origam-radius---2xl, 24px)"
   };
+  const UTILITY_RADIUS_FALLBACK = {
+    none: "0",
+    xs: "2px",
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  };
   const roundedStyles = computed(() => {
     const rounded = isRef(props) ? props.value : props.rounded;
     const styles = [];
     if (rounded == null || rounded === false) return styles;
     if (isUtilityRounded(rounded)) {
-      styles.push(`border-radius: var(--origam-radius---${rounded})`);
+      styles.push(`border-radius: var(--origam-radius---${rounded}, ${UTILITY_RADIUS_FALLBACK[rounded]})`);
       return styles;
     }
-    if (typeof rounded === "string" && PREDIFINED_ROUNDED.includes(rounded) && rounded !== "shaped" && rounded !== "shaped-invert") {
+    if (typeof rounded === "string" && PREDEFINED_ROUNDED.includes(rounded) && rounded !== "shaped" && rounded !== "shaped-invert") {
       const token = NAMED_RADIUS_TOKEN[rounded];
       if (token) styles.push(`border-radius: ${token}`);
       return styles;
     }
-    if (rounded === true || rounded === "") {
+    if (rounded === true || typeof rounded === "string" && rounded === "") {
       styles.push(`border-radius: var(--origam-radius---md, 8px)`);
       return styles;
     }
@@ -64,6 +73,8 @@ export function useRounded(props, name = getCurrentInstanceName()) {
           const values = String(match[key]).split(" ");
           styles.push(...formatRoundedStylesVar(values));
         });
+      } else if (isCustomBorderRadius(rounded)) {
+        styles.push(`border-radius: ${rounded.trim()}`);
       }
     } else if (typeof rounded === "number") {
       styles.push(`border-radius: ${convertToUnit(rounded)}`);

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

@@ -21,7 +21,7 @@ function useScroll(props, args = {}) {
   const isScrollActive = (0, _vue.shallowRef)(false);
   const isScrollingUp = (0, _vue.shallowRef)(false);
   const scrollThreshold = (0, _vue.computed)(() => {
-    return Number(props.scrollThreshold);
+    return Number(props.scrollThreshold ?? 0);
   });
   const scrollRatio = (0, _vue.computed)(() => {
     return (0, _utils.clamp)((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
@@ -30,7 +30,7 @@ function useScroll(props, args = {}) {
     const targetEl = target.value;
     if (!targetEl || canScroll && !canScroll.value) return;
     previousScroll = currentScroll.value;
-    currentScroll.value = "window" in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
+    currentScroll.value = "window" in targetEl ? targetEl.scrollY : targetEl.scrollTop;
     isScrollingUp.value = currentScroll.value < previousScroll;
     currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value);
   };

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

@@ -22,7 +22,7 @@ export function useScroll(props, args = {}) {
   const isScrollActive = shallowRef(false);
   const isScrollingUp = shallowRef(false);
   const scrollThreshold = computed(() => {
-    return Number(props.scrollThreshold);
+    return Number(props.scrollThreshold ?? 0);
   });
   const scrollRatio = computed(() => {
     return clamp((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
@@ -31,7 +31,7 @@ export function useScroll(props, args = {}) {
     const targetEl = target.value;
     if (!targetEl || canScroll && !canScroll.value) return;
     previousScroll = currentScroll.value;
-    currentScroll.value = "window" in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
+    currentScroll.value = "window" in targetEl ? targetEl.scrollY : targetEl.scrollTop;
     isScrollingUp.value = currentScroll.value < previousScroll;
     currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value);
   };

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

@@ -13,25 +13,37 @@ var _rounded = require("./rounded.composable.cjs");
 var _utils = require("../../utils/index.cjs");
 function pickEffective(rest, isHover, isActive, hoverState, activeState, key) {
   return (0, _vue.computed)(() => {
-    if (isActive.value && activeState.value?.[key] != null) {
-      return activeState.value[key];
-    }
     if (isHover.value && hoverState.value?.[key] != null) {
       return hoverState.value[key];
     }
-    return rest;
+    if (isActive.value && activeState.value?.[key] != null) {
+      return activeState.value[key];
+    }
+    return rest();
   });
 }
 const noopRef = (0, _vue.computed)(() => false);
 function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState = (0, _vue.computed)(() => void 0), activeState = (0, _vue.computed)(() => void 0), isDisabled = noopRef, flat = noopRef) {
-  const color = pickEffective(props.color, isHover, isActive, hoverState, activeState, "color");
-  const bgColor = pickEffective(props.bgColor, isHover, isActive, hoverState, activeState, "bgColor");
-  const border = pickEffective(props.border, isHover, isActive, hoverState, activeState, "border");
-  const rounded = pickEffective(props.rounded, isHover, isActive, hoverState, activeState, "rounded");
-  const elevation = pickEffective(props.elevation, isHover, isActive, hoverState, activeState, "elevation");
-  const padding = pickEffective(props.padding, isHover, isActive, hoverState, activeState, "padding");
-  const margin = pickEffective(props.margin, isHover, isActive, hoverState, activeState, "margin");
-  const gap = pickEffective(props.gap, isHover, isActive, hoverState, activeState, "gap");
+  const statusToIntent = {
+    success: "success",
+    info: "info",
+    warning: "warning",
+    error: "danger"
+  };
+  const statusIntent = (0, _vue.computed)(() => {
+    const status = props.status;
+    return status ? statusToIntent[status] ?? status : void 0;
+  });
+  const baseColor = pickEffective(() => props.color, isHover, isActive, hoverState, activeState, "color");
+  const baseBgColor = pickEffective(() => props.bgColor, isHover, isActive, hoverState, activeState, "bgColor");
+  const color = (0, _vue.computed)(() => statusIntent.value ? void 0 : baseColor.value);
+  const bgColor = (0, _vue.computed)(() => statusIntent.value ?? baseBgColor.value);
+  const border = pickEffective(() => props.border, isHover, isActive, hoverState, activeState, "border");
+  const rounded = pickEffective(() => props.rounded, isHover, isActive, hoverState, activeState, "rounded");
+  const elevation = pickEffective(() => props.elevation, isHover, isActive, hoverState, activeState, "elevation");
+  const padding = pickEffective(() => props.padding, isHover, isActive, hoverState, activeState, "padding");
+  const margin = pickEffective(() => props.margin, isHover, isActive, hoverState, activeState, "margin");
+  const gap = pickEffective(() => props.gap, isHover, isActive, hoverState, activeState, "gap");
   const sameIntent = (a, b) => {
     return !!a && !!b && a === b && (0, _utils.isIntent)(a);
   };
@@ -48,7 +60,7 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     void isDisabled.value;
     const hoverHasOwnBg = hoverState.value?.bgColor != null && !sameIntent(hoverState.value.bgColor, props.bgColor);
     const activeHasOwnBg = activeState.value?.bgColor != null && !sameIntent(activeState.value.bgColor, props.bgColor);
-    const bgRole = isActive.value && !activeHasOwnBg ? "active" : isHover.value && !hoverHasOwnBg ? "hover" : "default";
+    const bgRole = isHover.value && !hoverHasOwnBg ? "hover" : isActive.value && !activeHasOwnBg ? "active" : "default";
     let bgDecl = null;
     let fgDecl = null;
     let bgIntentFg = null;
@@ -88,7 +100,17 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
   const {
     borderClasses,
     borderStyles
-  } = (0, _border.useBorder)(border);
+  } = (0, _border.useBorder)((0, _vue.reactive)({
+    get border() {
+      return border.value;
+    },
+    get borderColor() {
+      return props.borderColor;
+    },
+    get borderStyle() {
+      return props.borderStyle;
+    }
+  }));
   const {
     roundedClasses,
     roundedStyles

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

@@ -19,26 +19,38 @@ import {
 } from "../../utils/index.js";
 function pickEffective(rest, isHover, isActive, hoverState, activeState, key) {
   return computed(() => {
-    if (isActive.value && activeState.value?.[key] != null) {
-      return activeState.value[key];
-    }
     if (isHover.value && hoverState.value?.[key] != null) {
       return hoverState.value[key];
     }
-    return rest;
+    if (isActive.value && activeState.value?.[key] != null) {
+      return activeState.value[key];
+    }
+    return rest();
   });
 }
 const noopRef = computed(() => false);
 export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState = computed(() => void 0), activeState = computed(() => void 0), isDisabled = noopRef, flat = noopRef) {
-  const color = pickEffective(props.color, isHover, isActive, hoverState, activeState, "color");
-  const bgColor = pickEffective(props.bgColor, isHover, isActive, hoverState, activeState, "bgColor");
-  const border = pickEffective(props.border, isHover, isActive, hoverState, activeState, "border");
-  const rounded = pickEffective(props.rounded, isHover, isActive, hoverState, activeState, "rounded");
-  const elevation = pickEffective(props.elevation, isHover, isActive, hoverState, activeState, "elevation");
-  const padding = pickEffective(props.padding, isHover, isActive, hoverState, activeState, "padding");
-  const margin = pickEffective(props.margin, isHover, isActive, hoverState, activeState, "margin");
+  const statusToIntent = {
+    success: "success",
+    info: "info",
+    warning: "warning",
+    error: "danger"
+  };
+  const statusIntent = computed(() => {
+    const status = props.status;
+    return status ? statusToIntent[status] ?? status : void 0;
+  });
+  const baseColor = pickEffective(() => props.color, isHover, isActive, hoverState, activeState, "color");
+  const baseBgColor = pickEffective(() => props.bgColor, isHover, isActive, hoverState, activeState, "bgColor");
+  const color = computed(() => statusIntent.value ? void 0 : baseColor.value);
+  const bgColor = computed(() => statusIntent.value ?? baseBgColor.value);
+  const border = pickEffective(() => props.border, isHover, isActive, hoverState, activeState, "border");
+  const rounded = pickEffective(() => props.rounded, isHover, isActive, hoverState, activeState, "rounded");
+  const elevation = pickEffective(() => props.elevation, isHover, isActive, hoverState, activeState, "elevation");
+  const padding = pickEffective(() => props.padding, isHover, isActive, hoverState, activeState, "padding");
+  const margin = pickEffective(() => props.margin, isHover, isActive, hoverState, activeState, "margin");
   const gap = pickEffective(
-    props.gap,
+    () => props.gap,
     isHover,
     isActive,
     hoverState,
@@ -61,7 +73,7 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
     void isDisabled.value;
     const hoverHasOwnBg = hoverState.value?.bgColor != null && !sameIntent(hoverState.value.bgColor, props.bgColor);
     const activeHasOwnBg = activeState.value?.bgColor != null && !sameIntent(activeState.value.bgColor, props.bgColor);
-    const bgRole = isActive.value && !activeHasOwnBg ? "active" : isHover.value && !hoverHasOwnBg ? "hover" : "default";
+    const bgRole = isHover.value && !hoverHasOwnBg ? "hover" : isActive.value && !activeHasOwnBg ? "active" : "default";
     let bgDecl = null;
     let fgDecl = null;
     let bgIntentFg = null;
@@ -98,7 +110,19 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
     return styles;
   });
   void intentBgExpr;
-  const { borderClasses, borderStyles } = useBorder(border);
+  const { borderClasses, borderStyles } = useBorder(
+    reactive({
+      get border() {
+        return border.value;
+      },
+      get borderColor() {
+        return props.borderColor;
+      },
+      get borderStyle() {
+        return props.borderStyle;
+      }
+    })
+  );
   const { roundedClasses, roundedStyles } = useRounded(rounded);
   const { elevationClasses, elevationStyles } = useElevation(
     elevation,

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

@@ -7,10 +7,19 @@ exports.useStatus = useStatus;
 var _enums = require("../../enums/index.cjs");
 var _utils = require("../../utils/index.cjs");
 var _vue = require("vue");
+const STATUS_TO_INTENT = {
+  success: "success",
+  info: "info",
+  warning: "warning",
+  error: "danger"
+};
 function useStatus(props, name = (0, _utils.getCurrentInstanceName)()) {
   const statusIcon = (0, _vue.computed)(() => {
     return `$${props.status}`;
   });
+  const statusIntent = (0, _vue.computed)(() => {
+    return props.status ? STATUS_TO_INTENT[props.status] ?? props.status : void 0;
+  });
   const effectivePosition = (0, _vue.computed)(() => {
     return props.statusIconPosition ?? `${_enums.STATUS_POSITION.PREPEND}`;
   });
@@ -37,6 +46,7 @@ function useStatus(props, name = (0, _utils.getCurrentInstanceName)()) {
     icon,
     appendIcon,
     prependIcon,
-    statusClasses
+    statusClasses,
+    statusIntent
   };
 }

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

@@ -1,4 +1,5 @@
 import type { IAdjacentProps, IStatusProps } from "../../interfaces";
+import type { TColor } from "../../types";
 /*********************************************************
  * useStatus
  ********************************************************/
@@ -7,4 +8,5 @@ export declare function useStatus(props: IStatusProps & IAdjacentProps, name?: s
     appendIcon: import("vue").ComputedRef<import("../../types").TIcon | undefined>;
     prependIcon: import("vue").ComputedRef<import("../../types").TIcon | undefined>;
     statusClasses: import("vue").ComputedRef<string[]>;
+    statusIntent: import("vue").ComputedRef<TColor>;
 };

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

@@ -1,10 +1,19 @@
 import { STATUS_POSITION } from "../../enums/index.js";
 import { getCurrentInstanceName } from "../../utils/index.js";
 import { computed } from "vue";
+const STATUS_TO_INTENT = {
+  success: "success",
+  info: "info",
+  warning: "warning",
+  error: "danger"
+};
 export function useStatus(props, name = getCurrentInstanceName()) {
   const statusIcon = computed(() => {
     return `$${props.status}`;
   });
+  const statusIntent = computed(() => {
+    return props.status ? STATUS_TO_INTENT[props.status] ?? props.status : void 0;
+  });
   const effectivePosition = computed(() => {
     return props.statusIconPosition ?? `${STATUS_POSITION.PREPEND}`;
   });
@@ -27,5 +36,5 @@ export function useStatus(props, name = getCurrentInstanceName()) {
     }
     return classes;
   });
-  return { icon, appendIcon, prependIcon, statusClasses };
+  return { icon, appendIcon, prependIcon, statusClasses, statusIntent };
 }

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

@@ -1,21 +1,9 @@
 import type { ISticky } from "../../interfaces";
+import type { CSSProperties } from 'vue';
 /*********************************************************
  * useSticky
  ********************************************************/
 export declare function useSticky({ rootEl, isSticky, layoutItemStyles }: ISticky): {
     isStuck: import("vue").ShallowRef<boolean | "top" | "bottom", boolean | "top" | "bottom">;
-    stickyStyles: import("vue").ComputedRef<({
-        top: string;
-        bottom: string;
-        height: undefined;
-    } | {
-        [x: string]: string;
-        top?: undefined;
-        bottom?: undefined;
-        height?: undefined;
-    } | {
-        top: import("csstype").Property.Top<string | number> | undefined;
-        bottom?: undefined;
-        height?: undefined;
-    } | undefined)[]>;
+    stickyStyles: import("vue").ComputedRef<(CSSProperties | undefined)[]>;
 };

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

@@ -56,12 +56,14 @@ function useStyle(styles, uniq = void 0, name = (0, _utils.getCurrentInstanceNam
     return uniq ?? `${name}-${(0, _utils.getUid)()}`;
   });
   const customCss = (0, _vue.computed)(() => {
-    const stylesArray = styles.value.map(value => {
-      if (typeof value === "object" && !Array.isArray(value)) {
+    const raw = styles.value;
+    const normalized = Array.isArray(raw) ? raw : [raw];
+    const stylesArray = normalized.map(value => {
+      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
         return Object.keys(value).filter(key => typeof value[key] !== "undefined").map(key => `${key}: ${value[key]}`);
       }
       return value;
-    }).flat().filter(value => value.length > 0);
+    }).flat().filter(value => value != null && String(value).length > 0);
     return `#${id.value} {${stylesArray.join(";")}}`;
   });
   const {

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

@@ -58,12 +58,14 @@ export function useStyle(styles, uniq = void 0, name = getCurrentInstanceName())
     return uniq ?? `${name}-${getUid()}`;
   });
   const customCss = computed(() => {
-    const stylesArray = styles.value.map((value) => {
-      if (typeof value === "object" && !Array.isArray(value)) {
+    const raw = styles.value;
+    const normalized = Array.isArray(raw) ? raw : [raw];
+    const stylesArray = normalized.map((value) => {
+      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
         return Object.keys(value).filter((key) => typeof value[key] !== "undefined").map((key) => `${key}: ${value[key]}`);
       }
       return value;
-    }).flat().filter((value) => value.length > 0);
+    }).flat().filter((value) => value != null && String(value).length > 0);
     return `#${id.value} {${stylesArray.join(";")}}`;
   });
   const { id: styleTagId, css, load, unload, isLoaded } = useStyleTag(customCss);

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTypography = useTypography;
+var _vue = require("vue");
+const TYPOGRAPHY_TOKEN_MAP = [["fontFamily", "font-family", "font__family"], ["fontSize", "font-size", "font__size"], ["fontWeight", "font-weight", "font__weight"], ["lineHeight", "line-height", "font__lineHeight"], ["letterSpacing", "letter-spacing", "font__letterSpacing"]];
+function useTypography(props, varPrefix) {
+  const typographyStyles = (0, _vue.computed)(() => {
+    const styles = {};
+    for (const [propKey, cssProp, tokenGroup] of TYPOGRAPHY_TOKEN_MAP) {
+      const value = props[propKey];
+      if (value) {
+        styles[`--origam-${varPrefix}---${cssProp}`] = `var(--origam-${tokenGroup}---${value})`;
+      }
+    }
+    return Object.keys(styles).length ? styles : null;
+  });
+  return {
+    typographyStyles
+  };
+}

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

@@ -0,0 +1,7 @@
+import type { ITypographyProps } from '../../interfaces';
+/*********************************************************
+ * useTypography
+ ********************************************************/
+export declare function useTypography(props: ITypographyProps, varPrefix: string): {
+    typographyStyles: import("vue").ComputedRef<Record<string, string> | null>;
+};

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

@@ -0,0 +1,21 @@
+import { computed } from "vue";
+const TYPOGRAPHY_TOKEN_MAP = [
+  ["fontFamily", "font-family", "font__family"],
+  ["fontSize", "font-size", "font__size"],
+  ["fontWeight", "font-weight", "font__weight"],
+  ["lineHeight", "line-height", "font__lineHeight"],
+  ["letterSpacing", "letter-spacing", "font__letterSpacing"]
+];
+export function useTypography(props, varPrefix) {
+  const typographyStyles = computed(() => {
+    const styles = {};
+    for (const [propKey, cssProp, tokenGroup] of TYPOGRAPHY_TOKEN_MAP) {
+      const value = props[propKey];
+      if (value) {
+        styles[`--origam-${varPrefix}---${cssProp}`] = `var(--origam-${tokenGroup}---${value})`;
+      }
+    }
+    return Object.keys(styles).length ? styles : null;
+  });
+  return { typographyStyles };
+}