cisse-vue-ui 0.5.22 → 0.5.24

package/dist/composables/index.js

@@ -1,10 +1,16 @@
 import { a, b, c, u, d } from "../useToast-ina5g3mj.js";
 import { u as u2 } from "../useDarkMode-Cl5QWTlC.js";
 import { u as u3 } from "../useDropdown-iVu14E6s.js";
+import { g, r, u as u4 } from "../useId-xeHj7rkg.js";
+import { u as u5 } from "../useFocusTrap-AnlJsihM.js";
 export {
+  g as generateId,
+  r as resetIdCounter,
   u2 as useDarkMode,
   u3 as useDropdown,
   a as useExportCSV,
+  u5 as useFocusTrap,
+  u4 as useId,
   b as useModal,
   c as useModals,
   u as useNotifications,

package/dist/composables/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/composables/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/useDarkMode.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/useDropdown.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/useExportCSV.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/useFocusTrap.d.ts

@@ -0,0 +1,41 @@
+import { Ref } from 'vue';
+export interface UseFocusTrapOptions {
+    /** Whether the focus trap is active */
+    active?: Ref<boolean> | boolean;
+    /** Focus the first focusable element when trap activates */
+    focusFirst?: boolean;
+    /** Restore focus to the previously focused element when trap deactivates */
+    restoreFocus?: boolean;
+    /** Initial element to focus (selector or element) */
+    initialFocus?: string | HTMLElement | null;
+}
+export interface UseFocusTrapReturn {
+    /** Ref to attach to the container element */
+    containerRef: Ref<HTMLElement | null>;
+    /** Activate the focus trap manually */
+    activate: () => void;
+    /** Deactivate the focus trap manually */
+    deactivate: () => void;
+    /** Whether the focus trap is currently active */
+    isActive: Ref<boolean>;
+}
+/**
+ * Composable for trapping focus within a container element (for modals, dialogs, etc.)
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const isOpen = ref(false)
+ * const { containerRef } = useFocusTrap({ active: isOpen })
+ * </script>
+ *
+ * <template>
+ *   <div v-if="isOpen" ref="containerRef" role="dialog">
+ *     <button>First focusable</button>
+ *     <input type="text" />
+ *     <button @click="isOpen = false">Close</button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useFocusTrap(options?: UseFocusTrapOptions): UseFocusTrapReturn;

package/dist/composables/useFocusTrap.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/useId.d.ts

@@ -0,0 +1,42 @@
+import { Ref } from 'vue';
+/**
+ * Generates a unique ID for accessibility relationships (aria-labelledby, aria-describedby, etc.)
+ * Pattern: cisse-{prefix}-{counter}
+ */
+export declare function generateId(prefix?: string): string;
+/**
+ * Resets the ID counter (useful for testing)
+ */
+export declare function resetIdCounter(): void;
+export interface UseIdOptions {
+    /** Prefix for the generated ID */
+    prefix?: string;
+    /** Custom ID to use instead of generating one */
+    id?: string;
+}
+export interface UseIdReturn {
+    /** The unique ID (reactive) */
+    id: Ref<string>;
+    /** Generate a related ID with a suffix (e.g., id-label, id-description) */
+    related: (suffix: string) => string;
+}
+/**
+ * Composable for generating unique IDs for accessibility relationships
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const { id, related } = useId({ prefix: 'modal' })
+ * // id.value = 'cisse-modal-1'
+ * // related('title') = 'cisse-modal-1-title'
+ * // related('description') = 'cisse-modal-1-description'
+ * </script>
+ *
+ * <template>
+ *   <div :id="id" role="dialog" :aria-labelledby="related('title')">
+ *     <h2 :id="related('title')">Modal Title</h2>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useId(options?: UseIdOptions): UseIdReturn;

package/dist/composables/useId.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/useModal.d.ts

@@ -57,4 +57,4 @@ export declare function useModal<T = unknown>(options?: {
  * modals.delete.close()
  * ```
  */
-export declare function useModals<T extends Record<string, UseModalReturn<unknown>>>(modals: T): T;
+export declare function useModals<T extends Record<string, UseModalReturn<any>>>(modals: T): T;

package/dist/composables/useModal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{index-DZYqrXV0.js → index-7T5IxJdf.js}

@@ -1,11 +1,11 @@
-import { o as _sfc_main, p as _sfc_main$1, d as _sfc_main$3, f as _sfc_main$4, n as _sfc_main$8, _ as _sfc_main$a, j as _sfc_main$d, r as _sfc_main$h, m as _sfc_main$k, b as _sfc_main$w, l as _sfc_main$D, c as _sfc_main$G, i as _sfc_main$K, h as _sfc_main$M, e as _sfc_main$N, a as _sfc_main$O, g as _sfc_main$Q, q as _sfc_main$S, k as _sfc_main$V } from "./DarkModeToggle.vue_vue_type_script_setup_true_lang-43fxlbro.js";
-import { a as _sfc_main$l, _ as _sfc_main$v } from "./Dropdown.vue_vue_type_script_setup_true_lang-C3pr8BwC.js";
+import { o as _sfc_main, p as _sfc_main$1, d as _sfc_main$3, f as _sfc_main$4, n as _sfc_main$8, _ as _sfc_main$a, j as _sfc_main$d, r as _sfc_main$h, m as _sfc_main$k, b as _sfc_main$w, l as _sfc_main$D, c as _sfc_main$G, i as _sfc_main$K, h as _sfc_main$M, e as _sfc_main$N, a as _sfc_main$O, g as _sfc_main$Q, q as _sfc_main$S, k as _sfc_main$V } from "./DarkModeToggle.vue_vue_type_script_setup_true_lang-ikdyJymX.js";
+import { a as _sfc_main$l, _ as _sfc_main$v } from "./Dropdown.vue_vue_type_script_setup_true_lang-nyND94f_.js";
 import { e as _sfc_main$5, d as _sfc_main$7, c as _sfc_main$j, b as _sfc_main$A, _ as _sfc_main$J, a as _sfc_main$R } from "./BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js";
-import { _ as _sfc_main$9, b as _sfc_main$b, c as _sfc_main$t, a as _sfc_main$P } from "./Button.vue_vue_type_script_setup_true_lang-DKE8elsf.js";
-import { j as _sfc_main$e, l as _sfc_main$f, g as _sfc_main$i, h as _sfc_main$n, d as _sfc_main$o, a as _sfc_main$p, b as _sfc_main$q, _ as _sfc_main$r, c as _sfc_main$s, k as _sfc_main$E, i as _sfc_main$F, e as _sfc_main$H, S as Slider, f as _sfc_main$L } from "./Combobox.vue_vue_type_script_setup_true_lang-DhcLb6DX.js";
-import { _ as _sfc_main$c } from "./index-Dghdw1yo.js";
-import { e as _sfc_main$2, j as _sfc_main$g, f as _sfc_main$m, _ as _sfc_main$u, a as _sfc_main$x, c as _sfc_main$y, d as _sfc_main$z, b as _sfc_main$C, P as Progress, i as _sfc_main$I, g as _sfc_main$T, h as _sfc_main$U } from "./ConfirmDialog.vue_vue_type_script_setup_true_lang-CNucAMQg.js";
-import { _ as _sfc_main$6, a as _sfc_main$B } from "./PageLayout.vue_vue_type_script_setup_true_lang-kT7np2ir.js";
+import { _ as _sfc_main$9, b as _sfc_main$b, c as _sfc_main$t, a as _sfc_main$P } from "./Button.vue_vue_type_script_setup_true_lang-Dn8aHGGg.js";
+import { j as _sfc_main$e, l as _sfc_main$f, g as _sfc_main$i, h as _sfc_main$n, d as _sfc_main$o, a as _sfc_main$p, b as _sfc_main$q, _ as _sfc_main$r, c as _sfc_main$s, k as _sfc_main$E, i as _sfc_main$F, e as _sfc_main$H, S as Slider, f as _sfc_main$L } from "./Combobox.vue_vue_type_script_setup_true_lang-BtLRG3an.js";
+import { _ as _sfc_main$c } from "./index-CJwlO351.js";
+import { e as _sfc_main$2, j as _sfc_main$g, f as _sfc_main$m, _ as _sfc_main$u, a as _sfc_main$x, c as _sfc_main$y, d as _sfc_main$z, b as _sfc_main$C, P as Progress, i as _sfc_main$I, g as _sfc_main$T, h as _sfc_main$U } from "./ConfirmDialog.vue_vue_type_script_setup_true_lang-5Wl0RVdP.js";
+import { _ as _sfc_main$6, a as _sfc_main$B } from "./PageLayout.vue_vue_type_script_setup_true_lang-BgTJd526.js";
 const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Accordion: _sfc_main,
@@ -72,4 +72,4 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
 export {
   components as c
 };
-//# sourceMappingURL=index-DZYqrXV0.js.map
+//# sourceMappingURL=index-7T5IxJdf.js.map

package/dist/index-7T5IxJdf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-7T5IxJdf.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/{index-Dghdw1yo.js → index-CJwlO351.js}

@@ -1,5 +1,6 @@
-import { defineComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, toDisplayString, onMounted, nextTick, getCurrentInstance, getCurrentScope, hasInjectionContext, inject, watch, shallowRef, computed, toValue, watchEffect, unref } from "vue";
-const _hoisted_1 = ["checked", "disabled", "indeterminate"];
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, toDisplayString, onMounted, nextTick, getCurrentInstance, getCurrentScope, hasInjectionContext, inject, watch, shallowRef, toValue, watchEffect, unref } from "vue";
+import { u as useId } from "./useId-xeHj7rkg.js";
+const _hoisted_1 = ["id", "checked", "disabled", "indeterminate", "aria-describedby"];
 const _hoisted_2 = {
   key: 0,
   class: "flex flex-col"
@@ -8,10 +9,7 @@ const _hoisted_3 = {
   key: 0,
   class: "text-sm font-medium text-gray-900 dark:text-white"
 };
-const _hoisted_4 = {
-  key: 1,
-  class: "text-sm text-gray-500 dark:text-gray-400"
-};
+const _hoisted_4 = ["id"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
   props: {
@@ -19,11 +17,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     label: {},
     description: {},
     disabled: { type: Boolean },
-    indeterminate: { type: Boolean }
+    indeterminate: { type: Boolean },
+    id: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
+    const props = __props;
     const emit = __emit;
+    const { id: generatedId, related } = useId({ prefix: "checkbox", id: props.id });
+    const inputId = computed(() => props.id ?? generatedId.value);
+    const descriptionId = computed(() => related("description"));
     const toggle = (event) => {
       const target = event.target;
       emit("update:modelValue", target.checked);
@@ -33,16 +36,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["inline-flex items-start gap-3", __props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"])
       }, [
         createElementVNode("input", {
+          id: inputId.value,
           type: "checkbox",
           checked: __props.modelValue,
           disabled: __props.disabled,
           indeterminate: __props.indeterminate,
+          "aria-describedby": __props.description ? descriptionId.value : void 0,
           class: "mt-0.5 size-4 rounded border-gray-300 text-primary/90 focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed dark:border-gray-600 dark:bg-gray-800 dark:focus:ring-offset-gray-900",
           onChange: toggle
         }, null, 40, _hoisted_1),
         __props.label || __props.description ? (openBlock(), createElementBlock("div", _hoisted_2, [
           __props.label ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
-          __props.description ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+          __props.description ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            id: descriptionId.value,
+            class: "text-sm text-gray-500 dark:text-gray-400"
+          }, toDisplayString(__props.description), 9, _hoisted_4)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
@@ -335,4 +344,4 @@ export {
   onClickOutside as o,
   useBreakpoints as u
 };
-//# sourceMappingURL=index-Dghdw1yo.js.map
+//# sourceMappingURL=index-CJwlO351.js.map