antd-solid 0.0.11 → 0.0.12

package/src/Input.tsx

@@ -34,7 +34,7 @@ const statusClassDict = {
     cs(
       'ant-[border:1px_solid_var(--ant-color-border)]',
       !disabled &&
-        'hover:ant-border-[var(--primary-color)] focus-within:ant-border-[var(--primary-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]',
+        'hover:ant-border-[var(--ant-color-primary)] focus-within:ant-border-[var(--ant-color-primary)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]',
     ),
   error: (disabled: boolean) =>
     cs(
@@ -138,7 +138,7 @@ export function CommonInput<T extends HTMLInputElement | HTMLTextAreaElement = H
       <Show when={hasPrefixOrSuffix()} fallback={inputJSX}>
         <div
           class={cs(
-            'ant-flex ant-items-center ant-w-full ant-relative ant-[--input-after-display:none] hover:ant-[--input-after-display:block] p:hover-child[input]:ant-border-[var(--primary-color)]',
+            'ant-flex ant-items-center ant-w-full ant-relative ant-[--input-after-display:none] hover:ant-[--input-after-display:block] p:hover-child[input]:ant-border-[var(--ant-color-primary)]',
             inputWrapClass(),
           )}
         >

package/src/InputNumber.tsx

@@ -1,4 +1,12 @@
-import { type Component, createEffect, on, splitProps, untrack, createSignal, mergeProps } from 'solid-js'
+import {
+  type Component,
+  createEffect,
+  on,
+  splitProps,
+  untrack,
+  createSignal,
+  mergeProps,
+} from 'solid-js'
 import { CommonInput, type InputProps } from './Input'
 import { clamp, isNil } from 'lodash-es'
 import { dispatchEventHandlerUnion } from './utils/solid'
@@ -18,22 +26,20 @@ export interface InputNumberProps
 const isEmptyValue = (value: number | string | null | undefined) => isNil(value) || value === ''
 
 const actionBtnClass =
-  'ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--primary-color)] ant-transition-color ant-transition-height ant-transition-duration-500'
+  'ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--ant-color-primary)] ant-transition-color ant-transition-height ant-transition-duration-500'
 
 const InputNumber: Component<InputNumberProps> = _props => {
-  const props = mergeProps({
-    min: -Infinity,
-    max: Infinity,
-  }, _props)
-  const [_, inputProps] = splitProps(props, [
-    'defaultValue',
-    'value',
-    'onChange',
-    'onBlur',
-  ])
+  const props = mergeProps(
+    {
+      min: -Infinity,
+      max: Infinity,
+    },
+    _props,
+  )
+  const [_, inputProps] = splitProps(props, ['defaultValue', 'value', 'onChange', 'onBlur'])
 
   const clampValue = (v: number) => untrack(() => clamp(v, props.min, props.max))
-    
+
   let prev: number | null = null
   const updatePrev = (v: number | null) => {
     if (prev === v) return
@@ -42,12 +48,20 @@ const InputNumber: Component<InputNumberProps> = _props => {
     props.onChange?.(prev)
   }
 
-  const [value, setValue] = createSignal<number | string | null | undefined>(untrack(() => props.value ?? props.defaultValue))
-  createEffect(on(() => props.value, () => {
-    setValue(props.value)
-  }, {
-    defer: true
-  }))
+  const [value, setValue] = createSignal<number | string | null | undefined>(
+    untrack(() => props.value ?? props.defaultValue),
+  )
+  createEffect(
+    on(
+      () => props.value,
+      () => {
+        setValue(props.value)
+      },
+      {
+        defer: true,
+      },
+    ),
+  )
 
   const add = (addon: number) => {
     let newValue: number | null
@@ -104,7 +118,7 @@ const InputNumber: Component<InputNumberProps> = _props => {
 
         let newValueNum: number | null = Number(newValue)
         if (Number.isNaN(newValueNum)) return
-        
+
         if (isEmptyValue(newValue)) {
           newValueNum = null
         } else {

package/src/Modal.tsx

@@ -6,11 +6,6 @@ import cs from 'classnames'
 export interface ModalInstance {
   open: () => void
   close: () => void
-  /**
-   * 与 close 相似，但关闭时会销毁 Modal 里的子元素
-   * @returns
-   */
-  destroy: () => void
 }
 
 export interface ModalProps {
@@ -34,6 +29,10 @@ export interface ModalProps {
    */
   closeIcon?: boolean
   footer?: boolean | ((modal: ModalInstance) => JSXElement)
+  /**
+   * 关闭时销毁 Modal 里的子元素
+   */
+  destroyOnClose?: boolean
   /**
    * 返回 true，会自动关闭 modal
    */
@@ -75,14 +74,16 @@ function Modal(_props: ModalProps) {
       }
     },
     close() {
-      setHide(true)
-      cleanup()
-      props.afterClose?.()
-    },
-    destroy() {
-      setOpen(false)
-      cleanup()
-      props.afterClose?.()
+      untrack(() => {
+        if (props.destroyOnClose) {
+          setOpen(false)
+        } else {
+          setHide(true)
+        }
+
+        cleanup()
+        props.afterClose?.()
+      })
     },
   }
   untrack(() => {

package/src/Progress/index.tsx

@@ -1,4 +1,4 @@
-import { mergeProps, type Component, Switch, Match, Show } from 'solid-js'
+import { mergeProps, type Component, Switch, Match, Show, createMemo } from 'solid-js'
 import cs from 'classnames'
 
 export interface ProgressProps {
@@ -9,9 +9,8 @@ export interface ProgressProps {
   percent?: number
   /**
    * 状态
-   * 默认 'default'
    */
-  status?: 'default' | 'success' | 'error'
+  status?: 'normal' | 'success' | 'error'
   /**
    * 'line' 类型进度条的高度
    * 默认 8
@@ -28,13 +27,17 @@ const Progress: Component<ProgressProps> = _props => {
   const props = mergeProps(
     {
       percent: 0,
-      status: 'default',
       height: 8,
       showInfo: true,
-    } as Required<ProgressProps>,
+    },
     _props,
   )
 
+  const status = createMemo(() => {
+    if (props.status) return props.status
+    return props.percent >= 100 ? 'success' : 'normal'
+  })
+
   return (
     <div
       class="ant-flex ant-items-center"
@@ -45,22 +48,27 @@ const Progress: Component<ProgressProps> = _props => {
       <div
         class={cs(
           'ant-w-full ant-bg-[var(--ant-progress-remaining-color)]',
-          'before:ant-content-empty before:ant-block before:ant-bg-[var(--primary-color)] before:ant-w-[var(--percent)] before:ant-h-full before:ant-rounded-inherit',
+          'before:ant-content-empty before:ant-block before:ant-bg-[var(--color)] before:ant-w-[var(--percent)] before:ant-h-full before:ant-rounded-inherit',
         )}
         style={{
           height: `${props.height}px`,
           'border-radius': `${props.height / 2}px`,
           '--percent': `${props.percent}%`,
+          '--color': {
+            normal: 'var(--ant-color-primary)',
+            success: 'var(--ant-color-success)',
+            error: 'var(--ant-color-error)',
+          }[status()],
         }}
       />
 
       <Show when={props.showInfo}>
         <span class="ant-shrink-0 ant-min-w-40px ant-ml-8px ant-text-center">
           <Switch fallback={`${props.percent}%`}>
-            <Match when={props.status === 'success' || props.percent >= 100}>
-              <span class="i-ant-design:check-circle-filled ant-text-[var(--primary-color)]" />
+            <Match when={status() === 'success'}>
+              <span class="i-ant-design:check-circle-filled ant-text-[var(--ant-color-success)]" />
             </Match>
-            <Match when={props.status === 'error'}>
+            <Match when={status() === 'error'}>
               <span class="i-ant-design:close-circle-filled ant-text-[var(--ant-color-error)]" />
             </Match>
           </Switch>

package/src/Radio.tsx

@@ -47,7 +47,7 @@ const Radio: Component<RadioProps> & {
       <span
         class={cs(
           'ant-w-16px ant-h-16px ant-rounded-50% ant-[border:1px_solid_var(--ant-color-border)]',
-          checked() && 'ant-[border:5px_solid_var(--primary-color)]',
+          checked() && 'ant-[border:5px_solid_var(--ant-color-primary)]',
         )}
       >
         <input
@@ -77,9 +77,9 @@ Radio.Button = props => {
   return (
     <label
       class={cs(
-        'ant-px-15px ant-[border:1px_solid_rgb(217,217,217)] first:ant-rounded-l-6px last:ant-rounded-r-6px ant-h-32px ant-inline-flex ant-items-center hover:ant-text-[var(--primary-color)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center',
+        'ant-px-15px ant-[border:1px_solid_rgb(217,217,217)] first:ant-rounded-l-6px last:ant-rounded-r-6px ant-h-32px ant-inline-flex ant-items-center hover:ant-text-[var(--ant-color-primary)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center',
         checked() &&
-          'ant-text-[var(--primary-color)] ant-[border:1px_solid_var(--primary-color)] !ant-border-r-[var(--primary-color)]',
+          'ant-text-[var(--ant-color-primary)] ant-[border:1px_solid_var(--ant-color-primary)] !ant-border-r-[var(--ant-color-primary)]',
       )}
     >
       <input

package/src/Result.tsx

@@ -12,7 +12,7 @@ export interface ResultProps extends ParentProps {
 
 const statusIconMap = {
   success: 'ant-text-#52c41a i-ant-design:check-circle-filled',
-  info: 'ant-text-[var(--primary-color)] i-ant-design:exclamation-circle-filled',
+  info: 'ant-text-[var(--ant-color-primary)] i-ant-design:exclamation-circle-filled',
   warning: 'ant-text-#faad14 i-ant-design:warning-filled',
   error: 'ant-text-#ff4d4f i-ant-design:close-circle-filled',
 }

package/src/Select.tsx

@@ -33,7 +33,9 @@ const Select: Component<SelectProps> = props => {
 
   const [value, setValue] = createControllableValue<Key | undefined>(props)
   const selectedValue = createSelector(value)
-  const selectedOption = createMemo(() => !isNil(value()) ? props.options.find(option => option.value === value()) : undefined)
+  const selectedOption = createMemo(() =>
+    !isNil(value()) ? props.options.find(option => option.value === value()) : undefined,
+  )
 
   const [open, setOpen] = createSignal(false)
   useClickAway(
@@ -63,7 +65,7 @@ const Select: Component<SelectProps> = props => {
               <div
                 class={cs(
                   'ant-box-content ant-px-12px ant-py-5px ant-h-22px ant-leading-22px hover:ant-bg-[var(--hover-bg-color)]',
-                  selectedValue(item.value) ? '!ant-bg-[var(--active-bg-color)]' : '',
+                  selectedValue(item.value) ? '!ant-bg-[var(--ant-select-option-selected-bg)]' : '',
                 )}
                 onClick={() => {
                   setValue(item.value)
@@ -79,7 +81,10 @@ const Select: Component<SelectProps> = props => {
     >
       <div
         ref={select!}
-        class={cs('ant-h-32px ant-leading-32px ant-rounded-6px ant-[border:1px_solid_var(--ant-color-border)] ant-px-11px focus:ant-[border-color:var(--primary-color)]', props.class)}
+        class={cs(
+          'ant-h-32px ant-leading-32px ant-rounded-6px ant-[border:1px_solid_var(--ant-color-border)] ant-px-11px focus:ant-[border-color:var(--ant-color-primary)]',
+          props.class,
+        )}
         tabIndex="0"
         onClick={e => {
           setOpen(true)
@@ -109,7 +114,12 @@ const Select: Component<SelectProps> = props => {
           </Show>
 
           <div class="ant-absolute ant-top-0 ant-bottom-0 ant-right-0">
-            <Show when={showClearBtn()} fallback={<span class="i-ant-design:down-outlined ant-text-[var(--ant-allow-color)]" />}>
+            <Show
+              when={showClearBtn()}
+              fallback={
+                <span class="i-ant-design:down-outlined ant-text-[var(--ant-allow-color)]" />
+              }
+            >
               <span
                 class="i-ant-design:close-circle-filled ant-cursor-pointer ant-text-[var(--ant-clear-color)] hover:ant-text-[var(--ant-clear-color-hover)]"
                 onClick={e => {

package/src/Spin.tsx

@@ -1,19 +1,30 @@
-import { Show, type Component, type ParentProps } from 'solid-js'
+import { Show, type Component, type ParentProps, mergeProps } from 'solid-js'
 
 interface SpinProps extends ParentProps {
   /**
    * 是否为加载中状态
    */
   spinning?: boolean
+  size?: number
 }
 
-const Spin: Component<SpinProps> = props => {
+const Spin: Component<SpinProps> = _props => {
+  const props = mergeProps(
+    {
+      size: 20,
+    },
+    _props,
+  )
+
   return (
-    <div class="ant-relative ant-min-h-32px">
+    <div>
       {props.children}
       <Show when={props.spinning}>
-        <div class="ant-absolute ant-inset-0 ant-flex ant-items-center ant-justify-center ant-bg-[rgba(255,255,255,.5)]">
-          <span class="i-ant-design:loading keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-text-32px ant-text-[var(--primary-color)]" />
+        <div class="ant-flex ant-items-center ant-justify-center ant-bg-[rgba(255,255,255,.5)]">
+          <span
+            class="i-ant-design:loading keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-text-[var(--ant-color-primary)]"
+            style={{ 'font-size': `${props.size}px` }}
+          />
         </div>
       </Show>
     </div>

package/src/Switch.tsx

@@ -17,7 +17,7 @@ const Switch: Component<SwitchProps> = props => {
     <button
       class={cs(
         'ant-w-44px ant-h-22px ant-rounded-100px ant-relative',
-        checked() ? 'ant-bg-[var(--primary-color)]' : 'ant-bg-[rgba(0,0,0,0.45)]',
+        checked() ? 'ant-bg-[var(--ant-color-primary)]' : 'ant-bg-[rgba(0,0,0,0.45)]',
       )}
       onClick={() => setChecked(c => !c)}
     >

package/src/Tabs.tsx

@@ -92,7 +92,7 @@ const Tabs: Component<TabsProps> = _props => {
                   class={cs(
                     'ant-py-12px ant-cursor-pointer',
                     props.navItemClass,
-                    isSelectedItem(item.key) && 'ant-text-[var(--primary-color)] selected',
+                    isSelectedItem(item.key) && 'ant-text-[var(--ant-color-primary)] selected',
                   )}
                   onClick={() => {
                     setSelectedItem(item)
@@ -106,7 +106,7 @@ const Tabs: Component<TabsProps> = _props => {
 
             <div
               role={'selected-bar' as any}
-              class="ant-absolute ant-bottom-0 ant-bg-[var(--primary-color)] ant-h-2px ant-transition-left"
+              class="ant-absolute ant-bottom-0 ant-bg-[var(--ant-color-primary)] ant-h-2px ant-transition-left"
               style={selectedBarStyle()}
             />
           </div>

package/src/Timeline.tsx

@@ -21,7 +21,7 @@ const Timeline: Component<TimelineProps> = props => {
             {i() !== props.items.length - 1 && (
               <div class="ant-absolute ant-top-[8px] ant-bottom-[-24px] ant-left-[4px] ant-w-[2px] ant-bg-[rgba(5,5,5,.06)]" />
             )}
-            <div class="ant-w-[10px] ant-h-[10px] ant-border-solid ant-border-width-[3px] ant-border-[var(--primary-color)] ant-bg-white ant-rounded-[50%] ant-mt-[8px]" />
+            <div class="ant-w-[10px] ant-h-[10px] ant-border-solid ant-border-width-[3px] ant-border-[var(--ant-color-primary)] ant-bg-white ant-rounded-[50%] ant-mt-[8px]" />
             <div class="ant-ml-[8px]">{item.children?.()}</div>
           </div>
         )}

package/src/Tree.tsx

@@ -98,7 +98,8 @@ function SingleLevelTree<T extends {} = {}>(props: SingleLevelTreeProps<T>) {
             <div
               class={cs(
                 'ant-flex ant-items-center ant-h-28px ant-pb-4px',
-                isDraggable(item()) && 'ant-[border:1px_solid_var(--primary-color)] ant-bg-white',
+                isDraggable(item()) &&
+                  'ant-[border:1px_solid_var(--ant-color-primary)] ant-bg-white',
                 draggableNode() && 'child[]:ant-pointer-events-none',
               )}
               draggable={draggable}
@@ -168,9 +169,9 @@ function SingleLevelTree<T extends {} = {}>(props: SingleLevelTreeProps<T>) {
                 class={cs(
                   'ant-h-full ant-leading-24px hover:ant-bg-[var(--hover-bg-color)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative',
                   props.blockNode && 'w-full',
-                  selectedNodes()?.includes(item()) && '!ant-bg-[var(--active-bg-color)]',
+                  selectedNodes()?.includes(item()) && '!ant-bg-[var(--ant-tree-node-selected-bg)]',
                   isTarget(item()) &&
-                    "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--primary-color)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--primary-color)]",
+                    "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--ant-color-primary)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--ant-color-primary)]",
                 )}
                 onClick={() => {
                   setSelectedNodes([item()])

package/src/Upload.tsx

@@ -1,10 +1,143 @@
-import { reactToSolidComponent, replaceChildren, replaceClassName } from './utils/component'
-import { Upload as UploadAntd } from 'antd'
+import { nanoid } from 'nanoid'
+import { type Component, mergeProps, type ParentProps, createSignal, type Signal } from 'solid-js'
 
-export type { UploadFile } from 'antd/es/upload'
+interface UploadProgressEvent extends Partial<ProgressEvent> {
+  percent?: number
+}
 
-const Upload = replaceChildren(replaceClassName(reactToSolidComponent(UploadAntd)))
+export interface UploadRequestOption<T = any> {
+  file: File
+  onProgress?: (event: UploadProgressEvent) => void
+  onError?: (event: Error) => void
+  onSuccess?: (body: T) => void
+}
 
-export type UploadProps = Parameters<typeof Upload>[0]
+export interface UploadFile<T = any> {
+  /**
+   * 文件唯一标识
+   */
+  id: string
+  /**
+   * 文件名
+   */
+  name: string
+  /**
+   * MIME 类型
+   */
+  type?: string
+  /**
+   * 文件大小
+   */
+  size?: number
+  file?: File
+  response?: T
+  status?: 'pending' | 'uploading' | 'error' | 'finished'
+  percent?: number
+  /**
+   * 下载地址
+   */
+  url?: string
+}
+
+export interface UploadProps<T = any> extends ParentProps {
+  class?: string
+  accept?: string
+  /**
+   * 上传的地址
+   */
+  action?: string
+  /**
+   * 上传请求的 http method
+   * 默认 'post'
+   */
+  method?: string
+  customRequest?: (option: UploadRequestOption<T>) => void
+  onAdd?: (fileList: Array<Signal<T>>) => void
+  multiple?: boolean
+}
+
+function request(file: File, customRequest: UploadProps['customRequest']) {
+  const id = `upload-${nanoid()}`
+  // eslint-disable-next-line solid/reactivity
+  const uploadFileSignal = createSignal<UploadFile>({
+    id,
+    file,
+    name: file.name,
+    type: file.type,
+    size: file.size,
+    status: 'pending',
+    percent: 0,
+  })
+
+  const [, setUploadFile] = uploadFileSignal
+
+  customRequest?.({
+    file,
+    onProgress(event) {
+      setUploadFile(value => ({
+        ...value,
+        status: 'uploading',
+        percent: event.percent ?? 0,
+      }))
+    },
+    onSuccess(response) {
+      setUploadFile(value => ({ ...value, status: 'finished', response }))
+    },
+    onError() {
+      setUploadFile(value => ({ ...value, status: 'error' }))
+    },
+  })
+
+  return uploadFileSignal
+}
+
+const Upload: Component<UploadProps> & {
+  request: typeof request
+} = _props => {
+  let input: HTMLInputElement | undefined
+  const props = mergeProps(
+    {
+      customRequest: ({ file, onSuccess, onError }) => {
+        if (!_props.action) return
+
+        const formData = new FormData()
+        formData.append('file', file)
+        fetch(_props.action, {
+          method: _props.method ?? 'post',
+          body: formData,
+        })
+          .then(onSuccess)
+          .catch(onError)
+      },
+    } as UploadProps,
+    _props,
+  )
+
+  return (
+    <span class={props.class} onClick={() => input?.click()}>
+      {props.children}
+
+      <input
+        ref={input}
+        class="hidden"
+        type="file"
+        accept={props.accept}
+        multiple={props.multiple}
+        onInput={e => {
+          const fileList: Array<Signal<UploadFile>> = []
+          for (const file of e.target.files ?? []) {
+            const uploadFileSignal = request(file, props.customRequest)
+            fileList.push(uploadFileSignal)
+          }
+
+          props.onAdd?.(fileList)
+          e.target.value = ''
+        }}
+      />
+    </span>
+  )
+}
+
+Upload.request = request
 
 export default Upload

package/src/Compact.tsx

@@ -1,15 +0,0 @@
-import { type ParentProps } from 'solid-js'
-
-interface CompactProps extends ParentProps {}
-
-function Compact(props: CompactProps) {
-  return <div class="ant-compact ant-flex">{props.children}</div>
-}
-
-Compact.compactItemClass = 'p[.ant-compact]:ant-ml--1px'
-Compact.compactItemRounded0Class = 'p[.ant-compact>*]:ant-rounded-0'
-Compact.compactItemRoundedLeftClass = 'p[.ant-compact>:first-child]:ant-rounded-l-6px'
-Compact.compactItemRoundedRightClass = 'p[.ant-compact>:last-child]:ant-rounded-r-6px'
-Compact.compactItemZIndexClass = 'p[.ant-compact>*]:focus:ant-z-10 p[.ant-compact>*]:focus-within:ant-z-10'
-
-export default Compact