@opentiny/vue-renderless 3.12.0 → 3.13.0-alpha.0

package/cascader-mobile/index.js

@@ -6,16 +6,13 @@ const close = ({ state, emit }) => () => {
   emit("close", false);
 };
 const syncCheckStatus = ({ state, props, api }) => (value) => {
-  const { valueField, textField, modelValue: propsModelValue, visible } = props;
+  const { valueField, textField, modelValue: propsModelValue } = props;
   const { lazy, isLeaf: leafField } = api.getNodeConfig();
   let currentData;
   let navList = [];
   let modelValue = value || propsModelValue || [];
   let len = modelValue.length;
   let isLeaf;
-  if (!visible) {
-    return;
-  }
   for (let i = 0; i < len; i++) {
     const id = modelValue[i];
     currentData = state.store.getNode(id);
@@ -42,7 +39,6 @@ const watchVisible = ({ emit, state, props, api }) => (visible) => {
   const { modelValue } = props;
   if (visible) {
     api.watchModelValue(modelValue);
-    api.initTreeStore();
   }
   setTimeout(() => {
     state.toggle = visible;
@@ -78,7 +74,7 @@ const selectOption = ({ emit, state, props, api }) => (option) => {
       option.loading = false;
       state.loading = false;
       option.loaded = true;
-      nodes.map((data) => {
+      nodes.forEach((data) => {
         state.store.append(data, option.data);
         index = waitLoadList.indexOf(data[valueField]);
         if (index !== -1) {
@@ -115,19 +111,35 @@ const loopSearchOption = ({
   textField,
   prefixValue,
   prefixText,
-  textSplit = "/"
+  textSplit = "/",
+  filterMethod,
+  level,
+  checkStrictly
 }) => {
   const list = [];
   options.forEach((item) => {
+    if (item.disabled) {
+      return;
+    }
     const text = item[textField];
     const textNavStr = prefixText ? prefixText + textSplit + text : text;
     const value = [...prefixValue, item[valueField]];
     const children = item[childrenField];
-    if (text.includes(input)) {
-      list.push({
-        [valueField]: value,
-        [textField]: textNavStr
-      });
+    if (checkStrictly === true || !children || children.length === 0) {
+      if (typeof filterMethod === "function") {
+        const matched = filterMethod({ data: item, label: item.label, value: item.value, level }, input);
+        if (matched) {
+          list.push({
+            [valueField]: value,
+            [textField]: textNavStr
+          });
+        }
+      } else if (text.includes(input)) {
+        list.push({
+          [valueField]: value,
+          [textField]: textNavStr
+        });
+      }
     }
     if (children && children.length) {
       const arr = loopSearchOption({
@@ -138,7 +150,10 @@ const loopSearchOption = ({
         textField,
         prefixValue: value,
         prefixText: textNavStr,
-        textSplit
+        textSplit,
+        filterMethod,
+        level: level + 1,
+        checkStrictly
       });
       list.push(...arr);
     }
@@ -160,7 +175,10 @@ const searchMethod = ({ state, props, api }) => () => {
       valueField,
       textField,
       prefixValue: [],
-      prefixText: ""
+      prefixText: "",
+      filterMethod: searchConfig.filterMethod,
+      level: 0,
+      checkStrictly: props.nodeConfig.checkStrictly
     });
   }
   if (typeof list.then === "function") {
@@ -169,12 +187,12 @@ const searchMethod = ({ state, props, api }) => () => {
     state.search.filterOptions = list;
   }
 };
-const searchBoxToggle = ({ state, props, api }) => (bool) => {
+const searchBoxToggle = ({ state, props, api }) => (isShow) => {
   const { searchConfig = {} } = props;
   const { lazy } = api.getNodeConfig();
-  state.search.show = bool;
+  state.search.show = isShow;
   state.search.input = "";
-  if (bool) {
+  if (isShow) {
     state.search.options = !lazy && searchConfig.options && searchConfig.options.length ? searchConfig.options : state.store.getAllData();
     api.searchMethod();
   }
@@ -198,8 +216,7 @@ const created = ({ api }) => () => {
   api.initTreeStore();
 };
 const loadData = ({ props, state }) => (data) => {
-  const { visible } = props;
-  if (!visible) {
+  if (!props.visible) {
     return;
   }
   state.store.setData(data);
@@ -230,7 +247,7 @@ const getNodeConfig = ({ constants, props }) => () => {
   return Object.assign({ nodeKey: valueField }, constants.defaultNodeConfig, nodeConfig);
 };
 const initTreeStore = ({ props, state, api }) => () => {
-  const { data, textField, visible } = props;
+  const { data, textField } = props;
   const {
     nodeKey,
     lazy,
@@ -247,10 +264,6 @@ const initTreeStore = ({ props, state, api }) => () => {
     defaultExpandAll,
     filterNodeMethod
   } = api.getNodeConfig();
-  if (!visible || state.store) {
-    api.syncCheckStatus();
-    return;
-  }
   state.store = new TreeStore({
     key: nodeKey,
     data,

package/cascader-mobile/vue.js

@@ -53,7 +53,7 @@ const renderless = (props, { computed, reactive, watch }, { emit, constants }) =
     options: computed(() => {
       let arr;
       let list = [state.rootData];
-      state.navList.map((option) => {
+      state.navList.forEach((option) => {
         arr = option.childNodes;
         arr && arr.length && list.push(arr);
       });
@@ -67,6 +67,11 @@ const renderless = (props, { computed, reactive, watch }, { emit, constants }) =
     computedNavList: computed(() => api2.computedNavListHandler()),
     showButton: computed(() => {
       const len = state.navList.length;
+      if (!props.nodeConfig.checkStrictly) {
+        if (state.level < len - 1) {
+          return false;
+        }
+      }
       return len && (props.nodeConfig.checkStrictly || state.navList[len - 1].isLeaf);
     })
   });
@@ -92,6 +97,7 @@ const renderless = (props, { computed, reactive, watch }, { emit, constants }) =
     isSelected: isSelected({ state, api: api2, props })
   });
   api2.created();
+  api2.syncCheckStatus();
   watch(() => props.visible, api2.watchVisible);
   watch(() => props.modelValue, api2.watchModelValue, { immediate: true, deep: true });
   watch(() => props.data, api2.loadData, { deep: true });

package/cascader-node/index.js

@@ -15,9 +15,11 @@ const handleExpand = ({ api, parent, props, state }) => () => {
       if (!state.isLeaf) {
         api.handleExpand();
       }
-      if (multiple) {
+      if (multiple && state.isLeaf) {
         const checked = state.isLeaf ? props.node.checked : false;
         api.handleMultiCheckChange(Boolean(checked));
+      } else {
+        parent.handleExpand(props.node);
       }
     });
   } else {
@@ -37,10 +39,20 @@ const isInPath = (props) => (pathNodes) => {
   const selectedPathNode = pathNodes[props.node.level - 1] || {};
   return selectedPathNode.uid === props.node.uid;
 };
+const handleNodeClick = ({ state, api }) => () => {
+  if (!state.isDisabled) {
+    if (state.isLeaf) {
+      api.handleCheckChange();
+    } else {
+      api.handleExpand();
+    }
+  }
+};
 export {
   comptCheckPath,
   handleCheckChange,
   handleExpand,
   handleMultiCheckChange,
+  handleNodeClick,
   isInPath
 };

package/cascader-node/vue.js

@@ -1,6 +1,13 @@
 import "../chunk-G2ADBYYC.js";
-import { comptCheckPath, handleExpand, isInPath, handleCheckChange, handleMultiCheckChange } from "./index";
-const api = ["state", "handleMultiCheckChange", "handleCheckChange", "handleExpand"];
+import {
+  comptCheckPath,
+  handleExpand,
+  isInPath,
+  handleCheckChange,
+  handleMultiCheckChange,
+  handleNodeClick
+} from "./index";
+const api = ["state", "handleMultiCheckChange", "handleCheckChange", "handleExpand", "handleNodeClick"];
 const renderless = (props, { computed, reactive, inject }, { dispatch }) => {
   const parent = inject("panel");
   const api2 = {};
@@ -12,7 +19,10 @@ const renderless = (props, { computed, reactive, inject }, { dispatch }) => {
     isChecked: computed(() => props.node.isSameNode(state.checkedValue)),
     inActivePath: computed(() => api2.isInPath(parent.state.activePath)),
     inCheckedPath: computed(() => api2.comptCheckPath()),
-    value: computed(() => props.node.getValueByOption())
+    value: computed(() => props.node.getValueByOption()),
+    nodeLabel: computed(() => {
+      return parent.state.renderLabelFn ? parent.state.renderLabelFn({ node: props.node, data: props.node.data }) : props.node.label;
+    })
   });
   Object.assign(api2, {
     state,
@@ -20,7 +30,8 @@ const renderless = (props, { computed, reactive, inject }, { dispatch }) => {
     handleExpand: handleExpand({ api: api2, props, parent, state }),
     comptCheckPath: comptCheckPath({ api: api2, parent, state }),
     handleCheckChange: handleCheckChange({ api: api2, parent, dispatch, state }),
-    handleMultiCheckChange: handleMultiCheckChange({ parent, props })
+    handleMultiCheckChange: handleMultiCheckChange({ parent, props }),
+    handleNodeClick: handleNodeClick({ state, api: api2 })
   });
   return api2;
 };

package/cascader-panel/index.js

@@ -223,7 +223,7 @@ const getCheckedNodes = ({ api, state }) => (leafOnly, cascaderCheckedValue) =>
     const nodes = api.getFlattedNodes(leafOnly);
     return nodes.filter((node2) => node2.checked && isCascaderChecked(node2.value, cascaderCheckedValue));
   }
-  const node = api.getNodeByValue(state.checkedValue);
+  const node = api.getNodeByValue(cascaderCheckedValue || state.checkedValue);
   return isEmpty(state.checkedValue) || !node ? [] : [node];
 };
 const clearCheckedNodes = ({ api, state }) => () => {

package/cascader-select/column-index.js

@@ -0,0 +1,150 @@
+import "../chunk-G2ADBYYC.js";
+const DEFAULT_DURATION = 200;
+const INERTIA_TIME = 300;
+const INERTIA_DISTANCE = 15;
+const preventDefault = (event, isStopPropagation) => {
+  if (typeof event.cancelable !== "boolean" || event.cancelable) {
+    event.preventDefault();
+  }
+  if (isStopPropagation) {
+    event.stopPropagation();
+  }
+};
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+const pxCheck = (value) => {
+  return isNaN(Number(value)) ? String(value) : `${value}px`;
+};
+const stopMomentum = ({ state, api }) => () => {
+  state.moving = false;
+  state.touchTime = 0;
+  api.setChooseValue();
+};
+const setRollerStyle = ({ state }) => (index) => {
+  return `transform: rotate3d(1, 0, 0, ${-state.rotation * index}deg) translate3d(0px, 0px, 104px)`;
+};
+const onTouchStart = ({ state, props, touch, vm }) => (event) => {
+  touch.start(event);
+  if (state.moving) {
+    const dom = vm.$refs.roller;
+    const { transform } = window.getComputedStyle(dom);
+    if (props.threeDimensional) {
+      const circle = Math.floor(parseInt(state.touchDeg) / 360);
+      const cos = +transform.split(", ")[5];
+      const sin = +transform.split(", ")[6] < 0 ? 180 : 0;
+      const endDeg = circle * 360 + Math.acos(cos) / Math.PI * 180 + sin;
+      state.scrollDistance = -Math.abs((endDeg / state.rotation - 1) * +props.optionHeight);
+    } else {
+      state.scrollDistance = +transform.slice(7, transform.length - 1).split(", ")[5];
+    }
+  }
+  preventDefault(event, true);
+  state.touchParams.startY = touch.deltaY.value;
+  state.touchParams.startTime = Date.now();
+  state.transformY = state.scrollDistance;
+};
+const onTouchMove = ({ state, api, touch }) => (event) => {
+  touch.move(event);
+  if (touch.isVertical()) {
+    state.moving = true;
+    preventDefault(event, true);
+  }
+  state.touchParams.lastY = touch.deltaY.value;
+  let move = state.touchParams.lastY - state.touchParams.startY;
+  api.setMove(move);
+};
+const onTouchEnd = ({ state, props, api, touch }) => () => {
+  state.touchParams.lastY = touch.deltaY.value;
+  state.touchParams.lastTime = Date.now();
+  let move = state.touchParams.lastY - state.touchParams.startY;
+  let moveTime = state.touchParams.lastTime - state.touchParams.startTime;
+  if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
+    const distance = api.momentum(move, moveTime);
+    api.setMove(distance, "end", +props.swipeDuration);
+    return;
+  } else {
+    api.setMove(move, "end");
+  }
+  setTimeout(() => {
+    touch.reset();
+    state.moving = false;
+  }, 0);
+};
+const momentum = (distance, duration) => {
+  const speed = Math.abs(distance / duration);
+  distance = speed / 3e-3 * (distance < 0 ? -1 : 1);
+  return distance;
+};
+const isHidden = ({ state }) => (index) => {
+  if (index >= state.currIndex + 8 || index <= state.currIndex - 8) {
+    return true;
+  } else {
+    return false;
+  }
+};
+const setTransform = ({ state }) => (type, deg, translateY = 0, time = DEFAULT_DURATION) => {
+  if (type === "end") {
+    state.touchTime = time;
+  } else {
+    state.touchTime = 0;
+  }
+  state.touchDeg = deg;
+  state.scrollDistance = translateY;
+};
+const setMove = ({ state, props, api }) => (move, type, time) => {
+  const { optionHeight } = props;
+  let updateMove = move + state.transformY;
+  if (type === "end") {
+    if (updateMove > 0) {
+      updateMove = 0;
+    }
+    if (updateMove < -(props.column.length - 1) * +optionHeight) {
+      updateMove = -(props.column.length - 1) * +optionHeight;
+    }
+    let endMove = Math.round(updateMove / +optionHeight) * +optionHeight;
+    let deg = `${(Math.abs(Math.round(endMove / +optionHeight)) + 1) * state.rotation}deg`;
+    api.setTransform(type, deg, endMove, time);
+    state.currIndex = Math.abs(Math.round(endMove / +optionHeight)) + 1;
+  } else {
+    let deg = 0;
+    let currentDeg = (-updateMove / +optionHeight + 1) * state.rotation;
+    const maxDeg = (props.column.length + 1) * state.rotation;
+    const minDeg = 0;
+    deg = clamp(currentDeg, minDeg, maxDeg);
+    if (minDeg < deg && deg < maxDeg) {
+      api.setTransform(null, deg + "deg", updateMove, void 0);
+      state.currIndex = Math.abs(Math.round(updateMove / +optionHeight)) + 1;
+    }
+  }
+};
+const setChooseValue = ({ props, state, emit }) => () => {
+  emit("change", props.column[state.currIndex - 1]);
+};
+const modifyStatus = ({ state, props, api }) => (type) => {
+  const { column } = props;
+  let index = column.findIndex((columnItem) => columnItem[props.fieldNames.value] === props.value);
+  state.currIndex = index === -1 ? 1 : index + 1;
+  let move = index === -1 ? 0 : index * +props.optionHeight;
+  type && api.setChooseValue();
+  api.setMove(-move);
+};
+const OptionStyle = ({ state }) => (option, column, offset) => {
+  const currentIndex = state.currIndex - 1;
+  return option === column[currentIndex + offset] || option === column[currentIndex - offset];
+};
+export {
+  OptionStyle,
+  clamp,
+  isHidden,
+  modifyStatus,
+  momentum,
+  onTouchEnd,
+  onTouchMove,
+  onTouchStart,
+  preventDefault,
+  pxCheck,
+  setChooseValue,
+  setMove,
+  setRollerStyle,
+  setTransform,
+  stopMomentum
+};

package/cascader-select/column.js

@@ -0,0 +1,120 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  pxCheck,
+  stopMomentum,
+  setRollerStyle,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  momentum,
+  isHidden,
+  setTransform,
+  setMove,
+  setChooseValue,
+  modifyStatus,
+  OptionStyle
+} from "./column-index";
+import { useTouch } from "./useTouch";
+const api = [
+  "state",
+  "touch",
+  "OptionStyle",
+  "setRollerStyle",
+  "isHidden",
+  "onTouchStart",
+  "onTouchMove",
+  "onTouchEnd",
+  "setMove",
+  "stopMomentum",
+  "pxCheck"
+];
+const renderless = (props, { reactive, computed, watch, ref, onMounted }, { emit, vm }) => {
+  const touch = useTouch({ ref });
+  const state = reactive({
+    touchParams: {
+      startY: 0,
+      endY: 0,
+      startTime: 0,
+      endTime: 0,
+      lastY: 0,
+      lastTime: 0
+    },
+    currIndex: 1,
+    transformY: 0,
+    scrollDistance: 0,
+    rotation: 20,
+    moving: false,
+    touchDeg: 0,
+    touchTime: 0,
+    currentValue: computed(() => props.column[state.currIndex - 1][props.fieldNames.value]),
+    touchTileStyle: computed(() => {
+      const { optionHeight } = props;
+      return {
+        transition: `transform ${state.touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
+        transform: `translate3d(0, ${state.scrollDistance}px, 0)`,
+        top: `calc(50% - ${+optionHeight / 2}px)`,
+        height: `${optionHeight}px`
+      };
+    }),
+    touchRollerStyle: computed(() => {
+      return {
+        transition: `transform ${state.touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
+        transform: `rotate3d(1, 0, 0, ${state.touchDeg})`,
+        top: `calc(50% - ${+props.optionHeight / 2}px)`
+      };
+    }),
+    maskStyles: computed(() => {
+      return {
+        backgroundSize: `100% ${(+props.visibleOptionNum - 1) * +props.optionHeight / 2}px`
+      };
+    })
+  });
+  const api2 = {};
+  Object.assign(api2, {
+    state,
+    touch,
+    OptionStyle: OptionStyle({ state }),
+    setRollerStyle: setRollerStyle({ state }),
+    isHidden: isHidden({ state }),
+    onTouchStart: onTouchStart({ state, props, touch, vm }),
+    onTouchMove: onTouchMove({ state, api: api2, touch }),
+    onTouchEnd: onTouchEnd({ state, props, api: api2, touch }),
+    setMove: setMove({ state, props, api: api2 }),
+    stopMomentum: stopMomentum({ state, api: api2 }),
+    setTransform: setTransform({ state }),
+    setChooseValue: setChooseValue({ props, state, emit }),
+    modifyStatus: modifyStatus({ state, props, api: api2 }),
+    pxCheck,
+    momentum
+  });
+  watch(
+    () => props.column,
+    () => {
+      if (props.column && props.column.length > 0) {
+        state.transformY = 0;
+        api2.modifyStatus(false);
+      }
+    },
+    {
+      deep: true
+    }
+  );
+  watch(
+    () => props.value,
+    () => {
+      state.transformY = 0;
+      api2.modifyStatus(false);
+    },
+    {
+      deep: true
+    }
+  );
+  onMounted(() => {
+    api2.modifyStatus(false);
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};