yuang-framework-ui-pc 1.1.43 → 1.1.45

package/es/ele-icon-select/index.js

@@ -0,0 +1,337 @@
+import { defineComponent, ref, computed, watch, resolveComponent, createBlock, openBlock, createSlots, withCtx, createElementVNode, normalizeStyle, createElementBlock, createCommentVNode, renderSlot, Fragment, renderList, normalizeClass, toDisplayString, createVNode, normalizeProps, guardReactiveProps } from "vue";
+import { ElInput } from "element-plus";
+import { useResponsive } from "../ele-pro-layout/util";
+import EleBasicSelect from "../ele-basic-select/index";
+import { useFormValidate, valueIsChanged } from "../ele-basic-select/util";
+import { SearchOutlined } from "../icons";
+import IconGrid from "./components/icon-grid";
+import { iconSelectEmits, iconSelectProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleIconSelect",
+  components: { ElInput, EleBasicSelect, IconGrid },
+  props: iconSelectProps,
+  emits: iconSelectEmits,
+  setup(props, { emit }) {
+    const { validateChange } = useFormValidate();
+    const isResponsive = useResponsive(props);
+    const selectRef = ref(null);
+    const selectVisible = ref(false);
+    const tabs = ref([]);
+    const tabActive = ref();
+    const menus = ref([]);
+    const menuActive = ref();
+    const icons = ref([]);
+    const keywords = ref("");
+    const tabBar = computed(() => {
+      if (!tabs.value || !tabs.value.length) {
+        return false;
+      }
+      if (props.hideOnSingleTab && tabs.value.length === 1) {
+        return false;
+      }
+      return true;
+    });
+    const selectPopperClass = computed(() => {
+      const classes = ["ele-icon-select-popper"];
+      if (isResponsive.value) {
+        classes.push("is-responsive");
+      }
+      if (props.popperClass) {
+        classes.push(props.popperClass);
+      }
+      return classes.join(" ");
+    });
+    const iconPopperStyle = computed(() => {
+      if (!props.popperHeight) {
+        return;
+      }
+      return {
+        height: typeof props.popperHeight === "number" ? `${props.popperHeight}px` : props.popperHeight
+      };
+    });
+    const updatePopover = () => {
+      selectRef.value && selectRef.value.updatePopper();
+    };
+    const initData = () => {
+      if (props.data == null || !props.data.length || typeof props.data[0] === "string") {
+        tabs.value = [];
+        menus.value = [];
+        tabActive.value = void 0;
+        menuActive.value = void 0;
+        icons.value = filterData(props.data);
+        return;
+      }
+      tabs.value = props.data.map(
+        (d) => d.title
+      );
+      if (tabActive.value == null || tabActive.value >= tabs.value.length) {
+        tabActive.value = 0;
+      }
+      const data = props.data[tabActive.value];
+      if (typeof data !== "string" && data.children != null && data.children.length) {
+        menus.value = data.children.map((d) => d.title);
+        if (menuActive.value == null || menuActive.value >= menus.value.length) {
+          menuActive.value = 0;
+        }
+        icons.value = filterData(data.children[menuActive.value].icons);
+        return;
+      }
+      menus.value = [];
+      menuActive.value = void 0;
+      icons.value = typeof data !== "string" ? filterData(data.icons) : [];
+    };
+    const filterData = (data) => {
+      if (!data) {
+        return [];
+      }
+      if (!keywords.value) {
+        return data;
+      }
+      const keyword = keywords.value.toLowerCase();
+      return data.filter((t) => t.toLowerCase().includes(keyword));
+    };
+    const updateVisible = (visible) => {
+      if (visible) {
+        handleSelectFilter("");
+      }
+      if (selectVisible.value !== visible) {
+        selectVisible.value = visible;
+        emit("visibleChange", visible);
+      }
+    };
+    const updateModelValue = (modelValue) => {
+      if (valueIsChanged(modelValue, props.modelValue)) {
+        emit("update:modelValue", modelValue);
+        validateChange();
+        emit("change", modelValue);
+      }
+    };
+    const handleSelectClear = () => {
+      updateModelValue(null);
+      updateVisible(false);
+      emit("clear");
+    };
+    const handleSelectFocus = (e) => {
+      emit("focus", e);
+    };
+    const handleSelectBlur = (e) => {
+      emit("blur", e);
+    };
+    const handleSelectFilter = (value) => {
+      var _a;
+      if (keywords.value !== value) {
+        keywords.value = value;
+      }
+      initData();
+      if (!((_a = props.data) == null ? void 0 : _a.length) || icons.value.length) {
+        return;
+      }
+      for (let i = 0; i < props.data.length; i++) {
+        const d = props.data[i];
+        if (typeof d === "string") {
+          return;
+        }
+        const keyword = keywords.value.toLowerCase();
+        if (d.children != null && d.children.length) {
+          for (let j = 0; j < d.children.length; j++) {
+            const icons2 = d.children[j].icons;
+            if (icons2 && icons2.some((t) => t.toLowerCase().includes(keyword))) {
+              menuActive.value = j;
+              tabActive.value = i;
+              initData();
+              return;
+            }
+          }
+        } else if (d.icons != null && d.icons.some((t) => t.toLowerCase().includes(keyword))) {
+          tabActive.value = i;
+          initData();
+          return;
+        }
+      }
+    };
+    const handleTabClick = (index2) => {
+      tabActive.value = index2;
+      initData();
+    };
+    const handleMenuClick = (index2) => {
+      menuActive.value = index2;
+      initData();
+    };
+    const handleIconSelect = (icon) => {
+      updateModelValue(icon);
+      updateVisible(false);
+    };
+    watch(
+      () => props.data,
+      () => {
+        initData();
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return {
+      SearchOutlined,
+      selectRef,
+      selectVisible,
+      tabs,
+      tabActive,
+      menus,
+      menuActive,
+      icons,
+      keywords,
+      tabBar,
+      selectPopperClass,
+      iconPopperStyle,
+      updatePopover,
+      updateVisible,
+      handleSelectClear,
+      handleSelectFocus,
+      handleSelectBlur,
+      handleSelectFilter,
+      handleTabClick,
+      handleMenuClick,
+      handleIconSelect
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { class: "ele-icon-select-main" };
+const _hoisted_3 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElInput = resolveComponent("ElInput");
+  const _component_IconGrid = resolveComponent("IconGrid");
+  const _component_EleBasicSelect = resolveComponent("EleBasicSelect");
+  return openBlock(), createBlock(_component_EleBasicSelect, {
+    ref: "selectRef",
+    value: _ctx.modelValue,
+    multiple: false,
+    disabled: _ctx.disabled,
+    size: _ctx.size,
+    clearable: _ctx.clearable,
+    placeholder: _ctx.placeholder,
+    automaticDropdown: _ctx.automaticDropdown,
+    filterable: typeof _ctx.filterable === "boolean" ? _ctx.filterable : false,
+    teleported: _ctx.teleported,
+    persistent: _ctx.persistent,
+    placement: _ctx.placement,
+    transition: _ctx.transition,
+    popperWidth: _ctx.popperWidth,
+    popperOptions: _ctx.popperOptions,
+    popperClass: _ctx.selectPopperClass,
+    selectClass: "is-icon-select",
+    selectStyle: _ctx.selectStyle,
+    inputStyle: _ctx.inputStyle,
+    selectTagsStyle: _ctx.selectTagsStyle,
+    selectedLabel: _ctx.modelValue,
+    visible: _ctx.selectVisible,
+    "onUpdate:visible": _ctx.updateVisible,
+    onFilterChange: _ctx.handleSelectFilter,
+    onClear: _ctx.handleSelectClear,
+    onFocus: _ctx.handleSelectFocus,
+    onBlur: _ctx.handleSelectBlur
+  }, createSlots({
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: "ele-icon-select",
+        style: normalizeStyle(_ctx.iconPopperStyle)
+      }, [
+        _ctx.tabBar || _ctx.filterable === "popper" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "ele-icon-select-header",
+          style: normalizeStyle(_ctx.headerStyle)
+        }, [
+          renderSlot(_ctx.$slots, "tabLeftExtra"),
+          _ctx.tabBar ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ele-icon-select-tabs",
+            style: normalizeStyle(_ctx.tabsStyle)
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, (t, i) => {
+              return openBlock(), createElementBlock("div", {
+                key: i + "-" + t,
+                class: normalizeClass(["ele-icon-select-tab", { "is-active": i === _ctx.tabActive }]),
+                onClick: ($event) => _ctx.handleTabClick(i)
+              }, toDisplayString(t), 11, _hoisted_1);
+            }), 128))
+          ], 4)) : createCommentVNode("", true),
+          _ctx.filterable === "popper" ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "ele-icon-select-search",
+            style: normalizeStyle(_ctx.searchStyle)
+          }, [
+            createVNode(_component_ElInput, {
+              size: "small",
+              clearable: true,
+              modelValue: _ctx.keywords,
+              validateEvent: false,
+              prefixIcon: _ctx.SearchOutlined,
+              placeholder: _ctx.filterPlaceholder,
+              "onUpdate:modelValue": _ctx.handleSelectFilter
+            }, null, 8, ["modelValue", "prefixIcon", "placeholder", "onUpdate:modelValue"])
+          ], 4)) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "tabRightExtra")
+        ], 4)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          _ctx.menus && _ctx.menus.length ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ele-icon-select-menus",
+            style: normalizeStyle(_ctx.menusStyle)
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menus, (m, i) => {
+              return openBlock(), createElementBlock("div", {
+                key: i + "-" + m,
+                class: normalizeClass(["ele-icon-select-menu", { "is-active": i === _ctx.menuActive }]),
+                onClick: ($event) => _ctx.handleMenuClick(i)
+              }, toDisplayString(m), 11, _hoisted_3);
+            }), 128))
+          ], 4)) : createCommentVNode("", true),
+          createVNode(_component_IconGrid, {
+            data: _ctx.icons,
+            icon: _ctx.modelValue,
+            emptyProps: _ctx.emptyProps,
+            tooltip: _ctx.tooltip,
+            tooltipProps: _ctx.tooltipProps,
+            popperVisible: _ctx.selectVisible,
+            gridStyle: _ctx.gridStyle,
+            itemStyle: _ctx.itemStyle,
+            style: normalizeStyle(_ctx.bodyStyle),
+            onSelect: _ctx.handleIconSelect
+          }, createSlots({ _: 2 }, [
+            _ctx.$slots.icon ? {
+              name: "icon",
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(slotProps || {})))
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["data", "icon", "emptyProps", "tooltip", "tooltipProps", "popperVisible", "gridStyle", "itemStyle", "style", "onSelect"])
+        ])
+      ], 4)
+    ]),
+    _: 2
+  }, [
+    _ctx.modelValue && _ctx.$slots.icon ? {
+      name: "prefix",
+      fn: withCtx(() => [
+        renderSlot(_ctx.$slots, "icon", {
+          icon: _ctx.modelValue,
+          prefix: true
+        })
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["value", "disabled", "size", "clearable", "placeholder", "automaticDropdown", "filterable", "teleported", "persistent", "placement", "transition", "popperWidth", "popperOptions", "popperClass", "selectStyle", "inputStyle", "selectTagsStyle", "selectedLabel", "visible", "onUpdate:visible", "onFilterChange", "onClear", "onFocus", "onBlur"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-icon-select/style/index.js

@@ -0,0 +1,6 @@
+import "element-plus/es/components/empty/style/index";
+import "element-plus/es/components/scrollbar/style/index";
+import "element-plus/es/components/input/style/index";
+import "../../ele-tooltip/style/index";
+import "../../ele-basic-select/style/index";
+import "./index.scss";

package/es/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/es/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;
+};