yuang-framework-ui-pc 1.1.45 → 1.1.47

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

@@ -0,0 +1,31 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-breadcrumb {
+  white-space: nowrap;
+  font-size: inherit;
+
+  &::after,
+  &::before {
+    display: none;
+  }
+
+  .el-breadcrumb__item {
+    float: none;
+    display: inline;
+    vertical-align: -2px;
+
+    .el-breadcrumb__inner {
+      color: elVar('text-color', 'secondary');
+      font-weight: normal;
+
+      &.is-link:hover {
+        color: elVar('color-primary');
+      }
+    }
+
+    &:last-child .el-breadcrumb__inner {
+      color: elVar('text-color', 'regular');
+    }
+  }
+}

package/lib/ele-breadcrumb/types.d.ts

@@ -0,0 +1,32 @@
+import type { Component } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type {
+  ElIconProps,
+  ElBreadcrumbProps,
+  ElBreadcrumbItemProps
+} from '../ele-app/el';
+
+/**
+ * 面包屑导航分隔符
+ */
+export type BreadcrumbSeparator =
+  | ElBreadcrumbProps['separator']
+  | ElBreadcrumbProps['separatorIcon'];
+
+/**
+ * 面包屑导航数据
+ */
+export interface BreadcrumbItem extends ElBreadcrumbItemProps {
+  /** 循环的 key */
+  key?: string | number | symbol;
+  /** 标题 */
+  title?: string;
+  /** 图标 */
+  icon?: string | Component;
+  /** 图标属性 */
+  iconProps?: ElIconProps;
+  /** 图标样式 */
+  iconStyle?: StyleValue;
+  /** 插槽名称 */
+  slot?: Exclude<string, 'default'>;
+}

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

@@ -0,0 +1,106 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    header: StringConstructor;
+    footer: StringConstructor;
+    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    bodyClass: StringConstructor;
+    shadow: import('vue').PropType<import('../ele-app/el').ElCardProps["shadow"]>;
+    bordered: BooleanConstructor;
+    headerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    titleStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    footerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    collapsable: import('vue').PropType<boolean | "header">;
+    collapse: BooleanConstructor;
+    collapseIconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    flexTable: BooleanConstructor;
+}>, {
+    isCollapse: import('vue').Ref<boolean, boolean>;
+    handleBeforeLeave: (el: HTMLElement) => void;
+    handleLeave: (el: HTMLElement) => void;
+    handleAfterLeave: (el: HTMLElement) => void;
+    handleBeforeEnter: (el: HTMLElement) => void;
+    handleEnter: (el: HTMLElement) => void;
+    handleAfterEnter: (el: HTMLElement) => void;
+    handleCollapseClick: () => void;
+    handleHeaderClick: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    collapseChange: (_collapse: boolean) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    header: StringConstructor;
+    footer: StringConstructor;
+    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    bodyClass: StringConstructor;
+    shadow: import('vue').PropType<import('../ele-app/el').ElCardProps["shadow"]>;
+    bordered: BooleanConstructor;
+    headerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    titleStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    footerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    collapsable: import('vue').PropType<boolean | "header">;
+    collapse: BooleanConstructor;
+    collapseIconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    flexTable: BooleanConstructor;
+}>> & Readonly<{
+    onCollapseChange?: ((_collapse: boolean) => any) | undefined;
+}>, {
+    collapse: boolean;
+    bordered: boolean;
+    flexTable: boolean;
+}, {}, {
+    ElIcon: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+            readonly size: {
+                readonly type: import('vue').PropType<string | number>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+            readonly color: {
+                readonly type: import('vue').PropType<string>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+        }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            readonly size: {
+                readonly type: import('vue').PropType<string | number>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+            readonly color: {
+                readonly type: import('vue').PropType<string>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+        }>>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        readonly size: {
+            readonly type: import('vue').PropType<string | number>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+        readonly color: {
+            readonly type: import('vue').PropType<string>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+    }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) & import('vue').Plugin;
+    ArrowUp: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/ele-card/props.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const cardProps = {
+  /** 标题 */
+  header: String,
+  /** 页脚 */
+  footer: String,
+  /** 主体样式 */
+  bodyStyle: Object,
+  /** 主体类名 */
+  bodyClass: String,
+  /** 阴影 */
+  shadow: String,
+  /** 边框 */
+  bordered: Boolean,
+  /** 标题栏样式 */
+  headerStyle: Object,
+  /** 标题样式 */
+  titleStyle: Object,
+  /** 页脚样式 */
+  footerStyle: Object,
+  /** 是否可折叠 */
+  collapsable: [Boolean, String],
+  /** 是否折叠 */
+  collapse: Boolean,
+  /** 折叠按钮样式 */
+  collapseIconStyle: Object,
+  /** 内部表格是否弹性布局 */
+  flexTable: Boolean
+};
+const cardEmits = {
+  /** 折叠展开事件 */
+  collapseChange: (_collapse) => true
+};
+exports.cardEmits = cardEmits;
+exports.cardProps = cardProps;

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

@@ -0,0 +1,43 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { ElCardProps } from '../ele-app/el';
+
+/**
+ * 属性
+ */
+export declare const cardProps: {
+    /** 标题 */
+    header: StringConstructor;
+    /** 页脚 */
+    footer: StringConstructor;
+    /** 主体样式 */
+    bodyStyle: PropType<StyleValue>;
+    /** 主体类名 */
+    bodyClass: StringConstructor;
+    /** 阴影 */
+    shadow: PropType<ElCardProps["shadow"]>;
+    /** 边框 */
+    bordered: BooleanConstructor;
+    /** 标题栏样式 */
+    headerStyle: PropType<StyleValue>;
+    /** 标题样式 */
+    titleStyle: PropType<StyleValue>;
+    /** 页脚样式 */
+    footerStyle: PropType<StyleValue>;
+    /** 是否可折叠 */
+    collapsable: PropType<boolean | "header">;
+    /** 是否折叠 */
+    collapse: BooleanConstructor;
+    /** 折叠按钮样式 */
+    collapseIconStyle: PropType<StyleValue>;
+    /** 内部表格是否弹性布局 */
+    flexTable: BooleanConstructor;
+};
+export type CardProps = ExtractPropTypes<typeof cardProps>;
+/**
+ * 事件
+ */
+export declare const cardEmits: {
+    /** 折叠展开事件 */
+    collapseChange: (_collapse: boolean) => boolean;
+};

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

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 卡片主题变量 */
+@mixin set-card-var($var) {
+  .ele-card {
+    @include set-ele-var('card', $var);
+  }
+}

package/lib/ele-card/style/index.cjs

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

package/lib/ele-card/style/index.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,125 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-card-var($ele);
+
+.ele-card {
+  box-sizing: border-box;
+  background: eleVar('card', 'bg');
+  border-radius: eleVar('card', 'radius');
+  transition: (
+    border-color $transition-base,
+    background-color $transition-base,
+    box-shadow $transition-base
+  );
+
+  &.is-border {
+    border: eleVar('card', 'border');
+  }
+
+  &.is-shadow {
+    box-shadow: eleVar('card', 'shadow');
+  }
+
+  &.is-hover-shadow:hover {
+    box-shadow: eleVar('card', 'hover-shadow');
+  }
+}
+
+.ele-card-body {
+  padding: eleVar('card', 'padding');
+  transition: (
+    max-height $transition-base,
+    padding-top $transition-base,
+    padding-bottom $transition-base
+  );
+  box-sizing: border-box;
+}
+
+.ele-card-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: eleVar('card', 'header-color');
+  font-size: eleVar('card', 'header-font-size');
+  font-weight: eleVar('card', 'header-font-weight');
+  line-height: eleVar('card', 'header-line-height');
+  padding: eleVar('card', 'header-padding');
+  border-bottom: eleVar('card', 'header-border');
+  box-sizing: border-box;
+}
+
+.ele-card-title {
+  flex: 1;
+}
+
+.ele-card-footer {
+  flex-shrink: 0;
+  padding: eleVar('card', 'footer-padding');
+  border-top: eleVar('card', 'footer-border');
+  box-sizing: border-box;
+}
+
+/* 折叠按钮 */
+.ele-card-collapse-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('card', 'collapse-size');
+  height: eleVar('card', 'collapse-size');
+  color: eleVar('card', 'collapse-color');
+  font-size: eleVar('card', 'collapse-font-size');
+  border-radius: eleVar('card', 'collapse-radius');
+  margin: eleVar('card', 'collapse-margin');
+  transition: all $transition-base;
+  box-sizing: border-box;
+  user-select: none;
+  cursor: pointer;
+
+  svg.ele-arrow-up path {
+    transition: d $transition-base;
+  }
+
+  &:hover {
+    color: eleVar('card', 'collapse-hover-color');
+    background: eleVar('card', 'collapse-hover-bg');
+  }
+}
+
+/* 折叠状态 */
+.ele-card.is-collapse > .ele-card-header {
+  border-bottom: none;
+
+  & > .ele-card-collapse-icon svg.ele-arrow-up path {
+    #{'d'}: path('M10 17 24 31 38 17');
+  }
+}
+
+/* 内部表格高度铺满 */
+.ele-card.is-flex-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  & > .ele-card-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    & > .ele-pro-table {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+
+      & > .ele-pro-table-view {
+        flex: 1;
+        height: 100%;
+        overflow: hidden;
+      }
+    }
+  }
+}

package/lib/ele-check-card/components/card-item.cjs

@@ -0,0 +1,49 @@
+"use strict";
+const vue = require("vue");
+const _sfc_main = vue.defineComponent({
+  name: "CardItem",
+  props: {
+    /** 数据 */
+    item: Object,
+    /** 是否选中 */
+    checked: Boolean,
+    /** 是否禁用 */
+    disabled: Boolean,
+    /** 是否显示边框 */
+    bordered: Boolean,
+    /** 是否需要选中箭头 */
+    arrow: Boolean,
+    /** 选中箭头样式 */
+    arrowStyle: Object
+  }
+});
+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 vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "ele-check-card",
+      { "is-bordered": _ctx.bordered },
+      { "is-checked": _ctx.checked },
+      { "is-disabled": _ctx.disabled }
+    ])
+  }, [
+    vue.renderSlot(_ctx.$slots, "default", {
+      item: _ctx.item,
+      checked: _ctx.checked,
+      disabled: _ctx.disabled
+    }),
+    _ctx.arrow ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: "ele-check-card-arrow",
+      style: vue.normalizeStyle(_ctx.arrowStyle)
+    }, null, 4)) : vue.createCommentVNode("", true)
+  ], 2);
+}
+const cardItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = cardItem;

package/lib/ele-check-card/components/card-item.d.ts

@@ -0,0 +1,37 @@
+import { PropType } from 'vue';
+import { StyleValue } from '../../ele-app/types';
+import { CheckCardItem } from '../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 数据 */
+    item: PropType<CheckCardItem>;
+    /** 是否选中 */
+    checked: BooleanConstructor;
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
+    /** 是否显示边框 */
+    bordered: BooleanConstructor;
+    /** 是否需要选中箭头 */
+    arrow: BooleanConstructor;
+    /** 选中箭头样式 */
+    arrowStyle: PropType<StyleValue>;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 数据 */
+    item: PropType<CheckCardItem>;
+    /** 是否选中 */
+    checked: BooleanConstructor;
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
+    /** 是否显示边框 */
+    bordered: BooleanConstructor;
+    /** 是否需要选中箭头 */
+    arrow: BooleanConstructor;
+    /** 选中箭头样式 */
+    arrowStyle: PropType<StyleValue>;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    bordered: boolean;
+    checked: boolean;
+    arrow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/ele-check-card/index.cjs

@@ -0,0 +1,130 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const util = require("../ele-basic-select/util");
+const CardItem = require("./components/card-item");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleCheckCard",
+  components: { ElRow: elementPlus.ElRow, ElCol: elementPlus.ElCol, CardItem },
+  props: props.checkCardProps,
+  emits: props.checkCardEmits,
+  setup(props2, { emit }) {
+    const { validateChange } = util.useFormValidate();
+    const isChecked = (item) => {
+      if (props2.modelValue == null || item.value == null) {
+        return false;
+      }
+      if (!props2.multiple) {
+        return props2.modelValue === item.value;
+      }
+      if (!Array.isArray(props2.modelValue)) {
+        return false;
+      }
+      return props2.modelValue.includes(item.value);
+    };
+    const updateModelValue = (modelValue) => {
+      if (util.valueIsChanged(modelValue, props2.modelValue, props2.multiple)) {
+        emit("update:modelValue", modelValue);
+        validateChange();
+        emit("change", modelValue);
+      }
+    };
+    const handleItemClick = (item) => {
+      if (props2.disabled || item.disabled) {
+        return;
+      }
+      if (!props2.multiple) {
+        updateModelValue(item.value);
+        return;
+      }
+      if (!isChecked(item)) {
+        if (props2.modelValue == null || !Array.isArray(props2.modelValue)) {
+          updateModelValue(item.value == null ? [] : [item.value]);
+          return;
+        }
+        const temp = [...props2.modelValue];
+        if (item.value != null) {
+          temp.push(item.value);
+        }
+        updateModelValue(temp);
+        return;
+      }
+      if (props2.modelValue == null || !Array.isArray(props2.modelValue)) {
+        updateModelValue([]);
+        return;
+      }
+      updateModelValue(props2.modelValue.filter((v) => v !== item.value));
+    };
+    return { isChecked, handleItemClick };
+  }
+});
+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-check-card-group" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CardItem = vue.resolveComponent("CardItem");
+  const _component_ElCol = vue.resolveComponent("ElCol");
+  const _component_ElRow = vue.resolveComponent("ElRow");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    _ctx.row ? (vue.openBlock(), vue.createBlock(_component_ElRow, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.row === true ? {} : _ctx.row)), {
+      default: vue.withCtx(() => [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index2) => {
+          return vue.openBlock(), vue.createBlock(_component_ElCol, vue.mergeProps({
+            key: index2 + "-" + item.value
+          }, { ref_for: true }, item.col || {}), {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_CardItem, {
+                item,
+                checked: _ctx.isChecked(item),
+                disabled: _ctx.disabled || item.disabled,
+                bordered: _ctx.bordered || item.bordered,
+                arrow: _ctx.arrow,
+                arrowStyle: _ctx.arrowStyle,
+                style: vue.normalizeStyle([_ctx.itemStyle, item.style]),
+                class: vue.normalizeClass([_ctx.itemClass, item.class]),
+                onClick: ($event) => _ctx.handleItemClick(item)
+              }, {
+                default: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, "item", vue.mergeProps({ ref_for: true }, slotProps || {}), () => [
+                    vue.createTextVNode(vue.toDisplayString(item.value), 1)
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["item", "checked", "disabled", "bordered", "arrow", "arrowStyle", "style", "class", "onClick"])
+            ]),
+            _: 2
+          }, 1040);
+        }), 128))
+      ]),
+      _: 3
+    }, 16)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.items, (item, index2) => {
+      return vue.openBlock(), vue.createBlock(_component_CardItem, {
+        key: item.key ?? index2 + "-" + item.value,
+        item,
+        checked: _ctx.isChecked(item),
+        disabled: _ctx.disabled || item.disabled,
+        bordered: _ctx.bordered || item.bordered,
+        arrow: _ctx.arrow,
+        arrowStyle: _ctx.arrowStyle,
+        style: vue.normalizeStyle([_ctx.itemStyle, item.style]),
+        class: vue.normalizeClass([_ctx.itemClass, item.class]),
+        onClick: ($event) => _ctx.handleItemClick(item)
+      }, {
+        default: vue.withCtx((slotProps) => [
+          vue.renderSlot(_ctx.$slots, "item", vue.mergeProps({ ref_for: true }, slotProps || {}), () => [
+            vue.createTextVNode(vue.toDisplayString(item.value), 1)
+          ])
+        ]),
+        _: 2
+      }, 1032, ["item", "checked", "disabled", "bordered", "arrow", "arrowStyle", "style", "class", "onClick"]);
+    }), 128))
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;