yuang-framework-ui-pc 1.1.44 → 1.1.46

package/lib/ele-app/plus.d.ts

@@ -0,0 +1,181 @@
+import type EleAdminLayout from '../ele-admin-layout/index';
+import type { BacktopProps } from '../ele-backtop/props';
+import type EleBasicSelect from '../ele-basic-select/index';
+import type { BreadcrumbProps } from '../ele-breadcrumb/props';
+import type ReceiverView from '../ele-config-provider/components/receiver-view';
+import type { CropperProps } from '../ele-cropper/props';
+import type EleDataTable from '../ele-data-table/index';
+import type { DataTableProps } from '../ele-data-table/props';
+import type EleDropdown from '../ele-dropdown/index';
+import type { DropdownProps } from '../ele-dropdown/props';
+import type { FileListProps } from '../ele-file-list/props';
+import type { ImageViewerProps } from '../ele-image-viewer/props';
+import type { LoadingProps } from '../ele-loading/props';
+import type EleMenus from '../ele-menus/index';
+import type { MenusProps } from '../ele-menus/props';
+import type { MenuItem } from '../ele-menus/types';
+import type { EleDialogProps as EleDialogProps2 } from '../ele-dialog/props';
+import type { PaginationProps } from '../ele-pagination/props';
+import type ElePopover from '../ele-popover/index';
+import type { PopoverProps } from '../ele-popover/props';
+import type { PrinterProps } from '../ele-printer/props';
+import type EleProTable from '../ele-pro-table/index';
+import type { ProTableProps } from '../ele-pro-table/props';
+import type { TableProps } from '../ele-table/props';
+import type EleTabs from '../ele-tabs/index';
+import type EleText from '../ele-text/index';
+import type { TextProps } from '../ele-text/props';
+import type EleTool from '../ele-tool/index';
+import type { ToolProps } from '../ele-tool/props';
+import type { ToolbarProps } from '../ele-toolbar/props';
+import type EleTooltip from '../ele-tooltip/index';
+import type { TooltipProps } from '../ele-tooltip/props';
+import type EleUploadList from '../ele-upload-list/index';
+import type { UploadListProps } from '../ele-upload-list/props';
+import type EleVirtualTable from '../ele-virtual-table/index';
+import type { ComponentProps } from './types';
+
+/**
+ * EleAdminLayout
+ */
+export type EleAdminLayoutInstance = InstanceType<typeof EleAdminLayout> | null;
+
+/**
+ * EleBacktop
+ */
+export type EleBacktopProps = ComponentProps<BacktopProps>;
+
+/**
+ * EleBasicSelect
+ */
+export type EleBasicSelectInstance = InstanceType<typeof EleBasicSelect> | null;
+
+/**
+ * EleBreadcrumb
+ */
+export type EleBreadcrumbProps = ComponentProps<BreadcrumbProps>;
+
+/**
+ * EleConfigProvider
+ */
+export type ReceiverViewInstance = InstanceType<typeof ReceiverView> | null;
+
+/**
+ * EleCropper
+ */
+export type EleCropperProps = ComponentProps<CropperProps>;
+
+/**
+ * EleDataTable
+ */
+export type EleDataTableInstance = InstanceType<typeof EleDataTable> | null;
+
+export type EleDataTableProps = ComponentProps<DataTableProps>;
+
+/**
+ * EleDropdown
+ */
+export type EleDropdownInstance = InstanceType<typeof EleDropdown> | null;
+
+export type EleDropdownProps = ComponentProps<DropdownProps>;
+
+/**
+ * EleFileList
+ */
+export type EleFileListProps = ComponentProps<FileListProps>;
+
+/**
+ * EleImageViewer
+ */
+export type EleImageViewerProps = ComponentProps<ImageViewerProps>;
+
+/**
+ * EleLoading
+ */
+export type EleLoadingProps = ComponentProps<LoadingProps>;
+
+/**
+ * EleMenus
+ */
+export type EleMenusInstance = InstanceType<typeof EleMenus> | null;
+
+export type EleMenusProps = ComponentProps<MenusProps>;
+
+export type EleMenuItemProps = Partial<MenuItem>;
+
+/**
+ * EleDialog
+ */
+export type EleDialogProps = ComponentProps<EleDialogProps2>;
+
+/**
+ * ElePagination
+ */
+export type ElePaginationProps = ComponentProps<PaginationProps>;
+
+/**
+ * ElePopover
+ */
+export type ElePopoverInstance = InstanceType<typeof ElePopover> | null;
+
+export type ElePopoverProps = Partial<PopoverProps>;
+
+/**
+ * ElePrinter
+ */
+export type ElePrinterProps = ComponentProps<PrinterProps>;
+
+/**
+ * EleProTable
+ */
+export type EleProTableInstance = InstanceType<typeof EleProTable> | null;
+
+export type EleProTableProps = ComponentProps<ProTableProps>;
+
+/**
+ * EleTable
+ */
+export type EleTableProps = ComponentProps<TableProps>;
+
+/**
+ * EleTabs
+ */
+export type EleTabsInstance = InstanceType<typeof EleTabs> | null;
+
+/**
+ * EleText
+ */
+export type EleTextInstance = InstanceType<typeof EleText> | null;
+
+export type EleTextProps = ComponentProps<TextProps>;
+
+/**
+ * EleTool
+ */
+export type EleToolInstance = InstanceType<typeof EleTool> | null;
+
+export type EleToolProps = Partial<ToolProps>;
+
+/**
+ * EleToolbar
+ */
+export type EleToolbarProps = ComponentProps<ToolbarProps>;
+
+/**
+ * EleTooltip
+ */
+export type EleTooltipInstance = InstanceType<typeof EleTooltip> | null;
+
+export type EleTooltipProps = Partial<TooltipProps>;
+
+/**
+ * EleUploadList
+ */
+export type EleUploadListInstance = InstanceType<typeof EleUploadList> | null;
+
+export type EleUploadListProps = Partial<UploadListProps>;
+
+/**
+ * EleVirtualTable
+ */
+export type EleVirtualTableInstance = InstanceType<typeof EleVirtualTable> | null;

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

@@ -0,0 +1,11 @@
+@use '../../style/util.scss' as *;
+@use './message/css-var.scss' as *;
+@use './overwrite/css-var.scss' as *;
+@use './scrollbar/css-var.scss' as *;
+
+/* App 主题变量 */
+@mixin set-app-var($var) {
+  @include set-scrollbar-var($var);
+  @include set-overwrite-var($var);
+  @include set-message-var($var);
+}

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

@@ -0,0 +1,5 @@
+"use strict";
+require("./overwrite/index");
+require("./scrollbar/index");
+require("./common/index");
+require("./message/index");

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

@@ -0,0 +1 @@
+

package/lib/ele-app/style/message/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-app/style/message/index.scss

@@ -0,0 +1,261 @@
+@use '../../../style/themes/default.scss' as *;
+@use '../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-message-var($ele);
+
+.ele-message.el-message {
+  gap: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: none;
+  width: max-content;
+  pointer-events: auto;
+  align-items: flex-start;
+  margin: 0 auto eleVar('message', 'space') auto;
+  transition: margin-bottom 0.2s;
+  position: static !important;
+  left: auto !important;
+  top: auto !important;
+  transform: none;
+  opacity: 1;
+
+  & > .el-message__content {
+    display: none;
+  }
+
+  /* 徽章 */
+  & > .el-message__badge {
+    position: relative;
+    top: auto;
+    right: auto;
+    width: 0;
+    height: 0;
+    overflow: visible;
+    order: 2;
+    z-index: calc(#{eleVar('message', 'index')} + 2);
+    transition: (
+      margin-top 0.4s,
+      transform elVar('transition-duration'),
+      opacity elVar('transition-duration')
+    );
+
+    & > .el-badge__content {
+      position: absolute;
+      top: 8px;
+      right: -8px;
+      transform: translateY(-100%);
+    }
+  }
+
+  /* 主体 */
+  & > .el-message__icon {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    line-height: normal;
+    font-style: normal;
+    display: flex;
+    flex-shrink: 0;
+    color: eleVar('message', 'color');
+    font-size: eleVar('message', 'size');
+    padding: eleVar('message', 'padding');
+    box-shadow: eleVar('message', 'shadow');
+    border-radius: eleVar('message', 'radius');
+    background: elVar('color-primary', 'light-9');
+    border: 0 solid elVar('color-primary', 'light-8');
+    z-index: calc(#{eleVar('message', 'index')} + 1);
+    transition: (
+      margin-top 0.4s,
+      transform elVar('transition-duration'),
+      opacity elVar('transition-duration')
+    );
+    box-sizing: border-box;
+    position: relative;
+  }
+}
+
+.ele-message + .ele-message {
+  margin-top: 0 !important;
+}
+
+/* 图标 */
+.ele-message-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: elVar('color-primary');
+  font-size: eleVar('message', 'icon-size');
+  margin: eleVar('message', 'icon-margin');
+}
+
+/* 关闭按钮 */
+.ele-message-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('message', 'close-size');
+  height: eleVar('message', 'close-size');
+  line-height: eleVar('message', 'close-size');
+  color: eleVar('message', 'close-color');
+  font-size: eleVar('message', 'close-font-size');
+  margin: eleVar('message', 'close-margin');
+  border-radius: eleVar('message', 'close-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  cursor: pointer;
+
+  &:hover {
+    color: eleVar('message', 'close-hover-color');
+    background: eleVar('message', 'close-hover-bg');
+  }
+}
+
+/* 情景色类型 */
+.ele-message.el-message--success > .el-message__icon {
+  background: elVar('color-success', 'light-9');
+  border-color: elVar('color-success', 'light-7');
+
+  & > .ele-message-icon {
+    color: elVar('color-success');
+  }
+}
+
+.ele-message.el-message--warning > .el-message__icon {
+  background: elVar('color-warning', 'light-9');
+  border-color: elVar('color-warning', 'light-7');
+
+  & > .ele-message-icon {
+    color: elVar('color-warning');
+  }
+}
+
+.ele-message.el-message--error > .el-message__icon {
+  background: elVar('color-error', 'light-9');
+  border-color: elVar('color-error', 'light-7');
+
+  & > .ele-message-icon {
+    color: elVar('color-error');
+  }
+}
+
+.ele-message.el-message--info > .el-message__badge > .el-badge__content,
+.ele-message.is-loading > .el-message__badge > .el-badge__content {
+  background: elVar('color-primary');
+}
+
+/* 简约风格 */
+.ele-message.is-plain.el-message {
+  background: none;
+  box-shadow: none;
+}
+
+.ele-message.is-plain > .el-message__icon,
+.ele-message.is-plain-alert > .el-message__icon {
+  background: eleVar('message', 'plain-bg');
+}
+
+/* 彩色风格 */
+.ele-message.is-alert > .el-message__icon {
+  color: elVar('color-primary');
+  padding: eleVar('message', 'alert-padding');
+  border-width: 1px;
+  box-shadow: none;
+}
+
+.ele-message.is-plain-alert > .el-message__icon {
+  color: elVar('color-primary');
+}
+
+.el-message--success.is-alert > .el-message__icon,
+.el-message--success.is-plain-alert > .el-message__icon {
+  color: elVar('color-success');
+}
+
+.el-message--warning.is-alert > .el-message__icon,
+.el-message--warning.is-plain-alert > .el-message__icon {
+  color: elVar('color-warning');
+}
+
+.el-message--error.is-alert > .el-message__icon,
+.el-message--error.is-plain-alert > .el-message__icon {
+  color: elVar('color-error');
+}
+
+/* 加载框 */
+.ele-message.is-loading::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition: opacity elVar('transition-duration');
+  z-index: eleVar('message', 'index');
+}
+
+/* 遮罩 */
+.ele-message.is-show-mask::before {
+  background: eleVar('message', 'mask-color');
+}
+
+/* 居中 */
+.ele-message.is-centered {
+  margin: 0 !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  align-items: center;
+  justify-content: center;
+
+  &.el-message-fade-enter-from > .el-message__icon,
+  &.el-message-fade-leave-to > .el-message__icon {
+    transform: scale(0.6);
+    margin-top: 0;
+  }
+}
+
+/* 进入和关闭动画 */
+.ele-message.el-message-fade-enter-from,
+.ele-message.el-message-fade-leave-to {
+  margin-bottom: 0;
+
+  & > .el-message__icon,
+  & > .el-message__badge {
+    opacity: 0;
+    margin-top: -88px;
+  }
+
+  &::before {
+    opacity: 0;
+  }
+}
+
+/* 容器 */
+.ele-message-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  pointer-events: none;
+  overflow: hidden;
+
+  & > .ele-message:first-child {
+    margin-top: eleVar('message', 'space');
+  }
+
+  &.is-hide {
+    display: none;
+  }
+}

package/lib/ele-app/style/overwrite/autocomplete/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/ele-app/style/overwrite/autocomplete/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-app/style/overwrite/backtop/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/ele-app/style/overwrite/cascader/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/ele-app/style/overwrite/cascader/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-app/style/overwrite/checkbox/css-var.scss

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

package/lib/ele-app/style/overwrite/checkbox/index.scss

@@ -0,0 +1,161 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-checkbox-var($ele);
+
+/* Checkbox */
+body .el-checkbox {
+  .el-checkbox__label {
+    color: eleVar('checkbox', 'color');
+    font-size: eleVar('checkbox', 'font-size');
+    line-height: eleVar('checkbox', 'size');
+    transition: (color $transition-base, font-weight $transition-base);
+  }
+
+  .el-checkbox__inner {
+    width: eleVar('checkbox', 'size');
+    height: eleVar('checkbox', 'size');
+    background: eleVar('checkbox', 'bg');
+    border: eleVar('checkbox', 'border');
+    border-radius: eleVar('checkbox', 'radius');
+    transition: (
+      border-color $transition-base,
+      background-color $transition-base
+    );
+
+    &::after {
+      top: 50%;
+      left: eleVar('checkbox', 'icon-left');
+      width: eleVar('checkbox', 'icon-width');
+      height: eleVar('checkbox', 'icon-height');
+      border: 2px solid #fff;
+      border-top: 0;
+      border-left: 0;
+      box-sizing: border-box;
+      transform: rotate(45deg) scale(0) translate(-50%, -50%);
+      transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+      opacity: 0;
+    }
+  }
+
+  .el-checkbox__input .el-checkbox__inner::before {
+    content: '';
+    width: 60%;
+    height: 2px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    right: auto;
+    bottom: auto;
+    background: #fff;
+    transform: translateX(-50%) scale(0);
+    margin-top: -1px;
+    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+    opacity: 0;
+  }
+
+  &:hover .el-checkbox__inner {
+    border: eleVar('checkbox', 'hover-border');
+  }
+
+  &.is-checked {
+    .el-checkbox__label {
+      color: eleVar('checkbox', 'active-color');
+    }
+
+    .el-checkbox__inner {
+      background: elVar('color-primary');
+      border: 1px solid elVar('color-primary');
+
+      &::after {
+        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;
+      }
+    }
+  }
+
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background: elVar('color-primary');
+    border: 1px solid elVar('color-primary');
+
+    &::before {
+      opacity: 1;
+      transform: translateX(-50%) scale(1);
+      transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+    }
+
+    &::after {
+      display: block;
+      transform: rotate(45deg) scale(0) translate(-50%, -50%);
+      opacity: 0;
+    }
+  }
+
+  &.is-disabled {
+    span.el-checkbox__label {
+      color: eleVar('checkbox', 'disabled-color');
+    }
+
+    .el-checkbox__input .el-checkbox__inner {
+      background: eleVar('checkbox', 'disabled-bg');
+      border: eleVar('checkbox', 'disabled-border');
+
+      &::after {
+        border-color: eleVar('checkbox', 'disabled-color');
+      }
+    }
+  }
+
+  &.el-checkbox--small {
+    .el-checkbox__label {
+      font-size: eleVar('checkbox', 'sm-font-size');
+      line-height: eleVar('checkbox', 'sm-size');
+    }
+
+    .el-checkbox__inner {
+      width: eleVar('checkbox', 'sm-size');
+      height: eleVar('checkbox', 'sm-size');
+      border-radius: eleVar('checkbox', 'sm-radius');
+
+      &::after {
+        left: eleVar('checkbox', 'sm-icon-left');
+        width: eleVar('checkbox', 'sm-icon-width');
+        height: eleVar('checkbox', 'sm-icon-height');
+      }
+    }
+
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+      top: 50%;
+    }
+  }
+
+  &.el-checkbox--large {
+    .el-checkbox__label {
+      font-size: eleVar('checkbox', 'lg-font-size');
+      line-height: eleVar('checkbox', 'lg-size');
+    }
+
+    .el-checkbox__inner {
+      width: eleVar('checkbox', 'lg-size');
+      height: eleVar('checkbox', 'lg-size');
+      border-radius: eleVar('checkbox', 'lg-radius');
+
+      &::after {
+        left: eleVar('checkbox', 'lg-icon-left');
+        width: eleVar('checkbox', 'lg-icon-width');
+        height: eleVar('checkbox', 'lg-icon-height');
+      }
+    }
+  }
+}
+
+body .el-checkbox,
+body .el-checkbox-group > .el-checkbox {
+  margin-right: eleVar('checkbox', 'space');
+}
+
+.el-checkbox-group > .el-checkbox:last-child {
+  margin-right: 0;
+}

package/lib/ele-app/style/overwrite/color-picker/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/ele-app/style/overwrite/color-picker/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-app/style/overwrite/color-picker/index.scss

@@ -0,0 +1,42 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+
+/* ColorPicker */
+body .el-color-picker__panel {
+  padding: 10px;
+}
+
+.el-color-picker__panel {
+  .el-color-dropdown__btns {
+    margin-top: 8px;
+  }
+
+  .el-color-predefine__color-selector.selected {
+    box-shadow: none;
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 5.71428571px;
+      height: 9.14285714px;
+      border: 2px solid #fff;
+      border-left: 0;
+      border-top: 0;
+      transform: rotate(45deg) translate(-50%, -50%);
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 6px;
+    }
+  }
+}
+
+.el-color-picker .el-color-picker__color {
+  border-color: elVar('border-color', 'light');
+  overflow: hidden;
+}
+
+body .el-color-picker .el-color-picker__icon,
+body .el-color-picker .el-color-picker__empty {
+  font-size: 13px;
+}