@opentinyvue/vue-renderless 3.21.0

package/radio/vue.js

@@ -0,0 +1,56 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  handleChange,
+  isGroup,
+  radioSize,
+  isDisabled,
+  isDisplayOnly,
+  tabIndex,
+  getModel,
+  setModel,
+  toggleEvent
+} from "./index";
+const api = ["state", "handleChange"];
+const renderless = (props, { onMounted, onBeforeUnmount, computed, reactive, inject }, { vm, parent, emit, constants, nextTick, dispatch }) => {
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  const api2 = {};
+  const state = reactive({
+    vertical: inject("radioVertical", false),
+    size: computed(() => props.size || inject("size", null) || (parent.tinyForm || {}).size),
+    focus: false,
+    radioGroup: null,
+    isGroup: computed(() => api2.isGroup()),
+    radioSize: computed(() => api2.radioSize()),
+    isDisabled: computed(() => api2.isDisabled()),
+    isDisplayOnly: computed(() => api2.isDisplayOnly() || (parent.tinyForm || {}).displayOnly),
+    tabIndex: computed(() => api2.tabIndex()),
+    formDisabled: computed(() => (parent.tinyForm || {}).disabled),
+    model: computed({
+      get: () => api2.getModel(),
+      set: (val) => api2.setModel(val)
+    })
+  });
+  Object.assign(api2, {
+    state,
+    radioSize: radioSize({ props, state }),
+    getModel: getModel({ props, state }),
+    isGroup: isGroup({ constants, parent, state }),
+    tabIndex: tabIndex({ props, state }),
+    isDisabled: isDisabled({ props, state }),
+    isDisplayOnly: isDisplayOnly({ props }),
+    setModel: setModel({ constants, dispatch, emit, props, vm, state }),
+    handleChange: handleChange({ constants, dispatch, emit, state, nextTick })
+  });
+  onMounted(() => {
+    dispatch("Tooltip", "tooltip-update");
+    toggleEvent({ props, vm, type: "add" });
+  });
+  onBeforeUnmount(() => {
+    toggleEvent({ props, vm, type: "remove" });
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/radio-button/index.js

@@ -0,0 +1,61 @@
+import "../chunk-G2ADBYYC.js";
+const handleChange = ({
+  constants,
+  nextTick,
+  dispatch,
+  state
+}) => () => {
+  nextTick(() => {
+    dispatch(constants.RADIO_GROUP, "handleChange", [state.value]);
+  });
+};
+const getValue = (state) => () => {
+  var _a;
+  return (_a = state.radioGroup) == null ? void 0 : _a.modelValue;
+};
+const setValue = ({ state }) => (val) => {
+  var _a;
+  return (_a = state.radioGroup) == null ? void 0 : _a.$emit("update:modelValue", val);
+};
+const getGroup = ({ constants, parent: $parent }) => () => {
+  let parent = $parent.$parent;
+  while (parent) {
+    if (parent.$options.componentName !== constants.RADIO_GROUP) {
+      parent = parent.$parent;
+    } else {
+      return parent;
+    }
+  }
+  return null;
+};
+const getStyle = (state) => () => {
+  var _a, _b, _c, _d;
+  return {
+    backgroundColor: ((_a = state.radioGroup) == null ? void 0 : _a.fill) || "",
+    borderColor: ((_b = state.radioGroup) == null ? void 0 : _b.fill) || "",
+    boxShadow: ((_c = state.radioGroup) == null ? void 0 : _c.fill) ? `-1px 0 0 0 ${state.radioGroup.fill}` : "",
+    color: ((_d = state.radioGroup) == null ? void 0 : _d.textColor) || ""
+  };
+};
+const toggleEvents = ({ vm, props }) => (isUnBind = false) => {
+  const radioEl = vm.$refs.radio;
+  Object.keys(props.events).forEach((ev) => {
+    radioEl[(isUnBind ? "remove" : "add") + "EventListener"](ev, props.events[ev]);
+  });
+};
+const keydownHandle = ({ state, props }) => () => {
+  state.value = state.isDisabled ? state.value : props.label;
+};
+const handleFocus = (state) => () => state.focus = true;
+const handleBlur = (state) => () => state.focus = false;
+export {
+  getGroup,
+  getStyle,
+  getValue,
+  handleBlur,
+  handleChange,
+  handleFocus,
+  keydownHandle,
+  setValue,
+  toggleEvents
+};

package/radio-button/vue.js

@@ -0,0 +1,60 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  handleChange,
+  getValue,
+  setValue,
+  getGroup,
+  getStyle,
+  toggleEvents,
+  keydownHandle,
+  handleFocus,
+  handleBlur
+} from "./index";
+const api = ["state", "handleChange", "keydownHandle", "handleFocus", "handleBlur"];
+const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount, inject }, { parent, dispatch, constants, nextTick, vm }) => {
+  const api2 = {
+    getGroup: getGroup({ constants, parent }),
+    toggleEvents: toggleEvents({ vm, props })
+  };
+  const state = reactive({
+    focus: false,
+    value: computed({
+      get: () => api2.getValue(),
+      set: (val) => api2.setValue(val)
+    }),
+    radioGroup: computed(() => api2.getGroup()),
+    activeStyle: computed(() => api2.getStyle()),
+    size: computed(() => {
+      var _a;
+      return (_a = state.radioGroup) == null ? void 0 : _a.state.radioGroupSize;
+    }),
+    isDisabled: computed(() => {
+      var _a;
+      return props.disabled || ((_a = state.radioGroup) == null ? void 0 : _a.disabled);
+    }),
+    tabIndex: computed(() => state.isDisabled || state.radioGroup && state.value !== props.label ? -1 : 0),
+    showTips: inject("showTips", false),
+    tipContent: props.tipContent
+  });
+  Object.assign(api2, {
+    state,
+    getValue: getValue(state),
+    getStyle: getStyle(state),
+    setValue: setValue({ state }),
+    handleChange: handleChange({ constants, dispatch, nextTick, state }),
+    keydownHandle: keydownHandle({ state, props }),
+    handleFocus: handleFocus(state),
+    handleBlur: handleBlur(state)
+  });
+  onMounted(() => {
+    api2.toggleEvents(false);
+  });
+  onBeforeUnmount(() => {
+    api2.toggleEvents(true);
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/radio-group/index.js

@@ -0,0 +1,49 @@
+import "../chunk-G2ADBYYC.js";
+import { KEY_CODE } from "../common";
+const handleKeydown = (parent) => (event) => {
+  const target = event.target;
+  const className = (target == null ? void 0 : target.nodeName) === "INPUT" ? "[type=radio]" : "[role=radio]";
+  const radios = parent.$el.querySelectorAll(className);
+  const length = radios.length;
+  const index = [].indexOf.call(radios, target);
+  const roleRadiosNodes = parent.$el.querySelectorAll("[role=radio]");
+  switch (event.keyCode) {
+    case KEY_CODE.ArrowDown:
+    case KEY_CODE.ArrowRight:
+      event.stopPropagation();
+      event.preventDefault();
+      if (index === length - 1) {
+        roleRadiosNodes[0].click();
+        roleRadiosNodes[0].focus();
+      } else {
+        roleRadiosNodes[index + 1].click();
+        roleRadiosNodes[index + 1].focus();
+      }
+      break;
+    case KEY_CODE.ArrowUp:
+    case KEY_CODE.ArrowLeft:
+      event.stopPropagation();
+      event.preventDefault();
+      if (index === 0) {
+        roleRadiosNodes[length - 1].click();
+        roleRadiosNodes[length - 1].focus();
+      } else {
+        roleRadiosNodes[index - 1].click();
+        roleRadiosNodes[index - 1].focus();
+      }
+      break;
+    default:
+      break;
+  }
+};
+const mounted = (parent) => () => {
+  const radios = parent.$el.querySelectorAll("[type=radio]");
+  const firstLabel = parent.$el.querySelectorAll("[role=radio]")[0];
+  if (![].some.call(radios, (radio) => radio.checked) && firstLabel) {
+    firstLabel.tabIndex = 0;
+  }
+};
+export {
+  handleKeydown,
+  mounted
+};

package/radio-group/vue.js

@@ -0,0 +1,34 @@
+import "../chunk-G2ADBYYC.js";
+import { handleKeydown, mounted } from "./index";
+const api = ["state", "handleKeydown"];
+const renderless = (props, { computed, onMounted, reactive, watch, provide }, { parent, dispatch }) => {
+  const state = reactive({
+    radioGroupSize: computed(() => props.size),
+    tag: "div",
+    activeStyle: props.fill
+  });
+  parent.$on("handleChange", (value) => {
+    parent.$emit("change", value);
+  });
+  const api2 = {
+    state,
+    dispatch,
+    onMounted: mounted(parent),
+    handleKeydown: handleKeydown(parent)
+  };
+  watch(
+    () => props.modelValue,
+    (value) => {
+      api2.dispatch("FormItem", "form.change", [value]);
+    }
+  );
+  onMounted(api2.onMounted);
+  provide("radioVertical", props.vertical);
+  provide("showTips", props.showTips);
+  provide("size", props.size);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/rate/index.js

@@ -0,0 +1,223 @@
+import "../chunk-G2ADBYYC.js";
+import { KEY_CODE } from "../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;
+};
+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;
+};
+const getTextStyle = ({ props, state }) => () => {
+  const color = props.radio && state.currentValue ? props.textColor : state.activeColor;
+  return {
+    color
+  };
+};
+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);
+};
+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);
+};
+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 (target.nodeName === "path") {
+      for (let i = 0; i < 10; i++) {
+        target = target[key];
+        if (target.nodeName === "svg") {
+          className = target[key].className;
+          target = target[key];
+          break;
+        }
+      }
+    }
+    if (className.includes(RATENODECLS)) {
+      target = target.querySelector(ICON_PREFIXCLS);
+    }
+    if (className.includes(DECIMALCLS)) {
+      target = target.parentNode;
+    }
+    state.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
+    state.currentValue = state.pointerAtLeftHalf ? item - 0.5 : item;
+  } else {
+    state.currentValue = item;
+  }
+  state.hoverIndex = item;
+};
+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;
+};
+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: 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"
+  };
+};
+const computedText = ({ props, state }) => {
+  let result = "";
+  let currentValue = 0;
+  if (!isNaN(Number(state.currentValue))) {
+    currentValue = Number(state.currentValue) > 0 ? Number(state.currentValue) : 0;
+  }
+  if (currentValue > props.texts.length) {
+    currentValue = props.texts.length;
+  }
+  if (props.showScore) {
+    result = props.scoreTemplate.replace(/\{\s*value\s*\}/, String(currentValue));
+    return result;
+  }
+  if (props.showText && currentValue > 0) {
+    currentValue = Math.ceil(currentValue) - 1;
+    result = props.texts[currentValue];
+  }
+  return result;
+};
+const computedDecimalStyle = ({ props, state }) => {
+  let width = "";
+  let clip = "";
+  let clipPath = "";
+  let fontSize = "";
+  if (props.disabled) {
+    width = `${props.modelValue * 100 - Math.floor(props.modelValue) * 100 < 50 ? 0 : 100}%`;
+  }
+  if (props.allowHalf) {
+    width = "";
+    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,
+    clip,
+    clipPath,
+    fontSize
+  };
+};
+const computedClasses = ({ props, state }) => {
+  let i = 0;
+  let result = [];
+  let threshold = state.currentValue;
+  if (props.radio) {
+    result = props.iconClasses;
+  } else {
+    if (props.allowHalf && state.currentValue !== Math.floor(state.currentValue)) {
+      threshold--;
+    }
+    while (i < threshold) {
+      result.push(state.activeClass);
+      i++;
+    }
+    while (i < props.max) {
+      result.push(state.voidClass);
+      i++;
+    }
+  }
+  return result;
+};
+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
+};

package/rate/vue.js

@@ -0,0 +1,131 @@
+import {
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import {
+  getTextStyle,
+  handelKey,
+  resetCurrentValue,
+  setCurrentValue,
+  selectValue,
+  showDecimalIcon,
+  getIconStyle,
+  computedText,
+  computedDecimalStyle,
+  computedClasses,
+  computedColorMap,
+  computedClassMap,
+  computedVoidClass,
+  computedActiveColor,
+  computedActiveClass
+} from "./index";
+import { on, off } from "../common/deps/dom";
+const api = [
+  "state",
+  "showDecimalIcon",
+  "getIconStyle",
+  "getTextStyle",
+  "selectValue",
+  "handelKey",
+  "setCurrentValue",
+  "resetCurrentValue"
+];
+const useChangeValue = ({
+  constants,
+  emit,
+  props,
+  reactive,
+  toRefs,
+  watch,
+  onMounted,
+  onUnmounted,
+  parent,
+  inject
+}) => {
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  const state = reactive({
+    hoverIndex: -1,
+    currentValue: props.modelValue
+  });
+  const api2 = {
+    selectValue: selectValue({ emit, props, state }),
+    resetCurrentValue: resetCurrentValue({ props, state })
+  };
+  api2.setCurrentValue = setCurrentValue({
+    constants,
+    props,
+    state,
+    parent,
+    api: api2
+  });
+  watch(
+    () => props.modelValue,
+    (value) => {
+      state.currentValue = value;
+    },
+    { immediate: true }
+  );
+  const updateMousePostion = (event) => {
+    state.mouseTarget = event.target;
+  };
+  onMounted(() => {
+    on(document, "mousemove", updateMousePostion);
+    on(document, "mouseleave", api2.resetCurrentValue);
+  });
+  onUnmounted(() => {
+    off(document, "mousemove", updateMousePostion);
+    off(document, "mouseleave", api2.resetCurrentValue);
+    state.mouseTarget = null;
+  });
+  return {
+    api: api2,
+    state: toRefs(state)
+  };
+};
+const renderless = (props, { computed, reactive, toRefs, watch, onMounted, onUnmounted, inject }, { constants, emit, parent }) => {
+  const api2 = {};
+  const changeValue = useChangeValue({
+    constants,
+    emit,
+    props,
+    reactive,
+    toRefs,
+    watch,
+    onMounted,
+    onUnmounted,
+    parent,
+    inject
+  });
+  const state = reactive(__spreadValues({
+    pointerAtLeftHalf: true,
+    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(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, state }),
+    getIconStyle: getIconStyle({ api: api2, props, state })
+  }, changeValue.api));
+  return api2;
+};
+export {
+  api,
+  renderless,
+  useChangeValue
+};