@pisell/materials 6.3.25 → 6.3.27

package/lib/components/pisellTimeRangeDisplay/index.js

@@ -0,0 +1,40 @@
+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/pisellTimeRangeDisplay/index.tsx
+var pisellTimeRangeDisplay_exports = {};
+__export(pisellTimeRangeDisplay_exports, {
+  PisellTimeRangeDisplay: () => import_PisellTimeRangeDisplay.PisellTimeRangeDisplay,
+  default: () => import_PisellTimeRangeDisplay.default
+});
+module.exports = __toCommonJS(pisellTimeRangeDisplay_exports);
+var import_PisellTimeRangeDisplay = __toESM(require("./PisellTimeRangeDisplay"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellTimeRangeDisplay
+});

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

@@ -0,0 +1,137 @@
+import type { CSSProperties } from 'react';
+import type { Dayjs } from 'dayjs';
+import type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, ContainerStyleConfig, TextStyleConfig, TextAlign } from '../pisellDateTimeDisplay/types';
+export type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, ContainerStyleConfig, TextStyleConfig, TextAlign, };
+/**
+ * 字段类型（时间区间、日期、星期、持续时长）
+ * - time: 时间区间块（HH:mm-HH:mm 或跨天起止）
+ * - date: 日期块
+ * - weekday: 星期块
+ * - duration: 持续时长块
+ */
+export declare type TimeRangeFieldType = 'time' | 'date' | 'weekday' | 'duration';
+/**
+ * 持续时长格式配置
+ */
+export interface DurationFormatConfig {
+    /**
+     * 是否显示秒
+     * @default false
+     * @example true -> "2h30m23s" | false -> "2h30m"
+     */
+    showSeconds?: boolean;
+}
+/**
+ * 字段配置
+ */
+export interface TimeRangeFieldConfig {
+    /**
+     * 是否显示时间区间块
+     * @default true
+     */
+    showTimeRange?: boolean;
+    /**
+     * 是否显示日期块
+     * @default true
+     */
+    showDate?: boolean;
+    /**
+     * 是否显示星期块
+     * @default true
+     */
+    showWeekday?: boolean;
+    /**
+     * 是否显示持续时长块
+     * @default true
+     */
+    showDuration?: boolean;
+    /**
+     * 字段顺序（四类块可任意排序；默认 时间 日期 星期 持续时长，可实现「持续时间在前」等）
+     * @default ['weekday', 'date', 'time', 'duration'] 换行顺序：先持续时间 → 结束时间（跨天）→ 开始/结束时间与日期 → 星期
+     */
+    fieldOrder?: TimeRangeFieldType[];
+}
+/**
+ * startAt / endAt 的 dayjs 兼容值
+ */
+export declare type DayjsLike = Dayjs | string | number;
+/**
+ * PisellTimeRangeDisplay 组件 Props
+ */
+export interface PisellTimeRangeDisplayProps {
+    /**
+     * 开始时间（dayjs 兼容值）
+     */
+    startAt: DayjsLike;
+    /**
+     * 结束时间（dayjs 兼容值）
+     */
+    endAt: DayjsLike;
+    /**
+     * 文本对齐方式（单行/多行均生效）
+     * @default 'center'
+     */
+    textAlign?: TextAlign;
+    /**
+     * 字段显示与排序配置
+     */
+    fields?: TimeRangeFieldConfig;
+    /**
+     * 同一天时是否显示具体日期
+     * @default true
+     */
+    showDateForSameDay?: boolean;
+    /**
+     * 时间格式配置（复用 PisellDateTimeDisplay）
+     */
+    timeFormat?: TimeFormatConfig;
+    /**
+     * 日期格式配置（复用 PisellDateTimeDisplay）
+     */
+    dateFormat?: DateFormatConfig;
+    /**
+     * 星期格式配置（复用 PisellDateTimeDisplay）
+     */
+    weekdayFormat?: WeekdayFormatConfig;
+    /**
+     * 持续时长格式配置
+     */
+    durationFormat?: DurationFormatConfig;
+    /**
+     * 容器样式
+     */
+    containerStyle?: ContainerStyleConfig;
+    /**
+     * 时间区间文本样式
+     */
+    timeStyle?: TextStyleConfig;
+    /**
+     * 日期文本样式
+     */
+    dateStyle?: TextStyleConfig;
+    /**
+     * 星期文本样式
+     */
+    weekdayStyle?: TextStyleConfig;
+    /**
+     * 持续时长文本样式
+     */
+    durationStyle?: TextStyleConfig;
+    /**
+     * dayjs locale（语言代码）
+     * @default 优先使用全局配置，其次浏览器语言
+     */
+    locale?: string;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 点击回调
+     */
+    onClick?: () => void;
+}

package/lib/components/pisellTimeRangeDisplay/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/pisellTimeRangeDisplay/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/pisellTimeRangeDisplay/utils/formatDuration.js

@@ -0,0 +1,52 @@
+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/pisellTimeRangeDisplay/utils/formatDuration.ts
+var formatDuration_exports = {};
+__export(formatDuration_exports, {
+  formatDuration: () => formatDuration
+});
+module.exports = __toCommonJS(formatDuration_exports);
+function isChineseLocale(locale) {
+  if (!locale) return false;
+  const n = locale.toLowerCase();
+  return n.startsWith("zh");
+}
+function formatDuration(ms, showSeconds = false, locale) {
+  if (!Number.isFinite(ms) || ms < 0) {
+    return isChineseLocale(locale) ? "0分钟" : "0m";
+  }
+  const d = Math.floor(ms / 864e5);
+  const h = Math.floor(ms % 864e5 / 36e5);
+  const m = Math.floor(ms % 36e5 / 6e4);
+  const s = Math.floor(ms % 6e4 / 1e3);
+  const useZh = isChineseLocale(locale);
+  const units = useZh ? { d: "天", h: "时", m: "分钟", s: "秒" } : { d: "d", h: "h", m: "m", s: "s" };
+  const parts = [];
+  if (d > 0) parts.push(`${d}${units.d}`);
+  if (h > 0) parts.push(`${h}${units.h}`);
+  if (m > 0) parts.push(`${m}${units.m}`);
+  if (showSeconds || parts.length === 0 && s >= 0) {
+    parts.push(`${s}${units.s}`);
+  }
+  return parts.length > 0 ? parts.join("") : useZh ? "0分钟" : "0m";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatDuration
+});

package/lib/components/pisellTimeRangeDisplay/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { parseTimeRange } from './parseTimeRange';
+export type { ParseTimeRangeResult } from './parseTimeRange';
+export { formatDuration } from './formatDuration';
+export { formatTime, formatDate, formatWeekday, getDayjsLocale, getRelativeDay, getRelativeDayLabel, getDatePartDisplay, } from '../../pisellDateTimeDisplay/utils';

package/lib/components/pisellTimeRangeDisplay/utils/index.js

@@ -0,0 +1,47 @@
+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/pisellTimeRangeDisplay/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  formatDate: () => import_utils.formatDate,
+  formatDuration: () => import_formatDuration.formatDuration,
+  formatTime: () => import_utils.formatTime,
+  formatWeekday: () => import_utils.formatWeekday,
+  getDatePartDisplay: () => import_utils.getDatePartDisplay,
+  getDayjsLocale: () => import_utils.getDayjsLocale,
+  getRelativeDay: () => import_utils.getRelativeDay,
+  getRelativeDayLabel: () => import_utils.getRelativeDayLabel,
+  parseTimeRange: () => import_parseTimeRange.parseTimeRange
+});
+module.exports = __toCommonJS(utils_exports);
+var import_parseTimeRange = require("./parseTimeRange");
+var import_formatDuration = require("./formatDuration");
+var import_utils = require("../../pisellDateTimeDisplay/utils");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatDate,
+  formatDuration,
+  formatTime,
+  formatWeekday,
+  getDatePartDisplay,
+  getDayjsLocale,
+  getRelativeDay,
+  getRelativeDayLabel,
+  parseTimeRange
+});

package/lib/components/pisellTimeRangeDisplay/utils/parseTimeRange.d.ts

@@ -0,0 +1,23 @@
+import { type Dayjs } from 'dayjs';
+import type { DayjsLike } from '../types';
+export interface ParseTimeRangeResult {
+    /** 开始时间（已应用 locale） */
+    start: Dayjs;
+    /** 结束时间（已应用 locale） */
+    end: Dayjs;
+    /** 是否同一天（按本地时区自然日判定） */
+    isSameDay: boolean;
+}
+/**
+ * 解析 startAt / endAt 为 Dayjs，并判定是否同一天
+ *
+ * @param startAt 开始时间（dayjs 兼容值）
+ * @param endAt 结束时间（dayjs 兼容值）
+ * @param locale dayjs locale，可选
+ * @returns { start, end, isSameDay }
+ *
+ * @example
+ * parseTimeRange('2026-02-04 09:00', '2026-02-04 18:00', 'zh-cn')
+ * // => { start: Dayjs, end: Dayjs, isSameDay: true }
+ */
+export declare function parseTimeRange(startAt: DayjsLike, endAt: DayjsLike, locale?: string): ParseTimeRangeResult;

package/lib/components/pisellTimeRangeDisplay/utils/parseTimeRange.js

@@ -0,0 +1,49 @@
+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/pisellTimeRangeDisplay/utils/parseTimeRange.ts
+var parseTimeRange_exports = {};
+__export(parseTimeRange_exports, {
+  parseTimeRange: () => parseTimeRange
+});
+module.exports = __toCommonJS(parseTimeRange_exports);
+var import_dayjs = __toESM(require("dayjs"));
+function parseTimeRange(startAt, endAt, locale) {
+  let start = (0, import_dayjs.default)(startAt);
+  let end = (0, import_dayjs.default)(endAt);
+  if (locale) {
+    start = start.locale(locale);
+    end = end.locale(locale);
+  }
+  const isSameDay = start.isSame(end, "day");
+  return { start, end, isSameDay };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  parseTimeRange
+});

package/lib/components/pisellUrl/PisellUrl.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { PisellUrlProps } from './types';
+import './PisellUrl.less';
+/**
+ * PisellUrl URL 链接组件
+ *
+ * URL 链接输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design Input 组件开发，提供 URL 格式校验、协议自动补全、
+ * 链接跳转和协议/路径显示控制功能。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 编辑态（URL 输入）
+ * <PisellUrl
+ *   placeholder="请输入网址"
+ *   required
+ * />
+ *
+ * @example
+ * // 只读态（可跳转）
+ * <PisellUrl
+ *   mode="read"
+ *   value="https://www.example.com"
+ *   enableLinkClick
+ * />
+ *
+ * @example
+ * // 协议自动补全
+ * <PisellUrl
+ *   autoCompleteProtocol
+ *   defaultProtocol="https://"
+ * />
+ */
+export declare const PisellUrl: React.FC<PisellUrlProps>;
+declare const _default: React.NamedExoticComponent<PisellUrlProps>;
+export default _default;

package/lib/components/pisellUrl/PisellUrl.js

@@ -0,0 +1,62 @@
+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/pisellUrl/PisellUrl.tsx
+var PisellUrl_exports = {};
+__export(PisellUrl_exports, {
+  PisellUrl: () => PisellUrl,
+  default: () => PisellUrl_default
+});
+module.exports = __toCommonJS(PisellUrl_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_ReadOnlyView = __toESM(require("./components/ReadOnlyView"));
+var import_EditView = __toESM(require("./components/EditView"));
+var import_DisabledView = __toESM(require("./components/DisabledView"));
+var import_PisellUrl = require("./PisellUrl.less");
+var PisellUrl = (props) => {
+  const { mode = "edit", disabled = false } = props;
+  const displayState = (0, import_utils.getDisplayState)(mode, disabled);
+  switch (displayState) {
+    case "read":
+      return /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props });
+    case "edit":
+      return /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props });
+    case "disabled":
+      return /* @__PURE__ */ import_react.default.createElement(import_DisabledView.default, { ...props });
+    default:
+      return null;
+  }
+};
+var PisellUrl_default = import_react.default.memo(PisellUrl, (prevProps, nextProps) => {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.autoCompleteProtocol === nextProps.autoCompleteProtocol;
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellUrl
+});

package/lib/components/pisellUrl/PisellUrl.less

@@ -0,0 +1,46 @@
+/**
+ * PisellUrl 组件样式
+ */
+
+.pisell-url {
+  &-edit {
+    width: 100%;
+
+    // 错误提示样式
+    &-error {
+      margin-top: 4px;
+      font-size: 12px;
+      color: #ff4d4f;
+      line-height: 1.5;
+    }
+  }
+
+  &-read {
+    display: inline-flex;
+    align-items: center;
+
+    // 链接样式
+    .pisell-lowcode-typography-link {
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    // 链接图标
+    .anticon-link {
+      font-size: 14px;
+    }
+  }
+
+  &-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+
+    * {
+      cursor: not-allowed !important;
+    }
+  }
+}

package/lib/components/pisellUrl/PisellUrl.stories.d.ts

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellUrl } from './PisellUrl';
+/**
+ * PisellUrl 是一个 URL 地址输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - URL 格式校验
+ * - 协议自动补全
+ * - 链接跳转（新窗口，安全性保障）
+ * - 协议/路径显示控制
+ * - 协议白名单限制
+ */
+declare const meta: Meta<typeof PisellUrl>;
+export default meta;
+declare type Story = StoryObj<typeof PisellUrl>;
+/**
+ * 基础编辑态
+ */
+export declare const Basic: Story;
+/**
+ * 协议自动补全
+ */
+export declare const WithProtocolAutoComplete: Story;
+/**
+ * 只读态 - 可跳转
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 隐藏协议
+ */
+export declare const ReadModeHideProtocol: Story;
+/**
+ * 只读态 - 仅域名
+ */
+export declare const ReadModeDomainOnly: Story;
+/**
+ * 禁用态（编辑）
+ */
+export declare const DisabledEdit: Story;
+/**
+ * 禁用态（只读）
+ */
+export declare const DisabledRead: Story;
+/**
+ * 必填校验
+ */
+export declare const Required: Story;
+/**
+ * 格式校验（实时）
+ */
+export declare const FormatValidation: Story;
+/**
+ * 协议限制（仅 HTTPS）
+ */
+export declare const HttpsOnly: Story;
+/**
+ * 协议必需
+ */
+export declare const RequireProtocol: Story;
+/**
+ * 显示清空按钮
+ */
+export declare const WithClearButton: Story;
+/**
+ * 自动聚焦
+ */
+export declare const WithAutoFocus: Story;
+/**
+ * 自定义样式（只读态）
+ */
+export declare const CustomStyle: Story;
+/**
+ * 显示控制对比
+ */
+export declare const DisplayFormatComparison: Story;
+/**
+ * 校验时机对比
+ */
+export declare const ValidateTriggerComparison: Story;
+/**
+ * 所有状态展示
+ */
+export declare const AllStates: Story;
+/**
+ * 完整功能示例
+ */
+export declare const CompleteExample: Story;
+/**
+ * 协议补全演示
+ */
+export declare const ProtocolCompleteDemo: Story;
+/**
+ * 链接跳转演示
+ */
+export declare const LinkClickDemo: Story;
+/**
+ * 协议限制演示
+ */
+export declare const ProtocolRestrictionDemo: Story;
+/**
+ * 完整交互示例
+ */
+export declare const InteractiveExample: Story;
+/**
+ * 协议默认值对比
+ */
+export declare const ProtocolDefaultComparison: Story;