yuang-framework-ui-pc 1.1.44 → 1.1.46

package/lib/ele-icon-select/props.cjs

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const iconSelectProps = {
+  /** 选中值 */
+  modelValue: String,
+  /** 图标数据 */
+  data: {
+    type: Array,
+    required: true
+  },
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 尺寸 */
+  size: String,
+  /** 是否支持清除 */
+  clearable: Boolean,
+  /** 无选中时提示文本 */
+  placeholder: String,
+  /** 是否在输入框获得焦点后自动弹出选项菜单 */
+  automaticDropdown: Boolean,
+  /** 是否可以筛选 */
+  filterable: [Boolean, String],
+  /** 是否将下拉框插入 body */
+  teleported: {
+    type: Boolean,
+    default: true
+  },
+  /** 始终渲染下拉框 */
+  persistent: {
+    type: Boolean,
+    default: true
+  },
+  /** 下拉框位置 */
+  placement: {
+    type: String,
+    default: "bottom-start"
+  },
+  /** 下拉框渐变动画 */
+  transition: {
+    type: String,
+    default: "el-zoom-in-top"
+  },
+  /** popper.js 参数 */
+  popperOptions: Object,
+  /** 下拉框类名 */
+  popperClass: String,
+  /** 下拉框宽度 */
+  popperWidth: {
+    type: [Number, String],
+    default: 414
+  },
+  /** 下拉框高度 */
+  popperHeight: {
+    type: [Number, String],
+    default: 260
+  },
+  /** 自定义样式 */
+  selectStyle: Object,
+  /** 自定义样式 */
+  inputStyle: Object,
+  /** 自定义多选标签容器样式 */
+  selectTagsStyle: Object,
+  /** 顶部选项卡只有一个时隐藏 */
+  hideOnSingleTab: Boolean,
+  /** 空组件属性 */
+  emptyProps: Object,
+  /** 是否显示文本提示 */
+  tooltip: {
+    type: Boolean,
+    default: true
+  },
+  /** 提示属性 */
+  tooltipProps: Object,
+  /** 头部样式 */
+  headerStyle: Object,
+  /** 选项卡样式 */
+  tabsStyle: Object,
+  /** 搜索区样式 */
+  searchStyle: Object,
+  /** 菜单样式 */
+  menusStyle: Object,
+  /** 主体样式 */
+  bodyStyle: Object,
+  /** 网格样式 */
+  gridStyle: Object,
+  /** 图标样式 */
+  itemStyle: Object,
+  /** 搜索框提示文本 */
+  filterPlaceholder: {
+    type: String,
+    default: ""
+  },
+  /** 是否开启响应式 */
+  responsive: {
+    type: Boolean,
+    default: null
+  }
+};
+const iconSelectEmits = {
+  /** 更新展开状态 */
+  "update:modelValue": (_value) => true,
+  /** 选中值改变事件 */
+  change: (_value) => true,
+  /** 下拉框展开状态改变事件 */
+  visibleChange: (_visible) => true,
+  /** 清空事件 */
+  clear: () => true,
+  /** 获取焦点事件 */
+  focus: (_e) => true,
+  /** 失去焦点事件 */
+  blur: (_e) => true
+};
+exports.iconSelectEmits = iconSelectEmits;
+exports.iconSelectProps = iconSelectProps;

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

@@ -0,0 +1,123 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { ElInputProps, ElEmptyProps } from '../ele-app/el';
+import { EleTooltipProps } from '../ele-app/plus';
+import { IconItem } from './types';
+
+/**
+ * 属性
+ */
+export declare const iconSelectProps: {
+    /** 选中值 */
+    modelValue: StringConstructor;
+    /** 图标数据 */
+    data: {
+        type: PropType<string[] | IconItem[]>;
+        required: boolean;
+    };
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
+    /** 尺寸 */
+    size: PropType<ElInputProps["size"]>;
+    /** 是否支持清除 */
+    clearable: BooleanConstructor;
+    /** 无选中时提示文本 */
+    placeholder: StringConstructor;
+    /** 是否在输入框获得焦点后自动弹出选项菜单 */
+    automaticDropdown: BooleanConstructor;
+    /** 是否可以筛选 */
+    filterable: PropType<boolean | "popper">;
+    /** 是否将下拉框插入 body */
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 始终渲染下拉框 */
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 下拉框位置 */
+    placement: {
+        type: PropType<EleTooltipProps["placement"]>;
+        default: string;
+    };
+    /** 下拉框渐变动画 */
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** popper.js 参数 */
+    popperOptions: PropType<EleTooltipProps["popperOptions"]>;
+    /** 下拉框类名 */
+    popperClass: StringConstructor;
+    /** 下拉框宽度 */
+    popperWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    /** 下拉框高度 */
+    popperHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    /** 自定义样式 */
+    selectStyle: PropType<StyleValue>;
+    /** 自定义样式 */
+    inputStyle: PropType<StyleValue>;
+    /** 自定义多选标签容器样式 */
+    selectTagsStyle: PropType<StyleValue>;
+    /** 顶部选项卡只有一个时隐藏 */
+    hideOnSingleTab: BooleanConstructor;
+    /** 空组件属性 */
+    emptyProps: PropType<ElEmptyProps>;
+    /** 是否显示文本提示 */
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 提示属性 */
+    tooltipProps: PropType<EleTooltipProps>;
+    /** 头部样式 */
+    headerStyle: PropType<StyleValue>;
+    /** 选项卡样式 */
+    tabsStyle: PropType<StyleValue>;
+    /** 搜索区样式 */
+    searchStyle: PropType<StyleValue>;
+    /** 菜单样式 */
+    menusStyle: PropType<StyleValue>;
+    /** 主体样式 */
+    bodyStyle: PropType<StyleValue>;
+    /** 网格样式 */
+    gridStyle: PropType<StyleValue>;
+    /** 图标样式 */
+    itemStyle: PropType<StyleValue>;
+    /** 搜索框提示文本 */
+    filterPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 是否开启响应式 */
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+};
+export type IconSelectProps = ExtractPropTypes<typeof iconSelectProps>;
+/**
+ * 事件
+ */
+export declare const iconSelectEmits: {
+    /** 更新展开状态 */
+    'update:modelValue': (_value?: string | null) => boolean;
+    /** 选中值改变事件 */
+    change: (_value?: string | null) => boolean;
+    /** 下拉框展开状态改变事件 */
+    visibleChange: (_visible: boolean) => boolean;
+    /** 清空事件 */
+    clear: () => boolean;
+    /** 获取焦点事件 */
+    focus: (_e: FocusEvent) => boolean;
+    /** 失去焦点事件 */
+    blur: (_e: FocusEvent) => boolean;
+};

package/lib/ele-icon-select/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 图标选择主题变量 */
+@mixin set-icon-var($var) {
+  .ele-icon-select {
+    @include set-ele-var('icon', $var);
+  }
+}

package/lib/ele-icon-select/style/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+require("element-plus/es/components/empty/style/index");
+require("element-plus/es/components/scrollbar/style/index");
+require("element-plus/es/components/input/style/index");
+require("../../ele-tooltip/style/index");
+require("../../ele-basic-select/style/index");
+require("./index.scss");

package/lib/ele-icon-select/style/index.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,235 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-icon-var($ele);
+
+.ele-select.is-icon-select .el-input__prefix-inner {
+  color: elVar('input', 'text-color');
+}
+
+.ele-icon-select-popper.is-responsive {
+  max-width: calc(100vw - 32px);
+}
+
+.ele-icon-select {
+  display: flex;
+  flex-direction: column;
+}
+
+.ele-icon-select-header {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: eleVar('icon', 'header-padding');
+  box-shadow: 0 -0.8px 0 elVar('border-color', 'light') inset;
+}
+
+.ele-icon-select-tabs {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+
+  .ele-icon-select-tab {
+    height: eleVar('icon', 'tab-height');
+    line-height: eleVar('icon', 'tab-height');
+    color: eleVar('icon', 'tab-color');
+    font-size: eleVar('icon', 'tab-font-size');
+    padding: eleVar('icon', 'tab-padding');
+    border-radius: eleVar('icon', 'tab-radius');
+    transition: (color $transition-base, background-color $transition-base);
+    box-sizing: border-box;
+    word-break: break-all;
+    white-space: nowrap;
+    position: relative;
+    cursor: pointer;
+
+    & + .ele-icon-select-tab {
+      margin-left: eleVar('icon', 'tab-space');
+    }
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: eleVar('icon', 'tab-active-line');
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      opacity: 0;
+      transform: scaleX(0.0001);
+      background: elVar('color-primary');
+      transition: (
+        transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
+        opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1)
+      );
+    }
+
+    &:hover {
+      color: eleVar('icon', 'tab-hover-color');
+      background: eleVar('icon', 'tab-hover-bg');
+    }
+
+    &:active {
+      background: eleVar('icon', 'tab-active-bg');
+    }
+
+    &.is-active {
+      color: eleVar('icon', 'tab-active-color');
+      background: eleVar('icon', 'tab-active-bg');
+      font-weight: eleVar('icon', 'tab-active-font-weight');
+
+      &::after {
+        opacity: 1;
+        transform: scaleX(1);
+        transition: (
+          transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+          opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1)
+        );
+      }
+    }
+  }
+}
+
+.ele-icon-select-search {
+  width: 100%;
+  flex-shrink: 0;
+  padding: eleVar('icon', 'search-padding');
+  box-sizing: border-box;
+
+  & > .el-input .el-input__prefix .el-input__icon {
+    font-size: eleVar('icon', 'search-icon-size');
+  }
+}
+
+.ele-icon-select-tabs + .ele-icon-select-search {
+  width: eleVar('icon', 'search-width');
+  padding-left: 12px;
+}
+
+.ele-icon-select-main {
+  flex: 1;
+  display: flex;
+  overflow: auto;
+}
+
+.ele-icon-select-menus {
+  height: 100%;
+  width: eleVar('icon', 'menus-width');
+  flex-shrink: 0;
+  overflow: auto;
+  padding: eleVar('icon', 'menus-padding');
+  box-shadow: -0.8px 0 0 elVar('border-color', 'light') inset;
+  box-sizing: border-box;
+
+  .ele-icon-select-menu {
+    height: eleVar('icon', 'menu-height');
+    line-height: eleVar('icon', 'menu-height');
+    color: eleVar('icon', 'menu-color');
+    font-size: eleVar('icon', 'menu-font-size');
+    padding: eleVar('icon', 'menu-padding');
+    border-radius: eleVar('icon', 'menu-radius');
+    transition: (color $transition-base, background-color $transition-base);
+    overflow: hidden;
+    white-space: nowrap;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+
+    & + .ele-icon-select-menu {
+      margin-top: eleVar('icon', 'menu-space');
+    }
+
+    &::after {
+      content: '';
+      height: 100%;
+      width: eleVar('icon', 'menu-active-line');
+      position: absolute;
+      top: 0;
+      right: 0;
+      opacity: 0;
+      transform: scaleY(0.0001);
+      background: elVar('color-primary');
+      transition: (
+        transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
+        opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1)
+      );
+    }
+
+    &:hover {
+      color: eleVar('icon', 'menu-hover-color');
+      background: eleVar('icon', 'menu-hover-bg');
+    }
+
+    &:active {
+      background: eleVar('icon', 'menu-active-bg');
+    }
+
+    &.is-active {
+      color: eleVar('icon', 'menu-active-color');
+      background: eleVar('icon', 'menu-active-bg');
+      font-weight: eleVar('icon', 'menu-active-font-weight');
+
+      &::after {
+        opacity: 1;
+        transform: scaleY(1);
+        transition: (
+          transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+          opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1)
+        );
+      }
+    }
+  }
+}
+
+.ele-icon-select-body {
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  & > .el-scrollbar__wrap > .el-scrollbar__view {
+    padding: eleVar('icon', 'body-padding');
+  }
+}
+
+.ele-icon-select-grid {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 8px;
+
+  .ele-icon-select-item {
+    height: 48px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: eleVar('icon', 'color');
+    font-size: eleVar('icon', 'font-size');
+    border: eleVar('icon', 'border');
+    border-radius: eleVar('icon', 'radius');
+    transition: (
+      color $transition-base,
+      background-color $transition-base,
+      border-color $transition-base
+    );
+    box-sizing: border-box;
+    overflow: hidden;
+    cursor: pointer;
+
+    &:hover {
+      color: eleVar('icon', 'hover-color');
+      background: eleVar('icon', 'hover-bg');
+      border: eleVar('icon', 'hover-border');
+    }
+
+    &.is-active {
+      color: eleVar('icon', 'active-color');
+      background: eleVar('icon', 'active-bg');
+      border: eleVar('icon', 'active-border');
+    }
+  }
+}

package/lib/ele-image-viewer/index.cjs

@@ -0,0 +1,87 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const core = require("../utils/core");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleImageViewer",
+  components: { ElImageViewer: elementPlus.ElImageViewer },
+  props: props.imageViewerProps,
+  emits: props.imageViewerEmits,
+  setup(props2, { emit }) {
+    const imageViewerRef = vue.ref(null);
+    const viewerProps = vue.computed(() => {
+      const options = core.omit(props2, [
+        "modelValue",
+        "customClass",
+        "customStyle",
+        "transitionName",
+        "keepAlive"
+      ]);
+      options.teleported = false;
+      return options;
+    });
+    const handleClose = () => {
+      emit("update:modelValue", false);
+      emit("close");
+    };
+    const handleSwitch = (index2) => {
+      emit("switch", index2);
+    };
+    const handleRotate = (deg) => {
+      emit("rotate", deg);
+    };
+    vue.onDeactivated(() => {
+      handleClose();
+    });
+    return {
+      imageViewerRef,
+      viewerProps,
+      handleClose,
+      handleSwitch,
+      handleRotate
+    };
+  }
+});
+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_ElImageViewer = vue.resolveComponent("ElImageViewer");
+  return vue.openBlock(), vue.createBlock(vue.Teleport, {
+    to: "body",
+    disabled: !_ctx.teleported
+  }, [
+    vue.createVNode(vue.Transition, {
+      name: _ctx.transitionName,
+      appear: true
+    }, {
+      default: vue.withCtx(() => [
+        _ctx.modelValue ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass(["ele-image-viewer", _ctx.customClass]),
+          style: vue.normalizeStyle(_ctx.customStyle)
+        }, [
+          vue.createVNode(_component_ElImageViewer, vue.mergeProps(_ctx.viewerProps, {
+            ref: "imageViewerRef",
+            onClose: _ctx.handleClose,
+            onSwitch: _ctx.handleSwitch,
+            onRotate: _ctx.handleRotate
+          }), {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["onClose", "onSwitch", "onRotate"])
+        ], 6)) : vue.createCommentVNode("", true)
+      ]),
+      _: 3
+    }, 8, ["name"])
+  ], 8, ["disabled"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-image-viewer/props.d.ts

@@ -0,0 +1,115 @@
+import { ExtractPropTypes } from 'vue';
+
+/**
+ * 属性
+ */
+export declare const imageViewerProps: {
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否打开 */
+    modelValue: BooleanConstructor;
+    /** 自定义类名 */
+    customClass: StringConstructor;
+    /** 自定义样式 */
+    customStyle: ObjectConstructor;
+    /** 过渡动画名称 */
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 是否失活后仍然显示 */
+    keepAlive: BooleanConstructor;
+    urlList: {
+        readonly type: import('vue').PropType<string[]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: () => [];
+    };
+    zIndex: {
+        readonly type: import('vue').PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    initialIndex: {
+        readonly type: import('vue').PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0;
+    };
+    infinite: {
+        readonly type: import('vue').PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    hideOnClickModal: BooleanConstructor;
+    closeOnPressEscape: {
+        readonly type: import('vue').PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    zoomRate: {
+        readonly type: import('vue').PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 1.2;
+    };
+    minScale: {
+        readonly type: import('vue').PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0.2;
+    };
+    maxScale: {
+        readonly type: import('vue').PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 7;
+    };
+    showProgress: {
+        readonly type: import('vue').PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: false;
+    };
+    crossorigin: {
+        readonly type: import('vue').PropType<"" | "anonymous" | "use-credentials">;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+};
+export type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>;
+/**
+ * 事件
+ */
+export declare const imageViewerEmits: {
+    /** 更新打开状态 */
+    'update:modelValue': (_value?: boolean) => boolean;
+    /** 关闭事件 */
+    close: () => boolean;
+    /** 切换图像事件 */
+    switch: (_index: number) => boolean;
+    /** 旋转图像事件 */
+    rotate: (_deg: number) => boolean;
+};

package/lib/ele-image-viewer/style/css-var.scss

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