@cgboiler/biz-basic 1.0.53 → 1.0.55

package/es/rich-text-editor/menu-system/hooks/use-mark.js

@@ -0,0 +1,109 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+import { isMarkInSchema, isNodeTypeSelected } from "../utils/tiptap-utils";
+import * as Icons from "../icons";
+const markIcons = {
+  bold: Icons.BoldIcon,
+  italic: Icons.ItalicIcon,
+  underline: Icons.UnderlineIcon,
+  strike: Icons.StrikeIcon,
+  code: Icons.Code2Icon,
+  superscript: Icons.SuperscriptIcon,
+  subscript: Icons.SubscriptIcon
+};
+const MARK_SHORTCUT_KEYS = {
+  bold: "mod+b",
+  italic: "mod+i",
+  underline: "mod+u",
+  strike: "mod+shift+s",
+  code: "mod+e",
+  superscript: "mod+.",
+  subscript: "mod+,"
+};
+function canToggleMark(editor, type) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!isMarkInSchema(type, editor) || isNodeTypeSelected(editor, ["image"]))
+    return false;
+  return editor.can().toggleMark(type);
+}
+function isMarkActive(editor, type) {
+  if (!editor || !editor.isEditable)
+    return false;
+  return editor.isActive(type);
+}
+function toggleMark(editor, type) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!canToggleMark(editor, type))
+    return false;
+  return editor.chain().focus().toggleMark(type).run();
+}
+function useMark(config) {
+  const { type, hideWhenUnavailable = false, onToggled } = config;
+  const isVisible = ref(true);
+  const isActive = ref(false);
+  const canToggle = ref(false);
+  const getEditor = () => {
+    const editor = config.editor;
+    return editor && "value" in editor ? editor.value : editor;
+  };
+  const updateState = () => {
+    const editor = getEditor();
+    if (!editor || !editor.isEditable) {
+      isVisible.value = false;
+      isActive.value = false;
+      canToggle.value = false;
+      return;
+    }
+    isActive.value = isMarkActive(editor, type);
+    canToggle.value = canToggleMark(editor, type);
+    if (hideWhenUnavailable && !editor.isActive("code")) {
+      isVisible.value = canToggle.value;
+    } else {
+      isVisible.value = isMarkInSchema(type, editor);
+    }
+  };
+  const handleMark = () => {
+    const editor = getEditor();
+    if (!editor)
+      return false;
+    const success = toggleMark(editor, type);
+    if (success) {
+      onToggled == null ? void 0 : onToggled();
+    }
+    return success;
+  };
+  watch(
+    () => getEditor(),
+    (editor) => {
+      if (!editor)
+        return;
+      updateState();
+      editor.on("selectionUpdate", updateState);
+      editor.on("transaction", updateState);
+      onBeforeUnmount(() => {
+        editor.off("selectionUpdate", updateState);
+        editor.off("transaction", updateState);
+      });
+    },
+    { immediate: true }
+  );
+  return {
+    isVisible,
+    isActive,
+    handleMark,
+    canToggle,
+    label: type.charAt(0).toUpperCase() + type.slice(1),
+    shortcutKeys: MARK_SHORTCUT_KEYS[type],
+    Icon: markIcons[type] || Icons.BoldIcon
+    // fallback
+  };
+}
+export {
+  MARK_SHORTCUT_KEYS,
+  canToggleMark,
+  isMarkActive,
+  markIcons,
+  toggleMark,
+  useMark
+};

package/es/rich-text-editor/menu-system/hooks/use-menu-navigation.d.ts

@@ -0,0 +1,16 @@
+import type { Editor } from '@tiptap/vue-3';
+type Orientation = 'horizontal' | 'vertical' | 'both';
+interface MenuNavigationOptions<T> {
+    editor?: Editor | null;
+    containerRef?: any;
+    query?: string;
+    items: T[];
+    onSelect?: (item: T) => void;
+    onClose?: () => void;
+    orientation?: Orientation;
+    autoSelectFirstItem?: boolean;
+}
+export declare function useMenuNavigation<T>({ editor, containerRef, query, items, onSelect, onClose, orientation, autoSelectFirstItem, }: MenuNavigationOptions<T>): {
+    selectedIndex: import("vue").Ref<number, number>;
+};
+export {};

package/es/rich-text-editor/menu-system/hooks/use-menu-navigation.js

@@ -0,0 +1,134 @@
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+function useMenuNavigation({
+  editor,
+  containerRef,
+  query,
+  items,
+  onSelect,
+  onClose,
+  orientation = "vertical",
+  autoSelectFirstItem = true
+}) {
+  const selectedIndex = ref(autoSelectFirstItem ? 0 : -1);
+  const handleKeyboardNavigation = (event) => {
+    if (!items.length)
+      return false;
+    const moveNext = () => {
+      if (selectedIndex.value === -1) {
+        selectedIndex.value = 0;
+      } else {
+        selectedIndex.value = (selectedIndex.value + 1) % items.length;
+      }
+    };
+    const movePrev = () => {
+      if (selectedIndex.value === -1) {
+        selectedIndex.value = items.length - 1;
+      } else {
+        selectedIndex.value = (selectedIndex.value - 1 + items.length) % items.length;
+      }
+    };
+    switch (event.key) {
+      case "ArrowUp": {
+        if (orientation === "horizontal")
+          return false;
+        event.preventDefault();
+        movePrev();
+        return true;
+      }
+      case "ArrowDown": {
+        if (orientation === "horizontal")
+          return false;
+        event.preventDefault();
+        moveNext();
+        return true;
+      }
+      case "ArrowLeft": {
+        if (orientation === "vertical")
+          return false;
+        event.preventDefault();
+        movePrev();
+        return true;
+      }
+      case "ArrowRight": {
+        if (orientation === "vertical")
+          return false;
+        event.preventDefault();
+        moveNext();
+        return true;
+      }
+      case "Tab": {
+        event.preventDefault();
+        if (event.shiftKey) {
+          movePrev();
+        } else {
+          moveNext();
+        }
+        return true;
+      }
+      case "Home": {
+        event.preventDefault();
+        selectedIndex.value = 0;
+        return true;
+      }
+      case "End": {
+        event.preventDefault();
+        selectedIndex.value = items.length - 1;
+        return true;
+      }
+      case "Enter": {
+        if (event.isComposing)
+          return false;
+        event.preventDefault();
+        if (selectedIndex.value !== -1 && items[selectedIndex.value]) {
+          onSelect == null ? void 0 : onSelect(items[selectedIndex.value]);
+        }
+        return true;
+      }
+      case "Escape": {
+        event.preventDefault();
+        onClose == null ? void 0 : onClose();
+        return true;
+      }
+      default:
+        return false;
+    }
+  };
+  const bindEvents = () => {
+    let targetElement = null;
+    if (editor) {
+      targetElement = editor.view.dom;
+    } else if (containerRef == null ? void 0 : containerRef.value) {
+      targetElement = containerRef.value;
+    }
+    if (targetElement) {
+      targetElement.addEventListener("keydown", handleKeyboardNavigation, true);
+    }
+    return targetElement;
+  };
+  const unbindEvents = (element) => {
+    if (element) {
+      element.removeEventListener("keydown", handleKeyboardNavigation, true);
+    }
+  };
+  let mountedElement = null;
+  onMounted(() => {
+    mountedElement = bindEvents();
+  });
+  onBeforeUnmount(() => {
+    unbindEvents(mountedElement);
+  });
+  watch(
+    () => query,
+    () => {
+      if (query) {
+        selectedIndex.value = autoSelectFirstItem ? 0 : -1;
+      }
+    }
+  );
+  return {
+    selectedIndex
+  };
+}
+export {
+  useMenuNavigation
+};

package/es/rich-text-editor/menu-system/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(breakpoint?: number): import("vue").Ref<boolean, boolean>;

package/es/rich-text-editor/menu-system/hooks/use-mobile.js

@@ -0,0 +1,20 @@
+import { ref, onMounted, onBeforeUnmount } from "vue";
+function useIsMobile(breakpoint = 768) {
+  const isMobile = ref(false);
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < breakpoint;
+  };
+  onMounted(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    mql.addEventListener("change", checkMobile);
+    checkMobile();
+  });
+  onBeforeUnmount(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    mql.removeEventListener("change", checkMobile);
+  });
+  return isMobile;
+}
+export {
+  useIsMobile
+};

package/es/rich-text-editor/menu-system/hooks/use-text-align.d.ts

@@ -0,0 +1,28 @@
+import type { Editor } from '@tiptap/vue-3';
+export type TextAlign = 'left' | 'center' | 'right' | 'justify';
+export interface UseTextAlignConfig {
+    editor: any;
+    align: TextAlign;
+    hideWhenUnavailable?: boolean;
+    onAligned?: () => void;
+}
+export declare const TEXT_ALIGN_SHORTCUT_KEYS: Record<TextAlign, string>;
+export declare const textAlignIcons: any;
+export declare const textAlignLabels: Record<TextAlign, string>;
+export declare function canSetTextAlign(editor: Editor | null, align: TextAlign): boolean;
+export declare function isTextAlignActive(editor: Editor | null, align: TextAlign): boolean;
+export declare function setTextAlign(editor: Editor | null, align: TextAlign): boolean;
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+    align: TextAlign;
+}): boolean;
+export declare function useTextAlign(config: UseTextAlignConfig): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    isActive: import("vue").Ref<boolean, boolean>;
+    handleTextAlign: () => void;
+    canAlign: import("vue").Ref<boolean, boolean>;
+    label: string;
+    shortcutKeys: string;
+    Icon: any;
+};

package/es/rich-text-editor/menu-system/hooks/use-text-align.js

@@ -0,0 +1,113 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+import { isExtensionAvailable, isNodeTypeSelected } from "../utils/tiptap-utils";
+import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifyIcon } from "../icons";
+const TEXT_ALIGN_SHORTCUT_KEYS = {
+  left: "mod+shift+l",
+  center: "mod+shift+e",
+  right: "mod+shift+r",
+  justify: "mod+shift+j"
+};
+const textAlignIcons = {
+  left: AlignLeftIcon,
+  center: AlignCenterIcon,
+  right: AlignRightIcon,
+  justify: AlignJustifyIcon
+};
+const textAlignLabels = {
+  left: "Align left",
+  center: "Align center",
+  right: "Align right",
+  justify: "Align justify"
+};
+function canSetTextAlign(editor, align) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!isExtensionAvailable(editor, "textAlign") || isNodeTypeSelected(editor, ["image", "horizontalRule"]))
+    return false;
+  return editor.can().setTextAlign(align);
+}
+function isTextAlignActive(editor, align) {
+  if (!editor || !editor.isEditable)
+    return false;
+  return editor.isActive({ textAlign: align });
+}
+function setTextAlign(editor, align) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!canSetTextAlign(editor, align))
+    return false;
+  return editor.chain().focus().setTextAlign(align).run();
+}
+function shouldShowButton(props) {
+  const { editor, hideWhenUnavailable, align } = props;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!isExtensionAvailable(editor, "textAlign"))
+    return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canSetTextAlign(editor, align);
+  }
+  return true;
+}
+function useTextAlign(config) {
+  const { align, hideWhenUnavailable = false, onAligned } = config;
+  const isVisible = ref(true);
+  const isActive = ref(false);
+  const canAlign = ref(false);
+  const getEditor = () => {
+    const editor = config.editor;
+    return editor && "value" in editor ? editor.value : editor;
+  };
+  const updateState = () => {
+    const editor = getEditor();
+    if (!editor || !editor.isEditable) {
+      isVisible.value = false;
+      isActive.value = false;
+      canAlign.value = false;
+      return;
+    }
+    isActive.value = isTextAlignActive(editor, align);
+    canAlign.value = canSetTextAlign(editor, align);
+    isVisible.value = shouldShowButton({ editor, align, hideWhenUnavailable });
+  };
+  watch(
+    () => getEditor(),
+    (editor) => {
+      if (!editor)
+        return;
+      updateState();
+      editor.on("selectionUpdate", updateState);
+      editor.on("transaction", updateState);
+      onBeforeUnmount(() => {
+        editor.off("selectionUpdate", updateState);
+        editor.off("transaction", updateState);
+      });
+    },
+    { immediate: true }
+  );
+  const handleTextAlign = () => {
+    const editor = getEditor();
+    if (setTextAlign(editor, align)) {
+      onAligned == null ? void 0 : onAligned();
+    }
+  };
+  return {
+    isVisible,
+    isActive,
+    handleTextAlign,
+    canAlign,
+    label: textAlignLabels[align],
+    shortcutKeys: TEXT_ALIGN_SHORTCUT_KEYS[align],
+    Icon: textAlignIcons[align]
+  };
+}
+export {
+  TEXT_ALIGN_SHORTCUT_KEYS,
+  canSetTextAlign,
+  isTextAlignActive,
+  setTextAlign,
+  shouldShowButton,
+  textAlignIcons,
+  textAlignLabels,
+  useTextAlign
+};

package/es/rich-text-editor/menu-system/hooks/use-throttled-callback.d.ts

@@ -0,0 +1,8 @@
+export declare function useThrottledCallback<T extends (...args: any[]) => any>(fn: T, wait?: number, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+}): T & {
+    cancel: () => void;
+    flush: () => void;
+};
+export default useThrottledCallback;

package/es/rich-text-editor/menu-system/hooks/use-throttled-callback.js

@@ -0,0 +1,45 @@
+import { onBeforeUnmount } from "vue";
+const throttle = (fn, wait, options = { leading: false, trailing: true }) => {
+  let timeout = null;
+  let previous = 0;
+  const throttled = function(...args) {
+    const now = Date.now();
+    if (!previous && options.leading === false)
+      previous = now;
+    const remaining = wait - (now - previous);
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      fn.apply(this, args);
+    } else if (!timeout && options.trailing !== false) {
+      timeout = setTimeout(() => {
+        previous = options.leading === false ? 0 : Date.now();
+        timeout = null;
+        fn.apply(this, args);
+      }, remaining);
+    }
+  };
+  throttled.cancel = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+    previous = 0;
+  };
+  return throttled;
+};
+function useThrottledCallback(fn, wait = 250, options = { leading: false, trailing: true }) {
+  const throttled = throttle(fn, wait, options);
+  onBeforeUnmount(() => {
+    throttled.cancel();
+  });
+  return throttled;
+}
+var stdin_default = useThrottledCallback;
+export {
+  stdin_default as default,
+  useThrottledCallback
+};

package/es/rich-text-editor/menu-system/hooks/use-undo-redo.d.ts

@@ -0,0 +1,60 @@
+import type { Editor } from '@tiptap/vue-3';
+export type UndoRedoAction = 'undo' | 'redo';
+export interface UseUndoRedoConfig {
+    editor: any;
+    action: UndoRedoAction;
+    hideWhenUnavailable?: boolean;
+    onExecuted?: () => void;
+}
+export declare const UNDO_REDO_SHORTCUT_KEYS: Record<UndoRedoAction, string>;
+export declare const historyActionLabels: Record<UndoRedoAction, string>;
+export declare const historyIcons: {
+    undo: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        className: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    redo: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        className: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export declare function canExecuteUndoRedoAction(editor: Editor | null, action: UndoRedoAction): boolean;
+export declare function executeUndoRedoAction(editor: Editor | null, action: UndoRedoAction): boolean;
+export declare function useUndoRedo(config: UseUndoRedoConfig): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    handleAction: () => boolean;
+    canExecute: import("vue").Ref<boolean, boolean>;
+    label: string;
+    shortcutKeys: string;
+    Icon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        className: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};

package/es/rich-text-editor/menu-system/hooks/use-undo-redo.js

@@ -0,0 +1,96 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+import { isNodeTypeSelected } from "../utils/tiptap-utils";
+import { Undo2Icon, Redo2Icon } from "../icons";
+const UNDO_REDO_SHORTCUT_KEYS = {
+  undo: "mod+z",
+  redo: "mod+shift+z"
+};
+const historyActionLabels = {
+  undo: "Undo",
+  redo: "Redo"
+};
+const historyIcons = {
+  undo: Undo2Icon,
+  redo: Redo2Icon
+};
+function canExecuteUndoRedoAction(editor, action) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (isNodeTypeSelected(editor, ["image"]))
+    return false;
+  return action === "undo" ? editor.can().undo() : editor.can().redo();
+}
+function executeUndoRedoAction(editor, action) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!canExecuteUndoRedoAction(editor, action))
+    return false;
+  const chain = editor.chain().focus();
+  return action === "undo" ? chain.undo().run() : chain.redo().run();
+}
+function useUndoRedo(config) {
+  const { action, hideWhenUnavailable = false, onExecuted } = config;
+  const isVisible = ref(true);
+  const getEditor = () => {
+    const editor = config.editor;
+    return editor && "value" in editor ? editor.value : editor;
+  };
+  const handleUpdate = () => {
+    const editor = getEditor();
+    if (!editor || !editor.isEditable) {
+      isVisible.value = false;
+      return;
+    }
+    if (hideWhenUnavailable && !editor.isActive("code")) {
+      isVisible.value = canExecuteUndoRedoAction(editor, action);
+    } else {
+      isVisible.value = true;
+    }
+  };
+  const handleAction = () => {
+    const editor = getEditor();
+    if (!editor)
+      return false;
+    const success = executeUndoRedoAction(editor, action);
+    if (success) {
+      onExecuted == null ? void 0 : onExecuted();
+    }
+    return success;
+  };
+  const canExecute = ref(false);
+  const updateCanExecute = () => {
+    canExecute.value = canExecuteUndoRedoAction(getEditor(), action);
+  };
+  watch(
+    () => getEditor(),
+    (editor) => {
+      if (!editor)
+        return;
+      handleUpdate();
+      updateCanExecute();
+      editor.on("transaction", handleUpdate);
+      editor.on("transaction", updateCanExecute);
+      onBeforeUnmount(() => {
+        editor.off("transaction", handleUpdate);
+        editor.off("transaction", updateCanExecute);
+      });
+    },
+    { immediate: true }
+  );
+  return {
+    isVisible,
+    handleAction,
+    canExecute,
+    label: historyActionLabels[action],
+    shortcutKeys: UNDO_REDO_SHORTCUT_KEYS[action],
+    Icon: historyIcons[action]
+  };
+}
+export {
+  UNDO_REDO_SHORTCUT_KEYS,
+  canExecuteUndoRedoAction,
+  executeUndoRedoAction,
+  historyActionLabels,
+  historyIcons,
+  useUndoRedo
+};

package/es/rich-text-editor/menu-system/hooks/use-window-size.d.ts

@@ -0,0 +1,21 @@
+export interface WindowSizeState {
+    width: number;
+    height: number;
+    offsetTop: number;
+    offsetLeft: number;
+    scale: number;
+}
+export declare function useWindowSize(): WindowSizeState;
+export declare function useWindowSizeStore(): import("vue").Ref<{
+    width: number;
+    height: number;
+    offsetTop: number;
+    offsetLeft: number;
+    scale: number;
+}, WindowSizeState | {
+    width: number;
+    height: number;
+    offsetTop: number;
+    offsetLeft: number;
+    scale: number;
+}>;