@eslamdevui/ui 4.1.1-rc.2 → 4.3.1

package/dist/runtime/composables/defineShortcuts.js

@@ -4,12 +4,36 @@ import { useKbd } from "./useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
 const shiftableKeys = ["arrowleft", "arrowright", "arrowup", "arrowright", "tab", "escape", "enter", "backspace"];
-export function extractShortcuts(items) {
+function convertKeyToCode(key) {
+  if (/^[a-z]$/i.test(key)) {
+    return `Key${key.toUpperCase()}`;
+  }
+  if (/^\d$/.test(key)) {
+    return `Digit${key}`;
+  }
+  if (/^f\d+$/i.test(key)) {
+    return key.toUpperCase();
+  }
+  const specialKeys = {
+    space: "Space",
+    enter: "Enter",
+    escape: "Escape",
+    tab: "Tab",
+    backspace: "Backspace",
+    delete: "Delete",
+    arrowup: "ArrowUp",
+    arrowdown: "ArrowDown",
+    arrowleft: "ArrowLeft",
+    arrowright: "ArrowRight"
+  };
+  return specialKeys[key.toLowerCase()] || key;
+}
+export function extractShortcuts(items, separator = "_") {
   const shortcuts = {};
   function traverse(items2) {
     items2.forEach((item) => {
       if (item.kbds?.length && (item.onSelect || item.onClick)) {
-        const shortcutKey = item.kbds.join("_");
+        const shortcutKey = item.kbds.join(separator);
         shortcuts[shortcutKey] = item.onSelect || item.onClick;
       }
       if (item.children) {
@@ -31,14 +55,16 @@ export function defineShortcuts(config, options = {}) {
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
   const { macOS } = useKbd();
   const activeElement = useActiveElement();
+  const layoutIndependent = options.layoutIndependent ?? false;
+  const shiftableCodes = shiftableKeys.map((k) => convertKeyToCode(k));
   const onKeyDown = (e) => {
     if (!e.key) {
       return;
     }
-    const alphabetKey = /^[a-z]{1}$/i.test(e.key);
-    const shiftableKey = shiftableKeys.includes(e.key.toLowerCase());
+    const alphabetKey = layoutIndependent ? /^Key[A-Z]$/i.test(e.code) : /^[a-z]{1}$/i.test(e.key);
+    const shiftableKey = layoutIndependent ? shiftableCodes.includes(e.code) : shiftableKeys.includes(e.key.toLowerCase());
     let chainedKey;
-    chainedInputs.value.push(e.key);
+    chainedInputs.value.push(layoutIndependent ? e.code : e.key);
     if (chainedInputs.value.length >= 2) {
       chainedKey = chainedInputs.value.slice(-2).join("-");
       for (const shortcut of shortcuts.value.filter((s) => s.chained)) {
@@ -54,8 +80,14 @@ export function defineShortcuts(config, options = {}) {
       }
     }
     for (const shortcut of shortcuts.value.filter((s) => !s.chained)) {
-      if (e.key.toLowerCase() !== shortcut.key) {
-        continue;
+      if (layoutIndependent) {
+        if (e.code !== shortcut.key) {
+          continue;
+        }
+      } else {
+        if (e.key.toLowerCase() !== shortcut.key) {
+          continue;
+        }
       }
       if (e.metaKey !== shortcut.metaKey) {
         continue;
@@ -98,17 +130,32 @@ export function defineShortcuts(config, options = {}) {
       }
       const chained = key.includes("-") && key !== "-" && !key.includes("_");
       if (chained) {
-        shortcut = {
-          key: key.toLowerCase(),
-          metaKey: false,
-          ctrlKey: false,
-          shiftKey: false,
-          altKey: false
-        };
+        if (layoutIndependent) {
+          const parts = key.split("-").map((p) => convertKeyToCode(p));
+          shortcut = {
+            key: parts.join("-"),
+            metaKey: false,
+            ctrlKey: false,
+            shiftKey: false,
+            altKey: false
+          };
+        } else {
+          shortcut = {
+            key: key.toLowerCase(),
+            metaKey: false,
+            ctrlKey: false,
+            shiftKey: false,
+            altKey: false
+          };
+        }
       } else {
         const keySplit = key.toLowerCase().split("_").map((k) => k);
+        let baseKey = keySplit.filter((k) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(k)).join("_");
+        if (layoutIndependent) {
+          baseKey = convertKeyToCode(baseKey);
+        }
         shortcut = {
-          key: keySplit.filter((k) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(k)).join("_"),
+          key: baseKey,
           metaKey: keySplit.includes("meta") || keySplit.includes("command"),
           ctrlKey: keySplit.includes("ctrl"),
           shiftKey: keySplit.includes("shift"),

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

@@ -0,0 +1,8 @@
+export * from './defineLocale';
+export * from './defineShortcuts';
+export * from './useFileUpload';
+export * from './useKbd';
+export * from './useOverlay';
+export * from './useResizable';
+export * from './useScrollspy';
+export * from './useToast';

package/dist/runtime/composables/index.js

@@ -0,0 +1,8 @@
+export * from "./defineLocale.js";
+export * from "./defineShortcuts.js";
+export * from "./useFileUpload.js";
+export * from "./useKbd.js";
+export * from "./useOverlay.js";
+export * from "./useResizable.js";
+export * from "./useScrollspy.js";
+export * from "./useToast.js";

package/dist/runtime/composables/useAvatarGroup.d.ts

@@ -6,5 +6,5 @@ export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
 export declare function useAvatarGroup(props: {
     size: AvatarGroupProps['size'];
 }): {
-    size: ComputedRef<"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined>;
+    size: ComputedRef<"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined>;
 };

package/dist/runtime/composables/useComponentIcons.d.ts

@@ -32,8 +32,8 @@ export interface UseComponentIconsProps {
     loadingIcon?: IconProps['name'];
 }
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
-    isLeading: import("vue").ComputedRef<boolean>;
-    isTrailing: import("vue").ComputedRef<boolean>;
+    isLeading: import("vue").ComputedRef<any>;
+    isTrailing: import("vue").ComputedRef<any>;
     leadingIconName: import("vue").ComputedRef<any>;
     trailingIconName: import("vue").ComputedRef<any>;
 };

package/dist/runtime/composables/useContentSearch.d.ts

@@ -1,5 +1,10 @@
+import type { ContentNavigationItem } from '@nuxt/content';
+import type { ContentSearchFile, ContentSearchItem } from '../components/content/ContentSearch.vue';
 declare function _useContentSearch(): {
     open: import("vue").Ref<boolean, boolean>;
+    mapFile: (file: ContentSearchFile, link: ContentNavigationItem, parent?: ContentNavigationItem) => ContentSearchItem;
+    mapNavigationItems: (children: ContentNavigationItem[], files: ContentSearchFile[], parent?: ContentNavigationItem) => ContentSearchItem[];
+    postFilter: (query: string, items: ContentSearchItem[]) => ContentSearchItem[];
 };
 export declare const useContentSearch: typeof _useContentSearch;
 export {};

package/dist/runtime/composables/useContentSearch.js

@@ -1,9 +1,39 @@
 import { ref } from "vue";
 import { createSharedComposable } from "@vueuse/core";
+import { useAppConfig } from "#imports";
 function _useContentSearch() {
   const open = ref(false);
+  const appConfig = useAppConfig();
+  function mapFile(file, link, parent) {
+    const prefix = [...new Set([parent?.title, ...file.titles].filter(Boolean))];
+    return {
+      prefix: prefix?.length ? prefix.join(" > ") + " >" : void 0,
+      label: file.id === link.path ? link.title : file.title,
+      suffix: file.content.replaceAll("<", "&lt;").replaceAll(">", "&gt;"),
+      to: file.id,
+      icon: link.icon || parent?.icon || (file.level > 1 ? appConfig.ui.icons.hash : appConfig.ui.icons.file),
+      level: file.level
+    };
+  }
+  function mapNavigationItems(children, files, parent) {
+    return children.flatMap((link) => {
+      if (link.children?.length) {
+        return mapNavigationItems(link.children, files, link);
+      }
+      return files?.filter((file) => file.id === link.path || file.id.startsWith(`${link.path}#`))?.map((file) => mapFile(file, link, parent)) || [];
+    });
+  }
+  function postFilter(query, items) {
+    if (!query) {
+      return items?.filter((item) => item.level === 1);
+    }
+    return items;
+  }
   return {
-    open
+    open,
+    mapFile,
+    mapNavigationItems,
+    postFilter
   };
 }
 export const useContentSearch = /* @__PURE__ */ createSharedComposable(_useContentSearch);

package/dist/runtime/composables/useEditorMenu.d.ts

@@ -0,0 +1,64 @@
+import type { Ref, ComputedRef, MaybeRef } from 'vue';
+import type { Editor } from '@tiptap/vue-3';
+import type { FloatingUIOptions } from '../types/editor';
+export interface EditorMenuOptions<T = any> {
+    editor: Editor;
+    /**
+     * The trigger character (e.g., '/', '@', ':')
+     */
+    char: string;
+    /**
+     * Plugin key to identify this menu
+     */
+    pluginKey: string;
+    /**
+     * The items to display (can be a flat array or grouped)
+     */
+    items?: MaybeRef<T[] | T[][] | undefined>;
+    /**
+     * Fields to filter items by.
+     * @defaultValue ['label']
+     */
+    filterFields?: string[];
+    /**
+     * Function to filter items based on query
+     */
+    filter?: (items: T[], query: string) => T[];
+    /**
+     * Maximum number of items to display
+     * @defaultValue 42
+     */
+    limit?: number;
+    /**
+     * Function to execute when an item is selected
+     */
+    onSelect: (editor: Editor, range: any, item: T) => void;
+    /**
+     * Function to render each menu item
+     */
+    renderItem: (item: T, ui: ComputedRef<any>) => any;
+    /**
+     * The options for positioning the menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, size, autoPlacement, hide, and inline middleware.
+     * @defaultValue { strategy: 'absolute', placement: 'bottom-start', offset: 8, shift: { padding: 8 } }
+     * @see https://floating-ui.com/docs/computePosition#options
+     */
+    options?: FloatingUIOptions;
+    /**
+     * The DOM element to append the menu to. Default is the editor's parent element.
+     *
+     * Sometimes the menu needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.
+     *
+     * @type {HTMLElement}
+     * @default editor.view.dom.parentElement
+     */
+    appendTo?: HTMLElement | (() => HTMLElement);
+    /**
+     * UI styles computed ref
+     */
+    ui: ComputedRef<any>;
+}
+export declare function useEditorMenu<T = any>(options: EditorMenuOptions<T>): {
+    plugin: import("prosemirror-state").Plugin<any>;
+    destroy: () => void;
+    filteredItems: Ref<T[], T[]>;
+};