@cgboiler/biz-basic 1.0.53 → 1.0.55

package/es/rich-text-editor/menu-system/components/color-highlight-button.d.ts

@@ -0,0 +1,61 @@
+import { type PropType } from 'vue';
+import '../styles/color-highlight-button.less';
+export declare const ColorHighlightButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    highlightColor: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    onApplied: {
+        type: PropType<(params: {
+            color: string;
+            label: string;
+        }) => void>;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    highlightColor: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    onApplied: {
+        type: PropType<(params: {
+            color: string;
+            label: string;
+        }) => void>;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+    className: string;
+    hideWhenUnavailable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/rich-text-editor/menu-system/components/color-highlight-button.js

@@ -0,0 +1,102 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import "./_atomic.css";
+import { defineComponent } from "vue";
+import { useColorHighlight } from "../hooks/use-color-highlight";
+import { Button } from "../primitives/button";
+import { cn } from "../utils/tiptap-utils";
+import "../styles/color-highlight-button.css";
+const ColorHighlightButton = defineComponent({
+  name: "ColorHighlightButton",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    highlightColor: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    hideWhenUnavailable: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: ""
+    },
+    onApplied: {
+      type: Function
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const {
+      isVisible,
+      handleColorHighlight,
+      label,
+      canHighlight,
+      isActive,
+      Icon
+    } = useColorHighlight({
+      editor: props.editor,
+      highlightColor: props.highlightColor,
+      label: props.label || `Highlight ${props.highlightColor}`,
+      hideWhenUnavailable: props.hideWhenUnavailable,
+      onApplied: props.onApplied
+    });
+    return () => {
+      if (!isVisible.value)
+        return null;
+      return _createVNode(Button, _mergeProps({
+        "type": "button",
+        "disabled": !canHighlight.value,
+        "data-style": "ghost",
+        "data-active-state": isActive.value ? "on" : "off",
+        "role": "button",
+        "tabindex": -1,
+        "aria-label": label,
+        "aria-pressed": isActive.value,
+        "tooltip": label,
+        "onClick": handleColorHighlight,
+        "class": cn("tiptap-color-highlight-button", props.className),
+        "style": __spreadProps(__spreadValues({}, attrs.style || {}), {
+          "--highlight-color": props.highlightColor
+        })
+      }, attrs), {
+        default: () => [_createVNode("div", {
+          "class": "tiptap-button-highlight",
+          "style": {
+            "--highlight-color": props.highlightColor
+          }
+        }, null)]
+      });
+    };
+  }
+});
+export {
+  ColorHighlightButton
+};

package/es/rich-text-editor/menu-system/components/color-highlight-popover.d.ts

@@ -0,0 +1,32 @@
+import { type PropType } from 'vue';
+import '../styles/color-highlight-popover.less';
+export declare const ColorHighlightPopover: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    className: string;
+    hideWhenUnavailable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/rich-text-editor/menu-system/components/color-highlight-popover.js

@@ -0,0 +1,99 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import "./_atomic.css";
+import { defineComponent, ref } from "vue";
+import { useColorHighlight, HIGHLIGHT_COLORS } from "../hooks/use-color-highlight";
+import { ColorHighlightButton } from "./color-highlight-button";
+import { Button } from "../primitives/button";
+import { cn } from "../utils/tiptap-utils";
+import { ElPopover } from "element-plus";
+import { HighlighterIcon, BanIcon } from "../icons";
+import "../styles/color-highlight-popover.css";
+const ColorHighlightPopover = defineComponent({
+  name: "ColorHighlightPopover",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    hideWhenUnavailable: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const {
+      isVisible,
+      canHighlight,
+      isActive,
+      label,
+      handleRemoveHighlight
+    } = useColorHighlight({
+      editor: props.editor,
+      hideWhenUnavailable: props.hideWhenUnavailable
+    });
+    const isOpen = ref(false);
+    return () => {
+      if (!isVisible.value)
+        return null;
+      const trigger = _createVNode(Button, _mergeProps({
+        "type": "button",
+        "disabled": !canHighlight.value,
+        "data-style": "ghost",
+        "data-active-state": isActive.value ? "on" : "off",
+        "role": "button",
+        "tooltip": label,
+        "class": cn(props.className)
+      }, attrs), {
+        default: () => [_createVNode(HighlighterIcon, {
+          "class": "tiptap-button-icon"
+        }, null)]
+      });
+      return _createVNode(ElPopover, {
+        "trigger": "click",
+        "width": "auto",
+        "popper-class": "tiptap-color-highlight-popover",
+        "visible": isOpen.value,
+        "onUpdate:visible": ($event) => isOpen.value = $event
+      }, {
+        reference: () => trigger,
+        default: () => _createVNode("div", {
+          "class": "tiptap-color-highlight-popover-content"
+        }, [_createVNode("div", {
+          "class": "tiptap-color-highlight-grid"
+        }, [["Green", "Blue", "Red", "Purple", "Yellow"].map((name) => HIGHLIGHT_COLORS.find((c) => c.label.includes(name))).filter(Boolean).map((color) => _createVNode(ColorHighlightButton, {
+          "key": color.value,
+          "editor": props.editor,
+          "highlightColor": color.value,
+          "label": color.label,
+          "onApplied": () => {
+            isOpen.value = false;
+          }
+        }, null))]), _createVNode("div", {
+          "class": "tiptap-color-highlight-vertical-separator"
+        }, null), _createVNode(Button, {
+          "type": "button",
+          "data-style": "ghost",
+          "onClick": () => {
+            handleRemoveHighlight();
+            isOpen.value = false;
+          },
+          "tooltip": "Remove highlight",
+          "class": "tiptap-color-highlight-remove-button"
+        }, {
+          default: () => [_createVNode(BanIcon, {
+            "class": "tiptap-button-icon"
+          }, null)]
+        })])
+      });
+    };
+  }
+});
+export {
+  ColorHighlightPopover
+};

package/es/rich-text-editor/menu-system/components/heading-dropdown-menu.d.ts

@@ -0,0 +1,43 @@
+import { type PropType } from 'vue';
+import 'element-plus/es/components/dropdown/style/css';
+import 'element-plus/es/components/dropdown-menu/style/css';
+import 'element-plus/es/components/dropdown-item/style/css';
+export declare const HeadingDropdownMenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    levels: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    levels: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    className: string;
+    hideWhenUnavailable: boolean;
+    levels: number[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/rich-text-editor/menu-system/components/heading-dropdown-menu.js

@@ -0,0 +1,102 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps, createTextVNode as _createTextVNode } from "vue";
+import "./_atomic.css";
+import { defineComponent } from "vue";
+import { useHeadingDropdownMenu } from "../hooks/use-heading-dropdown-menu";
+import { toggleHeading } from "../hooks/use-heading";
+import { Button } from "../primitives/button";
+import { cn } from "../utils/tiptap-utils";
+import { ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
+import "element-plus/es/components/dropdown/style/css";
+import "element-plus/es/components/dropdown-menu/style/css";
+import "element-plus/es/components/dropdown-item/style/css";
+import { ChevronDownIcon } from "../icons";
+import { headingIcons } from "../hooks/use-heading";
+import * as Icons from "../icons";
+const HeadingDropdownMenu = defineComponent({
+  name: "HeadingDropdownMenu",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    levels: {
+      type: Array,
+      default: () => [1, 2, 3, 4]
+    },
+    hideWhenUnavailable: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const {
+      isVisible,
+      activeLevel,
+      isActive,
+      canToggle,
+      levels,
+      label,
+      Icon
+    } = useHeadingDropdownMenu({
+      editor: props.editor,
+      levels: props.levels,
+      hideWhenUnavailable: props.hideWhenUnavailable
+    });
+    const handleLevelSelect = (level) => {
+      const editor = props.editor && "value" in props.editor ? props.editor.value : props.editor;
+      toggleHeading(editor, level);
+    };
+    return () => {
+      if (!isVisible.value)
+        return null;
+      const trigger = _createVNode(Button, _mergeProps({
+        "type": "button",
+        "disabled": !canToggle.value,
+        "data-style": "ghost",
+        "data-active-state": isActive.value ? "on" : "off",
+        "data-disabled": !canToggle.value,
+        "role": "button",
+        "tooltip": label,
+        "class": cn(props.className, "tiptap-heading-trigger")
+      }, attrs), {
+        default: () => [_createVNode(Icon.value, {
+          "class": "tiptap-button-icon"
+        }, null), _createVNode(ChevronDownIcon, {
+          "class": "tiptap-button-icon-chevron"
+        }, null)]
+      });
+      return _createVNode(ElDropdown, {
+        "trigger": "click",
+        "onCommand": handleLevelSelect,
+        "popper-class": "tiptap-dropdown-menu"
+      }, {
+        default: () => trigger,
+        dropdown: () => _createVNode(ElDropdownMenu, null, {
+          default: () => [levels.map((level) => {
+            const HeadingOptionIcon = headingIcons[level] || Icons.HeadingIcon;
+            return _createVNode(ElDropdownItem, {
+              "key": level,
+              "command": level,
+              "class": cn(activeLevel.value === level && "is-active")
+            }, {
+              default: () => [_createVNode("div", {
+                "class": "tiptap-dropdown-menu-item-content"
+              }, [_createVNode("span", {
+                "class": "tiptap-dropdown-menu-item-label"
+              }, [_createTextVNode("H"), level]), _createVNode("span", null, [_createTextVNode("Heading "), level])])]
+            });
+          })]
+        })
+      });
+    };
+  }
+});
+export {
+  HeadingDropdownMenu
+};

package/es/rich-text-editor/menu-system/components/horizontal-rule-button.d.ts

@@ -0,0 +1,22 @@
+import { type PropType } from 'vue';
+export declare const HorizontalRuleButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    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<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    className: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/rich-text-editor/menu-system/components/horizontal-rule-button.js

@@ -0,0 +1,42 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import "./_atomic.css";
+import { defineComponent } from "vue";
+import { Button } from "../primitives/button";
+import { DivideIcon } from "../icons";
+import { cn } from "../utils/tiptap-utils";
+const HorizontalRuleButton = defineComponent({
+  name: "HorizontalRuleButton",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const handleHorizontalRule = () => {
+      const editor = props.editor && "value" in props.editor ? props.editor.value : props.editor;
+      editor.chain().focus().setHorizontalRule().run();
+    };
+    return () => _createVNode(Button, _mergeProps({
+      "type": "button",
+      "data-style": "ghost",
+      "role": "button",
+      "tooltip": "Horizontal Rule",
+      "onClick": handleHorizontalRule,
+      "class": cn(props.className)
+    }, attrs), {
+      default: () => [_createVNode(DivideIcon, {
+        "class": "tiptap-button-icon"
+      }, null)]
+    });
+  }
+});
+export {
+  HorizontalRuleButton
+};

package/es/rich-text-editor/menu-system/components/image-upload-button.d.ts

@@ -0,0 +1,40 @@
+import { type PropType } from 'vue';
+export declare const ImageUploadButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    text: string;
+    className: string;
+    hideWhenUnavailable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/rich-text-editor/menu-system/components/image-upload-button.js

@@ -0,0 +1,71 @@
+import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import "./_atomic.css";
+import { defineComponent } from "vue";
+import { useImageUpload } from "../hooks/use-image-upload";
+import { Button } from "../primitives/button";
+import { cn } from "../utils/tiptap-utils";
+const ImageUploadButton = defineComponent({
+  name: "ImageUploadButton",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    text: {
+      type: String,
+      default: ""
+    },
+    hideWhenUnavailable: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const {
+      isVisible,
+      handleImage,
+      label,
+      canInsert,
+      isActive,
+      Icon,
+      shortcutKeys
+    } = useImageUpload({
+      editor: props.editor,
+      hideWhenUnavailable: props.hideWhenUnavailable
+    });
+    return () => {
+      if (!isVisible.value)
+        return null;
+      return _createVNode(Button, _mergeProps({
+        "type": "button",
+        "disabled": !canInsert.value,
+        "data-style": "ghost",
+        "data-active-state": isActive.value ? "on" : "off",
+        "data-disabled": !canInsert.value,
+        "role": "button",
+        "tabindex": -1,
+        "aria-label": label,
+        "aria-pressed": isActive.value,
+        "tooltip": label,
+        "onClick": handleImage,
+        "class": cn(props.className)
+      }, attrs), {
+        default: () => [slots.default ? slots.default() : _createVNode(_Fragment, null, [_createVNode(Icon, {
+          "class": "tiptap-button-icon"
+        }, null), props.text && _createVNode("span", {
+          "class": "tiptap-button-text"
+        }, [props.text])])]
+      });
+    };
+  }
+});
+export {
+  ImageUploadButton
+};