antd-solid 0.0.12 → 0.0.14

package/src/Popover.tsx

@@ -1,30 +0,0 @@
-import { type Component, type JSXElement, Show } from 'solid-js'
-import Tooltip, { Content, type TooltipProps } from './Tooltip'
-
-interface PopoverProps extends TooltipProps {
-  title?: JSXElement
-}
-
-const Popover: Component<PopoverProps> = props => {
-  return (
-    <Tooltip
-      mode="light"
-      {...props}
-      content={close =>
-        <div>
-          <Show when={props.title}>
-            <div class="ant-mb-8px ant-flex ant-items-center">
-              <span class="ant-text-[rgba(0,0,0,0.88)] ant-font-600">{props.title}</span>
-            </div>
-          </Show>
-
-          <div class="ant-text-[rgba(0,0,0,0.88)]">
-            <Content content={props.content} close={close} />
-          </div>
-        </div>
-      }
-    />
-  )
-}
-
-export default Popover

package/src/Progress/index.tsx

@@ -1,81 +0,0 @@
-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

@@ -1,142 +0,0 @@
-import {
-  type Component,
-  type JSXElement,
-  type ParentProps,
-  type JSX,
-  untrack,
-  For,
-  createSelector,
-  mergeProps,
-} from 'solid-js'
-import { Dynamic } from 'solid-js/web'
-import cs from 'classnames'
-import createControllableValue from './hooks/createControllableValue'
-
-export interface RadioProps extends ParentProps {
-  defaultChecked?: boolean
-  checked?: boolean
-  /**
-   * input 的 value
-   */
-  value?: string
-  onChange?: JSX.ChangeEventHandler<HTMLInputElement, Event>
-}
-
-export interface RadioGroupProps {
-  defaultValue?: string
-  value?: string
-  onChange?: JSX.ChangeEventHandler<HTMLInputElement, Event>
-  optionType?: 'default' | 'button'
-  options: Array<{ label: JSXElement; value: string; disabled?: boolean }>
-  block?: boolean
-}
-
-const Radio: Component<RadioProps> & {
-  Group: Component<RadioGroupProps>
-  Button: Component<RadioProps>
-} = props => {
-  const [checked, setChecked] = createControllableValue(props, {
-    defaultValue: false,
-    defaultValuePropName: 'defaultChecked',
-    valuePropName: 'checked',
-    trigger: null,
-  })
-
-  return (
-    <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>
-  )
-}
-
-Radio.Button = props => {
-  const [checked, setChecked] = createControllableValue(props, {
-    defaultValue: false,
-    defaultValuePropName: 'defaultChecked',
-    valuePropName: 'checked',
-    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(--ant-color-primary)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center',
-        checked() &&
-          'ant-text-[var(--ant-color-primary)] ant-[border:1px_solid_var(--ant-color-primary)] !ant-border-r-[var(--ant-color-primary)]',
-      )}
-    >
-      <input
-        class="ant-w-0 ant-h-0"
-        checked={checked()}
-        value={props.value ?? ''}
-        type="radio"
-        onInput={e => {
-          setChecked(e.target.checked)
-          untrack(() => props.onChange?.(e))
-        }}
-      />
-      {props.children}
-    </label>
-  )
-}
-
-Radio.Group = _props => {
-  const props = mergeProps(
-    {
-      optionType: 'default',
-    } as RadioGroupProps,
-    _props,
-  )
-  const [value, setValue] = createControllableValue<string>(props, {
-    trigger: null,
-  })
-  const isChecked = createSelector(value)
-
-  return (
-    <div
-      class={cs(
-        props.block ? 'ant-flex' : 'ant-inline-flex',
-        props.optionType === 'default' ? 'ant-gap-8px' : '',
-      )}
-    >
-      <For each={props.options}>
-        {option => (
-          <Dynamic
-            component={props.optionType === 'default' ? Radio : Radio.Button}
-            checked={isChecked(option.value)}
-            value={option.value}
-            onChange={
-              (e => {
-                setValue(option.value)
-                untrack(() => {
-                  props.onChange?.(e)
-                })
-              }) as JSX.ChangeEventHandler<HTMLInputElement, Event>
-            }
-          >
-            {option.label}
-          </Dynamic>
-        )}
-      </For>
-    </div>
-  )
-}
-
-export default Radio

package/src/Result.tsx

@@ -1,38 +0,0 @@
-import { type JSXElement, type Component, type ParentProps } from 'solid-js'
-import cs from 'classnames'
-
-type ResultStatusType = 'success' | 'error' | 'info' | 'warning'
-
-export interface ResultProps extends ParentProps {
-  status?: ResultStatusType
-  title?: JSXElement
-  subTitle?: JSXElement
-  extra?: JSXElement
-}
-
-const statusIconMap = {
-  success: 'ant-text-#52c41a i-ant-design:check-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',
-}
-
-const Result: Component<ResultProps> = props => {
-  return (
-    <div class="ant-text-center ant-px-32px ant-py-48px">
-      <div class="ant-mb-24px">
-        <span class={cs(statusIconMap[props.status!], 'ant-text-72px')} />
-      </div>
-
-      <div class="ant-my-8px ant-text-[rgba(0,0,0,.88)] ant-text-24px">{props.title}</div>
-
-      <div class="ant-text-[rgba(0,0,0,.45)] ant-text-14px">{props.subTitle}</div>
-
-      <div class="ant-mt-24px">{props.extra}</div>
-
-      <div class="ant-mt-24px">{props.children}</div>
-    </div>
-  )
-}
-
-export default Result

package/src/Segmented/index.tsx

@@ -1,95 +0,0 @@
-import { type Component, For, createSelector, type JSX, Show } from 'solid-js'
-import cs from 'classnames'
-import { type StringOrJSXElement, type Key } from '../types'
-import createControllableValue from '../hooks/createControllableValue'
-import { unwrapStringOrJSXElement } from '../utils/solid'
-
-export interface SegmentedProps {
-  block?: boolean
-  disabled?: boolean
-  options: Array<
-  | string
-  | number
-  | {
-    label: StringOrJSXElement
-    value: string
-    disabled?: boolean
-    onClick?: (
-      e: MouseEvent & {
-        currentTarget: HTMLDivElement
-        target: Element
-      },
-    ) => void
-  }
-  >
-  value?: Key
-  onChange?: (value: Key) => void
-  class?: string
-  style?: JSX.CSSProperties
-}
-
-const unWarpValue = (value: SegmentedProps['options'][0]) =>
-  typeof value === 'object' ? value.value : value
-
-const Segmented: Component<SegmentedProps> = props => {
-  const [value, setValue] = createControllableValue<Key>(props, {
-    defaultValue: unWarpValue(props.options[0]),
-  })
-  const isSelected = createSelector(value)
-
-  const isDisabledValue = (v: SegmentedProps['options'][0]) => {
-    if (props.disabled) return true
-    return typeof v === 'object' ? v.disabled : false
-  }
-
-  return (
-    <div
-      class={cs(
-        'ant-bg-[var(--ant-color-bg-layout)] ant-rounded-[var(--ant-border-radius)] ant-p-2px',
-        props.block ? 'ant-flex' : 'ant-inline-flex',
-        props.class,
-      )}
-      style={{
-        '--ant-segmented-item-color': 'rgba(0, 0, 0, 0.65)',
-        '--ant-segmented-item-hover-bg': 'rgba(0, 0, 0, 0.06)',
-        '--ant-segmented-item-active-bg': 'rgba(0, 0, 0, 0.15)',
-        ...props.style,
-      }}
-    >
-      <For each={props.options}>
-        {item => (
-          <div
-            class={cs(
-              props.block && 'ant-basis-0 ant-grow-1',
-              isDisabledValue(item) && 'ant-cursor-not-allowed',
-            )}
-          >
-            <div
-              class={cs(
-                'ant-rounded-[var(--ant-border-radius-sm)] ant-px-[var(--ant-padding-sm)] where:ant-cursor-pointer ant-leading-28px where:hover:ant-bg-[var(--ant-segmented-item-hover-bg)] where:active:ant-bg-[var(--ant-segmented-item-active-bg)]',
-                isSelected(unWarpValue(item)) &&
-                  'ant-bg-white ant-shadow-[var(--ant-box-shadow-tertiary)]',
-                props.block && 'ant-flex ant-justify-center',
-                isDisabledValue(item) &&
-                  'ant-[pointer-events:none] ant-text-[var(--ant-color-text-disabled)]',
-              )}
-              onClick={e => {
-                setValue(unWarpValue(item))
-                typeof item === 'object' && item.onClick?.(e)
-              }}
-            >
-              <Show
-                when={typeof item !== 'object'}
-                fallback={typeof item === 'object' && unwrapStringOrJSXElement(item.label)}
-              >
-                {item as string | number}
-              </Show>
-            </div>
-          </div>
-        )}
-      </For>
-    </div>
-  )
-}
-
-export default Segmented

package/src/Select.tsx

@@ -1,138 +0,0 @@
-import {
-  type JSXElement,
-  type Component,
-  For,
-  createSelector,
-  createSignal,
-  Show,
-  createMemo,
-} from 'solid-js'
-import Tooltip from './Tooltip'
-import { type Key } from './types'
-import createControllableValue from './hooks/createControllableValue'
-import cs from 'classnames'
-import { useClickAway } from './hooks'
-import { isNil } from 'lodash-es'
-
-interface SelectOption {
-  label: JSXElement
-  value: Key
-}
-
-interface SelectProps {
-  value?: Key
-  onChange?: (value: Key) => void
-  options: SelectOption[]
-  placeholder?: string
-  allowClear?: boolean
-  class?: string
-}
-
-const Select: Component<SelectProps> = props => {
-  let select: HTMLDivElement
-
-  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 [open, setOpen] = createSignal(false)
-  useClickAway(
-    () => setOpen(false),
-    () => select!,
-  )
-
-  const [width, setWidth] = createSignal(0)
-  const [hover, setHover] = createSignal(false)
-  const showClearBtn = createMemo(() => props.allowClear && hover() && !isNil(value()))
-
-  return (
-    <Tooltip
-      mode="light"
-      open={open()}
-      onOpenChange={setOpen}
-      trigger={[]}
-      placement="bottomLeft"
-      arrow={false}
-      contentStyle={{
-        padding: 0,
-      }}
-      content={close => (
-        <div class="ant-bg-white ant-w-200px" style={{ width: `${width()}px` }}>
-          <For each={props.options}>
-            {item => (
-              <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(--ant-select-option-selected-bg)]' : '',
-                )}
-                onClick={() => {
-                  setValue(item.value)
-                  close()
-                }}
-              >
-                {item.label}
-              </div>
-            )}
-          </For>
-        </div>
-      )}
-    >
-      <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(--ant-color-primary)]',
-          props.class,
-        )}
-        tabIndex="0"
-        onClick={e => {
-          setOpen(true)
-          setWidth(e.currentTarget.offsetWidth)
-          e.currentTarget.focus()
-        }}
-        onMouseEnter={() => setHover(true)}
-        onMouseLeave={() => setHover(false)}
-        style={{
-          '--ant-arrow-color': 'rgba(146, 146, 146, 1)',
-          '--ant-clear-color': 'rgba(146, 146, 146, 1)',
-          '--ant-clear-color-hover': 'rgba(194, 194, 194, 1)',
-        }}
-      >
-        <div class="ant-relative ant-h-full">
-          <Show
-            when={!isNil(value())}
-            fallback={
-              <input
-                class="ant-h-full ant-w-full ant-float-left ant-[outline:none]"
-                readOnly
-                placeholder={props.placeholder}
-              />
-            }
-          >
-            <div>{selectedOption()!.label ?? value()}</div>
-          </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)]" />
-              }
-            >
-              <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 => {
-                  e.stopPropagation()
-                  setValue(undefined)
-                }}
-              />
-            </Show>
-          </div>
-        </div>
-      </div>
-    </Tooltip>
-  )
-}
-
-export default Select

package/src/Skeleton.tsx

@@ -1,14 +0,0 @@
-import { Skeleton as SkeletonAntd } from 'antd'
-import { reactToSolidComponent, replaceClassName } from './utils/component'
-
-const _Skeleton = replaceClassName(reactToSolidComponent(SkeletonAntd))
-
-const Image = replaceClassName(reactToSolidComponent(SkeletonAntd.Image))
-
-const Skeleton = _Skeleton as typeof _Skeleton & {
-  Image: typeof Image
-}
-
-Skeleton.Image = Image
-
-export default Skeleton

package/src/Spin.tsx

@@ -1,34 +0,0 @@
-import { Show, type Component, type ParentProps, mergeProps } from 'solid-js'
-
-interface SpinProps extends ParentProps {
-  /**
-   * 是否为加载中状态
-   */
-  spinning?: boolean
-  size?: number
-}
-
-const Spin: Component<SpinProps> = _props => {
-  const props = mergeProps(
-    {
-      size: 20,
-    },
-    _props,
-  )
-
-  return (
-    <div>
-      {props.children}
-      <Show when={props.spinning}>
-        <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>
-  )
-}
-
-export default Spin

package/src/Switch.tsx

@@ -1,34 +0,0 @@
-import { type Component } from 'solid-js'
-import createControllableValue from './hooks/createControllableValue'
-import cs from 'classnames'
-
-export interface SwitchProps {
-  defaultChecked?: boolean
-  checked?: boolean
-  onChange?: (checked: boolean) => void
-}
-
-const Switch: Component<SwitchProps> = props => {
-  const [checked, setChecked] = createControllableValue<boolean>(props, {
-    defaultValuePropName: 'defaultChecked',
-    valuePropName: 'checked',
-  })
-  return (
-    <button
-      class={cs(
-        'ant-w-44px ant-h-22px ant-rounded-100px ant-relative',
-        checked() ? 'ant-bg-[var(--ant-color-primary)]' : 'ant-bg-[rgba(0,0,0,0.45)]',
-      )}
-      onClick={() => setChecked(c => !c)}
-    >
-      <div
-        class={cs(
-          'ant-w-18px ant-h-18px ant-rounded-50% ant-bg-white ant-absolute ant-top-1/2 -ant-translate-y-1/2 ant-transition-left',
-          checked() ? 'ant-left-[calc(100%-20px)]' : 'ant-left-2px',
-        )}
-      />
-    </button>
-  )
-}
-
-export default Switch

package/src/Table.tsx

@@ -1,53 +0,0 @@
-import Empty from './Empty'
-import { type JSXElement, For, Show } from 'solid-js'
-
-export interface TableColumn<R extends {}> {
-  title: JSXElement
-  render: (row: R) => JSXElement
-}
-
-export interface TableProps<R extends {}> {
-  columns: Array<TableColumn<R>>
-  dataSource: R[]
-}
-
-const Table = <R extends {}>(props: TableProps<R>) => {
-  return (
-    <div>
-      <table class="ant-w-full">
-        <thead>
-          <tr>
-            <For each={props.columns}>
-              {item => (
-                <th class="ant-p-16px ant-bg-[var(--light-bg-color)] ant-font-bold ant-[border-bottom:1px_solid_var(--secondary-border-color)] ant-text-left">
-                  {item.title}
-                </th>
-              )}
-            </For>
-          </tr>
-        </thead>
-        <tbody>
-          <For each={props.dataSource}>
-            {row => (
-              <tr class="hover:ant-bg-[var(--light-bg-color)]">
-                <For each={props.columns}>
-                  {item => (
-                    <td class="ant-p-16px ant-[border-bottom:1px_solid_var(--secondary-border-color)]">
-                      {item.render(row)}
-                    </td>
-                  )}
-                </For>
-              </tr>
-            )}
-          </For>
-        </tbody>
-      </table>
-
-      <Show when={!props.dataSource.length}>
-        <Empty.PRESENTED_IMAGE_SIMPLE />
-      </Show>
-    </div>
-  )
-}
-
-export default Table