@pisell/materials 1.8.18 → 1.8.20

package/lib/components/pisellReservationScheduleBand/PisellReservationScheduleBand.js

@@ -0,0 +1,127 @@
+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/pisellReservationScheduleBand/PisellReservationScheduleBand.tsx
+var PisellReservationScheduleBand_exports = {};
+__export(PisellReservationScheduleBand_exports, {
+  PisellReservationScheduleBand: () => PisellReservationScheduleBand
+});
+module.exports = __toCommonJS(PisellReservationScheduleBand_exports);
+var import_react = __toESM(require("react"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_classnames = __toESM(require("classnames"));
+var import_pisellReservationSchedule = require("../pisellReservationSchedule");
+var import_pisellTimeNavigator = require("../pisellTimeNavigator");
+var import_PisellReservationScheduleBand = require("./PisellReservationScheduleBand.less");
+function startOfDay(d) {
+  return d.startOf("day");
+}
+function withTimeOnDate(dateDay, timeSource) {
+  return startOfDay(dateDay).hour(timeSource.hour()).minute(timeSource.minute()).second(0).millisecond(0);
+}
+function PisellReservationScheduleBand(props) {
+  const {
+    value: valueProp,
+    onChange,
+    defaultValue,
+    scheduleProps,
+    timeNavigatorProps,
+    scheduleStartSlot,
+    scheduleEndSlot,
+    className,
+    style
+  } = props;
+  const isControlled = valueProp !== void 0;
+  const [internal, setInternal] = (0, import_react.useState)(() => {
+    const d = (defaultValue == null ? void 0 : defaultValue.date) ?? (0, import_dayjs.default)().startOf("day");
+    const atSrc = (defaultValue == null ? void 0 : defaultValue.at) ?? (0, import_dayjs.default)();
+    return {
+      date: startOfDay((0, import_dayjs.default)(d)),
+      at: withTimeOnDate((0, import_dayjs.default)(d), (0, import_dayjs.default)(atSrc))
+    };
+  });
+  const effective = isControlled ? valueProp : internal;
+  const emit = (0, import_react.useCallback)(
+    (next) => {
+      const normalized = {
+        date: startOfDay(next.date),
+        at: next.at
+      };
+      if (!isControlled) setInternal(normalized);
+      onChange == null ? void 0 : onChange(normalized);
+    },
+    [isControlled, onChange]
+  );
+  const handleDateChange = (0, import_react.useCallback)(
+    (d) => {
+      emit({
+        date: startOfDay(d),
+        at: withTimeOnDate(d, effective.at)
+      });
+    },
+    [emit, effective.at]
+  );
+  const handleTimeChange = (0, import_react.useCallback)(
+    (t) => {
+      emit({
+        date: startOfDay(effective.date),
+        at: t
+      });
+    },
+    [emit, effective.date]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("pisell-reservation-schedule-band", className),
+      style
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-reservation-schedule-band-schedule-row" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-reservation-schedule-band-slot-start" }, scheduleStartSlot), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-reservation-schedule-band-schedule" }, /* @__PURE__ */ import_react.default.createElement(
+      import_pisellReservationSchedule.PisellReservationSchedule,
+      {
+        value: effective.date,
+        onChange: handleDateChange,
+        ...scheduleProps
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-reservation-schedule-band-slot-end" }, scheduleEndSlot)),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-reservation-schedule-band-navigator" }, /* @__PURE__ */ import_react.default.createElement(
+      import_pisellTimeNavigator.PisellTimeNavigator,
+      {
+        referenceDate: effective.date,
+        value: effective.at,
+        onChange: handleTimeChange,
+        ...timeNavigatorProps
+      }
+    ))
+  );
+}
+PisellReservationScheduleBand.displayName = "PisellReservationScheduleBand";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellReservationScheduleBand
+});

package/lib/components/pisellReservationScheduleBand/PisellReservationScheduleBand.less

@@ -0,0 +1,49 @@
+.pisell-reservation-schedule-band {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  gap: 12px;
+  box-sizing: border-box;
+}
+
+/** 与中间日程条同一行：整行深色底，左标题 / 中选日 / 右操作 */
+.pisell-reservation-schedule-band-schedule-row {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  column-gap: 12px;
+  box-sizing: border-box;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: #141824;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.pisell-reservation-schedule-band-slot-start {
+  justify-self: start;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.pisell-reservation-schedule-band-slot-end {
+  justify-self: end;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.pisell-reservation-schedule-band-schedule {
+  justify-self: center;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.pisell-reservation-schedule-band-navigator {
+  width: 100%;
+  min-width: 0;
+}

package/lib/components/pisellReservationScheduleBand/PisellReservationScheduleBand.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellReservationScheduleBand } from './PisellReservationScheduleBand';
+/**
+ * PisellReservationScheduleBand：营业日条 + 横向时间轴顶栏组合，统一 value `{ date, at }`。
+ * 详见组件目录下 docs/PisellReservationScheduleBand.md。
+ */
+declare const meta: Meta<typeof PisellReservationScheduleBand>;
+export default meta;
+declare type Story = StoryObj<typeof PisellReservationScheduleBand>;
+export declare const Default: Story;
+export declare const CustomTimeNavigator: Story;
+export declare const ScheduleMinMax: Story;
+export declare const Controlled: Story;
+export declare const InitialPastDay: Story;
+/** 日程行左右插槽：左标题 + 中间 PisellReservationSchedule + 右操作区（整条顶栏暗色背景需在业务外层自行包一层，避免压住下方时间轴） */
+export declare const WithScheduleSlots: Story;

package/lib/components/pisellReservationScheduleBand/PisellReservationScheduleBand.stories.js

@@ -0,0 +1,181 @@
+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/pisellReservationScheduleBand/PisellReservationScheduleBand.stories.tsx
+var PisellReservationScheduleBand_stories_exports = {};
+__export(PisellReservationScheduleBand_stories_exports, {
+  Controlled: () => Controlled,
+  CustomTimeNavigator: () => CustomTimeNavigator,
+  Default: () => Default,
+  InitialPastDay: () => InitialPastDay,
+  ScheduleMinMax: () => ScheduleMinMax,
+  WithScheduleSlots: () => WithScheduleSlots,
+  default: () => PisellReservationScheduleBand_stories_default
+});
+module.exports = __toCommonJS(PisellReservationScheduleBand_stories_exports);
+var import_react = __toESM(require("react"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_PisellReservationScheduleBand = require("./PisellReservationScheduleBand");
+var meta = {
+  title: "Data Entry/PisellReservationScheduleBand",
+  component: import_PisellReservationScheduleBand.PisellReservationScheduleBand,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "纵向组合 PisellReservationSchedule 与 PisellTimeNavigator：选中日 `date` 与轴上时刻 `at` 由单一状态驱动；换日时会保留原时刻的时分并映射到新日。可通过 `scheduleProps` / `timeNavigatorProps` 透传子组件配置，适合作为 RecordBoard 等容器的 toolBar 顶栏。"
+      }
+    }
+  },
+  argTypes: {
+    value: {
+      description: "受控：{ date: Dayjs, at: Dayjs }",
+      control: "object"
+    },
+    defaultValue: {
+      description: "非受控初始值，可只传 date 或 at",
+      control: "object"
+    },
+    scheduleProps: {
+      description: "透传给 PisellReservationSchedule（不含 value/onChange/defaultValue）",
+      control: "object"
+    },
+    timeNavigatorProps: {
+      description: "透传给 PisellTimeNavigator（不含 value/onChange/referenceDate）",
+      control: "object"
+    },
+    onChange: {
+      action: "onChange",
+      description: "date 或 at 变化时触发，参数已归一化"
+    },
+    className: { control: "text" },
+    scheduleStartSlot: {
+      description: "日程行左侧插槽（如标题）",
+      control: false
+    },
+    scheduleEndSlot: {
+      description: "日程行右侧插槽（如状态、主按钮）",
+      control: false
+    }
+  }
+};
+var PisellReservationScheduleBand_stories_default = meta;
+var wideDecorator = (StoryComp) => /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", maxWidth: 960, minWidth: 480 } }, /* @__PURE__ */ import_react.default.createElement(StoryComp, null));
+var Default = {
+  args: {},
+  decorators: [wideDecorator]
+};
+var CustomTimeNavigator = {
+  args: {
+    timeNavigatorProps: {
+      stepMinutes: 30,
+      majorStepMinutes: 120,
+      showNowButton: true
+    }
+  },
+  decorators: [wideDecorator]
+};
+var ScheduleMinMax = {
+  args: {
+    scheduleProps: {
+      minDate: (0, import_dayjs.default)().subtract(7, "day"),
+      maxDate: (0, import_dayjs.default)().add(7, "day")
+    },
+    defaultValue: {
+      date: (0, import_dayjs.default)().startOf("day")
+    }
+  },
+  decorators: [wideDecorator]
+};
+var Controlled = {
+  render: function ControlledBandRender() {
+    const [value, setValue] = (0, import_react.useState)(() => ({
+      date: (0, import_dayjs.default)().startOf("day"),
+      at: (0, import_dayjs.default)()
+    }));
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", maxWidth: 960, minWidth: 480 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_PisellReservationScheduleBand.PisellReservationScheduleBand,
+      {
+        value,
+        onChange: (next) => {
+          setValue(next);
+          console.log("onChange", {
+            date: next.date.format("YYYY-MM-DD"),
+            at: next.at.format("YYYY-MM-DD HH:mm")
+          });
+        },
+        timeNavigatorProps: { showNowButton: true }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { marginTop: 12, fontSize: 12, color: "#666" } }, "date: ", value.date.format("YYYY-MM-DD"), " · at:", " ", value.at.format("HH:mm")));
+  }
+};
+var InitialPastDay = {
+  args: {
+    defaultValue: {
+      date: (0, import_dayjs.default)().subtract(1, "day").startOf("day"),
+      at: (0, import_dayjs.default)().subtract(1, "day").hour(14).minute(30).second(0)
+    },
+    timeNavigatorProps: { showNowButton: true }
+  },
+  decorators: [wideDecorator]
+};
+var WithScheduleSlots = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", maxWidth: 960, minWidth: 480 } }, /* @__PURE__ */ import_react.default.createElement(
+    import_PisellReservationScheduleBand.PisellReservationScheduleBand,
+    {
+      scheduleStartSlot: /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: 15, fontWeight: 600 } }, "Reservation"),
+      scheduleEndSlot: /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 12 } }, /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: 13, color: "#595959" } }, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "#52c41a", marginRight: 6 } }, "●"), "Current"), /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          style: {
+            background: "#1677ff",
+            color: "#fff",
+            border: "none",
+            borderRadius: 8,
+            padding: "6px 14px",
+            fontSize: 14,
+            cursor: "pointer"
+          }
+        },
+        "+ 新建"
+      )),
+      timeNavigatorProps: { showNowButton: true }
+    }
+  ))
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Controlled,
+  CustomTimeNavigator,
+  Default,
+  InitialPastDay,
+  ScheduleMinMax,
+  WithScheduleSlots
+});

package/lib/components/pisellReservationScheduleBand/index.d.ts

@@ -0,0 +1,2 @@
+export { PisellReservationScheduleBand } from './PisellReservationScheduleBand';
+export type { PisellReservationScheduleBandProps, ReservationScheduleBandValue, TimeNavigatorPassthroughProps, } from './types';

package/lib/components/pisellReservationScheduleBand/index.js

@@ -0,0 +1,29 @@
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellReservationScheduleBand/index.tsx
+var pisellReservationScheduleBand_exports = {};
+__export(pisellReservationScheduleBand_exports, {
+  PisellReservationScheduleBand: () => import_PisellReservationScheduleBand.PisellReservationScheduleBand
+});
+module.exports = __toCommonJS(pisellReservationScheduleBand_exports);
+var import_PisellReservationScheduleBand = require("./PisellReservationScheduleBand");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellReservationScheduleBand
+});

package/lib/components/pisellReservationScheduleBand/types.d.ts

@@ -0,0 +1,45 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { Dayjs } from 'dayjs';
+import type { PisellTimeNavigatorProps } from '../pisellTimeNavigator/types';
+import type { PisellReservationScheduleProps } from '../pisellReservationSchedule/types';
+/** 组合值：日历日 + 该日上的时刻（与 PisellTimeNavigator 对齐） */
+export interface ReservationScheduleBandValue {
+    date: Dayjs;
+    at: Dayjs;
+}
+export declare type TimeNavigatorPassthroughProps = Omit<PisellTimeNavigatorProps, 'value' | 'onChange' | 'referenceDate' | 'defaultValue'>;
+/**
+ * PisellReservationScheduleBand：营业日条 + 横向时间轴
+ */
+export interface PisellReservationScheduleBandProps {
+    /**
+     * 受控：选中日 + 轴上时刻
+     */
+    value?: ReservationScheduleBandValue;
+    /**
+     * 日历日或时刻任一变化时触发
+     */
+    onChange?: (next: ReservationScheduleBandValue) => void;
+    /**
+     * 非受控初始值（可只传部分字段）
+     */
+    defaultValue?: Partial<ReservationScheduleBandValue>;
+    /**
+     * 透传给 PisellReservationSchedule（如 minDate / maxDate）
+     */
+    scheduleProps?: Omit<PisellReservationScheduleProps, 'value' | 'onChange' | 'defaultValue'>;
+    /**
+     * 透传给 PisellTimeNavigator（不含 value/onChange/referenceDate）
+     */
+    timeNavigatorProps?: TimeNavigatorPassthroughProps;
+    /**
+     * 顶栏日程行：PisellReservationSchedule 左侧自定义内容（如标题）
+     */
+    scheduleStartSlot?: ReactNode;
+    /**
+     * 顶栏日程行：PisellReservationSchedule 右侧自定义内容（如状态、主按钮）
+     */
+    scheduleEndSlot?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}

package/lib/components/pisellReservationScheduleBand/types.js

@@ -0,0 +1,17 @@
+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/components/pisellReservationScheduleBand/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/pisellTags/index.d.ts

@@ -9,5 +9,5 @@ export interface PisellTagsProps extends React.DetailedHTMLProps<React.HTMLAttri
     icon?: React.ReactNode;
     color?: PisellTagsColor;
 }
-declare const PisellTags: (props: PisellTagsProps) => React.JSX.Element;
+declare const PisellTags: (props: PisellTagsProps) => JSX.Element;
 export default PisellTags;

package/lib/components/pisellText/index.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 export interface PisellTextProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare const PisellText: {
-    (props: PisellTextProps): React.JSX.Element;
-    Amount: (props: import("./components/Amount").AmountProps) => React.JSX.Element;
+    (props: PisellTextProps): JSX.Element;
+    Amount: (props: import("./components/Amount").AmountProps) => JSX.Element;
     Editable: React.FC<import("./components/Editable").EditableProps>;
 };
 export default PisellText;

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { PisellTimeNavigatorProps } from './types';
+import './PisellTimeNavigator.less';
+/**
+ * PisellTimeNavigator：可拖动的时间导航轴，时间范围内浏览、选择、控制
+ */
+export declare function PisellTimeNavigator(props: PisellTimeNavigatorProps): JSX.Element;
+export declare namespace PisellTimeNavigator {
+    var displayName: string;
+}