yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/ele-steps/props.d.ts

@@ -0,0 +1,68 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StepType, StepItem } from './types';
+
+/**
+ * 属性
+ */
+export declare const stepsProps: {
+    /** 步骤条数据 */
+    items: {
+        type: PropType<StepItem[]>;
+        required: boolean;
+    };
+    /** 类型 */
+    type: PropType<StepType>;
+    space: {
+        readonly type: PropType<string | number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    active: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0;
+    };
+    direction: {
+        readonly type: PropType<"horizontal" | "vertical">;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "horizontal";
+    };
+    alignCenter: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    simple: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    finishStatus: {
+        readonly type: PropType<"error" | "success" | "wait" | "finish" | "process">;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "finish";
+    };
+    processStatus: {
+        readonly type: PropType<"error" | "success" | "wait" | "finish" | "process">;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "process";
+    };
+};
+export type StepsProps = ExtractPropTypes<typeof stepsProps>;

package/es/ele-steps/props.js

@@ -0,0 +1,14 @@
+import { stepsProps as stepsProps$1 } from "element-plus";
+const stepsProps = {
+  ...stepsProps$1,
+  /** 步骤条数据 */
+  items: {
+    type: Array,
+    required: true
+  },
+  /** 类型 */
+  type: String
+};
+export {
+  stepsProps
+};

package/es/ele-steps/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 步骤条主题变量 */
+@mixin set-step-var($var) {
+  .ele-steps {
+    @include set-ele-var('step', $var);
+  }
+}

package/es/ele-steps/style/index.scss

@@ -0,0 +1,206 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-step-var($ele);
+
+.ele-steps .el-step {
+  .el-step__head {
+    width: auto;
+    position: static;
+    display: flex;
+  }
+
+  .el-step__main {
+    padding: eleVar('step', 'margin') 0 0 0;
+    box-sizing: border-box;
+  }
+
+  /* 线条 */
+  .el-step__line {
+    background: none;
+    border-style: solid;
+    border-width: eleVar('step', 'line-size');
+    border-color: eleVar('step', 'line-color');
+    transition: border-color $transition-base;
+  }
+
+  .el-step__line-inner {
+    display: none;
+  }
+
+  /* 图标 */
+  .el-step__icon {
+    width: auto;
+    height: auto;
+    display: flex;
+    color: eleVar('step', 'color');
+    font-size: eleVar('step', 'icon-size');
+    transition: (
+      color $transition-base,
+      border-color $transition-base,
+      background-color $transition-base
+    );
+
+    &.is-text {
+      width: eleVar('step', 'icon-size');
+      height: eleVar('step', 'icon-size');
+      line-height: eleVar('step', 'icon-size');
+      font-size: eleVar('step', 'icon-font-size');
+      font-weight: eleVar('step', 'icon-font-weight');
+      background: eleVar('step', 'icon-bg');
+      border: eleVar('step', 'icon-border');
+    }
+
+    .el-step__icon-inner {
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      transform: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  /* 标题 */
+  .el-step__title {
+    color: eleVar('step', 'color');
+    font-size: eleVar('step', 'font-size');
+    font-weight: eleVar('step', 'font-weight');
+    line-height: eleVar('step', 'line-height');
+    padding: 0;
+  }
+
+  /* 描述 */
+  .el-step__description {
+    color: eleVar('step', 'text-color');
+    font-size: eleVar('step', 'text-font-size');
+    line-height: eleVar('step', 'text-line-height');
+    margin: eleVar('step', 'text-margin') 0 0 0;
+    padding: 0;
+  }
+
+  /* 当前步骤 */
+  .el-step__head.is-process {
+    .el-step__icon {
+      color: eleVar('step', 'active-icon-bg');
+
+      &.is-text {
+        color: eleVar('step', 'active-icon-color');
+        background: eleVar('step', 'active-icon-bg');
+        border: eleVar('step', 'active-icon-border');
+      }
+    }
+  }
+
+  .el-step__title.is-process {
+    color: eleVar('step', 'active-color');
+  }
+
+  .el-step__description.is-process {
+    color: eleVar('step', 'active-text-color');
+  }
+
+  /* 完成步骤 */
+  .el-step__head.is-finish,
+  .el-step__head.is-success {
+    .el-step__line {
+      border-color: eleVar('step', 'finish-line-color');
+    }
+
+    .el-step__icon {
+      color: eleVar('step', 'finish-icon-color');
+
+      &.is-text {
+        background: eleVar('step', 'finish-icon-bg');
+        border: eleVar('step', 'finish-icon-border');
+      }
+
+      .el-step__icon-inner.is-status {
+        font-size: eleVar('step', 'finish-icon-font-size');
+      }
+    }
+  }
+
+  .el-step__title.is-finish,
+  .el-step__title.is-success {
+    color: eleVar('step', 'finish-color');
+  }
+
+  .el-step__description.is-finish,
+  .el-step__description.is-success {
+    color: eleVar('step', 'finish-text-color');
+  }
+
+  /* 水平 */
+  &.is-horizontal {
+    $space: eleVar('step', 'line-space');
+    $icon-size: eleVar('step', 'icon-size');
+
+    .el-step__line {
+      top: calc((#{$icon-size} - #{eleVar('step', 'line-size')}) / 2);
+      left: calc(#{$icon-size} + #{$space});
+      right: $space;
+      border-top: none;
+      border-left: none;
+      border-right: none;
+      height: 0;
+    }
+
+    &.is-center {
+      .el-step__line {
+        left: calc(50% + #{$space} + (#{$icon-size} / 2));
+        right: calc(-50% + #{$space} + (#{$icon-size} / 2));
+      }
+
+      .el-step__head {
+        justify-content: center;
+      }
+    }
+  }
+
+  /* 垂直 */
+  &.is-vertical {
+    $space: eleVar('step', 'line-space');
+    $icon-size: eleVar('step', 'icon-size');
+
+    .el-step__line {
+      left: calc((#{$icon-size} - #{eleVar('step', 'line-size')}) / 2);
+      top: calc(#{$icon-size} + #{$space});
+      bottom: $space;
+      border-right: none;
+      border-top: none;
+      border-bottom: none;
+      width: 0;
+    }
+
+    .el-step__main {
+      padding: 0 0 0 eleVar('step', 'vertical-margin');
+    }
+  }
+}
+
+/* 紧凑风格 */
+.ele-steps.is-inline .el-step {
+  display: flex;
+  align-items: flex-start;
+
+  .el-step__main {
+    flex-grow: 1;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .el-step__title {
+      padding: 0 eleVar('step', 'line-space') 0 eleVar('step', 'margin');
+      background: eleVar('step', 'bg');
+      position: relative;
+    }
+
+    .el-step__description {
+      padding: 0 eleVar('step', 'margin');
+    }
+  }
+}

package/es/ele-tab-tool/style/index.js

@@ -0,0 +1 @@
+

package/es/ele-tab-wrap/index.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    size: import('vue').PropType<import('../ele-tabs/types').TabSize>;
+    type: import('vue').PropType<import('../ele-tabs/types').TabType>;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    size: import('vue').PropType<import('../ele-tabs/types').TabSize>;
+    type: import('vue').PropType<import('../ele-tabs/types').TabType>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/ele-tab-wrap/index.js

@@ -0,0 +1,73 @@
+import { defineComponent, reactive, provide, watch, onBeforeMount, createElementBlock, openBlock, normalizeClass, renderSlot } from "vue";
+import { TAB_WRAP_KEY } from "../ele-tabs/props";
+import { tabWrapProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleTabWrap",
+  props: tabWrapProps,
+  setup(props) {
+    const tabMethods = {};
+    const data = reactive({
+      size: props.size,
+      type: props.type,
+      setTabMethods: (methods) => {
+        tabMethods.triggerTabItemClick = methods.triggerTabItemClick;
+        tabMethods.triggerItemContextMenu = methods.triggerItemContextMenu;
+      },
+      triggerTabItemClick: (item, tabName, e) => {
+        if (tabMethods.triggerTabItemClick) {
+          tabMethods.triggerTabItemClick(item, tabName, e);
+        }
+      },
+      triggerItemContextMenu: (item, tabName, e) => {
+        if (tabMethods.triggerItemContextMenu) {
+          tabMethods.triggerItemContextMenu(item, tabName, e);
+        }
+      }
+    });
+    provide(TAB_WRAP_KEY, data);
+    watch(
+      () => props.size,
+      () => {
+        data.size = props.size;
+      }
+    );
+    watch(
+      () => props.type,
+      () => {
+        data.type = props.type;
+      }
+    );
+    onBeforeMount(() => {
+      tabMethods.triggerTabItemClick = void 0;
+      tabMethods.triggerItemContextMenu = void 0;
+    });
+    return {};
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "ele-tab-wrap",
+      "ele-tabs-wrap",
+      { "is-small": _ctx.size === "small" },
+      { "is-large": _ctx.size === "large" },
+      { "is-simple": _ctx.type === "simple" },
+      { "is-indicator": _ctx.type === "indicator" },
+      { "is-button": _ctx.type === "button" },
+      { "is-tag": _ctx.type === "tag" }
+    ])
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-table/props.d.ts

@@ -0,0 +1,24 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { TableSize } from '../ele-pro-table/types';
+
+/**
+ * 属性
+ */
+export declare const tableProps: {
+    /** 是否为斑马纹 */
+    stripe: BooleanConstructor;
+    /** 是否带有纵向边框 */
+    border: BooleanConstructor;
+    /** 尺寸 */
+    size: PropType<TableSize>;
+    /** 是否有表头 */
+    hasHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否有表尾 */
+    hasFooter: BooleanConstructor;
+    /** 是否使用打印皮肤 */
+    printSkin: BooleanConstructor;
+};
+export type TableProps = ExtractPropTypes<typeof tableProps>;

package/es/ele-table/props.js

@@ -0,0 +1,20 @@
+const tableProps = {
+  /** 是否为斑马纹 */
+  stripe: Boolean,
+  /** 是否带有纵向边框 */
+  border: Boolean,
+  /** 尺寸 */
+  size: String,
+  /** 是否有表头 */
+  hasHeader: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否有表尾 */
+  hasFooter: Boolean,
+  /** 是否使用打印皮肤 */
+  printSkin: Boolean
+};
+export {
+  tableProps
+};

package/es/ele-table/style/css-var.scss

@@ -0,0 +1,54 @@
+@use '../../style/util.scss' as *;
+
+/* 静态表格主题变量 */
+@mixin set-table-var($var) {
+  .ele-table {
+    @include set-ele-var('table', $var);
+  }
+}
+
+/* 静态表格圆角 */
+@mixin table-radius($radius) {
+  & > thead > tr:first-child > th:first-child,
+  & > thead > tr:first-child > td:first-child,
+  &.is-border:not(.has-header) > tr:first-child > td:first-child,
+  &.is-border:not(.has-header) > tbody > tr:first-child > td:first-child {
+    border-top-left-radius: $radius;
+  }
+
+  & > thead > tr:first-child > th:last-child,
+  & > thead > tr:first-child > td:last-child,
+  &.is-border:not(.has-header) > tr:first-child > td:last-child,
+  &.is-border:not(.has-header) > tbody > tr:first-child > td:last-child {
+    border-top-right-radius: $radius;
+  }
+
+  &.is-border:not(.has-footer) > tr:last-child > td:first-child,
+  &.is-border:not(.has-footer) > tbody > tr:last-child > td:first-child,
+  & > tfoot > tr:last-child > td:first-child {
+    border-bottom-left-radius: $radius;
+  }
+
+  &.is-border:not(.has-footer) > tr:last-child > td:last-child,
+  &.is-border:not(.has-footer) > tbody > tr:last-child > td:last-child,
+  & > tfoot > tr:last-child > td:last-child {
+    border-bottom-right-radius: $radius;
+  }
+
+  &.has-header {
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+  }
+
+  &.has-footer {
+    border-bottom-left-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+
+  &.is-border {
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+    border-bottom-left-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+}

package/es/ele-table/style/index.scss

@@ -0,0 +1,219 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use '../../ele-data-table/style/css-var.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-table-var($ele);
+
+.ele-table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  /* 单元格样式 */
+  & > tr,
+  & > thead > tr,
+  & > tbody > tr,
+  & > tfoot > tr {
+    & > th,
+    & > td {
+      color: eleVar('table', 'color');
+      font-size: eleVar('table', 'font-size');
+      font-weight: normal;
+      line-height: eleVar('table', 'line-height');
+      padding: eleVar('table', 'padding');
+      transition: background-color $transition-base;
+      border-width: 0;
+      border-style: solid;
+      border-color: eleVar('table', 'border-color');
+      border-bottom-width: 1px;
+      vertical-align: middle;
+      box-sizing: border-box;
+      text-align: left;
+
+      /* 单元格对齐方式 */
+      &.is-align-left {
+        text-align: left;
+      }
+
+      &.is-align-center {
+        text-align: center;
+      }
+
+      &.is-align-right {
+        text-align: right;
+      }
+    }
+
+    & > td {
+      background: eleVar('table', 'tr-bg');
+    }
+
+    &:hover > td {
+      background: eleVar('table', 'tr-hover-bg');
+    }
+  }
+
+  /* 表头单元格 */
+  & > tr > th,
+  & > thead > tr > th,
+  & > tbody > tr > th,
+  & > tfoot > tr > th,
+  & > thead > tr > td {
+    color: eleVar('table', 'th-color');
+    font-weight: eleVar('table', 'th-font-weight');
+    background: eleVar('table', 'th-bg');
+  }
+
+  & > thead > tr > th {
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 0;
+      height: 20px;
+      border-right: 1px solid eleVar('table', 'border-color');
+      position: absolute;
+      right: 0;
+      top: 50%;
+      margin-top: -10px;
+    }
+  }
+
+  & > thead > tr > th:last-child::after,
+  &.is-border > thead > tr > th::after {
+    display: none;
+  }
+
+  /* 表尾 */
+  & > tfoot > tr > td {
+    background: eleVar('table', 'th-bg');
+  }
+
+  &:not(.is-border) > tfoot > tr:last-child > td {
+    border-bottom-width: 0;
+  }
+
+  /* 圆角 */
+  @include table-radius(eleVar('table', 'radius'));
+
+  /* 斑马纹 */
+  &.is-stripe {
+    & > tr:nth-child(even),
+    & > tbody > tr:nth-child(even) {
+      & > td {
+        background: eleVar('table', 'even-bg');
+      }
+
+      &:hover > td {
+        background: eleVar('table', 'tr-hover-bg');
+      }
+    }
+  }
+
+  /* 行选中 */
+  & > tr.is-active,
+  & > tbody > tr.is-active,
+  &.is-stripe > tr.is-active,
+  &.is-stripe > tbody > tr.is-active {
+    & > td {
+      background: eleVar('table', 'tr-active-bg');
+    }
+
+    &:hover > td {
+      background: eleVar('table', 'tr-active-hover-bg');
+    }
+  }
+
+  /* 大型尺寸 */
+  &.is-large {
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr,
+    & > tfoot > tr {
+      & > th,
+      & > td {
+        font-size: eleVar('table', 'lg-size');
+        padding: eleVar('table', 'lg-padding');
+      }
+    }
+
+    @include table-radius(eleVar('table', 'lg-radius'));
+  }
+
+  /* 小型尺寸 */
+  &.is-small {
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr,
+    & > tfoot > tr {
+      & > th,
+      & > td {
+        font-size: eleVar('table', 'sm-size');
+        padding: eleVar('table', 'sm-padding');
+      }
+    }
+
+    @include table-radius(eleVar('table', 'sm-radius'));
+  }
+
+  /* 全边框 */
+  &.is-border {
+    border-top: 1px solid eleVar('table', 'border-color');
+    border-left: 1px solid eleVar('table', 'border-color');
+
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr,
+    & > tfoot > tr {
+      & > th,
+      & > td {
+        border-right-width: 1px;
+      }
+    }
+  }
+
+  &:not(.has-header) {
+    border-top: 1px solid eleVar('table', 'border-color');
+  }
+
+  /* 表格内组件样式优化 */
+  @include table-common-style();
+
+  /* 打印风格的皮肤 */
+  &.is-print-skin {
+    table-layout: fixed;
+    border-collapse: collapse;
+    word-break: break-all;
+
+    &.is-border {
+      border-right: 2px solid eleVar('table', 'border-color');
+
+      & > tr,
+      & > thead > tr,
+      & > tbody > tr,
+      & > tfoot > tr {
+        & > th,
+        & > td {
+          border-right-width: 0;
+          border-left-width: 1px;
+        }
+      }
+    }
+  }
+}
+
+body table.ele-table.is-print-skin {
+  #{eleVarName('table', 'color')}: #000;
+  #{eleVarName('table', 'th-color')}: #000;
+  #{eleVarName('table', 'border-color')}: #000;
+  #{eleVarName('table', 'bg')}: transparent;
+  #{eleVarName('table', 'th-bg')}: transparent;
+  #{eleVarName('table', 'tr-bg')}: transparent;
+}
+
+table.ele-table.is-border.is-print-skin {
+  #{eleVarName('table', 'radius')}: 0;
+  #{eleVarName('table', 'sm-radius')}: 0;
+  #{eleVarName('table', 'lg-radius')}: 0;
+}