yuang-framework-ui-pc 1.0.20 → 1.1.1

package/es/ele-file-list/style/index.scss

@@ -0,0 +1,427 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-file-var($ele);
+
+.ele-file-list-group {
+  position: relative;
+  user-select: none;
+
+  /* 复选框 */
+  .ele-file-list-checkbox {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    display: inline-block;
+    border: 1px solid elVar('border-color');
+    background: elVar('bg-color');
+    box-sizing: border-box;
+    transition: all $transition-base;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      border-color: elVar('color-primary');
+    }
+
+    /* 对勾 */
+    &::before {
+      content: '';
+      display: table;
+      width: 5.71428571px;
+      height: 9.14285714px;
+      border: 2px solid #fff;
+      border-left: 0;
+      border-top: 0;
+      opacity: 0;
+      transform: rotate(45deg) scale(0) translate(-50%, -50%);
+      transition: (all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s);
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 21.5%;
+    }
+
+    &.is-checked {
+      background: elVar('color-primary');
+      border-color: elVar('color-primary');
+
+      &::before {
+        opacity: 1;
+        transform: rotate(45deg) scale(1) translate(-50%, -50%);
+        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+      }
+    }
+
+    /* 半选 */
+    &::after {
+      content: '';
+      width: 8px;
+      height: 8px;
+      display: table;
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 0;
+      transition: (all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s);
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+    }
+
+    &.is-indeterminate::after {
+      background: elVar('color-primary');
+      opacity: 1;
+    }
+
+    /* 单选 */
+    &.is-radio {
+      border-radius: 50%;
+    }
+  }
+
+  /* 鼠标选择框 */
+  .ele-file-list-selector {
+    display: none;
+    position: absolute;
+    box-sizing: border-box;
+    border: eleVar('file', 'selector-border');
+    background: eleVar('file', 'selector-bg');
+    z-index: eleVar('file', 'selector-index');
+    pointer-events: none;
+  }
+
+  /* 右键菜单触发器 */
+  .ele-file-list-item-dropdown {
+    display: block;
+    max-width: 36px;
+    position: absolute;
+    top: calc(50% - 6px);
+    left: 36px;
+    right: 0;
+  }
+}
+
+/* 网格布局 */
+.ele-file-list {
+  position: relative;
+  box-sizing: border-box;
+
+  /* header */
+  .ele-file-list-header {
+    padding: 0 eleVar('file', 'header-padding');
+    box-sizing: border-box;
+    border-bottom: 1px solid elVar('border-color', 'light');
+    line-height: eleVar('file', 'header-height');
+    display: flex;
+
+    /* 全选框 */
+    .ele-file-list-selection {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+
+      .ele-file-list-checkbox {
+        margin-right: 14px;
+      }
+    }
+  }
+
+  /* body */
+  .ele-file-list-body {
+    padding-top: eleVar('file', 'item-space');
+    padding-left: eleVar('file', 'item-space');
+    box-sizing: border-box;
+  }
+
+  /*  item */
+  .ele-file-list-item {
+    flex-shrink: 0;
+    width: eleVar('file', 'item-width');
+    margin-right: eleVar('file', 'item-space');
+    margin-bottom: eleVar('file', 'item-space');
+    display: inline-block;
+    box-sizing: border-box;
+    border: eleVar('file', 'item-border');
+    border-radius: eleVar('file', 'item-radius');
+    transition: all $transition-base;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+
+    .ele-file-list-item-body {
+      padding: eleVar('file', 'item-padding');
+      box-sizing: border-box;
+    }
+
+    /* 图标 */
+    .ele-file-list-item-icon {
+      height: eleVar('file', 'icon-height');
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      & > img {
+        width: eleVar('file', 'icon-size');
+        height: eleVar('file', 'icon-size');
+        display: inline-block;
+        pointer-events: none;
+      }
+
+      & > .ele-file-list-item-image {
+        width: eleVar('file', 'image-size');
+        height: eleVar('file', 'image-size');
+        border-radius: eleVar('file', 'image-radius');
+        object-fit: contain;
+      }
+    }
+
+    /* 标题 */
+    .ele-file-list-item-title {
+      margin-top: eleVar('file', 'title-margin');
+      overflow: hidden;
+      white-space: nowrap;
+      word-break: break-all;
+      text-overflow: ellipsis;
+      box-sizing: border-box;
+      transition: color $transition-base;
+
+      &:hover {
+        color: elVar('color-primary');
+      }
+    }
+
+    /* 复选框 */
+    .ele-file-list-item-checkbox {
+      border-radius: 50%;
+      background: elVar('bg-color');
+      transition: all $transition-base;
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      opacity: 0;
+
+      .ele-file-list-checkbox {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        display: block;
+        opacity: 0.4;
+      }
+    }
+
+    &:hover,
+    &.is-active,
+    &.is-checked {
+      background: eleVar('file', 'item-active-bg');
+
+      .ele-file-list-item-checkbox {
+        opacity: 1;
+      }
+    }
+
+    &.is-checked {
+      border-color: eleVar('file', 'item-active-border-color');
+
+      .ele-file-list-item-checkbox .ele-file-list-checkbox {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+/* 表头排序图标 */
+.ele-file-list-item-sort {
+  width: 8px;
+  height: 12px;
+  margin-left: 6px;
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+
+  &::before,
+  &::after {
+    content: '';
+    width: 0;
+    height: 0;
+    display: block;
+    border: 4px solid eleVar('file', 'sort-color');
+    border-left-color: transparent;
+    border-right-color: transparent;
+  }
+
+  &::before {
+    border-top-color: transparent;
+    margin: -4px 0 4px 0;
+  }
+
+  &::after {
+    border-bottom-color: transparent;
+  }
+
+  &.is-asc::before {
+    border-bottom-color: eleVar('file', 'sort-active-color');
+  }
+
+  &.is-desc::after {
+    border-top-color: eleVar('file', 'sort-active-color');
+  }
+}
+
+/* 表格布局 */
+.ele-file-list-table {
+  position: relative;
+
+  /* item */
+  .ele-file-list-item {
+    line-height: eleVar('file', 'td-height');
+    border-top: 1px solid elVar('border-color', 'light');
+    transition: all $transition-base;
+    position: relative;
+
+    .ele-file-list-item-body {
+      display: flex;
+      align-items: center;
+    }
+
+    &:first-child {
+      border-top-color: transparent;
+      margin-top: -1px;
+    }
+
+    &:last-child {
+      border-bottom: 1px solid elVar('border-color', 'light');
+    }
+
+    /* 复选框 */
+    .ele-file-list-item-checkbox {
+      width: 36px;
+      padding-left: eleVar('file', 'header-padding');
+      box-sizing: border-box;
+      line-height: 0;
+      flex-shrink: 0;
+    }
+
+    /* 图标和标题 */
+    .ele-file-list-item-name {
+      display: flex;
+      align-items: center;
+      padding: eleVar('file', 'td-padding');
+      box-sizing: border-box;
+      position: relative;
+      overflow: hidden;
+      min-width: 110px;
+      flex: 1;
+    }
+
+    .ele-file-list-item-icon {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+
+      & > img {
+        width: eleVar('file', 'td-icon-szie');
+        height: eleVar('file', 'td-icon-szie');
+        flex-shrink: 0;
+        cursor: pointer;
+
+        &:hover + .ele-file-list-item-title {
+          color: elVar('color-primary');
+        }
+      }
+
+      & > .ele-file-list-item-image {
+        border-radius: eleVar('file', 'td-image-radius');
+        object-fit: contain;
+      }
+    }
+
+    .ele-file-list-item-title {
+      padding-left: eleVar('file', 'td-icon-margin');
+      transition: color $transition-base;
+      box-sizing: border-box;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+      overflow: hidden;
+      cursor: pointer;
+
+      &:hover {
+        color: elVar('color-primary');
+      }
+    }
+
+    /* 工具按钮 */
+    .ele-file-list-item-tools {
+      flex-shrink: 0;
+      box-sizing: border-box;
+      align-items: center;
+      display: none;
+
+      .ele-file-list-item-tool {
+        font-size: 17px;
+        margin-left: eleVar('file', 'td-icon-margin');
+        color: elVar('color-primary');
+        cursor: pointer;
+      }
+    }
+
+    &:hover .ele-file-list-item-tools {
+      display: flex;
+    }
+
+    /* 自定义列 */
+    .ele-file-list-item-cell {
+      padding: eleVar('file', 'td-item-padding');
+      box-sizing: border-box;
+    }
+  }
+
+  /* header */
+  .ele-file-list-header .ele-file-list-item {
+    line-height: eleVar('file', 'header-height');
+    border-top: none;
+    margin-top: 0;
+
+    .ele-file-list-item-name > div {
+      overflow: hidden;
+      white-space: nowrap;
+      word-break: break-all;
+      text-overflow: ellipsis;
+    }
+
+    .ele-file-list-item-name,
+    .ele-file-list-item-cell {
+      transition: color $transition-base;
+
+      &.is-sortable {
+        cursor: pointer;
+
+        &:hover {
+          color: elVar('color-primary');
+        }
+      }
+    }
+  }
+
+  /* body */
+  .ele-file-list-body .ele-file-list-item {
+    &:hover,
+    &.is-active,
+    &.is-checked {
+      background: eleVar('file', 'item-active-bg');
+      border-color: eleVar('file', 'item-active-border-color');
+
+      & + .ele-file-list-item {
+        border-top-color: eleVar('file', 'item-active-border-color');
+      }
+    }
+  }
+}
+
+/* 右键菜单 */
+.ele-file-list-item-context {
+  min-width: 108px;
+}

package/es/ele-file-list/types.d.ts

@@ -0,0 +1,117 @@
+import type { StyleValue } from '../ele-app/types';
+import type { DropdownItem } from '../ele-dropdown/types';
+
+/**
+ * 图标数据
+ */
+export interface IconItem {
+  /** 图标地址 */
+  icon: string;
+  /** 类型 */
+  type?: IconItemType;
+  /** 对应文件后缀 */
+  suffixes?: string[];
+}
+
+/**
+ * 图标类型
+ */
+export type IconItemType = 'file' | 'dir';
+
+/**
+ * 文件数据格式
+ */
+export interface FileItem extends Record<string | number | symbol, unknown> {
+  /** 唯一标识 */
+  key: string | number;
+  /** 文件名称 */
+  name: string;
+  /** 文件访问地址 */
+  url?: string;
+  /** 缩略图访问地址 */
+  thumbnail?: string;
+  /** 是否是文件夹 */
+  isDirectory?: boolean;
+  /** 文件大小 */
+  length?: string;
+  /** 文件修改日期 */
+  updateTime?: string;
+}
+
+/**
+ * 排序结果
+ */
+export interface SortValue {
+  /** 排序字段 */
+  sort: string;
+  /** 排序方式 */
+  order?: 'asc' | 'desc' | null;
+}
+
+/**
+ * 表格自定义列
+ */
+export interface ColumnItem {
+  /** 标题 */
+  title?: string;
+  /** 字段名 */
+  prop: string;
+  /** 插槽 */
+  slot?: string;
+  /** 表头插槽 */
+  headerSlot?: string;
+  /** 自定义样式 */
+  style?: StyleValue;
+  /** 自定义表头样式 */
+  headerStyle?: StyleValue;
+  /** 是否可以排序 */
+  sortable?: boolean;
+}
+
+/**
+ * 右键菜单事件参数
+ */
+export interface ItemContextMenuOption {
+  /** 指令 */
+  key: string;
+  /** 数据 */
+  item: FileItem;
+}
+
+/**
+ * 选择框类型
+ */
+export type SelectionType = 'checkbox' | 'radio';
+
+/**
+ * 获取右键菜单方法
+ */
+export type ContextMenusFunc = (item: FileItem) => DropdownItem[];
+
+/**
+ * 右键菜单属性
+ */
+export type ContextMenus = DropdownItem[] | ContextMenusFunc;
+
+/**
+ * 右键菜单打开参数
+ */
+export interface ContextOpenOption {
+  /** 数据 */
+  item: FileItem;
+  /** 触发节点 */
+  triggerEl: HTMLElement;
+  /** 事件对象 */
+  e: MouseEvent;
+}
+
+/**
+ * 国际化
+ */
+export interface FileListLocale {
+  selectAll: string;
+  selectTips: string;
+  fileName: string;
+  fileSize: string;
+  fileTimestamp: string;
+}

package/es/ele-file-list-tool/index.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    handleClick: (e: MouseEvent) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (_e: MouseEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
+    onClick?: ((_e: MouseEvent) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/es/ele-file-list-tool/index.js

@@ -0,0 +1,31 @@
+import { defineComponent, openBlock, createElementBlock, withModifiers, renderSlot } from "vue";
+const _sfc_main = defineComponent({
+  name: "EleFileListTool",
+  emits: {
+    click: (_e) => true
+  },
+  setup(_props, { emit }) {
+    return {
+      handleClick: (e) => emit("click", e)
+    };
+  }
+});
+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: "ele-file-list-item-tool",
+    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"]))
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-file-list-tool/style/index.js

@@ -0,0 +1 @@
+

package/es/ele-icon-select/components/icon-grid.d.ts

@@ -0,0 +1,62 @@
+import { PropType } from 'vue';
+import { StyleValue } from '../../ele-app/types';
+import { ElEmptyProps } from '../../ele-app/el';
+import { EleTooltipProps } from '../../ele-app/plus';
+
+declare const _default: import('vue').DefineComponent<{
+    /** 选中的图标 */
+    icon: StringConstructor;
+    /** 图标数据 */
+    data: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    /** 空组件属性 */
+    emptyProps: PropType<ElEmptyProps>;
+    /** 是否显示提示 */
+    tooltip: BooleanConstructor;
+    /** 提示属性 */
+    tooltipProps: PropType<EleTooltipProps>;
+    /** 气泡是否展开 */
+    popperVisible: BooleanConstructor;
+    /** 网格样式 */
+    gridStyle: PropType<StyleValue>;
+    /** 图标样式 */
+    itemStyle: PropType<StyleValue>;
+}, {
+    tooltipVisible: import('vue').Ref<boolean>;
+    tooltipContent: import('vue').Ref<string>;
+    virtualRef: import('vue').Ref<any>;
+    updateTooltipVisible: (visible: boolean) => void;
+    hideTooltip: () => void;
+    handleItemHover: (icon: string, e: MouseEvent) => void;
+    handleItemClick: (icon: string) => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (_icon: string) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 选中的图标 */
+    icon: StringConstructor;
+    /** 图标数据 */
+    data: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    /** 空组件属性 */
+    emptyProps: PropType<ElEmptyProps>;
+    /** 是否显示提示 */
+    tooltip: BooleanConstructor;
+    /** 提示属性 */
+    tooltipProps: PropType<EleTooltipProps>;
+    /** 气泡是否展开 */
+    popperVisible: BooleanConstructor;
+    /** 网格样式 */
+    gridStyle: PropType<StyleValue>;
+    /** 图标样式 */
+    itemStyle: PropType<StyleValue>;
+}>> & {
+    onSelect?: ((_icon: string) => any) | undefined;
+}, {
+    tooltip: boolean;
+    popperVisible: boolean;
+}, {}>;
+export default _default;