ele-admin-plus 1.0.0-beta.1

package/lib/ele-basic-select/index.js

@@ -0,0 +1,226 @@
+"use strict";
+const vue = require("vue");
+const iconsVue = require("@element-plus/icons-vue");
+const elementPlus = require("element-plus");
+const licenseUtil = require("../utils/license-util");
+const SelectTag = require("./components/select-tag");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleBasicSelect",
+  components: {
+    ElPopover: elementPlus.ElPopover,
+    ElInput: elementPlus.ElInput,
+    ElIcon: elementPlus.ElIcon,
+    CircleClose: iconsVue.CircleClose,
+    ArrowDown: iconsVue.ArrowDown,
+    SelectTag
+  },
+  props: props.basicSelectProps,
+  emits: props.basicSelectEmits,
+  setup(props2, { emit }) {
+    const { authenticated } = licenseUtil.useLicense();
+    const popoverRef = vue.ref(null);
+    const isDisabled = vue.computed(() => {
+      return !authenticated.value || props2.disabled;
+    });
+    const isEmpty = vue.computed(() => {
+      if (!props2.multiple) {
+        return props2.value == null || props2.value === "";
+      }
+      return !Array.isArray(props2.value) || !props2.value.length;
+    });
+    const closeEnable = vue.computed(() => {
+      return props2.clearable && !isDisabled.value && !isEmpty.value;
+    });
+    const inputPlaceholder = vue.computed(() => {
+      return isEmpty.value ? props2.placeholder : "";
+    });
+    const isCollapse = vue.computed(() => {
+      return typeof props2.maxTagCount === "number" && props2.selected != null && props2.selected.length > props2.maxTagCount;
+    });
+    const currentValues = vue.computed(() => {
+      if (!isCollapse.value || props2.selected == null) {
+        return props2.selected ?? [];
+      }
+      return props2.selected.slice(0, props2.maxTagCount);
+    });
+    const omittedValues = vue.computed(() => {
+      if (!isCollapse.value || props2.selected == null) {
+        return [];
+      }
+      return props2.selected.slice(props2.maxTagCount);
+    });
+    const updateVisible = (visible) => {
+      if (isDisabled.value && visible) {
+        return;
+      }
+      emit("update:visible", visible);
+    };
+    const onTagClose = (item) => {
+      if (!isDisabled.value) {
+        emit("removeTag", item);
+      }
+    };
+    const onClear = () => {
+      emit("clear");
+    };
+    const onFocus = (e) => {
+      if (props2.automaticDropdown && !props2.visible) {
+        updateVisible(true);
+      }
+      emit("focus", e);
+    };
+    const onBlur = (e) => {
+      emit("blur", e);
+    };
+    vue.watch(
+      () => props2.disabled,
+      (disabled) => {
+        if (disabled && props2.visible) {
+          updateVisible(false);
+        }
+      },
+      { immediate: true }
+    );
+    vue.watch(currentValues, () => {
+      if (popoverRef.value && popoverRef.value.popperRef && popoverRef.value.popperRef.popperInstanceRef && popoverRef.value.popperRef.popperInstanceRef.update) {
+        popoverRef.value.popperRef.popperInstanceRef.update();
+      }
+    });
+    return {
+      popoverRef,
+      isDisabled,
+      closeEnable,
+      inputPlaceholder,
+      isCollapse,
+      currentValues,
+      omittedValues,
+      updateVisible,
+      onTagClose,
+      onClear,
+      onFocus,
+      onBlur
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-select-suffix" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-select-tags"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CircleClose = vue.resolveComponent("CircleClose");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ArrowDown = vue.resolveComponent("ArrowDown");
+  const _component_ElInput = vue.resolveComponent("ElInput");
+  const _component_SelectTag = vue.resolveComponent("SelectTag");
+  const _component_ElPopover = vue.resolveComponent("ElPopover");
+  return vue.openBlock(), vue.createBlock(_component_ElPopover, {
+    ref: "popoverRef",
+    trigger: "click",
+    visible: _ctx.visible,
+    width: _ctx.popperWidth,
+    placement: _ctx.placement,
+    teleported: _ctx.teleported,
+    disabled: _ctx.isDisabled,
+    transition: "el-zoom-in-top",
+    popperClass: _ctx.popperClass,
+    popperOptions: _ctx.popperOptions,
+    "onUpdate:visible": _ctx.updateVisible
+  }, {
+    reference: vue.withCtx(() => [
+      vue.createElementVNode("div", {
+        class: vue.normalizeClass([
+          "ele-select",
+          { "is-multiple": _ctx.multiple },
+          { "is-opened": _ctx.visible }
+        ])
+      }, [
+        vue.createVNode(_component_ElInput, {
+          name: _ctx.name,
+          size: _ctx.size,
+          readonly: true,
+          validateEvent: false,
+          disabled: _ctx.isDisabled,
+          autocomplete: _ctx.autocomplete,
+          placeholder: _ctx.inputPlaceholder,
+          modelValue: _ctx.multiple ? "" : _ctx.selectedLabel,
+          onFocus: _ctx.onFocus,
+          onBlur: _ctx.onBlur
+        }, vue.createSlots({
+          suffix: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_1, [
+              _ctx.closeEnable ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
+                key: 0,
+                class: "ele-select-clear",
+                onClick: vue.withModifiers(_ctx.onClear, ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "clearIcon", {}, () => [
+                    vue.createVNode(_component_CircleClose)
+                  ])
+                ]),
+                _: 3
+              }, 8, ["onClick"])) : vue.createCommentVNode("", true),
+              vue.createVNode(_component_ElIcon, { class: "ele-select-arrow" }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "suffixIcon", { visible: _ctx.visible }, () => [
+                    vue.createVNode(_component_ArrowDown)
+                  ])
+                ]),
+                _: 3
+              })
+            ])
+          ]),
+          _: 2
+        }, [
+          _ctx.$slots.prefix ? {
+            name: "prefix",
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "prefix")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["name", "size", "disabled", "autocomplete", "placeholder", "modelValue", "onFocus", "onBlur"]),
+        _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.currentValues, (item, index2) => {
+            return vue.openBlock(), vue.createBlock(_component_SelectTag, {
+              key: index2 + "-" + item.value,
+              size: _ctx.size,
+              type: _ctx.tagType,
+              label: item.label,
+              closable: !_ctx.isDisabled,
+              maxTagTextLength: _ctx.maxTagTextLength,
+              onClose: ($event) => _ctx.onTagClose(item)
+            }, null, 8, ["size", "type", "label", "closable", "maxTagTextLength", "onClose"]);
+          }), 128)),
+          _ctx.isCollapse ? (vue.openBlock(), vue.createBlock(_component_SelectTag, {
+            key: 0,
+            size: _ctx.size,
+            type: _ctx.tagType
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "maxTagPlaceholder", { omittedValues: _ctx.omittedValues }, () => [
+                vue.createTextVNode(" + " + vue.toDisplayString(_ctx.omittedValues.length) + " ... ", 1)
+              ])
+            ]),
+            _: 3
+          }, 8, ["size", "type"])) : vue.createCommentVNode("", true)
+        ])) : vue.createCommentVNode("", true)
+      ], 2)
+    ]),
+    default: vue.withCtx(() => [
+      _ctx.persistent || _ctx.visible ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["visible", "width", "placement", "teleported", "disabled", "popperClass", "popperOptions", "onUpdate:visible"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-basic-select/props.d.ts

@@ -0,0 +1,39 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { SelectValue, SelectedItem } from './types';
+/**
+ * 属性
+ */
+export declare const basicSelectProps: {
+    value: PropType<SelectValue>;
+    multiple: BooleanConstructor;
+    disabled: BooleanConstructor;
+    size: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined>;
+    clearable: BooleanConstructor;
+    placeholder: StringConstructor;
+    name: StringConstructor;
+    autocomplete: StringConstructor;
+    selectedLabel: (StringConstructor | NumberConstructor)[];
+    selected: PropType<SelectedItem[]>;
+    maxTagCount: NumberConstructor;
+    maxTagTextLength: NumberConstructor;
+    visible: BooleanConstructor;
+    teleported: BooleanConstructor;
+    persistent: BooleanConstructor;
+    automaticDropdown: BooleanConstructor;
+    tagType: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown>>;
+    placement: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown>>;
+    popperWidth: (StringConstructor | NumberConstructor)[];
+    popperOptions: PropType<Partial<import("element-plus").Options>>;
+    popperClass: StringConstructor;
+};
+export type BasicSelectProps = ExtractPropTypes<typeof basicSelectProps>;
+/**
+ * 事件
+ */
+export declare const basicSelectEmits: {
+    'update:visible': (_visible: boolean) => boolean;
+    removeTag: (_item: SelectedItem) => boolean;
+    clear: () => boolean;
+    focus: (_e: FocusEvent) => boolean;
+    blur: (_e: FocusEvent) => boolean;
+};

package/lib/ele-basic-select/props.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const basicSelectProps = {
+  // 值
+  value: [String, Number, Boolean, Array],
+  // 是否多选
+  multiple: Boolean,
+  // 是否禁用
+  disabled: Boolean,
+  // 尺寸
+  size: String,
+  // 是否支持清除
+  clearable: Boolean,
+  // 占位符
+  placeholder: String,
+  // input 的 name 属性
+  name: String,
+  // input 的 autocomplete 属性
+  autocomplete: String,
+  // 单选选中展示的文本
+  selectedLabel: [String, Number],
+  // 多选选中的数据
+  selected: Array,
+  // 最多显示多少个 tag
+  maxTagCount: Number,
+  // 最大显示的 tag 文本长度
+  maxTagTextLength: Number,
+  // popover 是否显示
+  visible: Boolean,
+  // 是否将 popover 内容插入 body
+  teleported: Boolean,
+  // 始终渲染 popover 内容
+  persistent: Boolean,
+  // 是否在输入框获得焦点后自动弹出选项菜单
+  automaticDropdown: Boolean,
+  // 标签类型
+  tagType: String,
+  // 气泡框位置
+  placement: String,
+  // popper 宽度
+  popperWidth: [Number, String],
+  // popper.js 的参数
+  popperOptions: Object,
+  // 下拉框的类名
+  popperClass: String
+};
+const basicSelectEmits = {
+  // 更新气泡显示状态
+  "update:visible": (_visible) => true,
+  // 多选移除事件
+  removeTag: (_item) => true,
+  // 清除按钮点击事件
+  clear: () => true,
+  // 获取焦点事件
+  focus: (_e) => true,
+  // 失去焦点事件
+  blur: (_e) => true
+};
+exports.basicSelectEmits = basicSelectEmits;
+exports.basicSelectProps = basicSelectProps;

package/lib/ele-basic-select/style/index.js

@@ -0,0 +1,6 @@
+"use strict";
+require("element-plus/es/components/popover/style/index");
+require("element-plus/es/components/input/style/index");
+require("element-plus/es/components/icon/style/index");
+require("element-plus/es/components/tag/style/index");
+require("./index.scss");

package/lib/ele-basic-select/style/index.scss

@@ -0,0 +1,104 @@
+@use '../../style/themes/default.scss' as *;
+
+.ele-select {
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+
+  .el-input__inner {
+    cursor: pointer;
+
+    &::selection {
+      color: elVar('input', 'text-color');
+      background: transparent;
+    }
+  }
+
+  .el-input__prefix-inner {
+    color: elVar('input', 'text-color');
+  }
+
+  .ele-select-suffix {
+    display: flex;
+    align-items: center;
+  }
+
+  // 箭头和清空图标
+  .ele-select-clear,
+  .ele-select-arrow {
+    font-size: 14px;
+    color: elVar('input', 'icon-color');
+    transition: transform elVar('transition-duration'),
+      color elVar('transition-duration');
+  }
+
+  .ele-select-clear:hover {
+    color: elVar('input', 'clear-hover-color');
+  }
+
+  &:not(:hover) .ele-select-clear,
+  &:hover .ele-select-clear + .ele-select-arrow {
+    display: none;
+  }
+
+  // 下拉面板展开
+  &.is-opened {
+    .ele-select-arrow {
+      transform: rotate(-180deg);
+    }
+
+    & > .el-input:not(.is-disabled) .el-input__wrapper {
+      box-shadow: 0 0 0 1px elVar('input', 'focus-border-color') inset;
+    }
+  }
+
+  // 鼠标移入
+  &:not(.is-opened):hover {
+    & > .el-input:not(.is-disabled) .el-input__wrapper:not(.is-focus) {
+      box-shadow: 0 0 0 1px elVar('border-color', 'hover') inset;
+    }
+  }
+
+  // 多选
+  &.is-multiple > .el-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .ele-select-tags {
+    display: flex;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    padding: 2px 0 2px 6px;
+    width: calc(100% - 24px);
+    min-height: elVar('component-size');
+    position: relative;
+    z-index: 1;
+
+    .el-tag {
+      margin: 2px 6px 2px 0;
+    }
+  }
+
+  .el-input--small + .ele-select-tags {
+    min-height: elVar('component-size', 'small');
+    padding-left: 4px;
+
+    .el-tag {
+      height: 18px;
+      margin-top: 1px;
+      margin-bottom: 1px;
+    }
+  }
+
+  .el-input--large + .ele-select-tags {
+    min-height: elVar('component-size', 'large');
+  }
+
+  .el-input.is-disabled + .ele-select-tags {
+    cursor: not-allowed;
+  }
+}

package/lib/ele-basic-select/types/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 单选值
+ */
+export type SingleValue = string | number | boolean;
+/**
+ * 多选值
+ */
+export type MultipleValue = Array<SingleValue>;
+/**
+ * 值
+ */
+export type SelectValue = SingleValue | MultipleValue | undefined | null;
+/**
+ * 多选选中数据
+ */
+export interface SelectedItem {
+    /** 文本 */
+    label: string;
+    /** 值 */
+    value: SingleValue;
+}

package/lib/ele-bottom-bar/index.d.ts

@@ -0,0 +1,8 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
+    extraStyle: import("vue").PropType<import("vue").CSSProperties>;
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
+    extraStyle: import("vue").PropType<import("vue").CSSProperties>;
+}>>, {}, {}>;
+export default _sfc_main;

package/lib/ele-bottom-bar/index.js

@@ -0,0 +1,33 @@
+"use strict";
+const vue = require("vue");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleBottomBar",
+  props: props.bottomBarProps
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-bottom-bar" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.createElementVNode("div", {
+      class: "ele-bottom-bar-body",
+      style: vue.normalizeStyle(_ctx.bodyStyle)
+    }, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ], 4),
+    vue.createElementVNode("div", {
+      class: "ele-bottom-bar-extra",
+      style: vue.normalizeStyle(_ctx.extraStyle)
+    }, [
+      vue.renderSlot(_ctx.$slots, "extra")
+    ], 4)
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-bottom-bar/props.d.ts

@@ -0,0 +1,9 @@
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+/**
+ * 属性
+ */
+export declare const bottomBarProps: {
+    bodyStyle: PropType<CSSProperties>;
+    extraStyle: PropType<CSSProperties>;
+};
+export type BottomBarProps = ExtractPropTypes<typeof bottomBarProps>;

package/lib/ele-bottom-bar/props.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const bottomBarProps = {
+  // 内容样式
+  bodyStyle: Object,
+  // 右侧样式
+  extraStyle: Object
+};
+exports.bottomBarProps = bottomBarProps;

package/lib/ele-bottom-bar/style/css-var.scss

@@ -0,0 +1,7 @@
+@use '../../style/themes/default.scss' as *;
+
+@mixin set-bottom-bar-var($var) {
+  .ele-bottom-bar {
+    @include set-ele-var('bottom-bar', $var);
+  }
+}

package/lib/ele-bottom-bar/style/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/ele-bottom-bar/style/index.scss

@@ -0,0 +1,25 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-bottom-bar-var($ele);
+
+.ele-bottom-bar {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: eleVar('bottom-bar', 'padding');
+  background: eleVar('bottom-bar', 'bg');
+  box-shadow: eleVar('bottom-bar', 'shadow');
+  z-index: calc(var(#{eleVarName('layout', 'index')}, 100) - 1);
+
+  .ele-bottom-bar-body {
+    flex: 1;
+    overflow: auto;
+  }
+
+  .ele-bottom-bar-extra {
+    flex-shrink: 0;
+  }
+}