@opentiny/vue-renderless 3.13.1 → 3.14.0

package/rich-text/vue.js

@@ -0,0 +1,102 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  initContent,
+  initQuill,
+  setToolbarTips,
+  setPlaceholder,
+  getFileUploadUrl,
+  selectionChange,
+  textChange,
+  mounted,
+  beforeUnmount,
+  maxLength,
+  handlePaste,
+  isDisplayOnly
+} from "./index";
+const api = [
+  "state",
+  "initContent",
+  "initQuill",
+  "setToolbarTips",
+  "setPlaceholder",
+  "selectionChange",
+  "textChange",
+  "handlePaste"
+];
+const initState = ({ reactive, props, computed, api: api2 }) => {
+  const state = reactive({
+    innerOptions: {},
+    innerContent: "",
+    fileUploadUrl: props.fileUpload && props.fileUpload.url || "",
+    content: props.modelValue || props.content,
+    maxLength: computed(() => api2.maxLength()),
+    pasteCanceled: false,
+    isDisplayOnly: computed(() => api2.isDisplayOnly())
+  });
+  return state;
+};
+const initApi = (args) => {
+  let { api: api2, props, state, emit, service, nextTick, t, vm, i18n, watch, constants, parent } = args;
+  let { Quill, ImageDrop, ImageUpload, FileUpload, Modal } = args;
+  Object.assign(api2, {
+    state,
+    initContent: initContent({ state, props, nextTick }),
+    initQuill: initQuill({ service, emit, props, api: api2, state, vm, ImageDrop, FileUpload, ImageUpload, Quill }),
+    setToolbarTips: setToolbarTips({ t, vm }),
+    setPlaceholder: setPlaceholder({ state, props }),
+    getFileUploadUrl: getFileUploadUrl({ service }),
+    selectionChange: selectionChange({ emit, state }),
+    textChange: textChange({ emit, vm, state, Modal, t }),
+    mounted: mounted({ api: api2, props, state, i18n, watch }),
+    beforeUnmount: beforeUnmount({ api: api2, state }),
+    maxLength: maxLength({ props, constants }),
+    handlePaste: handlePaste({ state }),
+    isDisplayOnly: isDisplayOnly({ state, props, parent, nextTick })
+  });
+};
+const initWatch = ({ watch, props, api: api2, state }) => {
+  watch(
+    () => props.modelValue,
+    (val) => {
+      state.content = val;
+      api2.initContent();
+    }
+  );
+  watch(
+    () => props.content,
+    (val) => {
+      state.content = val;
+      api2.initContent();
+    }
+  );
+  watch(
+    () => props.disabled,
+    (param) => {
+      if (state.quill) {
+        state.quill.enable(!param);
+      }
+    }
+  );
+  watch(
+    () => props.options.placeholder,
+    () => {
+      api2.setPlaceholder();
+    }
+  );
+};
+const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed, inject }, { service, emit, t, nextTick, vm, i18n, constants, parent }, { Quill, ImageDrop, ImageUpload, FileUpload, Modal }) => {
+  parent.auiForm = parent.auiForm || inject("form", null);
+  const api2 = {};
+  const state = initState({ reactive, props, computed, api: api2, parent });
+  const args = { api: api2, props, state, emit, service, nextTick, t, vm, i18n, watch, constants, parent };
+  Object.assign(args, { Quill, ImageDrop, ImageUpload, FileUpload, Modal });
+  initApi(args);
+  initWatch({ watch, props, api: api2, state });
+  onMounted(api2.mounted);
+  onBeforeUnmount(api2.beforeUnmount);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/{rich-text-edtior → rich-text-editor}/index.js

@@ -58,7 +58,7 @@ const tableMouseMove = (state, vm) => (e) => {
   state.flagX = Math.ceil((e.x - x) / 30);
   state.flagY = Math.ceil((e.y - y) / 30);
 };
-const tableChoose = (state, vm) => (e) => {
+const tableChoose = (state) => () => {
   if (state.flagX && state.flagY) {
     state.editor.chain().focus().insertTable({ rows: state.flagY, cols: state.flagX, withHeaderRow: true }).run();
   }
@@ -70,7 +70,7 @@ const toggleTablePanel = (state) => () => {
 const closeTablePanel = (state) => () => {
   state.isShowTable && (state.isShowTable = false);
 };
-const shouldShow = ({ editor, view, state, oldState, from, to }) => {
+const shouldShow = ({ editor }) => {
   return editor.isActive("table");
 };
 const eventMap = /* @__PURE__ */ new Map();

package/{rich-text-edtior → rich-text-editor}/vue.js

@@ -27,7 +27,7 @@ const api = [
   "eventClick",
   "Active"
 ];
-const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref, markRaw }, { vm, emit, parent }, {
+const renderless = (props, { computed, onBeforeUnmount, reactive }, { vm, emit }, {
   Editor,
   StarterKit,
   Table,
@@ -235,10 +235,7 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref
       emit("create", { editor });
     },
     onUpdate({ editor }) {
-      const json = editor.getJSON();
       const html = editor.getHTML();
-      const text = editor.getText();
-      const lineText = editor.getText({ blockSeparator: "--" });
       emit("update", { editor });
       emit("update:modelValue", html);
     },
@@ -260,7 +257,7 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref
   }, props.options);
   let options = Object.assign(defaultOptions, props.options);
   const state = reactive({
-    editor: markRaw(new Editor(options)),
+    editor: new Editor(options),
     toolbar: computed(() => props.customToolBar.length ? props.customToolBar : defaultToolBar),
     // table 变量
     isShowTable: false,

package/scrollbar/index.js

@@ -37,10 +37,10 @@ const clickThumbHandler = ({ api, state }) => (event) => {
   api.startDrag(event);
   state[state.bar.axis] = event.currentTarget[state.bar.offset] - (event[state.bar.client] - event.currentTarget.getBoundingClientRect()[state.bar.direction]);
 };
-const clickTrackHandler = ({ refs, state }) => (event) => {
+const clickTrackHandler = ({ vm, state }) => (event) => {
   const offset = Math.abs(event.target.getBoundingClientRect()[state.bar.direction] - event[state.bar.client]);
-  const thumbHalf = refs.thumb[state.bar.offset] / 2;
-  const thumbPositionPercentage = (offset - thumbHalf) * 100 / refs.bar[state.bar.offset];
+  const thumbHalf = vm.$refs.thumb[state.bar.offset] / 2;
+  const thumbPositionPercentage = (offset - thumbHalf) * 100 / vm.$refs.bar[state.bar.offset];
   state.wrap[state.bar.scroll] = thumbPositionPercentage * state.wrap[state.bar.scrollSize] / 100;
 };
 const startDrag = ({ api, on, state }) => (event) => {
@@ -50,7 +50,7 @@ const startDrag = ({ api, on, state }) => (event) => {
   on(document, "mouseup", api.mouseUpDocumentHandler);
   document.onselectstart = () => false;
 };
-const mouseMoveDocumentHandler = ({ refs, state }) => (event) => {
+const mouseMoveDocumentHandler = ({ vm, state }) => (event) => {
   if (state.cursorDown === false) {
     return;
   }
@@ -58,9 +58,9 @@ const mouseMoveDocumentHandler = ({ refs, state }) => (event) => {
   if (!prevPage) {
     return;
   }
-  const offset = (refs.bar.getBoundingClientRect()[state.bar.direction] - event[state.bar.client]) * -1;
-  const thumbClickPosition = refs.thumb[state.bar.offset] - prevPage;
-  const thumbPositionPercentage = (offset - thumbClickPosition) * 100 / refs.bar[state.bar.offset];
+  const offset = (vm.$refs.bar.getBoundingClientRect()[state.bar.direction] - event[state.bar.client]) * -1;
+  const thumbClickPosition = vm.$refs.thumb[state.bar.offset] - prevPage;
+  const thumbPositionPercentage = (offset - thumbClickPosition) * 100 / vm.$refs.bar[state.bar.offset];
   state.wrap[state.bar.scroll] = thumbPositionPercentage * state.wrap[state.bar.scrollSize] / 100;
 };
 const mouseUpDocumentHandler = ({ api, off, state }) => () => {
@@ -69,15 +69,15 @@ const mouseUpDocumentHandler = ({ api, off, state }) => () => {
   off(document, "mousemove", api.mouseMoveDocumentHandler);
   document.onselectstart = null;
 };
-const handleScroll = ({ refs, state, emit }) => (event) => {
-  const wrap = refs.wrap;
+const handleScroll = ({ vm, state, emit }) => (event) => {
+  const wrap = vm.$refs.wrap;
   state.moveY = wrap.scrollTop * 100 / wrap.clientHeight;
   state.moveX = wrap.scrollLeft * 100 / wrap.clientWidth;
   emit("scroll", event);
 };
-const update = ({ refs, state }) => () => {
+const update = ({ vm, state }) => () => {
   let heightPercentage, widthPercentage;
-  const wrap = refs.wrap;
+  const wrap = vm.$refs.wrap;
   if (!wrap) {
     return;
   }

package/scrollbar/vue-bar.js

@@ -18,7 +18,7 @@ const api = [
   "mouseUpDocumentHandler",
   "mouseMoveDocumentHandler"
 ];
-const renderless = (props, { computed, onUnmounted, reactive }, { refs, parent }) => {
+const renderless = (props, { computed, onUnmounted, reactive }, { vm, parent }) => {
   const state = reactive({
     bar: computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]),
     wrap: computed(() => parent.$refs.wrap)
@@ -26,8 +26,8 @@ const renderless = (props, { computed, onUnmounted, reactive }, { refs, parent }
   const api2 = {
     state,
     renderThumbStyle,
-    clickTrackHandler: clickTrackHandler({ refs, state }),
-    mouseMoveDocumentHandler: mouseMoveDocumentHandler({ refs, state })
+    clickTrackHandler: clickTrackHandler({ vm, state }),
+    mouseMoveDocumentHandler: mouseMoveDocumentHandler({ vm, state })
   };
   onUnmounted(() => off(document, "mouseup", api2.mouseUpDocumentHandler));
   return Object.assign(api2, {

package/scrollbar/vue.js

@@ -2,7 +2,7 @@ import "../chunk-G2ADBYYC.js";
 import { handleScroll, update } from "./index";
 import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
 const api = ["state", "update", "handleScroll"];
-const renderless = (props, { onBeforeUnmount, onMounted, reactive }, { refs, nextTick, emit }) => {
+const renderless = (props, { onBeforeUnmount, onMounted, reactive }, { vm, nextTick, emit }) => {
   const state = reactive({
     sizeWidth: "0",
     sizeHeight: "0",
@@ -11,21 +11,21 @@ const renderless = (props, { onBeforeUnmount, onMounted, reactive }, { refs, nex
   });
   const api2 = {
     state,
-    update: update({ refs, state }),
-    handleScroll: handleScroll({ refs, state, emit })
+    update: update({ vm, state }),
+    handleScroll: handleScroll({ vm, state, emit })
   };
   onMounted(() => {
     if (props.native) {
       return;
     }
     nextTick(api2.update);
-    !props.noresize && addResizeListener(refs.resize, api2.update);
+    !props.noresize && addResizeListener(vm.$refs.resize, api2.update);
   });
   onBeforeUnmount(() => {
     if (props.native) {
       return;
     }
-    !props.noresize && removeResizeListener(refs.resize, api2.update);
+    !props.noresize && removeResizeListener(vm.$refs.resize, api2.update);
   });
   return api2;
 };

package/search/index.js

@@ -10,12 +10,12 @@ const handleChange = ({ emit, state }) => (event) => {
   const value = event.target.value;
   emit("change", state.searchValue, value);
 };
-const handleInput = ({ api, state }) => (event) => {
-  const value = event.target.value;
+const handleInput = ({ api, props, state }) => (event) => {
+  const value = event.target ? event.target.value : event;
   api.emitInput(value, state.searchValue);
 };
-const showSelector = ({ refs, state }) => () => {
-  refs.selector.style.zIndex = PopupManager.nextZIndex();
+const showSelector = ({ vm, state }) => () => {
+  vm.$refs.selector.style.zIndex = PopupManager.nextZIndex();
   state.show = true;
 };
 const changeKey = ({ emit, state }) => (key) => {
@@ -31,10 +31,10 @@ const searchClick = ({ emit, props, state }) => (event) => {
     emit("search", state.searchValue, state.currentValue);
   }
 };
-const searchEnterKey = ({ api, props, refs, nextTick }) => (event) => {
+const searchEnterKey = ({ api, props, vm, nextTick }) => (event) => {
   if (props.isEnterSearch) {
     api.searchClick(event);
-    nextTick(() => refs.input.blur());
+    nextTick(() => vm.$refs.input.blur());
   }
 };
 const clickOutside = ({ parent, props, state }) => (event) => {
@@ -71,13 +71,13 @@ const mounted = ({ api }) => () => {
 const beforeDestroy = ({ api }) => () => {
   off(document.body, "click", api.clickOutside);
 };
-const clear = ({ api, emit, refs, state }) => (event) => {
+const clear = ({ api, emit, vm, state }) => (event) => {
   event.preventDefault();
   state.currentValue = "";
-  refs.input.focus();
+  vm.$refs.input.focus();
   state.focus = true;
-  emit("change", [], "");
   api.emitInput("", state.searchValue);
+  emit("change", [], "");
   emit("clear");
 };
 export {

package/search/vue.js

@@ -51,7 +51,7 @@ const useFormatSearchTypes = ({ computed, props, reactive, toRefs, watch }) => {
     state: toRefs(state)
   };
 };
-const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, toRefs, watch }, { refs, parent, emit, nextTick }) => {
+const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, toRefs, watch }, { vm, parent, emit, nextTick }) => {
   const formatSearchTypes2 = useFormatSearchTypes({
     computed,
     props,
@@ -66,21 +66,23 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, toR
     collapse: props.mini,
     currentValue: props.modelValue
   }, formatSearchTypes2.state), {
-    showClear: computed(() => props.clearable && (state.focus || state.hovering) && state.currentValue)
+    showClear: computed(() => props.clearable && (state.focus || state.hovering) && state.currentValue),
+    formItemSize: computed(() => (parent.formItem || {}).formItemSize),
+    searchSize: computed(() => props.size || state.formItemSize)
   }));
   const api2 = __spreadValues({
     state,
     changeKey: changeKey({ state, emit }),
     handleChange: handleChange({ emit, state }),
-    showSelector: showSelector({ refs, state }),
+    showSelector: showSelector({ vm, state }),
     searchClick: searchClick({ emit, props, state }),
     clickOutside: clickOutside({ parent, props, state }),
     emitInput: emitInput({ emit })
   }, formatSearchTypes2.api);
   Object.assign(api2, {
-    clear: clear({ api: api2, emit, refs, state }),
-    handleInput: handleInput({ api: api2, state }),
-    searchEnterKey: searchEnterKey({ api: api2, props, refs, nextTick })
+    clear: clear({ api: api2, emit, vm, state }),
+    handleInput: handleInput({ api: api2, props, state }),
+    searchEnterKey: searchEnterKey({ api: api2, props, vm, nextTick })
   });
   onMounted(mounted({ api: api2 }));
   onBeforeUnmount(beforeDestroy({ api: api2 }));