cisse-vue-ui 0.7.3 → 0.7.4

package/dist/composables/useDropdown.d.ts

@@ -0,0 +1,51 @@
+import { Ref, ComputedRef } from 'vue';
+export interface UseDropdownOptions {
+    /** Whether teleport is enabled (affects position calculation) */
+    teleport?: boolean;
+    /** Alignment for position calculation */
+    align?: 'left' | 'right';
+    /** Gap between trigger and dropdown in pixels */
+    gap?: number;
+    /** Callback when dropdown opens */
+    onOpen?: () => void;
+    /** Callback when dropdown closes */
+    onClose?: () => void;
+}
+export interface UseDropdownReturn {
+    /** Whether the dropdown is currently open */
+    isOpen: Ref<boolean>;
+    /** Current highlighted index for keyboard navigation */
+    highlightedIndex: Ref<number>;
+    /** Calculated position for teleported dropdown */
+    dropdownPosition: Ref<{
+        top: number;
+        left: number;
+        right: number;
+        width: number;
+    }>;
+    /** Computed style object for teleported dropdown */
+    dropdownStyle: ComputedRef<Record<string, string>>;
+    /** Open the dropdown */
+    open: () => void;
+    /** Close the dropdown */
+    close: () => void;
+    /** Toggle the dropdown */
+    toggle: () => void;
+    /** Update position (call after DOM changes) */
+    updatePosition: () => void;
+    /** Handle keyboard navigation */
+    handleKeydown: (event: KeyboardEvent, options: KeyboardNavigationOptions) => void;
+    /** Scroll to highlighted item */
+    scrollToHighlighted: (dropdownEl: HTMLElement | null) => void;
+}
+export interface KeyboardNavigationOptions {
+    /** Total number of items to navigate */
+    itemCount: number;
+    /** Called when Enter is pressed on a highlighted item */
+    onSelect?: (index: number) => void;
+    /** Called when the dropdown should open (Space/Enter/ArrowDown when closed) */
+    onOpen?: () => void;
+    /** Whether to handle open keys (Space/Enter/ArrowDown) when closed */
+    handleOpenKeys?: boolean;
+}
+export declare function useDropdown(triggerRef: Ref<HTMLElement | null | undefined>, dropdownRef: Ref<HTMLElement | null | undefined>, options?: UseDropdownOptions): UseDropdownReturn;

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

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

package/dist/composables/useExportCSV.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Composable for exporting data to CSV format
+ */
+export declare function useExportCSV(): {
+    exportToCSV: <T extends Record<string, unknown>>(data: T[], columns: {
+        key: keyof T;
+        label: string;
+    }[], filename?: string) => void;
+    escapeCSV: (value: unknown) => string;
+};

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

@@ -0,0 +1,60 @@
+import { Ref } from 'vue';
+export interface UseModalReturn<T = unknown> {
+    /** Whether the modal is currently open */
+    isOpen: Ref<boolean>;
+    /** Data associated with the modal (e.g., item being edited) */
+    data: Ref<T | null>;
+    /** Open the modal, optionally with data */
+    open: (newData?: T) => void;
+    /** Close the modal and clear data */
+    close: () => void;
+    /** Toggle the modal state */
+    toggle: () => void;
+}
+/**
+ * Composable for managing modal state
+ *
+ * @example
+ * ```ts
+ * // Simple modal
+ * const createModal = useModal()
+ * createModal.open()
+ * createModal.close()
+ *
+ * // Modal with data (e.g., for editing)
+ * const editModal = useModal<User>()
+ * editModal.open(selectedUser)
+ * // Access editModal.data.value in modal
+ *
+ * // With onClose callback
+ * const deleteModal = useModal<Item>({ onClose: () => refetch() })
+ * ```
+ */
+export declare function useModal<T = unknown>(options?: {
+    /** Initial open state */
+    initialOpen?: boolean;
+    /** Initial data */
+    initialData?: T | null;
+    /** Callback when modal opens */
+    onOpen?: (data: T | null) => void;
+    /** Callback when modal closes */
+    onClose?: () => void;
+}): UseModalReturn<T>;
+/**
+ * Create multiple related modals at once
+ * Useful when a page has several modals (create, edit, delete, etc.)
+ *
+ * @example
+ * ```ts
+ * const modals = useModals({
+ *   create: useModal(),
+ *   edit: useModal<User>(),
+ *   delete: useModal<User>(),
+ * })
+ *
+ * modals.create.open()
+ * modals.edit.open(user)
+ * modals.delete.close()
+ * ```
+ */
+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/composables/useNotifications.d.ts

@@ -0,0 +1,27 @@
+import { NotificationType, NotificationOptions } from '../types';
+/**
+ * Composable for managing notifications/toasts
+ * Uses singleton pattern - all components share the same notifications state
+ */
+export declare function useNotifications(): {
+    notifications: Readonly<import('vue').Ref<readonly {
+        readonly id: string;
+        readonly type: NotificationType;
+        readonly message: string;
+        readonly title?: string | null | undefined;
+        readonly duration?: number | undefined;
+    }[], readonly {
+        readonly id: string;
+        readonly type: NotificationType;
+        readonly message: string;
+        readonly title?: string | null | undefined;
+        readonly duration?: number | undefined;
+    }[]>>;
+    notify: (type: NotificationType, message: string, options?: NotificationOptions) => string;
+    success: (message: string, options?: NotificationOptions) => string;
+    warning: (message: string, options?: NotificationOptions) => string;
+    error: (message: string, options?: NotificationOptions) => string;
+    info: (message: string, options?: NotificationOptions) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+};

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

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

package/dist/composables/useToast.d.ts

@@ -0,0 +1,30 @@
+import { ToastType } from '../components/feedback/Toast.vue';
+import { ToastItem } from '../components/feedback/ToastContainer.vue';
+export interface ToastOptions {
+    message: string;
+    type?: ToastType;
+    title?: string;
+    duration?: number;
+}
+export declare function useToast(): {
+    toasts: import('vue').Ref<{
+        id: string;
+        message: string;
+        type?: ToastType | undefined;
+        title?: string | undefined;
+        duration?: number | undefined;
+    }[], ToastItem[] | {
+        id: string;
+        message: string;
+        type?: ToastType | undefined;
+        title?: string | undefined;
+        duration?: number | undefined;
+    }[]>;
+    add: (options: ToastOptions) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+    success: (message: string, title?: string) => string;
+    error: (message: string, title?: string) => string;
+    warning: (message: string, title?: string) => string;
+    info: (message: string, title?: string) => string;
+};

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

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

package/dist/index-Ci0UGwko.cjs

@@ -0,0 +1,94 @@
+"use strict";
+const FilterTabs_vue_vue_type_script_setup_true_lang = require("./FilterTabs.vue_vue_type_script_setup_true_lang-HwjuvIJX.cjs");
+const Dropdown_vue_vue_type_script_setup_true_lang = require("./Dropdown.vue_vue_type_script_setup_true_lang-BNOHbbm5.cjs");
+const BadgeType_vue_vue_type_script_setup_true_lang = require("./BadgeType.vue_vue_type_script_setup_true_lang-zs0NXN4g.cjs");
+const Button_vue_vue_type_script_setup_true_lang = require("./Button.vue_vue_type_script_setup_true_lang-CXRj7LEP.cjs");
+const TagsInput = require("./TagsInput-tlIso0sZ.cjs");
+const index = require("./index-D1x3TH9k.cjs");
+const ConfirmDialog_vue_vue_type_script_setup_true_lang = require("./ConfirmDialog.vue_vue_type_script_setup_true_lang-Bine-xfp.cjs");
+const ListSkeleton_vue_vue_type_script_setup_true_lang = require("./ListSkeleton.vue_vue_type_script_setup_true_lang-DtwwmfWr.cjs");
+const PageHero_vue_vue_type_script_setup_true_lang = require("./PageHero.vue_vue_type_script_setup_true_lang-CZ-TibKk.cjs");
+const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Accordion: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$15,
+  AccordionItem: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$16,
+  Alert: ConfirmDialog_vue_vue_type_script_setup_true_lang._sfc_main$5,
+  AuthLayout: PageHero_vue_vue_type_script_setup_true_lang._sfc_main,
+  AutocompleteComponent: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$4,
+  Avatar: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$6,
+  BadgeType: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$5,
+  BaseLayout: PageHero_vue_vue_type_script_setup_true_lang._sfc_main$1,
+  BooleanType: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$4,
+  Breadcrumb: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$14,
+  Button: Button_vue_vue_type_script_setup_true_lang._sfc_main,
+  CardComponent: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main,
+  CardSkeleton: ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main$1,
+  Checkbox: index._sfc_main,
+  CollapsibleCard: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$10,
+  ColorPicker: TagsInput._sfc_main$10,
+  Combobox: TagsInput._sfc_main$12,
+  ConfirmDialog: ConfirmDialog_vue_vue_type_script_setup_true_lang._sfc_main$10,
+  DarkModeToggle: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$18,
+  DatePicker: TagsInput._sfc_main$7,
+  DateType: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$3,
+  Drawer: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$13,
+  Dropdown: Dropdown_vue_vue_type_script_setup_true_lang._sfc_main$1,
+  EmailInput: TagsInput._sfc_main$17,
+  EmptyState: ConfirmDialog_vue_vue_type_script_setup_true_lang._sfc_main$6,
+  FileUpload: TagsInput._sfc_main$8,
+  FilterTabs: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$21,
+  FormActions: TagsInput._sfc_main$15,
+  FormGroup: TagsInput._sfc_main$4,
+  FormHelp: TagsInput._sfc_main$1,
+  FormInput: TagsInput._sfc_main$2,
+  FormLabel: TagsInput._sfc_main,
+  FormSection: TagsInput._sfc_main$14,
+  FormSelect: TagsInput._sfc_main$3,
+  IconPicker: TagsInput._sfc_main$13,
+  InputWrapper: TagsInput._sfc_main$16,
+  ListSkeleton: ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main$2,
+  LoadingSpinner: ConfirmDialog_vue_vue_type_script_setup_true_lang._sfc_main,
+  MenuItem: Dropdown_vue_vue_type_script_setup_true_lang._sfc_main,
+  MobileList: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$2,
+  Modal: ConfirmDialog_vue_vue_type_script_setup_true_lang._sfc_main$1,
+  MoneyInput: TagsInput._sfc_main$21,
+  NotificationComponent: ConfirmDialog_vue_vue_type_script_setup_true_lang._sfc_main$3,
+  NotificationList: ConfirmDialog_vue_vue_type_script_setup_true_lang._sfc_main$4,
+  NumberInput: TagsInput._sfc_main$20,
+  NumberType: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$2,
+  OTPInput: TagsInput._sfc_main$25,
+  PageHero: PageHero_vue_vue_type_script_setup_true_lang._sfc_main$3,
+  PageLayout: PageHero_vue_vue_type_script_setup_true_lang._sfc_main$2,
+  PaginationControls: ConfirmDialog_vue_vue_type_script_setup_true_lang._sfc_main$2,
+  PasswordInput: TagsInput._sfc_main$18,
+  PercentInput: TagsInput._sfc_main$22,
+  PhoneInput: TagsInput._sfc_main$19,
+  Popover: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$12,
+  Progress: ConfirmDialog_vue_vue_type_script_setup_true_lang.Progress,
+  QuantityInput: TagsInput._sfc_main$23,
+  RangeSlider: TagsInput._sfc_main$11,
+  Rating: TagsInput._sfc_main$9,
+  ResponsiveList: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$3,
+  SearchInput: TagsInput._sfc_main$5,
+  Skeleton: ConfirmDialog_vue_vue_type_script_setup_true_lang._sfc_main$9,
+  Slider: TagsInput.Slider,
+  StatsCard: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$19,
+  StatsGrid: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$20,
+  StatusBadge: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main,
+  Stepper: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$9,
+  Switch: TagsInput._sfc_main$6,
+  TabPanel: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$8,
+  TableAction: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$5,
+  TableComponent: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$1,
+  TableSkeleton: ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main,
+  Tabs: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$7,
+  TagsInput: TagsInput.TagsInput,
+  TextType: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$1,
+  Timeline: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$17,
+  Toast: ConfirmDialog_vue_vue_type_script_setup_true_lang._sfc_main$7,
+  ToastContainer: ConfirmDialog_vue_vue_type_script_setup_true_lang._sfc_main$8,
+  Tooltip: FilterTabs_vue_vue_type_script_setup_true_lang._sfc_main$11,
+  URLInput: TagsInput._sfc_main$24
+}, Symbol.toStringTag, { value: "Module" }));
+exports.components = components;
+//# sourceMappingURL=index-Ci0UGwko.cjs.map

package/dist/index-Ci0UGwko.cjs.map

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