origam 2.3.0 → 2.5.0

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

@@ -1,4 +1,5 @@
 import { computed, isRef, ref } from "vue";
+import { ORIGAM_SHADOW_RUNGS, UTILITY_SHADOW_RUNGS } from "../../consts/Commons/elevation.const.js";
 import { getCurrentInstanceName } from "../../utils/index.js";
 function elevationToToken(level) {
   if (level <= 0) return "none";
@@ -8,27 +9,9 @@ function elevationToToken(level) {
   if (level <= 16) return "lg";
   return "xl";
 }
-const ORIGAM_SHADOW_RUNGS = /* @__PURE__ */ new Set([
-  "none",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "2xl",
-  "3xl"
-]);
 function isOrigamRung(value) {
   return typeof value === "string" && ORIGAM_SHADOW_RUNGS.has(value);
 }
-const UTILITY_SHADOW_RUNGS = /* @__PURE__ */ new Set([
-  "none",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl"
-]);
 function isUtilityRung(value) {
   return typeof value === "string" && UTILITY_SHADOW_RUNGS.has(value);
 }

package/dist/src/composables/CssSupport/cssSupport.composable.cjs

@@ -7,30 +7,9 @@ exports._resetCssSupportCache = _resetCssSupportCache;
 exports.useCssSupport = useCssSupport;
 exports.useCssSupportClient = useCssSupportClient;
 var _vue = require("vue");
+var _cssSupport = require("../../consts/CssSupport/css-support.const.cjs");
 const _cache = /* @__PURE__ */new Map();
 let _initialized = false;
-const FEATURE_QUERIES = {
-  grid: "display: grid",
-  subgrid: "grid-template-columns: subgrid",
-  flexGap: "gap: 1px",
-  containerQueries: "(container-type: inline-size)",
-  has: "selector(:has(*))",
-  aspectRatio: "aspect-ratio: 1",
-  colorMix: "color: color-mix(in srgb, red, blue)",
-  accentColor: "accent-color: red",
-  minMaxClamp: "width: min(10px, 20px)",
-  mathFunctions: "width: calc(min(10px, 20px) + max(5px, 8px))",
-  anchorPositioning: "anchor-name: --foo",
-  scrollDrivenAnims: "animation-timeline: scroll()",
-  viewTransitions: "view-transition-name: foo",
-  nestedSelectors: "selector(& > a)",
-  individualTransforms: "translate: 1px 1px",
-  logicalProperties: "margin-inline: 1px",
-  backdropFilter: "backdrop-filter: blur(1px)",
-  fieldSizing: "field-sizing: content",
-  textWrapBalance: "text-wrap: balance",
-  contentVisibility: "content-visibility: auto"
-};
 function rawSupports(query) {
   if (typeof window === "undefined" || typeof CSS === "undefined" || !CSS.supports) {
     return false;
@@ -48,15 +27,15 @@ function rawSupports(query) {
 const _flags = (0, _vue.ref)(emptyMap());
 function emptyMap() {
   const out = {};
-  for (const k of Object.keys(FEATURE_QUERIES)) {
+  for (const k of Object.keys(_cssSupport.FEATURE_QUERIES)) {
     out[k] = false;
   }
   return Object.freeze(out);
 }
 function detectAll() {
   const out = {};
-  for (const k of Object.keys(FEATURE_QUERIES)) {
-    out[k] = rawSupports(FEATURE_QUERIES[k]);
+  for (const k of Object.keys(_cssSupport.FEATURE_QUERIES)) {
+    out[k] = rawSupports(_cssSupport.FEATURE_QUERIES[k]);
   }
   return Object.freeze(out);
 }
@@ -105,7 +84,7 @@ function useCssSupportClient(feature, options = {}) {
   } = options;
   const flag = (0, _vue.ref)(defaultValue);
   (0, _vue.onMounted)(() => {
-    const query = FEATURE_QUERIES[feature] ?? feature;
+    const query = _cssSupport.FEATURE_QUERIES[feature] ?? feature;
     flag.value = rawSupports(query);
   });
   return flag;

package/dist/src/composables/CssSupport/cssSupport.composable.d.ts

@@ -1,26 +1,5 @@
 import { type ComputedRef, type Ref } from 'vue';
-declare const FEATURE_QUERIES: {
-    readonly grid: "display: grid";
-    readonly subgrid: "grid-template-columns: subgrid";
-    readonly flexGap: "gap: 1px";
-    readonly containerQueries: "(container-type: inline-size)";
-    readonly has: "selector(:has(*))";
-    readonly aspectRatio: "aspect-ratio: 1";
-    readonly colorMix: "color: color-mix(in srgb, red, blue)";
-    readonly accentColor: "accent-color: red";
-    readonly minMaxClamp: "width: min(10px, 20px)";
-    readonly mathFunctions: "width: calc(min(10px, 20px) + max(5px, 8px))";
-    readonly anchorPositioning: "anchor-name: --foo";
-    readonly scrollDrivenAnims: "animation-timeline: scroll()";
-    readonly viewTransitions: "view-transition-name: foo";
-    readonly nestedSelectors: "selector(& > a)";
-    readonly individualTransforms: "translate: 1px 1px";
-    readonly logicalProperties: "margin-inline: 1px";
-    readonly backdropFilter: "backdrop-filter: blur(1px)";
-    readonly fieldSizing: "field-sizing: content";
-    readonly textWrapBalance: "text-wrap: balance";
-    readonly contentVisibility: "content-visibility: auto";
-};
+import { FEATURE_QUERIES } from '../../consts/CssSupport/css-support.const';
 export type TCssFeatureName = keyof typeof FEATURE_QUERIES;
 export type TCssSupportMap = Readonly<Record<TCssFeatureName, boolean>>;
 export interface IUseCssSupport {
@@ -92,4 +71,3 @@ export interface IUseCssSupportClientOptions {
  *   //   <div v-else>…JS fallback path…</div>
  ********************************************************/
 export declare function useCssSupportClient(feature: TCssFeatureName | string, options?: IUseCssSupportClientOptions): Ref<boolean>;
-export {};

package/dist/src/composables/CssSupport/cssSupport.composable.js

@@ -1,28 +1,7 @@
 import { computed, onMounted, readonly, ref } from "vue";
+import { FEATURE_QUERIES } from "../../consts/CssSupport/css-support.const.js";
 const _cache = /* @__PURE__ */ new Map();
 let _initialized = false;
-const FEATURE_QUERIES = {
-  grid: "display: grid",
-  subgrid: "grid-template-columns: subgrid",
-  flexGap: "gap: 1px",
-  containerQueries: "(container-type: inline-size)",
-  has: "selector(:has(*))",
-  aspectRatio: "aspect-ratio: 1",
-  colorMix: "color: color-mix(in srgb, red, blue)",
-  accentColor: "accent-color: red",
-  minMaxClamp: "width: min(10px, 20px)",
-  mathFunctions: "width: calc(min(10px, 20px) + max(5px, 8px))",
-  anchorPositioning: "anchor-name: --foo",
-  scrollDrivenAnims: "animation-timeline: scroll()",
-  viewTransitions: "view-transition-name: foo",
-  nestedSelectors: "selector(& > a)",
-  individualTransforms: "translate: 1px 1px",
-  logicalProperties: "margin-inline: 1px",
-  backdropFilter: "backdrop-filter: blur(1px)",
-  fieldSizing: "field-sizing: content",
-  textWrapBalance: "text-wrap: balance",
-  contentVisibility: "content-visibility: auto"
-};
 function rawSupports(query) {
   if (typeof window === "undefined" || typeof CSS === "undefined" || !CSS.supports) {
     return false;

package/dist/src/composables/DataTable/headers.composable.d.ts

@@ -29,6 +29,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
+            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -49,16 +50,11 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             };
             bold: () => string;
             link: (url: string) => string;
-            [Symbol.iterator]: () => StringIterator<string>;
-            readonly length: number;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             concat: (...strings: string[]) => string;
-            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
-            includes: (searchString: string, position?: number) => boolean;
-            toString: () => string;
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -70,6 +66,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
+            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -88,8 +85,10 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
+            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
+            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -116,6 +115,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
+            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;
@@ -142,6 +142,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
+            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -162,16 +163,11 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             };
             bold: () => string;
             link: (url: string) => string;
-            [Symbol.iterator]: () => StringIterator<string>;
-            readonly length: number;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             concat: (...strings: string[]) => string;
-            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
-            includes: (searchString: string, position?: number) => boolean;
-            toString: () => string;
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -183,6 +179,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
+            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -201,8 +198,10 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
+            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
+            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -229,6 +228,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
+            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;
@@ -256,6 +256,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
+            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -276,16 +277,11 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             };
             bold: () => string;
             link: (url: string) => string;
-            [Symbol.iterator]: () => StringIterator<string>;
-            readonly length: number;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             concat: (...strings: string[]) => string;
-            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
-            includes: (searchString: string, position?: number) => boolean;
-            toString: () => string;
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -297,6 +293,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
+            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -315,8 +312,10 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
+            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
+            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -343,6 +342,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
+            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;
@@ -369,6 +369,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
+            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -389,16 +390,11 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             };
             bold: () => string;
             link: (url: string) => string;
-            [Symbol.iterator]: () => StringIterator<string>;
-            readonly length: number;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             concat: (...strings: string[]) => string;
-            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
-            includes: (searchString: string, position?: number) => boolean;
-            toString: () => string;
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -410,6 +406,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
+            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -428,8 +425,10 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
+            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
+            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -456,6 +455,7 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
+            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;

package/dist/src/composables/InlineEdit/inline-edit.composable.cjs

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInlineEdit = useInlineEdit;
+var _vue = require("vue");
+const toDraft = value => {
+  if (value === null || value === void 0) return "";
+  return String(value);
+};
+function useInlineEdit(modelValue, options = {}) {
+  const trim = options.trim ?? true;
+  const isEditing = (0, _vue.ref)(false);
+  const draft = (0, _vue.ref)("");
+  const error = (0, _vue.ref)(null);
+  const isPending = (0, _vue.ref)(false);
+  let validationToken = 0;
+  const normalisedDraft = (0, _vue.computed)(() => trim ? draft.value.trim() : draft.value);
+  const isDraftEmpty = (0, _vue.computed)(() => normalisedDraft.value.length === 0);
+  const edit = () => {
+    if (isEditing.value) return;
+    draft.value = toDraft((0, _vue.unref)(modelValue));
+    error.value = null;
+    isPending.value = false;
+    isEditing.value = true;
+  };
+  const setValue = next => {
+    draft.value = next;
+    if (error.value !== null) {
+      error.value = null;
+    }
+  };
+  const cancel = () => {
+    validationToken += 1;
+    isPending.value = false;
+    error.value = null;
+    isEditing.value = false;
+    draft.value = "";
+    options.onCancel?.();
+  };
+  const runValidator = async (value, validator) => {
+    if (!validator) return null;
+    const verdict = await validator(value);
+    if (verdict === true) return null;
+    return typeof verdict === "string" ? verdict : "Invalid value";
+  };
+  const confirm = async () => {
+    if (!isEditing.value) return false;
+    const token = ++validationToken;
+    const next = normalisedDraft.value;
+    error.value = null;
+    if (options.validate) {
+      isPending.value = true;
+      let verdict = null;
+      try {
+        verdict = await runValidator(next, options.validate);
+      } catch (err) {
+        verdict = err instanceof Error ? err.message : String(err);
+      }
+      if (token !== validationToken) return false;
+      isPending.value = false;
+      if (verdict !== null) {
+        error.value = verdict;
+        options.onError?.(verdict);
+        return false;
+      }
+    }
+    isEditing.value = false;
+    options.onConfirm?.(next);
+    draft.value = "";
+    await (0, _vue.nextTick)();
+    return true;
+  };
+  return {
+    isEditing,
+    draft,
+    error,
+    isPending,
+    normalisedDraft,
+    isDraftEmpty,
+    edit,
+    confirm,
+    cancel,
+    setValue
+  };
+}

package/dist/src/composables/InlineEdit/inline-edit.composable.d.ts

@@ -0,0 +1,36 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { IUseInlineEditOptions } from '../../interfaces';
+/**
+ * Headless edit-in-place state machine.
+ *
+ * The composable owns the four states — IDLE / EDITING / VALIDATING /
+ * ERROR — and the four transitions: `edit`, `confirm`, `cancel`,
+ * `setValue`. It is **input-agnostic** (no DOM references) and only
+ * reads the v-model value through the passed-in `Ref`. Components
+ * plug their `<input>` value/oninput on the returned `draft` ref and
+ * forward keyboard events to `confirm` / `cancel`.
+ *
+ * @example
+ * ```ts
+ * const model = ref('hello')
+ * const {
+ *     isEditing, draft, error, isPending,
+ *     edit, confirm, cancel, setValue
+ * } = useInlineEdit(model, {
+ *     validate: (v) => v.length >= 3 || 'Min 3 chars',
+ *     onConfirm: (v) => (model.value = v),
+ * })
+ * ```
+ */
+export declare function useInlineEdit(modelValue: Ref<string | number> | ComputedRef<string | number>, options?: IUseInlineEditOptions): {
+    isEditing: Ref<boolean, boolean>;
+    draft: Ref<string, string>;
+    error: Ref<string | null, string | null>;
+    isPending: Ref<boolean, boolean>;
+    normalisedDraft: ComputedRef<string>;
+    isDraftEmpty: ComputedRef<boolean>;
+    edit: () => void;
+    confirm: () => Promise<boolean>;
+    cancel: () => void;
+    setValue: (next: string) => void;
+};

package/dist/src/composables/InlineEdit/inline-edit.composable.js

@@ -0,0 +1,86 @@
+import {
+  computed,
+  nextTick,
+  ref,
+  unref
+} from "vue";
+const toDraft = (value) => {
+  if (value === null || value === void 0) return "";
+  return String(value);
+};
+export function useInlineEdit(modelValue, options = {}) {
+  const trim = options.trim ?? true;
+  const isEditing = ref(false);
+  const draft = ref("");
+  const error = ref(null);
+  const isPending = ref(false);
+  let validationToken = 0;
+  const normalisedDraft = computed(() => trim ? draft.value.trim() : draft.value);
+  const isDraftEmpty = computed(() => normalisedDraft.value.length === 0);
+  const edit = () => {
+    if (isEditing.value) return;
+    draft.value = toDraft(unref(modelValue));
+    error.value = null;
+    isPending.value = false;
+    isEditing.value = true;
+  };
+  const setValue = (next) => {
+    draft.value = next;
+    if (error.value !== null) {
+      error.value = null;
+    }
+  };
+  const cancel = () => {
+    validationToken += 1;
+    isPending.value = false;
+    error.value = null;
+    isEditing.value = false;
+    draft.value = "";
+    options.onCancel?.();
+  };
+  const runValidator = async (value, validator) => {
+    if (!validator) return null;
+    const verdict = await validator(value);
+    if (verdict === true) return null;
+    return typeof verdict === "string" ? verdict : "Invalid value";
+  };
+  const confirm = async () => {
+    if (!isEditing.value) return false;
+    const token = ++validationToken;
+    const next = normalisedDraft.value;
+    error.value = null;
+    if (options.validate) {
+      isPending.value = true;
+      let verdict = null;
+      try {
+        verdict = await runValidator(next, options.validate);
+      } catch (err) {
+        verdict = err instanceof Error ? err.message : String(err);
+      }
+      if (token !== validationToken) return false;
+      isPending.value = false;
+      if (verdict !== null) {
+        error.value = verdict;
+        options.onError?.(verdict);
+        return false;
+      }
+    }
+    isEditing.value = false;
+    options.onConfirm?.(next);
+    draft.value = "";
+    await nextTick();
+    return true;
+  };
+  return {
+    isEditing,
+    draft,
+    error,
+    isPending,
+    normalisedDraft,
+    isDraftEmpty,
+    edit,
+    confirm,
+    cancel,
+    setValue
+  };
+}