@opentiny/vue-renderless 3.17.6 → 3.18.0-beta.1

package/common/deps/clickoutside.js

@@ -11,7 +11,10 @@ if (!isServer) {
     nodeList.filter((node) => node[nameSpace].mousedownTrigger).forEach((node) => node[nameSpace].documentHandler(event, startClick));
   });
   on(document, "mouseup", (event) => {
-    nodeList.filter((node) => !node[nameSpace].mousedownTrigger).forEach((node) => node[nameSpace].documentHandler(event, startClick));
+    nodeList.filter((node) => !node[nameSpace].mousedownTrigger).forEach((node) => {
+      var _a;
+      return node[nameSpace].documentHandler(event, ((_a = node[nameSpace]) == null ? void 0 : _a.mouseupTrigger) ? event : startClick);
+    });
     startClick = null;
   });
 }
@@ -31,20 +34,24 @@ var clickoutside_default = {
     nodeList.push(el);
     const id = seed++;
     const { modifiers, expression, value } = binding;
+    const { mousedown = false, mouseup = false } = modifiers || {};
     el[nameSpace] = {
       id,
       documentHandler: createDocumentHandler(el, binding, vnode),
       methodName: expression,
       bindingFn: value,
-      mousedownTrigger: modifiers.mousedown
+      mousedownTrigger: mousedown,
+      mouseupTrigger: mouseup
     };
   },
   update: (el, binding, vnode) => {
     const { modifiers, expression, value } = binding;
+    const { mousedown = false, mouseup = false } = modifiers || {};
     el[nameSpace].documentHandler = createDocumentHandler(el, binding, vnode);
     el[nameSpace].methodName = expression;
     el[nameSpace].bindingFn = value;
-    el[nameSpace].mousedownTrigger = modifiers.mousedown;
+    el[nameSpace].mousedownTrigger = mousedown;
+    el[nameSpace].mouseupTrigger = mouseup;
   },
   unbind: (el) => {
     if (el.nodeType !== Node.ELEMENT_NODE) {

package/common/deps/dom.js

@@ -170,6 +170,13 @@ const getScrollParent = (el, root = defaultRoot) => {
   }
   return root;
 };
+const useScrollParent = ({ onMounted, ref, watch }) => (elRef, root = defaultRoot) => {
+  const scrollParent = ref();
+  const setScrollParent = () => scrollParent.value = getScrollParent(elRef.value, root);
+  watch(elRef, setScrollParent);
+  onMounted(() => elRef.value && setScrollParent());
+  return scrollParent;
+};
 const isDisplayNone = (elm) => {
   if (isServer)
     return false;
@@ -205,5 +212,6 @@ export {
   preventDefault,
   removeClass,
   setStyle,
-  stopPropagation
+  stopPropagation,
+  useScrollParent
 };

package/common/deps/tree-model/tree-store.js

@@ -26,12 +26,23 @@ class TreeStore {
       this._initDefaultCheckedNodes();
     }
   }
+  getMappingData(data) {
+    const props = this.props || {};
+    const mapping = {};
+    for (let key in props) {
+      if (hasOwn.call(props, key)) {
+        mapping[key] = data[props[key]];
+      }
+    }
+    return __spreadValues(__spreadValues({}, data), mapping);
+  }
   filter(value) {
-    const { lazy, filterNodeMethod } = this;
+    const { lazy, filterNodeMethod, getMappingData } = this;
     const walkTree = (node) => {
       const childNodes = node.root ? node.root.childNodes : node.childNodes;
       childNodes.forEach((child) => {
-        child.visible = filterNodeMethod.call(child, value, child.data, child);
+        const mappingData = getMappingData.call(this, child.data);
+        child.visible = filterNodeMethod.call(child, value, mappingData, child);
         walkTree(child);
       });
       if (!node.visible && childNodes.length) {

package/common/deps/useRelation.js

@@ -1,19 +1,32 @@
 import "../../chunk-G2ADBYYC.js";
 import { noop } from "../function";
 import { onMountedOrActivated as createHook } from "./useEventListener";
-const useRelation = ({ getCurrentInstance, inject, markRaw, nextTick, onMounted, onActivated, onUnmounted, provide, reactive, toRef }) => ({ relationKey, relationContainer, onChange, childrenKey } = {}) => {
+const useRelation = ({
+  computed,
+  getCurrentInstance,
+  inject,
+  markRaw,
+  nextTick,
+  onMounted,
+  onActivated,
+  onUnmounted,
+  provide,
+  reactive,
+  toRef
+}) => ({ relationKey, relationContainer, onChange, childrenKey, delivery } = {}) => {
   if (!relationKey) {
     throw new Error("[TINY Error]<relationKey> must exist.");
   }
   const instance = getCurrentInstance();
-  const state = reactive({ children: [] });
+  const state = reactive({ children: [], indexInParent: -1 });
   const injectValue = inject(relationKey, null);
   let callbacks = [];
   if (injectValue) {
-    const { link: link2, unlink: unlink2, callbacks: injectCbs, childrenKey: injectKey } = injectValue;
+    const { link: link2, unlink: unlink2, callbacks: injectCbs, childrenKey: injectKey, delivery: injectDelivery } = injectValue;
     callbacks = injectCbs;
     childrenKey = childrenKey || injectKey || "instanceChildren";
-    link2(instance);
+    delivery = injectDelivery;
+    state.indexInParent = link2(instance);
     onUnmounted(() => unlink2(instance));
   } else {
     childrenKey = childrenKey || "instanceChildren";
@@ -41,7 +54,11 @@ const useRelation = ({ getCurrentInstance, inject, markRaw, nextTick, onMounted,
       callbacks = null;
     });
   }
-  const link = (child) => state.children.push(markRaw(child.proxy));
+  const link = (child) => {
+    const childPublic = child.proxy;
+    state.children.push(markRaw(childPublic));
+    return computed(() => state.children.indexOf(childPublic));
+  };
   const unlink = (child) => {
     const index = state.children.indexOf(child.proxy);
     if (index > -1) {
@@ -49,10 +66,10 @@ const useRelation = ({ getCurrentInstance, inject, markRaw, nextTick, onMounted,
     }
   };
   callbacks.push((flattenNodes) => sortPublicInstances(state.children, flattenNodes));
-  provide(relationKey, { link, unlink, callbacks, childrenKey });
+  provide(relationKey, { link, unlink, callbacks, childrenKey, delivery });
   Object.defineProperty(instance.proxy, childrenKey, { configurable: true, get: () => state.children });
   onUnmounted(() => delete instance.proxy[childrenKey]);
-  return { children: toRef(state, "children") };
+  return { children: toRef(state, "children"), index: toRef(state, "indexInParent"), delivery };
 };
 const flattenChildNodes = (childNodes, result) => {
   if (childNodes.length) {

package/common/deps/useWindowSize.js

@@ -0,0 +1,23 @@
+import "../../chunk-G2ADBYYC.js";
+import { on, isServer } from "./dom";
+let width;
+let height;
+const useWindowSize = (ref) => () => {
+  if (!width) {
+    width = ref(0);
+    height = ref(0);
+    if (!isServer) {
+      const update = () => {
+        width.value = window.innerWidth;
+        height.value = window.innerHeight;
+      };
+      update();
+      on(window, "resize", update, { passive: true });
+      on(window, "orientationchange", update, { passive: true });
+    }
+  }
+  return { width, height };
+};
+export {
+  useWindowSize
+};

package/common/form/const.js

@@ -0,0 +1,10 @@
+import "../../chunk-G2ADBYYC.js";
+const FORM_ITEM = "FormItem";
+const FORM_EVENT = {
+  change: "form.change",
+  blur: "form.blur"
+};
+export {
+  FORM_EVENT,
+  FORM_ITEM
+};

package/common/index.js

@@ -237,7 +237,7 @@ const CASCADER = {
   PropsHover: "hoverThreshold",
   MenuConnector: "cascader-menu-"
 };
-const version = "3.17.6";
+const version = "3.18.6";
 const log = (data, type = "log") => {
   uLog.logger[type](data);
 };

package/common/prop-util.js

@@ -0,0 +1,43 @@
+import "../chunk-G2ADBYYC.js";
+const unknownProp = null;
+const numericProp = [Number, String];
+const truthProp = {
+  type: Boolean,
+  default: true
+};
+const makeRequiredProp = (type) => ({
+  type,
+  required: true
+});
+const makeArrayProp = () => ({
+  type: Array,
+  default: () => []
+});
+const makeNumberProp = (defaultVal) => ({
+  type: Number,
+  default: defaultVal
+});
+const makeNumericProp = (defaultVal) => ({
+  type: numericProp,
+  default: defaultVal
+});
+const makeStringProp = (defaultVal) => ({
+  type: String,
+  default: defaultVal
+});
+const makeStringValidProp = (defaultVal, optionals = []) => ({
+  type: String,
+  default: defaultVal,
+  validator: (val) => optionals.includes(val)
+});
+export {
+  makeArrayProp,
+  makeNumberProp,
+  makeNumericProp,
+  makeRequiredProp,
+  makeStringProp,
+  makeStringValidProp,
+  numericProp,
+  truthProp,
+  unknownProp
+};

package/common/runtime.js

@@ -22,7 +22,7 @@ import vuePopup from "./deps/vue-popup";
 import validate from "./validate";
 import memorize from "./deps/memorize";
 import * as common from ".";
-const version = "3.17.6";
+const version = "3.18.6";
 const Renderless = {
   browser,
   array,

package/common/xss.js

@@ -9,7 +9,7 @@ let xssOptions = {
   enableUrl: true,
   html: {
     whiteList: {
-      a: ["class", "style", "contenteditable", "data-id", "data-title", "data-size", "data-last-modified"],
+      a: ["class", "style", "contenteditable", "data-id", "data-title", "data-size", "data-last-modified", "href"],
       address: ["class", "style"],
       area: ["class", "style"],
       article: ["class", "style"],
@@ -61,7 +61,7 @@ let xssOptions = {
       header: ["class", "style"],
       hr: ["class", "style"],
       i: ["class", "style", "data-image-id", "data-image"],
-      img: ["class", "style", "devui-editorx-image", "style", "data-image-id"],
+      img: ["class", "style", "devui-editorx-image", "style", "data-image-id", "src"],
       input: ["class", "style", "data-formula", "data-link", "data-video"],
       ins: ["class", "style"],
       li: ["class", "style"],

package/crop/index.js

@@ -1,9 +1,7 @@
 import "../chunk-G2ADBYYC.js";
 import { on, off } from "../common/deps/dom";
 import { toFileSize } from "../common/string";
-const computedCropImages = ({ constants, t }) => () => t(constants.CROP_IMAGE);
 const watchImageSrc = (state) => (value) => state.src = value;
-const watchAlt = (state) => (value) => state.alt = value || "image";
 const watchVisible = ({ api, state }) => (value) => {
   if (value) {
     on(document.body, "keydown", api.shortcutKeys);
@@ -13,35 +11,38 @@ const watchVisible = ({ api, state }) => (value) => {
   state.cropvisible = value;
 };
 const shortcutKeys = (api) => (e) => {
-  if (e.keyCode == 187 && e.ctrlKey) {
+  if (e.keyCode === 187 && e.ctrlKey) {
     e.preventDefault();
     api.zoom(0.1);
   }
-  if (e.keyCode == 189 && e.ctrlKey) {
+  if (e.keyCode === 189 && e.ctrlKey) {
     e.preventDefault();
     api.zoom(-0.1);
   }
-  if (e.keyCode == 38 && e.ctrlKey) {
+  if (e.keyCode === 38 && e.ctrlKey) {
     e.preventDefault();
     api.move(0, 1);
   }
-  if (e.keyCode == 40 && e.ctrlKey) {
+  if (e.keyCode === 40 && e.ctrlKey) {
     e.preventDefault();
     api.move(0, -1);
   }
-  if (e.keyCode == 37 && e.ctrlKey) {
+  if (e.keyCode === 37 && e.ctrlKey) {
     e.preventDefault();
     api.move(1, 0);
   }
-  if (e.keyCode == 39 && e.ctrlKey) {
+  if (e.keyCode === 39 && e.ctrlKey) {
     e.preventDefault();
     api.move(-1, 0);
   }
+  if (e.keyCode === 27) {
+    e.preventDefault();
+    api.closeCrop();
+  }
 };
 const closeCrop = ({ emit, state }) => () => {
   emit("update:cropvisible", false);
   emit("update:visible", false);
-  state.cropImg = "";
 };
 const createCrop = ({ emit, props, refs, state }) => () => {
   const Cropper = props.plugin;
@@ -67,7 +68,6 @@ const createCrop = ({ emit, props, refs, state }) => () => {
     minCropBoxHeight: props.minCropBoxHeight,
     minContainerWidth: props.minContainerWidth,
     minContainerHeight: props.minContainerHeight,
-    preview: document.querySelectorAll(".croppreview"),
     ready() {
       emit("ready");
     },
@@ -88,19 +88,13 @@ const createCrop = ({ emit, props, refs, state }) => () => {
 const closeCropArea = (api) => () => api.clear();
 const clear = (state) => () => state.cropper.clear();
 const cropImage = ({ api, emit, props, state }) => () => {
-  state.cropImg = api.getCroppedCanvas().toDataURL("image/jpeg", props.quality);
+  const canvas = api.getCroppedCanvas();
   if (props.cropType.toLowerCase() === "base64") {
-    emit("cropdata", api.getCroppedCanvas().toDataURL("image/jpeg", props.quality));
+    emit("cropdata", canvas.toDataURL("image/jpeg", props.quality));
   } else if (props.cropType.toLowerCase() === "blob") {
-    let canvas = api.getCroppedCanvas();
-    canvas.toBlob(
-      (blobObj) => {
-        emit("cropdata", blobObj);
-      },
-      "image/jpeg",
-      props.quality
-    );
+    canvas.toBlob((blobObj) => emit("cropdata", blobObj), "image/jpeg", props.quality);
   }
+  api.closeCrop();
 };
 const getCroppedCanvas = (state) => () => state.cropper.getCroppedCanvas();
 const getCropBoxData = (state) => () => state.cropper.getCropBoxData();
@@ -144,7 +138,6 @@ export {
   clear,
   closeCrop,
   closeCropArea,
-  computedCropImages,
   createCrop,
   cropImage,
   destroy,
@@ -171,7 +164,6 @@ export {
   setImage,
   shortcutKeys,
   showFileChooser,
-  watchAlt,
   watchImageSrc,
   watchVisible,
   zoom

package/crop/vue.js

@@ -5,8 +5,6 @@ import {
   watchVisible,
   clear,
   replace,
-  computedCropImages,
-  watchAlt,
   getCroppedCanvas,
   setCanvasData,
   setDragMode,
@@ -66,62 +64,70 @@ const api = [
   "cropImage",
   "zoom"
 ];
-const initRenderIcon = (api2) => {
+const initRenderIcon = (api2, t) => {
   const renderIcon = [
     {
       method: () => api2.showFileChooser(),
-      icon: "IconNew"
+      icon: "IconNew",
+      title: t("ui.crop.choose")
     },
+    { split: true },
     {
-      method: () => api2.zoom(0.1),
-      icon: "IconZoomIn"
+      method: () => api2.zoom(-0.1),
+      icon: "IconZoomOut",
+      title: t("ui.crop.zoomOut")
     },
     {
-      method: () => api2.zoom(-0.1),
-      icon: "IconZoomOut"
+      method: () => api2.zoom(0.1),
+      icon: "IconZoomIn",
+      title: t("ui.crop.zoomIn")
     },
     {
       method: () => api2.rotate(-45),
-      icon: "IconRepeat"
+      icon: "IconRepeat",
+      title: t("ui.crop.rotate_45")
     },
     {
       method: () => api2.rotate(45),
-      icon: "IconRefres"
+      icon: "IconRefres",
+      title: t("ui.crop.rotate45")
     },
+    { split: true },
     {
       method: () => api2.closeCropArea(),
-      icon: "IconCrop"
+      icon: "IconCrop",
+      title: t("ui.crop.closeCropArea")
     },
     {
       method: () => api2.reset(),
-      icon: "IconConmentRefresh"
+      icon: "IconConmentRefresh",
+      title: t("ui.crop.reset")
     },
+    { split: true },
     {
-      method: () => api2.cropImage(),
-      icon: "IconYes"
+      method: () => api2.closeCrop(),
+      icon: "IconClose",
+      title: t("ui.crop.closeCrop")
     },
     {
-      method: () => api2.closeCrop(),
-      icon: "IconClose"
+      method: () => api2.cropImage(),
+      icon: "IconYes",
+      title: t("ui.crop.cropImage")
     }
   ];
   return renderIcon;
 };
-const initState = ({ reactive, props, computed, api: api2 }) => {
+const initState = ({ reactive, props, api: api2, t }) => {
   const state = reactive({
     src: props.src,
-    cropImg: "",
     cropper: "",
-    alt: props.alt,
     data: null,
     cropvisible: props.cropvisible,
-    renderIcon: initRenderIcon(api2),
-    previewShow: props.previewShow,
-    cropImages: computed(() => api2.computedCropImages())
+    renderIcon: initRenderIcon(api2, t)
   });
   return state;
 };
-const initApi = ({ api: api2, state, emit, refs, props, constants, t }) => {
+const initApi = ({ api: api2, state, emit, refs, props }) => {
   Object.assign(api2, {
     state,
     zoom: zoom(state),
@@ -138,7 +144,6 @@ const initApi = ({ api: api2, state, emit, refs, props, constants, t }) => {
     getData: getData(state),
     disable: disable(state),
     destroy: destroy(state),
-    watchAlt: watchAlt(state),
     setDragMode: setDragMode(state),
     getImageData: getImageData(state),
     watchImageSrc: watchImageSrc(state),
@@ -152,7 +157,7 @@ const initApi = ({ api: api2, state, emit, refs, props, constants, t }) => {
     getCroppedCanvas: getCroppedCanvas(state),
     getContainerData: getContainerData(state),
     createCrop: createCrop({ emit, props, refs, state }),
-    computedCropImages: computedCropImages({ constants, t }),
+    // computedCropImages: computedCropImages({ constants, t }),
     shortcutKeys: shortcutKeys(api2),
     closeCropArea: closeCropArea(api2),
     setImage: setImage({ api: api2, state, props }),
@@ -163,12 +168,11 @@ const initApi = ({ api: api2, state, emit, refs, props, constants, t }) => {
 const initWatch = ({ watch, props, api: api2 }) => {
   watch(() => props.cropvisible, api2.watchVisible);
   watch(() => props.src, api2.watchImageSrc, { immediate: true });
-  watch(() => props.alt, api2.watchAlt, { immediate: true });
 };
-const renderless = (props, { computed, onMounted, reactive, watch }, { t, emit, refs, constants }) => {
+const renderless = (props, { onMounted, reactive, watch }, { emit, refs, t }) => {
   const api2 = {};
-  const state = initState({ reactive, props, computed, api: api2 });
-  initApi({ api: api2, state, emit, refs, props, constants, t });
+  const state = initState({ reactive, props, api: api2, t });
+  initApi({ api: api2, state, emit, refs, props });
   onMounted(api2.createCrop);
   initWatch({ watch, props, api: api2 });
   return api2;

package/date-panel/index.js

@@ -219,8 +219,18 @@ const dateToLocaleStringForIE = (timezone, value) => {
   const offsetTime = new Date(value).getTime() + offsetTimezone * 36e5;
   return new Date(offsetTime);
 };
-const changeToNow = ({ api, state }) => () => {
-  const now = /* @__PURE__ */ new Date();
+const getNowTime = ({ props }) => () => {
+  return new Promise((resolve) => {
+    resolve(props.nowClick());
+  }).then((res) => {
+    return res;
+  });
+};
+const changeToNow = ({ api, state, props }) => async () => {
+  let now = /* @__PURE__ */ new Date();
+  if (props.nowClick !== void 0) {
+    now = await api.getNowTime();
+  }
   const timezone = state.timezone;
   const isServiceTimezone = timezone.isServiceTimezone;
   let disabledDate = !state.disabledDate;
@@ -442,6 +452,7 @@ export {
   getDefaultValue,
   getDisabledConfirm,
   getDisabledNow,
+  getNowTime,
   getRenderTz,
   getYearLabel,
   handleClear,

package/date-panel/vue.js

@@ -44,7 +44,8 @@ import {
   computerTimeFormat,
   watchVisible,
   getDisabledNow,
-  getDisabledConfirm
+  getDisabledConfirm,
+  getNowTime
 } from "./index";
 import { getWeekNumber, extractDateFormat } from "../common/deps/date-util";
 import { DATEPICKER, DATE } from "../common";
@@ -72,9 +73,11 @@ const api = [
   "handleVisibleDateChange",
   "handleLeave",
   "handleShortcutClick",
-  "handleTimePickClose"
+  "handleTimePickClose",
+  "getNowTime"
 ];
-const initState = ({ reactive, computed, api: api2, i18n }) => {
+const initState = ({ reactive, computed, api: api2, i18n, designConfig }) => {
+  var _a, _b;
   const state = reactive({
     popperClass: "",
     date: /* @__PURE__ */ new Date(),
@@ -118,7 +121,9 @@ const initState = ({ reactive, computed, api: api2, i18n }) => {
     dateFormat: computed(() => state.format ? extractDateFormat(state.format.replace(state.timefmt, "")) : DATE.Date),
     lang: computed(() => i18n ? i18n.locale.replace(/_/g, "-") : "zh-CN"),
     isShowTz: computed(() => state.showTimezone && state.showTime),
-    isShowFooter: computed(() => state.footerVisible && [DATEPICKER.Date, DATEPICKER.Year].includes(state.currentView))
+    isShowFooter: computed(() => state.footerVisible && [DATEPICKER.Date, DATEPICKER.Year].includes(state.currentView)),
+    buttonType: ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.buttonType) || "default",
+    buttonSize: ((_b = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _b.buttonSize) || "default"
   });
   state.needChangeTimezoneData = true;
   return state;
@@ -150,7 +155,7 @@ const initWatch = ({ watch, state, api: api2, nextTick }) => {
   );
   watch(() => state.visible, api2.watchVisible);
 };
-const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch }) => {
+const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch, props }) => {
   Object.assign(api2, {
     t,
     state,
@@ -181,7 +186,7 @@ const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch }) => {
     searchTz: searchTz({ api: api2, state }),
     handleEnter: handleEnter(api2),
     handleLeave: handleLeave({ api: api2, emit }),
-    changeToNow: changeToNow({ api: api2, state }),
+    changeToNow: changeToNow({ api: api2, state, props }),
     isValidValue: isValidValue({ api: api2, state }),
     handleClear: handleClear({ api: api2, state, emit }),
     watchValue: watchValue({ api: api2, state }),
@@ -198,14 +203,15 @@ const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch }) => {
     handleVisibleTimeChange: handleVisibleTimeChange({ api: api2, vm, state, t }),
     computerTimeFormat: computerTimeFormat({ state }),
     getDisabledNow: getDisabledNow({ state }),
-    getDisabledConfirm: getDisabledConfirm({ state })
+    getDisabledConfirm: getDisabledConfirm({ state }),
+    getNowTime: getNowTime({ props })
   });
 };
-const renderless = (props, { computed, reactive, watch, nextTick }, { t, emit: $emit, vm, i18n }) => {
+const renderless = (props, { computed, reactive, watch, nextTick }, { t, emit: $emit, vm, i18n, designConfig }) => {
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
-  const state = initState({ reactive, computed, api: api2, i18n });
-  initApi({ api: api2, state, t, emit, nextTick, vm, watch });
+  const state = initState({ reactive, computed, api: api2, i18n, designConfig });
+  initApi({ api: api2, state, t, emit, nextTick, vm, watch, props });
   initWatch({ watch, state, api: api2, nextTick });
   return api2;
 };

package/dialog-box/index.js

@@ -240,8 +240,8 @@ const handleDrag = ({
   document.onmouseup = () => {
     document.onmousemove = demMousemove;
     document.onmouseup = demMouseup;
+    props.draggable && state.move && emit("drag-end", event);
     state.move = false;
-    props.draggable && emit("drag-end", event);
   };
 };
 const showScrollbar = (lockScrollClass) => () => {