@pisell/materials 3.3.82 → 3.3.83

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.less

@@ -0,0 +1,231 @@
+/**
+ * PisellMultipleSelect 组件样式
+ * 
+ * 注意：大部分样式通过 tokens.ts 中的 Select Token 配置实现
+ * 此文件仅包含 Token 无法实现的样式
+ */
+
+.pisell-multiple-select {
+  width: 100%;
+
+  // 包装器布局（Token 无法配置）
+  &-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  // 标签（Token 无法配置的自定义元素）
+  &-label {
+    font-family: 'Inter', sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    color: #344054;
+    line-height: 20px;
+
+    &-required::after {
+      content: ' *';
+      color: #D92D20;
+      margin-left: 0;
+    }
+  }
+
+  // 辅助文本（Token 无法配置的自定义元素）
+  &-helper-text {
+    font-size: 14px;
+    font-weight: 400;
+    color: #667085;
+    line-height: 20px;
+  }
+
+  // 错误文本（Token 无法配置的自定义元素）
+  &-error-text {
+    font-size: 14px;
+    font-weight: 400;
+    color: #D92D20;
+    line-height: 20px;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  // 下拉选项中的勾选图标（Figma 设计）
+  &-option-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &-option-check {
+    color: #7F56D9; // Primary/600
+    font-size: 16px;
+    margin-left: 8px;
+  }
+
+  // 多选模式下的特殊样式（Token 部分支持，Less 补充细节）
+  :global {
+    // 选择框垂直内边距（多选时需要更小的内边距以容纳标签）
+    .pisell-lowcode-select-multiple .pisell-lowcode-select-selector {
+      padding: 6px 16px !important;
+    }
+
+    // 标签圆角（Token 不支持 multipleItemBorderRadius）
+    .pisell-lowcode-select-selection-item {
+      border-radius: 6px !important;
+      padding: 6px 10px !important;
+      margin-inline-end: 4px !important;
+
+      // 确保标签内容垂直居中
+      &-content {
+        line-height: 24px !important;
+      }
+
+      // 删除图标样式微调
+      &-remove {
+        margin-left: 4px !important;
+
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    // hover 边框颜色（Token 不支持 colorBorderHover）
+    .pisell-lowcode-select-multiple:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input):not(.ant-select-open) {
+      .ant-select-selector:hover {
+        border-color: #D6BBFB !important;
+      }
+    }
+  }
+}
+
+// 下拉框内的搜索框样式（Figma 设计）
+:global {
+  .pisell-select-search-wrapper {
+    padding: 6px;
+    border-bottom: 1px solid #EAECF0;
+  }
+
+  .pisell-select-search-input {
+    padding: 9px 10px !important;
+    font-size: 14px;
+
+    .ant-input {
+      font-size: 14px !important;
+      color: #344054 !important;
+
+      &::placeholder {
+        color: #98A2B3 !important;
+        font-size: 12px !important;
+      }
+    }
+
+    &:hover,
+    &:focus-within {
+      background-color: transparent !important;
+    }
+  }
+}
+
+.pisell-multiple-select {
+  // 错误状态（Token 无法单独配置错误边框颜色）
+  &-error {
+    :global(.ant-select-selector) {
+      border-color: #D92D20 !important;
+
+      &:hover {
+        border-color: #D92D20 !important;
+      }
+    }
+
+    :global(.ant-select-focused .ant-select-selector) {
+      border-color: #D92D20 !important;
+      box-shadow: 0px 0px 0px 4px rgba(217, 45, 32, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    }
+  }
+
+  // 自定义聚合标签样式（用于 maxTagPlaceholder 返回的元素，不受 Token 控制）
+  &-more-tag {
+    display: inline-flex;
+    align-items: center;
+    background-color: #EAECF0;
+    color: #344054;
+    border: none;
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #D0D5DD;
+    }
+  }
+
+  // 只读状态（完全自定义的显示，不使用 Select 组件）
+  &-readonly {
+    &-display {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      padding: 12px 16px;
+      background-color: #F9FAFB;
+      border: 1px solid #EAECF0;
+      border-radius: 8px;
+      min-height: 48px;
+    }
+
+    &-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 10px;
+      background-color: #EAECF0;
+      border: none;
+      border-radius: 6px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      color: #344054;
+
+      &-icon {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &-more-tag {
+      display: inline-flex;
+      align-items: center;
+      padding: 6px 10px;
+      background-color: #EAECF0;
+      color: #344054;
+      border: none;
+      border-radius: 6px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      cursor: pointer;
+    }
+
+    &-empty {
+      color: #667085;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+    }
+  }
+}
+
+// 动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.stories.d.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellMultipleSelect from './PisellMultipleSelect';
+/**
+ * PisellMultipleSelect 组件 Storybook
+ *
+ * 用于展示和测试组件的各种状态和配置
+ */
+declare const meta: Meta<typeof PisellMultipleSelect>;
+export default meta;
+declare type Story = StoryObj<typeof PisellMultipleSelect>;
+/**
+ * 基础示例
+ */
+export declare const Basic: Story;
+/**
+ * 带标签
+ */
+export declare const WithLabel: Story;
+/**
+ * 标签聚合功能
+ */
+export declare const TagAggregation: Story;
+/**
+ * 最大可选数量限制
+ */
+export declare const WithMaxCount: Story;
+/**
+ * 带搜索功能
+ */
+export declare const WithSearch: Story;
+/**
+ * 带清空按钮
+ */
+export declare const WithClear: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 只读态
+ */
+export declare const ReadOnly: Story;
+/**
+ * 只读态 - 标签聚合
+ */
+export declare const ReadOnlyWithAggregation: Story;
+/**
+ * 只读态 - 空值
+ */
+export declare const ReadOnlyEmpty: Story;
+/**
+ * 错误状态
+ */
+export declare const WithError: Story;
+/**
+ * 不同尺寸
+ */
+export declare const Sizes: Story;
+/**
+ * 表单场景
+ */
+export declare const InForm: Story;
+/**
+ * 回调事件演示
+ */
+export declare const WithCallbacks: Story;
+/**
+ * 所有状态组合
+ */
+export declare const AllStates: Story;