yuang-framework-ui-pc 1.0.19 → 1.1.0

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

@@ -0,0 +1,58 @@
+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: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
+    zIndex: {
+        readonly type: import('vue').PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    initialIndex: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    infinite: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    hideOnClickModal: BooleanConstructor;
+    closeOnPressEscape: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    zoomRate: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
+    minScale: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 0.2, boolean>;
+    maxScale: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 7, boolean>;
+    crossorigin: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => ("" | "anonymous" | "use-credentials") & {}) | (() => "" | "anonymous" | "use-credentials") | ((new (...args: any[]) => ("" | "anonymous" | "use-credentials") & {}) | (() => "" | "anonymous" | "use-credentials"))[], unknown, unknown>>;
+        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);
+  }
+}

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

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

package/lib/ele-image-viewer/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-image-viewer/style/index.scss

@@ -0,0 +1,117 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-image-viewer-var($ele);
+
+.ele-image-viewer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition: all $transition-slow;
+  box-sizing: border-box;
+
+  .el-image-viewer__wrapper {
+    position: absolute;
+    background: elVar('overlay-color', 'lighter');
+    transition: opacity $transition-slow;
+    overflow: hidden;
+
+    &.viewer-fade-enter-active {
+      animation: none;
+    }
+
+    &.viewer-fade-leave-active {
+      animation: none;
+    }
+  }
+
+  .el-image-viewer__mask {
+    background: none;
+  }
+
+  .el-image-viewer__canvas {
+    transition: transform $transition-slow;
+  }
+
+  .el-image-viewer__img {
+    cursor: grab;
+  }
+
+  .el-image-viewer__close,
+  .el-image-viewer__prev,
+  .el-image-viewer__next {
+    width: eleVar('image-viewer', 'tool-size');
+    height: eleVar('image-viewer', 'tool-size');
+    font-size: eleVar('image-viewer', 'tool-font-size');
+    background: eleVar('image-viewer', 'tool-bg');
+    box-shadow: eleVar('image-viewer', 'tool-shadow');
+    transition: all $transition-base;
+    opacity: 1;
+
+    .el-icon {
+      cursor: inherit;
+    }
+
+    &:not(.is-disabled):hover {
+      background: eleVar('image-viewer', 'tool-hover-bg');
+    }
+
+    &.is-disabled {
+      opacity: eleVar('image-viewer', 'disabled-opacity');
+      cursor: not-allowed;
+    }
+  }
+
+  .el-image-viewer__actions {
+    $padding: calc(eleVar('image-viewer', 'tool-action-size') / 2);
+    width: auto;
+    height: auto;
+    padding: 0 $padding;
+    background: eleVar('image-viewer', 'tool-bg');
+    box-shadow: eleVar('image-viewer', 'tool-shadow');
+    border-radius: $padding;
+    cursor: default;
+    opacity: 1;
+  }
+
+  .el-image-viewer__actions__inner {
+    width: auto;
+    height: auto;
+
+    & > .el-icon {
+      width: eleVar('image-viewer', 'tool-action-size');
+      height: eleVar('image-viewer', 'tool-action-size');
+      font-size: eleVar('image-viewer', 'tool-action-font-size');
+      transition: all $transition-base;
+
+      &:hover {
+        background: eleVar('image-viewer', 'tool-action-hover-bg');
+      }
+
+      &:last-child > svg,
+      &:nth-last-child(2) > svg {
+        transform: scale(1.1);
+      }
+    }
+
+    & > i + i {
+      margin-left: eleVar('image-viewer', 'tool-action-gap');
+    }
+  }
+
+  .el-image-viewer__actions__divider {
+    display: none;
+  }
+}
+
+.ele-image-viewer-fade-enter-from > .el-image-viewer__wrapper,
+.ele-image-viewer-fade-leave-active > .el-image-viewer__wrapper {
+  opacity: 0;
+
+  & > .el-image-viewer__canvas {
+    transform: scale(0);
+  }
+}

package/lib/ele-loading/index.cjs

@@ -0,0 +1,71 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const ReceiverView = require("../ele-config-provider/components/receiver-view");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleLoading",
+  directives: { loading: elementPlus.vLoading },
+  components: { ReceiverView },
+  props: props.loadingProps,
+  setup(props2) {
+    const isCircle = vue.computed(() => {
+      return props2.type === "circle";
+    });
+    return { isCircle };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "ele-loading-dot" }, [
+  /* @__PURE__ */ vue.createElementVNode("i"),
+  /* @__PURE__ */ vue.createElementVNode("i"),
+  /* @__PURE__ */ vue.createElementVNode("i"),
+  /* @__PURE__ */ vue.createElementVNode("i")
+], -1);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ReceiverView = vue.resolveComponent("ReceiverView");
+  const _directive_loading = vue.resolveDirective("loading");
+  return vue.withDirectives((vue.openBlock(), vue.createBlock(_component_ReceiverView, {
+    "element-loading-text": _ctx.isCircle ? _ctx.text : void 0,
+    "element-loading-background": _ctx.isCircle ? _ctx.background : void 0,
+    "element-loading-spinner": _ctx.isCircle ? _ctx.spinner : void 0,
+    "element-loading-svg-view-box": _ctx.isCircle ? _ctx.svgViewBox : void 0,
+    class: vue.normalizeClass(["ele-loading", { "ele-loading-show": _ctx.loading }])
+  }, {
+    default: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "default"),
+      !_ctx.isCircle ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        style: vue.normalizeStyle(_ctx.spinnerStyle),
+        class: vue.normalizeClass([
+          "ele-loading-spinner",
+          { "ele-loading-blur": _ctx.blur },
+          { "ele-loading-small": _ctx.size === "small" },
+          { "ele-loading-large": _ctx.size === "large" }
+        ])
+      }, [
+        vue.renderSlot(_ctx.$slots, "spinner", {}, () => [
+          _hoisted_1
+        ]),
+        _ctx.text ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "ele-loading-text",
+          style: vue.normalizeStyle(_ctx.textStyle)
+        }, vue.toDisplayString(_ctx.text), 5)) : vue.createCommentVNode("", true)
+      ], 6)), [
+        [vue.vShow, _ctx.loading]
+      ]) : vue.createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["element-loading-text", "element-loading-background", "element-loading-spinner", "element-loading-svg-view-box", "class"])), [
+    [_directive_loading, _ctx.isCircle && _ctx.loading]
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

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

@@ -0,0 +1,36 @@
+declare const _default: import('vue').DefineComponent<{
+    loading: BooleanConstructor;
+    text: StringConstructor;
+    background: StringConstructor;
+    spinner: StringConstructor;
+    svgViewBox: StringConstructor;
+    type: {
+        type: import('vue').PropType<import('./types').LoadingType>;
+        default: string;
+    };
+    blur: BooleanConstructor;
+    size: import('vue').PropType<import('./types').LoadingSize>;
+    spinnerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    textStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+}, {
+    isCircle: import('vue').ComputedRef<boolean>;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    loading: BooleanConstructor;
+    text: StringConstructor;
+    background: StringConstructor;
+    spinner: StringConstructor;
+    svgViewBox: StringConstructor;
+    type: {
+        type: import('vue').PropType<import('./types').LoadingType>;
+        default: string;
+    };
+    blur: BooleanConstructor;
+    size: import('vue').PropType<import('./types').LoadingSize>;
+    spinnerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    textStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+}>>, {
+    type: import('./types').LoadingType;
+    blur: boolean;
+    loading: boolean;
+}, {}>;
+export default _default;

package/lib/ele-loading/props.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const loadingProps = {
+  /** 是否显示动画 */
+  loading: Boolean,
+  /** 显示在加载图标下方的加载文案 */
+  text: String,
+  /** 背景遮罩的颜色 */
+  background: String,
+  /** 自定义加载图标 */
+  spinner: String,
+  /** 自定义加载图标svg的view-box */
+  svgViewBox: String,
+  /** 加载器类型 */
+  type: {
+    type: String,
+    default: "dot"
+  },
+  /** 背景模糊效果 */
+  blur: Boolean,
+  /** 加载器尺寸 */
+  size: String,
+  /** 自定义加载器样式 */
+  spinnerStyle: Object,
+  /** 自定义文本样式 */
+  textStyle: Object
+};
+exports.loadingProps = loadingProps;

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

@@ -0,0 +1,33 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { LoadingType, LoadingSize } from './types';
+
+/**
+ * 属性
+ */
+export declare const loadingProps: {
+    /** 是否显示动画 */
+    loading: BooleanConstructor;
+    /** 显示在加载图标下方的加载文案 */
+    text: StringConstructor;
+    /** 背景遮罩的颜色 */
+    background: StringConstructor;
+    /** 自定义加载图标 */
+    spinner: StringConstructor;
+    /** 自定义加载图标svg的view-box */
+    svgViewBox: StringConstructor;
+    /** 加载器类型 */
+    type: {
+        type: PropType<LoadingType>;
+        default: string;
+    };
+    /** 背景模糊效果 */
+    blur: BooleanConstructor;
+    /** 加载器尺寸 */
+    size: PropType<LoadingSize>;
+    /** 自定义加载器样式 */
+    spinnerStyle: PropType<StyleValue>;
+    /** 自定义文本样式 */
+    textStyle: PropType<StyleValue>;
+};
+export type LoadingProps = ExtractPropTypes<typeof loadingProps>;

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

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

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

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

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,90 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-loading-var($ele);
+
+.ele-loading {
+  box-sizing: border-box;
+}
+
+.ele-loading-show {
+  position: relative;
+}
+
+.ele-loading-spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: eleVar('loading', 'bg');
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: eleVar('loading', 'index');
+}
+
+/* 模糊背景 */
+.ele-loading-blur {
+  backdrop-filter: blur(2px);
+}
+
+/* 文本 */
+.ele-loading-text {
+  color: elVar('color-primary');
+  font-size: elVar('font-size', 'base');
+  margin-top: 10px;
+  text-align: center;
+}
+
+/* 圆点风格 */
+.ele-loading-dot {
+  width: eleVar('loading', 'size');
+  height: eleVar('loading', 'size');
+  display: grid;
+  grid-gap: eleVar('loading', 'space');
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  transform: rotate(45deg);
+  animation: eleloadingRotate 1.2s infinite linear;
+
+  & > i {
+    background: elVar('color-primary');
+    border-radius: 50%;
+
+    &:nth-child(2) {
+      background: elVar('color-primary', 'light-3');
+    }
+
+    &:nth-child(3) {
+      background: elVar('color-primary', 'light-7');
+    }
+
+    &:nth-child(4) {
+      background: elVar('color-primary', 'light-8');
+    }
+  }
+}
+
+@keyframes eleloadingRotate {
+  to {
+    transform: rotate(405deg);
+  }
+}
+
+/* 小型尺寸 */
+.ele-loading-small .ele-loading-dot {
+  width: eleVar('loading', 'sm-size');
+  height: eleVar('loading', 'sm-size');
+  grid-gap: eleVar('loading', 'sm-space');
+}
+
+/* 大型尺寸 */
+.ele-loading-large .ele-loading-dot {
+  width: eleVar('loading', 'lg-size');
+  height: eleVar('loading', 'lg-size');
+  grid-gap: eleVar('loading', 'lg-space');
+}

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

@@ -0,0 +1,19 @@
+/**
+ * 加载器类型
+ */
+export type LoadingType = 'circle' | 'dot';
+
+/**
+ * 加载器尺寸
+ */
+export type LoadingSize = 'small' | 'default' | 'large';
+
+/**
+ * 圆形加载器属性
+ */
+export interface CircleProps {
+  ['element-loading-text']?: string;
+  ['element-loading-background']?: string;
+  ['element-loading-spinner']?: string;
+  ['element-loading-svg-view-box']?: string;
+}