@opentiny/vue-renderless 3.17.6 → 3.18.0

package/README.md

@@ -1,7 +1,16 @@
 # @opentiny/vue-renderless
 
-This is for TINY's own internal use only, currently as a dependency for @opentiny/vue.
+Provides a rendering-free logic layer for the `TinyVue` component.
 
-It can also be used as a renderless functions for implementing a custom UI component.
+## You can customize the global configuration of some components
 
-For all instructions, please check out the home page: [https://open.codehub.huawei.com/innersource/originjs/tiny/opentiny-vue/home](https://open.codehub.huawei.com/innersource/originjs/tiny/opentiny-vue/home)
+### Modify the popup window starting level (z-index)
+
+Add the following code to the entry file `main.js`:
+
+```js
+import PopupManager from '@opentiny/vue-renderless/common/deps/popup-manager'
+
+// Set the starting level to 3000
+PopupManager.zIndex = 3000
+```

package/anchor/index.js

@@ -87,7 +87,7 @@ const handleScroll = (state) => () => {
   state.scrollTimer = window.setTimeout(() => {
     state.isScroll = false;
     clearTimeout(state.scrollTimer);
-  }, 2e3);
+  }, 200);
 };
 const setChildOffsetTop = ({ state, props }) => {
   var _a;
@@ -131,6 +131,10 @@ const onItersectionObserver = ({ state, props, api, vm, emit }) => () => {
         updateSkidPosition({ vm, state, emit });
         return;
       }
+      if (state.isScroll) {
+        api.handleScroll();
+        return;
+      }
       for (let key in state.observerLinks) {
         if (Object.prototype.hasOwnProperty.call(state.observerLinks, key)) {
           const item = state.observerLinks[key];
@@ -146,7 +150,7 @@ const onItersectionObserver = ({ state, props, api, vm, emit }) => () => {
         }
       }
     },
-    { root: scrollContainer, threshold: [0] }
+    { root: scrollContainer, threshold: [0, 0.25, 0.5, 1] }
   );
   addObserver({ props, state });
 };

package/autocomplete/index.js

@@ -1,4 +1,5 @@
 import "../chunk-G2ADBYYC.js";
+import { FORM_ITEM, FORM_EVENT } from "../common/form/const";
 const getData = ({
   props,
   state,
@@ -28,11 +29,15 @@ const handleChange = ({
   api,
   emit,
   state,
-  props
+  props,
+  dispatch
 }) => (value) => {
   state.activated = true;
   emit("update:modelValue", value);
   state.suggestionDisabled = false;
+  if (state.validateEvent) {
+    dispatch(FORM_ITEM, FORM_EVENT.change, [value]);
+  }
   if (!props.triggerOnFocus && !value) {
     state.suggestionDisabled = true;
     state.suggestions = [];
@@ -55,9 +60,12 @@ const handleFocus = ({
     api.debouncedGetData(props.modelValue);
   }
 };
-const handleBlur = ({ emit, state }) => (event) => {
+const handleBlur = ({ emit, state, dispatch, props }) => (event) => {
   state.suggestionDisabled = true;
   emit("blur", event);
+  if (state.validateEvent) {
+    dispatch(FORM_ITEM, FORM_EVENT.blur, [props.modelValue]);
+  }
 };
 const handleClear = ({ emit, state }) => () => {
   state.activated = false;
@@ -101,11 +109,7 @@ const select = ({
     state.highlightedIndex = -1;
   });
 };
-const highlight = ({
-  constants,
-  vm,
-  state
-}) => (index) => {
+const highlight = ({ constants, vm, state }) => (index) => {
   if (!state.suggestionVisible || state.loading) {
     return;
   }
@@ -136,10 +140,7 @@ const computedVisible = (state) => {
   let isValidData = Array.isArray(suggestions) && suggestions.length > 0;
   return (isValidData || state.loading) && state.activated;
 };
-const watchVisible = ({
-  suggestionState,
-  vm
-}) => (val) => {
+const watchVisible = ({ suggestionState, vm }) => (val) => {
   let $input = vm.$refs.input.getInput();
   if ($input) {
     suggestionState.dropdownWidth = $input.offsetWidth + "px";

package/autocomplete/vue.js

@@ -37,8 +37,10 @@ const initState = ({
   reactive,
   $prefix,
   computed,
+  props,
   inject
 }) => {
+  var _a;
   const state = reactive({
     showAutoWidth: inject("showAutoWidth", null),
     popperElm: null,
@@ -48,7 +50,9 @@ const initState = ({
     highlightedIndex: -1,
     suggestionDisabled: false,
     id: $prefix + "-" + guid(),
-    suggestionVisible: computed(() => computedVisible(state))
+    suggestionVisible: computed(() => computedVisible(state)),
+    // props.validateEvent优先级大于inject，都没有配置默认为true
+    validateEvent: (_a = props.validateEvent) != null ? _a : inject("validateEvent", true)
   });
   return state;
 };
@@ -67,7 +71,19 @@ const initSuggestionState = ({
     referenceElm
   });
 };
-const initApi = ({ api: api2, state, doDestroy, suggestionState, emit, vm, props, updatePopper, nextTick, constants }) => {
+const initApi = ({
+  api: api2,
+  state,
+  doDestroy,
+  suggestionState,
+  emit,
+  vm,
+  props,
+  updatePopper,
+  nextTick,
+  constants,
+  dispatch
+}) => {
   api2.getData = getData({ props, state, updatePopper, nextTick });
   Object.assign(api2, {
     state,
@@ -75,13 +91,13 @@ const initApi = ({ api: api2, state, doDestroy, suggestionState, emit, vm, props
     suggestionState,
     close: close(state),
     open: open(api2),
-    handleBlur: handleBlur({ emit, state }),
+    handleBlur: handleBlur({ emit, state, dispatch, props }),
     mounted: mounted({ vm, state, suggestionState }),
     highlight: highlight({ constants, vm, state }),
     handleClear: handleClear({ emit, state }),
     select: select({ emit, nextTick, props, state }),
     watchVisible: watchVisible({ suggestionState, vm }),
-    handleChange: handleChange({ api: api2, emit, state, props }),
+    handleChange: handleChange({ api: api2, emit, state, props, dispatch }),
     handleFocus: handleFocus({ api: api2, emit, props, state }),
     handleKeyEnter: handleKeyEnter({ api: api2, emit, nextTick, props, state }),
     debouncedGetData: debounce(props.debounce, api2.getData)
@@ -96,9 +112,9 @@ const renderless = (props, {
   toRefs,
   onDeactivated,
   inject
-}, { $prefix, vm, parent, emit, constants, nextTick, slots }) => {
+}, { $prefix, vm, parent, emit, constants, nextTick, slots, dispatch }) => {
   const api2 = {};
-  const state = initState({ reactive, $prefix, computed, inject });
+  const state = initState({ reactive, $prefix, computed, props, inject });
   const { showPopper, popperElm, referenceElm, doDestroy, updatePopper } = userPopper({
     reactive,
     watch,
@@ -112,7 +128,19 @@ const renderless = (props, {
     onDeactivated
   });
   const suggestionState = initSuggestionState({ reactive, parent, showPopper, popperElm, referenceElm });
-  initApi({ api: api2, state, doDestroy, suggestionState, emit, vm, props, updatePopper, nextTick, constants });
+  initApi({
+    api: api2,
+    state,
+    doDestroy,
+    suggestionState,
+    emit,
+    vm,
+    props,
+    updatePopper,
+    nextTick,
+    constants,
+    dispatch
+  });
   watch(() => state.suggestionVisible, api2.watchVisible);
   onMounted(api2.mounted);
   return api2;

package/collapse-item/index.js

@@ -23,6 +23,11 @@ const handleHeaderClick = ({
   state.focusing = false;
   state.isClick = true;
 };
+const handleHeaderContainerClick = ({ api }) => (e) => {
+  if (e.target === e.currentTarget) {
+    api.handleHeaderClick();
+  }
+};
 const handleEnterClick = ({
   componentName,
   dispatch,
@@ -32,5 +37,6 @@ const handleEnterClick = ({
 export {
   handleEnterClick,
   handleFocus,
-  handleHeaderClick
+  handleHeaderClick,
+  handleHeaderContainerClick
 };

package/collapse-item/vue.js

@@ -1,7 +1,14 @@
 import "../chunk-G2ADBYYC.js";
-import { handleFocus, handleEnterClick, handleHeaderClick } from "./index";
+import { handleFocus, handleEnterClick, handleHeaderClick, handleHeaderContainerClick } from "./index";
 import { guid } from "../common/string";
-const api = ["state", "isActive", "handleFocus", "handleEnterClick", "handleHeaderClick"];
+const api = [
+  "state",
+  "isActive",
+  "handleFocus",
+  "handleEnterClick",
+  "handleHeaderClick",
+  "handleHeaderContainerClick"
+];
 const renderless = (props, { computed, reactive }, { parent, constants, dispatch, designConfig }) => {
   var _a;
   const _constants = parent.collapse._constants;
@@ -22,6 +29,9 @@ const renderless = (props, { computed, reactive }, { parent, constants, dispatch
     handleEnterClick: handleEnterClick({ componentName, dispatch, eventName, parent }),
     handleHeaderClick: handleHeaderClick({ componentName, dispatch, eventName, props, parent, state })
   };
+  Object.assign(api2, {
+    handleHeaderContainerClick: handleHeaderContainerClick({ api: api2 })
+  });
   return api2;
 };
 export {

package/color-picker/index.js

@@ -1,42 +1,30 @@
 import "../chunk-G2ADBYYC.js";
-const onCancel = (tmpColor, triggerBg, isShow, pre, emit) => {
-  return (color) => {
-    tmpColor.reset(color.value.getHex());
-    triggerBg.value = pre.value;
-    isShow.value = false;
-    emit("cancel");
-  };
+const updateModelValue = (val, emit) => {
+  emit("update:modelValue", val);
 };
-const onConfirm = (triggerBg, pre, hex, isShow, emit) => {
-  return (color) => {
-    pre.value = triggerBg.value;
-    triggerBg.value = color;
-    hex.value = color;
-    isShow.value = false;
-    emit("confirm", color);
+const toggleVisible = (isShow) => {
+  return (val) => {
+    isShow.value = val;
   };
 };
-const onHueUpdate = (tmpColor, triggerBg) => {
-  return (h) => {
-    triggerBg.value = tmpColor.getHex();
-    tmpColor.set({ h });
+const useEvent = (hex, emit, changeVisible) => {
+  const onConfirm = (val) => {
+    hex.value = val;
+    updateModelValue(val, emit);
+    emit("confirm", val);
+    changeVisible(false);
   };
-};
-const onSVUpdate = (tmpColor, triggerBg) => {
-  return ({ s, v }) => {
-    triggerBg.value = tmpColor.getHex();
-    tmpColor.set({ s, v });
+  const onCancel = (color) => {
+    hex.value = color.value.hex;
+    changeVisible(false);
+    emit("cancel");
   };
-};
-const onColorUpdate = (triggerBg) => {
-  return (color) => {
-    triggerBg.value = color.value.getHex();
+  return {
+    onConfirm,
+    onCancel
   };
 };
 export {
-  onCancel,
-  onColorUpdate,
-  onConfirm,
-  onHueUpdate,
-  onSVUpdate
+  toggleVisible,
+  useEvent
 };

package/color-picker/vue.js

@@ -1,72 +1,49 @@
 import "../chunk-G2ADBYYC.js";
-import Color from "./utils/color";
-import { onConfirm, onCancel, onHueUpdate, onSVUpdate, onColorUpdate } from "./index";
-const api = [
-  "state",
-  "changeVisible",
-  "cursor",
-  "onColorUpdate",
-  "onHueUpdate",
-  "onSVUpdate",
-  "onConfirm",
-  "onCancel",
-  "onAlphaUpdate",
-  "alpha"
-];
-const renderless = (props, context, { emit }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { modelValue, visible, predefine, size, history } = context.toRefs(props);
-  const pre = context.ref((_a = modelValue.value) != null ? _a : "transparent");
-  const triggerBg = context.ref((_b = pre.value) != null ? _b : "transparent");
-  const tmpColor = new Color((_c = triggerBg.value) != null ? _c : "transparent");
-  const hex = context.ref((_d = modelValue.value) != null ? _d : "transparent");
-  const isShow = context.ref((_e = visible == null ? void 0 : visible.value) != null ? _e : false);
-  const changeVisible = (state2) => {
-    isShow.value = state2;
-  };
-  const stack = context.ref([...(_f = history == null ? void 0 : history.value) != null ? _f : []]);
-  const predefineStack = context.ref([...(_g = predefine == null ? void 0 : predefine.value) != null ? _g : []]);
-  const state = context.reactive({
-    isShow,
-    hex,
-    triggerBg,
-    defaultValue: modelValue,
-    stack,
-    predefineStack,
-    size: size != null ? size : ""
-  });
-  const api2 = {
-    state,
-    changeVisible,
-    onCancel: onCancel(tmpColor, triggerBg, isShow, pre, emit),
-    onConfirm: onConfirm(triggerBg, pre, hex, isShow, emit),
-    onHueUpdate: onHueUpdate(tmpColor, triggerBg),
-    onSVUpdate: onSVUpdate(tmpColor, triggerBg),
-    onColorUpdate: onColorUpdate(triggerBg)
-  };
-  context.watch(
+import { toggleVisible, useEvent } from "./index";
+const api = ["state", "changeVisible", "onConfirm", "onCancel", "onHueUpdate", "onSVUpdate", "onColorUpdate"];
+const renderless = (props, ctx, { emit }) => {
+  var _a, _b, _c;
+  const { modelValue, visible, predefine, size, history } = ctx.toRefs(props);
+  const isShow = ctx.ref(visible.value);
+  const hex = ctx.ref((_a = modelValue.value) != null ? _a : "transparent");
+  const stack = ctx.ref([...(_b = history == null ? void 0 : history.value) != null ? _b : []]);
+  const predefineStack = ctx.ref([...(_c = predefine == null ? void 0 : predefine.value) != null ? _c : []]);
+  ctx.watch(
     predefine,
     (newPredefine) => {
       predefineStack.value = [...newPredefine];
     },
     { deep: true }
   );
-  context.watch(
+  ctx.watch(
     history,
     (newHistory) => {
       stack.value = [...newHistory];
     },
     { deep: true }
   );
-  context.watch(modelValue, (newValue) => {
-    pre.value = newValue;
-    hex.value = newValue;
-    state.hex = newValue;
-    state.triggerBg = newValue;
+  const state = ctx.reactive({
+    isShow,
+    hex,
+    triggerBg: ctx.ref(modelValue.value),
+    size,
+    stack,
+    predefineStack
+  });
+  ctx.watch(props, () => {
+    hex.value = props.modelValue;
   });
-  context.watch(visible, (visible2) => {
-    isShow.value = visible2;
+  ctx.watch(hex, () => {
+    emit("update:modelValue", hex.value);
   });
+  const changeVisible = toggleVisible(isShow);
+  const { onConfirm, onCancel } = useEvent(hex, emit, changeVisible);
+  const api2 = {
+    state,
+    changeVisible,
+    onConfirm,
+    onCancel
+  };
   return api2;
 };
 export {

package/color-select-panel/index.js

@@ -20,6 +20,7 @@ const onConfirm = (hex, pre, res, emit, stack, enableHistory, color) => {
     }
     color.value.setPrevH(color.value.get("h"));
     emit("confirm", res.value);
+    emit("update:modelValue", res.value);
   };
 };
 const onCancel = (res, pre, emit, isShow, hex, color) => {
@@ -33,31 +34,33 @@ const onCancel = (res, pre, emit, isShow, hex, color) => {
       }));
       emit("cancel", color);
     }
+    emit("update:modelValue", hex.value);
   };
 };
-const onColorUpdate = (color, res) => {
+const onColorUpdate = (color, res, emit) => {
   res.value = color.value.getHex();
+  emit("update:modelValue", res.value);
 };
 const onHSVUpdate = (color, res, hex, emit) => {
   return {
     onHueUpdate: (hue) => {
       color.value.set({ h: hue });
-      onColorUpdate(color, res);
+      onColorUpdate(color, res, emit);
       hex.value = color.value.getHex();
       emit("hue-update", hue);
     },
     onSVUpdate: ({ s, v }) => {
       hex.value = color.value.getHex();
-      onColorUpdate(color, res);
+      onColorUpdate(color, res, emit);
       emit("sv-update", { s, v });
     }
   };
 };
-const onAlphaUpdate = (color, res) => {
+const onAlphaUpdate = (color, res, emit) => {
   return {
     update: (alpha) => {
       color.value.set({ a: alpha });
-      onColorUpdate(color, res);
+      onColorUpdate(color, res, emit);
     }
   };
 };

package/color-select-panel/vue.js

@@ -58,7 +58,6 @@ const renderless = (props, context, { emit }) => {
     { deep: true }
   );
   context.watch(modelValue, (newValue) => {
-    pre.value = res.value;
     hex.value = newValue;
     res.value = newValue;
     color.value.reset(newValue);
@@ -68,7 +67,7 @@ const renderless = (props, context, { emit }) => {
     isShow.value = visible2;
   });
   const { onHueUpdate, onSVUpdate } = onHSVUpdate(color, res, hex, emit);
-  const { update } = onAlphaUpdate(color, res);
+  const { update } = onAlphaUpdate(color, res, emit);
   const api2 = {
     state,
     changeVisible,

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/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/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.0";
 const log = (data, type = "log") => {
   uLog.logger[type](data);
 };

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.0";
 const Renderless = {
   browser,
   array,

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) => () => {