@aloudata/aloudata-design 0.1.0-beta1 → 0.2.0-beta.3

package/es/Dropdown/demo/button/index.js

@@ -0,0 +1,159 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
+import Icon from '../../../Icon';
+import Radio from 'antd/lib/radio';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+import './index.less';
+var DropdownButton = Dropdown.Button;
+export default (function () {
+  var _useState = useState('default'),
+      _useState2 = _slicedToArray(_useState, 2),
+      size = _useState2[0],
+      setSize = _useState2[1];
+
+  var _useState3 = useState('primary'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      type = _useState4[0],
+      setType = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      disabled = _useState6[0],
+      setDisabled = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isIcon = _useState8[0],
+      setIsIcon = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      loading = _useState10[0],
+      setLoading = _useState10[1];
+
+  var _useState11 = useState('bottomLeft'),
+      _useState12 = _slicedToArray(_useState11, 2),
+      placement = _useState12[0],
+      setPlacement = _useState12[1];
+
+  var menu = /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Item, {
+    key: "1"
+  }, "1st menu item"), /*#__PURE__*/React.createElement(Menu.Item, {
+    key: "2"
+  }, "2nd menu item"), /*#__PURE__*/React.createElement(Menu.Item, {
+    key: "3"
+  }, "3rd menu item, long long content"));
+
+  function onChangeValue(setCallback) {
+    return function (e) {
+      return setCallback(e.target.value);
+    };
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "demo-dropdown-button"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "type:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: type,
+    onChange: onChangeValue(setType)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "primary"
+  }, "primary"), /*#__PURE__*/React.createElement(Radio, {
+    value: "secondary"
+  }, "secondary"), /*#__PURE__*/React.createElement(Radio, {
+    value: "danger"
+  }, "danger"), /*#__PURE__*/React.createElement(Radio, {
+    value: "text"
+  }, "text"), /*#__PURE__*/React.createElement(Radio, {
+    value: "link"
+  }, "link"))), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "size:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: size,
+    onChange: onChangeValue(setSize)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "large"
+  }, "large"), /*#__PURE__*/React.createElement(Radio, {
+    value: "default"
+  }, "default"), /*#__PURE__*/React.createElement(Radio, {
+    value: "small"
+  }, "small"))), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "disabled:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: disabled,
+    onChange: onChangeValue(setDisabled)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: true
+  }, "true"), /*#__PURE__*/React.createElement(Radio, {
+    value: false
+  }, "false"))), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "icon button:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: isIcon,
+    onChange: onChangeValue(setIsIcon)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: true
+  }, "icon button"), /*#__PURE__*/React.createElement(Radio, {
+    value: false
+  }, "not icon button"))), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "loading:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: loading,
+    onChange: onChangeValue(setLoading)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: true
+  }, "loading"), /*#__PURE__*/React.createElement(Radio, {
+    value: false
+  }, "not loading"))), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "placement:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: placement,
+    onChange: onChangeValue(setPlacement)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "bottomLeft"
+  }, "bottomLeft"), /*#__PURE__*/React.createElement(Radio, {
+    value: "bottomCenter"
+  }, "bottomCenter"), /*#__PURE__*/React.createElement(Radio, {
+    value: "bottomRight"
+  }, "bottomRight"), /*#__PURE__*/React.createElement(Radio, {
+    value: "topLeft"
+  }, "topLeft"), /*#__PURE__*/React.createElement(Radio, {
+    value: "topCenter"
+  }, "topCenter"), /*#__PURE__*/React.createElement(Radio, {
+    value: "topRight"
+  }, "topRight")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropdownButton, {
+    overlay: menu,
+    icon: isIcon && /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow_drop_down"
+    }),
+    loading: loading,
+    disabled: disabled,
+    size: size,
+    type: type,
+    placement: placement
+  }, isIcon ? null : 'Button Content')));
+});

package/es/Dropdown/demo/placement/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/Dropdown/demo/placement/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Button from 'antd/lib/button';
+import Space from 'antd/lib/space';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+var menu = /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Item, {
+  key: 1
+}, "1st menu item"), /*#__PURE__*/React.createElement(Menu.Item, {
+  key: 2
+}, "2nd menu item"), /*#__PURE__*/React.createElement(Menu.Item, {
+  key: 3
+}, "3rd menu item"));
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "demo-dropdown-placement"
+  }, /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical"
+  }, /*#__PURE__*/React.createElement(Space, {
+    wrap: true
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "bottomLeft"
+  }, /*#__PURE__*/React.createElement(Button, null, "bottomLeft")), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "bottomCenter"
+  }, /*#__PURE__*/React.createElement(Button, null, "bottomCenter")), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "bottomRight"
+  }, /*#__PURE__*/React.createElement(Button, null, "bottomRight"))), /*#__PURE__*/React.createElement(Space, {
+    wrap: true
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "topLeft"
+  }, /*#__PURE__*/React.createElement(Button, null, "topLeft")), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "topCenter"
+  }, /*#__PURE__*/React.createElement(Button, null, "topCenter")), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "topRight"
+  }, /*#__PURE__*/React.createElement(Button, null, "topRight")))));
+});

package/es/Dropdown/demo/subMenu/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/Dropdown/demo/subMenu/index.js

@@ -0,0 +1,42 @@
+import "antd/es/message/style";
+import _message from "antd/es/message";
+import React from 'react';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+var MenuItem = Menu.Item;
+var SubMenu = Menu.SubMenu;
+var MenuDivider = Menu.Divider;
+export default (function () {
+  var menu = /*#__PURE__*/React.createElement(Menu, {
+    onClick: function onClick(info) {
+      _message.info("Click on menu item ".concat(info.key));
+    }
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    key: 1
+  }, "1st menu item"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 2,
+    disabled: true
+  }, "2nd menu item"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 3
+  }, "3nd menu item"), /*#__PURE__*/React.createElement(MenuDivider, null), /*#__PURE__*/React.createElement(SubMenu, {
+    key: 4,
+    title: "sub menu"
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    key: 5
+  }, "Sub menu item5"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 6
+  }, "Sub menu item6Sub menu item6Sub menu item6Sub menu item6"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 7
+  }, "Sub menu item7"), /*#__PURE__*/React.createElement(SubMenu, {
+    key: 8,
+    title: "sub menu"
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    key: 9
+  }, "Sub menu item9"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 10
+  }, "Sub menu item10"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 11
+  }, "Sub menu item11"))));
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu
+  }, /*#__PURE__*/React.createElement("span", null, "Hover me"));
+});

package/es/Dropdown/demo/trigger/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/Dropdown/demo/trigger/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+var MenuItem = Menu.Item;
+export default (function () {
+  var menu = /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
+    key: 1
+  }, "1st menu item"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 2,
+    disabled: true
+  }, "2nd menu item"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 3
+  }, "3nd menu item"));
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    trigger: ['click']
+  }, /*#__PURE__*/React.createElement("span", null, "Click me"));
+});

package/es/Dropdown/index.d.ts

@@ -0,0 +1,59 @@
+import React, { ReactElement } from 'react';
+import DropdownButton from './Button';
+import './style';
+export declare type ActionType = 'hover' | 'click' | 'contextMenu';
+export interface IDropdownProps {
+    /**
+     * @description 关闭后是否销毁Dropdown
+     * @default false
+     */
+    destroyPopupOnHide?: boolean;
+    /**
+     * @description 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位
+     * @default () => document.body
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    /**
+     * @description 菜单
+     * @type Menu | () => Menu
+     * @default -
+     */
+    overlay: ReactElement | (() => ReactElement);
+    /**
+     * @description 下拉根元素的类名称
+     * @default -
+     */
+    overlayClassName?: string;
+    /**
+     * @description 菜单弹出位置
+     * @default bottomLeft
+     */
+    placement?: 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
+    /**
+     * @description 触发下拉的行为
+     * @type ActionType[], 其中 ActionType 为 'hover' | 'click' | 'contextMenu';
+     * @default [hover]
+     */
+    trigger?: ActionType[];
+    /**
+     * @description 菜单是否显示
+     * @default -
+     */
+    visible?: boolean;
+    /**
+     * @description 菜单显示状态改变时调用，参数为 visible，点击菜单按钮导致的消失不会触发
+     * @default -
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    children?: React.ReactNode;
+    /**
+     * @description 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare function Dropdown(props: IDropdownProps): JSX.Element;
+declare namespace Dropdown {
+    var Button: typeof DropdownButton;
+}
+export default Dropdown;

package/es/Dropdown/index.js

@@ -0,0 +1,33 @@
+import "antd/es/dropdown/style";
+import _Dropdown from "antd/es/dropdown";
+var _excluded = ["children", "visible"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+// eslint-disable-next-line import/no-cycle
+import DropdownButton from './Button';
+import './style';
+export default function Dropdown(props) {
+  var children = props.children,
+      visible = props.visible,
+      otherProps = _objectWithoutProperties(props, _excluded); // antd根据visible字段是否存在来判断visible是否是可控模式
+
+
+  var antdDropdownProps = otherProps;
+
+  if (visible !== undefined) {
+    antdDropdownProps.visible = visible;
+  }
+
+  return /*#__PURE__*/React.createElement(_Dropdown, _objectSpread({}, antdDropdownProps), children);
+}
+Dropdown.Button = DropdownButton;

package/es/Dropdown/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/es/Dropdown/style/index.js

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/es/Empty/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './style';
+interface IEmptyProps {
+    description?: string;
+    children?: React.ReactNode;
+}
+declare const _default: ({ description, children }: IEmptyProps) => JSX.Element;
+export default _default;

package/es/Empty/index.js

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import React from 'react';
+import usePrefixCls from '../_utils/hooks/usePrefixCls';
+import './style';
+export default (function (_ref) {
+  var description = _ref.description,
+      children = _ref.children;
+  var prefixCls = usePrefixCls('empty');
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefixCls
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "75",
+    height: "79",
+    viewBox: "0 0 75 79",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M37.4999 78.9999C58.2106 78.9999 74.9999 62.2106 74.9999 41.4999C74.9999\n           20.7893 58.2106 4 37.4999 4C16.7893 4 0 20.7893 0 41.4999C0 62.2106 16.7893 78.9999 37.4999 78.9999Z",
+    fill: "#EBF3FF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M58.9999 25.5H16C14.6193 25.5 13.5 26.5414 13.5 27.8261V76.6738C13.5\n          77.9585 14.6193 78.9999 16 78.9999H58.9999C60.3806 78.9999 61.4999\n          77.9585 61.4999 76.6738V27.8261C61.4999 26.5414 60.3806 25.5 58.9999 25.5Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M32.5 33H19.5C18.6716 33 18 33.6716 18 34.5C18 35.3284 18.6716 36 19.5\n           36H32.5C33.3284 36 34 35.3284 34 34.5C34 33.6716 33.3284 33 32.5 33Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M41.5 39.5H19.5C18.6716 39.5 18 40.1716 18 41C18 41.8284 18.6716 42.5\n          19.5 42.5H41.5C42.3284 42.5 43 41.8284 43 41C43 40.1716 42.3284 39.5 41.5 39.5Z",
+    fill: "#F3F8FF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M32.5 46.5H19.5C18.6716 46.5 18 47.1716 18 48C18 48.8284 18.6716 49.5\n          19.5 49.5H32.5C33.3284 49.5 34 48.8284 34 48C34 47.1716 33.3284 46.5 32.5 46.5Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M41.5 53H19.5C18.6716 53 18 53.6716 18 54.5C18 55.3284 18.6716 56 19.5\n          56H41.5C42.3284 56 43 55.3284 43 54.5C43 53.6716 42.3284 53 41.5 53Z",
+    fill: "#F3F8FF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M32.5 60H19.5C18.6716 60 18 60.6716 18 61.5C18 62.3284 18.6716 63 19.5\n           63H32.5C33.3284 63 34 62.3284 34 61.5C34 60.6716 33.3284 60 32.5 60Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M41.5 66.5H19.5C18.6716 66.5 18 67.1716 18 68C18 68.8284 18.6716 69.5\n           19.5 69.5H41.5C42.3284 69.5 43 68.8284 43 68C43 67.1716 42.3284 66.5 41.5 66.5Z",
+    fill: "#F3F8FF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M58.9998 0H15.9999C14.6192 0 13.4999 1.11929 13.4999 2.5V17.5C13.4999\n           18.8807 14.6192 20 15.9999 20H58.9998C60.3805 20 61.4998 18.8807 61.4998\n            17.5V2.5C61.4998 1.11929 60.3805 0 58.9998 0Z",
+    fill: "#A0B5D5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M32.5 5.49902H19.5C18.6716 5.49902 18 6.1706 18 6.99902C18 7.82745\n          18.6716 8.49902 19.5 8.49902H32.5C33.3284 8.49902 34 7.82745 34 6.99902C34 6.1706 33.3284 5.49902 32.5 5.49902Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M41.5 12H19.5C18.6716 12 18 12.6716 18 13.5C18 14.3284 18.6716 15\n           19.5 15H41.5C42.3284 15 43 14.3284 43 13.5C43 12.6716 42.3284 12 41.5 12Z",
+    fill: "white"
+  })), description && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-description")
+  }, description), children && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-footer")
+  }, children)));
+});

package/es/Empty/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/Empty/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/es/Empty/style/index.less

@@ -0,0 +1,23 @@
+@import '../../style/index.less';
+
+@ald-prefix:ant;
+@ald-iconfont-css-prefix:anticon;
+.@{ald-prefix}-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 46px 0;
+  height: 100%;
+
+  &-content {
+    text-align: center;
+  }
+
+  &-description {
+    font-size: 12px;
+    font-weight: 500;
+    color: @NL0;
+    text-align: center;
+    line-height: 16px;
+  }
+}

package/{src → es}/Icon/iconfont/demo_index.html

@@ -56,6 +56,30 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">sort_descending</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">sort_ascending</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63d;</span>
+                <div class="name">more_vert</div>
+                <div class="code-name">&amp;#xe63d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">check</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe616;</span>
                 <div class="name">cancel</div>
@@ -189,9 +213,9 @@
 >@font-face {
   font-family: 'iconfont';
   src: 
-       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-       url('iconfont.woff?t=1646214023180') format('woff'),
-       url('iconfont.ttf?t=1646214023180') format('truetype');
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+       url('iconfont.woff?t=1648447992265') format('woff'),
+       url('iconfont.ttf?t=1648447992265') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -217,6 +241,42 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont sort_descending"></span>
+            <div class="name">
+              sort_descending
+            </div>
+            <div class="code-name">.sort_descending
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont sort_ascending"></span>
+            <div class="name">
+              sort_ascending
+            </div>
+            <div class="code-name">.sort_ascending
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont more_vert"></span>
+            <div class="name">
+              more_vert
+            </div>
+            <div class="code-name">.more_vert
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont check"></span>
+            <div class="name">
+              check
+            </div>
+            <div class="code-name">.check
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont cancel"></span>
             <div class="name">
@@ -415,6 +475,38 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#sort_descending"></use>
+                </svg>
+                <div class="name">sort_descending</div>
+                <div class="code-name">#sort_descending</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#sort_ascending"></use>
+                </svg>
+                <div class="name">sort_ascending</div>
+                <div class="code-name">#sort_ascending</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#more_vert"></use>
+                </svg>
+                <div class="name">more_vert</div>
+                <div class="code-name">#more_vert</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#check"></use>
+                </svg>
+                <div class="name">check</div>
+                <div class="code-name">#check</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#cancel"></use>