cosey 0.9.4 → 0.10.0

package/components/editor/contents/resize.js

@@ -0,0 +1,133 @@
+import { defineComponent, useTemplateRef, ref, watch, createVNode, withDirectives, vShow } from 'vue';
+import { useZIndex } from 'element-plus';
+import stdin_default$1 from './resize.style.js';
+import { isNumber } from '../../../utils/is.js';
+import { useComponentConfig } from '../../config-provider/config-provider.api.js';
+
+const onDrag = (downRect, currRect, options) => {
+  const {
+    x,
+    y
+  } = currRect;
+  const aspectScale = downRect.width / downRect.height;
+  let width = 0;
+  switch (options.position) {
+    case "nw":
+    case "sw":
+      width = downRect.x + downRect.width - options.x;
+      break;
+    case "ne":
+    case "se":
+      width = options.x - downRect.x;
+      break;
+  }
+  if (width < options.min) {
+    width = options.min;
+  } else if (width > options.max) {
+    width = options.max;
+  }
+  const height = width / aspectScale;
+  options.cb({
+    x,
+    y,
+    width,
+    height
+  });
+};
+const corners = ["nw", "ne", "sw", "se"];
+var stdin_default = defineComponent({
+  name: "CoEditorResize",
+  props: {
+    visible: {
+      type: Boolean
+    }
+  },
+  emits: {
+    resize: event => isNumber(event.width) && isNumber(event.height)
+  },
+  setup(props, {
+    emit
+  }) {
+    const {
+      prefixCls
+    } = useComponentConfig("editor-resize", props);
+    const {
+      hashId
+    } = stdin_default$1(prefixCls);
+    const downs = {};
+    const elRef = useTemplateRef("el");
+    let downRect = null;
+    const onPointerDown = (corner, event) => {
+      downs[corner] = true;
+      const el = event.currentTarget;
+      el.setPointerCapture(event.pointerId);
+      downRect = elRef.value.getBoundingClientRect();
+    };
+    const width = ref(0);
+    const height = ref(0);
+    const onPointerMove = (corner, event) => {
+      if (downs[corner]) {
+        sizeVisible.value = true;
+        const rect = elRef.value.getBoundingClientRect();
+        sizeX.value = event.clientX;
+        sizeY.value = event.clientY;
+        onDrag(downRect, rect, {
+          position: corner,
+          x: event.clientX,
+          y: event.clientY,
+          min: 16,
+          max: Infinity,
+          cb: rect2 => {
+            emit("resize", {
+              width: width.value = ~~rect2.width,
+              height: height.value = ~~rect2.height
+            });
+          }
+        });
+      }
+    };
+    const onPointerUp = corner => {
+      downs[corner] = false;
+      sizeVisible.value = false;
+    };
+    const sizeVisible = ref(false);
+    const sizeX = ref(0);
+    const sizeY = ref(0);
+    const {
+      currentZIndex,
+      nextZIndex
+    } = useZIndex();
+    watch(sizeVisible, () => {
+      if (sizeVisible.value) {
+        nextZIndex();
+      }
+    }, {
+      immediate: true
+    });
+    return () => {
+      return createVNode("div", {
+        "ref": "el",
+        "class": [hashId.value, prefixCls.value, {
+          "is-show": props.visible
+        }]
+      }, [corners.map(corner => {
+        return createVNode("div", {
+          "key": corner,
+          "class": [`${prefixCls.value}-corner`, `${prefixCls.value}-corner-${corner}`],
+          "onPointerdown": event => onPointerDown(corner, event),
+          "onPointermove": event => onPointerMove(corner, event),
+          "onPointerup": () => onPointerUp(corner),
+          "onPointercancel": () => onPointerUp(corner)
+        }, null);
+      }), withDirectives(createVNode("div", {
+        "class": `${prefixCls.value}-size`,
+        "style": {
+          transform: `translate(${sizeX.value}px, ${sizeY.value}px)`,
+          zIndex: currentZIndex.value
+        }
+      }, [`${width.value} x ${height.value}`]), [[vShow, sizeVisible.value]])]);
+    };
+  }
+});
+
+export { stdin_default as default, onDrag };

package/components/editor/{components/resize → contents}/resize.style.d.ts

@@ -1,4 +1,4 @@
-declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string, themeManager?: import("../../../theme/theme-context").ThemeManager) => {
+declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string, themeManager?: import("../../theme/theme-context").ThemeManager) => {
     hashId: import("vue").Ref<string, string>;
 };
 export default _default;

package/components/editor/{components/resize → contents}/resize.style.js

@@ -1,14 +1,15 @@
-import { getSimpleStyleHook } from '../../../theme/getSimpleStyleHook.js';
+import { getSimpleStyleHook } from '../../theme/getSimpleStyleHook.js';
 
 var stdin_default = getSimpleStyleHook("CoEditorResize", (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {
       position: "absolute",
-      insetBlockStart: 0,
-      insetInlineStart: 0,
+      inset: 0,
+      zIndex: 1,
       display: "none",
       outline: `3px solid ${token.colorPrimaryBorder}`,
+      pointerEvents: "none",
       "&.is-show": {
         display: "block"
       },
@@ -16,7 +17,8 @@ var stdin_default = getSimpleStyleHook("CoEditorResize", (token) => {
         position: "absolute",
         width: 10,
         height: 10,
-        backgroundColor: token.colorPrimary,
+        backgroundColor: token.colorPrimaryBorderHover,
+        pointerEvents: "auto",
         "&-nw": {
           cursor: "nw-resize",
           insetBlockStart: 0,
@@ -42,39 +44,17 @@ var stdin_default = getSimpleStyleHook("CoEditorResize", (token) => {
           transform: "translate(50%, 50%)"
         }
       },
-      [`${componentCls}-align`]: {
-        position: "absolute",
-        insetBlockEnd: "100%",
-        insetInlineStart: "50%",
-        display: "flex",
-        columnGap: token.padding,
-        paddingInline: token.paddingXS,
-        paddingBlock: token.paddingXXS,
-        border: `${token.lineWidth} ${token.lineType} ${token.colorBorderSecondary}`,
-        borderRadius: token.borderRadius,
-        backgroundColor: token.colorBgElevated,
-        boxShadow: token.boxShadow,
-        transform: `translate(-50%, -4px)`
-      },
       [`${componentCls}-size`]: {
-        position: "absolute",
-        insetInlineEnd: token.sizeXXS,
-        insetBlockEnd: token.sizeXXS,
-        paddingInline: token.paddingXXS,
+        position: "fixed",
+        left: token.sizeXS,
+        top: token.sizeXS,
+        paddingInline: token.paddingSM,
+        paddingBlock: token.paddingXXS,
         fontSize: token.fontSizeSM,
         lineHeight: token.lineHeight,
-        whiteSpace: "nowrap",
-        border: `${token.lineWidth} ${token.lineType} ${token.colorBorder}`,
-        borderRadius: token.borderRadiusXS,
-        backgroundColor: token.colorBgElevated,
-        "&.is-outside": {
-          insetInlineStart: "100%",
-          insetInlineEnd: "auto",
-          insetBlockStart: "100%",
-          insetBlockEnd: "auto",
-          marginInlineStart: token.sizeXS,
-          marginBlockStart: token.sizeXS
-        }
+        borderRadius: token.borderRadius,
+        backgroundColor: token.colorText,
+        color: token.colorBgBase
       }
     }
   };

package/components/editor/contents/upload.d.ts

@@ -0,0 +1,17 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    file: {
+        type: PropType<File>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: (url: string) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    file: {
+        type: PropType<File>;
+        required: true;
+    };
+}>> & Readonly<{
+    onSuccess?: ((url: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/editor/contents/upload.js

@@ -0,0 +1,80 @@
+import { defineComponent, onBeforeUnmount, createVNode, createTextVNode, Fragment, isVNode } from 'vue';
+import { ElButton } from 'element-plus';
+import stdin_default$1 from './upload.style.js';
+import { useSingleUpload } from '../../../hooks/useSingleUpload.js';
+import { isString } from '../../../utils/is.js';
+import { useComponentConfig } from '../../config-provider/config-provider.api.js';
+import { useLocale } from '../../../hooks/useLocale.js';
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+var stdin_default = defineComponent({
+  name: "CoEditorUpload",
+  props: {
+    file: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    success: url => isString(url)
+  },
+  setup(props, {
+    emit
+  }) {
+    const {
+      prefixCls
+    } = useComponentConfig("editor-upload", props);
+    const {
+      hashId
+    } = stdin_default$1(prefixCls);
+    const {
+      t
+    } = useLocale();
+    const {
+      sent,
+      cancel,
+      status,
+      progress
+    } = useSingleUpload(() => props.file, {
+      onSuccess(url) {
+        emit("success", url);
+      }
+    });
+    const onCancel = () => {
+      cancel();
+    };
+    const onReSend = () => {
+      sent();
+    };
+    onBeforeUnmount(() => {
+      cancel();
+    });
+    sent();
+    return () => {
+      let _slot, _slot2;
+      return createVNode("div", {
+        "class": [hashId.value, prefixCls.value]
+      }, [createVNode("div", {
+        "class": `${prefixCls.value}-content`
+      }, [createVNode("div", {
+        "class": `${prefixCls.value}-progress`
+      }, [progress.value, createTextVNode("%")]), status.value === "senting" && createVNode(ElButton, {
+        "link": true,
+        "type": "primary",
+        "onClick": onCancel
+      }, _isSlot(_slot = t("co.upload.cancelUpload")) ? _slot : {
+        default: () => [_slot]
+      }), status.value === "error" && createVNode(Fragment, null, [createVNode(ElButton, {
+        "link": true,
+        "type": "primary",
+        "onClick": onReSend
+      }, _isSlot(_slot2 = t("co.upload.reUpload")) ? _slot2 : {
+        default: () => [_slot2]
+      })])])]);
+    };
+  }
+});
+
+export { stdin_default as default };

package/components/editor/contents/upload.style.d.ts

@@ -0,0 +1,4 @@
+declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string, themeManager?: import("../../theme/theme-context").ThemeManager) => {
+    hashId: import("vue").Ref<string, string>;
+};
+export default _default;

package/components/editor/contents/upload.style.js

@@ -0,0 +1,38 @@
+import { getSimpleStyleHook } from '../../theme/getSimpleStyleHook.js';
+
+var stdin_default = getSimpleStyleHook("CoEditorUpload", token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    [componentCls]: {
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      "&::after": {
+        position: "absolute",
+        inset: 0,
+        content: '""',
+        backgroundColor: token.colorBgContainer,
+        opacity: 0.8
+      },
+      [`${componentCls}-content`]: {
+        position: "relative",
+        zIndex: 1,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        lineHeight: token.lineHeight
+      },
+      [`${componentCls}-progress`]: {
+        color: token.colorTextSecondary,
+        fontSize: token.fontSize
+      }
+    }
+  };
+});
+
+export { stdin_default as default };