@nickeylin/antd-mobile-pro 2.0.3 → 2.1.1

package/dist/cjs/components/pro-calendar-picker/pro-calendar-picker.js

@@ -0,0 +1,141 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pro-calendar-picker/pro-calendar-picker.tsx
+var pro_calendar_picker_exports = {};
+__export(pro_calendar_picker_exports, {
+  default: () => pro_calendar_picker_default
+});
+module.exports = __toCommonJS(pro_calendar_picker_exports);
+var import_ahooks = require("ahooks");
+var import_antd_mobile = require("antd-mobile");
+var import_antd_mobile_icons = require("antd-mobile-icons");
+var import_lodash = require("lodash");
+var import_react = require("react");
+var import_bem = require("../../utils/bem");
+var import_pro_calendar = __toESM(require("../pro-calendar"));
+var bem = (0, import_bem.cn)("calendar-picker");
+var ProCalendarPickerRaw = ({
+  children,
+  allowClear = false,
+  selectionMode = "single",
+  value: valueProp,
+  onChange,
+  ...props
+}, ref) => {
+  const [value, setValue] = (0, import_ahooks.useControllableValue)(
+    (0, import_lodash.pickBy)({
+      value: valueProp,
+      onChange
+    })
+  );
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const [tempValue, setTempValue] = (0, import_react.useState)(valueProp);
+  (0, import_react.useEffect)(() => {
+    if (visible)
+      setTempValue(value ?? null);
+  }, [value, visible]);
+  const calendarRef = (0, import_react.useRef)(null);
+  const action = (0, import_react.useMemo)(() => {
+    return {
+      ...calendarRef.current,
+      open() {
+        setVisible(true);
+      },
+      close() {
+        setVisible(false);
+      },
+      toggle() {
+        setVisible((v) => !v);
+      }
+    };
+  }, []);
+  (0, import_react.useImperativeHandle)(ref, () => action);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children == null ? void 0 : children(value, action), /* @__PURE__ */ React.createElement(
+    import_antd_mobile.Popup,
+    {
+      visible,
+      onClose: () => setVisible(false),
+      className: bem("popup"),
+      destroyOnClose: true
+    },
+    /* @__PURE__ */ React.createElement("div", { className: bem("popup-head") }, allowClear && /* @__PURE__ */ React.createElement(
+      import_antd_mobile.Button,
+      {
+        color: "default",
+        fill: "none",
+        size: "small",
+        className: bem("popup-head__clear"),
+        onClick: () => {
+          setValue(void 0);
+          setVisible(false);
+        }
+      },
+      "清除"
+    ), /* @__PURE__ */ React.createElement("div", { className: bem("popup-head__title") }, "日期选择"), /* @__PURE__ */ React.createElement(
+      import_antd_mobile.Button,
+      {
+        color: "default",
+        fill: "none",
+        size: "small",
+        className: bem("popup-head__close"),
+        onClick: () => {
+          setVisible(false);
+        }
+      },
+      /* @__PURE__ */ React.createElement(import_antd_mobile_icons.CloseOutline, null)
+    )),
+    /* @__PURE__ */ React.createElement(
+      import_pro_calendar.default,
+      {
+        selectionMode,
+        value: tempValue ?? null,
+        onChange: (v) => {
+          setTempValue(v);
+        },
+        ...props,
+        ref: calendarRef
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: bem("popup-footer") }, /* @__PURE__ */ React.createElement(
+      import_antd_mobile.Button,
+      {
+        block: true,
+        color: "primary",
+        onClick: () => {
+          console.log("setValue", tempValue);
+          setValue(tempValue);
+          setVisible(false);
+        }
+      },
+      "确定"
+    ), /* @__PURE__ */ React.createElement(import_antd_mobile.SafeArea, { position: "bottom" }))
+  ));
+};
+var ProCalendarPicker = (0, import_react.forwardRef)(ProCalendarPickerRaw);
+var pro_calendar_picker_default = ProCalendarPicker;

package/dist/cjs/components/pro-calendar-picker/style.less

@@ -0,0 +1,38 @@
+@import '../styles/variable.less';
+
+@class-prefix-pro-calendar-picker:~ '@{adm-pro-prefix}-calendar-picker';
+.@{class-prefix-pro-calendar-picker} {
+  &__popup-head {
+    font-size: var(--adm-font-size-9);
+    color: var(--adm-color-text);
+    position: relative;
+    border-bottom: 1px solid var(--adm-color-border);
+    margin-bottom: 10px;
+    & &__clear {
+      position: absolute;
+      left: 6px;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      padding: 6px 12px;
+      height: 30px;
+    }
+    &__title {
+      text-align: center;
+      line-height: 45px;
+    }
+    & &__close {
+      position: absolute;
+      right: 6px;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      padding: 6px 12px;
+      height: 30px;
+    }
+  }
+  &__popup-footer {
+    padding: var(--adm-padding-m) var(--adm-padding-l);
+    border-top: 1px solid var(--adm-color-border);
+  }
+}

package/dist/cjs/components/pro-form/pro-form-item-calendar-picker.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { ProCalendarPickerProps } from '../pro-calendar-picker';
 import { ProFormItemFieldProps } from './pro-form-item';
-export type ProFormCalendarPickerProps = ProFormItemFieldProps<ProCalendarPickerProps> & Pick<ProCalendarPickerProps, 'mode' | 'min' | 'max' | 'format'>;
+export type ProFormCalendarPickerProps = ProFormItemFieldProps<ProCalendarPickerProps> & Pick<ProCalendarPickerProps, 'selectionMode' | 'min' | 'max' | 'enableHalfDay'>;
 declare const ProFormCalendarPicker: FC<ProFormCalendarPickerProps>;
 export default ProFormCalendarPicker;

package/dist/cjs/components/pro-form/pro-form-item-calendar-picker.js

@@ -33,6 +33,7 @@ __export(pro_form_item_calendar_picker_exports, {
 });
 module.exports = __toCommonJS(pro_form_item_calendar_picker_exports);
 var import_config_provider = require("../config-provider");
+var import_pro_calendar = __toESM(require("../pro-calendar"));
 var import_pro_calendar_picker = __toESM(require("../pro-calendar-picker"));
 var import_pro_form_item = __toESM(require("./pro-form-item"));
 var import_utils = require("./utils");
@@ -41,20 +42,25 @@ var ProFormCalendarPicker = (p) => {
   const {
     fieldProps,
     placeholder = locale.common.selectPlaceholder,
-    mode,
+    selectionMode,
     min,
     max,
-    format,
+    enableHalfDay,
     onClick,
     ...props
   } = p;
-  const calendarProps = { mode, min, max, format, ...fieldProps };
+  const calendarProps = {
+    selectionMode,
+    min,
+    max,
+    enableHalfDay,
+    ...fieldProps
+  };
   const readonly = (0, import_utils.useReadonly)(props);
   return /* @__PURE__ */ React.createElement(
     import_pro_form_item.default,
     {
       ...props,
-      trigger: "onConfirm",
       onClick: (e, pickerRef) => {
         var _a;
         (_a = pickerRef.current) == null ? void 0 : _a.open();
@@ -62,12 +68,12 @@ var ProFormCalendarPicker = (p) => {
       }
     },
     /* @__PURE__ */ React.createElement(import_pro_calendar_picker.default, { ...calendarProps }, (val) => {
-      const value = Array.isArray(val) ? val.join("~") : val;
+      const value = import_pro_calendar.default.defaultFormat(val);
       return /* @__PURE__ */ React.createElement(
         import_pro_form_item.ProFormItemValue,
         {
           placeholder,
-          value: value ?? void 0,
+          value: value || void 0,
           readonly
         }
       );

package/dist/cjs/components/pro-list/pro-list.d.ts

@@ -10,7 +10,8 @@ export interface ProListPaginationProps {
     /** 页码，从1开始 */
     pageIndex?: number;
 }
-type ProListCustomRequestParams<U> = Service.FindByPage.RequestParams & {
+type ProListCustomRequestParams<U> = {
+    keyword?: string;
     pageInfo?: {
         page: number;
         rows: number;

package/dist/cjs/components/styles/global.less

@@ -1,3 +1,9 @@
 html[data-prefers-color-scheme='dark'] {
   --adm-tabbar-background-color: var(--adm-color-background);
 }
+
+:root {
+  --adm-padding-s: 4px;
+  --adm-padding-m: 8px;
+  --adm-padding-l: 12px;
+}

package/dist/cjs/components/tree-picker/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import prompt from './prompt';
 import './tree-picker.less';
-declare const TreePicker: (<T extends import("..").TreeDataNode<object> = import("..").TreeDataNode<object>>(props: Omit<import("..").PopupPickerMixinProps<T | T[]>, "fieldNames"> & Pick<import("..").TreeProps<T>, "search" | "fieldNames" | "request" | "params" | "rowKey" | "dataSource"> & {
+declare const TreePicker: (<T extends import("..").TreeDataNode<object> = import("..").TreeDataNode<object>>(props: Omit<import("..").PopupPickerMixinProps<T | T[]>, "fieldNames"> & Pick<import("..").TreeProps<T>, "search" | "params" | "request" | "rowKey" | "fieldNames" | "dataSource"> & {
     treeProps?: Omit<import("..").TreeProps<T>, "rowKey"> | undefined;
     multiple?: boolean | undefined;
 } & {

package/dist/cjs/components/tree-picker/tree-picker.d.ts

@@ -9,7 +9,7 @@ export type TreePickerProps<T extends TreeDataNode<object> = TreeDataNode<object
      */
     multiple?: boolean;
 } & NativeProps;
-declare const TreePicker: <T extends TreeDataNode<object> = TreeDataNode<object>>(props: Omit<PopupPickerMixinProps<T | T[]>, "fieldNames"> & Pick<TreeProps<T>, "search" | "fieldNames" | "request" | "params" | "rowKey" | "dataSource"> & {
+declare const TreePicker: <T extends TreeDataNode<object> = TreeDataNode<object>>(props: Omit<PopupPickerMixinProps<T | T[]>, "fieldNames"> & Pick<TreeProps<T>, "search" | "params" | "request" | "rowKey" | "fieldNames" | "dataSource"> & {
     treeProps?: Omit<TreeProps<T>, "rowKey"> | undefined;
     /**
      * 启用多选时，将启用复选框禁用选择，即点击整行会选中复选框

package/dist/cjs/locales/base.d.ts

@@ -12,6 +12,7 @@ declare const base: {
         confirm: string;
         start: string;
         end: string;
+        startAndEnd: string;
         today: string;
         markItems: string[];
         yearAndMonth: string;
@@ -112,6 +113,9 @@ declare const base: {
     Modal: {
         ok: string;
     };
+    NumberKeyboard: {
+        backspace: string;
+    };
     PasscodeInput: {
         name: string;
     };

package/dist/cjs/locales/en-US.d.ts

@@ -11,6 +11,7 @@ declare const enUS: {
         confirm: string;
         start: string;
         end: string;
+        startAndEnd: string;
         today: string;
         markItems: string[];
         yearAndMonth: string;
@@ -111,6 +112,9 @@ declare const enUS: {
     Modal: {
         ok: string;
     };
+    NumberKeyboard: {
+        backspace: string;
+    };
     PasscodeInput: {
         name: string;
     };

package/dist/es/components/index.d.ts

@@ -19,6 +19,7 @@ export { default as Money, type MoneyProps } from './money';
 export { default as Page, type PageBodyProps, type PageFooterProps, type PageProps, type PageToolbarProps, } from './page';
 export { default as PopupPage, type PopupPageProps } from './popup-page';
 export { createPopupPickerPrompt, usePopupPickerMixin, type PopupPickerActions, type PopupPickerMixinProps, } from './popup-picker-base';
+export { default as ProCalendar, type ProCalendarDate, type ProCalendarProps, } from './pro-calendar';
 export { default as ProCalendarPicker, type ProCalendarPickerActions, type ProCalendarPickerProps, } from './pro-calendar-picker';
 export * from './pro-form';
 export { default as ProList, type ProListAction, type ProListPaginationProps, type ProListProps, } from './pro-list';

package/dist/es/components/index.js

@@ -19,6 +19,7 @@ export { default as Money } from "./money";
 export { default as Page } from "./page";
 export { default as PopupPage } from "./popup-page";
 export { createPopupPickerPrompt, usePopupPickerMixin } from "./popup-picker-base";
+export { default as ProCalendar } from "./pro-calendar";
 export { default as ProCalendarPicker } from "./pro-calendar-picker";
 export * from "./pro-form";
 export { default as ProList } from "./pro-list";

package/dist/es/components/input-captcha/input-captcha.d.ts

@@ -23,7 +23,7 @@ declare const InputCaptcha: import("react").ForwardRefExoticComponent<{
     className?: string | undefined;
     style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
     tabIndex?: number | undefined;
-} & import("react").AriaAttributes & Omit<InputProps, "style" | "className"> & {
+} & import("react").AriaAttributes & Omit<InputProps, "className" | "style"> & {
     inputClassName?: string | undefined;
     inputStyle?: InputProps['style'];
     /** 获取验证码按钮的 props */

package/dist/es/components/pro-calendar/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import './style.less';
+import { computeDays, formatProCalendarDateValues } from './utils';
+declare const ProCalendar: import("react").ForwardRefExoticComponent<import("./pro-calendar").ProCalendarProps & import("react").RefAttributes<import("antd-mobile").CalendarRef>> & {
+    defaultFormat: typeof formatProCalendarDateValues;
+    computeDays: typeof computeDays;
+};
+export default ProCalendar;
+export type { ProCalendarProps } from './pro-calendar';
+export type { PickerDate as ProCalendarDate } from './utils';

package/dist/es/components/pro-calendar/index.js

@@ -0,0 +1,8 @@
+import _ProCalendar from "./pro-calendar";
+import "./style.less";
+import { computeDays, formatProCalendarDateValues } from "./utils";
+var ProCalendar = Object.assign(_ProCalendar, {
+  defaultFormat: formatProCalendarDateValues,
+  computeDays: computeDays
+});
+export default ProCalendar;

package/dist/es/components/pro-calendar/pro-calendar.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { CalendarProps, CalendarRef } from 'antd-mobile';
+import { PickerDate } from './utils';
+interface ProCalendarPropsInner {
+    /**
+     * 是否开启半日选择
+     * @default false
+     */
+    enableHalfDay?: boolean;
+    /**
+     * 是否开启晚上选择
+     * @default false
+     */
+    enableHalfDayNight?: boolean;
+}
+interface ProCalendarNormalProps {
+    selectionMode?: undefined;
+    value?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+}
+interface ProCalendarSingleProps {
+    selectionMode: 'single';
+    value?: PickerDate | null;
+    defaultValue?: PickerDate | null;
+    onChange?: (value: PickerDate | null) => void;
+}
+interface ProCalendarRangeProps {
+    selectionMode?: 'range';
+    value?: PickerDate[] | null;
+    defaultValue?: PickerDate[] | null;
+    onChange?: (value: PickerDate[] | null) => void;
+}
+export type ProCalendarProps = ProCalendarPropsInner & (ProCalendarNormalProps | ProCalendarSingleProps | ProCalendarRangeProps) & Omit<CalendarProps, 'value' | 'onChange' | 'defaultValue' | 'selectionMode'>;
+export declare function convertValueToRange(value: PickerDate | PickerDate[] | null): PickerDate[] | null;
+declare const ProCalendar: import("react").ForwardRefExoticComponent<ProCalendarProps & import("react").RefAttributes<CalendarRef>>;
+export default ProCalendar;

package/dist/es/components/pro-calendar/pro-calendar.js

@@ -0,0 +1,138 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["enableHalfDay", "enableHalfDayNight", "weekStartsOn", "value", "onChange", "defaultValue", "selectionMode", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useControllableValue } from 'ahooks';
+import { Calendar, Popover } from 'antd-mobile';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { pickBy } from 'lodash';
+import { cloneElement, forwardRef, useCallback, useMemo } from 'react';
+import { cn } from "../../utils/bem";
+import { HALF_DAY_PERIOD, HALF_DAY_PERIOD_NAMES, classesForDate, mergeDates } from "./utils";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+import { jsx as _jsx } from "react/jsx-runtime";
+var bem = cn('calendar');
+export function convertValueToRange(value) {
+  if (!value) return null;
+  if (Array.isArray(value)) {
+    if (value.length <= 1) return value;
+    return value;
+  }
+  return [value];
+}
+var ProCalendarRaw = function ProCalendarRaw(_ref, ref) {
+  var _ref$enableHalfDay = _ref.enableHalfDay,
+    enableHalfDay = _ref$enableHalfDay === void 0 ? false : _ref$enableHalfDay,
+    _ref$enableHalfDayNig = _ref.enableHalfDayNight,
+    enableHalfDayNight = _ref$enableHalfDayNig === void 0 ? false : _ref$enableHalfDayNig,
+    _ref$weekStartsOn = _ref.weekStartsOn,
+    weekStartsOn = _ref$weekStartsOn === void 0 ? 'Monday' : _ref$weekStartsOn,
+    valueProp = _ref.value,
+    onChangeProp = _ref.onChange,
+    defaultValueProp = _ref.defaultValue,
+    selectionMode = _ref.selectionMode,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useControllableValue = useControllableValue(pickBy({
+      value: valueProp,
+      defaultValue: defaultValueProp,
+      onChange: onChangeProp
+    }, function (v) {
+      return v !== undefined;
+    })),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    value = _useControllableValue2[0],
+    setValue_ = _useControllableValue2[1];
+  var rangeValue = useMemo(function () {
+    var _convertValueToRange;
+    return (_convertValueToRange = convertValueToRange(value)) !== null && _convertValueToRange !== void 0 ? _convertValueToRange : [];
+  }, [value]);
+  var setValue = useCallback(function (v) {
+    if (selectionMode === 'range' && enableHalfDay) {
+      setValue_(function (prev) {
+        if (!v) return v;
+        if (!prev || !Array.isArray(prev) || !prev[0] || prev.length >= 2) {
+          return [v];
+        }
+        return mergeDates([].concat(_toConsumableArray(prev), [v]));
+      });
+      return;
+    }
+    setValue_(v);
+  }, [enableHalfDay, selectionMode, setValue_]);
+  return /*#__PURE__*/_jsx(Calendar, _objectSpread({
+    ref: ref,
+    className: classNames(bem(), className),
+    weekStartsOn: weekStartsOn,
+    selectionMode: enableHalfDay ? undefined : selectionMode,
+    value: value,
+    onChange: function onChange(v) {
+      if (enableHalfDay) return;
+      setValue(v);
+    },
+    cellRender: function cellRender(oriNode, _ref2) {
+      var date = _ref2.date;
+      var dd = dayjs(date);
+      var isWeekend = dd.day() === 0 || dd.day() === 6;
+      if (!enableHalfDay) {
+        var _node = /*#__PURE__*/cloneElement(oriNode, {
+          className: classNames(oriNode.props.className, bem('cell', {
+            weekend: isWeekend
+          }))
+        });
+        return _node;
+      }
+      var nextValue = new Date(date);
+      var classes = classesForDate(date, rangeValue);
+      var node = /*#__PURE__*/cloneElement(oriNode, {
+        className: classNames(oriNode.props.className, bem('cell', classes)),
+        onClick: function onClick() {}
+      });
+      var acts = [HALF_DAY_PERIOD.AM, HALF_DAY_PERIOD.PM];
+      if (enableHalfDayNight) {
+        acts.push(HALF_DAY_PERIOD.NIGHT);
+      }
+      acts.unshift(HALF_DAY_PERIOD.ALL);
+      var actions = acts.map(function (act) {
+        return {
+          key: act,
+          text: HALF_DAY_PERIOD_NAMES[act]
+        };
+      });
+      return /*#__PURE__*/_jsx(Popover.Menu, {
+        actions: actions,
+        placement: "top",
+        className: bem('period-menu'),
+        onAction: function onAction(node) {
+          switch (node.key) {
+            case HALF_DAY_PERIOD.AM:
+              // 上午
+              nextValue.period = HALF_DAY_PERIOD.AM;
+              break;
+            case HALF_DAY_PERIOD.PM:
+              // 下午
+              nextValue.period = HALF_DAY_PERIOD.PM;
+              break;
+            case HALF_DAY_PERIOD.NIGHT:
+              // 晚上
+              nextValue.period = HALF_DAY_PERIOD.NIGHT;
+              break;
+            default:
+              // 全天
+              break;
+          }
+          setValue(nextValue);
+        },
+        trigger: "click",
+        children: node
+      });
+    }
+  }, props));
+};
+var ProCalendar = /*#__PURE__*/forwardRef(ProCalendarRaw);
+export default ProCalendar;

package/dist/es/components/pro-calendar/style.less

@@ -0,0 +1,105 @@
+@import '../styles/variable.less';
+
+@class-prefix-pro-calendar:~ '@{adm-pro-prefix}-calendar';
+
+.@{class-prefix-pro-calendar} {
+  .adm-calendar-cell {
+    &-selected:not(&-selected-begin):not(&-selected-end) {
+      background-color: rgba(22, 119, 255, 0.1);
+      color: var(--adm-color-text);
+    }
+  }
+  .adm-calendar-cell.adm-calendar-cell-disabled {
+    color: var(--adm-color-border);
+  }
+  .adm-calendar-cell.adm-calendar-cell-today {
+    color: var(--adm-color-text);
+    border: 1px solid var(--adm-color-primary);
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  &__cell {
+    position: relative;
+    overflow: hidden;
+    & > div {
+      position: relative;
+    }
+    // &&--weekend {
+    //   color: var(--adm-color-weak);
+    // }
+    &&--allday,
+    &&--allday.adm-calendar-cell-today {
+      background-color: var(--adm-color-primary);
+      color: var(--adm-color-white);
+    }
+    &--begin {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+    &--end {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+    &--am::before,
+    &--pm::before,
+    &--night::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      background-color: var(--adm-color-primary);
+    }
+
+    &--am {
+      &::before {
+        top: 0;
+        height: 50%;
+        // border-top-left-radius: 4px;
+        // border-top-right-radius: 4px;
+      }
+    }
+    &--pm {
+      &::before {
+        bottom: 0;
+        height: 50%;
+        // border-bottom-left-radius: 4px;
+        // border-bottom-right-radius: 4px;
+      }
+    }
+    &--night {
+      &::before {
+        bottom: 0;
+        height: 6px;
+        // border-bottom-left-radius: 4px;
+        // border-bottom-right-radius: 4px;
+      }
+    }
+    &--cover {
+      background-color: rgba(22, 119, 255, 0.1);
+    }
+  }
+
+  &__period-menu {
+    .adm-popover-menu-list {
+      min-width: 80px;
+    }
+    .adm-popover-menu-item {
+      padding: 0;
+    }
+    .adm-popover-menu-item-text {
+      padding: 10px 20px 10px 20px;
+      text-align: center;
+    }
+  }
+}
+
+html[data-prefers-color-scheme='dark'] {
+  .@{class-prefix-pro-calendar} {
+    &__period-menu {
+      --background: rgba(0, 0, 0, 0.75);
+      --adm-color-text: #ffffff;
+      backdrop-filter: blur(10px);
+    }
+  }
+}