@opentiny/vue-renderless 3.11.7 → 3.12.0

package/menu-node/vue.js

@@ -0,0 +1,42 @@
+import "../chunk-G2ADBYYC.js";
+import { handelNodeClick } from "./index";
+const api = ["state", "handelNodeClick"];
+const renderless = (props, { reactive, watch, computed }, { dispatch, nextTick }) => {
+  const api2 = {};
+  const state = reactive({
+    renderNodes: false,
+    showNodes: false,
+    activeNodeId: null,
+    allExpandedKeysPath: computed(() => [...props.expandedKeysPath, ...props.activedKeysPath])
+  });
+  Object.assign(api2, {
+    state,
+    handelNodeClick: handelNodeClick({ state, dispatch })
+  });
+  watch(
+    () => props.activedKeys,
+    () => {
+      if (props.activedKeys && props.nodes.id === props.activedKeys && state.activeNodeId !== props.activedKeys) {
+        nextTick(() => {
+          state.activeNodeId = props.activedKeys;
+          dispatch("Menu", "node-changed", { id: props.activedKeys });
+        });
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => state.allExpandedKeysPath,
+    () => {
+      if (state.allExpandedKeysPath.length) {
+        state.showNodes = state.allExpandedKeysPath.includes(props.nodes.id);
+      }
+    },
+    { deep: true, immediate: true }
+  );
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/modal/index.js

@@ -48,11 +48,13 @@ const mounted = ({
   if (props.escClosable) {
     on(document, "keydown", api.handleGlobalKeydownEvent);
   }
+  on(window, "hashchange", api.handleHashChange);
   document.body.appendChild(parent.$el);
 };
 const beforeUnmouted = ({ api, parent, isMobileFirstMode }) => () => {
   isMobileFirstMode && off(window, "resize", api.resetDragStyle);
   off(document, "keydown", api.handleGlobalKeydownEvent);
+  off(window, "hashchange", api.handleHashChange);
   api.removeMsgQueue();
   if (parent.$el.parentNode) {
     parent.$el.parentNode.removeChild(parent.$el);
@@ -202,6 +204,9 @@ const handleGlobalKeydownEvent = (api) => (event) => {
     api.close("esc");
   }
 };
+const handleHashChange = (api) => () => {
+  api.close("close");
+};
 const getBox = ({ vm }) => () => vm.$refs.modalBox;
 const maximize = ({
   api,
@@ -638,6 +643,7 @@ export {
   getBox,
   handleEvent,
   handleGlobalKeydownEvent,
+  handleHashChange,
   maximize,
   mounted,
   mousedownEvent,

package/modal/vue.js

@@ -24,7 +24,8 @@ import {
   cancelEvent,
   open,
   resetDragStyle,
-  computedBoxStyle
+  computedBoxStyle,
+  handleHashChange
 } from "./index";
 const api = [
   "state",
@@ -82,6 +83,7 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
     removeMsgQueue: removeMsgQueue({ api: api2, parent }),
     close: close({ emit, parent, props, state }),
     handleGlobalKeydownEvent: handleGlobalKeydownEvent(api2),
+    handleHashChange: handleHashChange(api2),
     maximize: maximize({ api: api2, nextTick, props, state, isMobileFirstMode }),
     revert: revert({ api: api2, nextTick, state, isMobileFirstMode }),
     toggleZoomEvent: toggleZoomEvent({ api: api2, emit, parent, state, isMobileFirstMode }),

package/numeric/index.js

@@ -16,11 +16,14 @@ const initService = (service) => {
   };
 };
 const getDecimal = (props) => (value) => getMiniDecimal(value, props.plugin);
-const watchValue = ({ api, state }) => (value) => {
+const watchValue = ({ api, state, nextTick }) => (value) => {
   if (value === state.currentValue) {
     return;
   }
   api.setCurrentValue(value);
+  nextTick(() => {
+    api.dispatchDisplayedValue();
+  });
 };
 const toPrecision = (state) => ({ num, precision }) => {
   if (precision === void 0) {
@@ -202,7 +205,7 @@ const handleInput = ({ state, api, emit, props }) => (event) => {
   if (value !== "-" && api.getDecimal(value).isNaN()) {
     emitError();
     if (!(value === "" && props.allowEmpty)) {
-      value = value.indexOf("e") === -1 ? state.lastInput : value;
+      value = !value.includes("e") ? state.lastInput : value;
     }
   } else {
     value = value.split(".").map((a, i) => {
@@ -296,12 +299,25 @@ const dispatchDisplayedValue = ({ state, api, dispatch }) => () => {
 const getDisplayedValue = ({ state, props }) => () => {
   return state.displayValue || state.displayValue === 0 ? state.displayValue + " " + (props.unit || "") : "-";
 };
+const getDisplayOnlyText = ({ parent, state, props }) => () => {
+  const showEmptyValue = props.showEmptyValue || (parent.tinyForm || {}).showEmptyValue;
+  if (showEmptyValue) {
+    return state.displayValue;
+  } else {
+    if (state.displayValue || state.displayValue === 0) {
+      return state.displayValue;
+    } else {
+      return "-";
+    }
+  }
+};
 export {
   decrease,
   dispatchDisplayedValue,
   displayValue,
   focus,
   getDecimal,
+  getDisplayOnlyText,
   getDisplayedValue,
   getNumPecision,
   getPrecision,

package/numeric/vue.js

@@ -24,7 +24,8 @@ import {
   unmounted,
   initService,
   dispatchDisplayedValue,
-  getDisplayedValue
+  getDisplayedValue,
+  getDisplayOnlyText
 } from "./index";
 const api = [
   "state",
@@ -56,7 +57,8 @@ const initState = ({ reactive, computed, props, api: api2, $service, parent }) =
     maxDisabled: computed(() => !props.circulate && state.currentValue >= props.max || state.formDisabled),
     controlsAtRight: computed(() => props.controls && props.controlsPosition === "right"),
     format: computed(() => getUnitPrecision({ service: $service, props })),
-    isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly)
+    isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
+    displayOnlyText: computed(() => api2.getDisplayOnlyText())
   });
   return state;
 };
@@ -68,7 +70,8 @@ const initApi = ({
   refs,
   emit,
   dispatch,
-  constants
+  constants,
+  nextTick
 }) => {
   Object.assign(api2, {
     state,
@@ -91,10 +94,11 @@ const initApi = ({
     handleInputChange: handleInputChange({ api: api2 }),
     mouseEvent: mouseEvent({ api: api2, props, state }),
     handleBlur: handleBlur({ constants, dispatch, emit, props, state, api: api2 }),
-    watchValue: watchValue({ api: api2, state }),
+    watchValue: watchValue({ api: api2, state, nextTick }),
     setCurrentValue: setCurrentValue({ api: api2, constants, dispatch, emit, props, state }),
     dispatchDisplayedValue: dispatchDisplayedValue({ api: api2, state, dispatch }),
-    getDisplayedValue: getDisplayedValue({ state, props })
+    getDisplayedValue: getDisplayedValue({ state, props }),
+    getDisplayOnlyText: getDisplayOnlyText({ parent, props, state })
   });
   api2.getDecimal(0);
 };
@@ -107,12 +111,12 @@ const initWatch = ({
   watch(() => props.modelValue, api2.watchValue, { immediate: true });
   watch(() => state.isDisplayOnly, api2.dispatchDisplayedValue);
 };
-const renderless = (props, { computed, onMounted, onUpdated, onUnmounted, reactive, watch, inject }, { parent, emit, refs, constants, dispatch, service }) => {
+const renderless = (props, { computed, onMounted, onUpdated, onUnmounted, reactive, watch, inject }, { parent, emit, refs, constants, dispatch, service, nextTick }) => {
   const api2 = {};
   const $service = initService(service);
   const state = initState({ reactive, computed, props, api: api2, $service, parent });
   parent.tinyForm = parent.tinyForm || inject("form", null);
-  initApi({ api: api2, props, state, parent, refs, emit, dispatch, constants });
+  initApi({ api: api2, props, state, parent, refs, emit, dispatch, constants, nextTick });
   initWatch({ state, watch, props, api: api2 });
   onMounted(() => {
     api2.dispatchDisplayedValue();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.11.7",
+  "version": "3.12.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [

package/popconfirm/index.js

@@ -5,22 +5,31 @@ const hide = ({ state, emit }) => () => {
     state.isLock = false;
   }, 300);
   state.showPopover = false;
-  emit("hide", state);
+  emit("hide", state.showPopover);
 };
-const show = ({ state, emit, props }) => (trigger) => {
-  if (trigger && props.trigger !== trigger || state.isLock || state.showPopover) {
+const show = ({ state, props, emit }) => (trigger) => {
+  if ((trigger ? props.trigger !== trigger : !props.reference) || state.isLock || state.showPopover) {
     return;
   }
   state.showPopover = true;
-  emit("show", state);
+  emit("show", state.showPopover);
 };
 const confirm = ({ state, emit }) => () => {
   state.showPopover = false;
-  emit("confirm", state);
-  emit("hide", state);
+  emit("confirm", state.showPopover);
+  emit("hide", state.showPopover);
+};
+const handleEmit = ({ state, emit, vm }) => (type) => {
+  let { events = {} } = vm;
+  if (events[type]) {
+    events[type].call(vm, { $modal: vm, type });
+  } else {
+    emit(type, state.showPopover);
+  }
 };
 export {
   confirm,
+  handleEmit,
   hide,
   show
 };

package/popconfirm/vue.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
-import { show, hide, confirm } from "./index";
-const api = ["state", "show", "hide", "confirm"];
-const renderless = (props, { computed, reactive }, { emit, constants, designConfig }) => {
+import { show, hide, confirm, handleEmit } from "./index";
+const api = ["state", "show", "hide", "confirm", "handleEmit"];
+const renderless = (props, { computed, reactive }, { emit, constants, designConfig, vm }) => {
   var _a;
   const api2 = {};
   const designIcon = (_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a[props.type];
@@ -16,7 +16,8 @@ const renderless = (props, { computed, reactive }, { emit, constants, designConf
     state,
     show: show({ state, emit, props }),
     hide: hide({ state, emit }),
-    confirm: confirm({ state, emit })
+    confirm: confirm({ state, emit }),
+    handleEmit: handleEmit({ state, emit, vm })
   });
   return api2;
 };

package/pull-refresh-mobile-first/index.js

@@ -0,0 +1,243 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import { on, off, getScrollTop, preventDefault } from "../common/deps/dom";
+const onTouchstart = ({ state }) => (event) => {
+  state.draggposition = event.touches[0].clientY;
+};
+const onTouchmove = ({ vm, state }) => (event) => {
+  if (!state.disabled) {
+    if (event.touches[0].clientY < state.draggposition || vm.$refs.track.parentNode.scrollTop > 10) {
+      return;
+    }
+    state.replaces = state.pullingText;
+    state.animationDuration = 0;
+    state.translate3d = (event.touches[0].clientY - state.draggposition) / 2;
+    state.styleObj = {
+      "transition-duration": "0ms",
+      transform: "translate3d(0px," + state.translate3d + "px,0px)"
+    };
+    state.checkStatus = false;
+    if (state.translate3d > state.headHeight) {
+      state.replaces = state.loosingText;
+    } else {
+      state.replaces = state.pullingText;
+    }
+  }
+};
+const onTouchend = ({ emit, props, state }) => () => {
+  state.animationDuration = props.animationDuration;
+  if (state.translate3d >= state.headHeight) {
+    state.translate3d = state.headHeight;
+    state.checkStatus = true;
+    state.styleObj = {
+      "transition-duration": state.animationDuration + "ms",
+      transform: "translate3d(0px," + state.translate3d + "px,0px)"
+    };
+    emit("update:modelValue", true);
+    emit("refresh");
+  } else {
+    state.styleObj = {
+      "transition-duration": state.animationDuration + "ms"
+    };
+    state.translate3d = 0;
+    state.checkStatus = false;
+    state.replaces = "";
+  }
+};
+const mountedHandler = ({ api, vm, state }) => () => {
+  state.styleObj = { "transition-duration": state.animationDuration + "ms" };
+  const track = vm.$refs.track;
+  on(track, "touchstart", api.onTouchstart);
+  on(track, "touchmove", api.onTouchmove);
+  on(track, "touchend", api.onTouchend);
+};
+const beforeUnmountHandler = ({ api, vm }) => () => {
+  const track = vm.$refs.track;
+  off(track, "touchstart", api.onTouchstart);
+  off(track, "touchmove", api.onTouchmove);
+  off(track, "touchend", api.onTouchend);
+};
+const watchModelValue = ({ value, state }) => {
+  if (!value) {
+    if (state.successText) {
+      state.checkStatus = false;
+      state.replaces = state.successText;
+      setTimeout(() => {
+        state.translate3d = 0;
+        state.styleObj = {
+          "transition-duration": state.animationDuration + "ms"
+        };
+        state.replaces = "";
+      }, state.successDuration);
+    } else {
+      state.translate3d = 0;
+      state.checkStatus = false;
+      state.replaces = "";
+      state.styleObj = {
+        "transition-duration": state.animationDuration + "ms"
+      };
+    }
+  }
+};
+const isTouchable = ({ props, state, constants }) => () => ![constants.STATUS.LOADING, constants.STATUS.SUCCESS].includes(state.status) && !props.disabled;
+const ease = ({ state, props }) => (distance) => {
+  const pullDistance = +(props.pullDistance || state.headHeight);
+  if (distance > pullDistance) {
+    if (distance < pullDistance * 2) {
+      distance = pullDistance + (distance - pullDistance) / 2;
+    } else {
+      distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
+    }
+  }
+  return Math.round(distance);
+};
+const setStatus = ({ emit, props, state, constants }) => (distance, isLoading) => {
+  const pullDistance = +(props.pullDistance || state.headHeight);
+  state.distance = distance;
+  if (isLoading) {
+    state.status = constants.STATUS.LOADING;
+  } else if (distance === 0) {
+    state.status = constants.STATUS.NORMAL;
+  } else if (distance < pullDistance) {
+    state.status = constants.STATUS.PULLING;
+  } else {
+    state.status = constants.STATUS.LOOSING;
+  }
+  emit("change", { status: state.status, distance });
+};
+const getStatusText = ({ props, state, t, constants }) => () => {
+  const { status } = state;
+  if (status === constants.STATUS.NORMAL)
+    return "";
+  return props[`${status}Text`] || t(status);
+};
+const showSuccessTip = ({ api, props, state, constants }) => () => {
+  state.status = constants.STATUS.SUCCESS;
+  setTimeout(() => api.setStatus(0), +props.successDuration);
+};
+const checkPosition = ({ state, touchState }) => (event) => {
+  state.reachTop = getScrollTop(state.scrollParent) === 0;
+  if (state.reachTop) {
+    state.duration = 0;
+    touchState.start(event);
+  }
+};
+const onTouchStart = (api) => (event) => {
+  if (!api.checkSelfSimulate(event))
+    return;
+  if (api.isTouchable()) {
+    api.checkPosition(event);
+  }
+};
+const onTouchMove = ({ api, state, touchState }) => (event) => {
+  if (!api.checkSelfSimulate(event))
+    return;
+  if (api.isTouchable()) {
+    if (!state.reachTop) {
+      api.checkPosition(event);
+    }
+    const { deltaY } = touchState;
+    touchState.move(event);
+    if (state.reachTop && deltaY.value >= 0 && touchState.isVertical()) {
+      preventDefault(event);
+      api.setStatus(api.ease(deltaY.value));
+    }
+  }
+};
+const onTouchEnd = ({ api, emit, nextTick, state, props, touchState, constants }) => (event) => {
+  if (!api.checkSelfSimulate(event))
+    return;
+  if (state.reachTop && touchState.deltaY.value && api.isTouchable()) {
+    state.duration = +props.animationDuration;
+    if (state.status === constants.STATUS.LOOSING) {
+      api.setStatus(+state.headHeight, true);
+      emit("update:modelValue", true);
+      nextTick(() => emit("refresh"));
+    } else {
+      api.setStatus(0);
+    }
+  }
+};
+const watchModelValueChange = ({ api, slots, state, props }) => (value) => {
+  state.duration = +props.animationDuration;
+  if (value) {
+    api.setStatus(+state.headHeight, true);
+  } else if (slots.success || props.successText) {
+    api.showSuccessTip();
+  } else {
+    api.setStatus(0, false);
+  }
+};
+const watchStatusChange = ({ api, state, props, Loading, vm, constants, slots }) => (value, oldValue) => {
+  const headEl = vm.$refs.head && vm.$refs.head.$el;
+  if (headEl && !slots[constants.STATUS.LOADING]) {
+    const { LOADING } = constants.STATUS;
+    const enterLoading = value === LOADING && oldValue !== LOADING;
+    const exitLoading = value !== LOADING && oldValue === LOADING;
+    const defLoadingOptions = { "tiny_mode": props.tiny_mode, target: headEl, text: api.getStatusText() };
+    if (props.loadingOptions) {
+      if (props.loadingOptions.enterLoading) {
+        if (enterLoading) {
+          props.loadingOptions.enterLoading(__spreadProps(__spreadValues({}, defLoadingOptions), { component: Loading }));
+        }
+        if (exitLoading && props.loadingOptions.exitLoading) {
+          props.loadingOptions.exitLoading();
+        }
+      } else {
+        if (enterLoading) {
+          if (props.loadingOptions.customClass)
+            defLoadingOptions.customClass = props.loadingOptions.customClass;
+          if (props.loadingOptions.spinner)
+            defLoadingOptions.spinner = props.loadingOptions.spinner;
+          state.$loadingInstance = Loading.service(defLoadingOptions);
+        }
+        if (exitLoading) {
+          state.$loadingInstance.close();
+        }
+      }
+    }
+  }
+};
+const parseHeaderHeight = ({ state, props, constants }) => () => {
+  const { headHeight } = props;
+  const heightRE = /^(\d+)(px|rem)$/;
+  let stateHeadHeight;
+  if (typeof headHeight === "number" && (headHeight <= 0 || Object.is(headHeight, NaN)) || headHeight === "") {
+    stateHeadHeight = constants.DEFAULT_HEAD_HEIGHT;
+  } else if (typeof headHeight === "string" && heightRE.test(headHeight)) {
+    const matches = heightRE.exec(headHeight);
+    if (matches[2] === "px") {
+      stateHeadHeight = Number(matches[1]);
+    } else if (matches[2] === "rem") {
+      stateHeadHeight = Number(matches[1]) * 16;
+    }
+  } else {
+    stateHeadHeight = Number(headHeight);
+  }
+  state.headHeight = stateHeadHeight;
+  state.headerHeight = `${stateHeadHeight}px`;
+};
+const checkSelfSimulate = ({ state, props }) => (event) => props.selfSimulate && event && event.isTinySimulate ? state.scrollTrack && state.scrollTrack === event.target : true;
+export {
+  beforeUnmountHandler,
+  checkPosition,
+  checkSelfSimulate,
+  ease,
+  getStatusText,
+  isTouchable,
+  mountedHandler,
+  onTouchEnd,
+  onTouchMove,
+  onTouchStart,
+  onTouchend,
+  onTouchmove,
+  onTouchstart,
+  parseHeaderHeight,
+  setStatus,
+  showSuccessTip,
+  watchModelValue,
+  watchModelValueChange,
+  watchStatusChange
+};

package/pull-refresh-mobile-first/vue.js

@@ -0,0 +1,116 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  mountedHandler,
+  beforeUnmountHandler,
+  onTouchstart,
+  onTouchmove,
+  onTouchend,
+  isTouchable,
+  ease,
+  setStatus,
+  getStatusText,
+  showSuccessTip,
+  checkPosition,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  watchModelValueChange,
+  watchStatusChange,
+  parseHeaderHeight,
+  checkSelfSimulate
+} from "./index";
+import { getScrollParent } from "../common/deps/dom";
+import { useTouch } from "../common/deps/useTouch";
+import { useEventListener } from "../common/deps/useEventListener";
+import emulate from "../common/deps/touch-emulator";
+emulate();
+const api = ["state", "constants", "onTouchStart", "onTouchEnd", "getStatusText"];
+const renderless = (props, { ref, unref, toRef, isRef, reactive, computed, watch, onMounted, onUnmounted, onActivated, onDeactivated }, { vm, emit, constants, t, nextTick, slots }, { Loading }) => {
+  const api2 = {};
+  const state = reactive({
+    replaces: "",
+    styleObj: {},
+    translate3d: 0,
+    draggposition: 0,
+    value: props.modelValue,
+    checkStatus: false,
+    headHeight: props.headHeight,
+    pullingText: props.pullingText,
+    loosingText: props.loosingText,
+    successText: props.successText,
+    successDuration: props.successDuration,
+    animationDuration: props.animationDuration,
+    disabled: computed(() => props.disabled),
+    /* mf state */
+    reachTop: false,
+    scrollParent: null,
+    scrollTrack: null,
+    status: constants.STATUS.NORMAL,
+    distance: 0,
+    duration: 0,
+    headerHeight: ""
+  });
+  const touchState = {};
+  Object.assign(api2, {
+    state,
+    constants,
+    onTouchstart: onTouchstart({ state }),
+    onTouchmove: onTouchmove({ vm, state }),
+    onTouchend: onTouchend({ emit, props, state }),
+    mountedHandler: mountedHandler({ api: api2, vm, state }),
+    beforeUnmountHandler: beforeUnmountHandler({ api: api2, vm }),
+    useTouch: useTouch(ref),
+    useEventListener: useEventListener({
+      unref,
+      isRef,
+      watch,
+      nextTick,
+      onMounted,
+      onUnmounted,
+      onActivated,
+      onDeactivated
+    }),
+    isTouchable: isTouchable({ props, state, constants }),
+    ease: ease({ state, props }),
+    setStatus: setStatus({ emit, props, state, constants }),
+    getStatusText: getStatusText({ props, state, t, constants }),
+    showSuccessTip: showSuccessTip({ api: api2, props, state, constants }),
+    checkPosition: checkPosition({ state, touchState }),
+    onTouchStart: onTouchStart(api2),
+    onTouchMove: onTouchMove({ api: api2, state, touchState }),
+    onTouchEnd: onTouchEnd({ api: api2, emit, nextTick, state, props, touchState, constants }),
+    watchModelValueChange: watchModelValueChange({ api: api2, slots, state, props }),
+    watchStatusChange: watchStatusChange({ api: api2, state, props, Loading, vm, constants, slots }),
+    parseHeaderHeight: parseHeaderHeight({ state, props, constants }),
+    checkSelfSimulate: checkSelfSimulate({ state, props })
+  });
+  watch(
+    () => props.modelValue,
+    (value) => api2.watchModelValueChange(value)
+  );
+  watch(
+    () => state.status,
+    (value, oldValue) => api2.watchStatusChange(value, oldValue)
+  );
+  watch(
+    () => props.headHeight,
+    () => api2.parseHeaderHeight(),
+    { immediate: true }
+  );
+  Object.assign(touchState, api2.useTouch());
+  state.stopHandle = api2.useEventListener("touchmove", api2.onTouchMove, { target: toRef(state, "scrollTrack") });
+  onMounted(() => {
+    state.scrollParent = getScrollParent(vm.$refs.root);
+    state.scrollTrack = vm.$refs.track;
+  });
+  onUnmounted(() => {
+    typeof state.stopHandle === "function" && state.stopHandle();
+    state.scrollParent = null;
+    state.scrollTrack = null;
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/qr-code/index.js

@@ -0,0 +1,54 @@
+import "../chunk-G2ADBYYC.js";
+const change = (emit) => () => {
+  emit("change");
+};
+function getSizeStr({ props, state }) {
+  state.sizeStr = `${props.size}px`;
+  const maxIconSize = props.size * 0.3;
+  if (props.iconSize > maxIconSize) {
+    state.iconSizeStr = `${maxIconSize}px`;
+  } else {
+    state.iconSizeStr = `${props.iconSize}px`;
+  }
+}
+function getQrCodeCanvas({ props, vm, QRCode }) {
+  const container = vm.$refs.wrapperRef;
+  const qrcodeRef = vm.$refs.qrcodeRef;
+  const defaultPadding = (container == null ? void 0 : container.style.padding) || "12px";
+  const errorCorrectionLevel = props.level && props.level[0] || "M";
+  const qrCodeData = {
+    errorCorrectionLevel,
+    type: "image/png",
+    width: props.size - getCssLength(defaultPadding) * 2,
+    margin: 0,
+    small: true,
+    color: {
+      dark: props.color,
+      light: "#ffffff00"
+      // 背景设为透明改用外框设定背景色
+    }
+  };
+  QRCode.toCanvas(qrcodeRef, props.value, qrCodeData);
+}
+function setIconBackground({ vm, state }) {
+  const container = vm.$refs.wrapperRef;
+  if (container == null ? void 0 : container.style.backgroundColor) {
+    state.iconBackgroudColor = container == null ? void 0 : container.style.backgroundColor;
+  }
+}
+function getCssLength(style) {
+  return style ? Number(style.replace("px", "")) : 0;
+}
+const draw = ({ props, state, vm, QRCode }) => () => {
+  getSizeStr({ props, state });
+  getQrCodeCanvas({ props, vm, QRCode });
+  setIconBackground({ vm, state });
+};
+export {
+  change,
+  draw,
+  getCssLength,
+  getQrCodeCanvas,
+  getSizeStr,
+  setIconBackground
+};