@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.10

package/dist/theme-chalk/icon/scss/_variables.scss

@@ -1,9 +1,8 @@
 // variables
 // --------------------------
-
 $fa-css-prefix: fa !default;
 $fa-style: 900 !default;
-$fa-style-family: 'R Icons' !default;
+$fa-style-family: $fa-font-family;
 
 $fa-display: inline-block !default;
 
@@ -46,7 +45,6 @@ $fa-stack-width: ($fa-fw-width * 2) !default;
 $fa-stack-z-index: auto !default;
 
 $fa-font-display: block !default;
-$fa-font-path: '/fonts' !default;
 
 $fa-var-0: \30;
 $fa-var-1: \31;

package/dist/theme-chalk/icon/scss/brands.scss

@@ -1,8 +1,3 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
 @import 'functions';
 @import 'variables';
 

package/dist/theme-chalk/icon/scss/duotone.scss

@@ -1,8 +1,3 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
 @import 'functions';
 @import 'variables';
 

package/dist/theme-chalk/icon/scss/fontawesome.scss

@@ -1,11 +1,3 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
-// Font Awesome core compile (Web Fonts-based)
-// -------------------------
-
 @import 'functions';
 @import 'variables';
 @import 'mixins';

package/dist/theme-chalk/icon/scss/light.scss

@@ -1,8 +1,3 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
 @import 'functions';
 @import 'variables';
 
@@ -12,7 +7,7 @@
 }
 
 @font-face {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-style: normal;
     font-weight: 300;
     font-display: $fa-font-display;
@@ -21,6 +16,6 @@
 
 .fal,
 .#{$fa-css-prefix}-light {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-weight: 300;
 }

package/dist/theme-chalk/icon/scss/regular.scss

@@ -1,8 +1,3 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
 @import 'functions';
 @import 'variables';
 
@@ -12,7 +7,7 @@
 }
 
 @font-face {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-style: normal;
     font-weight: 400;
     font-display: $fa-font-display;
@@ -21,6 +16,6 @@
 
 .far,
 .#{$fa-css-prefix}-regular {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-weight: 400;
 }

package/dist/theme-chalk/icon/scss/solid.scss

@@ -1,8 +1,3 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
 @import 'functions';
 @import 'variables';
 
@@ -12,7 +7,7 @@
 }
 
 @font-face {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-style: normal;
     font-weight: 900;
     font-display: $fa-font-display;
@@ -21,6 +16,6 @@
 
 .fas,
 .#{$fa-css-prefix}-solid {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-weight: 900;
 }

package/dist/theme-chalk/icon/scss/thin.scss

@@ -1,8 +1,3 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
 @import 'functions';
 @import 'variables';
 
@@ -12,7 +7,7 @@
 }
 
 @font-face {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-style: normal;
     font-weight: 100;
     font-display: $fa-font-display;
@@ -21,6 +16,6 @@
 
 .fat,
 .#{$fa-css-prefix}-thin {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-weight: 100;
 }

package/dist/theme-chalk/icon/scss/v4-shims.scss

@@ -1,11 +1,3 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
-// V4 shims compile (Web Fonts-based)
-// -------------------------
-
 @import 'functions';
 @import 'variables';
 @import 'shims';

package/dist/theme-chalk/index.scss

@@ -2,6 +2,7 @@
 @import './common';
 @import './link';
 @import './button';
+@import './icon/fonts';
 @import './icon';
 @import './row';
 @import './col';
@@ -11,6 +12,7 @@
 
 /* Form 表单组件 */
 @import './cascader';
+@import './carousel/';
 @import './checkbox';
 @import './checkbox-button';
 @import './checkbox-group';
@@ -30,6 +32,7 @@
 @import './upload';
 
 /* Data 数据展示 */
+@import './avatar/';
 @import './badge';
 @import './card';
 @import './collapse';

package/dist/theme-chalk/input/input.scss

@@ -160,11 +160,12 @@
 }
 
 .#{$namespace}-input {
+    --#{$namespace}-input-inner-height: calc(var(--#{$namespace}-input-height, 32px) - 2px);
     position: relative;
     display: inline-flex;
     width: 100%;
     font-size: 14px;
-    line-height: var(--#{$namespace}-input-height, 32px);
+    line-height: var(--#{$namespace}-input-inner-height, 30px);
     box-sizing: border-box;
     vertical-align: middle;
 
@@ -411,6 +412,7 @@
     .#{$namespace}-button {
         display: inline-block;
         margin: 0 -20px;
+        line-height: 0;
     }
 
     button.#{$namespace}-button,
@@ -564,12 +566,12 @@
 
 .#{$namespace}-input--large {
     --#{$namespace}-input-height: var(--#{$namespace}-component-size-large);
-    --#{$namespace}-input-inner-height: calc(var(--#{$namespace}-input-height, var(--#{$namespace}-component-size-large)) - 2px);
+    --#{$namespace}-input-inner-height: calc(var(--#{$namespace}-input-height, 40px) - 2px);
     font-size: 14px;
 }
 
 .#{$namespace}-input--small {
     --#{$namespace}-input-height: var(--#{$namespace}-component-size-small);
-    --#{$namespace}-input-inner-height: var(--#{$namespace}-component-size-small);
+    --#{$namespace}-input-inner-height: calc(var(--#{$namespace}-input-height, 24px) - 2px);
     font-size: 12px;
 }

package/dist/theme-chalk/link/index.scss

@@ -1,88 +1,3 @@
-// @use 'sass:map';
-
-// @use '../../Common/styles/mixins/mixins' as *;
-// @use '../../Common/styles/mixins/var' as *;
-// @use '../../Common/styles/mixins/utils' as *;
-// @use '../../Common/styles/common/var' as *;
-
-// @include b(link) {
-//     @include set-component-css-var('link', $link);
-// }
-
-// @include b(link) {
-//     display: inline-flex;
-//     flex-direction: row;
-//     align-items: center;
-//     justify-content: center;
-//     vertical-align: middle;
-//     position: relative;
-//     text-decoration: none;
-//     outline: none;
-//     cursor: pointer;
-//     padding: 0;
-//     font-size: getCssVar('link', 'font-size');
-//     font-weight: getCssVar('link', 'font-weight');
-
-//     color: getCssVar('link', 'text-color');
-
-//     &:hover {
-//         color: getCssVar('link', 'hover-text-color');
-//     }
-
-//     @include when(underline) {
-//         &:hover:after {
-//             content: '';
-//             position: absolute;
-//             left: 0;
-//             right: 0;
-//             height: 0;
-//             bottom: 0;
-//             border-bottom: 1px solid getCssVar('link', 'hover-text-color');
-//         }
-//     }
-
-//     @include when(disabled) {
-//         color: getCssVar('link', 'disabled-text-color');
-//         cursor: not-allowed;
-//     }
-
-//     & [class*='#{$namespace}-icon-'] {
-//         & + span {
-//             margin-left: 5px;
-//         }
-//     }
-
-//     &.#{$namespace}-link--default {
-//         &:after {
-//             border-color: getCssVar('link', 'hover-text-color');
-//         }
-//     }
-
-//     @include e(inner) {
-//         display: inline-flex;
-//         justify-content: center;
-//         align-items: center;
-//     }
-
-//     @each $type in $types {
-//         &.#{$namespace}-link--#{$type} {
-//             @include css-var-from-global(('link', 'text-color'), ('color', $type));
-//             @include css-var-from-global(('link', 'hover-text-color'), ('color', $type, 'light-3'));
-//             @include css-var-from-global(('link', 'disabled-text-color'), ('color', $type, 'light-5'));
-
-//             &:after {
-//                 border-color: getCssVar('link', 'text-color');
-//             }
-
-//             @include when(underline) {
-//                 &:hover:after {
-//                     border-color: getCssVar('link', 'text-color');
-//                 }
-//             }
-//         }
-//     }
-// }
-
 @use '../common/var';
 .#{$namespace}-link {
     --#{$namespace}-link-font-size: 14px;

package/dist/theme-chalk/loading/index.scss

@@ -1,13 +1,11 @@
 @use '../common/var';
 
-.#{$namespace}-loading-parent {
-    .#{$namespace}-loading-parent--relative {
-        position: relative !important;
-    }
+.#{$namespace}-loading-parent--relative {
+    position: relative !important;
+}
 
-    .#{$namespace}-loading-parent--hidden {
-        overflow: hidden !important;
-    }
+.#{$namespace}-loading-parent--hidden {
+    overflow: hidden !important;
 }
 
 .#{$namespace}-loading-mask {

package/dist/theme-chalk/message/index.scss

@@ -103,7 +103,7 @@
         font-size: 16px;
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f00d';
             font-weight: 400;
         }
@@ -120,7 +120,7 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f058';
             font-style: normal;
             font-weight: bold;
@@ -131,7 +131,7 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f057';
             font-style: normal;
             font-weight: bold;
@@ -142,7 +142,7 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f05a';
             font-style: normal;
             font-weight: bold;
@@ -153,7 +153,7 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f06a';
             font-style: normal;
             font-weight: bold;

package/dist/theme-chalk/notification/index.scss

@@ -73,7 +73,7 @@
         font-size: 16px;
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f00d';
             font-weight: 400;
         }
@@ -89,7 +89,7 @@
         margin-top: -4px;
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f058';
             font-style: normal;
             font-weight: bold;
@@ -102,7 +102,7 @@
         margin-top: -4px;
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f057';
             font-style: normal;
             font-weight: bold;
@@ -115,7 +115,7 @@
         margin-top: -4px;
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f05a';
             font-style: normal;
             font-weight: bold;
@@ -128,7 +128,7 @@
         margin-top: -4px;
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f06a';
             font-style: normal;
             font-weight: bold;

package/dist/theme-chalk/pagination/index.scss

@@ -179,7 +179,7 @@
         display: inline-block;
         min-width: 32px;
         height: 32px;
-        font-family: 'R Icons';
+        font-family: $fa-font-family;
         line-height: 32px;
         text-align: center;
         vertical-align: middle;

package/dist/theme-chalk/tabs/index.scss

@@ -16,7 +16,7 @@
         bottom: 0;
         left: 0;
         height: 2px;
-        background: var(--#{$namespace}-bg-color-primary, var(--#{$namespace}-color-primary));
+        background: var(--#{$namespace}-color-primary);
         z-index: 1;
         transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
         list-style: none;

package/dist/types/common.d.ts

@@ -12,29 +12,49 @@ export declare namespace TypeAttributes {
 export type ComponentChildren = React.ReactNode | React.ReactNode[];
 export interface FormControlBaseProps<ValueType = React.AllHTMLAttributes<HTMLInputElement>['value']> {
     name?: string;
+    /** 初始值 */
     defaultValue?: ValueType;
+    /** 值（可控） */
     value?: ValueType;
+    /** 选中值发生变化时触发 */
     onChange?: (value: ValueType | boolean, event?: React.ChangeEvent<any>) => void;
+    /** 禁用 */
     disabled?: boolean;
+    /** 尺寸 */
     size?: TypeAttributes.Size;
+    /** Render the control as plain text */
+    /** 只读 */
     readOnly?: boolean;
+    /** 样式前缀 */
     classPrefix?: string;
 }
+/** 基础参数 */
 export interface BaseProps<S = ComponentChildren> {
+    /** 组件 CSS 类的前缀 */
     classPrefix?: string;
+    /** 下拉面板自定义内联样式 */
     popperStyle?: React.CSSProperties;
+    /** 子组件 */
     children?: S;
 }
 export type NativeProps<S extends string = never> = {
+    /** 自定义样式 */
     className?: string;
+    /** 自定义内联样式 */
     style?: React.CSSProperties & Partial<Record<S, string>>;
 };
 export interface AnimationEventProps {
+    /** 显示前动画过渡的回调函数 */
     beforeEnter?: (node?: null | HTMLElement | Text) => void;
+    /** 显示中动画过渡的回调函数 */
     onEnter?: (node?: null | HTMLElement | Text) => void;
+    /** 显示后动画过渡的回调函数 */
     afterEnter?: (node?: null | HTMLElement | Text) => void;
+    /** 退出前动画过渡的回调函数 */
     beforeLeave?: (node?: null | HTMLElement | Text) => void;
+    /** 退出中动画过渡的回调函数 */
     onLeave?: (node?: null | HTMLElement | Text) => void;
+    /** 退出后动画过渡的回调函数 */
     afterLeave?: (node?: null | HTMLElement | Text) => void;
 }
 export interface TooltipBaseProps<T extends EventTarget> {
@@ -44,8 +64,12 @@ export interface TooltipBaseProps<T extends EventTarget> {
     onContextMenu?: (event?: React.MouseEvent<T>) => void;
 }
 export interface StandardProps extends React.HTMLAttributes<HTMLElement> {
+    /** The prefix of the component CSS class */
     classPrefix?: string;
+    /** 自定义样式 */
     className?: string;
+    /** 自定义内联样式 */
     style?: React.CSSProperties;
+    /** 子组件 */
     children?: ComponentChildren;
 }

package/dist/types/type.d.ts

@@ -1,4 +1,9 @@
 export declare const tuple: <T extends string[]>(...args: T) => T;
 export declare const tupleNum: <T extends number[]>(...args: T) => T;
+/**
+ * https://stackoverflow.com/a/59187769 Extract the type of an element of an array/tuple without
+ * performing indexing
+ */
 export type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer F)[] ? F : never;
+/** https://github.com/Microsoft/TypeScript/issues/29729 */
 export type LiteralUnion<T extends U, U> = T | (U & {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qsxy/element-plus-react",
-  "version": "1.0.0-next.1",
+  "version": "1.0.0-next.10",
   "description": "element-plus-react",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,30 +13,9 @@
   },
   "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "theme-chalk"
   ],
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "lint-staged": {
-    "*.{md,json}": [
-      "prettier --write --no-error-on-unmatched-pattern"
-    ],
-    "*.{css,less}": [
-      "stylelint --fix",
-      "prettier --write"
-    ],
-    "*.{js,jsx}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.{ts,tsx}": [
-      "eslint --fix",
-      "prettier --parser=typescript --write"
-    ]
-  },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "ahooks": "^3.7.10",
@@ -48,6 +27,7 @@
     "lodash": "^4.17.21",
     "rc-resize-observer": "^1.4.0",
     "rc-util": "^5.38.1",
+    "rc-virtual-list": "3.18.5",
     "react-is": "^19.0.0",
     "react-popper": "^2.3.0",
     "react-router-dom": "^6.22.1",

package/theme-chalk/avatar/index.scss

@@ -0,0 +1,50 @@
+@use '../common/var';
+
+.#{$namespace}-avatar {
+    --#{$namespace}-avatar-text-color: var(--#{$namespace}-color-white);
+    --#{$namespace}-avatar-bg-color: var(--#{$namespace}-text-color-disabled);
+    --#{$namespace}-avatar-text-size: 14px;
+    --#{$namespace}-avatar-icon-size: 18px;
+    --#{$namespace}-avatar-border-radius: var(--#{$namespace}-border-radius-base);
+    --#{$namespace}-avatar-size-large: 56px;
+    --#{$namespace}-avatar-size-small: 24px;
+    --#{$namespace}-avatar-size: 40px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    text-align: center;
+    overflow: hidden;
+    outline: none;
+    color: var(--#{$namespace}-avatar-text-color);
+    background: var(--#{$namespace}-avatar-bg-color);
+    width: var(--#{$namespace}-avatar-size);
+    height: var(--#{$namespace}-avatar-size);
+    font-size: var(--#{$namespace}-avatar-text-size);
+}
+
+.#{$namespace}-avatar > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.#{$namespace}-avatar--circle {
+    border-radius: 50%;
+}
+
+.#{$namespace}-avatar--square {
+    border-radius: var(--#{$namespace}-avatar-border-radius);
+}
+
+.#{$namespace}-avatar--icon {
+    font-size: var(--#{$namespace}-avatar-icon-size);
+}
+
+.#{$namespace}-avatar--small {
+    --#{$namespace}-avatar-size: 24px;
+}
+
+.#{$namespace}-avatar--large {
+    --#{$namespace}-avatar-size: 56px;
+}

package/theme-chalk/badge/index.scss

@@ -0,0 +1,63 @@
+@use '../common/var';
+
+@use 'sass:math';
+@use 'sass:map';
+
+.#{$namespace}-badge {
+    --#{$namespace}-badge-bg-color: var(--#{$namespace}-color-error);
+    --#{$namespace}-badge-radius: 10px;
+    --#{$namespace}-badge-font-size: 12px;
+    --#{$namespace}-badge-padding: 6px;
+    --#{$namespace}-badge-size: 18px;
+
+    position: relative;
+    vertical-align: middle;
+    display: inline-block;
+    width: fit-content;
+}
+
+.#{$namespace}-badge__content {
+    background-color: var(--#{$namespace}-badge-bg-color);
+    border-radius: var(--#{$namespace}-badge-radius);
+    color: var(--#{$namespace}-color-white);
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: var(--#{$namespace}-badge-font-size);
+    height: var(--#{$namespace}-badge-size);
+    padding: 0 var(--#{$namespace}-badge-padding);
+    white-space: nowrap;
+    border: 1px solid var(--#{$namespace}-bg-color);
+
+    &.is-fixed {
+        position: absolute;
+        top: 0;
+        right: calc(1px + #{var(--#{$namespace}-badge-size)} / 2);
+        transform: translateY(-50%) translateX(100%);
+        z-index: 1;
+
+        &.is-dot {
+            right: 5px;
+        }
+    }
+
+    &.is-dot {
+        height: 8px;
+        width: 8px;
+        padding: 0;
+        right: 0;
+        border-radius: 50%;
+    }
+}
+
+.#{$namespace}-badge__content--primary {
+    background-color: var(--#{$namespace}-color-primary);
+}
+
+@each $type in (success, warning, info, error) {
+    .#{$namespace}-badge__content--#{$type} {
+        background-color: var(--#{$namespace}-color-#{$type});
+    }
+}