@opentiny/vue-renderless 3.6.7 → 3.8.0

package/card/index.js

@@ -0,0 +1,84 @@
+import "../chunk-PKUHTIDK.js";
+import { isNull } from "../common/type";
+const handelIconClick = ({ emit }) => (item, index, event) => {
+  if (item.disabled)
+    return;
+  emit("icon-click", item, index, event);
+};
+const getSliceNum = ({ props }) => () => {
+  const sliceNumMap = {
+    "mini": 1,
+    "small": 2,
+    "medium": 3,
+    "large": 5
+  };
+  return sliceNumMap[props.size];
+};
+const getIconNum = ({ props }) => () => {
+  const iconNumMap = {
+    "mini": 2,
+    "small": 3,
+    "medium": 4,
+    "large": 6
+  };
+  return iconNumMap[props.size];
+};
+const handleChange = ({ constants, dispatch, emit, state, nextTick }) => () => {
+  nextTick(() => {
+    emit("change", state.model);
+    state.isGroup && dispatch(constants.CARD_GROUP, "handleChange", [state.model]);
+  });
+};
+const isGroup = ({ constants, parent: $parent, state }) => () => {
+  let parent = $parent;
+  while (parent) {
+    if (parent.$options.componentName !== constants.CARD_GROUP) {
+      parent = parent.$parent;
+    } else {
+      state.cardGroup = parent;
+      return true;
+    }
+  }
+  return false;
+};
+const getSize = ({ props, state }) => () => state.isGroup ? state.cardGroup.size || props.size : props.size;
+const isDisabled = ({ props, state }) => () => props.disabled || state.cardGroup.disabled;
+const getModel = ({ props, state }) => () => {
+  const model = state.isGroup ? state.store : props.modelValue !== void 0 ? props.modelValue : state.selfModel;
+  if (state.isCheckbox) {
+    return isNull(model) ? [] : model;
+  } else {
+    return state.store;
+  }
+};
+const setModel = ({ constants, dispatch, emit, state }) => (val) => {
+  if (state.isGroup) {
+    dispatch(constants.CARD_GROUP, "update:modelValue", [val]);
+  } else {
+    emit("update:modelValue", val);
+    state.isCheckbox && (state.selfModel = val);
+  }
+};
+const computedStore = ({ state, props }) => () => state.isGroup ? state.cardGroup.modelValue : props.modelValue;
+const getItemChecked = ({ props, state }) => () => {
+  if (!state.checkType)
+    return;
+  if (state.isCheckbox) {
+    return state.isGroup || Array.isArray(state.model) ? ~state.model.indexOf(props.label) : state.model;
+  } else {
+    return state.model === props.label;
+  }
+};
+export {
+  computedStore,
+  getIconNum,
+  getItemChecked,
+  getModel,
+  getSize,
+  getSliceNum,
+  handelIconClick,
+  handleChange,
+  isDisabled,
+  isGroup,
+  setModel
+};

package/card/vue.js

@@ -0,0 +1,70 @@
+import "../chunk-PKUHTIDK.js";
+import {
+  handelIconClick,
+  getSliceNum,
+  getIconNum,
+  handleChange,
+  isGroup,
+  getSize,
+  isDisabled,
+  getModel,
+  setModel,
+  computedStore,
+  getItemChecked
+} from "./index";
+const api = ["state", "handelIconClick"];
+const renderless = (props, { reactive, watch, computed }, { vm, parent, emit, constants, nextTick, dispatch }) => {
+  const api2 = {};
+  const state = reactive({
+    cardGroup: {},
+    selfModel: false,
+    itemChecked: computed(() => api2.getItemChecked()),
+    sliceNum: computed(() => api2.getSliceNum()),
+    iconNum: computed(() => api2.getIconNum()),
+    effectOptions: computed(() => props.options.filter((item) => !item.hidden)),
+    store: computed(() => api2.computedStore()),
+    cardClass: computed(() => props.cardClass || state.cardGroup.cardClass || ""),
+    autoWidth: computed(() => props.autoWidth || state.cardGroup.autoWidth),
+    height: computed(() => props.height || state.cardGroup.height),
+    status: computed(() => props.status || state.cardGroup.status || "default"),
+    checkType: computed(() => props.checkType || state.cardGroup.checkType),
+    type: computed(() => props.type || state.cardGroup.type || "text"),
+    isCheckbox: computed(() => state.checkType === "checkbox"),
+    isGroup: computed(() => api2.isGroup()),
+    size: computed(() => api2.getSize()),
+    disabled: computed(() => api2.isDisabled()),
+    model: computed({
+      get: () => api2.getModel(),
+      set: (val) => api2.setModel(val)
+    })
+  });
+  Object.assign(api2, {
+    state,
+    getSize: getSize({ props, state }),
+    getModel: getModel({ props, state }),
+    isGroup: isGroup({ constants, parent, state }),
+    isDisabled: isDisabled({ props, state }),
+    setModel: setModel({ constants, dispatch, emit, props, vm, state }),
+    handleChange: handleChange({ constants, dispatch, emit, state, nextTick }),
+    getSliceNum: getSliceNum({ state, props }),
+    getIconNum: getIconNum({ state, props }),
+    computedStore: computedStore({ state, props }),
+    handelIconClick: handelIconClick({ emit }),
+    getItemChecked: getItemChecked({ state, props })
+  });
+  watch(() => state.model, api2.handleChange, { deep: true });
+  watch(
+    () => state.disabled,
+    () => {
+      state.effectOptions.forEach((item) => {
+        item.disabled = item.disabled || state.disabled;
+      });
+    },
+    { immediate: true }
+  );
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/card-group/index.js

@@ -0,0 +1,16 @@
+import "../chunk-PKUHTIDK.js";
+const getStyle = ({ props }) => () => {
+  const size = props.size || "medium";
+  const sizeMap = {
+    large: "31.25rem",
+    medium: "18.75rem",
+    small: "12.5rem",
+    mini: "6.25rem"
+  };
+  return {
+    "grid-template-columns": `repeat(auto-fit, minmax(${sizeMap[size]}, 1fr))`
+  };
+};
+export {
+  getStyle
+};

package/card-group/vue.js

@@ -0,0 +1,21 @@
+import "../chunk-PKUHTIDK.js";
+import { getStyle } from "./index";
+const api = ["state"];
+const renderless = (props, { reactive, computed }, { vm }) => {
+  const api2 = {};
+  const state = reactive({
+    style: computed(() => api2.getStyle())
+  });
+  Object.assign(api2, {
+    state,
+    getStyle: getStyle({ props })
+  });
+  vm.$on("handleChange", (value) => {
+    vm.$emit("change", value);
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/card-template/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import PopupManager from "@opentiny/vue-renderless/common/deps/popup-manager";
+import PopupManager from "../common/deps/popup-manager";
 const toolClick = (showMoreTools) => (cb) => {
   typeof cb === "function" && cb();
   showMoreTools.value = false;

package/carousel/index.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
-import throttle from "@opentiny/vue-renderless/common/deps/throttle";
-import { POSITION } from "@opentiny/vue-renderless/common";
+import throttle from "../common/deps/throttle";
+import { POSITION } from "../common";
 const handleMouseEnter = ({ api, state }) => () => {
   state.hover = true;
   api.pauseTimer();
@@ -99,6 +99,13 @@ const watchAutoplay = (api) => (value) => value ? api.startTimer() : api.pauseTi
 const throttledArrowClick = (api) => throttle(300, true, (index) => api.setActiveItem(index));
 const throttledIndicatorHover = (api) => throttle(300, (index) => api.handleIndicatorHover(index));
 const computedHasLable = (items) => items.some((item) => item.label.toString().length > 0);
+const computedStyle = ({ props }) => () => {
+  if (props.height) {
+    return { "height": props.height };
+  } else {
+    return { "aspect-ratio": props.aspectRatio.replace(":", " / ") };
+  }
+};
 const onComplete = ({ count, emit, props, state }) => (total) => {
   if (count++ === total) {
     state.completed = true;
@@ -108,8 +115,85 @@ const onComplete = ({ count, emit, props, state }) => (total) => {
     emit("complete");
   }
 };
+const touchstart = ({ state, api }) => (event) => {
+  if (state.items.length <= 1 || ~state.noTouchNode.indexOf(event.target.nodeName))
+    return;
+  event.preventDefault();
+  event.stopPropagation();
+  resetTouchStatus(state);
+  api.pauseTimer();
+  state.itemsTranslate = state.items.map((item) => item.state.translate);
+  state.moving = true;
+  state.touchTime = Date.now();
+  state.startPos.X = event.touches[0].clientX;
+  state.startPos.Y = event.touches[0].clientY;
+};
+const touchmove = ({ props, state, vm }) => (event) => {
+  if (state.items.length <= 1 || ~state.noTouchNode.indexOf(event.target.nodeName))
+    return;
+  const touch = event.touches[0];
+  const itemsLen = state.items.length;
+  const carousel = vm.$refs.carousel;
+  state.deltaPos.X = touch.clientX - state.startPos.X;
+  state.deltaPos.Y = touch.clientY - state.startPos.Y;
+  state.offsetPos.X = Math.abs(state.deltaPos.X);
+  state.offsetPos.Y = Math.abs(state.deltaPos.Y);
+  state.direction = state.direction || getDirection(state.offsetPos.X, state.offsetPos.Y);
+  state.isCorrectDirection = state.direction === props.type;
+  if (!state.isCorrectDirection)
+    return;
+  state.size = state.direction === "horizontal" ? carousel.offsetWidth : carousel.offsetHeight;
+  const nextIndex = state.activeIndex === itemsLen - 1 ? 0 : state.activeIndex + 1;
+  const prevIndex = state.activeIndex === 0 ? itemsLen - 1 : state.activeIndex - 1;
+  state.delta = state.direction === "horizontal" ? state.deltaPos.X : state.deltaPos.Y;
+  state.moveDisable = !props.loop && (state.activeIndex === 0 && state.delta > 0 || state.activeIndex === state.items.length - 1 && state.delta < 0);
+  if (state.moveDisable)
+    return;
+  state.items[state.activeIndex].setDelta(state.delta);
+  state.items[nextIndex].setDelta(state.delta);
+  if (itemsLen > 2) {
+    state.items[prevIndex].setDelta(state.delta);
+  }
+};
+const touchend = ({ state, api }) => (event) => {
+  if (state.moveDisable || state.items.length <= 1 || ~state.noTouchNode.indexOf(event.target.nodeName))
+    return;
+  const speed = state.delta / (Date.now() - state.touchTime);
+  const isShouldMove = Math.abs(speed) > 0.3 || Math.abs(state.delta) > +(state.size / 2).toFixed(2);
+  state.moving = false;
+  state.itemsTranslate.forEach((item, index) => {
+    state.items[index].setDelta(0);
+  });
+  if (isShouldMove && state.isCorrectDirection) {
+    state.delta < 0 ? api.next() : api.prev();
+  } else if (Math.abs(state.delta) > 1) {
+    state.items.forEach((item) => {
+      item.resetAnimatingMf();
+    });
+  }
+  api.startTimer();
+};
+function getDirection(x, y) {
+  const MIN_DISTANCE = 10;
+  if (x > y && x > MIN_DISTANCE) {
+    return "horizontal";
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return "vertical";
+  }
+  return "";
+}
+function resetTouchStatus(state) {
+  state.direction = "";
+  state.delta = 0;
+  state.deltaPos.X = 0;
+  state.deltaPos.Y = 0;
+  state.offsetPos.X = 0;
+  state.offsetPos.Y = 0;
+}
 export {
   computedHasLable,
+  computedStyle,
   handleButtonEnter,
   handleButtonLeave,
   handleIndicatorClick,
@@ -127,6 +211,9 @@ export {
   startTimer,
   throttledArrowClick,
   throttledIndicatorHover,
+  touchend,
+  touchmove,
+  touchstart,
   watchActiveIndex,
   watchAutoplay,
   watchItems

package/carousel/vue.js

@@ -20,9 +20,12 @@ import {
   watchAutoplay,
   throttledArrowClick,
   throttledIndicatorHover,
-  computedHasLable
+  computedHasLable,
+  touchstart,
+  touchmove,
+  touchend
 } from "./index";
-import { addResizeListener, removeResizeListener } from "@opentiny/vue-renderless/common/deps/resize-event";
+import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
 const api = [
   "state",
   "items",
@@ -47,7 +50,10 @@ const api = [
   "handleIndicatorClick",
   "handleIndicatorHover",
   "throttledArrowClick",
-  "throttledIndicatorHover"
+  "throttledIndicatorHover",
+  "touchstart",
+  "touchmove",
+  "touchend"
 ];
 const initState = ({ reactive, computed, api: api2 }) => {
   const state = reactive({
@@ -61,10 +67,13 @@ const initState = ({ reactive, computed, api: api2 }) => {
   });
   return state;
 };
-const initApi = ({ api: api2, state, props, emit }) => {
+const initApi = ({ api: api2, state, props, emit, vm }) => {
   Object.assign(api2, {
     state,
     computedHasLable,
+    touchstart: touchstart({ state, api: api2 }),
+    touchmove: touchmove({ props, state, vm }),
+    touchend: touchend({ state, api: api2 }),
     playSlides: playSlides({ props, state }),
     pauseTimer: pauseTimer(state),
     onComplete: onComplete({ count: 0, emit, props, state }),
@@ -133,7 +142,7 @@ const useResizeListener = ({ api: api2, onBeforeUnmount, onMounted, parent }) =>
 const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { vm, parent, constants, emit, childrenHandler }) => {
   const api2 = {};
   const state = initState({ reactive, computed, api: api2 });
-  initApi({ api: api2, state, props, emit });
+  initApi({ api: api2, state, props, emit, vm });
   const { updateItems } = useItems({
     api: api2,
     vm,

package/carousel-item/index.js

@@ -61,10 +61,18 @@ const computedTransform = ({ parent, TYPE_VERTICAL }) => (state) => {
     transform: TRANSLATE
   };
 };
+const resetAnimatingMf = (state) => () => {
+  state.animatingMf = false;
+};
+const setDelta = ({ state }) => (val) => {
+  state.delta = val;
+};
 export {
   calculateTranslate,
   computedTransform,
   handleItemClick,
   processIndex,
+  resetAnimatingMf,
+  setDelta,
   translateItem
 };

package/carousel-item/vue.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { processIndex, calculateTranslate, translateItem, handleItemClick, computedTransform } from "./index";
+import { processIndex, calculateTranslate, translateItem, handleItemClick, computedTransform, resetAnimatingMf, setDelta } from "./index";
 const api = [
   "state",
   "hover",
@@ -15,7 +15,9 @@ const api = [
   "processIndex",
   "calculateTranslate",
   "translateItem",
-  "handleItemClick"
+  "handleItemClick",
+  "resetAnimatingMf",
+  "setDelta"
 ];
 const renderless = (props, { computed, onMounted, onUnmounted, reactive }, { parent, dispatch }) => {
   const api2 = {};
@@ -40,7 +42,9 @@ const renderless = (props, { computed, onMounted, onUnmounted, reactive }, { par
     handleItemClick: handleItemClick(parent),
     computedTransform: computedTransform({ parent, TYPE_VERTICAL }),
     calculateTranslate: calculateTranslate({ CARD_SCALE, state }),
-    translateItem: translateItem({ api: api2, CARD_SCALE, parent, state })
+    translateItem: translateItem({ api: api2, CARD_SCALE, parent, state }),
+    setDelta: setDelta({ state }),
+    resetAnimatingMf: resetAnimatingMf(state)
   });
   onMounted(() => {
     dispatch("Carousel", "updateItems", []);

package/cascader/index.js

@@ -1,10 +1,10 @@
 import "../chunk-PKUHTIDK.js";
-import browser from "@opentiny/vue-renderless/common/browser";
-import { isNull } from "@opentiny/vue-renderless/common/type";
-import debounce from "@opentiny/vue-renderless/common/deps/debounce";
-import { isEqual } from "@opentiny/vue-renderless/common/object";
-import { addResizeListener } from "@opentiny/vue-renderless/common/deps/resize-event";
-import { KEY_CODE, CASCADER } from "@opentiny/vue-renderless/common";
+import browser from "../common/browser";
+import { isNull } from "../common/type";
+import debounce from "../common/deps/debounce";
+import { isEqual } from "../common/object";
+import { addResizeListener } from "../common/deps/resize-event";
+import { KEY_CODE, CASCADER } from "../common";
 const initMigratingProps = () => ({
   expandTrigger: { newProp: CASCADER.PropsExpandTri, type: String },
   changeOnSelect: { newProp: CASCADER.PropsCheckStric, type: Boolean },

package/cascader/vue.js

@@ -31,9 +31,9 @@ import {
   presentTextHandler,
   handleBeforeUpdate
 } from "./index";
-import { removeResizeListener } from "@opentiny/vue-renderless/common/deps/resize-event";
-import userPopper from "@opentiny/vue-renderless/common/deps/vue-popper";
-import { DATEPICKER } from "@opentiny/vue-renderless/common";
+import { removeResizeListener } from "../common/deps/resize-event";
+import userPopper from "../common/deps/vue-popper";
+import { DATEPICKER } from "../common";
 const api = [
   "state",
   "getCheckedNodes",

package/cascader-menu/vue.js

@@ -1,7 +1,7 @@
 import "../chunk-PKUHTIDK.js";
 import { handleExpand, handleMouseMove, clearHoverZone } from "./index";
-import { CASCADER } from "@opentiny/vue-renderless/common";
-import { random } from "@opentiny/vue-renderless/common/string";
+import { CASCADER } from "../common";
+import { random } from "../common/string";
 const api = ["state", "handleMouseMove", "handleExpand"];
 const renderless = (props, { computed, reactive }, { vm, parent }) => {
   const refs = vm.$refs;

package/cascader-panel/index.js

@@ -1,8 +1,8 @@
 import "../chunk-PKUHTIDK.js";
-import { isNull } from "@opentiny/vue-renderless/common/type";
-import { isEqual } from "@opentiny/vue-renderless/common/object";
-import { isEmpty } from "@opentiny/vue-renderless/cascader";
-import { KEY_CODE, CASCADER } from "@opentiny/vue-renderless/common";
+import { isNull } from "../common/type";
+import { isEqual } from "../common/object";
+import { isEmpty } from "../cascader";
+import { KEY_CODE, CASCADER } from "../common";
 const watchCheckedValue = ({ api, emit, props, state }) => (value) => {
   if (!isEqual(value, props.modelValue)) {
     state.checkStrictly && api.calculateCheckedNodePaths();

package/cascader-panel/node.js

@@ -1,7 +1,7 @@
 import "../chunk-PKUHTIDK.js";
-import { isEqual } from "@opentiny/vue-renderless/common/object";
-import { capitalize } from "@opentiny/vue-renderless/common/string";
-import { isNull } from "@opentiny/vue-renderless/common/type";
+import { isEqual } from "../common/object";
+import { capitalize } from "../common/string";
+import { isNull } from "../common/type";
 let uid = 0;
 class Node {
   constructor(data, config, parentNode) {
@@ -24,7 +24,7 @@ class Node {
     const { config } = this;
     const childrenKey = config.children;
     const childrenData = this.data[childrenKey];
-    this.hasChildren = Array.isArray(childrenData) && childrenData.length > 0;
+    this.hasChildren = Array.isArray(childrenData);
     this.children = (childrenData || []).map((child) => new Node(child, config, this));
   }
   get isLeaf() {

package/cascader-panel/vue.js

@@ -25,8 +25,8 @@ import {
   syncMenuState,
   syncMultiCheckState
 } from "./index";
-import { merge } from "@opentiny/vue-renderless/common/object";
-import { isEmpty } from "@opentiny/vue-renderless/cascader";
+import { merge } from "../common/object";
+import { isEmpty } from "../cascader";
 import Store from "./store.js";
 const api = [
   "state",