ele-admin-plus 1.0.0-beta.1

package/lib/ele-tabs/style/index.scss

@@ -0,0 +1,412 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-tab-var($ele);
+
+/* 标签页 */
+.ele-tab {
+  & > .el-tabs__header {
+    #{elVarName('tabs', 'header-height')}: eleVar('tab', 'height');
+    margin: 0;
+
+    .el-tabs__nav-wrap {
+      margin: 0;
+      padding: 0;
+      display: flex;
+
+      &::after {
+        height: 1px;
+        background-color: eleVar('tab', 'line-color');
+      }
+    }
+
+    .el-tabs__nav-scroll {
+      flex: 1;
+    }
+
+    .el-tabs__nav {
+      float: none;
+      display: inline-flex;
+      width: max-content;
+    }
+
+    .el-tabs__item {
+      padding: 0 !important;
+      transition: color 0.3s, background-color 0.3s, border-color 0.3s;
+
+      // 右键菜单
+      & > .el-dropdown {
+        color: inherit;
+        font-size: inherit;
+        line-height: inherit;
+        position: static;
+        cursor: inherit;
+        display: block;
+      }
+
+      // 标题
+      .ele-tab-title {
+        padding: 0 eleVar('tab', 'padding');
+        box-sizing: border-box;
+        outline: none;
+      }
+
+      &.is-closable .ele-tab-title {
+        padding-right: calc(
+          #{eleVar('tab', 'padding')} + #{elVar('font-size', 'base')}
+        );
+      }
+
+      // 关闭图标
+      .is-icon-close {
+        margin: 0;
+        color: elVar('text-color', 'secondary');
+        position: absolute;
+        right: calc(#{eleVar('tab', 'padding')} / 2 + 2px);
+        top: 50%;
+        transform: translateY(-50%);
+        transition: background-color 0.3s, color 0.3s;
+
+        & > svg {
+          margin: 0;
+          pointer-events: none;
+        }
+
+        &:hover {
+          color: #fff;
+          background: elVar('color-error');
+        }
+      }
+
+      // 拖动
+      &.sortable-ghost {
+        opacity: 0;
+      }
+    }
+
+    // 左右箭头
+    .el-tabs__nav-prev,
+    .el-tabs__nav-next {
+      flex-shrink: 0;
+      width: elVar('tabs', 'header-height');
+      height: elVar('tabs', 'header-height');
+      font-size: elVar('font-size', 'base');
+      color: elVar('text-color', 'secondary');
+      transition: background-color 0.3s, color 0.3s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: static;
+      right: auto;
+      left: auto;
+
+      &.is-disabled {
+        cursor: not-allowed;
+      }
+
+      &:not(.is-disabled):hover {
+        color: elVar('text-color', 'primary');
+      }
+    }
+
+    .el-tabs__nav-next {
+      order: 1;
+    }
+  }
+
+  /* 小型尺寸 */
+  &.is-small > .el-tabs__header {
+    #{eleVarName('tab', 'height')}: eleVar('tab-small', 'height');
+    #{eleVarName('tab', 'padding')}: eleVar('tab-small', 'padding');
+    #{elVarName('font-size', 'base')}: elVar('font-size', 'small');
+  }
+
+  /* 大型尺寸 */
+  &.is-large > .el-tabs__header {
+    #{eleVarName('tab', 'height')}: eleVar('tab-large', 'height');
+    #{eleVarName('tab', 'padding')}: eleVar('tab-large', 'padding');
+    #{elVarName('font-size', 'base')}: elVar('font-size', 'medium');
+  }
+
+  /* 标签居中 */
+  &.is-center > .el-tabs__header .el-tabs__nav-scroll {
+    text-align: center;
+  }
+
+  /* 卡片风格 */
+  &.el-tabs--card > .el-tabs__header {
+    height: auto;
+    border: none;
+    box-shadow: 0 -1px 0 eleVar('tab', 'line-color') inset;
+
+    .el-tabs__item {
+      border-bottom: none;
+
+      &.is-active {
+        background: elVar('bg-color', 'overlay');
+      }
+
+      .is-icon-close {
+        width: 1em !important;
+        height: 1em !important;
+        font-size: inherit !important;
+      }
+    }
+
+    .el-tabs__nav {
+      overflow: hidden;
+    }
+  }
+
+  /* 边框卡片风格 */
+  &.el-tabs--border-card > .el-tabs__header {
+    border: none;
+    box-shadow: 0 -1px 0 eleVar('tab', 'line-color') inset;
+
+    .el-tabs__item {
+      margin-top: 0;
+      border-top: none;
+      border-bottom: none;
+    }
+  }
+
+  /* 默认风格 */
+  &.is-default > .el-tabs__header .el-tabs__item,
+  &.is-plain > .el-tabs__header .el-tabs__item {
+    .ele-tab-title {
+      padding: 0 2px;
+    }
+
+    &.is-closable .ele-tab-title {
+      padding-right: calc(#{elVar('font-size', 'base')} + 2px);
+    }
+
+    .is-icon-close {
+      right: 0;
+    }
+
+    & + .el-tabs__item {
+      margin-left: calc(#{eleVar('tab', 'padding')} * 2 - 4px);
+    }
+  }
+
+  /* 朴素风格 */
+  &.is-plain > .el-tabs__header .el-tabs__nav-wrap::after {
+    display: none;
+  }
+
+  /* 简约风格 */
+  &.is-simple > .el-tabs__header,
+  &.is-indicator > .el-tabs__header {
+    .el-tabs__item {
+      // 指示线
+      &::after {
+        content: '';
+        width: 0;
+        height: 2px;
+        background: elVar('color-primary');
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
+
+      &:hover {
+        background: eleVar('tab-simple', 'hover');
+      }
+
+      // 选中样式
+      &.is-active {
+        background: eleVar('tab-simple', 'active');
+
+        &::after {
+          width: 100%;
+        }
+      }
+    }
+
+    .el-tabs__nav-prev:not(.is-disabled):hover,
+    .el-tabs__nav-next:not(.is-disabled):hover {
+      background: eleVar('tab-simple', 'hover');
+    }
+
+    .el-tabs__active-bar,
+    .el-tabs__nav-wrap::after {
+      display: none;
+    }
+  }
+
+  /* 指示器风格 */
+  &.is-indicator > .el-tabs__header .el-tabs__item {
+    .ele-tab-title {
+      $padding: eleVar('tab', 'padding');
+      $size: eleVar('tab-indicator', 'size');
+      $margin: eleVar('tab-indicator', 'margin');
+      padding-left: calc(#{$padding} + #{$size} + #{$margin} - 2px);
+
+      &::before {
+        content: '';
+        border-radius: 50%;
+        width: eleVar('tab-indicator', 'size');
+        height: eleVar('tab-indicator', 'size');
+        background: eleVar('tab-indicator', 'color');
+        position: absolute;
+        left: calc(#{$padding} - 2px);
+        top: 50%;
+        transform: translateY(-50%);
+        transition: background-color 0.3s;
+      }
+    }
+
+    &.is-active .ele-tab-title::before {
+      background: elVar('color-primary');
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
+  /* 按钮风格 */
+  &.is-button > .el-tabs__header {
+    $height: eleVar('tab', 'height');
+    $space: eleVar('tab-button', 'space');
+    #{elVarName('tabs', 'header-height')}: calc(#{$height} - #{$space});
+
+    .el-tabs__item {
+      border-radius: eleVar('tab-button', 'radius');
+      background: eleVar('tab-button', 'bg');
+
+      & + .el-tabs__item {
+        margin-left: $space;
+      }
+    }
+
+    .el-tabs__active-bar,
+    .el-tabs__nav-wrap::after {
+      display: none;
+    }
+  }
+}
+
+/* 页签右键菜单 */
+.ele-tab-popup .el-dropdown-menu__item > .el-icon {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+/* 页签操作按钮 */
+.ele-tab-tool {
+  #{elVarName('tabs', 'header-height')}: eleVar('tab', 'height');
+  height: elVar('tabs', 'header-height');
+  line-height: elVar('tabs', 'header-height');
+  min-width: elVar('tabs', 'header-height');
+  flex-shrink: 0;
+  font-size: elVar('font-size', 'base');
+  color: elVar('text-color', 'secondary');
+  transition: background-color 0.3s, color 0.3s;
+  position: relative;
+  cursor: pointer;
+
+  &:hover {
+    color: elVar('text-color', 'primary');
+  }
+
+  // 模拟页签
+  &.is-tab {
+    color: elVar('text-color', 'primary');
+
+    &:hover,
+    &.is-active {
+      color: elVar('color-primary');
+    }
+  }
+
+  // 标题
+  .ele-tab-title {
+    padding: 0 eleVar('tab', 'padding');
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  // 下拉菜单
+  & > .el-dropdown {
+    color: inherit;
+    cursor: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    display: block;
+    position: static;
+  }
+}
+
+/* 页签容器 */
+.ele-tab-wrap {
+  display: flex;
+  box-sizing: border-box;
+  position: relative;
+
+  // 页签
+  & > .ele-tab {
+    flex: 1;
+    overflow: hidden;
+
+    .el-tabs__content {
+      display: none;
+    }
+  }
+
+  // 小型尺寸
+  &.is-small .ele-tab-tool {
+    #{eleVarName('tab', 'height')}: eleVar('tab-small', 'height');
+    #{eleVarName('tab', 'padding')}: eleVar('tab-small', 'padding');
+    #{elVarName('font-size', 'base')}: elVar('font-size', 'small');
+  }
+
+  // 大型尺寸
+  &.is-large .ele-tab-tool {
+    #{eleVarName('tab', 'height')}: eleVar('tab-large', 'height');
+    #{eleVarName('tab', 'padding')}: eleVar('tab-large', 'padding');
+    #{elVarName('font-size', 'base')}: elVar('font-size', 'medium');
+  }
+
+  // 简约风格和指示器风格
+  &.is-simple .ele-tab-tool,
+  &.is-indicator .ele-tab-tool {
+    &:hover {
+      background: eleVar('tab-simple', 'hover');
+    }
+
+    &.is-active {
+      background: eleVar('tab-simple', 'active');
+    }
+  }
+
+  &.is-simple .ele-tab-tool.is-tab {
+    &::after {
+      content: '';
+      width: 0;
+      height: 2px;
+      background: elVar('color-primary');
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+
+    &.is-active::after {
+      width: 100%;
+    }
+  }
+
+  // 按钮风格
+  &.is-button .ele-tab-tool {
+    $height: eleVar('tab', 'height');
+    $space: eleVar('tab-button', 'space');
+    #{elVarName('tabs', 'header-height')}: calc(#{$height} - #{$space});
+    background: eleVar('tab-button', 'bg');
+    border-radius: eleVar('tab-button', 'radius');
+
+    & + .ele-tab-tool {
+      margin-left: $space;
+    }
+  }
+}

package/lib/ele-tabs/types/index.d.ts

@@ -0,0 +1,36 @@
+import type { TabPaneProps, ElDropdown } from 'element-plus';
+import type SortableJs from 'sortablejs';
+/**
+ * 页签数据
+ */
+export interface TabPaneItem extends Partial<TabPaneProps> {
+    meta?: any;
+}
+/**
+ * 尺寸
+ */
+export type TabSize = 'large' | 'default' | 'small';
+/**
+ * 风格类型
+ */
+export type TabType = 'default' | 'card' | 'border-card' | 'plain' | 'simple' | 'indicator' | 'button';
+/**
+ * 页签事件参数
+ */
+export interface TabEventOption {
+    name?: string | number;
+    item?: TabPaneItem;
+    active?: string | number;
+    command?: string;
+}
+/**
+ * 下拉菜单实例
+ */
+export type DropdownInstance = InstanceType<typeof ElDropdown> | null;
+/**
+ * 页签实例数据
+ */
+export interface TabCurrent {
+    sortIns?: SortableJs | null;
+    isScroll?: boolean;
+}

package/lib/ele-text/index.d.ts

@@ -0,0 +1,36 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: import("vue").PropType<import("./types").TextType>;
+    size: import("vue").PropType<import("./types").TextSize>;
+    deleted: BooleanConstructor;
+    underline: BooleanConstructor;
+    strong: BooleanConstructor;
+    italic: BooleanConstructor;
+    icon: import("vue").PropType<import("./types").TextIcon>;
+    iconProps: import("vue").PropType<Partial<import("element-plus").IconProps>>;
+}, {
+    authenticated: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: import("vue").PropType<import("./types").TextType>;
+    size: import("vue").PropType<import("./types").TextSize>;
+    deleted: BooleanConstructor;
+    underline: BooleanConstructor;
+    strong: BooleanConstructor;
+    italic: BooleanConstructor;
+    icon: import("vue").PropType<import("./types").TextIcon>;
+    iconProps: import("vue").PropType<Partial<import("element-plus").IconProps>>;
+}>>, {
+    tag: string;
+    deleted: boolean;
+    underline: boolean;
+    strong: boolean;
+    italic: boolean;
+}, {}>;
+export default _sfc_main;

package/lib/ele-text/index.js

@@ -0,0 +1,62 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const licenseUtil = require("../utils/license-util");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleText",
+  component: { ElIcon: elementPlus.ElIcon },
+  props: props.textProps,
+  setup() {
+    const { authenticated } = licenseUtil.useLicense();
+    return { authenticated };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
+    class: vue.normalizeClass([
+      "ele-text",
+      { "is-heading": _ctx.type === "heading" },
+      { "is-secondary": _ctx.type === "secondary" },
+      { "is-placeholder": _ctx.type === "placeholder" },
+      { "is-primary": _ctx.type === "primary" },
+      { "is-success": _ctx.type === "success" },
+      { "is-warning": _ctx.type === "warning" },
+      { "is-danger": _ctx.type === "danger" },
+      { "is-info": _ctx.type === "info" },
+      { "is-xs": _ctx.size === "xs" },
+      { "is-sm": _ctx.size === "sm" },
+      { "is-md": _ctx.size === "md" },
+      { "is-lg": _ctx.size === "lg" },
+      { "is-xl": _ctx.size === "xl" },
+      { "is-xxl": _ctx.size === "xxl" },
+      { "is-xxxl": _ctx.size === "xxxl" },
+      { "is-delete": _ctx.deleted },
+      { "is-underline": _ctx.underline },
+      { "is-strong": _ctx.strong },
+      { "is-italic": _ctx.italic },
+      { "is-icon": !!_ctx.icon }
+    ])
+  }, {
+    default: vue.withCtx(() => [
+      _ctx.authenticated && _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_ElIcon, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.iconProps)), {
+        default: vue.withCtx(() => [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
+        ]),
+        _: 1
+      }, 16)) : vue.createCommentVNode("", true),
+      vue.renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["class"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-text/props.d.ts

@@ -0,0 +1,21 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { IconProps } from 'element-plus';
+import type { TextType, TextSize, TextIcon } from './types';
+/**
+ * 属性
+ */
+export declare const textProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: PropType<TextType>;
+    size: PropType<TextSize>;
+    deleted: BooleanConstructor;
+    underline: BooleanConstructor;
+    strong: BooleanConstructor;
+    italic: BooleanConstructor;
+    icon: PropType<TextIcon>;
+    iconProps: PropType<Partial<IconProps>>;
+};
+export type TextProps = ExtractPropTypes<typeof textProps>;

package/lib/ele-text/props.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const textProps = {
+  // 渲染标签
+  tag: {
+    type: String,
+    default: "div"
+  },
+  // 类型
+  type: String,
+  // 文字大小
+  size: String,
+  // 文字删除线
+  deleted: Boolean,
+  // 文字下划线
+  underline: Boolean,
+  // 是否加粗
+  strong: Boolean,
+  // 是否斜体
+  italic: Boolean,
+  // 图标
+  icon: [String, Object, Function],
+  // 图标属性
+  iconProps: Object
+};
+exports.textProps = textProps;

package/lib/ele-text/style/css-var.scss

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

package/lib/ele-text/style/index.js

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

package/lib/ele-text/style/index.scss

@@ -0,0 +1,98 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-text-var($ele);
+
+.ele-text {
+  color: elVar('text-color', 'regular');
+  font-size: elVar('font-size', 'base');
+  box-sizing: border-box;
+
+  // 类型
+  &.is-heading {
+    color: elVar('text-color', 'primary');
+  }
+
+  &.is-secondary {
+    color: elVar('text-color', 'secondary');
+  }
+
+  &.is-placeholder {
+    color: elVar('text-color', 'placeholder');
+  }
+
+  &.is-primary {
+    color: elVar('color-primary');
+  }
+
+  &.is-success {
+    color: elVar('color-success');
+  }
+
+  &.is-warning {
+    color: elVar('color-warning');
+  }
+
+  &.is-danger {
+    color: elVar('color-danger');
+  }
+
+  &.is-info {
+    color: elVar('color-info');
+  }
+
+  // 尺寸
+  &.is-xs {
+    font-size: elVar('font-size', 'extra-small');
+  }
+
+  &.is-sm {
+    font-size: elVar('font-size', 'small');
+  }
+
+  &.is-md {
+    font-size: elVar('font-size', 'medium');
+  }
+
+  &.is-lg {
+    font-size: elVar('font-size', 'large');
+  }
+
+  &.is-xl {
+    font-size: elVar('font-size', 'extra-large');
+  }
+
+  &.is-xxl {
+    font-size: eleVar('text-size', 'xxl');
+  }
+
+  &.is-xxxl {
+    font-size: eleVar('text-size', 'xxxl');
+  }
+
+  // 其它
+  &.is-delete {
+    text-decoration: line-through;
+  }
+
+  &.is-underline {
+    text-decoration: underline;
+
+    &.is-delete {
+      text-decoration: line-through underline;
+    }
+  }
+
+  &.is-strong {
+    font-weight: bold;
+  }
+
+  &.is-italic {
+    font-style: italic;
+  }
+
+  // 图标
+  &.is-icon > .el-icon {
+    vertical-align: -2px;
+  }
+}