y-element-ultra 0.0.2

package/es/y-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($y);
+
+.y-file-list-group {
+  position: relative;
+  user-select: none;
+
+  /* 复选框 */
+  .y-file-list-checkbox {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    display: inline-block;
+    border: 1px solid elVar('border-color');
+    background: elVar('fill-color', 'blank');
+    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%;
+    }
+  }
+
+  /* 鼠标选择框 */
+  .y-file-list-selector {
+    display: none;
+    position: absolute;
+    box-sizing: border-box;
+    border: yVar('file', 'selector-border');
+    background: yVar('file', 'selector-bg');
+    z-index: yVar('file', 'selector-index');
+    pointer-events: none;
+  }
+
+  /* 右键菜单触发器 */
+  .y-file-list-item-dropdown {
+    display: block;
+    max-width: 36px;
+    position: absolute;
+    top: calc(50% - 6px);
+    left: 36px;
+    right: 0;
+  }
+}
+
+/* 网格布局 */
+.y-file-list {
+  position: relative;
+  box-sizing: border-box;
+
+  /* header */
+  .y-file-list-header {
+    padding: 0 yVar('file', 'header-padding');
+    box-sizing: border-box;
+    border-bottom: 1px solid elVar('border-color', 'light');
+    line-height: yVar('file', 'header-height');
+    display: flex;
+
+    /* 全选框 */
+    .y-file-list-selection {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+
+      .y-file-list-checkbox {
+        margin-right: 14px;
+      }
+    }
+  }
+
+  /* body */
+  .y-file-list-body {
+    padding-top: yVar('file', 'item-space');
+    padding-left: yVar('file', 'item-space');
+    box-sizing: border-box;
+  }
+
+  /*  item */
+  .y-file-list-item {
+    flex-shrink: 0;
+    width: yVar('file', 'item-width');
+    margin-right: yVar('file', 'item-space');
+    margin-bottom: yVar('file', 'item-space');
+    display: inline-block;
+    box-sizing: border-box;
+    border: yVar('file', 'item-border');
+    border-radius: yVar('file', 'item-radius');
+    transition: all $transition-base;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+
+    .y-file-list-item-body {
+      padding: yVar('file', 'item-padding');
+      box-sizing: border-box;
+    }
+
+    /* 图标 */
+    .y-file-list-item-icon {
+      height: yVar('file', 'icon-height');
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      & > img {
+        width: yVar('file', 'icon-size');
+        height: yVar('file', 'icon-size');
+        display: inline-block;
+        pointer-events: none;
+      }
+
+      & > .y-file-list-item-image {
+        width: yVar('file', 'image-size');
+        height: yVar('file', 'image-size');
+        border-radius: yVar('file', 'image-radius');
+        object-fit: contain;
+      }
+    }
+
+    /* 标题 */
+    .y-file-list-item-title {
+      margin-top: yVar('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');
+      }
+    }
+
+    /* 复选框 */
+    .y-file-list-item-checkbox {
+      border-radius: 50%;
+      background: elVar('bg-color');
+      transition: all $transition-base;
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      opacity: 0;
+
+      .y-file-list-checkbox {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        display: block;
+        opacity: 0.4;
+      }
+    }
+
+    &:hover,
+    &.is-active,
+    &.is-checked {
+      background: yVar('file', 'item-active-bg');
+
+      .y-file-list-item-checkbox {
+        opacity: 1;
+      }
+    }
+
+    &.is-checked {
+      border-color: yVar('file', 'item-active-border-color');
+
+      .y-file-list-item-checkbox .y-file-list-checkbox {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+/* 表头排序图标 */
+.y-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 yVar('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: yVar('file', 'sort-active-color');
+  }
+
+  &.is-desc::after {
+    border-top-color: yVar('file', 'sort-active-color');
+  }
+}
+
+/* 表格布局 */
+.y-file-list-table {
+  position: relative;
+
+  /* item */
+  .y-file-list-item {
+    line-height: yVar('file', 'td-height');
+    border-top: 1px solid elVar('border-color', 'light');
+    transition: background-color $transition-base;
+    position: relative;
+
+    .y-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');
+    }
+
+    /* 复选框 */
+    .y-file-list-item-checkbox {
+      width: 36px;
+      padding-left: yVar('file', 'header-padding');
+      box-sizing: border-box;
+      line-height: 0;
+      flex-shrink: 0;
+    }
+
+    /* 图标和标题 */
+    .y-file-list-item-name {
+      display: flex;
+      align-items: center;
+      padding: yVar('file', 'td-padding');
+      box-sizing: border-box;
+      position: relative;
+      overflow: hidden;
+      min-width: 110px;
+      flex: 1;
+    }
+
+    .y-file-list-item-icon {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+
+      & > img {
+        width: yVar('file', 'td-icon-szie');
+        height: yVar('file', 'td-icon-szie');
+        flex-shrink: 0;
+        cursor: pointer;
+
+        &:hover + .y-file-list-item-title {
+          color: elVar('color-primary');
+        }
+      }
+
+      & > .y-file-list-item-image {
+        border-radius: yVar('file', 'td-image-radius');
+        object-fit: contain;
+      }
+    }
+
+    .y-file-list-item-title {
+      padding-left: yVar('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');
+      }
+    }
+
+    /* 工具按钮 */
+    .y-file-list-item-tools {
+      flex-shrink: 0;
+      box-sizing: border-box;
+      align-items: center;
+      display: none;
+
+      .y-file-list-item-tool {
+        font-size: 17px;
+        margin-left: yVar('file', 'td-icon-margin');
+        color: elVar('color-primary');
+        cursor: pointer;
+      }
+    }
+
+    &:hover .y-file-list-item-tools {
+      display: flex;
+    }
+
+    /* 自定义列 */
+    .y-file-list-item-cell {
+      padding: yVar('file', 'td-item-padding');
+      box-sizing: border-box;
+    }
+  }
+
+  /* header */
+  .y-file-list-header .y-file-list-item {
+    line-height: yVar('file', 'header-height');
+    border-top: none;
+    margin-top: 0;
+
+    .y-file-list-item-name > div {
+      overflow: hidden;
+      white-space: nowrap;
+      word-break: break-all;
+      text-overflow: ellipsis;
+    }
+
+    .y-file-list-item-name,
+    .y-file-list-item-cell {
+      transition: color $transition-base;
+
+      &.is-sortable {
+        cursor: pointer;
+
+        &:hover {
+          color: elVar('color-primary');
+        }
+      }
+    }
+  }
+
+  /* body */
+  .y-file-list-body .y-file-list-item {
+    &:hover,
+    &.is-active,
+    &.is-checked {
+      background: yVar('file', 'item-active-bg');
+      border-color: yVar('file', 'item-active-border-color');
+
+      & + .y-file-list-item {
+        border-top-color: yVar('file', 'item-active-border-color');
+      }
+    }
+  }
+}
+
+/* 右键菜单 */
+.y-file-list-item-context {
+  min-width: 108px;
+}

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

@@ -0,0 +1,117 @@
+import type { StyleValue } from '../y-app/types';
+import type { DropdownItem } from '../y-dropdown/types';
+
+/**
+ * 图标数据
+ */
+export interface IconItem {
+  /** 图标地址 */
+  icon: string;
+  /** 类型 */
+  type?: IconItemType;
+  /** 对应文件后缀 */
+  suffixes?: string[];
+}
+
+/**
+ * 图标类型
+ */
+export type IconItemType = 'file' | 'dir';
+
+/**
+ * 文件数据格式
+ */
+export interface FileItem extends Record<PropertyKey, 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/y-file-list-tool/index.d.ts

@@ -0,0 +1,15 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (_e: MouseEvent) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    onClick?: ((_e: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,25 @@
+import { defineComponent, createElementBlock, openBlock, withModifiers, renderSlot } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "YFileListTool" },
+  __name: "index",
+  emits: {
+    click: (_e) => true
+  },
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const handleClick = (e) => {
+      emit("click", e);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "y-file-list-item-tool",
+        onClick: withModifiers(handleClick, ["stop"])
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1 @@
+

package/es/y-form-item-rest/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/y-form-item-rest/index.js

@@ -0,0 +1,12 @@
+import { defineComponent } from "vue";
+import { useFormItemRest } from "../utils/hook";
+const index = defineComponent({
+  name: "YFormItemRest",
+  setup(_props, { slots }) {
+    useFormItemRest();
+    return () => slots.default?.();
+  }
+});
+export {
+  index as default
+};

package/es/y-form-item-rest/style/index.js

@@ -0,0 +1 @@
+

package/es/y-icon/index.d.ts

@@ -0,0 +1,46 @@
+import { ElIconInstance } from '../y-app/el';
+import { UserComponent } from '../y-app/types';
+
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    name: import('vue').PropType<UserComponent>;
+    iconType: import('vue').PropType<import('./types').IconType>;
+    size: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    color: {
+        readonly type: import('vue').PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}>, {
+    iconRef: import('vue').Ref<ElIconInstance, ElIconInstance>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    name: import('vue').PropType<UserComponent>;
+    iconType: import('vue').PropType<import('./types').IconType>;
+    size: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    color: {
+        readonly type: import('vue').PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/y-icon/index.js

@@ -0,0 +1,42 @@
+import { defineComponent, ref, computed, createBlock, openBlock, unref, withCtx, createCommentVNode, renderSlot, resolveDynamicComponent, normalizeClass } from "vue";
+import { ElIcon } from "element-plus";
+import { iconProps } from "./props";
+const defaultIconTag = "i";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "YIcon" },
+  __name: "index",
+  props: iconProps,
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const iconRef = ref(null);
+    const iconComponent = computed(() => {
+      if (props.name != null && (props.iconType === "fontClass" || typeof props.name === "string" && props.name.includes(" "))) {
+        return defaultIconTag;
+      }
+      return props.name;
+    });
+    __expose({
+      iconRef
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElIcon), {
+        ref_key: "iconRef",
+        ref: iconRef,
+        size: _ctx.size,
+        color: _ctx.color
+      }, {
+        default: withCtx(() => [
+          iconComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(iconComponent.value), {
+            key: 0,
+            class: normalizeClass(iconComponent.value === defaultIconTag ? _ctx.name : void 0)
+          }, null, 8, ["class"])) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["size", "color"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};