antd-solid 0.0.10 → 0.0.12

package/src/Drawer/index.tsx

@@ -0,0 +1,211 @@
+import {
+  mergeProps,
+  type Component,
+  Show,
+  type JSXElement,
+  type Ref,
+  createSignal,
+  untrack,
+  createMemo,
+} from 'solid-js'
+import cs from 'classnames'
+import Button from '../Button'
+import { setRef } from '../utils/solid'
+import { Portal } from 'solid-js/web'
+import { Transition } from 'solid-transition-group'
+import './index.scss'
+import createTransition from '../hooks/createTransition'
+
+export interface DrawerInstance {
+  open: () => void
+  close: () => void
+}
+
+export interface DrawerProps {
+  ref?: Ref<DrawerInstance>
+  title?: JSXElement
+  extra?: JSXElement
+  children?: JSXElement
+  /**
+   * 宽度
+   * 默认 378px
+   */
+  width?: string
+  /**
+   * 高度，在 placement 为 top 或 bottom 时使用
+   * 默认 378px
+   */
+  height?: string
+  closeIcon?: boolean
+  /**
+   * 点击蒙层是否允许关闭
+   * 默认 true
+   */
+  maskClosable?: boolean
+  /**
+   * 关闭时销毁 Modal 里的子元素
+   */
+  destroyOnClose?: boolean
+  /**
+   * 抽屉的方向
+   * 默认 right
+   */
+  placement?: 'top' | 'right' | 'bottom' | 'left'
+  /**
+   * 指定 Drawer 挂载的节点，并在容器内展现，false 为挂载在当前位置
+   * 默认 body
+   */
+  getContainer?: HTMLElement | (() => HTMLElement) | false
+}
+
+const Drawer: Component<DrawerProps> = _props => {
+  const props = mergeProps(
+    {
+      width: '378px',
+      height: '378px',
+      maskClosable: true,
+      placement: 'right',
+      getContainer: document.body,
+    },
+    _props,
+  )
+
+  /**
+   * 控制是否打开/销毁
+   */
+  const [open, setOpen] = createSignal(false)
+  /**
+   * 控制显隐
+   */
+  const [hide, setHide] = createSignal(false)
+  let cleanup: (() => void) | undefined
+
+  const container = createMemo(() => {
+    if (typeof props.getContainer === 'function') {
+      return props.getContainer()
+    }
+    if (props.getContainer instanceof HTMLElement) {
+      return props.getContainer
+    }
+    return undefined
+  })
+  const isBody = createMemo(() => container() === document.body)
+
+  const instance: DrawerInstance = {
+    open() {
+      setOpen(true)
+      setHide(false)
+
+      untrack(() => {
+        if (!isBody()) return
+
+        const originOverflow = document.body.style.overflow
+        document.body.style.overflow = 'hidden'
+
+        const onKeyup = (e: KeyboardEvent) => {
+          if (e.key === 'Escape') {
+            instance.close()
+          }
+        }
+        document.addEventListener('keyup', onKeyup)
+
+        cleanup = () => {
+          document.body.style.overflow = originOverflow
+          document.removeEventListener('keyup', onKeyup)
+        }
+      })
+    },
+    close() {
+      untrack(() => {
+        if (props.destroyOnClose) {
+          setOpen(false)
+        } else {
+          setHide(true)
+        }
+
+        cleanup?.()
+      })
+    },
+  }
+  setRef(props, instance)
+
+  let drawer: HTMLDivElement | undefined
+  createTransition(
+    () => drawer,
+    () => !hide(),
+    'ant-drawer-fade',
+  )
+
+  const direction = createMemo(() =>
+    ['top', 'bottom'].includes(props.placement) ? 'vertical' : 'horizontal',
+  )
+
+  const children = (
+    <Transition name="ant-drawer-fade">
+      <Show when={open()}>
+        <div
+          ref={drawer}
+          class={cs(
+            'ant-inset-0 ant-bg-[rgba(0,0,0,.45)] ant-z-1000',
+            isBody() ? 'ant-fixed' : 'ant-absolute',
+          )}
+          onClick={() => {
+            if (props.maskClosable) {
+              instance.close()
+            }
+          }}
+        >
+          <div
+            class={cs(
+              'ant-drawer-content',
+              {
+                left: 'ant-drawer-content-left',
+                right: 'ant-drawer-content-right',
+                top: 'ant-drawer-content-top',
+                bottom: 'ant-drawer-content-bottom',
+              }[props.placement],
+              'ant-absolute ant-bg-white ant-grid ant-[grid-template-rows:auto_1fr]',
+            )}
+            style={{
+              width: direction() === 'horizontal' ? props.width : undefined,
+              height: direction() === 'vertical' ? props.height : undefined,
+            }}
+            onClick={e => {
+              e.stopPropagation()
+            }}
+          >
+            <div class="ant-px-[var(--ant-padding-lg)] ant-py-[var(--ant-padding)] ant-flex ant-justify-between ant-items-center ant-[border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)]">
+              <div class="ant-flex ant-items-center">
+                <Show when={props.closeIcon !== false}>
+                  <Button
+                    type="text"
+                    class="ant-mr-[var(--ant-margin-sm)] ant-text-size-[var(--ant-font-size-lg)] ant-h-[var(--ant-font-size-lg)] ant-leading-[var(--ant-font-size-lg)] hover:!ant-bg-transparent !ant-text-[var(--ant-color-icon)] hover:!ant-text-[var(--ant-color-icon-hover)] !ant-p-0"
+                    onClick={() => {
+                      instance?.close()
+                    }}
+                  >
+                    <span class="i-ant-design:close-outlined" />
+                  </Button>
+                </Show>
+                <span class="ant-text-[var(--ant-color-text)] ant-text-size-[var(--ant-font-size-lg)] ant-[font-weight:var(--ant-font-weight-strong)] ant-leading-[var(--ant-line-height-lg)]">
+                  {props.title}
+                </span>
+              </div>
+
+              <div>{props.extra}</div>
+            </div>
+            <div class="ant-p-[var(--ant-padding-lg)] ant-overflow-auto">{props.children}</div>
+          </div>
+        </div>
+      </Show>
+    </Transition>
+  )
+
+  return (
+    <Show when={props.getContainer !== false} fallback={children}>
+      <Portal mount={container()}>{children}</Portal>
+    </Show>
+  )
+}
+
+export default Drawer

package/src/Empty/index.tsx

@@ -1,16 +1,21 @@
-import { type Component } from 'solid-js'
+import { type Component, type JSX } from 'solid-js'
 import PRESENTED_IMAGE_SIMPLE from './PRESENTED_IMAGE_SIMPLE'
 import EmptySvg from './assets/EmptySvg'
 
-const Empty: Component & {
+export interface EmptyProps {
+  class?: string
+  style?: JSX.CSSProperties
+}
+
+const Empty: Component<EmptyProps> & {
   PRESENTED_IMAGE_SIMPLE: Component
-} = () => {
+} = props => {
   return (
-    <div>
-      <div class='ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center'>
+    <div {...props} style={props.style}>
+      <div class="ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center">
         <EmptySvg />
       </div>
-      <div class='ant-text-[var(--ant-color-text)] ant-text-center'>暂无数据</div>
+      <div class="ant-text-[var(--ant-color-text)] ant-text-center">暂无数据</div>
     </div>
   )
 }

package/src/{form → Form}/FormItem.tsx

@@ -67,7 +67,7 @@ const FormItem: Component<FormItemProps> = props => {
     })
 
     resizeObserver.observe(label)
-    
+
     onCleanup(() => {
       setItemWidthDict(dict => {
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
@@ -84,13 +84,15 @@ const FormItem: Component<FormItemProps> = props => {
         '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
+      {...(hidden
+        ? {
+          ref: el => {
+            label = el
+          },
         }
-      }: {
-        style: { width: `${maxItemWidth() ?? 0}px` }
-      }}
+        : {
+          style: { width: `${maxItemWidth() ?? 0}px` },
+        })}
     >
       <Show when={!isNil(props.required)}>
         <span class="ant-mr-4px ant-text-[var(--ant-color-error)]">*</span>

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

@@ -30,7 +30,7 @@ export interface ModalProps {
   closeIcon?: boolean
   footer?: boolean | ((modal: ModalInstance) => JSXElement)
   /**
-   * 关闭时销毁 Modal 里的子元素	
+   * 关闭时销毁 Modal 里的子元素
    */
   destroyOnClose?: boolean
   /**
@@ -51,11 +51,27 @@ function Modal(_props: ModalProps) {
   const props = mergeProps({ footer: true }, _props)
   const [open, setOpen] = createSignal(props.defaultOpen ?? false)
   const [hide, setHide] = createSignal(false)
+  let cleanup: () => void
 
   const instance: ModalInstance = {
     open() {
       setOpen(true)
       setHide(false)
+
+      const originOverflow = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+
+      const onKeyup = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          instance.close()
+        }
+      }
+      document.addEventListener('keyup', onKeyup)
+
+      cleanup = () => {
+        document.body.style.overflow = originOverflow
+        document.removeEventListener('keyup', onKeyup)
+      }
     },
     close() {
       untrack(() => {
@@ -64,6 +80,9 @@ function Modal(_props: ModalProps) {
         } else {
           setHide(true)
         }
+
+        cleanup()
+        props.afterClose?.()
       })
     },
   }
@@ -73,11 +92,6 @@ function Modal(_props: ModalProps) {
     }
   })
 
-  const close = () => {
-    instance.close()
-    props.afterClose?.()
-  }
-
   const [confirmLoading, setConfirmLoading] = createSignal(false)
 
   return (
@@ -90,7 +104,7 @@ function Modal(_props: ModalProps) {
           )}
           onClick={() => {
             if (props.maskClosable ?? true) {
-              close()
+              instance.close()
             }
           }}
           style={{ display: hide() ? 'none' : undefined }}
@@ -117,7 +131,9 @@ function Modal(_props: ModalProps) {
                   class={cs(
                     'ant-rm-size-btn !ant-w-22px !ant-h-22px !ant-flex !ant-justify-center !ant-items-center ant-text-center ant-text-18px !ant-absolute !ant-top-16px !ant-right-16px ant-z-1000 ant-text-[rgba(0,0,0,.45)] hover:!ant-text-[rgba(0,0,0,.88)]',
                   )}
-                  onClick={close}
+                  onClick={() => {
+                    instance.close()
+                  }}
                 >
                   <span class="i-ant-design:close-outlined" />
                 </Button>
@@ -130,9 +146,18 @@ function Modal(_props: ModalProps) {
 
               <Show when={props.footer !== false}>
                 <div class="ant-mt-12px">
-                  <Show when={typeof props.footer !== 'function'} fallback={typeof props.footer === 'function' && props.footer(instance)}>
-                    <div class='ant-flex ant-gap-8px ant-justify-end'>
-                      <Button onClick={close}>取消</Button>
+                  <Show
+                    when={typeof props.footer !== 'function'}
+                    fallback={typeof props.footer === 'function' && props.footer(instance)}
+                  >
+                    <div class="ant-flex ant-gap-8px ant-justify-end">
+                      <Button
+                        onClick={() => {
+                          instance.close()
+                        }}
+                      >
+                        取消
+                      </Button>
                       <Button
                         type="primary"
                         loading={confirmLoading()}
@@ -150,7 +175,7 @@ function Modal(_props: ModalProps) {
                           }
                         }}
                       >
-                      确定
+                        确定
                       </Button>
                     </div>
                   </Show>

package/src/Progress/index.tsx

@@ -0,0 +1,81 @@
+import { mergeProps, type Component, Switch, Match, Show, createMemo } from 'solid-js'
+import cs from 'classnames'
+
+export interface ProgressProps {
+  /**
+   * 百分比
+   * 默认 0
+   */
+  percent?: number
+  /**
+   * 状态
+   */
+  status?: 'normal' | 'success' | 'error'
+  /**
+   * 'line' 类型进度条的高度
+   * 默认 8
+   */
+  height?: number
+  /**
+   * 是否显示进度数值或状态图标
+   * 默认 true
+   */
+  showInfo?: boolean
+}
+
+const Progress: Component<ProgressProps> = _props => {
+  const props = mergeProps(
+    {
+      percent: 0,
+      height: 8,
+      showInfo: true,
+    },
+    _props,
+  )
+
+  const status = createMemo(() => {
+    if (props.status) return props.status
+    return props.percent >= 100 ? 'success' : 'normal'
+  })
+
+  return (
+    <div
+      class="ant-flex ant-items-center"
+      style={{
+        '--ant-progress-remaining-color': 'rgba(0, 0, 0, 0.06)',
+      }}
+    >
+      <div
+        class={cs(
+          'ant-w-full ant-bg-[var(--ant-progress-remaining-color)]',
+          '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={status() === 'success'}>
+              <span class="i-ant-design:check-circle-filled ant-text-[var(--ant-color-success)]" />
+            </Match>
+            <Match when={status() === 'error'}>
+              <span class="i-ant-design:close-circle-filled ant-text-[var(--ant-color-error)]" />
+            </Match>
+          </Switch>
+        </span>
+      </Show>
+    </div>
+  )
+}
+
+export default Progress

package/src/Radio.tsx

@@ -39,20 +39,28 @@ const Radio: Component<RadioProps> & {
     defaultValue: false,
     defaultValuePropName: 'defaultChecked',
     valuePropName: 'checked',
-    trigger: undefined,
+    trigger: null,
   })
 
   return (
-    <label class="ant-inline-flex ant-gap-4px">
-      <input
-        checked={checked()}
-        value={props.value ?? ''}
-        type="radio"
-        onInput={e => {
-          setChecked(e.target.checked)
-          untrack(() => props.onChange?.(e))
-        }}
-      />
+    <label class="ant-inline-flex ant-gap-4px ant-cursor-pointer ant-inline-flex ant-items-center">
+      <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(--ant-color-primary)]',
+        )}
+      >
+        <input
+          class="ant-m-0 ant-hidden"
+          checked={checked()}
+          value={props.value ?? ''}
+          type="radio"
+          onInput={e => {
+            setChecked(e.target.checked)
+            untrack(() => props.onChange?.(e))
+          }}
+        />
+      </span>
       {props.children}
     </label>
   )
@@ -63,15 +71,15 @@ Radio.Button = props => {
     defaultValue: false,
     defaultValuePropName: 'defaultChecked',
     valuePropName: 'checked',
-    trigger: undefined,
+    trigger: null,
   })
 
   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
@@ -97,7 +105,7 @@ Radio.Group = _props => {
     _props,
   )
   const [value, setValue] = createControllableValue<string>(props, {
-    trigger: undefined,
+    trigger: null,
   })
   const isChecked = createSelector(value)
 
@@ -117,7 +125,9 @@ Radio.Group = _props => {
             onChange={
               (e => {
                 setValue(option.value)
-                untrack(() => props.onChange?.(e))
+                untrack(() => {
+                  props.onChange?.(e)
+                })
               }) as JSX.ChangeEventHandler<HTMLInputElement, Event>
             }
           >

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',
 }