@quidgest/ui 0.14.14 → 0.14.16

package/esm/composables/group.d.ts

@@ -1,16 +1,96 @@
-import { ComputedRef, Ref } from 'vue';
-export interface Group {
-    active: Ref<unknown>;
-    multiple: ComputedRef<boolean>;
+import { ComputedRef, InjectionKey, MaybeRef, Ref } from 'vue';
+/** Symbol used for dependency injection of Group. */
+export declare const GroupSymbol: InjectionKey<Group<unknown>>;
+/**
+ * Props interface for creating a group component
+ * @template T The type of the active item(s)
+ */
+export interface GroupProps<T> {
+    /**
+     * The currently active item(s)
+     * - When multiple is false: A single active item of type T
+     * - When multiple is true: An array of active items of type T[]
+     */
+    active: MaybeRef<T | T[]>;
+    /**
+     * Whether multiple items can be active simultaneously
+     * - When true: active will be treated as T[]
+     * - When false: active will be treated as a single value T
+     * @default false
+     */
+    multiple?: MaybeRef<boolean>;
 }
-export interface GroupProps {
-    active?: Ref<unknown>;
-    multiple?: Ref<boolean>;
+/**
+ * Interface for the group state
+ * @template T The type of the active item(s)
+ */
+export interface Group<T> {
+    /**
+     * Reactive reference to the currently active item(s)
+     * - When multiple is false: A single active item of type T or undefined
+     * - When multiple is true: An array of active items of type T[] or undefined
+     */
+    active: Ref<T | T[] | undefined>;
+    /**
+     * Computed boolean indicating if multiple selection is enabled
+     */
+    multiple: ComputedRef<boolean>;
 }
+/**
+ * Interface for the values provided to child components via provide/inject
+ */
 export interface GroupProvide {
+    /**
+     * Toggle the active state of the current item
+     */
     toggle: () => void;
+    /**
+     * Computed boolean indicating if the current item is active
+     */
     isActive: ComputedRef<boolean>;
 }
-export declare function useGroup(options: GroupProps): Group;
+/**
+ * A composable function that manages a group state with single or multiple selection capabilities.
+ *
+ * @template T - The type of the values managed by the group
+ * @param options - Configuration options for the group
+ *
+ * @returns A group object containing:
+ *  - active: Ref holding the currently active value(s)
+ *  - multiple: ComputedRef indicating if multiple selections are allowed
+ *
+ * @example
+ * ```typescript
+ * const group = useGroup({
+ *   active: ref(['item1']),
+ *   multiple: ref(true)
+ * });
+ * ```
+ *
+ * @remarks
+ * The group state is automatically provided to child components using Vue's provide/inject system.
+ * When multiple mode changes, the active value is automatically converted between array and single value formats.
+ */
+export declare function useGroup<T>(options: GroupProps<T>): Group<T>;
+/**
+ * A composable function that provides group item functionality within a group context.
+ *
+ * @param itemId - The unique identifier for the group item
+ *
+ * @returns An object containing:
+ * - `isActive`: A computed boolean indicating if the item is currently active
+ * - `toggle`: A function to toggle the active state of the item
+ * - `undefined` if no group context is found
+ *
+ * @example
+ * ```ts
+ * const { isActive, toggle } = useGroupItem('item-1')
+ * ```
+ *
+ * @remarks
+ * - Supports both single and multiple selection modes
+ * - In single selection mode, activating an item deactivates others
+ * - In multiple selection mode, multiple items can be active simultaneously
+ */
 export declare function useGroupItem(itemId: string): GroupProvide | undefined;
 //# sourceMappingURL=group.d.ts.map

package/esm/composables/group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../src/composables/group.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAO3C,MAAM,WAAW,KAAK;IACrB,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACpB,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;CAC9B;AAED,MAAM,WAAW,UAAU;IAC1B,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACvB;AAED,MAAM,WAAW,YAAY;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;CAC9B;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,UAAU,GAAG,KAAK,CAoBnD;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAuBrE"}
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../src/composables/group.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAKnE,qDAAqD;AACrD,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAyB,CAAA;AAE9E;;;GAGG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC;IAC5B;;;;OAIG;IACH,MAAM,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IAEzB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;CAC5B;AAED;;;GAGG;AACH,MAAM,WAAW,KAAK,CAAC,CAAC;IACvB;;;;OAIG;IACH,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC,CAAA;IAEhC;;OAEG;IACH,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC5B;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAA;IAElB;;OAEG;IACH,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAwB5D;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAyBrE"}

package/esm/composables/group.js

@@ -1,34 +1,31 @@
-import { inject as c, computed as t, ref as n, watch as s, provide as f } from "vue";
-const i = "q-group";
-function p(u) {
-  var l, v;
+import { inject as c, computed as v, unref as t, ref as n, watch as f, provide as o } from "vue";
+const l = Symbol.for("q-group");
+function g(u) {
   const e = {
-    active: n(((l = u.active) == null ? void 0 : l.value) ?? ((v = u.multiple) == null ? void 0 : v.value) ? [] : null),
-    multiple: t(() => {
-      var a;
-      return ((a = u.multiple) == null ? void 0 : a.value) || !1;
-    })
+    active: n(t(u.active) ?? t(u.multiple) ? [] : void 0),
+    multiple: v(() => t(u.multiple) || !1)
   };
-  return s(
+  return f(
     () => e.multiple.value,
     (a) => {
-      a && e.active.value ? e.active.value = [e.active.value] : a ? e.active.value = [] : Array.isArray(e.active.value) && e.active.value.length === 1 ? e.active.value = e.active.value[0] : e.active.value = null;
+      a && e.active.value ? e.active.value = [e.active.value] : a ? e.active.value = [] : Array.isArray(e.active.value) && e.active.value.length === 1 ? e.active.value = e.active.value[0] : e.active.value = void 0;
     }
-  ), f(i, e), e;
+  ), o(l, e), e;
 }
-function g(u) {
-  const e = c(i, void 0);
+function y(u) {
+  const e = c(l, void 0);
   if (!e) return;
-  const l = t(() => {
-    var a;
-    return Array.isArray(e.active.value) ? (a = e.active.value) == null ? void 0 : a.includes(u) : e.active.value === u;
+  const a = v(() => {
+    var i;
+    return Array.isArray(e.active.value) ? (i = e.active.value) == null ? void 0 : i.includes(u) : e.active.value === u;
   });
-  return { isActive: l, toggle: () => {
-    var a;
-    Array.isArray(e.active.value) ? l.value ? e.active.value = (a = e.active.value) == null ? void 0 : a.filter((r) => r !== u) : e.active.value.push(u) : e.active.value = u;
+  return { isActive: a, toggle: () => {
+    var i;
+    Array.isArray(e.active.value) ? a.value ? e.active.value = (i = e.active.value) == null ? void 0 : i.filter((r) => r !== u) : e.active.value.push(u) : e.active.value = u;
   } };
 }
 export {
-  p as useGroup,
-  g as useGroupItem
+  l as GroupSymbol,
+  g as useGroup,
+  y as useGroupItem
 };

package/esm/composables/uid.d.ts

@@ -1,8 +1,9 @@
+import { MaybeRef, Ref } from 'vue';
 /**
  * Custom hook to generate unique IDs.
  *
  * @param [componentId] - Optional component-specific ID.
- * @returns - A unique ID.
+ * @returns A unique ID as a string or a ref containing a string
  */
-export declare function useId(componentId?: string): string;
+export declare function useId<T extends MaybeRef<string | undefined>>(componentId?: T): T extends Ref<string | undefined> ? Ref<string> : string;
 //# sourceMappingURL=uid.d.ts.map

package/esm/composables/uid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uid.d.ts","sourceRoot":"","sources":["../../src/composables/uid.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAElD"}
+{"version":3,"file":"uid.d.ts","sourceRoot":"","sources":["../../src/composables/uid.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAQxC;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,EAC3D,WAAW,CAAC,EAAE,CAAC,GACb,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAK1D"}

package/esm/composables/uid.js

@@ -1,7 +1,8 @@
-let e = 0;
-function r(u) {
-  return u || `uid-${++e}`;
+import { unref as r } from "vue";
+let o = 0;
+function n(e) {
+  return r(e) || `uid-${++o}`;
 }
 export {
-  r as useId
+  n as useId
 };

package/esm/types/component.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Base type for Quidgest UI components.
+ *
+ * Vue will automatically separate these props from other attributes.
+ * This allows components to place id/class in specific elements
+ * while spreading other attrs elsewhere.
+ */
+export type QBaseComponentProps = {
+    /**
+     * The component unique identifier.
+     */
+    id?: string;
+    /**
+     * Custom set of classes to apply to the component.
+     */
+    class?: string | unknown[];
+};
+//# sourceMappingURL=component.d.ts.map

package/esm/types/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/types/component.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,MAAM,mBAAmB,GAAG;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,EAAE,CAAA;CAC1B,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quidgest/ui",
   "description": "Quidgest's UI framework",
-  "version": "0.14.14",
+  "version": "0.14.16",
   "private": false,
   "type": "module",
   "author": "Quidgest",
@@ -45,22 +45,22 @@
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-essentials": "^8.5.3",
-    "@storybook/addon-interactions": "^8.5.3",
-    "@storybook/addon-links": "^8.5.3",
-    "@storybook/blocks": "^8.5.3",
-    "@storybook/manager-api": "^8.5.3",
-    "@storybook/test": "^8.5.3",
-    "@storybook/theming": "^8.5.3",
-    "@storybook/vue3": "^8.5.3",
-    "@storybook/vue3-vite": "^8.5.3",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-interactions": "^8.6.3",
+    "@storybook/addon-links": "^8.6.3",
+    "@storybook/blocks": "^8.6.3",
+    "@storybook/manager-api": "^8.6.3",
+    "@storybook/test": "^8.6.3",
+    "@storybook/theming": "^8.6.3",
+    "@storybook/vue3": "^8.6.3",
+    "@storybook/vue3-vite": "^8.6.3",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",
     "acorn-walk": "^8.3.4",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
     "postcss": "^8.5.1",
-    "storybook": "^8.5.3",
+    "storybook": "^8.6.3",
     "vite": "^6.0.11",
     "vite-plugin-dts": "^4.5.0",
     "vue-tsc": "^2.2.0"