antd-solid 0.0.2 → 0.0.3

package/src/form/Form.tsx

@@ -0,0 +1,94 @@
+import {
+  type JSXElement,
+  type Ref,
+  mergeProps,
+  type Setter,
+  onMount,
+  createSignal,
+  createMemo,
+} from 'solid-js'
+import { get, max, set } from 'lodash-es'
+import Context from './context'
+import { type Schema } from 'yup'
+
+export interface FormInstance<T extends {} = {}> {
+  validateFields: () => Promise<T>
+  setFieldValue: (name: Parameters<typeof set>[1], value: any) => void
+}
+
+export interface FormProps<T extends {} = {}> {
+  ref?: Ref<FormInstance<T>>
+  /**
+   * 表单布局
+   * 默认: horizontal
+   */
+  layout?: 'horizontal' | 'vertical' | 'inline'
+  children: JSXElement
+  initialValues?: T
+}
+
+function Form<T extends {} = {}>(_props: FormProps<T>) {
+  const props = mergeProps({ layout: 'horizontal' } as FormProps, _props)
+  const rulesDict: Record<string, Schema[]> = {}
+  const setErrMsgDict: Record<string, Setter<string>> = {}
+
+  const values = props.initialValues ? { ...props.initialValues } : ({} as T)
+  const formInstance: FormInstance<T> = {
+    async validateFields() {
+      const promises = Object.entries(rulesDict).flatMap(([name, rules]) => {
+        return rules.map(
+          async rule =>
+            await rule.validate(get(values, name)).catch(err => {
+              setErrMsgDict[name](err.message)
+              throw err
+            }),
+        )
+      })
+      const results = await Promise.allSettled(promises)
+      if (results.some(result => result.status === 'rejected')) {
+        // eslint-disable-next-line @typescript-eslint/no-throw-literal
+        throw {
+          errorFields: results.filter(res => res.status === 'rejected'),
+          values,
+        }
+      }
+      return values as T
+    },
+    setFieldValue(name, value) {
+      set(values, name, value)
+    },
+  }
+
+  onMount(() => {
+    if (typeof _props.ref === 'function') {
+      _props.ref?.(formInstance)
+    }
+  })
+
+  // 存储 form item 的 dom 节点宽度
+  const [itemWidthDict, setItemWidthDict] = createSignal<Record<string, number>>({})
+  const maxItemWidth = createMemo(() => max(Object.values(itemWidthDict())))
+
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+      }}
+    >
+      <Context.Provider
+        value={{
+          formInstance,
+          rulesDict,
+          setErrMsgDict,
+          initialValues: props.initialValues as {},
+          setItemWidthDict,
+          maxItemWidth,
+        }}
+      >
+        {props.children}
+      </Context.Provider>
+    </form>
+  )
+}
+
+export default Form

package/src/form/FormItem.tsx

@@ -0,0 +1,139 @@
+import {
+  type JSXElement,
+  type Component,
+  type JSX,
+  Show,
+  useContext,
+  createSignal,
+  onMount,
+  onCleanup,
+} from 'solid-js'
+import { get, isNil } from 'lodash-es'
+import { Dynamic } from 'solid-js/web'
+import { nanoid } from 'nanoid'
+import cs from 'classnames'
+import { type Schema } from 'yup'
+import Context from './context'
+
+export interface FormItemComponentProps<T = any> {
+  defaultValue?: T
+  status?: 'error' | 'warning'
+  onChange?: (value: T) => void
+}
+
+export interface FormItemProps {
+  class?: string
+  style?: JSX.CSSProperties
+  required?: boolean
+  label?: JSXElement
+  name?: string
+  initialValue?: any
+  rules?: Schema[]
+  component: Component<FormItemComponentProps>
+}
+
+const FormItem: Component<FormItemProps> = props => {
+  const { formInstance, rulesDict, setErrMsgDict, initialValues, setItemWidthDict, maxItemWidth } =
+    useContext(Context)
+  const [errMsg, setErrMsg] = createSignal('')
+  const id = nanoid()
+
+  onMount(() => {
+    if (isNil(props.name)) return
+
+    if (!isNil(props.initialValue)) {
+      formInstance.setFieldValue(props.name, props.initialValue)
+    }
+
+    if (!isNil(props.rules)) {
+      rulesDict[props.name] = props.rules
+    }
+
+    setErrMsgDict[props.name] = setErrMsg
+  })
+
+  let label: HTMLLabelElement
+  onMount(() => {
+    const resizeObserver = new ResizeObserver(entries => {
+      const [entry] = entries
+      // Firefox implements `borderBoxSize` as a single content rect, rather than an array
+      const borderBoxSize: ResizeObserverSize = Array.isArray(entry.borderBoxSize)
+        ? entry.borderBoxSize[0]
+        : entry.borderBoxSize
+      setItemWidthDict(dict => ({
+        ...dict,
+        [id]: borderBoxSize.inlineSize,
+      }))
+    })
+
+    resizeObserver.observe(label)
+    
+    onCleanup(() => {
+      setItemWidthDict(dict => {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete dict[id]
+        return { ...dict }
+      })
+      resizeObserver.disconnect()
+    })
+  })
+
+  const getLabel = (hidden?: boolean) => (
+    <label
+      class={cs(
+        'ant-shrink-0 ant-h-32px ant-leading-32px not[:empty]:ant-pr-8px ant-text-right ant-[white-space:nowrap]',
+        hidden && 'ant-absolute ant-opacity-0',
+      )}
+      {...hidden ? {
+        ref: (el) => {
+          label = el
+        }
+      }: {
+        style: { width: `${maxItemWidth() ?? 0}px` }
+      }}
+    >
+      <Show when={!isNil(props.required)}>
+        <span class="ant-mr-4px ant-text-[var(--ant-color-error)]">*</span>
+      </Show>
+      <Show when={!isNil(props.label)}>
+        <label>{props.label}</label>
+      </Show>
+    </label>
+  )
+
+  return (
+    <div class={cs(props.class, 'ant-flex ant-items-center ant-mb-16px')} style={props.style}>
+      {/* 第一个 label 仅用于计算实际宽度 */}
+      {getLabel(true)}
+      {getLabel()}
+
+      <div class="ant-w-full">
+        <Dynamic
+          component={props.component}
+          defaultValue={props.initialValue ?? get(initialValues, props.name!)}
+          status={errMsg() ? 'error' : undefined}
+          onChange={(value: any) => {
+            if (!isNil(props.name)) formInstance.setFieldValue(props.name, value)
+
+            props.rules?.forEach(rule => {
+              rule
+                .validate(value)
+                .then(() => {
+                  setErrMsg('')
+                })
+                .catch(err => {
+                  setErrMsg(err.message)
+                })
+            })
+          }}
+        />
+
+        <Show when={errMsg()}>
+          <div class="ant-text-[var(--ant-color-error)]">{errMsg()}</div>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+export default FormItem

package/src/form/context.ts

@@ -0,0 +1,16 @@
+import { type Setter, createContext, type Accessor } from 'solid-js'
+import { type FormInstance } from './Form'
+import { type Schema } from 'yup'
+
+const Context = createContext(
+  {} as {
+    formInstance: FormInstance
+    rulesDict: Record<string, Schema[]>
+    setErrMsgDict: Record<string, Setter<string>>
+    initialValues: {}
+    setItemWidthDict: Setter<Record<string, number>>
+    maxItemWidth: Accessor<number | undefined>
+  },
+)
+
+export default Context

package/src/form/index.ts

@@ -0,0 +1,13 @@
+import InternalForm from './Form'
+import FormItem from './FormItem'
+
+export type { FormInstance, FormProps } from './Form'
+export type { FormItemProps, FormItemComponentProps } from './FormItem'
+
+const Form = InternalForm as typeof InternalForm & {
+  Item: typeof FormItem
+}
+
+Form.Item = FormItem
+
+export default Form

package/src/hooks/createControllableValue.ts

@@ -1,4 +1,4 @@
-import { Setter, Signal, createSignal } from 'solid-js'
+import { type Signal, createSignal } from 'solid-js'
 import createUpdateEffect from './createUpdateEffect'
 
 export interface Options<T> {
@@ -42,12 +42,15 @@ function createControllableValue<T = any>(props: Props, options: Options<T> = {}
   createUpdateEffect(getValue, () => {
     if (!isControlled()) return
 
-    // @ts-expect-error
-    _setValue(getValue())
+    _setValue(getValue() as any)
   })
 
-  const setValue: Setter<T> = (v => {
-    const newValue = _setValue(v)
+  const setValue = (v: ((prev: T) => T) | T | undefined) => {
+    const newValue = typeof v === 'function'? (v as (prev: T) => T)(value()!) : v
+    
+    if (!isControlled()) {
+      _setValue(newValue as any)
+    }
 
     if (trigger) {
       const onChange = props[trigger]
@@ -57,7 +60,7 @@ function createControllableValue<T = any>(props: Props, options: Options<T> = {}
     }
 
     return newValue
-  }) as Setter<T>
+  }
 
   return [value, setValue] as Signal<T>
 }

package/src/index.ts

@@ -1,5 +1,3 @@
-import 'uno.css'
-
 export { default as Button } from './Button'
 export { default as Input } from './Input'
 export type { InputProps } from './Input'
@@ -7,6 +5,7 @@ export { default as InputNumber } from './InputNumber'
 export type { InputNumberProps } from './InputNumber'
 export { default as Timeline } from './Timeline'
 export { default as Modal } from './Modal'
+export type { ModalInstance } from './Modal'
 export { default as DatePicker } from './DatePicker'
 export { default as Select } from './Select'
 export { default as Tree } from './Tree'
@@ -24,14 +23,22 @@ export { default as Upload } from './Upload'
 export type { UploadProps, UploadFile } from './Upload'
 export { default as Radio } from './Radio'
 export type { RadioProps, RadioGroupProps } from './Radio'
-export { default as Form } from './Form'
-export type { FormProps, FormItemProps, FormItemComponentProps } from './Form'
+export { default as Form } from './form'
+export type { FormInstance, FormProps, FormItemProps, FormItemComponentProps } from './form'
 export { default as Switch } from './Switch'
 export type { SwitchProps } from './Switch'
 export { default as Skeleton } from './Skeleton'
 export { default as Spin } from './Spin'
 export { default as Image } from './Image'
 export { default as Table } from './Table'
-export type { TableProps, Column } from './Table'
+export type { TableProps, TableColumn } from './Table'
+export { default as Compact } from './Compact'
+export type { CollapseProps, CollapseItem } from './Collapse'
+export { default as Collapse } from './Collapse'
+export { default as Empty } from './Empty'
+export type { SegmentedProps } from './Segmented'
+export { default as Segmented } from './Segmented'
+
+export { default as createControllableValue } from './hooks/createControllableValue'
 
 export { message } from 'antd'

package/src/types/index.ts

@@ -0,0 +1,5 @@
+import { type JSXElement } from 'solid-js'
+
+export type Key = string | number
+
+export type StringOrJSXElement = string | number | undefined | null | (() => JSXElement)

package/src/utils/EventEmitter.ts

@@ -0,0 +1,15 @@
+type Subscription<T> = (val: T) => void
+
+export default class EventEmitter<T> {
+  private readonly subscriptions = new Set<Subscription<T>>()
+
+  emit = (val: T) => {
+    for (const subscription of this.subscriptions) {
+      subscription(val)
+    }
+  }
+
+  subscription = (callback: Subscription<T>) => {
+    this.subscriptions.add(callback)
+  }
+}

package/src/utils/component.tsx

@@ -4,7 +4,7 @@ import { omit } from 'lodash-es'
 import { solidToReact } from './solid'
 import ReactToSolid from './ReactToSolid'
 import { ConfigProvider } from 'antd'
-import zhCN from 'antd/locale/zh_CN'
+import zhCN from './zh_CN'
 import { type ConfigProviderProps } from 'antd/es/config-provider'
 
 /**

package/src/utils/solid.ts

@@ -1,7 +1,8 @@
 import React from 'react'
-import { type JSXElement , type JSX } from 'solid-js'
+import { type JSXElement, type JSX } from 'solid-js'
 import { isNil } from 'lodash-es'
 import SolidToReact from './SolidToReact'
+import { type StringOrJSXElement } from '../types'
 
 /**
  * 判断 JSXElement 是否是基础类型
@@ -44,5 +45,9 @@ export function dispatchEventHandlerUnion<T, E extends Event>(
     return
   }
 
-  handler[0](handler[1], e);
-}
+  handler[0](handler[1], e)
+}
+
+export function unwrapStringOrJSXElement(value: StringOrJSXElement): JSXElement {
+  return typeof value === 'function' ? value() : value
+}

package/src/utils/zh_CN.ts

@@ -0,0 +1,236 @@
+import { type ConfigProviderProps } from 'antd/es/config-provider'
+
+export default {
+  locale: 'zh-cn',
+  Pagination: {
+    items_per_page: '条/页',
+    jump_to: '跳至',
+    jump_to_confirm: '确定',
+    page: '页',
+    prev_page: '上一页',
+    next_page: '下一页',
+    prev_5: '向前 5 页',
+    next_5: '向后 5 页',
+    prev_3: '向前 3 页',
+    next_3: '向后 3 页',
+    page_size: '页码',
+  },
+  DatePicker: {
+    lang: {
+      placeholder: '请选择日期',
+      yearPlaceholder: '请选择年份',
+      quarterPlaceholder: '请选择季度',
+      monthPlaceholder: '请选择月份',
+      weekPlaceholder: '请选择周',
+      rangePlaceholder: ['开始日期', '结束日期'],
+      rangeYearPlaceholder: ['开始年份', '结束年份'],
+      rangeMonthPlaceholder: ['开始月份', '结束月份'],
+      rangeQuarterPlaceholder: ['开始季度', '结束季度'],
+      rangeWeekPlaceholder: ['开始周', '结束周'],
+      locale: 'zh_CN',
+      today: '今天',
+      now: '此刻',
+      backToToday: '返回今天',
+      ok: '确定',
+      timeSelect: '选择时间',
+      dateSelect: '选择日期',
+      weekSelect: '选择周',
+      clear: '清除',
+      month: '月',
+      year: '年',
+      previousMonth: '上个月 (翻页上键)',
+      nextMonth: '下个月 (翻页下键)',
+      monthSelect: '选择月份',
+      yearSelect: '选择年份',
+      decadeSelect: '选择年代',
+      yearFormat: 'YYYY年',
+      dayFormat: 'D日',
+      dateFormat: 'YYYY年M月D日',
+      dateTimeFormat: 'YYYY年M月D日 HH时mm分ss秒',
+      previousYear: '上一年 (Control键加左方向键)',
+      nextYear: '下一年 (Control键加右方向键)',
+      previousDecade: '上一年代',
+      nextDecade: '下一年代',
+      previousCentury: '上一世纪',
+      nextCentury: '下一世纪',
+    },
+    timePickerLocale: {
+      placeholder: '请选择时间',
+      rangePlaceholder: ['开始时间', '结束时间'],
+    },
+  },
+  TimePicker: {
+    placeholder: '请选择时间',
+    rangePlaceholder: ['开始时间', '结束时间'],
+  },
+  Calendar: {
+    lang: {
+      placeholder: '请选择日期',
+      yearPlaceholder: '请选择年份',
+      quarterPlaceholder: '请选择季度',
+      monthPlaceholder: '请选择月份',
+      weekPlaceholder: '请选择周',
+      rangePlaceholder: ['开始日期', '结束日期'],
+      rangeYearPlaceholder: ['开始年份', '结束年份'],
+      rangeMonthPlaceholder: ['开始月份', '结束月份'],
+      rangeQuarterPlaceholder: ['开始季度', '结束季度'],
+      rangeWeekPlaceholder: ['开始周', '结束周'],
+      locale: 'zh_CN',
+      today: '今天',
+      now: '此刻',
+      backToToday: '返回今天',
+      ok: '确定',
+      timeSelect: '选择时间',
+      dateSelect: '选择日期',
+      weekSelect: '选择周',
+      clear: '清除',
+      month: '月',
+      year: '年',
+      previousMonth: '上个月 (翻页上键)',
+      nextMonth: '下个月 (翻页下键)',
+      monthSelect: '选择月份',
+      yearSelect: '选择年份',
+      decadeSelect: '选择年代',
+      yearFormat: 'YYYY年',
+      dayFormat: 'D日',
+      dateFormat: 'YYYY年M月D日',
+      dateTimeFormat: 'YYYY年M月D日 HH时mm分ss秒',
+      previousYear: '上一年 (Control键加左方向键)',
+      nextYear: '下一年 (Control键加右方向键)',
+      previousDecade: '上一年代',
+      nextDecade: '下一年代',
+      previousCentury: '上一世纪',
+      nextCentury: '下一世纪',
+    },
+    timePickerLocale: {
+      placeholder: '请选择时间',
+      rangePlaceholder: ['开始时间', '结束时间'],
+    },
+  },
+  global: {
+    placeholder: '请选择',
+  },
+  Table: {
+    filterTitle: '筛选',
+    filterConfirm: '确定',
+    filterReset: '重置',
+    filterEmptyText: '无筛选项',
+    filterCheckall: '全选',
+    filterSearchPlaceholder: '在筛选项中搜索',
+    selectAll: '全选当页',
+    selectInvert: '反选当页',
+    selectNone: '清空所有',
+    selectionAll: '全选所有',
+    sortTitle: '排序',
+    expand: '展开行',
+    collapse: '关闭行',
+    triggerDesc: '点击降序',
+    triggerAsc: '点击升序',
+    cancelSort: '取消排序',
+  },
+  Modal: {
+    okText: '确定',
+    cancelText: '取消',
+    justOkText: '知道了',
+  },
+  Tour: {
+    Next: '下一步',
+    Previous: '上一步',
+    Finish: '结束导览',
+  },
+  Popconfirm: {
+    cancelText: '取消',
+    okText: '确定',
+  },
+  Transfer: {
+    titles: ['', ''],
+    searchPlaceholder: '请输入搜索内容',
+    itemUnit: '项',
+    itemsUnit: '项',
+    remove: '删除',
+    selectCurrent: '全选当页',
+    removeCurrent: '删除当页',
+    selectAll: '全选所有',
+    removeAll: '删除全部',
+    selectInvert: '反选当页',
+  },
+  Upload: {
+    uploading: '文件上传中',
+    removeFile: '删除文件',
+    uploadError: '上传错误',
+    previewFile: '预览文件',
+    downloadFile: '下载文件',
+  },
+  Empty: {
+    description: '暂无数据',
+  },
+  Icon: {
+    icon: '图标',
+  },
+  Text: {
+    edit: '编辑',
+    copy: '复制',
+    copied: '复制成功',
+    expand: '展开',
+  },
+  PageHeader: {
+    back: '返回',
+  },
+  Form: {
+    optional: '（可选）',
+    defaultValidateMessages: {
+      default: '字段验证错误${label}',
+      required: '请输入${label}',
+      enum: '${label}必须是其中一个[${enum}]',
+      whitespace: '${label}不能为空字符',
+      date: {
+        format: '${label}日期格式无效',
+        parse: '${label}不能转换为日期',
+        invalid: '${label}是一个无效日期',
+      },
+      types: {
+        string: '${label}不是一个有效的${type}',
+        method: '${label}不是一个有效的${type}',
+        array: '${label}不是一个有效的${type}',
+        object: '${label}不是一个有效的${type}',
+        number: '${label}不是一个有效的${type}',
+        date: '${label}不是一个有效的${type}',
+        boolean: '${label}不是一个有效的${type}',
+        integer: '${label}不是一个有效的${type}',
+        float: '${label}不是一个有效的${type}',
+        regexp: '${label}不是一个有效的${type}',
+        email: '${label}不是一个有效的${type}',
+        url: '${label}不是一个有效的${type}',
+        hex: '${label}不是一个有效的${type}',
+      },
+      string: {
+        len: '${label}须为${len}个字符',
+        min: '${label}最少${min}个字符',
+        max: '${label}最多${max}个字符',
+        range: '${label}须在${min}-${max}字符之间',
+      },
+      number: {
+        len: '${label}必须等于${len}',
+        min: '${label}最小值为${min}',
+        max: '${label}最大值为${max}',
+        range: '${label}须在${min}-${max}之间',
+      },
+      array: {
+        len: '须为${len}个${label}',
+        min: '最少${min}个${label}',
+        max: '最多${max}个${label}',
+        range: '${label}数量须在${min}-${max}之间',
+      },
+      pattern: {
+        mismatch: '${label}与模式不匹配${pattern}',
+      },
+    },
+  },
+  Image: {
+    preview: '预览',
+  },
+  QRCode: {
+    expired: '二维码过期',
+    refresh: '点击刷新',
+  },
+} as ConfigProviderProps['locale']

package/tsconfig.json

@@ -11,13 +11,15 @@
     "jsx": "preserve",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "baseUrl": ".",
     "paths": {
-      "antd-solid": ["src/index"],
+      "antd-solid": ["./src/index"],
     },
+    "skipLibCheck": true,
   },
   "include": [
-    "./src/**/*",
-    "./docs/**/*",
+    "./src",
+    "./docs",
+    "./global.d.ts",
+    "./unocss.config.ts"
   ],
 }