@pisell/materials 6.3.25 → 6.3.27

package/lib/components/pisellUrl/PisellUrl.stories.js

@@ -0,0 +1,506 @@
+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.stories.tsx
+var PisellUrl_stories_exports = {};
+__export(PisellUrl_stories_exports, {
+  AllStates: () => AllStates,
+  Basic: () => Basic,
+  CompleteExample: () => CompleteExample,
+  CustomStyle: () => CustomStyle,
+  DisabledEdit: () => DisabledEdit,
+  DisabledRead: () => DisabledRead,
+  DisplayFormatComparison: () => DisplayFormatComparison,
+  FormatValidation: () => FormatValidation,
+  HttpsOnly: () => HttpsOnly,
+  InteractiveExample: () => InteractiveExample,
+  LinkClickDemo: () => LinkClickDemo,
+  ProtocolCompleteDemo: () => ProtocolCompleteDemo,
+  ProtocolDefaultComparison: () => ProtocolDefaultComparison,
+  ProtocolRestrictionDemo: () => ProtocolRestrictionDemo,
+  ReadMode: () => ReadMode,
+  ReadModeDomainOnly: () => ReadModeDomainOnly,
+  ReadModeHideProtocol: () => ReadModeHideProtocol,
+  RequireProtocol: () => RequireProtocol,
+  Required: () => Required,
+  ValidateTriggerComparison: () => ValidateTriggerComparison,
+  WithAutoFocus: () => WithAutoFocus,
+  WithClearButton: () => WithClearButton,
+  WithProtocolAutoComplete: () => WithProtocolAutoComplete,
+  default: () => PisellUrl_stories_default
+});
+module.exports = __toCommonJS(PisellUrl_stories_exports);
+var import_PisellUrl = require("./PisellUrl");
+var import_react = __toESM(require("react"));
+var meta = {
+  title: "表单/PisellUrl",
+  component: import_PisellUrl.PisellUrl,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "URL 地址输入/展示组件，支持格式校验、协议补全和链接跳转。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    mode: {
+      control: "radio",
+      options: ["read", "edit"],
+      description: "状态模式"
+    },
+    disabled: {
+      control: "boolean",
+      description: "是否禁用"
+    },
+    strictValidation: {
+      control: "boolean",
+      description: "是否使用严格校验"
+    },
+    autoCompleteProtocol: {
+      control: "boolean",
+      description: "自动补全协议"
+    },
+    enableLinkClick: {
+      control: "boolean",
+      description: "启用链接跳转（只读态）"
+    },
+    showProtocol: {
+      control: "boolean",
+      description: "显示协议（只读态）"
+    },
+    showLinkIcon: {
+      control: "boolean",
+      description: "显示链接图标"
+    }
+  }
+};
+var PisellUrl_stories_default = meta;
+var Basic = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入网址"
+  }
+};
+var WithProtocolAutoComplete = {
+  args: {
+    mode: "edit",
+    autoCompleteProtocol: true,
+    defaultProtocol: "https://",
+    placeholder: "输入网址，失焦后自动补全协议"
+  }
+};
+var ReadMode = {
+  args: {
+    mode: "read",
+    value: "https://www.example.com",
+    enableLinkClick: true,
+    openInNewWindow: true
+  }
+};
+var ReadModeHideProtocol = {
+  args: {
+    mode: "read",
+    value: "https://www.example.com/path",
+    showProtocol: false
+  }
+};
+var ReadModeDomainOnly = {
+  args: {
+    mode: "read",
+    value: "https://www.example.com/path/to/page",
+    displayFormat: "domain"
+  }
+};
+var DisabledEdit = {
+  args: {
+    mode: "edit",
+    value: "https://example.com",
+    disabled: true
+  }
+};
+var DisabledRead = {
+  args: {
+    mode: "read",
+    value: "https://example.com",
+    disabled: true
+  }
+};
+var Required = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入网址（必填）",
+    required: true,
+    validateTrigger: "onBlur"
+  }
+};
+var FormatValidation = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入网址",
+    validateTrigger: "onChange"
+  }
+};
+var HttpsOnly = {
+  args: {
+    mode: "edit",
+    allowedProtocols: ["https"],
+    placeholder: "仅支持 HTTPS 协议",
+    validateTrigger: "onBlur"
+  }
+};
+var RequireProtocol = {
+  args: {
+    mode: "edit",
+    requireProtocol: true,
+    autoCompleteProtocol: false,
+    placeholder: "必须输入完整 URL（含协议）",
+    validateTrigger: "onBlur"
+  }
+};
+var WithClearButton = {
+  args: {
+    mode: "edit",
+    defaultValue: "https://example.com",
+    allowClear: true,
+    placeholder: "请输入网址"
+  }
+};
+var WithAutoFocus = {
+  args: {
+    mode: "edit",
+    autoFocus: true,
+    placeholder: "自动获得焦点"
+  }
+};
+var CustomStyle = {
+  args: {
+    mode: "read",
+    value: "https://example.com",
+    fontSize: 18,
+    fontWeight: 600,
+    linkColor: "#FF5722"
+  }
+};
+var DisplayFormatComparison = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "500px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "完整 URL（含协议）:"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      mode: "read",
+      value: "https://www.example.com/path/to/page",
+      displayFormat: "full",
+      showProtocol: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "隐藏协议:"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      mode: "read",
+      value: "https://www.example.com/path/to/page",
+      showProtocol: false
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "隐藏路径（显示协议+域名）:"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      mode: "read",
+      value: "https://www.example.com/path/to/page",
+      showProtocol: true,
+      showPathname: false
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "仅域名:"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      mode: "read",
+      value: "https://www.example.com/path/to/page",
+      displayFormat: "domain"
+    }
+  )))
+};
+var ValidateTriggerComparison = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "20px", width: "400px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "输入时校验（onChange）"), /* @__PURE__ */ import_react.default.createElement(import_PisellUrl.PisellUrl, { placeholder: "输入时即时校验", required: true, validateTrigger: "onChange" })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "失焦时校验（onBlur）"), /* @__PURE__ */ import_react.default.createElement(import_PisellUrl.PisellUrl, { placeholder: "失焦后校验", required: true, validateTrigger: "onBlur" })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "两者都校验（both）"), /* @__PURE__ */ import_react.default.createElement(import_PisellUrl.PisellUrl, { placeholder: "输入和失焦都校验", required: true, validateTrigger: "both" })))
+};
+var AllStates = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "500px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "编辑态"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      mode: "edit",
+      defaultValue: "https://example.com",
+      placeholder: "请输入网址",
+      allowClear: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态"), /* @__PURE__ */ import_react.default.createElement(import_PisellUrl.PisellUrl, { mode: "read", value: "https://example.com", enableLinkClick: true })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "禁用态（编辑）"), /* @__PURE__ */ import_react.default.createElement(import_PisellUrl.PisellUrl, { mode: "edit", value: "https://example.com", disabled: true })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "禁用态（只读）"), /* @__PURE__ */ import_react.default.createElement(import_PisellUrl.PisellUrl, { mode: "read", value: "https://example.com", disabled: true })))
+};
+var CompleteExample = {
+  render: () => {
+    const [url, setUrl] = import_react.default.useState("");
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "600px", display: "flex", flexDirection: "column", gap: "24px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "编辑态 - 协议补全 + 格式校验"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellUrl.PisellUrl,
+      {
+        value: url,
+        onChange: (val) => {
+          setUrl(val);
+          console.log("URL 变化:", val);
+        },
+        placeholder: "请输入网址（试试输入 example.com）",
+        autoCompleteProtocol: true,
+        defaultProtocol: "https://",
+        required: true,
+        validateTrigger: "both",
+        allowClear: true,
+        onProtocolComplete: (val) => {
+          console.log("协议补全:", val);
+        },
+        onValidate: (isValid, errors) => {
+          console.log("校验结果:", isValid, errors);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { marginTop: "8px", color: "#667085", fontSize: "12px" } }, "当前值：", url || "（未输入）")), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态 - 可跳转"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellUrl.PisellUrl,
+      {
+        mode: "read",
+        value: url || "https://www.example.com",
+        enableLinkClick: true,
+        openInNewWindow: true,
+        showLinkIcon: true,
+        onLinkClick: (val) => {
+          console.log("点击链接:", val);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "点击链接将在新窗口打开")), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态 - 显示控制"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "12px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: "14px", color: "#667085" } }, "完整 URL:"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellUrl.PisellUrl,
+      {
+        mode: "read",
+        value: url || "https://www.example.com/path",
+        showProtocol: true
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: "14px", color: "#667085" } }, "隐藏协议:"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellUrl.PisellUrl,
+      {
+        mode: "read",
+        value: url || "https://www.example.com/path",
+        showProtocol: false
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: "14px", color: "#667085" } }, "仅域名:"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellUrl.PisellUrl,
+      {
+        mode: "read",
+        value: url || "https://www.example.com/path",
+        displayFormat: "domain"
+      }
+    )))));
+  }
+};
+var ProtocolCompleteDemo = {
+  render: () => {
+    const [url, setUrl] = import_react.default.useState("");
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "500px" } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "协议补全演示"), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "14px", marginBottom: "16px" } }, "输入网址后失焦，会自动补全 https:// 协议"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellUrl.PisellUrl,
+      {
+        value: url,
+        onChange: setUrl,
+        autoCompleteProtocol: true,
+        defaultProtocol: "https://",
+        placeholder: "试试输入 example.com 然后失焦",
+        onProtocolComplete: (val) => {
+          console.log("协议补全:", val);
+          alert(`协议已补全: ${val}`);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { marginTop: "8px", color: "#667085", fontSize: "12px" } }, "当前值：", url || "（未输入）"));
+  }
+};
+var LinkClickDemo = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "500px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "新窗口打开（默认）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      mode: "read",
+      value: "https://www.example.com",
+      enableLinkClick: true,
+      openInNewWindow: true,
+      showLinkIcon: true
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "点击后在新窗口打开（带 noopener,noreferrer）")), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "当前窗口打开"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      mode: "read",
+      value: "https://www.example.com",
+      enableLinkClick: true,
+      openInNewWindow: false,
+      showLinkIcon: true
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "点击后在当前窗口打开")), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "禁用跳转"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      mode: "read",
+      value: "https://www.example.com",
+      enableLinkClick: false
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "仅展示，不可点击")))
+};
+var ProtocolRestrictionDemo = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "500px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "仅允许 HTTPS"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      mode: "edit",
+      allowedProtocols: ["https"],
+      placeholder: "仅支持 HTTPS 协议",
+      validateTrigger: "onBlur",
+      defaultValue: ""
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "只允许 https:// 协议")), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "允许 HTTP 和 HTTPS"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      mode: "edit",
+      allowedProtocols: ["http", "https"],
+      placeholder: "支持 HTTP 和 HTTPS",
+      validateTrigger: "onBlur",
+      defaultValue: ""
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "允许 http:// 和 https://")))
+};
+var InteractiveExample = {
+  render: () => {
+    const [url, setUrl] = import_react.default.useState("");
+    const [isValid, setIsValid] = import_react.default.useState(true);
+    const [errors, setErrors] = import_react.default.useState([]);
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "600px" } }, /* @__PURE__ */ import_react.default.createElement("h2", null, "PisellUrl 完整功能演示"), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: "24px" } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "编辑态 - 协议补全 + 格式校验"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellUrl.PisellUrl,
+      {
+        value: url,
+        onChange: setUrl,
+        placeholder: "试试输入 example.com 然后失焦",
+        autoCompleteProtocol: true,
+        defaultProtocol: "https://",
+        required: true,
+        validateTrigger: "both",
+        allowClear: true,
+        onProtocolComplete: (val) => {
+          console.log("协议补全:", val);
+        },
+        onValidate: (valid, errs) => {
+          setIsValid(valid);
+          setErrors(errs);
+          console.log("校验结果:", { valid, errs });
+        },
+        onBlur: (val) => {
+          console.log("失焦，当前值:", val);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          marginTop: "16px",
+          padding: "12px",
+          background: "#f5f5f5",
+          borderRadius: "4px"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "4px 0", fontSize: "14px" } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "当前值:"), " ", url || "（未输入）"),
+      /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "4px 0", fontSize: "14px" } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "校验状态:"), " ", isValid ? "✅ 通过" : "❌ 未通过"),
+      !isValid && errors.length > 0 && /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "4px 0", fontSize: "14px", color: "#ff4d4f" } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "错误信息:"), " ", errors.join(", "))
+    )), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: "32px" } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态 - 链接跳转"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellUrl.PisellUrl,
+      {
+        mode: "read",
+        value: url || "https://www.example.com",
+        enableLinkClick: true,
+        openInNewWindow: true,
+        showLinkIcon: true,
+        onLinkClick: (val) => {
+          console.log("准备打开链接:", val);
+          alert(`准备打开链接: ${val}`);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "点击链接将在新窗口打开")), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: "32px" } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态 - 显示控制"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "24px", flexWrap: "wrap" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, minWidth: "200px" } }, /* @__PURE__ */ import_react.default.createElement("p", { style: { fontSize: "14px", marginBottom: "8px" } }, "完整:"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellUrl.PisellUrl,
+      {
+        mode: "read",
+        value: url || "https://www.example.com/path",
+        showProtocol: true
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, minWidth: "200px" } }, /* @__PURE__ */ import_react.default.createElement("p", { style: { fontSize: "14px", marginBottom: "8px" } }, "隐藏协议:"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellUrl.PisellUrl,
+      {
+        mode: "read",
+        value: url || "https://www.example.com/path",
+        showProtocol: false
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, minWidth: "200px" } }, /* @__PURE__ */ import_react.default.createElement("p", { style: { fontSize: "14px", marginBottom: "8px" } }, "仅域名:"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellUrl.PisellUrl,
+      {
+        mode: "read",
+        value: url || "https://www.example.com/path",
+        displayFormat: "domain"
+      }
+    )))));
+  }
+};
+var ProtocolDefaultComparison = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "20px", width: "500px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "默认 HTTPS"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      placeholder: "失焦后补全 https://",
+      autoCompleteProtocol: true,
+      defaultProtocol: "https://"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "默认 HTTP"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellUrl.PisellUrl,
+    {
+      placeholder: "失焦后补全 http://",
+      autoCompleteProtocol: true,
+      defaultProtocol: "http://"
+    }
+  )))
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AllStates,
+  Basic,
+  CompleteExample,
+  CustomStyle,
+  DisabledEdit,
+  DisabledRead,
+  DisplayFormatComparison,
+  FormatValidation,
+  HttpsOnly,
+  InteractiveExample,
+  LinkClickDemo,
+  ProtocolCompleteDemo,
+  ProtocolDefaultComparison,
+  ProtocolRestrictionDemo,
+  ReadMode,
+  ReadModeDomainOnly,
+  ReadModeHideProtocol,
+  RequireProtocol,
+  Required,
+  ValidateTriggerComparison,
+  WithAutoFocus,
+  WithClearButton,
+  WithProtocolAutoComplete
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { PisellUrlProps } from '../types';
+/**
+ * PisellUrl 禁用态视图组件
+ *
+ * 职责：
+ * - 渲染禁用状态的 URL 组件
+ * - 根据原始 mode 选择渲染 ReadOnlyView 或 EditView
+ * - 应用禁用样式（透明度 40%）
+ *
+ * @param props 组件 Props
+ */
+declare const DisabledView: React.FC<PisellUrlProps>;
+export default DisabledView;

package/lib/components/pisellUrl/components/DisabledView.js

@@ -0,0 +1,42 @@
+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/components/DisabledView.tsx
+var DisabledView_exports = {};
+__export(DisabledView_exports, {
+  default: () => DisabledView_default
+});
+module.exports = __toCommonJS(DisabledView_exports);
+var import_react = __toESM(require("react"));
+var import_ReadOnlyView = __toESM(require("./ReadOnlyView"));
+var import_EditView = __toESM(require("./EditView"));
+var DisabledView = (props) => {
+  const { mode = "edit" } = props;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-url-disabled" }, mode === "read" ? /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props }) : /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props }));
+};
+var DisabledView_default = DisabledView;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { PisellUrlProps } from '../types';
+/**
+ * PisellUrl 编辑态视图组件
+ *
+ * 职责：
+ * - 渲染编辑态 URL 输入框
+ * - 失焦时自动补全协议
+ * - 实时格式校验
+ * - 错误提示展示
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellUrlProps>;
+export default EditView;