@opentiny/vue-renderless 3.6.0-alpha.1 → 3.6.1-alpha.0

package/rate/index.js

@@ -1,172 +1,128 @@
-import { KEY_CODE } from '@opentiny/vue-renderless/common';
-export var computedActiveColor = function computedActiveColor(props) {
-  return function (state) {
-    var result = '';
-    if (state.currentValue <= props.lowThreshold) {
-      result = state.colorMap.lowColor;
-    } else if (state.currentValue >= props.highThreshold) {
-      result = state.colorMap.highColor;
-    } else {
-      result = state.colorMap.mediumColor;
-    }
-    return result;
-  };
+import "../chunk-PKUHTIDK.js";
+import { KEY_CODE } from "@opentiny/vue-renderless/common";
+const computedActiveColor = (props) => (state) => {
+  let result = "";
+  if (state.currentValue <= props.lowThreshold) {
+    result = state.colorMap.lowColor;
+  } else if (state.currentValue >= props.highThreshold) {
+    result = state.colorMap.highColor;
+  } else {
+    result = state.colorMap.mediumColor;
+  }
+  return result;
 };
-export var computedActiveClass = function computedActiveClass(props) {
-  return function (state) {
-    var result = '';
-    if (state.currentValue <= props.lowThreshold) {
-      result = state.classMap.lowClass;
-    } else if (state.currentValue >= props.highThreshold) {
-      result = state.classMap.highClass;
-    } else {
-      result = state.classMap.mediumClass;
-    }
-    return result;
-  };
+const computedActiveClass = (props) => (state) => {
+  let result = "";
+  if (state.currentValue <= props.lowThreshold) {
+    result = state.classMap.lowClass;
+  } else if (state.currentValue >= props.highThreshold) {
+    result = state.classMap.highClass;
+  } else {
+    result = state.classMap.mediumClass;
+  }
+  return result;
 };
-export var getTextStyle = function getTextStyle(_ref) {
-  var props = _ref.props,
-    state = _ref.state;
-  return function () {
-    var color = props.radio && state.currentValue ? props.textColor : state.activeColor;
-    return {
-      color: color
-    };
+const getTextStyle = ({ props, state }) => () => {
+  const color = props.radio && state.currentValue ? props.textColor : state.activeColor;
+  return {
+    color
   };
 };
-export var handelKey = function handelKey(_ref2) {
-  var emit = _ref2.emit,
-    props = _ref2.props,
-    state = _ref2.state;
-  return function (event) {
-    var current = state.currentValue;
-    var keyCode = event.keyCode;
-    if (props.disabled) {
-      return;
-    }
-    if (keyCode === KEY_CODE.ArrowUp || keyCode === KEY_CODE.ArrowRight) {
-      current += props.allowHalf ? 0.5 : 1;
-      event.stopPropagation();
-      event.preventDefault();
-    } else if (keyCode === KEY_CODE.ArrowLeft || keyCode === KEY_CODE.ArrowDown) {
-      current -= props.allowHalf ? 0.5 : 1;
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    current = current < 0 ? 0 : current;
-    current = current > props.max ? props.max : current;
-    emit('update:modelValue', current);
-    emit('change', current);
-  };
+const handelKey = ({ emit, props, state }) => (event) => {
+  let current = state.currentValue;
+  const keyCode = event.keyCode;
+  if (props.disabled) {
+    return;
+  }
+  if (keyCode === KEY_CODE.ArrowUp || keyCode === KEY_CODE.ArrowRight) {
+    current += props.allowHalf ? 0.5 : 1;
+    event.stopPropagation();
+    event.preventDefault();
+  } else if (keyCode === KEY_CODE.ArrowLeft || keyCode === KEY_CODE.ArrowDown) {
+    current -= props.allowHalf ? 0.5 : 1;
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  current = current < 0 ? 0 : current;
+  current = current > props.max ? props.max : current;
+  emit("update:modelValue", current);
+  emit("change", current);
 };
-export var selectValue = function selectValue(_ref3) {
-  var emit = _ref3.emit,
-    props = _ref3.props,
-    state = _ref3.state;
-  return function (value) {
-    if (props.disabled) {
-      return;
-    }
-    if (props.allowHalf && state.pointerAtLeftHalf) {
-      value = state.currentValue;
-    }
-    emit('update:modelValue', value);
-    emit('change', value);
-  };
+const selectValue = ({ emit, props, state }) => (value) => {
+  if (props.disabled) {
+    return;
+  }
+  if (props.allowHalf && state.pointerAtLeftHalf) {
+    value = state.currentValue;
+  }
+  emit("update:modelValue", value);
+  emit("change", value);
 };
-export var setCurrentValue = function setCurrentValue(_ref4) {
-  var _ref4$constants = _ref4.constants,
-    RATENODECLS = _ref4$constants.RATENODECLS,
-    DECIMALCLS = _ref4$constants.DECIMALCLS,
-    ICON_PREFIXCLS = _ref4$constants.ICON_PREFIXCLS,
-    props = _ref4.props,
-    state = _ref4.state,
-    parent = _ref4.parent,
-    api = _ref4.api;
-  return function (_ref5) {
-    var event = _ref5.event,
-      item = _ref5.item;
-    if (props.disabled) {
-      return;
+const setCurrentValue = ({ constants: { RATENODECLS, DECIMALCLS, ICON_PREFIXCLS }, props, state, parent, api }) => ({ event, item }) => {
+  if (props.disabled) {
+    return;
+  }
+  if (!parent.$el.contains(state.mouseTarget)) {
+    api.resetCurrentValue();
+  }
+  if (props.allowHalf) {
+    let target = event.target;
+    let className = target.className;
+    let key = target.parentElement ? "parentElement" : "parentNode";
+    if (target.nodeName === "svg") {
+      className = target[key].className;
+      target = target[key];
     }
-    if (!parent.$el.contains(state.mouseTarget)) {
-      api.resetCurrentValue();
+    if (target.nodeName === "path") {
+      className = target[key][key].className;
+      target = target[key][key];
     }
-    if (props.allowHalf) {
-      var target = event.target;
-      var className = target.className;
-      var key = target.parentElement ? 'parentElement' : 'parentNode';
-      if (target.nodeName === 'svg') {
-        className = target[key].className;
-        target = target[key];
-      }
-      if (target.nodeName === 'path') {
-        className = target[key][key].className;
-        target = target[key][key];
-      }
-      if (className.indexOf(RATENODECLS) > -1) {
-        target = target.querySelector(ICON_PREFIXCLS);
-      }
-      if (className.indexOf(DECIMALCLS) > -1) {
-        target = target.parentNode;
-      }
-      state.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
-      state.currentValue = state.pointerAtLeftHalf ? item - 0.5 : item;
-    } else {
-      state.currentValue = item;
+    if (className.includes(RATENODECLS)) {
+      target = target.querySelector(ICON_PREFIXCLS);
     }
-    state.hoverIndex = item;
-  };
-};
-export var resetCurrentValue = function resetCurrentValue(_ref6) {
-  var props = _ref6.props,
-    state = _ref6.state;
-  return function () {
-    if (props.disabled) {
-      return;
+    if (className.includes(DECIMALCLS)) {
+      target = target.parentNode;
     }
-    if (props.allowHalf) {
-      state.pointerAtLeftHalf = props.modelValue !== Math.floor(props.modelValue);
-    }
-    state.currentValue = props.modelValue;
-    state.hoverIndex = -1;
-  };
+    state.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
+    state.currentValue = state.pointerAtLeftHalf ? item - 0.5 : item;
+  } else {
+    state.currentValue = item;
+  }
+  state.hoverIndex = item;
 };
-export var showDecimalIcon = function showDecimalIcon(_ref7) {
-  var props = _ref7.props,
-    state = _ref7.state;
-  return function (item) {
-    var decimal = props.modelValue * 100 - Math.floor(props.modelValue) * 100;
-    var showWhenDisabled = props.disabled && decimal > 0 && item - 1 < props.modelValue && item > props.modelValue;
-    var showWhenAllowHalf = props.allowHalf && state.pointerAtLeftHalf && item - 0.5 <= state.currentValue && item > state.currentValue;
-    return showWhenDisabled || showWhenAllowHalf;
-  };
+const resetCurrentValue = ({ props, state }) => () => {
+  if (props.disabled) {
+    return;
+  }
+  if (props.allowHalf) {
+    state.pointerAtLeftHalf = props.modelValue !== Math.floor(props.modelValue);
+  }
+  state.currentValue = props.modelValue;
+  state.hoverIndex = -1;
 };
-export var getIconStyle = function getIconStyle(_ref8) {
-  var api = _ref8.api,
-    props = _ref8.props,
-    state = _ref8.state;
-  return function (item) {
-    var isHalf = api.showDecimalIcon(item);
-    var voidColor = props.disabled ? props.disabledVoidColor : props.voidColor;
-    if (props.radio) {
-      return {
-        fill: item === state.currentValue ? state.activeColor : voidColor,
-        'font-size': props.size || '18px'
-      };
-    }
+const showDecimalIcon = ({ props, state }) => (item) => {
+  const decimal = props.modelValue * 100 - Math.floor(props.modelValue) * 100;
+  const showWhenDisabled = props.disabled && decimal > 0 && item - 1 < props.modelValue && item > props.modelValue;
+  const showWhenAllowHalf = props.allowHalf && state.pointerAtLeftHalf && item - 0.5 <= state.currentValue && item > state.currentValue;
+  return showWhenDisabled || showWhenAllowHalf;
+};
+const getIconStyle = ({ api, props, state }) => (item) => {
+  const isHalf = api.showDecimalIcon(item);
+  const voidColor = props.disabled ? props.disabledVoidColor : props.voidColor;
+  if (props.radio) {
     return {
-      fill: isHalf ? 'transparent' : item <= state.currentValue ? state.activeColor : voidColor,
-      'font-size': props.size || '18px'
+      fill: item === state.currentValue ? state.activeColor : voidColor,
+      "font-size": props.size || "18px"
     };
+  }
+  return {
+    fill: isHalf ? "transparent" : item <= state.currentValue ? state.activeColor : voidColor,
+    "font-size": props.size || "18px"
   };
 };
-export var computedText = function computedText(_ref9) {
-  var props = _ref9.props,
-    state = _ref9.state;
-  var result = '';
-  var currentValue = 0;
+const computedText = ({ props, state }) => {
+  let result = "";
+  let currentValue = 0;
   if (!isNaN(Number(state.currentValue))) {
     currentValue = Number(state.currentValue) > 0 ? Number(state.currentValue) : 0;
   }
@@ -183,35 +139,31 @@ export var computedText = function computedText(_ref9) {
   }
   return result;
 };
-export var computedDecimalStyle = function computedDecimalStyle(_ref10) {
-  var props = _ref10.props,
-    state = _ref10.state;
-  var width = '';
-  var clip = '';
-  var clipPath = '';
-  var fontSize = '';
+const computedDecimalStyle = ({ props, state }) => {
+  let width = "";
+  let clip = "";
+  let clipPath = "";
+  let fontSize = "";
   if (props.disabled) {
-    width = "".concat(props.modelValue * 100 - Math.floor(props.modelValue) * 100 < 50 ? 0 : 100, "%");
+    width = `${props.modelValue * 100 - Math.floor(props.modelValue) * 100 < 50 ? 0 : 100}%`;
   } else if (props.allowHalf) {
-    var reactSize = props.size ? Math.ceil(parseInt(props.size) / 2) + 'px' : '6px';
-    clip = "rect(0px, ".concat(reactSize, ", ").concat(props.size || '14px', ", 0px)");
-    clipPath = 'inset(0 50% 0 0)';
-    fontSize = props.size || '18px';
+    const reactSize = props.size ? Math.ceil(parseInt(props.size) / 2) + "px" : "6px";
+    clip = `rect(0px, ${reactSize}, ${props.size || "14px"}, 0px)`;
+    clipPath = "inset(0 50% 0 0)";
+    fontSize = props.size || "18px";
   }
   return {
     fill: state.activeColor,
-    width: width,
-    clip: clip,
-    clipPath: clipPath,
-    fontSize: fontSize
+    width,
+    clip,
+    clipPath,
+    fontSize
   };
 };
-export var computedClasses = function computedClasses(_ref11) {
-  var props = _ref11.props,
-    state = _ref11.state;
-  var i = 0;
-  var result = [];
-  var threshold = state.currentValue;
+const computedClasses = ({ props, state }) => {
+  let i = 0;
+  let result = [];
+  let threshold = state.currentValue;
   if (props.radio) {
     result = props.iconClasses;
   } else {
@@ -229,26 +181,35 @@ export var computedClasses = function computedClasses(_ref11) {
   }
   return result;
 };
-export var computedClassMap = function computedClassMap(props) {
-  return {
-    lowClass: props.iconClasses[0],
-    mediumClass: props.iconClasses[1],
-    highClass: props.iconClasses[2],
-    voidClass: props.voidIconClass,
-    disabledVoidClass: props.disabledVoidIconClass
-  };
-};
-export var computedColorMap = function computedColorMap(props) {
-  return {
-    lowColor: props.colors[0],
-    mediumColor: props.colors[1],
-    highColor: props.colors[2],
-    voidColor: props.voidColor,
-    disabledVoidColor: props.disabledVoidColor
-  };
+const computedClassMap = (props) => ({
+  lowClass: props.iconClasses[0],
+  mediumClass: props.iconClasses[1],
+  highClass: props.iconClasses[2],
+  voidClass: props.voidIconClass,
+  disabledVoidClass: props.disabledVoidIconClass
+});
+const computedColorMap = (props) => ({
+  lowColor: props.colors[0],
+  mediumColor: props.colors[1],
+  highColor: props.colors[2],
+  voidColor: props.voidColor,
+  disabledVoidColor: props.disabledVoidColor
+});
+const computedVoidClass = ({ props, state }) => props.disabled ? state.classMap.disabledVoidClass : state.classMap.voidClass;
+export {
+  computedActiveClass,
+  computedActiveColor,
+  computedClassMap,
+  computedClasses,
+  computedColorMap,
+  computedDecimalStyle,
+  computedText,
+  computedVoidClass,
+  getIconStyle,
+  getTextStyle,
+  handelKey,
+  resetCurrentValue,
+  selectValue,
+  setCurrentValue,
+  showDecimalIcon
 };
-export var computedVoidClass = function computedVoidClass(_ref12) {
-  var props = _ref12.props,
-    state = _ref12.state;
-  return props.disabled ? state.classMap.disabledVoidClass : state.classMap.voidClass;
-};

package/rate/vue.js

@@ -1,158 +1,110 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { getTextStyle, handelKey, resetCurrentValue, setCurrentValue, selectValue, showDecimalIcon, getIconStyle, computedText, computedDecimalStyle, computedClasses, computedColorMap, computedClassMap, computedVoidClass, computedActiveColor, computedActiveClass } from './index';
-import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
-export var api = ['state', 'showDecimalIcon', 'getIconStyle', 'getTextStyle', 'selectValue', 'handelKey', 'setCurrentValue', 'resetCurrentValue'];
-export var useChangeValue = function useChangeValue(_ref) {
-  var constants = _ref.constants,
-    emit = _ref.emit,
-    props = _ref.props,
-    reactive = _ref.reactive,
-    toRefs = _ref.toRefs,
-    watch = _ref.watch,
-    onMounted = _ref.onMounted,
-    onUnmounted = _ref.onUnmounted,
-    parent = _ref.parent;
-  var state = reactive({
+import {
+  __spreadValues
+} from "../chunk-PKUHTIDK.js";
+import {
+  getTextStyle,
+  handelKey,
+  resetCurrentValue,
+  setCurrentValue,
+  selectValue,
+  showDecimalIcon,
+  getIconStyle,
+  computedText,
+  computedDecimalStyle,
+  computedClasses,
+  computedColorMap,
+  computedClassMap,
+  computedVoidClass,
+  computedActiveColor,
+  computedActiveClass
+} from "./index";
+import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
+const api = ["state", "showDecimalIcon", "getIconStyle", "getTextStyle", "selectValue", "handelKey", "setCurrentValue", "resetCurrentValue"];
+const useChangeValue = ({ constants, emit, props, reactive, toRefs, watch, onMounted, onUnmounted, parent }) => {
+  const state = reactive({
     hoverIndex: -1,
     currentValue: props.modelValue
   });
-  var api = {
-    selectValue: selectValue({
-      emit: emit,
-      props: props,
-      state: state
-    }),
-    resetCurrentValue: resetCurrentValue({
-      props: props,
-      state: state
-    })
+  const api2 = {
+    selectValue: selectValue({ emit, props, state }),
+    resetCurrentValue: resetCurrentValue({ props, state })
   };
-  api.setCurrentValue = setCurrentValue({
-    constants: constants,
-    props: props,
-    state: state,
-    parent: parent,
-    api: api
+  api2.setCurrentValue = setCurrentValue({
+    constants,
+    props,
+    state,
+    parent,
+    api: api2
   });
-  watch(function () {
-    return props.modelValue;
-  }, function (value) {
-    state.currentValue = value;
-  }, {
-    immediate: true
-  });
-  var updateMousePostion = function updateMousePostion(event) {
+  watch(
+    () => props.modelValue,
+    (value) => {
+      state.currentValue = value;
+    },
+    { immediate: true }
+  );
+  const updateMousePostion = (event) => {
     state.mouseTarget = event.target;
   };
-  onMounted(function () {
-    on(document, 'mousemove', updateMousePostion);
-    on(document, 'mouseleave', api.resetCurrentValue);
+  onMounted(() => {
+    on(document, "mousemove", updateMousePostion);
+    on(document, "mouseleave", api2.resetCurrentValue);
   });
-  onUnmounted(function () {
-    off(document, 'mousemove', updateMousePostion);
-    off(document, 'mouseleave', api.resetCurrentValue);
+  onUnmounted(() => {
+    off(document, "mousemove", updateMousePostion);
+    off(document, "mouseleave", api2.resetCurrentValue);
     state.mouseTarget = null;
   });
   return {
-    api: api,
+    api: api2,
     state: toRefs(state)
   };
 };
-export var renderless = function renderless(props, _ref2, _ref3) {
-  var computed = _ref2.computed,
-    reactive = _ref2.reactive,
-    toRefs = _ref2.toRefs,
-    watch = _ref2.watch,
-    onMounted = _ref2.onMounted,
-    onUnmounted = _ref2.onUnmounted;
-  var constants = _ref3.constants,
-    emit = _ref3.emit,
-    parent = _ref3.parent;
-  var api = {};
-  var changeValue = useChangeValue({
-    computed: computed,
-    constants: constants,
-    emit: emit,
-    props: props,
-    reactive: reactive,
-    toRefs: toRefs,
-    watch: watch,
-    onMounted: onMounted,
-    onUnmounted: onUnmounted,
-    parent: parent
+const renderless = (props, { computed, reactive, toRefs, watch, onMounted, onUnmounted }, { constants, emit, parent }) => {
+  const api2 = {};
+  const changeValue = useChangeValue({
+    computed,
+    constants,
+    emit,
+    props,
+    reactive,
+    toRefs,
+    watch,
+    onMounted,
+    onUnmounted,
+    parent
   });
-  var state = reactive(_objectSpread({
+  const state = reactive(__spreadValues({
     pointerAtLeftHalf: true,
-    colorMap: computed(function () {
-      return api.computedColorMap(props);
-    }),
-    classMap: computed(function () {
-      return api.computedClassMap(props);
-    }),
-    text: computed(function () {
-      return api.computedText({
-        props: props,
-        state: state
-      });
-    }),
-    activeClass: computed(function () {
-      return api.computedActiveClass(state);
-    }),
-    activeColor: computed(function () {
-      return api.computedActiveColor(state);
-    }),
-    classes: computed(function () {
-      return api.computedClasses({
-        props: props,
-        state: state
-      });
-    }),
-    decimalIconClass: computed(function () {
-      return api.computedActiveClass(state);
-    }),
-    voidClass: computed(function () {
-      return api.computedVoidClass({
-        props: props,
-        state: state
-      });
-    }),
-    decimalStyle: computed(function () {
-      return api.computedDecimalStyle({
-        props: props,
-        state: state
-      });
-    })
+    colorMap: computed(() => api2.computedColorMap(props)),
+    classMap: computed(() => api2.computedClassMap(props)),
+    text: computed(() => api2.computedText({ props, state })),
+    activeClass: computed(() => api2.computedActiveClass(state)),
+    activeColor: computed(() => api2.computedActiveColor(state)),
+    classes: computed(() => api2.computedClasses({ props, state })),
+    decimalIconClass: computed(() => api2.computedActiveClass(state)),
+    voidClass: computed(() => api2.computedVoidClass({ props, state })),
+    decimalStyle: computed(() => api2.computedDecimalStyle({ props, state }))
   }, changeValue.state));
-  Object.assign(api, _objectSpread({
-    state: state,
-    computedText: computedText,
-    computedClasses: computedClasses,
-    computedClassMap: computedClassMap,
-    computedColorMap: computedColorMap,
-    computedVoidClass: computedVoidClass,
-    computedDecimalStyle: computedDecimalStyle,
-    getTextStyle: getTextStyle({
-      props: props,
-      state: state
-    }),
-    handelKey: handelKey({
-      emit: emit,
-      props: props,
-      state: state
-    }),
+  Object.assign(api2, __spreadValues({
+    state,
+    computedText,
+    computedClasses,
+    computedClassMap,
+    computedColorMap,
+    computedVoidClass,
+    computedDecimalStyle,
+    getTextStyle: getTextStyle({ props, state }),
+    handelKey: handelKey({ emit, props, state }),
     computedActiveColor: computedActiveColor(props),
     computedActiveClass: computedActiveClass(props),
-    showDecimalIcon: showDecimalIcon({
-      props: props,
-      state: state
-    }),
-    getIconStyle: getIconStyle({
-      api: api,
-      props: props,
-      state: state
-    })
+    showDecimalIcon: showDecimalIcon({ props, state }),
+    getIconStyle: getIconStyle({ api: api2, props, state })
   }, changeValue.api));
-  return api;
-};
+  return api2;
+};
+export {
+  api,
+  renderless,
+  useChangeValue
+};