@opentiny/vue-renderless 3.13.1 → 3.14.0

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
+};

package/cascader-select/index.js

@@ -1,179 +1,43 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "../chunk-G2ADBYYC.js";
-const normalRange = (value, min, max) => value < min ? min : value > max ? max : value;
-const sliceValue = (value, min, max, count, cycleRoll) => {
-  value = normalRange(value, min, max);
-  const values = [value];
-  const tmpArr = Array.from({ length: rightShift(count) });
-  const prev = () => cycleRoll ? tVal + max - min + 1 : null;
-  const next = () => cycleRoll ? tVal - max + min - 1 : null;
-  let tVal;
-  tmpArr.map((v, i) => values.unshift((tVal = value - i - 1) < min ? prev() : tVal));
-  tmpArr.map((v, i) => values.push((tVal = value + i + 1) > max ? next() : tVal));
-  return values;
-};
-const validArr = (arr) => Array.isArray(arr) && arr.length;
-const validProps = (props) => {
-  const { modelValue, options } = props;
-  return validArr(modelValue) && validArr(options) && modelValue.length === options.length;
-};
-const rightShift = (count) => count >>> 1;
-const getFont = (pos, count) => Math.abs(rightShift(count) + 1 - pos);
-const parseType = (props) => (values) => {
-  const { valueType } = props;
-  return values.map(valueType === "number" ? Number : valueType === "string" ? String : (i) => i);
-};
-const init = ({ api, props, state }) => (valuesCopy) => {
-  if (!validProps(props))
-    return;
-  const { modelValue, options, cycleRoll, valueField, textField } = props;
-  const { visibleOptionCount } = state;
-  let { disabled } = props;
-  disabled = typeof disabled === "function" ? disabled : () => false;
-  const values = api.parseType(valuesCopy || modelValue.slice(0));
-  const types = Array.from({ length: values.length });
-  const ranges = Array.from({ length: values.length });
-  const indices = Array.from({ length: values.length });
-  const visibleOptions = options.map((opt, i) => {
-    let slicedValues, existOption;
-    if (Array.isArray(opt)) {
-      if (opt.length === 0)
-        return [];
-      let index = opt.findIndex((item) => item[valueField] === values[i]);
-      index = index === -1 ? 0 : index;
-      types[i] = "a";
-      ranges[i] = [0, opt.length - 1];
-      indices[i] = index;
-      slicedValues = sliceValue(index, 0, opt.length - 1, visibleOptionCount, cycleRoll);
-      existOption = (i2) => __spreadProps(__spreadValues({}, opt[i2]), { disabled: disabled(opt[i2][valueField], ...values) });
-    } else if (opt && typeof opt === "object") {
-      let range;
-      if (Array.isArray(opt.range)) {
-        range = opt.range.slice(0, 2);
-      } else if (typeof opt.rangeMethod === "function") {
-        range = opt.rangeMethod(...values);
-      }
-      types[i] = "o";
-      ranges[i] = api.parseType(range);
-      slicedValues = sliceValue(values[i], ranges[i][0], ranges[i][1], visibleOptionCount, cycleRoll);
-      existOption = (i2) => opt.optionMethod(i2, ...values);
-    }
-    if (!slicedValues || !existOption)
-      return [];
-    return slicedValues.map((slicedValue, i2) => {
-      const option = slicedValue === null ? { [valueField]: null, [textField]: "" } : existOption(slicedValue);
-      option._$font = getFont(i2 + 1, visibleOptionCount);
-      option._$status = option.disabled ? "disabled" : option._$font === 0 ? "focus" : "normal";
-      return option;
-    });
-  });
-  state.selectorCount = values.length;
-  values.map((value, i) => {
-    const index = indices[i];
-    const opts = options[i];
-    const vOpts = visibleOptions[i];
-    state[`selector${i}`] = { index, options: opts, ranges, types, value, values, visibleOptions: vOpts };
-  });
-};
-const calcSelector = (api) => (cycleRoll, dy, pos, selector, valueField) => {
-  const { index, options, ranges, types, value, values } = selector;
-  const valuesCopy = values.slice(0);
-  const sRange = ranges[pos];
-  const sType = types[pos];
-  let sVal = sType === "o" ? value : sType === "a" ? index : null;
-  const f = (arr) => arr[0];
-  const l = (arr) => arr[arr.length - 1];
-  const noop = () => sVal;
-  const prev = () => cycleRoll && sVal === f(sRange) ? l(sRange) : sVal - 1;
-  const next = () => cycleRoll && sVal === l(sRange) ? f(sRange) : sVal + 1;
-  sVal = dy > 0 ? prev() : dy < 0 ? next() : noop();
-  sVal = normalRange(sVal, ...sRange);
-  if (sType === "a") {
-    sVal = options[sVal][valueField];
-  }
-  if (sVal !== value) {
-    valuesCopy.splice(pos, 1, sVal);
-    api.init(valuesCopy);
-  }
-};
-const handleTouchstart = (state) => (e) => {
-  const { clientY } = e.changedTouches[0];
-  state.touching = true;
-  state.touchStartPos = state.touchPos = { clientY };
-  state.accrueDy = 0;
-};
-const handleTouchend = (state) => () => {
-  state.touching = false;
-  state.touchStartPos = state.touchPos = {};
-  state.accrueDy = 0;
-};
-const handleTouchmove = ({ api, props, state }) => (e, pos) => {
-  if (!state.touching)
-    return;
-  const { cycleRoll, valueField } = props;
-  const { touchPos, optionHeight } = state;
-  const { clientY } = e.changedTouches[0];
-  const dy = clientY - touchPos.clientY;
-  state.touchPos = { clientY };
-  state.accrueDy += dy;
-  const absDy = Math.abs(state.accrueDy);
-  const threshold = optionHeight / 4;
-  if (absDy > threshold) {
-    const selector = state[`selector${pos}`];
-    api.calcSelector(cycleRoll, state.accrueDy, pos, selector, valueField);
-    state.accrueDy = 0;
-  }
-};
-const watchActionSheetVisible = ({ emit, state, vm }) => (visible) => {
+import "../chunk-G2ADBYYC.js";
+const watchActionSheetVisible = ({ emit, api, props }) => (visible) => {
   emit("update:visible", visible);
   if (!visible)
     return;
-  setTimeout(() => {
-    const optionRef = vm.$el.querySelector('[data-tag="tiny-mobile-cs-option"]');
-    optionRef && (state.optionHeight = optionRef.offsetHeight);
-  });
+  api.setValue(props.modelValue);
 };
 const close = (state) => () => state.actionSheetVisible && (state.actionSheetVisible = false);
-const confirm = ({ api, emit, props, state, vm }) => () => {
-  const { confirmDisabled } = state;
-  if (confirmDisabled)
+const confirm = ({ api, emit, defaultValues, selectedOptions, isDisabled, vm }) => () => {
+  if (isDisabled.value)
     return;
-  const { modelValue } = props;
-  let focusOpts = vm.$el.querySelectorAll('[date-status="focus"]');
-  let values;
-  if (focusOpts && focusOpts.length) {
-    focusOpts = [...focusOpts];
-    values = focusOpts.map((focusOpt) => focusOpt.dataset.option);
-    values = api.parseType(values);
-  }
-  if (validArr(values) && validArr(modelValue) && values.length === modelValue.length && values.join() !== modelValue.join()) {
-    emit("update:modelValue", values);
+  let refs = vm.$refs.swipeRef;
+  let moving = false;
+  if (!Array.isArray(vm.$refs.swipeRef)) {
+    refs = [refs];
   }
-  api.close();
-};
-const styleOpt = (option) => option._$font;
-const statusOpt = (option) => option._$status;
-const computedConfirmDisabled = (state) => () => {
-  const { selectorCount, visibleOptionCount } = state;
-  const interOpts = Array.from({ length: selectorCount }).map((v, i) => {
-    const vOpts = state[`selector${i}`].visibleOptions;
-    return vOpts[rightShift(visibleOptionCount)];
+  defaultValues.value = refs.map((comp) => {
+    if (comp.state.moving) {
+      moving = true;
+    }
+    return comp.state.currentValue;
   });
-  return interOpts.some((opt) => opt.disabled);
+  if (moving)
+    return;
+  emit("confirm", {
+    selectedValue: defaultValues.value.slice(),
+    selectedOptions: selectedOptions.value.slice()
+  });
+  emit("update:modelValue", defaultValues.value.slice());
+  api.close();
 };
+const columnStyle = ({ props, computed }) => computed(() => {
+  return {
+    height: `${+props.visibleOptionNum * +props.optionHeight}px`,
+    "--lineHeight": `${+props.optionHeight}px`
+  };
+});
 export {
-  calcSelector,
   close,
-  computedConfirmDisabled,
+  columnStyle,
   confirm,
-  handleTouchend,
-  handleTouchmove,
-  handleTouchstart,
-  init,
-  parseType,
-  statusOpt,
-  styleOpt,
   watchActionSheetVisible
 };