@pisell/private-materials 6.8.11 → 6.8.12

package/lib/pro/Selector/components/Card/index.less

@@ -1,132 +1,162 @@
 /* Card组件样式 */
-.pisell-selector_card-item {
+.pisell-pro-card {
   position: relative;
   display: flex;
   border-radius: 8px;
-  border: 1px solid #d9d9d9;
-  background-color: #ffffff;
-  cursor: pointer;
   transition: all 0.2s;
+  box-sizing: border-box;
   overflow: hidden;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
 
-  .pisell-selector_card-label {
-    flex: 1;
-  }
-
-  &:hover {
-    border-color: #7f56d9;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    color: #98a2b3;
-    background-color: #f9fafb;
-
-    &:hover {
-      border-color: #d0d5dd;
-      box-shadow: none;
-    }
-  }
-
-  &.bordered {
+  /* 变体样式 */
+  &-outlined {
     border: 1px solid #d0d5dd;
   }
 
-  &:not(.bordered) {
-    border: none;
+  &-borderless {
+    border: 1px solid transparent;
+    box-shadow: none;
+    outline: none;
   }
 
-  /* 垂直布局 */
-  &.pisell-selector_card-item-vertical {
+  /* 布局样式 */
+  &-vertical {
     flex-direction: column;
-    align-items: stretch;
     border-radius: 12px;
 
-    .pisell-selector_card-content {
+    .pisell-pro-card_content {
+      flex: 1;
+    }
+
+    .pisell-pro-card_actions {
+      display: flex;
+      align-items: center;
       justify-content: center;
+      margin: 0;
     }
 
-    .pisell-selector_card-extra {
-      padding: 20px;
-      width: 100%;
+    .pisell-pro-card_actions-item {
+      margin: 20px 0;
     }
   }
 
-  /* 水平布局 */
-  &.pisell-selector_card-item-horizontal {
+  &-horizontal {
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
-    padding: 8px;
+    gap: 10px;
 
-    .pisell-selector_card-content {
+    .pisell-pro-card_content {
       flex: 1;
+      font-size: 16px;
+    }
+
+    .pisell-pro-card_actions {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+    }
+
+    .pisell-pro-card_actions-item {
+      margin: 0;
     }
   }
 
-  /* 选中状态样式 */
-  &.selected-default {
-    border-color: #7f56d9;
-    background-color: #f9f5ff;
-    color: #7f56d9;
+  /* 可悬停效果 */
+  &-hoverable:not(&-disabled):hover {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
   }
 
-  &.selected-filled {
-    border-color: #7f56d9;
-    background-color: #7f56d9;
-    color: #ffffff;
+  /* 可点击样式 */
+  &-clickable:not(&-disabled) {
+    cursor: pointer;
+  }
 
-    .pisell-selector_card-selected-icon {
-      color: #ffffff;
+  /* 禁用状态 */
+  &-disabled {
+    cursor: not-allowed;
+    color: #98a2b3;
+    background-color: #f9fafb;
+
+    &:hover {
+      box-shadow: none;
+      transform: none;
     }
   }
 
-  &.selected-cornered {
-    border-color: #7f56d9;
-    position: relative;
+  /* 选中状态 - outlined类型 */
+  &-selected&-selected-outlined {
+    &.pisell-pro-card-outlined {
+      border-color: #7f56d9;
+      background-color: #f9f5ff;
+    }
+
+    &.pisell-pro-card-borderless {
+      border-color: #7f56d9;
+    }
+    .pisell-pro-card_content {
+      color: #7f56d9;
+    }
   }
-}
 
-/* 卡片内容区域 */
-.pisell-selector_card-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  min-height: 32px;
+  /* 选中状态 - outlined-bold类型（加粗边框，使用 outline 实现不影响布局） */
+  &-selected&-selected-outlined-bold {
+    &.pisell-pro-card-outlined {
+      border-color: #7f56d9;
+      background-color: #f9f5ff;
+      outline: 2px solid #7f56d9;
+      outline-offset: -2px;
+    }
 
-  &.content-start {
-    justify-content: flex-start;
+    &.pisell-pro-card-borderless {
+      border-color: #7f56d9;
+      outline: 2px solid #7f56d9;
+      outline-offset: -2px;
+    }
+    .pisell-pro-card_content {
+      color: #7f56d9;
+    }
+  }
+
+  /* 选中状态 - filled类型 */
+  &-selected&-selected-filled {
+    &.pisell-pro-card-outlined,
+    &.pisell-pro-card-borderless {
+      background-color: #7f56d9;
+      color: #ffffff;
+      border-color: #7f56d9;
+
+      .pisell-pro-card_content {
+        color: #ffffff;
+      }
+    }
   }
 }
 
-/* 控制器区域 */
-.pisell-selector_card-extra {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* 操作区域 */
+.pisell-pro-card_actions {
+  flex-shrink: 0;
+
+  &-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+  }
 }
 
-/* Cornered布局的trigger（右上角） */
-.pisell-selector_card-trigger-cornered {
+/* 角标区域 */
+.pisell-pro-card_corner {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 12px;
+  right: 12px;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-/* trigger和numberSelector的样式优化 */
-.pisell-selector_card-item {
-  :global(.pisell-selector_radio-trigger),
-  :global(.pisell-selector_checkbox-trigger) {
-    margin: 0;
-
-    .ant-radio,
-    .ant-checkbox {
-      margin-right: 0;
-    }
-  }
+/* 禁用状态下的角标 */
+.pisell-pro-card-disabled .pisell-pro-card_corner {
+  opacity: 0.5;
 }

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

package/lib/pro/Selector/components/Indicator/index.js

@@ -0,0 +1,129 @@
+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/pro/Selector/components/Indicator/index.tsx
+var Indicator_exports = {};
+__export(Indicator_exports, {
+  default: () => Indicator_default
+});
+module.exports = __toCommonJS(Indicator_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_index = require("./index.less");
+var sizeMap = {
+  small: 20,
+  middle: 24,
+  large: 28
+};
+var Indicator = (props) => {
+  const {
+    mode = "single",
+    variant = "outlined",
+    disabled = false,
+    className,
+    styles = {},
+    children,
+    size = "middle",
+    onChange,
+    defaultChecked,
+    checked: checkedProp
+  } = props;
+  const [internalChecked, setInternalChecked] = (0, import_react.useState)(
+    defaultChecked || false
+  );
+  (0, import_react.useEffect)(() => {
+    if (checkedProp !== void 0) {
+      setInternalChecked(checkedProp);
+    }
+  }, [checkedProp]);
+  const isControlled = checkedProp !== void 0;
+  const checked = isControlled ? checkedProp : internalChecked;
+  const prefixCls = "pisell-pro-indicator";
+  const classes = (0, import_classnames.default)(
+    prefixCls,
+    `${prefixCls}-${mode}`,
+    `${prefixCls}-${variant}`,
+    {
+      [`${prefixCls}-checked`]: checked,
+      [`${prefixCls}-disabled`]: disabled
+    },
+    className
+  );
+  const indicatorStyle = (0, import_react.useMemo)(() => {
+    const sizeValue = sizeMap[size] || Number(size);
+    return {
+      width: sizeValue,
+      height: sizeValue,
+      ...styles.indicator
+    };
+  }, [size, styles.indicator]);
+  const handleInputChange = (e) => {
+    if (disabled) return;
+    if (!isControlled) {
+      setInternalChecked(e.target.checked);
+    }
+    onChange == null ? void 0 : onChange(e);
+  };
+  const renderCheckIcon = () => {
+    const sizeValue = sizeMap[size] || Number(size);
+    const iconSize = sizeValue * 0.6;
+    const strokeWidth = iconSize * 0.15;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "svg",
+      {
+        className: `${prefixCls}-check-icon`,
+        width: iconSize,
+        height: iconSize * 0.76,
+        viewBox: "0 0 17 13",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "path",
+        {
+          d: "M14.8814 1.44043L5.64141 10.6804L1.44141 6.48043",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement("label", { className: classes, style: styles.container }, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      type: mode === "single" ? "radio" : "checkbox",
+      className: `${prefixCls}-input`,
+      checked: !!checked,
+      disabled,
+      onChange: handleInputChange
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-inner`, style: indicatorStyle }, checked && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, mode === "single" && variant === "outlined" ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-dot` }) : renderCheckIcon())), children && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-content` }, children));
+};
+var Indicator_default = Indicator;

package/lib/pro/Selector/components/Indicator/index.less

@@ -0,0 +1,114 @@
+.pisell-pro-indicator {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  font-size: 14px;
+  line-height: 1.5;
+  position: relative;
+
+  &-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    z-index: -1;
+    pointer-events: none;
+  }
+
+  &-inner {
+    position: relative;
+    box-sizing: border-box;
+    border: 1px solid #d0d5dd;
+    background-color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+
+    svg {
+      color: inherit;
+    }
+  }
+
+  &-content {
+    margin-left: 10px;
+    word-break: break-word;
+  }
+
+  &-single &-inner {
+    border-radius: 50%;
+    border-width: 1.2px;
+  }
+
+  &-multiple &-inner {
+    border-radius: 6px;
+    border-width: 1.4px;
+  }
+
+  &-single.pisell-pro-indicator-outlined.pisell-pro-indicator-checked &-inner {
+    border-color: #7f56d9;
+    background-color: #ffffff;
+  }
+
+  &-single.pisell-pro-indicator-outlined &-dot {
+    width: 45%;
+    height: 45%;
+    background-color: #7f56d9;
+    border-radius: 50%;
+  }
+
+  &-single.pisell-pro-indicator-filled.pisell-pro-indicator-checked &-inner {
+    border-color: #7f56d9;
+    background-color: #7f56d9;
+  }
+
+  &-single.pisell-pro-indicator-filled &-check-icon {
+    color: #ffffff;
+  }
+
+  &-multiple.pisell-pro-indicator-outlined.pisell-pro-indicator-checked &-inner {
+    border-color: #7f56d9;
+    background-color: #ffffff;
+  }
+
+  &-multiple.pisell-pro-indicator-outlined &-check-icon {
+    color: #7f56d9;
+  }
+
+  &-multiple.pisell-pro-indicator-filled.pisell-pro-indicator-checked &-inner {
+    border-color: #7f56d9;
+    background-color: #7f56d9;
+  }
+
+  &-multiple.pisell-pro-indicator-filled &-check-icon {
+    color: #ffffff;
+  }
+
+  &-check-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+    color: #98a2b3;
+  }
+
+  &-disabled.pisell-pro-indicator-outlined &-inner {
+    border-color: #eaecf0 !important;
+    background-color: #f9fafb !important;
+    color: #98a2b3 !important;
+  }
+
+  &-disabled.pisell-pro-indicator-filled &-inner {
+    border-color: #eaecf0 !important;
+    background-color: #eaecf0 !important;
+  }
+}

package/lib/pro/Selector/components/LayoutContainer/index.js

@@ -0,0 +1,64 @@
+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/pro/Selector/components/LayoutContainer/index.tsx
+var LayoutContainer_exports = {};
+__export(LayoutContainer_exports, {
+  default: () => LayoutContainer_default
+});
+module.exports = __toCommonJS(LayoutContainer_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var ARow = import_antd.Row;
+var ACol = import_antd.Col;
+function LayoutContainer({
+  className: containerClassName,
+  config,
+  children
+}) {
+  if (!config) {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: containerClassName }, children);
+  }
+  const { type, className, containerStyle = {} } = config;
+  if (type !== "antdGrid") {
+    const layoutClassName = (0, import_classnames.default)(containerClassName, className);
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: layoutClassName, style: containerStyle }, children);
+  }
+  const { columns = 1, align, justify, gutter, wrap, colConfig = {} } = config;
+  return /* @__PURE__ */ import_react.default.createElement(ARow, { gutter, justify, align, wrap }, children.map((child, index) => /* @__PURE__ */ import_react.default.createElement(
+    ACol,
+    {
+      key: index,
+      span: columns ? 24 / columns : void 0,
+      ...colConfig
+    },
+    child
+  )));
+}
+var LayoutContainer_default = LayoutContainer;