@bifrostui/react 1.0.5 → 1.1.5

package/es/CitySelector/CitySelector.less

@@ -0,0 +1,122 @@
+@import '~@bifrostui/styles/mixins/index.less';
+
+.bui-city-selector {
+  font-family: var(--bui-font-family);
+  height: 100%;
+  position: relative;
+
+  &-title {
+    width: 100%;
+    height: 45px;
+    color: var(--bui-color-fg-default);
+    font-size: var(--bui-title-size-3);
+    line-height: 45px;
+    text-align: center;
+    position: sticky;
+    top: 0;
+    z-index: 1004;
+    border-bottom: solid 1px var(--bui-color-border-default);
+    background-color: var(--bui-color-bg-view);
+  }
+
+  &-btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 45px;
+    height: 45px;
+    color: var(--bui-color-fg-muted);
+    text-align: center;
+    font-size: 20px;
+  }
+
+  &-scroll-view-container {
+    height: 100%;
+
+    &.container-has-title {
+      height: calc(100% - 45px);
+    }
+  }
+
+  &-all-city {
+    min-height: 500px;
+    font-size: var(--bui-text-size-2);
+    width: 100%;
+    background: var(--bui-color-bg-view);
+    align-self: flex-start;
+
+    .select-city-buttons {
+      display: flex;
+      flex-flow: wrap;
+      padding-left: 3px;
+      padding-top: 7.5px;
+    }
+
+    .select-city-title {
+      font-size: var(--bui-title-size-4);
+      line-height: 15px;
+      font-weight: 600;
+      padding-left: var(--bui-spacing-lg);
+      padding-top: 9px;
+    }
+  }
+
+  &-list {
+    padding-left: var(--bui-spacing-lg);
+    list-style-type: none;
+  }
+
+  &-list-item {
+    height: 45px;
+    font-size: var(--bui-title-size-4);
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child) {
+      border-bottom: 0.5px solid var(--bui-color-border-default);
+    }
+  }
+
+  &-index-container {
+    z-index: 1001;
+    position: absolute;
+    white-space: nowrap;
+    right: 0;
+    top: 50%;
+    width: 40px;
+    will-change: transform;
+    // transform: translate(100%, -50%);
+    transform: translate(0, -50%);
+    transition:
+      opacity 0.2s ease-out,
+      transform 0.2s ease-out;
+
+    &.left-in {
+      opacity: 1;
+      transform: translate(0, -50%);
+    }
+
+    &.city-index-has-title {
+      top: calc(50% + 22.5px);
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      float: left;
+      width: 100%;
+      touch-action: none;
+    }
+
+    li {
+      list-style: none;
+      height: 20px;
+      text-align: center;
+      font-size: var(--bui-text-size-3);
+      color: var(--bui-color-info, --bui-color-info);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/es/CitySelector/CitySelector.miniapp.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CitySelectorProps } from './CitySelector.types';
+import './miniapp.less';
+declare const CitySelector: React.ForwardRefExoticComponent<Omit<CitySelectorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default CitySelector;

package/es/CitySelector/CitySelector.miniapp.js

@@ -0,0 +1,77 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect, useRef, useState } from 'react';
+import Taro from '@tarojs/taro';
+import CitySelectorCore from "./CitySelectorCore";
+import "./miniapp.css";
+var CitySelector = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var cities = props.cities;
+  var containerTop = useRef(0);
+  var codeHeight = useRef(0);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var queryContainerTop = function queryContainerTop(cbk) {
+    var query = Taro.createSelectorQuery();
+    query.select('.bui-city-selector-index-container').boundingClientRect();
+    query.exec(function (res) {
+      var _res$;
+      containerTop.current = (_res$ = res[0]) === null || _res$ === void 0 ? void 0 : _res$.top;
+      cbk === null || cbk === void 0 || cbk();
+    });
+  };
+  useEffect(function () {
+    if ((cities === null || cities === void 0 ? void 0 : cities.length) === 0 || codeHeight.current) return;
+    // 演示获取字母高度
+    setTimeout(function () {
+      var query = Taro.createSelectorQuery();
+      query.select('.bui-city-selector-index-item').boundingClientRect();
+      query.exec(function (res) {
+        var _res$2;
+        codeHeight.current = (_res$2 = res[0]) === null || _res$2 === void 0 ? void 0 : _res$2.height;
+      });
+    }, 300);
+  }, [cities, height]);
+  useEffect(function () {
+    if (!(cities !== null && cities !== void 0 && cities.length) || height) return;
+    var _Taro$getSystemInfoSy = Taro.getSystemInfoSync(),
+      screenHeight = _Taro$getSystemInfoSy.screenHeight;
+    var query = Taro.createSelectorQuery();
+    query.select('.bui-city-selector-scroll-view-container').boundingClientRect();
+    query.exec(function (codeRect) {
+      var _codeRect$;
+      var domHeight = codeRect === null || codeRect === void 0 || (_codeRect$ = codeRect[0]) === null || _codeRect$ === void 0 ? void 0 : _codeRect$.height;
+      setHeight("".concat(domHeight / screenHeight * 100, "vh"));
+    });
+  }, [cities]);
+  var parseIndex = function parseIndex(length, index) {
+    if (index <= 0) return 0;
+    if (index >= length - 1) return length - 1;
+    return index;
+  };
+  var pxToCode = function pxToCode(clientY, scrollToCode, codeGroup) {
+    var index = Math.floor((clientY - containerTop.current) / codeHeight.current);
+    index = parseIndex(codeGroup.length, index);
+    var codeItem = codeGroup[index];
+    scrollToCode(codeItem.code || codeItem);
+  };
+  var touchHandler = function touchHandler(event, scrollToCode, codeGroup) {
+    var clientY = event.changedTouches[0].clientY;
+    queryContainerTop(function () {
+      pxToCode(clientY, scrollToCode, codeGroup);
+    });
+  };
+  return /*#__PURE__*/React.createElement(CitySelectorCore, _extends({}, props, {
+    ref: ref,
+    touchHandler: touchHandler,
+    height: height
+  }));
+});
+CitySelector.displayName = 'BuiCitySelector';
+export default CitySelector;

package/es/CitySelector/CitySelector.types.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { OverrideProps } from '@bifrostui/types';
+export type cityType = {
+    /** 城市名 */
+    name: string;
+    /** 城市名id */
+    code: string;
+};
+export type allCityItemType = {
+    /** 城市列表 */
+    cities: cityType[];
+    /** 索引字母 */
+    groupName: string;
+};
+export type CitySelectorProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /** 当前城市信息 */
+        selectedCity?: cityType;
+        /** 当前城市栏的title */
+        selectedCityGroupName?: string;
+        /** 定位城市信息 */
+        currentCity?: cityType;
+        /** 定位城市栏的title */
+        currentCityGroupName?: string;
+        /** 热门城市信息 */
+        hotCities?: cityType[];
+        /** 热门城市栏的title */
+        hotCitiesGroupName?: string;
+        /** 城市列表 */
+        cities: allCityItemType[];
+        /** 禁用展示索引 默认false 即展示索引 */
+        disableIndex?: boolean;
+        /** 头部标题 */
+        title?: string;
+        /** 选择城市回调 */
+        onSelect: (e: React.SyntheticEvent, data: {
+            city: cityType;
+        }) => void;
+        /** 和title配合使用，头部右侧的关闭回调 */
+        onClose?: (e: React.SyntheticEvent) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export type CitySelectorCoreProps = CitySelectorProps & {
+    touchHandler: any;
+    height?: string;
+};

package/es/CitySelector/CitySelector.types.js

@@ -0,0 +1 @@
+export {};

package/es/CitySelector/CitySelectorCore.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CitySelectorCoreProps } from './CitySelector.types';
+import './CitySelector.less';
+declare const CitySelector: React.ForwardRefExoticComponent<Omit<CitySelectorCoreProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default CitySelector;

package/es/CitySelector/CitySelectorCore.js

@@ -0,0 +1,194 @@
+var _excluded = ["className", "title", "selectedCity", "selectedCityGroupName", "currentCity", "currentCityGroupName", "hotCities", "hotCitiesGroupName", "cities", "disableIndex", "touchHandler", "height", "onSelect", "onClose"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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, { useState, useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { throttle, useForkRef, useTouchEmulator } from '@bifrostui/utils';
+import { ScrollView } from "../ScrollView";
+import Selector from "./Selector";
+import "./CitySelector.css";
+
+// 误差偏移量
+var DEVIATION_HEIGHT = '6vmin';
+var GPS_TYPE = {
+  title: '定位',
+  code: 'GPS'
+};
+var CURRENT_TYPE = {
+  title: '当前',
+  code: 'CRRT'
+};
+var HOT_CITY_TYPE = {
+  title: '热门',
+  code: 'HOT'
+};
+var prefixCls = 'bui-city-selector';
+var CitySelector = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    pageTitle = props.title,
+    selectedCity = props.selectedCity,
+    _props$selectedCityGr = props.selectedCityGroupName,
+    selectedCityGroupName = _props$selectedCityGr === void 0 ? '当前城市' : _props$selectedCityGr,
+    currentCity = props.currentCity,
+    _props$currentCityGro = props.currentCityGroupName,
+    currentCityGroupName = _props$currentCityGro === void 0 ? '定位城市' : _props$currentCityGro,
+    hotCities = props.hotCities,
+    _props$hotCitiesGroup = props.hotCitiesGroupName,
+    hotCitiesGroupName = _props$hotCitiesGroup === void 0 ? '热门城市' : _props$hotCitiesGroup,
+    cities = props.cities,
+    disableIndex = props.disableIndex,
+    touchHandler = props.touchHandler,
+    height = props.height,
+    onSelect = props.onSelect,
+    onClose = props.onClose,
+    others = _objectWithoutProperties(props, _excluded);
+  var cityRef = useRef(null);
+  var nodeRef = useForkRef(ref, cityRef);
+  useTouchEmulator(cityRef.current);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    codeGroup = _useState2[0],
+    setCodeGroup = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    codeShow = _useState4[0],
+    setCodeShow = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    targetId = _useState6[0],
+    setTargetId = _useState6[1];
+
+  // 提取字母
+  useEffect(function () {
+    if (!cities || (cities === null || cities === void 0 ? void 0 : cities.length) === 0 || codeGroup.length !== 0 || disableIndex) return;
+    var newGroup = [];
+    if (selectedCity) {
+      newGroup.push(CURRENT_TYPE);
+    }
+    if (currentCity) {
+      newGroup.push(GPS_TYPE);
+    }
+    if (hotCities) {
+      newGroup.push(HOT_CITY_TYPE);
+    }
+    cities.forEach(function (item) {
+      newGroup.push(item.groupName.toUpperCase());
+    });
+    setCodeGroup(newGroup);
+  }, [cities, selectedCity, currentCity, hotCities]);
+
+  // 计算每个code的top
+  useEffect(function () {
+    if (codeGroup.length === 0) return;
+    setCodeShow(true);
+  }, [codeGroup]);
+  var selectHandler = function selectHandler(e, city) {
+    onSelect(e, {
+      city: city
+    });
+  };
+  var scrollToCode = function scrollToCode(targetCode) {
+    if (!targetCode) return;
+    setTargetId(function (oldCode) {
+      if (targetCode !== oldCode) return targetCode;
+      return oldCode;
+    });
+  };
+  var touchCbk = function touchCbk(e) {
+    e.stopPropagation();
+    touchHandler === null || touchHandler === void 0 || touchHandler(e, scrollToCode, codeGroup);
+  };
+  var codeClickHandler = function codeClickHandler(rightCode) {
+    setTargetId(rightCode);
+  };
+  var scrollHandler = throttle(function () {
+    if (targetId) {
+      setTargetId(undefined);
+    }
+  }, 500);
+  var closeHandler = function closeHandler(e) {
+    onClose === null || onClose === void 0 || onClose(e);
+  };
+  var renderTitile = function renderTitile(title, titleCode) {
+    var parseTitle = (titleCode || title).toUpperCase();
+    return /*#__PURE__*/React.createElement("div", {
+      className: "select-city-title",
+      id: disableIndex ? '' : parseTitle
+    }, title.toUpperCase());
+  };
+  var renderCity = function renderCity(citys, title, titleCode) {
+    return /*#__PURE__*/React.createElement("div", null, renderTitile(title, titleCode), /*#__PURE__*/React.createElement("div", {
+      className: "select-city-buttons"
+    }, citys.map(function (city, index) {
+      return /*#__PURE__*/React.createElement(Selector, {
+        key: index,
+        city: city,
+        onSelect: selectHandler
+      });
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx(prefixCls, className),
+    ref: nodeRef
+  }, others), pageTitle ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title")
+  }, pageTitle, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-btn-close"),
+    onClick: closeHandler
+  }, "\u2715")) : null, /*#__PURE__*/React.createElement(ScrollView, {
+    scrollIntoView: targetId,
+    scrollY: true,
+    className: clsx("".concat(prefixCls, "-scroll-view-container tph"), {
+      'container-has-title': pageTitle
+    }),
+    onScroll: scrollHandler
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-all-city")
+  }, selectedCity ? renderCity([selectedCity], selectedCityGroupName, CURRENT_TYPE.code) : null, currentCity ? renderCity([currentCity], currentCityGroupName, GPS_TYPE.code) : null, (hotCities === null || hotCities === void 0 ? void 0 : hotCities.length) > 0 ? renderCity(hotCities, hotCitiesGroupName, HOT_CITY_TYPE.code) : null, (cities === null || cities === void 0 ? void 0 : cities.length) > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-list-container")
+  }, cities.map(function (item, cityGroupIndex) {
+    if (!(item !== null && item !== void 0 && item.groupName)) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      key: cityGroupIndex
+    }, renderTitile(item.groupName, item.groupName), /*#__PURE__*/React.createElement("ul", {
+      className: "".concat(prefixCls, "-list")
+    }, item.cities.map(function (city, cityIndex) {
+      return /*#__PURE__*/React.createElement("li", {
+        className: "".concat(prefixCls, "-list-item"),
+        key: cityIndex,
+        onClick: function onClick(e) {
+          selectHandler(e, city);
+        }
+      }, city.name);
+    })));
+  })) : null)), (codeGroup === null || codeGroup === void 0 ? void 0 : codeGroup.length) > 0 && height ? /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-index-container"), {
+      'left-in': codeShow,
+      'city-index-has-title': pageTitle
+    })
+  }, /*#__PURE__*/React.createElement("ul", {
+    onTouchMove: touchCbk,
+    className: "".concat(prefixCls, "-index-list")
+  }, codeGroup.map(function (item, chartIndex) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: "".concat(prefixCls, "-index-item"),
+      key: chartIndex,
+      "data-code": item.code || item,
+      onClick: function onClick() {
+        codeClickHandler(item.code || item);
+      },
+      style: {
+        maxHeight: "calc((".concat(height, " - ").concat(DEVIATION_HEIGHT, ") / ").concat(codeGroup.length, ")")
+      }
+    }, item.title || item);
+  }))) : null);
+});
+CitySelector.displayName = 'BuiCitySelector';
+export default CitySelector;

package/es/CitySelector/Selector/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { cityType } from '../CitySelector.types';
+import './index.less';
+type propsType = {
+    city: cityType;
+    onSelect: (e: React.SyntheticEvent, city: cityType) => void;
+};
+declare const Selector: (props: propsType) => React.JSX.Element;
+export default Selector;

package/es/CitySelector/Selector/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import "./index.css";
+var Selector = function Selector(props) {
+  var city = props.city,
+    onSelect = props.onSelect;
+  return /*#__PURE__*/React.createElement("span", {
+    className: "bui-city-selector-item",
+    onClick: function onClick(e) {
+      onSelect === null || onSelect === void 0 || onSelect(e, city);
+    }
+  }, city.name);
+};
+export default Selector;

package/es/CitySelector/Selector/index.less

@@ -0,0 +1,13 @@
+@import '~@bifrostui/styles/mixins/index.less';
+
+.bui-city-selector-item {
+  width: 111px;
+  height: 36px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  margin: 4.5px 0 4.5px 9px;
+  background-color: var(--bui-color-bg-default);
+  font-size: var(--bui-text-size-2);
+}

package/es/CitySelector/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CitySelector, default } from './CitySelector';
+export * from './CitySelector.types';

package/es/CitySelector/index.js

@@ -0,0 +1,2 @@
+export { default as CitySelector, default } from "./CitySelector";
+export * from "./CitySelector.types";

package/es/CitySelector/miniapp.less

@@ -0,0 +1,4 @@
+.bui-city-scroll-view-container {
+  height: 100%;
+  display: block;
+}

package/es/Countdown/Countdown.less

@@ -0,0 +1,39 @@
+@import '~@bifrostui/styles/mixins/index.less';
+
+.bui-countdown {
+  --font-size: var(--bui-countdown-font-size, var(--bui-text-size-1));
+  --color: var(--bui-countdown-color, var(--bui-color-fg-default));
+  --font-weight: var(
+    --bui-countdown-font-weight,
+    var(--bui-font-weight-normal)
+  );
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: var(--font-size);
+  color: var(--color);
+  font-weight: var(--font-weight);
+  font-family: var(--bui-font-family);
+
+  &-slice {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &-value {
+      font-family: 'Helvetica Neue', helvetica, 'PingFang SC', 'Chinese Quote',
+        'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei', arial,
+        sans-serif;
+    }
+
+    &-unit {
+      margin: 0 2px;
+    }
+  }
+}

package/es/Divider/Divider.less

@@ -0,0 +1,50 @@
+.bui-divider {
+  --height: var(--bui-divider-height, 100%);
+  --width: var(--bui-divider-width, 100%);
+
+  border-color: var(--bui-color-border-default);
+  font-family: var(--bui-font-family);
+
+  &-vertical {
+    height: var(--height);
+    display: inline-block;
+    border-right-width: 1px;
+    border-right-style: solid;
+  }
+
+  &-horizontal {
+    width: var(--width);
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+  }
+
+  &-vertical-dashed {
+    border-right-style: dashed;
+  }
+
+  &-horizontal-dashed {
+    border-bottom-style: dashed;
+  }
+
+  &-content {
+    width: 100%;
+    // border-width 设置border粗细
+    border-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-line {
+    width: 40px;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: var(--bui-color-border-default);
+  }
+
+  &-text {
+    flex-shrink: 0;
+    color: var(--bui-color-fg-subtle);
+    font-size: var(--bui-text-size-2);
+  }
+}

package/es/Drawer/Drawer.less

@@ -0,0 +1,40 @@
+.bui-drawer {
+  font-family: var(--bui-font-family);
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex: 1 0 auto;
+    position: fixed;
+    top: 0;
+    outline: 0;
+    background-color: var(--bui-color-bg-view);
+
+    &-left {
+      left: 0;
+    }
+
+    &-top {
+      top: 0;
+      left: 0;
+      right: 0;
+      height: auto;
+      max-height: 100%;
+    }
+
+    &-right {
+      right: 0;
+    }
+
+    &-bottom {
+      bottom: 0;
+      top: auto;
+      left: 0;
+      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+      right: 0;
+      height: auto;
+      max-height: 100%;
+    }
+  }
+}