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

package/dist/index.d.ts

@@ -37,8 +37,6 @@ export { Calendar, CalendarContext } from './Calendar';
 export type { DateRangeType, DateType } from './Calendar';
 export { DatePicker as ElDatePicker } from './DatePicker';
 export type { DatePickerProps, DatePickerRef } from './DatePicker';
-export { DateTimePicker as ElDateTimePicker } from './DateTimePicker';
-export type { DateTimePickerProps, DateTimePickerRef } from './DateTimePicker';
 export { TimePicker as ElTimePicker } from './TimePicker';
 export type { TimePickerProps, TimePickerRef } from './TimePicker';
 export { Switch as ElSwitch } from './Switch';

package/dist/index.js

@@ -1,238 +1,70 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+/* Basic 基础组件 */
+export { Link as ElLink } from "./Link";
+export { Button as ElButton } from "./Button";
+export { Col as ElCol } from "./Col";
+export { Icon as ElIcon } from "./Icon";
+export * from "./Icon/IconList";
+export { Row as ElRow, RowContext } from "./Row";
+export { Scrollbar as ElScrollbar } from "./Scrollbar";
+export { Popper as ElPopper } from "./Popper";
+export { Transition as ElTransition } from "./Transition";
+/* Form 表单组件 */
+export { Cascader as ElCascader } from "./Cascader";
+export { Checkbox as ElCheckbox, CheckboxButton as ElCheckboxButton } from "./Checkbox";
+export { CheckboxGroup as ElCheckboxGroup } from "./CheckboxGroup";
+export { ColorPicker as ElColorPicker } from "./ColorPicker";
+export { Radio as ElRadio } from "./Radio";
+export { RadioGroup as ElRadioGroup } from "./RadioGroup";
+export { Input as ElInput } from "./Input";
+export { InputNumber as ElInputNumber } from "./InputNumber";
+export { Select as ElSelect } from "./Select";
+export { Calendar, CalendarContext } from "./Calendar";
+export { DatePicker as ElDatePicker } from "./DatePicker";
+export { TimePicker as ElTimePicker } from "./TimePicker";
+export { Switch as ElSwitch } from "./Switch";
+export { Transfer as ElTransfer } from "./Transfer";
+export { Form as ElForm, useForm } from "./Form";
+export { Upload as ElUpload } from "./Upload";
+/* Data 数据展示 */
+export { Avatar as ElAvatar } from "./Avatar";
+export { Badge as ElBadge } from "./Badge";
+export { Card as ElCard } from "./Card";
+export { Carousel as ElCarousel, CarouselItem as ElCarouselItem } from "./Carousel";
+export { Collapse as ElCollapse, CollapseItem as ElCollapseItem } from "./Collapse";
+export { Descriptions as ElDescriptions, DescriptionsItem as ElDescriptionsItem } from "./Descriptions";
+export { Pagination as ElPagination } from "./Pagination";
+export { Progress as ElProgress } from "./Progress";
+export { Table as ElTable, TableColumn as ElTableColumn } from "./Table";
+export { Tag as ElTag } from "./Tag";
+export { TimeLine as ElTimeLine, TimeLineItem as ElTimeLineItem } from "./TimeLine";
+export { DirectoryTree as ElDirectoryTree, Tree as ElTree /* , TreeNode */ } from "./Tree";
+export { TreeSelect as ElTreeSelect } from "./TreeSelect";
+// export { VirtualList } from './VirtualList';
+// export type { ListProps, ListRef, ScrollTo } from './VirtualList';
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Calendar: () => import_Calendar.Calendar,
-  CalendarContext: () => import_Calendar.CalendarContext,
-  ConfigProvider: () => import_ConfigProvider.ConfigProvider,
-  ElAvatar: () => import_Avatar.Avatar,
-  ElBadge: () => import_Badge.Badge,
-  ElBreadcrumb: () => import_Breadcrumb.Breadcrumb,
-  ElBreadcrumbItem: () => import_Breadcrumb.BreadcrumbItem,
-  ElButton: () => import_Button.Button,
-  ElCard: () => import_Card.Card,
-  ElCarousel: () => import_Carousel.Carousel,
-  ElCarouselItem: () => import_Carousel.CarouselItem,
-  ElCascader: () => import_Cascader.Cascader,
-  ElCheckbox: () => import_Checkbox.Checkbox,
-  ElCheckboxButton: () => import_Checkbox.CheckboxButton,
-  ElCheckboxGroup: () => import_CheckboxGroup.CheckboxGroup,
-  ElCol: () => import_Col.Col,
-  ElCollapse: () => import_Collapse.Collapse,
-  ElCollapseItem: () => import_Collapse.CollapseItem,
-  ElColorPicker: () => import_ColorPicker.ColorPicker,
-  ElDatePicker: () => import_DatePicker.DatePicker,
-  ElDateTimePicker: () => import_DateTimePicker.DateTimePicker,
-  ElDescriptions: () => import_Descriptions.Descriptions,
-  ElDescriptionsItem: () => import_Descriptions.DescriptionsItem,
-  ElDialog: () => import_Dialog.Dialog,
-  ElDirectoryTree: () => import_Tree.DirectoryTree,
-  ElDivider: () => import_Divider.Divider,
-  ElDrawer: () => import_Drawer.Drawer,
-  ElDropdown: () => import_Dropdown.Dropdown,
-  ElDropdownItem: () => import_Dropdown.DropdownItem,
-  ElDropdownMenu: () => import_Dropdown.DropdownMenu,
-  ElEmpty: () => import_Empty.Empty,
-  ElForm: () => import_Form.Form,
-  ElIcon: () => import_Icon.Icon,
-  ElInput: () => import_Input.Input,
-  ElInputNumber: () => import_InputNumber.InputNumber,
-  ElLink: () => import_Link.Link,
-  ElLoading: () => import_Loading.Loading,
-  ElMessage: () => import_Message.Message,
-  ElMessageBox: () => import_MessageBox.MessageBox,
-  ElNotification: () => import_Notification.Notification,
-  ElPagination: () => import_Pagination.Pagination,
-  ElPopconfirm: () => import_Popconfirm.Popconfirm,
-  ElPopover: () => import_Popover.Popover,
-  ElPopper: () => import_Popper.Popper,
-  ElProgress: () => import_Progress.Progress,
-  ElRadio: () => import_Radio.Radio,
-  ElRadioGroup: () => import_RadioGroup.RadioGroup,
-  ElRow: () => import_Row.Row,
-  ElScrollbar: () => import_Scrollbar.Scrollbar,
-  ElSelect: () => import_Select.Select,
-  ElSkeleton: () => import_Skeleton.Skeleton,
-  ElSwitch: () => import_Switch.Switch,
-  ElTabPane: () => import_Tabs.TabPane,
-  ElTable: () => import_Table.Table,
-  ElTableColumn: () => import_Table.TableColumn,
-  ElTabs: () => import_Tabs.Tabs,
-  ElTag: () => import_Tag.Tag,
-  ElTimeLine: () => import_TimeLine.TimeLine,
-  ElTimeLineItem: () => import_TimeLine.TimeLineItem,
-  ElTimePicker: () => import_TimePicker.TimePicker,
-  ElTooltip: () => import_Tooltip.Tooltip,
-  ElTransfer: () => import_Transfer.Transfer,
-  ElTransition: () => import_Transition.Transition,
-  ElTree: () => import_Tree.Tree,
-  ElTreeSelect: () => import_TreeSelect.TreeSelect,
-  ElUpload: () => import_Upload.Upload,
-  PopupManager: () => import_Util.PopupManager,
-  RowContext: () => import_Row.RowContext,
-  download: () => import_Util.download,
-  genFileId: () => import_Util.genFileId,
-  generateTree: () => import_Util.generateTree,
-  getScrollWidth: () => import_Util.getScrollWidth,
-  isEmpty: () => import_Util.isEmpty,
-  isNotEmpty: () => import_Util.isNotEmpty,
-  randomCode: () => import_Util.randomCode,
-  useForm: () => import_Form.useForm
-});
-module.exports = __toCommonJS(src_exports);
-var import_Link = require("./Link");
-var import_Button = require("./Button");
-var import_Col = require("./Col");
-var import_Icon = require("./Icon");
-__reExport(src_exports, require("./Icon/IconList"), module.exports);
-var import_Row = require("./Row");
-var import_Scrollbar = require("./Scrollbar");
-var import_Popper = require("./Popper");
-var import_Transition = require("./Transition");
-var import_Cascader = require("./Cascader");
-var import_Checkbox = require("./Checkbox");
-var import_CheckboxGroup = require("./CheckboxGroup");
-var import_ColorPicker = require("./ColorPicker");
-var import_Radio = require("./Radio");
-var import_RadioGroup = require("./RadioGroup");
-var import_Input = require("./Input");
-var import_InputNumber = require("./InputNumber");
-var import_Select = require("./Select");
-var import_Calendar = require("./Calendar");
-var import_DatePicker = require("./DatePicker");
-var import_DateTimePicker = require("./DateTimePicker");
-var import_TimePicker = require("./TimePicker");
-var import_Switch = require("./Switch");
-var import_Transfer = require("./Transfer");
-var import_Form = require("./Form");
-var import_Upload = require("./Upload");
-var import_Avatar = require("./Avatar");
-var import_Badge = require("./Badge");
-var import_Card = require("./Card");
-var import_Carousel = require("./Carousel");
-var import_Collapse = require("./Collapse");
-var import_Descriptions = require("./Descriptions");
-var import_Pagination = require("./Pagination");
-var import_Progress = require("./Progress");
-var import_Table = require("./Table");
-var import_Tag = require("./Tag");
-var import_TimeLine = require("./TimeLine");
-var import_Tree = require("./Tree");
-var import_TreeSelect = require("./TreeSelect");
-var import_Breadcrumb = require("./Breadcrumb");
-var import_Dropdown = require("./Dropdown");
-var import_Tabs = require("./Tabs");
-var import_Empty = require("./Empty");
-var import_Skeleton = require("./Skeleton");
-var import_Dialog = require("./Dialog");
-var import_Drawer = require("./Drawer");
-var import_Loading = require("./Loading");
-var import_Message = require("./Message");
-var import_MessageBox = require("./MessageBox");
-var import_Notification = require("./Notification");
-var import_Tooltip = require("./Tooltip");
-var import_Popconfirm = require("./Popconfirm");
-var import_Popover = require("./Popover");
-var import_Divider = require("./Divider");
-var import_Util = require("./Util");
-__reExport(src_exports, require("./hooks"), module.exports);
-var import_ConfigProvider = require("./ConfigProvider");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Calendar,
-  CalendarContext,
-  ConfigProvider,
-  ElAvatar,
-  ElBadge,
-  ElBreadcrumb,
-  ElBreadcrumbItem,
-  ElButton,
-  ElCard,
-  ElCarousel,
-  ElCarouselItem,
-  ElCascader,
-  ElCheckbox,
-  ElCheckboxButton,
-  ElCheckboxGroup,
-  ElCol,
-  ElCollapse,
-  ElCollapseItem,
-  ElColorPicker,
-  ElDatePicker,
-  ElDateTimePicker,
-  ElDescriptions,
-  ElDescriptionsItem,
-  ElDialog,
-  ElDirectoryTree,
-  ElDivider,
-  ElDrawer,
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElEmpty,
-  ElForm,
-  ElIcon,
-  ElInput,
-  ElInputNumber,
-  ElLink,
-  ElLoading,
-  ElMessage,
-  ElMessageBox,
-  ElNotification,
-  ElPagination,
-  ElPopconfirm,
-  ElPopover,
-  ElPopper,
-  ElProgress,
-  ElRadio,
-  ElRadioGroup,
-  ElRow,
-  ElScrollbar,
-  ElSelect,
-  ElSkeleton,
-  ElSwitch,
-  ElTabPane,
-  ElTable,
-  ElTableColumn,
-  ElTabs,
-  ElTag,
-  ElTimeLine,
-  ElTimeLineItem,
-  ElTimePicker,
-  ElTooltip,
-  ElTransfer,
-  ElTransition,
-  ElTree,
-  ElTreeSelect,
-  ElUpload,
-  PopupManager,
-  RowContext,
-  download,
-  genFileId,
-  generateTree,
-  getScrollWidth,
-  isEmpty,
-  isNotEmpty,
-  randomCode,
-  useForm,
-  ...require("./Icon/IconList"),
-  ...require("./hooks")
-});
+/* Navigation 导航 */
+export { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from "./Breadcrumb";
+export { Dropdown as ElDropdown, DropdownItem as ElDropdownItem, DropdownMenu as ElDropdownMenu } from "./Dropdown";
+export { TabPane as ElTabPane, Tabs as ElTabs } from "./Tabs";
+export { Empty as ElEmpty } from "./Empty";
+export { Skeleton as ElSkeleton } from "./Skeleton";
+/* Feedback 反馈组件 */
+export { Dialog as ElDialog } from "./Dialog";
+export { Drawer as ElDrawer } from "./Drawer";
+export { Loading as ElLoading } from "./Loading";
+export { Message as ElMessage } from "./Message";
+export { MessageBox as ElMessageBox } from "./MessageBox";
+export { Notification as ElNotification } from "./Notification";
+export { Tooltip as ElTooltip } from "./Tooltip";
+export { Popconfirm as ElPopconfirm } from "./Popconfirm";
+export { Popover as ElPopover } from "./Popover";
+/* Others 其他 */
+export { Divider as ElDivider } from "./Divider";
+/* 工具库与hooks */
+export { PopupManager, download, genFileId, generateTree, getScrollWidth, isEmpty, isNotEmpty, randomCode } from "./Util";
+export * from "./hooks";
+
+/* 通用types */
+
+/** 全局配置 */
+export { ConfigProvider } from "./ConfigProvider";

package/dist/theme-chalk/common/index.js

@@ -1,2 +1 @@
-// src/theme-chalk/common/index.ts
-var import_styles = require("./styles/index.scss");
+import "./styles/index.scss";

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

@@ -67,7 +67,7 @@ $color-info: map.get($colors, 'info', 'base') !default;
     --#{$namespace}-bg-color: #ffffff;
     --#{$namespace}-bg-color-page: #f2f3f5;
     --#{$namespace}-bg-color-overlay: #ffffff;
-    --#{$namespace}-text-color-primary: rgb(61, 77, 102);
+    --#{$namespace}-text-color-primary: #303133;
     --#{$namespace}-text-color-regular: #606266;
     --#{$namespace}-text-color-secondary: #909399;
     --#{$namespace}-text-color-placeholder: #a8abb2;
@@ -216,7 +216,7 @@ $bg-color: map.merge(
     --#{$namespace}-mask-color-extra-light: rgba(0, 0, 0, 0.3);
 
     @for $i from 0 through 9 {
-        // @include set-color-mix-level($i, 'light', $--main-color, #141414);
+        // @include set-color-mix-level($i, 'light', $--el-color-primary, #141414);
         --#{$namespace}-empty-fill-color-#{$i}: #{mix(#141414, #000000, math.percentage(math.div($i, 10)))};
     }
 }

package/dist/theme-chalk/date-picker/index.scss

@@ -147,7 +147,7 @@ $input-font-size: map.merge(
         padding: 0 5px;
         margin: 0;
         font-size: 14px;
-        word-break: keep-all;
+        word-break: break-all;
         color: var(--#{$namespace}-text-color-primary);
     }
 

package/dist/theme-chalk/display.scss

@@ -0,0 +1,46 @@
+@use './common/var';
+
+@use 'sass:string';
+@use 'sass:map';
+
+// Break-point
+$sm: 768px !default;
+$md: 992px !default;
+$lg: 1200px !default;
+$xl: 1920px !default;
+
+$breakpoints-spec: (
+    'xs-only': '(max-width: #{$sm - 1})',
+    'sm-and-up': '(min-width: #{$sm})',
+    'sm-only': '(min-width: #{$sm}) and (max-width: #{$md - 1})',
+    'sm-and-down': '(max-width: #{$md - 1})',
+    'md-and-up': '(min-width: #{$md})',
+    'md-only': '(min-width: #{$md}) and (max-width: #{$lg - 1})',
+    'md-and-down': '(max-width: #{$lg - 1})',
+    'lg-and-up': '(min-width: #{$lg})',
+    'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl - 1})',
+    'lg-and-down': '(max-width: #{$xl - 1})',
+    'xl-only': '(min-width: #{$xl})',
+) !default;
+
+// Break-points
+@mixin res($key, $map: $breakpoints) {
+    // loop breakpoint Map, return if present
+    @if map.has-key($map, $key) {
+        @media only screen and #{string.unquote(map.get($map, $key))} {
+            @content;
+        }
+    } @else {
+        @warn "Undefined points: `#{$map}`";
+    }
+}
+
+.hidden {
+    @each $break-point-name, $value in $breakpoints-spec {
+        &-#{$break-point-name} {
+            @include res($break-point-name, $breakpoints-spec) {
+                display: none !important;
+            }
+        }
+    }
+}

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

@@ -221,11 +221,23 @@ $--gorup-item-width: 400px;
     }
 
     &.is-required {
-        .#{$namespace}-form-item__label::before {
+        &:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before,
+        &:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label:before {
             content: '*';
-            color: var(--#{$namespace}-color-error);
+            color: var(--el-color-danger);
             margin-right: 4px;
         }
+
+        &:not(.is-no-asterisk).asterisk-right > .el-form-item__label:after,
+        &:not(.is-no-asterisk).asterisk-right > .el-form-item__label-wrap > .el-form-item__label:after {
+            content: '*';
+            color: var(--el-color-danger);
+            margin-left: 4px;
+        }
+    }
+
+    &.#{$namespace}-form-item--label-top {
+        display: block;
     }
 }
 
@@ -357,3 +369,10 @@ $--gorup-item-width: 400px;
         margin-left: 10px;
     }
 }
+
+.#{$namespace}-form-item__nostyle {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    line-height: 0;
+}

package/dist/types/common.js

@@ -1,17 +1 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/types/common.ts
-var common_exports = {};
-module.exports = __toCommonJS(common_exports);
+export {};

package/dist/types/type.js

@@ -1,32 +1,20 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
+export var tuple = function tuple() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return args;
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+export var tupleNum = function tupleNum() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
   }
-  return to;
+  return args;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/types/type.ts
-var type_exports = {};
-__export(type_exports, {
-  tuple: () => tuple,
-  tupleNum: () => tupleNum
-});
-module.exports = __toCommonJS(type_exports);
-var tuple = (...args) => args;
-var tupleNum = (...args) => args;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  tuple,
-  tupleNum
-});
+/**
+ * https://stackoverflow.com/a/59187769 Extract the type of an element of an array/tuple without
+ * performing indexing
+ */
+
+/** https://github.com/Microsoft/TypeScript/issues/29729 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qsxy/element-plus-react",
-  "version": "1.0.0-next.10",
+  "version": "1.0.0-next.12",
   "description": "element-plus-react",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,7 +16,12 @@
     "dist",
     "theme-chalk"
   ],
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
   "dependencies": {
+    "@ctrl/tinycolor": "^4.1.0",
     "@popperjs/core": "^2.11.8",
     "ahooks": "^3.7.10",
     "async-validator": "^4.2.5",

package/theme-chalk/common/index.scss

@@ -67,7 +67,7 @@ $color-info: map.get($colors, 'info', 'base') !default;
     --#{$namespace}-bg-color: #ffffff;
     --#{$namespace}-bg-color-page: #f2f3f5;
     --#{$namespace}-bg-color-overlay: #ffffff;
-    --#{$namespace}-text-color-primary: rgb(61, 77, 102);
+    --#{$namespace}-text-color-primary: #303133;
     --#{$namespace}-text-color-regular: #606266;
     --#{$namespace}-text-color-secondary: #909399;
     --#{$namespace}-text-color-placeholder: #a8abb2;
@@ -216,7 +216,7 @@ $bg-color: map.merge(
     --#{$namespace}-mask-color-extra-light: rgba(0, 0, 0, 0.3);
 
     @for $i from 0 through 9 {
-        // @include set-color-mix-level($i, 'light', $--main-color, #141414);
+        // @include set-color-mix-level($i, 'light', $--el-color-primary, #141414);
         --#{$namespace}-empty-fill-color-#{$i}: #{mix(#141414, #000000, math.percentage(math.div($i, 10)))};
     }
 }

package/theme-chalk/date-picker/index.scss

@@ -147,7 +147,7 @@ $input-font-size: map.merge(
         padding: 0 5px;
         margin: 0;
         font-size: 14px;
-        word-break: keep-all;
+        word-break: break-all;
         color: var(--#{$namespace}-text-color-primary);
     }
 

package/theme-chalk/display.scss

@@ -0,0 +1,46 @@
+@use './common/var';
+
+@use 'sass:string';
+@use 'sass:map';
+
+// Break-point
+$sm: 768px !default;
+$md: 992px !default;
+$lg: 1200px !default;
+$xl: 1920px !default;
+
+$breakpoints-spec: (
+    'xs-only': '(max-width: #{$sm - 1})',
+    'sm-and-up': '(min-width: #{$sm})',
+    'sm-only': '(min-width: #{$sm}) and (max-width: #{$md - 1})',
+    'sm-and-down': '(max-width: #{$md - 1})',
+    'md-and-up': '(min-width: #{$md})',
+    'md-only': '(min-width: #{$md}) and (max-width: #{$lg - 1})',
+    'md-and-down': '(max-width: #{$lg - 1})',
+    'lg-and-up': '(min-width: #{$lg})',
+    'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl - 1})',
+    'lg-and-down': '(max-width: #{$xl - 1})',
+    'xl-only': '(min-width: #{$xl})',
+) !default;
+
+// Break-points
+@mixin res($key, $map: $breakpoints) {
+    // loop breakpoint Map, return if present
+    @if map.has-key($map, $key) {
+        @media only screen and #{string.unquote(map.get($map, $key))} {
+            @content;
+        }
+    } @else {
+        @warn "Undefined points: `#{$map}`";
+    }
+}
+
+.hidden {
+    @each $break-point-name, $value in $breakpoints-spec {
+        &-#{$break-point-name} {
+            @include res($break-point-name, $breakpoints-spec) {
+                display: none !important;
+            }
+        }
+    }
+}

package/theme-chalk/form/index.scss

@@ -221,11 +221,23 @@ $--gorup-item-width: 400px;
     }
 
     &.is-required {
-        .#{$namespace}-form-item__label::before {
+        &:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before,
+        &:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label:before {
             content: '*';
-            color: var(--#{$namespace}-color-error);
+            color: var(--el-color-danger);
             margin-right: 4px;
         }
+
+        &:not(.is-no-asterisk).asterisk-right > .el-form-item__label:after,
+        &:not(.is-no-asterisk).asterisk-right > .el-form-item__label-wrap > .el-form-item__label:after {
+            content: '*';
+            color: var(--el-color-danger);
+            margin-left: 4px;
+        }
+    }
+
+    &.#{$namespace}-form-item--label-top {
+        display: block;
     }
 }
 
@@ -357,3 +369,10 @@ $--gorup-item-width: 400px;
         margin-left: 10px;
     }
 }
+
+.#{$namespace}-form-item__nostyle {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    line-height: 0;
+}