@cgboiler/biz-basic 1.0.53 → 1.0.55

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

@@ -0,0 +1,93 @@
+import { type PropType } from 'vue';
+import '../styles/image-upload-node.less';
+export declare const ImageUploadNodeView: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<import("@tiptap/core").NodeViewProps["editor"]>;
+        required: true;
+    };
+    node: {
+        type: PropType<import("@tiptap/core").NodeViewProps["node"]>;
+        required: true;
+    };
+    decorations: {
+        type: PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
+        required: true;
+    };
+    selected: {
+        type: PropType<import("@tiptap/core").NodeViewProps["selected"]>;
+        required: true;
+    };
+    extension: {
+        type: PropType<import("@tiptap/core").NodeViewProps["extension"]>;
+        required: true;
+    };
+    getPos: {
+        type: PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
+        required: true;
+    };
+    updateAttributes: {
+        type: PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
+        required: true;
+    };
+    deleteNode: {
+        type: PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
+        required: true;
+    };
+    view: {
+        type: PropType<import("@tiptap/core").NodeViewProps["view"]>;
+        required: true;
+    };
+    innerDecorations: {
+        type: PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<import("@tiptap/core").NodeViewProps["editor"]>;
+        required: true;
+    };
+    node: {
+        type: PropType<import("@tiptap/core").NodeViewProps["node"]>;
+        required: true;
+    };
+    decorations: {
+        type: PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
+        required: true;
+    };
+    selected: {
+        type: PropType<import("@tiptap/core").NodeViewProps["selected"]>;
+        required: true;
+    };
+    extension: {
+        type: PropType<import("@tiptap/core").NodeViewProps["extension"]>;
+        required: true;
+    };
+    getPos: {
+        type: PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
+        required: true;
+    };
+    updateAttributes: {
+        type: PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
+        required: true;
+    };
+    deleteNode: {
+        type: PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
+        required: true;
+    };
+    view: {
+        type: PropType<import("@tiptap/core").NodeViewProps["view"]>;
+        required: true;
+    };
+    innerDecorations: {
+        type: PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,299 @@
+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));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment } from "vue";
+import "./_atomic.css";
+import { defineComponent, ref } from "vue";
+import { nodeViewProps, NodeViewWrapper } from "@tiptap/vue-3";
+import { Button } from "../primitives/button";
+import { CloseIcon, CloudUploadIcon, FileIcon, FileCornerIcon } from "../icons";
+import { focusNextNode, isValidPosition } from "../utils/tiptap-utils";
+import { useFileUpload } from "../hooks/use-file-upload";
+import "../styles/image-upload-node.css";
+const ImageUploadDragArea = defineComponent({
+  name: "ImageUploadDragArea",
+  props: {
+    onFile: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    const isDragOver = ref(false);
+    const isDragActive = ref(false);
+    const handleDragEnter = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      isDragActive.value = true;
+    };
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        isDragActive.value = false;
+        isDragOver.value = false;
+      }
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      isDragOver.value = true;
+    };
+    const handleDrop = (e) => {
+      var _a;
+      e.preventDefault();
+      e.stopPropagation();
+      isDragActive.value = false;
+      isDragOver.value = false;
+      const files = Array.from(((_a = e.dataTransfer) == null ? void 0 : _a.files) || []);
+      if (files.length > 0) {
+        props.onFile(files);
+      }
+    };
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "class": `tiptap-image-upload-drag-area ${isDragActive.value ? "drag-active" : ""} ${isDragOver.value ? "drag-over" : ""}`,
+        "onDragenter": handleDragEnter,
+        "onDragleave": handleDragLeave,
+        "onDragover": handleDragOver,
+        "onDrop": handleDrop
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+const ImageUploadPreview = defineComponent({
+  name: "ImageUploadPreview",
+  props: {
+    fileItem: {
+      type: Object,
+      required: true
+    },
+    onRemove: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props) {
+    const formatFileSize = (bytes) => {
+      if (bytes === 0)
+        return "0 Bytes";
+      const k = 1024;
+      const sizes = ["Bytes", "KB", "MB", "GB"];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+    };
+    return () => _createVNode("div", {
+      "class": "tiptap-image-upload-preview"
+    }, [props.fileItem.status === "uploading" && _createVNode("div", {
+      "class": "tiptap-image-upload-progress",
+      "style": {
+        width: `${props.fileItem.progress}%`
+      }
+    }, null), _createVNode("div", {
+      "class": "tiptap-image-upload-preview-content"
+    }, [_createVNode("div", {
+      "class": "tiptap-image-upload-file-info"
+    }, [_createVNode("div", {
+      "class": "tiptap-image-upload-file-icon"
+    }, [_createVNode(CloudUploadIcon, null, null)]), _createVNode("div", {
+      "class": "tiptap-image-upload-details"
+    }, [_createVNode("span", {
+      "class": "tiptap-image-upload-text"
+    }, [props.fileItem.file.name]), _createVNode("span", {
+      "class": "tiptap-image-upload-subtext"
+    }, [formatFileSize(props.fileItem.file.size)])])]), _createVNode("div", {
+      "class": "tiptap-image-upload-actions"
+    }, [props.fileItem.status === "uploading" && _createVNode("span", {
+      "class": "tiptap-image-upload-progress-text"
+    }, [props.fileItem.progress, _createTextVNode("%")]), _createVNode(Button, {
+      "type": "button",
+      "data-style": "ghost",
+      "onClick": (e) => {
+        e.stopPropagation();
+        props.onRemove();
+      }
+    }, {
+      default: () => [_createVNode(CloseIcon, {
+        "class": "tiptap-button-icon"
+      }, null)]
+    })])])]);
+  }
+});
+const DropZoneContent = defineComponent({
+  name: "DropZoneContent",
+  props: {
+    maxSize: {
+      type: Number,
+      required: true
+    },
+    limit: {
+      type: Number,
+      required: true
+    }
+  },
+  render() {
+    return _createVNode(_Fragment, null, [_createVNode("div", {
+      "class": "tiptap-image-upload-dropzone"
+    }, [_createVNode(FileIcon, null, null), _createVNode(FileCornerIcon, null, null), _createVNode("div", {
+      "class": "tiptap-image-upload-icon-container"
+    }, [_createVNode(CloudUploadIcon, null, null)])]), _createVNode("div", {
+      "class": "tiptap-image-upload-content"
+    }, [_createVNode("span", {
+      "class": "tiptap-image-upload-text"
+    }, [_createVNode("em", null, [_createTextVNode("Click to upload")]), _createTextVNode(" or drag and drop")]), _createVNode("span", {
+      "class": "tiptap-image-upload-subtext"
+    }, [_createTextVNode("Maximum "), this.limit, _createTextVNode(" file"), this.limit === 1 ? "" : "s", _createTextVNode(", "), this.maxSize / 1024 / 1024, _createTextVNode("MB each.")])])]);
+  }
+});
+const ImageUploadNodeView = defineComponent({
+  name: "ImageUploadNodeView",
+  props: nodeViewProps,
+  setup(props) {
+    const {
+      accept,
+      limit,
+      maxSize
+    } = props.node.attrs;
+    const inputRef = ref();
+    const extension = props.extension;
+    const uploadOptions = {
+      maxSize,
+      limit,
+      accept,
+      upload: extension.options.upload,
+      onSuccess: extension.options.onSuccess,
+      onError: extension.options.onError
+    };
+    const {
+      fileItems,
+      uploadFiles,
+      removeFileItem,
+      clearAllFiles
+    } = useFileUpload(uploadOptions);
+    const handleUpload = (files) => __async(this, null, function* () {
+      const urls = yield uploadFiles(files);
+      if (urls.length > 0) {
+        const pos = props.getPos();
+        if (isValidPosition(pos)) {
+          const imageNodes = urls.map((url, index) => {
+            var _a;
+            const filename = ((_a = files[index]) == null ? void 0 : _a.name.replace(/\.[^/.]+$/, "")) || "unknown";
+            return {
+              type: extension.options.type,
+              attrs: __spreadProps(__spreadValues({}, extension.options), {
+                src: url,
+                alt: filename,
+                title: filename
+              })
+            };
+          });
+          props.editor.chain().focus().deleteRange({
+            from: pos,
+            to: pos + props.node.nodeSize
+          }).insertContentAt(pos, imageNodes).run();
+          focusNextNode(props.editor);
+        }
+      }
+    });
+    const handleChange = (e) => {
+      var _a, _b;
+      const target = e.target;
+      const files = target.files;
+      if (!files || files.length === 0) {
+        (_b = (_a = extension.options).onError) == null ? void 0 : _b.call(_a, new Error("No file selected"));
+        return;
+      }
+      handleUpload(Array.from(files));
+    };
+    const handleClick = () => {
+      if (inputRef.value && fileItems.value.length === 0) {
+        inputRef.value.value = "";
+        inputRef.value.click();
+      }
+    };
+    return () => {
+      const hasFiles = fileItems.value.length > 0;
+      return _createVNode(NodeViewWrapper, {
+        "class": "tiptap-image-upload",
+        "tabindex": 0,
+        "onClick": handleClick
+      }, {
+        default: () => [!hasFiles && _createVNode(ImageUploadDragArea, {
+          "onFile": handleUpload
+        }, {
+          default: () => [_createVNode(DropZoneContent, {
+            "maxSize": maxSize,
+            "limit": limit
+          }, null)]
+        }), hasFiles && _createVNode("div", {
+          "class": "tiptap-image-upload-previews"
+        }, [fileItems.value.length > 1 && _createVNode("div", {
+          "class": "tiptap-image-upload-header"
+        }, [_createVNode("span", null, [_createTextVNode("Uploading "), fileItems.value.length, _createTextVNode(" files")]), _createVNode(Button, {
+          "type": "button",
+          "data-style": "ghost",
+          "onClick": (e) => {
+            e.stopPropagation();
+            clearAllFiles();
+          }
+        }, {
+          default: () => [_createTextVNode("Clear All")]
+        })]), fileItems.value.map((fileItem) => _createVNode(ImageUploadPreview, {
+          "key": fileItem.id,
+          "fileItem": fileItem,
+          "onRemove": () => removeFileItem(fileItem.id)
+        }, null))]), _createVNode("input", {
+          "ref": inputRef,
+          "name": "file",
+          "accept": accept,
+          "type": "file",
+          "multiple": limit > 1,
+          "onChange": handleChange,
+          "onClick": (e) => e.stopPropagation()
+        }, null)]
+      });
+    };
+  }
+});
+export {
+  ImageUploadNodeView
+};

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

@@ -0,0 +1,32 @@
+import { type PropType } from 'vue';
+import '../styles/link-popover.less';
+export declare const LinkPopover: 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/link-popover.js

@@ -0,0 +1,127 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
+import "./_atomic.css";
+import { defineComponent, ref, watch } from "vue";
+import { useLinkPopover } from "../hooks/use-link-popover";
+import { Button } from "../primitives/button";
+import { cn } from "../utils/tiptap-utils";
+import { ElPopover, ElInput } from "element-plus";
+import { LinkIcon, TrashIcon, ExternalLinkIcon, CornerDownLeftIcon } from "../icons";
+import "../styles/link-popover.css";
+const LinkPopover = defineComponent({
+  name: "LinkPopover",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    hideWhenUnavailable: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const {
+      isVisible,
+      linkUrl,
+      inNewTab,
+      handleSetLink
+    } = useLinkPopover({
+      editor: props.editor
+    });
+    const tempUrl = ref("");
+    const tempNewTab = ref(false);
+    watch(isVisible, (val) => {
+      if (val) {
+        tempUrl.value = linkUrl.value;
+        tempNewTab.value = inNewTab.value;
+      }
+    });
+    const onApply = () => {
+      handleSetLink(tempUrl.value, tempNewTab.value);
+    };
+    const onRemove = () => {
+      handleSetLink("", false);
+    };
+    const onOpenLink = () => {
+      if (linkUrl.value) {
+        window.open(linkUrl.value, "_blank");
+      }
+    };
+    return () => {
+      if (!isVisible.value)
+        return null;
+      const trigger = _createVNode(Button, _mergeProps({
+        "type": "button",
+        "data-style": "ghost",
+        "data-active-state": linkUrl.value ? "on" : "off",
+        "role": "button",
+        "tooltip": "Link",
+        "class": cn(props.className)
+      }, attrs), {
+        default: () => [_createVNode(LinkIcon, {
+          "class": "tiptap-button-icon"
+        }, null)]
+      });
+      return _createVNode(ElPopover, {
+        "trigger": "click",
+        "width": "auto",
+        "popper-class": "tiptap-link-popover"
+      }, {
+        reference: () => trigger,
+        default: () => _createVNode("div", {
+          "class": "tiptap-link-popover-content"
+        }, [_createVNode("div", {
+          "class": "tiptap-link-popover-row"
+        }, [_createVNode(ElInput, {
+          "modelValue": tempUrl.value,
+          "onUpdate:modelValue": ($event) => tempUrl.value = $event,
+          "placeholder": "Paste a link...",
+          "size": "small",
+          "style": "width: 180px;",
+          "onKeydown": (e) => e.key === "Enter" && onApply()
+        }, null), _createVNode(Button, {
+          "type": "button",
+          "data-style": "ghost",
+          "onClick": onApply,
+          "tooltip": "Apply",
+          "data-size": "small"
+        }, {
+          default: () => [_createVNode(CornerDownLeftIcon, {
+            "class": "tiptap-button-icon"
+          }, null)]
+        }), linkUrl.value && _createVNode(_Fragment, null, [_createVNode("div", {
+          "class": "tiptap-link-popover-vertical-separator"
+        }, null), _createVNode(Button, {
+          "type": "button",
+          "data-style": "ghost",
+          "onClick": onOpenLink,
+          "tooltip": "Open in new window",
+          "data-size": "small"
+        }, {
+          default: () => [_createVNode(ExternalLinkIcon, {
+            "class": "tiptap-button-icon"
+          }, null)]
+        }), _createVNode(Button, {
+          "type": "button",
+          "data-style": "ghost",
+          "onClick": onRemove,
+          "tooltip": "Remove",
+          "data-size": "small"
+        }, {
+          default: () => [_createVNode(TrashIcon, {
+            "class": "tiptap-button-icon"
+          }, null)]
+        })])])])
+      });
+    };
+  }
+});
+export {
+  LinkPopover
+};

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

@@ -0,0 +1,40 @@
+import { type PropType } from 'vue';
+import { type ListType } from '../hooks/use-list';
+export declare const ListButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    type: {
+        type: PropType<ListType>;
+        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;
+    };
+    type: {
+        type: PropType<ListType>;
+        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/list-button.js

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