@cgboiler/biz-basic 1.0.69 → 1.0.70

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

@@ -0,0 +1,70 @@
+import { type PropType } from 'vue';
+import '../styles/text-color-button.less';
+export declare const TextColorButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    textColor: {
+        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>;
+    };
+    isDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => 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;
+    };
+    textColor: {
+        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>;
+    };
+    isDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+    className: string;
+    hideWhenUnavailable: boolean;
+    isDefault: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,145 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  TextColorButton: () => TextColorButton
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_atomic = require("./_atomic.css");
+var import_vue2 = require("vue");
+var import_use_text_color = require("../hooks/use-text-color");
+var import_button = require("../primitives/button");
+var import_tiptap_utils = require("../utils/tiptap-utils");
+var import_text_color_button = require("../styles/text-color-button.css");
+const TextColorButton = (0, import_vue2.defineComponent)({
+  name: "TextColorButton",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    textColor: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    hideWhenUnavailable: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: ""
+    },
+    onApplied: {
+      type: Function
+    },
+    isDefault: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const {
+      isVisible,
+      canColor,
+      isActive
+    } = (0, import_use_text_color.useTextColor)({
+      editor: props.editor,
+      textColor: props.textColor,
+      label: props.label,
+      hideWhenUnavailable: props.hideWhenUnavailable
+    });
+    const handleClick = () => {
+      const editor = props.editor && "value" in props.editor ? props.editor.value : props.editor;
+      if (!editor || !canColor.value)
+        return;
+      if (props.isDefault) {
+        setTimeout(() => {
+          var _a;
+          editor.chain().focus().unsetColor().run();
+          (_a = props.onApplied) == null ? void 0 : _a.call(props, {
+            color: "",
+            label: props.label || "\u9ED8\u8BA4\u989C\u8272"
+          });
+        }, 0);
+      } else {
+        setTimeout(() => {
+          var _a;
+          const success = editor.chain().focus().setColor(props.textColor).run();
+          if (success) {
+            (_a = props.onApplied) == null ? void 0 : _a.call(props, {
+              color: props.textColor,
+              label: props.label
+            });
+          }
+        }, 0);
+      }
+    };
+    return () => {
+      if (!isVisible.value)
+        return null;
+      return (0, import_vue.createVNode)(import_button.Button, (0, import_vue.mergeProps)({
+        "type": "button",
+        "disabled": !canColor.value,
+        "data-style": "ghost",
+        "data-active-state": isActive.value ? "on" : "off",
+        "role": "button",
+        "tabindex": -1,
+        "aria-label": props.label,
+        "aria-pressed": isActive.value,
+        "tooltip": props.label,
+        "onClick": handleClick,
+        "class": (0, import_tiptap_utils.cn)("tiptap-text-color-button", props.className),
+        "style": __spreadProps(__spreadValues({}, attrs.style || {}), {
+          "--text-color": props.textColor
+        })
+      }, attrs), {
+        default: () => [(0, import_vue.createVNode)("div", {
+          "class": (0, import_tiptap_utils.cn)("tiptap-button-text-color", props.isDefault ? "tiptap-button-text-color--default" : ""),
+          "style": {
+            "--text-color": props.textColor
+          }
+        }, null)]
+      });
+    };
+  }
+});

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

@@ -0,0 +1,32 @@
+import { type PropType } from 'vue';
+import '../styles/text-color-popover.less';
+export declare const TextColorPopover: 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/lib/rich-text-editor/menu-system/components/text-color-popover.js

@@ -0,0 +1,146 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  TextColorPopover: () => TextColorPopover
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_atomic = require("./_atomic.css");
+var import_vue2 = require("vue");
+var import_use_text_color = require("../hooks/use-text-color");
+var import_text_color_button = require("./text-color-button");
+var import_button = require("../primitives/button");
+var import_element_plus = require("element-plus");
+var import_icons = require("../icons");
+var import_tiptap_utils = require("../utils/tiptap-utils");
+var import_text_color_popover = require("../styles/text-color-popover.css");
+const TextColorPopover = (0, import_vue2.defineComponent)({
+  name: "TextColorPopover",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    hideWhenUnavailable: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const {
+      isVisible,
+      canColor,
+      isActive,
+      label,
+      currentColor,
+      handleRemoveColor
+    } = (0, import_use_text_color.useTextColor)({
+      editor: props.editor,
+      hideWhenUnavailable: props.hideWhenUnavailable
+    });
+    const isOpen = (0, import_vue2.ref)(false);
+    const customColor = (0, import_vue2.ref)("#000000");
+    const showCustomPicker = (0, import_vue2.ref)(false);
+    const getEditor = () => {
+      const editor = props.editor;
+      return editor && "value" in editor ? editor.value : editor;
+    };
+    const handleCustomColorChange = (color) => {
+      if (!color)
+        return;
+      customColor.value = color;
+      const editor = getEditor();
+      if (editor && canColor.value) {
+        editor.chain().focus().setColor(color).run();
+      }
+    };
+    const handleCustomColorConfirm = () => {
+      isOpen.value = false;
+      showCustomPicker.value = false;
+    };
+    return () => {
+      if (!isVisible.value)
+        return null;
+      const activeColor = currentColor.value || "var(--tt-text-default)";
+      const trigger = (0, import_vue.createVNode)(import_button.Button, (0, import_vue.mergeProps)({
+        "type": "button",
+        "disabled": !canColor.value,
+        "data-style": "ghost",
+        "data-active-state": isActive.value ? "on" : "off",
+        "role": "button",
+        "tooltip": label,
+        "class": (0, import_tiptap_utils.cn)("tiptap-text-color-trigger", props.className)
+      }, attrs), {
+        default: () => [(0, import_vue.createVNode)(import_icons.TypeIcon, {
+          "class": "tiptap-button-icon"
+        }, null), (0, import_vue.createVNode)("span", {
+          "class": "tiptap-text-color-trigger-bar",
+          "style": {
+            backgroundColor: activeColor
+          }
+        }, null)]
+      });
+      return (0, import_vue.createVNode)(import_element_plus.ElPopover, {
+        "trigger": "click",
+        "width": "auto",
+        "popper-class": "tiptap-text-color-popover",
+        "visible": isOpen.value,
+        "onUpdate:visible": ($event) => isOpen.value = $event
+      }, {
+        reference: () => trigger,
+        default: () => (0, import_vue.createVNode)("div", {
+          "class": "tiptap-text-color-popover-content"
+        }, [(0, import_vue.createVNode)("div", {
+          "class": "tiptap-text-color-grid"
+        }, [import_use_text_color.TEXT_COLORS.filter((c) => !c.isDefault).map((color) => (0, import_vue.createVNode)(import_text_color_button.TextColorButton, {
+          "key": color.value,
+          "editor": props.editor,
+          "textColor": color.value,
+          "label": color.label,
+          "onApplied": () => {
+            isOpen.value = false;
+          }
+        }, null))]), (0, import_vue.createVNode)("div", {
+          "class": "tiptap-text-color-vertical-separator"
+        }, null), (0, import_vue.createVNode)("div", {
+          "class": "tiptap-text-color-actions"
+        }, [(0, import_vue.createVNode)(import_button.Button, {
+          "type": "button",
+          "data-style": "ghost",
+          "onClick": () => {
+            handleRemoveColor();
+            isOpen.value = false;
+          },
+          "tooltip": "\u79FB\u9664\u6587\u5B57\u989C\u8272",
+          "class": "tiptap-text-color-remove-button"
+        }, {
+          default: () => [(0, import_vue.createVNode)(import_icons.BanIcon, {
+            "class": "tiptap-button-icon"
+          }, null)]
+        })])])
+      });
+    };
+  }
+});

package/lib/rich-text-editor/menu-system/hooks/use-text-color.d.ts

@@ -0,0 +1,45 @@
+import type { Editor } from '@tiptap/vue-3';
+export declare const TEXT_COLORS: ({
+    label: string;
+    value: string;
+    isDefault: boolean;
+} | {
+    label: string;
+    value: string;
+    isDefault?: undefined;
+})[];
+export type TextColor = (typeof TEXT_COLORS)[number];
+export declare function canSetTextColor(editor: Editor | null): boolean;
+export declare function isTextColorActive(editor: Editor | null, color?: string): boolean;
+export declare function removeTextColor(editor: Editor | null): boolean;
+export declare function useTextColor(config: {
+    editor: any;
+    textColor?: string;
+    label?: string;
+    hideWhenUnavailable?: boolean;
+    onApplied?: (params: {
+        color: string;
+        label: string;
+    }) => void;
+}): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    isActive: import("vue").Ref<boolean, boolean>;
+    canColor: import("vue").Ref<boolean, boolean>;
+    currentColor: import("vue").Ref<string, string>;
+    handleSetColor: (color: string, colorLabel: string) => void;
+    handleRemoveColor: () => void;
+    label: string;
+    Icon: import("vue").Raw<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/lib/rich-text-editor/menu-system/hooks/use-text-color.js

@@ -0,0 +1,171 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  TEXT_COLORS: () => TEXT_COLORS,
+  canSetTextColor: () => canSetTextColor,
+  isTextColorActive: () => isTextColorActive,
+  removeTextColor: () => removeTextColor,
+  useTextColor: () => useTextColor
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_tiptap_utils = require("../utils/tiptap-utils");
+var import_icons = require("../icons");
+const TEXT_COLORS = [
+  {
+    label: "\u9ED8\u8BA4\u989C\u8272",
+    value: "var(--tt-text-default)",
+    isDefault: true
+  },
+  {
+    label: "\u7EA2\u8272",
+    value: "var(--tt-color-text-red)"
+  },
+  {
+    label: "\u9ED8\u8BA4\u989C\u8272",
+    value: "var(--tt-text-default)"
+  },
+  {
+    label: "\u7070\u8272",
+    value: "var(--tt-color-text-gray)"
+  },
+  {
+    label: "\u68D5\u8272",
+    value: "var(--tt-color-text-brown)"
+  },
+  {
+    label: "\u6A59\u8272",
+    value: "var(--tt-color-text-orange)"
+  },
+  {
+    label: "\u9EC4\u8272",
+    value: "var(--tt-color-text-yellow)"
+  },
+  {
+    label: "\u7EFF\u8272",
+    value: "var(--tt-color-text-green)"
+  },
+  {
+    label: "\u84DD\u8272",
+    value: "var(--tt-color-text-blue)"
+  },
+  {
+    label: "\u7D2B\u8272",
+    value: "var(--tt-color-text-purple)"
+  },
+  {
+    label: "\u7C89\u8272",
+    value: "var(--tt-color-text-pink)"
+  }
+];
+function canSetTextColor(editor) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if ((0, import_tiptap_utils.isNodeTypeSelected)(editor, ["image"]))
+    return false;
+  return editor.can().setMark("textStyle");
+}
+function isTextColorActive(editor, color) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (color) {
+    return editor.isActive("textStyle", { color });
+  }
+  return editor.isActive("textStyle");
+}
+function removeTextColor(editor) {
+  if (!editor || !editor.isEditable)
+    return false;
+  return editor.chain().focus().unsetColor().run();
+}
+function useTextColor(config) {
+  const { textColor, label, hideWhenUnavailable = false, onApplied } = config;
+  const isVisible = (0, import_vue.ref)(true);
+  const isActive = (0, import_vue.ref)(false);
+  const canColor = (0, import_vue.ref)(false);
+  const currentColor = (0, import_vue.ref)("");
+  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;
+      canColor.value = false;
+      currentColor.value = "";
+      return;
+    }
+    isActive.value = isTextColorActive(editor, textColor);
+    canColor.value = canSetTextColor(editor);
+    if (!(0, import_tiptap_utils.isMarkInSchema)("textStyle", editor)) {
+      isVisible.value = false;
+    } else if (hideWhenUnavailable) {
+      isVisible.value = canColor.value;
+    } else {
+      isVisible.value = true;
+    }
+    const attrs = editor.getAttributes("textStyle");
+    currentColor.value = (attrs == null ? void 0 : attrs.color) || "";
+  };
+  (0, import_vue.watch)(
+    () => getEditor(),
+    (editor) => {
+      if (!editor)
+        return;
+      updateState();
+      editor.on("selectionUpdate", updateState);
+      editor.on("transaction", updateState);
+      (0, import_vue.onBeforeUnmount)(() => {
+        editor.off("selectionUpdate", updateState);
+        editor.off("transaction", updateState);
+      });
+    },
+    { immediate: true }
+  );
+  const handleSetColor = (color, colorLabel) => {
+    const editor = getEditor();
+    if (!editor || !canColor.value)
+      return;
+    setTimeout(() => {
+      const success = editor.chain().focus().setColor(color).run();
+      if (success) {
+        onApplied == null ? void 0 : onApplied({ color, label: colorLabel });
+      }
+    }, 0);
+  };
+  const handleRemoveColor = () => {
+    const editor = getEditor();
+    const success = removeTextColor(editor);
+    if (success) {
+      onApplied == null ? void 0 : onApplied({ color: "", label: "\u79FB\u9664\u6587\u5B57\u989C\u8272" });
+    }
+  };
+  return {
+    isVisible,
+    isActive,
+    canColor,
+    currentColor,
+    handleSetColor,
+    handleRemoveColor,
+    label: label || "\u6587\u5B57\u989C\u8272",
+    Icon: (0, import_vue.markRaw)(import_icons.TypeIcon)
+  };
+}

package/lib/rich-text-editor/menu-system/icons/index.d.ts

@@ -557,3 +557,16 @@ export declare const TableIcon: import("vue").DefineComponent<import("vue").Extr
 }>> & Readonly<{}>, {
     className: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const TypeIcon: 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/lib/rich-text-editor/menu-system/icons/index.js

@@ -58,6 +58,7 @@ __export(stdin_exports, {
   SuperscriptIcon: () => SuperscriptIcon,
   TableIcon: () => TableIcon,
   TrashIcon: () => TrashIcon,
+  TypeIcon: () => TypeIcon,
   UnderlineIcon: () => UnderlineIcon,
   Undo2Icon: () => Undo2Icon
 });
@@ -530,3 +531,24 @@ const TableIcon = createIcon("TableIcon", (0, import_vue.createVNode)(import_vue
   "stroke": "currentColor",
   "stroke-width": "2"
 }, null)]));
+const TypeIcon = createIcon("TypeIcon", (0, import_vue.createVNode)(import_vue.Fragment, null, [(0, import_vue.createVNode)("path", {
+  "d": "M4 20L9.5 4H14.5L20 20",
+  "stroke": "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "fill": "none"
+}, null), (0, import_vue.createVNode)("path", {
+  "d": "M6.5 14H17.5",
+  "stroke": "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "fill": "none"
+}, null), (0, import_vue.createVNode)("rect", {
+  "x": "3",
+  "y": "21",
+  "width": "18",
+  "height": "2.5",
+  "rx": "1.25",
+  "fill": "currentColor"
+}, null)]));