yuang-framework-ui-pc 1.1.44 → 1.1.45

package/es/ele-segmented/types.d.ts

@@ -0,0 +1,28 @@
+import type { Component } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { ElIconProps } from '../ele-app/el';
+
+/**
+ * 尺寸
+ */
+export type SegmentedSize = 'large' | 'default' | 'small';
+
+/**
+ * 数据
+ */
+export interface SegmentedItem extends Record<keyof any, any> {
+  /** 标题 */
+  label?: string;
+  /** 值 */
+  value: string | number;
+  /** 图标 */
+  icon?: string | Component;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 自定义样式 */
+  style?: StyleValue;
+  /** 自定义图标属性 */
+  iconProps?: ElIconProps;
+  /** 自定义图标样式 */
+  iconStyle?: StyleValue;
+}

package/es/{ele-dialog → ele-split-panel}/style/index.js

@@ -1,3 +1,2 @@
-import "element-plus/es/components/dialog/style/index";
 import "element-plus/es/components/icon/style/index";
 import "./index.scss";

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-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-segmented → ele-tabs}/style/index.js

@@ -1,4 +1,5 @@
 import "element-plus/es/components/tabs/style/index";
 import "element-plus/es/components/tab-pane/style/index";
 import "element-plus/es/components/icon/style/index";
+import "../../ele-dropdown/style/index";
 import "./index.scss";

package/es/ele-toolbar/types.d.ts

@@ -0,0 +1,19 @@
+import type { EleTooltipProps } from '../ele-app/plus';
+/**
+ * 工具栏主题
+ */
+export type ToolbarTheme = 'default' | 'plain';
+
+/**
+ * 共享数据
+ */
+export interface ToolbarProvide {
+  /** 显示提示 */
+  showTooltip?: (
+    text?: string,
+    el?: HTMLElement,
+    options?: EleTooltipProps
+  ) => void;
+  /** 关闭提示 */
+  hideTooltip?: () => void;
+}