function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { PisellUrl } from "./PisellUrl";
import React from 'react';

/**
 * PisellUrl 是一个 URL 地址输入/展示组件。
 * 
 * ## 功能特性
 * - 支持三种状态：只读、编辑、禁用
 * - URL 格式校验
 * - 协议自动补全
 * - 链接跳转（新窗口，安全性保障）
 * - 协议/路径显示控制
 * - 协议白名单限制
 */
var meta = {
  title: '表单/表单组件/PisellUrl',
  component: 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: '显示链接图标'
    }
  }
};
export default meta;
/**
 * 基础编辑态
 */
export var Basic = {
  args: {
    mode: 'edit',
    placeholder: '请输入网址'
  }
};

/**
 * 协议自动补全
 */
export var WithProtocolAutoComplete = {
  args: {
    mode: 'edit',
    autoCompleteProtocol: true,
    defaultProtocol: 'https://',
    placeholder: '输入网址，失焦后自动补全协议'
  }
};

/**
 * 只读态 - 可跳转
 */
export var ReadMode = {
  args: {
    mode: 'read',
    value: 'https://www.example.com',
    enableLinkClick: true,
    openInNewWindow: true
  }
};

/**
 * 只读态 - 隐藏协议
 */
export var ReadModeHideProtocol = {
  args: {
    mode: 'read',
    value: 'https://www.example.com/path',
    showProtocol: false
  }
};

/**
 * 只读态 - 仅域名
 */
export var ReadModeDomainOnly = {
  args: {
    mode: 'read',
    value: 'https://www.example.com/path/to/page',
    displayFormat: 'domain'
  }
};

/**
 * 禁用态（编辑）
 */
export var DisabledEdit = {
  args: {
    mode: 'edit',
    value: 'https://example.com',
    disabled: true
  }
};

/**
 * 禁用态（只读）
 */
export var DisabledRead = {
  args: {
    mode: 'read',
    value: 'https://example.com',
    disabled: true
  }
};

/**
 * 必填校验
 */
export var Required = {
  args: {
    mode: 'edit',
    placeholder: '请输入网址（必填）',
    required: true,
    validateTrigger: 'onBlur'
  }
};

/**
 * 格式校验（实时）
 */
export var FormatValidation = {
  args: {
    mode: 'edit',
    placeholder: '请输入网址',
    validateTrigger: 'onChange'
  }
};

/**
 * 协议限制（仅 HTTPS）
 */
export var HttpsOnly = {
  args: {
    mode: 'edit',
    allowedProtocols: ['https'],
    placeholder: '仅支持 HTTPS 协议',
    validateTrigger: 'onBlur'
  }
};

/**
 * 协议必需
 */
export var RequireProtocol = {
  args: {
    mode: 'edit',
    requireProtocol: true,
    autoCompleteProtocol: false,
    placeholder: '必须输入完整 URL（含协议）',
    validateTrigger: 'onBlur'
  }
};

/**
 * 显示清空按钮
 */
export var WithClearButton = {
  args: {
    mode: 'edit',
    defaultValue: 'https://example.com',
    allowClear: true,
    placeholder: '请输入网址'
  }
};

/**
 * 自动聚焦
 */
export var WithAutoFocus = {
  args: {
    mode: 'edit',
    autoFocus: true,
    placeholder: '自动获得焦点'
  }
};

/**
 * 自定义样式（只读态）
 */
export var CustomStyle = {
  args: {
    mode: 'read',
    value: 'https://example.com',
    fontSize: 18,
    fontWeight: 600,
    linkColor: '#FF5722'
  }
};

/**
 * 显示控制对比
 */
export var DisplayFormatComparison = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: '16px',
        width: '500px'
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u5B8C\u6574 URL\uFF08\u542B\u534F\u8BAE\uFF09:"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: "https://www.example.com/path/to/page",
      displayFormat: "full",
      showProtocol: true
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u9690\u85CF\u534F\u8BAE:"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: "https://www.example.com/path/to/page",
      showProtocol: false
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u9690\u85CF\u8DEF\u5F84\uFF08\u663E\u793A\u534F\u8BAE+\u57DF\u540D\uFF09:"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: "https://www.example.com/path/to/page",
      showProtocol: true,
      showPathname: false
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u4EC5\u57DF\u540D:"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: "https://www.example.com/path/to/page",
      displayFormat: "domain"
    })));
  }
};

/**
 * 校验时机对比
 */
export var ValidateTriggerComparison = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: '20px',
        width: '400px'
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u8F93\u5165\u65F6\u6821\u9A8C\uFF08onChange\uFF09"), /*#__PURE__*/React.createElement(PisellUrl, {
      placeholder: "\u8F93\u5165\u65F6\u5373\u65F6\u6821\u9A8C",
      required: true,
      validateTrigger: "onChange"
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u5931\u7126\u65F6\u6821\u9A8C\uFF08onBlur\uFF09"), /*#__PURE__*/React.createElement(PisellUrl, {
      placeholder: "\u5931\u7126\u540E\u6821\u9A8C",
      required: true,
      validateTrigger: "onBlur"
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u4E24\u8005\u90FD\u6821\u9A8C\uFF08both\uFF09"), /*#__PURE__*/React.createElement(PisellUrl, {
      placeholder: "\u8F93\u5165\u548C\u5931\u7126\u90FD\u6821\u9A8C",
      required: true,
      validateTrigger: "both"
    })));
  }
};

/**
 * 所有状态展示
 */
export var AllStates = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: '24px',
        width: '500px'
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7F16\u8F91\u6001"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "edit",
      defaultValue: "https://example.com",
      placeholder: "\u8BF7\u8F93\u5165\u7F51\u5740",
      allowClear: true
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: "https://example.com",
      enableLinkClick: true
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7981\u7528\u6001\uFF08\u7F16\u8F91\uFF09"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "edit",
      value: "https://example.com",
      disabled: true
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7981\u7528\u6001\uFF08\u53EA\u8BFB\uFF09"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: "https://example.com",
      disabled: true
    })));
  }
};

/**
 * 完整功能示例
 */
export var CompleteExample = {
  render: function render() {
    var _React$useState = React.useState(''),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      url = _React$useState2[0],
      setUrl = _React$useState2[1];
    return /*#__PURE__*/React.createElement("div", {
      style: {
        width: '600px',
        display: 'flex',
        flexDirection: 'column',
        gap: '24px'
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7F16\u8F91\u6001 - \u534F\u8BAE\u8865\u5168 + \u683C\u5F0F\u6821\u9A8C"), /*#__PURE__*/React.createElement(PisellUrl, {
      value: url,
      onChange: function onChange(val) {
        setUrl(val);
        console.log('URL 变化:', val);
      },
      placeholder: "\u8BF7\u8F93\u5165\u7F51\u5740\uFF08\u8BD5\u8BD5\u8F93\u5165 example.com\uFF09",
      autoCompleteProtocol: true,
      defaultProtocol: "https://",
      required: true,
      validateTrigger: "both",
      allowClear: true,
      onProtocolComplete: function onProtocolComplete(val) {
        console.log('协议补全:', val);
      },
      onValidate: function onValidate(isValid, errors) {
        console.log('校验结果:', isValid, errors);
      }
    }), /*#__PURE__*/React.createElement("p", {
      style: {
        marginTop: '8px',
        color: '#667085',
        fontSize: '12px'
      }
    }, "\u5F53\u524D\u503C\uFF1A", url || '（未输入）')), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u53EF\u8DF3\u8F6C"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: url || 'https://www.example.com',
      enableLinkClick: true,
      openInNewWindow: true,
      showLinkIcon: true,
      onLinkClick: function onLinkClick(val) {
        console.log('点击链接:', val);
      }
    }), /*#__PURE__*/React.createElement("p", {
      style: {
        color: '#667085',
        fontSize: '12px',
        marginTop: '8px'
      }
    }, "\u70B9\u51FB\u94FE\u63A5\u5C06\u5728\u65B0\u7A97\u53E3\u6253\u5F00")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u663E\u793A\u63A7\u5236"), /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: '12px'
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        fontSize: '14px',
        color: '#667085'
      }
    }, "\u5B8C\u6574 URL:"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: url || 'https://www.example.com/path',
      showProtocol: true
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        fontSize: '14px',
        color: '#667085'
      }
    }, "\u9690\u85CF\u534F\u8BAE:"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: url || 'https://www.example.com/path',
      showProtocol: false
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        fontSize: '14px',
        color: '#667085'
      }
    }, "\u4EC5\u57DF\u540D:"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: url || 'https://www.example.com/path',
      displayFormat: "domain"
    })))));
  }
};

/**
 * 协议补全演示
 */
export var ProtocolCompleteDemo = {
  render: function render() {
    var _React$useState3 = React.useState(''),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      url = _React$useState4[0],
      setUrl = _React$useState4[1];
    return /*#__PURE__*/React.createElement("div", {
      style: {
        width: '500px'
      }
    }, /*#__PURE__*/React.createElement("h3", null, "\u534F\u8BAE\u8865\u5168\u6F14\u793A"), /*#__PURE__*/React.createElement("p", {
      style: {
        color: '#667085',
        fontSize: '14px',
        marginBottom: '16px'
      }
    }, "\u8F93\u5165\u7F51\u5740\u540E\u5931\u7126\uFF0C\u4F1A\u81EA\u52A8\u8865\u5168 https:// \u534F\u8BAE"), /*#__PURE__*/React.createElement(PisellUrl, {
      value: url,
      onChange: setUrl,
      autoCompleteProtocol: true,
      defaultProtocol: "https://",
      placeholder: "\u8BD5\u8BD5\u8F93\u5165 example.com \u7136\u540E\u5931\u7126",
      onProtocolComplete: function onProtocolComplete(val) {
        console.log('协议补全:', val);
        alert("\u534F\u8BAE\u5DF2\u8865\u5168: ".concat(val));
      }
    }), /*#__PURE__*/React.createElement("p", {
      style: {
        marginTop: '8px',
        color: '#667085',
        fontSize: '12px'
      }
    }, "\u5F53\u524D\u503C\uFF1A", url || '（未输入）'));
  }
};

/**
 * 链接跳转演示
 */
export var LinkClickDemo = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: '24px',
        width: '500px'
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u65B0\u7A97\u53E3\u6253\u5F00\uFF08\u9ED8\u8BA4\uFF09"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: "https://www.example.com",
      enableLinkClick: true,
      openInNewWindow: true,
      showLinkIcon: true
    }), /*#__PURE__*/React.createElement("p", {
      style: {
        color: '#667085',
        fontSize: '12px',
        marginTop: '8px'
      }
    }, "\u70B9\u51FB\u540E\u5728\u65B0\u7A97\u53E3\u6253\u5F00\uFF08\u5E26 noopener,noreferrer\uFF09")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u5F53\u524D\u7A97\u53E3\u6253\u5F00"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: "https://www.example.com",
      enableLinkClick: true,
      openInNewWindow: false,
      showLinkIcon: true
    }), /*#__PURE__*/React.createElement("p", {
      style: {
        color: '#667085',
        fontSize: '12px',
        marginTop: '8px'
      }
    }, "\u70B9\u51FB\u540E\u5728\u5F53\u524D\u7A97\u53E3\u6253\u5F00")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7981\u7528\u8DF3\u8F6C"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: "https://www.example.com",
      enableLinkClick: false
    }), /*#__PURE__*/React.createElement("p", {
      style: {
        color: '#667085',
        fontSize: '12px',
        marginTop: '8px'
      }
    }, "\u4EC5\u5C55\u793A\uFF0C\u4E0D\u53EF\u70B9\u51FB")));
  }
};

/**
 * 协议限制演示
 */
export var ProtocolRestrictionDemo = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: '24px',
        width: '500px'
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u4EC5\u5141\u8BB8 HTTPS"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "edit",
      allowedProtocols: ['https'],
      placeholder: "\u4EC5\u652F\u6301 HTTPS \u534F\u8BAE",
      validateTrigger: "onBlur",
      defaultValue: ""
    }), /*#__PURE__*/React.createElement("p", {
      style: {
        color: '#667085',
        fontSize: '12px',
        marginTop: '8px'
      }
    }, "\u53EA\u5141\u8BB8 https:// \u534F\u8BAE")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u5141\u8BB8 HTTP \u548C HTTPS"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "edit",
      allowedProtocols: ['http', 'https'],
      placeholder: "\u652F\u6301 HTTP \u548C HTTPS",
      validateTrigger: "onBlur",
      defaultValue: ""
    }), /*#__PURE__*/React.createElement("p", {
      style: {
        color: '#667085',
        fontSize: '12px',
        marginTop: '8px'
      }
    }, "\u5141\u8BB8 http:// \u548C https://")));
  }
};

/**
 * 完整交互示例
 */
export var InteractiveExample = {
  render: function render() {
    var _React$useState5 = React.useState(''),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      url = _React$useState6[0],
      setUrl = _React$useState6[1];
    var _React$useState7 = React.useState(true),
      _React$useState8 = _slicedToArray(_React$useState7, 2),
      isValid = _React$useState8[0],
      setIsValid = _React$useState8[1];
    var _React$useState9 = React.useState([]),
      _React$useState10 = _slicedToArray(_React$useState9, 2),
      errors = _React$useState10[0],
      setErrors = _React$useState10[1];
    return /*#__PURE__*/React.createElement("div", {
      style: {
        width: '600px'
      }
    }, /*#__PURE__*/React.createElement("h2", null, "PisellUrl \u5B8C\u6574\u529F\u80FD\u6F14\u793A"), /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: '24px'
      }
    }, /*#__PURE__*/React.createElement("h3", null, "\u7F16\u8F91\u6001 - \u534F\u8BAE\u8865\u5168 + \u683C\u5F0F\u6821\u9A8C"), /*#__PURE__*/React.createElement(PisellUrl, {
      value: url,
      onChange: setUrl,
      placeholder: "\u8BD5\u8BD5\u8F93\u5165 example.com \u7136\u540E\u5931\u7126",
      autoCompleteProtocol: true,
      defaultProtocol: "https://",
      required: true,
      validateTrigger: "both",
      allowClear: true,
      onProtocolComplete: function onProtocolComplete(val) {
        console.log('协议补全:', val);
      },
      onValidate: function onValidate(valid, errs) {
        setIsValid(valid);
        setErrors(errs);
        console.log('校验结果:', {
          valid: valid,
          errs: errs
        });
      },
      onBlur: function onBlur(val) {
        console.log('失焦，当前值:', val);
      }
    }), /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: '16px',
        padding: '12px',
        background: '#f5f5f5',
        borderRadius: '4px'
      }
    }, /*#__PURE__*/React.createElement("p", {
      style: {
        margin: '4px 0',
        fontSize: '14px'
      }
    }, /*#__PURE__*/React.createElement("strong", null, "\u5F53\u524D\u503C:"), " ", url || '（未输入）'), /*#__PURE__*/React.createElement("p", {
      style: {
        margin: '4px 0',
        fontSize: '14px'
      }
    }, /*#__PURE__*/React.createElement("strong", null, "\u6821\u9A8C\u72B6\u6001:"), " ", isValid ? '✅ 通过' : '❌ 未通过'), !isValid && errors.length > 0 && /*#__PURE__*/React.createElement("p", {
      style: {
        margin: '4px 0',
        fontSize: '14px',
        color: '#ff4d4f'
      }
    }, /*#__PURE__*/React.createElement("strong", null, "\u9519\u8BEF\u4FE1\u606F:"), " ", errors.join(', ')))), /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: '32px'
      }
    }, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u94FE\u63A5\u8DF3\u8F6C"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: url || 'https://www.example.com',
      enableLinkClick: true,
      openInNewWindow: true,
      showLinkIcon: true,
      onLinkClick: function onLinkClick(val) {
        console.log('准备打开链接:', val);
        alert("\u51C6\u5907\u6253\u5F00\u94FE\u63A5: ".concat(val));
      }
    }), /*#__PURE__*/React.createElement("p", {
      style: {
        color: '#667085',
        fontSize: '12px',
        marginTop: '8px'
      }
    }, "\u70B9\u51FB\u94FE\u63A5\u5C06\u5728\u65B0\u7A97\u53E3\u6253\u5F00")), /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: '32px'
      }
    }, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u663E\u793A\u63A7\u5236"), /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        gap: '24px',
        flexWrap: 'wrap'
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        flex: 1,
        minWidth: '200px'
      }
    }, /*#__PURE__*/React.createElement("p", {
      style: {
        fontSize: '14px',
        marginBottom: '8px'
      }
    }, "\u5B8C\u6574:"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: url || 'https://www.example.com/path',
      showProtocol: true
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        flex: 1,
        minWidth: '200px'
      }
    }, /*#__PURE__*/React.createElement("p", {
      style: {
        fontSize: '14px',
        marginBottom: '8px'
      }
    }, "\u9690\u85CF\u534F\u8BAE:"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: url || 'https://www.example.com/path',
      showProtocol: false
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        flex: 1,
        minWidth: '200px'
      }
    }, /*#__PURE__*/React.createElement("p", {
      style: {
        fontSize: '14px',
        marginBottom: '8px'
      }
    }, "\u4EC5\u57DF\u540D:"), /*#__PURE__*/React.createElement(PisellUrl, {
      mode: "read",
      value: url || 'https://www.example.com/path',
      displayFormat: "domain"
    })))));
  }
};

/**
 * 协议默认值对比
 */
export var ProtocolDefaultComparison = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: '20px',
        width: '500px'
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u9ED8\u8BA4 HTTPS"), /*#__PURE__*/React.createElement(PisellUrl, {
      placeholder: "\u5931\u7126\u540E\u8865\u5168 https://",
      autoCompleteProtocol: true,
      defaultProtocol: "https://"
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u9ED8\u8BA4 HTTP"), /*#__PURE__*/React.createElement(PisellUrl, {
      placeholder: "\u5931\u7126\u540E\u8865\u5168 http://",
      autoCompleteProtocol: true,
      defaultProtocol: "http://"
    })));
  }
};