lew-ui 1.7.20 → 1.7.22

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot, onMounted, getCurrentInstance, onUnmounted, h, watch, ref, readonly, getCurrentScope, onScopeDispose, nextTick, shallowRef, reactive, resolveComponent, resolveDirective, createBlock, withCtx, createElementVNode, createVNode, Transition, createCommentVNode, withDirectives, withModifiers, Fragment, renderList, createTextVNode, toDisplayString, vShow, pushScopeId, popScopeId, isRef, vModelDynamic, vModelText, TransitionGroup, mergeProps, toRaw, toRefs, vModelCheckbox, onActivated, Teleport, createApp } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot, onMounted, getCurrentInstance, onUnmounted, h, watch, getCurrentScope, onScopeDispose, ref, readonly, nextTick, reactive, shallowRef, resolveComponent, resolveDirective, createBlock, withCtx, createElementVNode, createVNode, Transition, createCommentVNode, withDirectives, withModifiers, Fragment, renderList, createTextVNode, toDisplayString, vShow, pushScopeId, popScopeId, isRef, vModelDynamic, watchEffect, vModelText, TransitionGroup, mergeProps, toRaw, toRefs, vModelCheckbox, onActivated, Teleport, createApp } from "vue";
 function _mergeNamespaces(n, m) {
   m.forEach(function(e) {
     e && typeof e !== "string" && !Array.isArray(e) && Object.keys(e).forEach(function(k) {
@@ -261,7 +261,7 @@ function useLewTo() {
     lewTo
   };
 }
-function useEventListener$1(target, event, callback) {
+function useEventListener$2(target, event, callback) {
   onMounted(() => target.addEventListener(event, callback, true));
   onUnmounted(() => target.removeEventListener(event, callback, true));
 }
@@ -1300,8 +1300,8 @@ var feather$2 = { exports: {} };
         var getOwnPropertyNamesModule = __webpack_require__("./node_modules/core-js/internals/object-get-own-property-names.js");
         var getOwnPropertySymbolsModule = __webpack_require__("./node_modules/core-js/internals/object-get-own-property-symbols.js");
         var anObject = __webpack_require__("./node_modules/core-js/internals/an-object.js");
-        var Reflect = global2.Reflect;
-        module2.exports = Reflect && Reflect.ownKeys || function ownKeys(it) {
+        var Reflect2 = global2.Reflect;
+        module2.exports = Reflect2 && Reflect2.ownKeys || function ownKeys(it) {
           var keys = getOwnPropertyNamesModule.f(anObject(it));
           var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
           return getOwnPropertySymbols ? keys.concat(getOwnPropertySymbols(it)) : keys;
@@ -2097,6 +2097,47 @@ function unrefElement$1(elRef) {
   return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
 }
 const defaultWindow$1 = isClient ? window : void 0;
+function useEventListener$1(...args) {
+  let target;
+  let events;
+  let listeners;
+  let options;
+  if (isString(args[0]) || Array.isArray(args[0])) {
+    [events, listeners, options] = args;
+    target = defaultWindow$1;
+  } else {
+    [target, events, listeners, options] = args;
+  }
+  if (!target)
+    return noop;
+  if (!Array.isArray(events))
+    events = [events];
+  if (!Array.isArray(listeners))
+    listeners = [listeners];
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn2) => fn2());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, options2) => {
+    el.addEventListener(event, listener, options2);
+    return () => el.removeEventListener(event, listener, options2);
+  };
+  const stopWatch = watch(() => [unrefElement$1(target), resolveUnref(options)], ([el, options2]) => {
+    cleanup();
+    if (!el)
+      return;
+    cleanups.push(...events.flatMap((event) => {
+      return listeners.map((listener) => register(el, event, listener, options2));
+    }));
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
 function useAsyncState(promise, initialState, options) {
   const {
     immediate = true,
@@ -2274,6 +2315,103 @@ const useImage = (options, asyncStateOptions = {}) => {
   watch(() => resolveUnref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
   return state;
 };
+const DefaultMagicKeysAliasMap = {
+  ctrl: "control",
+  command: "meta",
+  cmd: "meta",
+  option: "alt",
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright"
+};
+function useMagicKeys(options = {}) {
+  const {
+    reactive: useReactive = false,
+    target = defaultWindow$1,
+    aliasMap = DefaultMagicKeysAliasMap,
+    passive: passive2 = true,
+    onEventFired = noop
+  } = options;
+  const current = reactive(/* @__PURE__ */ new Set());
+  const obj = {
+    toJSON() {
+      return {};
+    },
+    current
+  };
+  const refs = useReactive ? reactive(obj) : obj;
+  const metaDeps = /* @__PURE__ */ new Set();
+  const usedKeys = /* @__PURE__ */ new Set();
+  function setRefs(key, value) {
+    if (key in refs) {
+      if (useReactive)
+        refs[key] = value;
+      else
+        refs[key].value = value;
+    }
+  }
+  function reset2() {
+    current.clear();
+    for (const key of usedKeys)
+      setRefs(key, false);
+  }
+  function updateRefs(e, value) {
+    var _a2, _b;
+    const key = (_a2 = e.key) == null ? void 0 : _a2.toLowerCase();
+    const code = (_b = e.code) == null ? void 0 : _b.toLowerCase();
+    const values = [code, key].filter(Boolean);
+    if (key) {
+      if (value)
+        current.add(key);
+      else
+        current.delete(key);
+    }
+    for (const key2 of values) {
+      usedKeys.add(key2);
+      setRefs(key2, value);
+    }
+    if (key === "meta" && !value) {
+      metaDeps.forEach((key2) => {
+        current.delete(key2);
+        setRefs(key2, false);
+      });
+      metaDeps.clear();
+    } else if (typeof e.getModifierState === "function" && e.getModifierState("Meta") && value) {
+      [...current, ...values].forEach((key2) => metaDeps.add(key2));
+    }
+  }
+  useEventListener$1(target, "keydown", (e) => {
+    updateRefs(e, true);
+    return onEventFired(e);
+  }, { passive: passive2 });
+  useEventListener$1(target, "keyup", (e) => {
+    updateRefs(e, false);
+    return onEventFired(e);
+  }, { passive: passive2 });
+  useEventListener$1("blur", reset2, { passive: true });
+  useEventListener$1("focus", reset2, { passive: true });
+  const proxy = new Proxy(refs, {
+    get(target2, prop, rec) {
+      if (typeof prop !== "string")
+        return Reflect.get(target2, prop, rec);
+      prop = prop.toLowerCase();
+      if (prop in aliasMap)
+        prop = aliasMap[prop];
+      if (!(prop in refs)) {
+        if (/[+_-]/.test(prop)) {
+          const keys = prop.split(/[+_-]/g).map((i) => i.trim());
+          refs[prop] = computed(() => keys.every((key) => unref(proxy[key])));
+        } else {
+          refs[prop] = ref(false);
+        }
+      }
+      const r = Reflect.get(target2, prop, rec);
+      return useReactive ? unref(r) : r;
+    }
+  });
+  return proxy;
+}
 var SwipeDirection;
 (function(SwipeDirection2) {
   SwipeDirection2["UP"] = "UP";
@@ -3040,6 +3178,9 @@ const _sfc_main$B = defineComponent({
         if (v || v === 0) {
           selectItem(v, "watch");
         }
+        if (!state.isInit) {
+          init();
+        }
       }
     );
     const initActiveItemStyle = (index2) => {
@@ -3067,11 +3208,11 @@ const _sfc_main$B = defineComponent({
       let index2 = props.options.findIndex((e) => e.value === tabsValue.value);
       if (index2 >= 0) {
         state.activeItemStyle = `width:${itemRef.value[index2].offsetWidth}px;transform: translateX(${itemRef.value[index2].offsetLeft}px);`;
-        tabsScroll();
-        setTimeout(() => {
-          state.isInit = true;
-        }, 100);
       }
+      tabsScroll();
+      setTimeout(() => {
+        state.isInit = true;
+      }, 100);
     };
     const selectItem = (value, type) => {
       const index2 = props.options.findIndex((e) => value === e.value);
@@ -3116,8 +3257,8 @@ const _sfc_main$B = defineComponent({
     });
     const tabsScroll = () => {
       if (tabsRef.value.scrollWidth > tabsRef.value.clientWidth) {
-        if (tabsRef.value.scrollLeft >= 0) {
-          if (tabsRef.value.scrollLeft >= tabsRef.value.scrollWidth - tabsRef.value.clientWidth - 10) {
+        if (tabsRef.value.scrollLeft > 50) {
+          if (tabsRef.value.scrollLeft >= tabsRef.value.scrollWidth - tabsRef.value.clientWidth - 50) {
             state.hidLine = "right";
           } else {
             state.hidLine = "";
@@ -3471,6 +3612,11 @@ const inputProps = {
     type: String,
     default: "",
     description: "\u540E\u7F00\u63D0\u793A"
+  },
+  okByEnter: {
+    type: Boolean,
+    default: false,
+    description: "\u662F\u5426\u6309\u56DE\u8F66\u952E\u786E\u8BA4"
   }
 };
 var LewInput_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -3527,11 +3673,13 @@ const _sfc_main$x = defineComponent({
     "blur",
     "focus",
     "change",
-    "input"
+    "input",
+    "ok"
   ],
   setup(__props, { expose: __expose, emit }) {
     var _a2;
     const props = __props;
+    const { enter } = useMagicKeys();
     const app = (_a2 = getCurrentInstance()) == null ? void 0 : _a2.appContext.app;
     if (app && !app.directive("tooltip")) {
       app.use(LewTooltip);
@@ -3646,6 +3794,13 @@ const _sfc_main$x = defineComponent({
       );
       return (item == null ? void 0 : item.label) || "";
     });
+    if (props.okByEnter) {
+      watch(enter, (v) => {
+        if (v && state.isFocus && modelValue.value) {
+          emit("ok", modelValue.value);
+        }
+      });
+    }
     __expose({ toFocus });
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
@@ -3876,6 +4031,11 @@ const textareaProps = {
     type: [Number, String],
     default: "",
     description: "\u9AD8\u5EA6"
+  },
+  okByEnter: {
+    type: Boolean,
+    default: false,
+    description: "\u662F\u5426\u6309\u56DE\u8F66\u952E\u786E\u8BA4\uFF08\u5F53\u5F00\u542F\u65F6\uFF0C\u6309\u4E0Bshift+enter\u53EF\u4EE5\u8FDB\u884C\u6362\u884C\uFF09"
   }
 };
 var LewTextarea_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -3895,11 +4055,13 @@ const _sfc_main$w = defineComponent({
     "input",
     "focus",
     "change",
-    "textarea"
+    "textarea",
+    "ok"
   ],
   setup(__props, { expose: __expose, emit }) {
     var _a2;
     const props = __props;
+    const { shift, enter } = useMagicKeys();
     const app = (_a2 = getCurrentInstance()) == null ? void 0 : _a2.appContext.app;
     if (app && !app.directive("tooltip")) {
       app.use(LewTooltip);
@@ -3971,6 +4133,17 @@ const _sfc_main$w = defineComponent({
       let { width, height } = props;
       return `width:${any2px(width)};height:${any2px(height)};`;
     });
+    if (props.okByEnter) {
+      watchEffect(() => {
+        var _a3;
+        if (shift.value && enter.value) {
+          return;
+        } else if (enter.value && state.isFocus && modelValue.value) {
+          (_a3 = lewTextareaRef.value) == null ? void 0 : _a3.blur();
+          emit("ok", modelValue.value);
+        }
+      });
+    }
     __expose({ toFocus });
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
@@ -13075,6 +13248,11 @@ const modalProps = {
     default: false,
     description: "\u662F\u5426\u9690\u85CF\u5E95\u90E8\u6309\u94AE"
   },
+  closeByEsc: {
+    type: Boolean,
+    default: false,
+    description: "\u662F\u5426\u5141\u8BB8esc\u5173\u95ED"
+  },
   okProps: {
     type: Object,
     default: () => {
@@ -13121,6 +13299,7 @@ const _sfc_main$7 = defineComponent({
   emits: ["update:visible", "ok", "cancel", "show", "close"],
   setup(__props, { emit }) {
     const props = __props;
+    const { Escape } = useMagicKeys();
     useDOMCreate("lew-modal");
     const visible = useVModel(props, "visible", emit);
     const maskClick = () => {
@@ -13150,6 +13329,13 @@ const _sfc_main$7 = defineComponent({
         }
       }
     );
+    if (props.closeByEsc) {
+      watch(Escape, (v) => {
+        if (v && visible.value) {
+          visible.value = false;
+        }
+      });
+    }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Teleport, { to: "#lew-modal" }, [
         createVNode(Transition, { name: "lew-modal-mask" }, {
@@ -14019,7 +14205,7 @@ const _sfc_main$2 = defineComponent({
         showBackTop.value = dom.value.scrollTop >= props.valveHeight;
     };
     const throttledScrollHandler = throttle_1(handleScroll, 250);
-    useEventListener$1(window, "scroll", throttledScrollHandler);
+    useEventListener$2(window, "scroll", throttledScrollHandler);
     onMounted(() => {
       var _a2;
       dom.value = document.documentElement;
@@ -14380,37 +14566,49 @@ var index$6 = {
   clear
 };
 const dialogProps = {
-  closeOnClickOverlay: {
-    type: Boolean,
-    default: false
-  },
   type: {
     type: String,
-    default: ""
+    default: "",
+    description: "\u7C7B\u578B"
+  },
+  layout: {
+    type: String,
+    default: "normal",
+    description: "\u5E03\u5C40"
+  },
+  okText: {
+    type: String,
+    default: "\u786E\u5B9A",
+    description: "\u786E\u5B9A\u6309\u94AE\u6587\u5B57"
+  },
+  cancelText: {
+    type: String,
+    default: "\u53D6\u6D88",
+    description: "\u53D6\u6D88\u6309\u94AE\u6587\u5B57"
   },
   ok: {
     type: Function,
     default: () => {
       return true;
-    }
+    },
+    description: "\u786E\u5B9A\u56DE\u8C03"
   },
   cancel: {
     type: Function,
     default: () => {
       return true;
-    }
-  },
-  okText: {
-    type: String,
-    default: "\u786E\u5B9A"
+    },
+    description: "\u53D6\u6D88\u56DE\u8C03"
   },
-  cancelText: {
-    type: String,
-    default: "\u53D6\u6D88"
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: false,
+    description: "\u70B9\u51FB\u906E\u7F69\u5C42\u662F\u5426\u5173\u95ED"
   },
-  layout: {
-    type: String,
-    default: "normal"
+  closeByEsc: {
+    type: Boolean,
+    default: false,
+    description: "\u662F\u5426\u5141\u8BB8esc\u5173\u95ED"
   }
 };
 var LewDialog_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -14427,6 +14625,7 @@ const _sfc_main = defineComponent({
   emits: ["close"],
   setup(__props, { emit }) {
     const props = __props;
+    const { Escape } = useMagicKeys();
     useDOMCreate("lew-dialog");
     const okLoading = ref(false);
     const cancelLoading = ref(false);
@@ -14465,6 +14664,13 @@ const _sfc_main = defineComponent({
         cancelLoading.value = false;
       }
     };
+    if (props.closeByEsc) {
+      watch(Escape, (v) => {
+        if (v && visible.value) {
+          visible.value = false;
+        }
+      });
+    }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Teleport, { to: "#lew-dialog" }, [
         createVNode(Transition, { name: "lew-dialog-mask" }, {
@@ -14613,7 +14819,8 @@ const dialog = (type, options) => {
     okText,
     cancelText,
     layout,
-    closeOnClickOverlay
+    closeOnClickOverlay,
+    closeByEsc
   } = options;
   const div2 = document.createElement("div");
   document.body.appendChild(div2);
@@ -14623,6 +14830,7 @@ const dialog = (type, options) => {
         _LewDialog,
         {
           closeOnClickOverlay,
+          closeByEsc,
           type,
           layout,
           okText,
@@ -14886,6 +15094,7 @@ var directives = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   __proto__: null,
   LewMessage: index$6,
   LewDialog: index$5,
+  dialogProps,
   LewTooltip,
   LewBacktop: index$4,
   LewNotification: index$2,
@@ -14917,4 +15126,4 @@ const install = function(Vue) {
 var index = {
   install
 };
-export { LewAlert, LewAvatar, LewBackTop, index$4 as LewBacktop, LewBadge, LewBreadcrumb, LewButton, LewCascader, LewCheckbox, LewCheckboxGroup, LewDate, LewDatePicker, LewDateRange, LewDateRangePicker, index$5 as LewDialog, LewDrawer, LewDropdown, LewFlex, LewForm, script as LewIcon, LewInput, LewInputTag, LewLayout, LewLoading, LewMagicNumber, LewMagicText, LewMark, LewMenu, index$6 as LewMessage, LewModal, index$2 as LewNotification, LewPagination, LewPopok, LewPopover, LewRadioGroup, LewResult, LewSelect, LewSelectMultiple, LewSpace, LewSteps, LewSwitch, LewTable, LewTabs, LewTag, LewTextTrim, LewTextarea, LewTitle, LewTooltip, LewTreeSelect, SpaceOptions, alertProps, avatarProps, backTopProps, badgeProps, breadcrumbProps, buttonProps, cascaderProps, checkboxGroupProps, checkboxProps, datePickerProps, dateProps, dateRangePickerProps, dateRangeProps, index as default, drawerProps, dropdownProps, flexProps, formProps, getPosition, getStyle, inputProps, inputTagProps, magicNumberProps, markProps, menuProps, modalProps, object2class, paginationProps, popokProps, popoverProps, radioGroupProps, radioProps, resultProps, selectMultipleProps, selectProps, steps, switchProps, tableProps, tabsProps, tagProps, textTrimProps, textareaProps, titleProps };
+export { LewAlert, LewAvatar, LewBackTop, index$4 as LewBacktop, LewBadge, LewBreadcrumb, LewButton, LewCascader, LewCheckbox, LewCheckboxGroup, LewDate, LewDatePicker, LewDateRange, LewDateRangePicker, index$5 as LewDialog, LewDrawer, LewDropdown, LewFlex, LewForm, script as LewIcon, LewInput, LewInputTag, LewLayout, LewLoading, LewMagicNumber, LewMagicText, LewMark, LewMenu, index$6 as LewMessage, LewModal, index$2 as LewNotification, LewPagination, LewPopok, LewPopover, LewRadioGroup, LewResult, LewSelect, LewSelectMultiple, LewSpace, LewSteps, LewSwitch, LewTable, LewTabs, LewTag, LewTextTrim, LewTextarea, LewTitle, LewTooltip, LewTreeSelect, SpaceOptions, alertProps, avatarProps, backTopProps, badgeProps, breadcrumbProps, buttonProps, cascaderProps, checkboxGroupProps, checkboxProps, datePickerProps, dateProps, dateRangePickerProps, dateRangeProps, index as default, dialogProps, drawerProps, dropdownProps, flexProps, formProps, getPosition, getStyle, inputProps, inputTagProps, magicNumberProps, markProps, menuProps, modalProps, object2class, paginationProps, popokProps, popoverProps, radioGroupProps, radioProps, resultProps, selectMultipleProps, selectProps, steps, switchProps, tableProps, tabsProps, tagProps, textTrimProps, textareaProps, titleProps };