@tendaui/components 1.0.0

package/select-input/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/select-input/_index.scss";

package/select-input/type.ts

@@ -0,0 +1,280 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { InputProps } from '../input';
+import { PopupProps } from '../popup';
+import {
+  TagInputProps,
+  TagInputValue,
+  TagInputChangeContext,
+} from '../tag-input';
+import { TagProps } from '../tag';
+import { PopupVisibleChangeContext } from '../popup';
+import { TNode, TElement, SizeEnum } from '../common';
+import {
+  MouseEvent,
+  KeyboardEvent,
+  ClipboardEvent,
+  FocusEvent,
+  FormEvent,
+  CompositionEvent,
+} from 'react';
+
+export interface TdSelectInputProps {
+  /**
+   * 是否允许输入
+   * @default false
+   */
+  allowInput?: boolean;
+  /**
+   * 宽度随内容自适应
+   * @default false
+   */
+  autoWidth?: boolean;
+  /**
+   * 自动聚焦
+   * @default false
+   */
+  autofocus?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
+  /**
+   * 是否可清空
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调
+   */
+  collapsedItems?: TNode<{
+    value: SelectInputValue;
+    collapsedSelectedItems: SelectInputValue;
+    count: number;
+    onClose: (context: { index: number; e?: MouseEvent }) => void;
+  }>;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * 透传 Input 输入框组件全部属性
+   */
+  inputProps?: InputProps;
+  /**
+   * 输入框的值
+   */
+  inputValue?: string;
+  /**
+   * 输入框的值，非受控属性
+   */
+  defaultInputValue?: string;
+  /**
+   * 定义字段别名，示例：`{ label: 'text', value: 'id', children: 'list' }`
+   */
+  keys?: SelectInputKeys;
+  /**
+   * 左侧文本
+   */
+  label?: TNode;
+  /**
+   * 是否处于加载状态
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 最小折叠数量，用于标签数量过多的情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠
+   * @default 0
+   */
+  minCollapsedNum?: number;
+  /**
+   * 是否为多选模式，默认为单选
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 下拉框内容，可完全自定义
+   */
+  panel?: TNode;
+  /**
+   * 占位符
+   * @default ''
+   */
+  placeholder?: string;
+  /**
+   * 透传 Popup 浮层组件全部属性
+   */
+  popupProps?: PopupProps;
+  /**
+   * 是否显示下拉框
+   */
+  popupVisible?: boolean;
+  /**
+   * 是否显示下拉框，非受控属性
+   */
+  defaultPopupVisible?: boolean;
+  /**
+   * 组件前置图标
+   */
+  prefixIcon?: TElement;
+  /**
+   * 只读状态，值为真会隐藏输入框，且无法打开下拉框
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
+   * @default false
+   */
+  reserveKeyword?: boolean;
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 输入框状态
+   * @default default
+   */
+  status?: 'default' | 'success' | 'warning' | 'error';
+  /**
+   * 后置图标前的后置内容
+   */
+  suffix?: TNode;
+  /**
+   * 组件后置图标
+   */
+  suffixIcon?: TElement;
+  /**
+   * 多选场景下，自定义选中标签的内部内容。注意和 `valueDisplay` 区分，`valueDisplay`  是用来定义全部标签内容，而非某一个标签
+   */
+  tag?: string | TNode<{ value: string | number }>;
+  /**
+   * 透传 TagInput 组件全部属性
+   */
+  tagInputProps?: TagInputProps;
+  /**
+   * 透传 Tag 标签组件全部属性
+   */
+  tagProps?: TagProps;
+  /**
+   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
+   */
+  tips?: TNode;
+  /**
+   * 全部标签值。值为数组表示多个标签，值为非数组表示单个数值
+   */
+  value?: SelectInputValue;
+  /**
+   * 自定义值呈现的全部内容，参数为所有标签的值
+   */
+  valueDisplay?:
+    | string
+    | TNode<{
+        value: TagInputValue;
+        onClose: (index: number, item?: any) => void;
+      }>;
+  /**
+   * 失去焦点时触发，`context.inputValue` 表示输入框的值；`context.tagInputValue` 表示标签输入框的值
+   */
+  onBlur?: (value: SelectInputValue, context: SelectInputBlurContext) => void;
+  /**
+   * 清空按钮点击时触发
+   */
+  onClear?: (context: { e: MouseEvent<SVGSVGElement> }) => void;
+  /**
+   * 按键按下 Enter 时触发
+   */
+  onEnter?: (
+    value: SelectInputValue,
+    context: {
+      e: KeyboardEvent<HTMLDivElement>;
+      inputValue: string;
+      tagInputValue?: TagInputValue;
+    },
+  ) => void;
+  /**
+   * 聚焦时触发
+   */
+  onFocus?: (value: SelectInputValue, context: SelectInputFocusContext) => void;
+  /**
+   * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发等
+   */
+  onInputChange?: (
+    value: string,
+    context?: SelectInputValueChangeContext,
+  ) => void;
+  /**
+   * 进入输入框时触发
+   */
+  onMouseenter?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 离开输入框时触发
+   */
+  onMouseleave?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 粘贴事件，`pasteValue` 表示粘贴板的内容
+   */
+  onPaste?: (context: {
+    e: ClipboardEvent<HTMLDivElement>;
+    pasteValue: string;
+  }) => void;
+  /**
+   * 下拉框显示或隐藏时触发
+   */
+  onPopupVisibleChange?: (
+    visible: boolean,
+    context: PopupVisibleChangeContext,
+  ) => void;
+  /**
+   * 值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数
+   */
+  onTagChange?: (
+    value: TagInputValue,
+    context: SelectInputChangeContext,
+  ) => void;
+}
+
+export interface SelectInputKeys {
+  label?: string;
+  value?: string;
+  children?: string;
+}
+
+export type SelectInputValue =
+  | string
+  | number
+  | boolean
+  | Date
+  | Object
+  | Array<any>
+  | Array<SelectInputValue>;
+
+export type SelectInputBlurContext = PopupVisibleChangeContext & {
+  inputValue: string;
+  tagInputValue?: TagInputValue;
+};
+
+export interface SelectInputFocusContext {
+  inputValue: string;
+  tagInputValue?: TagInputValue;
+  e: FocusEvent<HTMLInputElement>;
+}
+
+export interface SelectInputValueChangeContext {
+  e?:
+    | Event
+    | FormEvent<HTMLInputElement>
+    | MouseEvent<HTMLElement | SVGElement>
+    | FocusEvent<HTMLInputElement>
+    | KeyboardEvent<HTMLInputElement>
+    | CompositionEvent<HTMLDivElement>;
+  trigger: 'input' | 'clear' | 'blur' | 'focus' | 'initial' | 'change';
+}
+
+export type SelectInputChangeContext = TagInputChangeContext;

package/style/index.js

@@ -0,0 +1,2 @@
+import "../styles/_global.scss";
+import "../styles/themes/_index.scss";

package/styles/_global.scss

@@ -0,0 +1,39 @@
+@import './_vars.scss';
+
+@import './mixins/_scrollbar.scss';
+
+// 响应式断点 后面支持紧凑模式可以迁移过去
+:root {
+  --td-screen-xs: #{$screen-xs};
+  --td-screen-sm: #{$screen-sm};
+  --td-screen-md: #{$screen-md};
+  --td-screen-lg: #{$screen-lg};
+  --td-screen-xl: #{$screen-xl};
+  --td-screen-xxl: #{$screen-xxl};
+}
+
+// 统一的scrollbar
+.narrow-scrollbar {
+  @include scrollbar(8px, 2px);
+}
+
+// 统一的可旋转箭头
+.#{$prefix}-fake-arrow {
+  path {
+    transition: d $anim-duration-base;
+    stroke: currentcolor;
+  }
+
+  &--active {
+    path {
+      d: path('M3.75 10.2002L7.99274 5.7998L12.2361 10.0425');
+    }
+  }
+}
+
+.#{$prefix}-slide-down-enter-active,
+.#{$prefix}-slide-down-leave-active {
+  transition:
+    height $anim-duration-base $anim-time-fn-easing,
+    max-height $anim-duration-base $anim-time-fn-easing;
+}