ele-admin-plus 1.4.0 → 1.4.1-beta.1

package/lib/ele-backtop/index.cjs

@@ -5,7 +5,7 @@ const index = require("../icons/index");
 const common = require("../utils/common");
 const props = require("./props");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...{ name: "EleBacktop" },
+  ...{ name: "EleBacktop", inheritAttrs: false },
   __name: "index",
   props: props.backtopProps,
   emits: props.backtopEmits,
@@ -68,15 +68,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.Transition, { name: _ctx.transitionName }, {
         default: vue.withCtx(() => [
-          visible.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
+          visible.value ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ key: 0 }, _ctx.$attrs, {
             class: "ele-backtop",
-            style: vue.normalizeStyle({
+            style: {
               bottom: typeof _ctx.bottom === "number" ? `${_ctx.bottom}px` : _ctx.bottom,
               right: typeof _ctx.right === "number" ? `${_ctx.right}px` : _ctx.right
-            }),
+            },
             onClick: handleClick
-          }, [
+          }), [
             vue.renderSlot(_ctx.$slots, "default", {}, () => [
               vue.createVNode(vue.unref(elementPlus.ElIcon), null, {
                 default: vue.withCtx(() => [
@@ -85,7 +84,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 _: 1
               })
             ])
-          ], 4)) : vue.createCommentVNode("", true)
+          ], 16)) : vue.createCommentVNode("", true)
         ]),
         _: 3
       }, 8, ["name"]);

package/lib/ele-basic-select/components/select-view.cjs

@@ -0,0 +1,271 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("../../icons/index");
+const props = require("../props");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "SelectView" },
+  __name: "select-view",
+  props: props.basicSelectProps,
+  emits: {
+    ...props.basicSelectEmits,
+    /** 输入框点击事件 */
+    inputClick: (_e) => true
+  },
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props2 = __props;
+    const emit = __emit;
+    const inputRef = vue.ref(null);
+    const searchRef = vue.ref(null);
+    const inputValue = vue.ref(
+      props2.multiple || !props2.selectedLabel ? "" : props2.selectedLabel
+    );
+    const searchValue = vue.ref("");
+    const isEmpty = vue.computed(() => {
+      if (!props2.multiple) {
+        return props2.value == null || props2.value === "";
+      }
+      return !Array.isArray(props2.value) || !props2.value.length;
+    });
+    const inputPlaceholder = vue.computed(() => {
+      const str = isEmpty.value && props2.placeholder ? props2.placeholder : "";
+      if (!props2.filterable || !props2.visible || props2.multiple) {
+        return str;
+      }
+      return props2.selectedLabel || str;
+    });
+    const isCollapse = vue.computed(() => {
+      return typeof props2.maxTagCount === "number" && props2.selected != null && props2.selected.length > props2.maxTagCount;
+    });
+    const currentTags = vue.computed(() => {
+      if (!isCollapse.value || isEmpty.value || props2.selected == null) {
+        return props2.selected || [];
+      }
+      return props2.selected.slice(0, props2.maxTagCount);
+    });
+    const omittedTags = vue.computed(() => {
+      if (!isCollapse.value || isEmpty.value || props2.selected == null) {
+        return [];
+      }
+      return props2.selected.slice(props2.maxTagCount);
+    });
+    const omittedSize = vue.computed(() => {
+      if (isEmpty.value || props2.maxTagCount == null || props2.maxTagCount < 0) {
+        return 0;
+      }
+      return props2.value.length - props2.maxTagCount;
+    });
+    const focusSearchInput = () => {
+      const input = props2.multiple ? searchRef.value : inputRef.value;
+      input && input.focus();
+      vue.nextTick(() => {
+        input && input.focus();
+      });
+    };
+    const updateSearchValue = (modelValue) => {
+      if (props2.filterable && props2.visible && props2.multiple) {
+        searchValue.value = modelValue;
+        emit("filterChange", modelValue);
+      }
+    };
+    const updateInputValue = (modelValue) => {
+      if (props2.filterable && props2.visible && !props2.multiple) {
+        inputValue.value = modelValue;
+        emit("filterChange", modelValue);
+      }
+    };
+    const updateVisible = (visible) => {
+      emit("update:visible", visible);
+    };
+    const handleTagClose = (item) => {
+      if (!props2.disabled) {
+        emit("removeTag", item);
+      }
+    };
+    const handleClear = () => {
+      emit("clear");
+    };
+    const handleInputClick = (e) => {
+      emit("inputClick", e);
+    };
+    const handleInputFocus = (e) => {
+      if (props2.automaticDropdown && !props2.visible) {
+        updateVisible(true);
+      }
+      emit("focus", e);
+    };
+    const handleInputBlur = (e) => {
+      emit("blur", e);
+    };
+    const handleInputEsc = (e) => {
+      if (!props2.disabled && props2.visible) {
+        e.stopPropagation();
+        e.preventDefault();
+        updateVisible(false);
+      }
+    };
+    vue.watch(
+      () => props2.selectedLabel,
+      (label) => {
+        if (!props2.filterable || !props2.visible) {
+          inputValue.value = props2.multiple || !label ? "" : label;
+        }
+      }
+    );
+    vue.watch(
+      () => props2.visible,
+      (visible) => {
+        if (props2.filterable) {
+          if (props2.multiple) {
+            searchValue.value = "";
+            if (visible) {
+              focusSearchInput();
+            }
+          } else {
+            const label = props2.selectedLabel;
+            inputValue.value = visible || !label ? "" : label;
+          }
+        }
+      }
+    );
+    __expose({
+      inputRef,
+      searchRef,
+      currentTags,
+      omittedTags,
+      omittedSize,
+      focusSearchInput,
+      updateSearchValue,
+      updateInputValue
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          "ele-select",
+          _ctx.selectClass,
+          { "is-empty": isEmpty.value },
+          { "is-multiple": _ctx.multiple },
+          { "is-disabled": _ctx.disabled },
+          { "is-filterable": _ctx.filterable },
+          { "is-small": _ctx.size === "small" },
+          { "is-large": _ctx.size === "large" },
+          { "is-opened": _ctx.visible }
+        ]),
+        style: vue.normalizeStyle(_ctx.selectStyle)
+      }, [
+        vue.createVNode(vue.unref(elementPlus.ElInput), {
+          ref_key: "inputRef",
+          ref: inputRef,
+          size: _ctx.size,
+          disabled: _ctx.disabled,
+          validateEvent: false,
+          modelValue: inputValue.value,
+          placeholder: _ctx.filterable && _ctx.multiple && _ctx.visible ? "" : inputPlaceholder.value,
+          readonly: !(_ctx.filterable && !_ctx.multiple),
+          style: vue.normalizeStyle(_ctx.inputStyle),
+          "onUpdate:modelValue": updateInputValue,
+          onClick: handleInputClick,
+          onFocus: handleInputFocus,
+          onBlur: handleInputBlur,
+          onKeydown: vue.withKeys(handleInputEsc, ["esc"])
+        }, vue.createSlots({
+          suffix: vue.withCtx(() => [
+            _ctx.clearable && !_ctx.disabled && !isEmpty.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+              key: 0,
+              class: "ele-select-clear el-input__icon",
+              onClick: vue.withModifiers(handleClear, ["stop"])
+            }, {
+              default: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "clearIcon", {}, () => [
+                  vue.createVNode(vue.unref(index.CloseCircleFilled))
+                ])
+              ]),
+              _: 3
+            })) : vue.createCommentVNode("", true),
+            vue.createVNode(vue.unref(elementPlus.ElIcon), { class: "ele-select-arrow el-input__icon" }, {
+              default: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "suffixIcon", { visible: _ctx.visible }, () => [
+                  vue.createVNode(vue.unref(index.ArrowDown))
+                ])
+              ]),
+              _: 3
+            })
+          ]),
+          _: 2
+        }, [
+          _ctx.$slots.prefix ? {
+            name: "prefix",
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "prefix")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["size", "disabled", "modelValue", "placeholder", "readonly", "style"]),
+        _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "ele-select-tags",
+          style: vue.normalizeStyle(_ctx.selectTagsStyle)
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(currentTags.value, (item, index2) => {
+            return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTag), {
+              key: index2 + "-" + item.value,
+              size: _ctx.size,
+              type: _ctx.tagType,
+              closable: !_ctx.disabled,
+              disableTransitions: true,
+              title: item.label,
+              onClose: ($event) => handleTagClose(item)
+            }, {
+              default: vue.withCtx(() => [
+                item.label && _ctx.maxTagTextLength && item.label.length > _ctx.maxTagTextLength ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                  vue.createTextVNode(vue.toDisplayString(item.label.slice(0, _ctx.maxTagTextLength)) + "... ", 1)
+                ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                  vue.createTextVNode(vue.toDisplayString(item.label), 1)
+                ], 64))
+              ]),
+              _: 2
+            }, 1032, ["size", "type", "closable", "title", "onClose"]);
+          }), 128)),
+          isCollapse.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTag), {
+            key: 0,
+            size: _ctx.size,
+            type: _ctx.tagType,
+            disableTransitions: true
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "maxTagPlaceholder", {
+                omittedValues: omittedTags.value,
+                omittedSize: omittedSize.value
+              }, () => [
+                vue.createTextVNode(" +" + vue.toDisplayString(omittedSize.value), 1)
+              ])
+            ]),
+            _: 3
+          }, 8, ["size", "type"])) : vue.createCommentVNode("", true),
+          !_ctx.disabled && _ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTag), {
+            key: 1,
+            size: _ctx.size,
+            disableTransitions: true,
+            class: "ele-select-search"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(elementPlus.ElInput), {
+                ref_key: "searchRef",
+                ref: searchRef,
+                size: _ctx.size,
+                validateEvent: false,
+                modelValue: searchValue.value,
+                placeholder: inputPlaceholder.value,
+                "onUpdate:modelValue": updateSearchValue,
+                onKeydown: vue.withKeys(handleInputEsc, ["esc"])
+              }, null, 8, ["size", "modelValue", "placeholder"])
+            ]),
+            _: 1
+          }, 8, ["size"])) : vue.createCommentVNode("", true)
+        ], 4)) : vue.createCommentVNode("", true),
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 6);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-basic-select/components/select-view.d.ts

@@ -0,0 +1,129 @@
+import { ElInputInstance } from '../../ele-app/el';
+import { SelectedItem } from '../types';
+
+declare function __VLS_template(): {
+    prefix?(_: {}): any;
+    clearIcon?(_: {}): any;
+    suffixIcon?(_: {
+        visible: boolean;
+    }): any;
+    maxTagPlaceholder?(_: {
+        omittedValues: SelectedItem[];
+        omittedSize: number;
+    }): any;
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: import('vue').PropType<import('../types').SelectValue>;
+        default: () => null;
+    };
+    multiple: BooleanConstructor;
+    disabled: BooleanConstructor;
+    size: import('vue').PropType<import('../../ele-app/el').ElInputProps["size"]>;
+    clearable: BooleanConstructor;
+    placeholder: StringConstructor;
+    selectedLabel: StringConstructor;
+    selected: import('vue').PropType<SelectedItem[]>;
+    maxTagCount: NumberConstructor;
+    maxTagTextLength: NumberConstructor;
+    tagType: import('vue').PropType<import('../../ele-app/el').ElTagProps["type"]>;
+    automaticDropdown: BooleanConstructor;
+    filterable: BooleanConstructor;
+    visible: BooleanConstructor;
+    teleported: BooleanConstructor;
+    persistent: BooleanConstructor;
+    placement: import('vue').PropType<import('../../ele-app/plus').EleTooltipProps["placement"]>;
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    popperOptions: import('vue').PropType<import('../../ele-app/plus').EleTooltipProps["popperOptions"]>;
+    popperClass: StringConstructor;
+    popperWidth: (StringConstructor | NumberConstructor)[];
+    selectClass: StringConstructor;
+    selectStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    inputStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    selectTagsStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    popperType: import('vue').PropType<import('../types').PopperType>;
+    popperProps: import('vue').PropType<import('../types').PopperProps>;
+    popperSlots: ObjectConstructor;
+}>, {
+    inputRef: import('vue').Ref<ElInputInstance, ElInputInstance>;
+    searchRef: import('vue').Ref<ElInputInstance, ElInputInstance>;
+    currentTags: import('vue').ComputedRef<SelectedItem[]>;
+    omittedTags: import('vue').ComputedRef<SelectedItem[]>;
+    omittedSize: import('vue').ComputedRef<number>;
+    focusSearchInput: () => void;
+    updateSearchValue: (modelValue: string) => void;
+    updateInputValue: (modelValue: string) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => void;
+    focus: (_e: FocusEvent) => void;
+    blur: (_e: FocusEvent) => void;
+    "update:visible": (_visible: boolean) => void;
+    filterChange: (_value: string) => void;
+    removeTag: (_item: SelectedItem) => void;
+    inputClick: (_e: MouseEvent) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: import('vue').PropType<import('../types').SelectValue>;
+        default: () => null;
+    };
+    multiple: BooleanConstructor;
+    disabled: BooleanConstructor;
+    size: import('vue').PropType<import('../../ele-app/el').ElInputProps["size"]>;
+    clearable: BooleanConstructor;
+    placeholder: StringConstructor;
+    selectedLabel: StringConstructor;
+    selected: import('vue').PropType<SelectedItem[]>;
+    maxTagCount: NumberConstructor;
+    maxTagTextLength: NumberConstructor;
+    tagType: import('vue').PropType<import('../../ele-app/el').ElTagProps["type"]>;
+    automaticDropdown: BooleanConstructor;
+    filterable: BooleanConstructor;
+    visible: BooleanConstructor;
+    teleported: BooleanConstructor;
+    persistent: BooleanConstructor;
+    placement: import('vue').PropType<import('../../ele-app/plus').EleTooltipProps["placement"]>;
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    popperOptions: import('vue').PropType<import('../../ele-app/plus').EleTooltipProps["popperOptions"]>;
+    popperClass: StringConstructor;
+    popperWidth: (StringConstructor | NumberConstructor)[];
+    selectClass: StringConstructor;
+    selectStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    inputStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    selectTagsStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    popperType: import('vue').PropType<import('../types').PopperType>;
+    popperProps: import('vue').PropType<import('../types').PopperProps>;
+    popperSlots: ObjectConstructor;
+}>> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onFocus?: ((_e: FocusEvent) => any) | undefined;
+    onBlur?: ((_e: FocusEvent) => any) | undefined;
+    "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
+    onFilterChange?: ((_value: string) => any) | undefined;
+    onRemoveTag?: ((_item: SelectedItem) => any) | undefined;
+    onInputClick?: ((_e: MouseEvent) => any) | undefined;
+}>, {
+    value: import('../types').SelectValue;
+    teleported: boolean;
+    disabled: boolean;
+    clearable: boolean;
+    filterable: boolean;
+    persistent: boolean;
+    visible: boolean;
+    transition: string;
+    automaticDropdown: boolean;
+    multiple: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};