antd-solid 0.0.11 → 0.0.13

package/es/utils/component.d.ts

@@ -1,31 +0,0 @@
-import React from 'react';
-import { type Component, type JSXElement } from 'solid-js';
-import { type ConfigProviderProps } from 'antd/es/config-provider';
-/**
- * 将组件 props 中的 className 替换为 class
- * @param C
- * @returns
- */
-export declare function replaceClassName<T extends {
-    className?: string;
-}, Target extends Omit<T, 'className'> & {
-    class?: string;
-}>(C: Component<T>): Component<Target>;
-/**
- * 将组件 props 中的 children 替换为 JSXElement
- * @param C
- * @returns
- */
-export declare function replaceChildren<T extends {
-    children?: React.ReactNode;
-}, Target extends Omit<T, 'children'> & {
-    children?: JSXElement;
-}>(C: Component<T>): Component<Target>;
-export declare function reactToSolidComponent<P extends {} = {}>(component: React.FunctionComponent<P> | React.ComponentClass<P>, container?: Element | (() => Element)): (props: P) => import("solid-js").JSX.Element;
-/**
- * 返回被 ConfigProvider 包裹后的 component
- * @param component
- * @param configProviderProps
- * @returns
- */
-export declare function configProvider<P extends {} = {}>(component: React.FunctionComponent<P> | React.ComponentClass<P>, configProviderProps?: ConfigProviderProps): (props: P) => React.FunctionComponentElement<ConfigProviderProps>;

package/es/utils/component.js

@@ -1,68 +0,0 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import React from 'react';
-import { createMemo } from 'solid-js';
-import { omit } from 'lodash-es';
-import { solidToReact } from './solid.js';
-import ReactToSolid from './ReactToSolid.js';
-import { ConfigProvider } from 'antd';
-import zhCN from './zh_CN.js';
-
-/**
- * 将组件 props 中的 className 替换为 class
- * @param C
- * @returns
- */
-function replaceClassName(C) {
-  return function (_props) {
-    const props = createMemo(() => {
-      return {
-        ...omit(_props, 'class'),
-        className: _props.class
-      };
-    });
-    return createComponent(C, mergeProps(props));
-  };
-}
-/**
- * 将组件 props 中的 children 替换为 JSXElement
- * @param C
- * @returns
- */
-function replaceChildren(C) {
-  return function (_props) {
-    const props = createMemo(() => {
-      return {
-        ..._props,
-        children: solidToReact(_props.children)
-      };
-    });
-    return createComponent(C, mergeProps(props));
-  };
-}
-function reactToSolidComponent(component, container) {
-  return function (props) {
-    return createComponent(ReactToSolid, {
-      component: component,
-      props: props,
-      get container() {
-        return typeof container === 'function' ? container() : container;
-      }
-    });
-  };
-}
-/**
- * 返回被 ConfigProvider 包裹后的 component
- * @param component
- * @param configProviderProps
- * @returns
- */
-function configProvider(component, configProviderProps) {
-  return function (props) {
-    return React.createElement(ConfigProvider, {
-      locale: zhCN,
-      ...configProviderProps
-    }, React.createElement(component, props));
-  };
-}
-
-export { configProvider, reactToSolidComponent, replaceChildren, replaceClassName };

package/es/utils/zh_CN.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("antd/es/locale").Locale | undefined;
-export default _default;

package/es/utils/zh_CN.js

@@ -1,236 +0,0 @@
-var zhCN = {
-  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: '点击刷新'
-  }
-};
-
-export { zhCN as default };

package/src/Button.tsx

@@ -1,128 +0,0 @@
-import {
-  type Component,
-  mergeProps,
-  type ParentProps,
-  type JSX,
-  Show,
-  createSignal,
-  createMemo,
-} from 'solid-js'
-import cs from 'classnames'
-
-interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButtonElement> {
-  type?: 'default' | 'primary' | 'dashed' | 'text' | 'link'
-  onClick?: ((e: MouseEvent) => void) | ((e: MouseEvent) => Promise<unknown>)
-  /**
-   * 默认: middle
-   * plain: 没有多余的 padding 和高度等
-   */
-  size?: 'large' | 'middle' | 'small' | 'plain'
-  class?: string
-  style?: JSX.CSSProperties
-  loading?: boolean
-  /**
-   * 设置危险按钮
-   */
-  danger?: boolean
-}
-
-const sizeClassMap = {
-  large: 'ant-px-15px ant-py-6px ant-h-40px ant-rounded-8px',
-  middle: 'ant-px-15px ant-py-4px ant-h-32px ant-rounded-6px',
-  small: 'ant-px-7px ant-h-24px ant-rounded-4px',
-  plain: 'ant-p-0',
-} as const
-
-const typeClassMap = {
-  default: (danger: boolean) =>
-    cs(
-      'ant-bg-white',
-      danger
-        ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]'
-        : 'ant-[border:1px_solid_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-text-[var(--dark-primary-color)]',
-    ),
-  primary: (danger: boolean) =>
-    cs(
-      'ant-text-white',
-      danger
-        ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-bg-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-bg-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-bg-[var(--dark-error-color)]'
-        : 'ant-[border:1px_solid_var(--primary-color)] ant-bg-[var(--primary-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-bg-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-bg-[var(--dark-primary-color)]',
-    ),
-  dashed: (danger: boolean) =>
-    cs(
-      ' ant-bg-white',
-      danger
-        ? 'ant-[border:1px_dashed_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]'
-        : 'ant-[border:1px_dashed_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-text-[var(--dark-primary-color)]',
-    ),
-  text: (danger: boolean) =>
-    cs(
-      'ant-border-none ant-bg-transparent',
-      danger
-        ? 'ant-text-[var(--ant-color-error)] hover:ant-bg-[var(--error-bg-color)] active:ant-bg-[var(--error-bg-color)]'
-        : 'ant-text-[var(--dark-color)] hover:ant-bg-[rgba(0,0,0,0.06)] active:ant-bg-[rgba(0,0,0,.15)]',
-    ),
-  link: (danger: boolean) =>
-    cs(
-      'ant-border-none ant-bg-transparent',
-      danger
-        ? 'ant-text-[var(--ant-color-error)] hover:ant-text-[var(--light-error-color)] active:ant-text-[var(--dark-error-color)]'
-        : 'ant-text-[var(--primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-text-[var(--dark-primary-color)]',
-    ),
-} as const
-
-const Button: Component<ButtonProps> = props => {
-  const mergedProps = mergeProps({ type: 'default', size: 'middle' } as ButtonProps, props)
-  const [innerLoading, setLoading] = createSignal(false)
-  const loading = createMemo(() => props.loading ?? innerLoading())
-
-  return (
-    <button
-      ref={mergedProps.ref}
-      class={cs(
-        'ant-relative ant-cursor-pointer',
-        'focus-visible:ant-[outline:4px_solid_var(--ant-color-primary-border)] focus-visible:ant-[outline-offset:1px]',
-        mergedProps.class,
-        sizeClassMap[mergedProps.size!],
-        typeClassMap[mergedProps.type!](props.danger ?? false),
-        loading() && 'ant-opacity-65',
-        'ant-[--color:--light-primary-color]',
-      )}
-      style={mergedProps.style}
-      onClick={e => {
-        const res = mergedProps.onClick?.(e)
-        if (res instanceof Promise) {
-          setLoading(true)
-          res.finally(() => setLoading(false))
-        }
-
-        if (
-          mergedProps.type === 'default' ||
-          mergedProps.type === 'primary' ||
-          mergedProps.type === 'dashed'
-        ) {
-          const div = document.createElement('div')
-          div.className = cs(
-            props.danger
-              ? 'ant-[--color:var(--light-error-color)]'
-              : 'ant-[--color:var(--light-primary-color)]',
-            'ant-absolute ant-inset-0 ant-rounded-inherit ant-[background:radial-gradient(var(--color),rgba(0,0,0,0))] ant-z--1 ant-keyframes-button-border[inset:0px][inset:-6px] ant-[animation:button-border_ease-out_0.3s]',
-          )
-          const onAnimationEnd = () => {
-            div.remove()
-            div.removeEventListener('animationend', onAnimationEnd)
-          }
-          div.addEventListener('animationend', onAnimationEnd)
-          e.currentTarget.insertBefore(div, e.currentTarget.childNodes[0])
-        }
-      }}
-    >
-      <Show when={loading()}>
-        <span class="i-ant-design:loading ant-[vertical-align:-0.125em] keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-mr-8px" />
-      </Show>
-      <span>{mergedProps.children}</span>
-    </button>
-  )
-}
-
-export default Button

package/src/Collapse/index.tsx

@@ -1,86 +0,0 @@
-import { type JSX, type JSXElement, type Component, For, Show } from 'solid-js'
-import cs from 'classnames'
-import { Transition } from 'solid-transition-group'
-import { type Key } from '../types'
-import createControllableValue from '../hooks/createControllableValue'
-
-export interface CollapseItem {
-  key: Key
-  label: JSXElement
-  children: JSXElement
-}
-
-export interface CollapseProps {
-  class?: string
-  defaultActiveKey?: Key[]
-  activeKey?: Key[]
-  items: CollapseItem[]
-  style?: JSX.CSSProperties
-}
-
-const Collapse: Component<CollapseProps> = props => {
-  const [activeKey, setActiveKey] = createControllableValue<Key[]>(props, {
-    defaultValuePropName: 'defaultActiveKey',
-    valuePropName: 'activeKey',
-    defaultValue: [],
-  })
-
-  return (
-    <div
-      class={cs(
-        'ant-rounded-[var(--ant-border-radius-lg)] ant-[border:1px_solid_var(--ant-color-border)] ant-border-b-0',
-        props.class,
-      )}
-      style={props.style}
-    >
-      <For each={props.items}>
-        {item => (
-          <div class="ant-[border-bottom:1px_solid_var(--ant-color-border)] first:ant-rounded-t-[var(--ant-border-radius-lg)] last:ant-rounded-b-[var(--ant-border-radius-lg)] ant-cursor-pointer">
-            <div
-              class="ant-bg-[var(--ant-collapse-header-bg)] ant-text-[var(--ant-color-text-heading)] ant-p-[var(--ant-collapse-header-padding)]"
-              onClick={() => {
-                setActiveKey(keys => {
-                  if (keys.includes(item.key)) {
-                    return keys.filter(key => key !== item.key)
-                  }
-                  return [...keys, item.key]
-                })
-              }}
-            >
-              <span
-                class={cs(
-                  'i-ant-design:right-outlined',
-                  'ant-mr-[var(--ant-margin-sm)] ant-duration-.3s',
-                  activeKey().includes(item.key) && 'ant-rotate-[90deg]',
-                )}
-              />
-              {item.label}
-            </div>
-            <Transition
-              onEnter={(el, done) => {
-                el.animate([{ height: '0px' }, { height: `${el.scrollHeight}px` }], {
-                  duration: 300,
-                }).finished.finally(done)
-              }}
-              onExit={(el, done) => {
-                el.animate([{ height: `${el.scrollHeight}px` }, { height: '0px' }], {
-                  duration: 300,
-                }).finished.finally(done)
-              }}
-            >
-              <Show when={activeKey().includes(item.key)}>
-                <div class="ant-overflow-hidden">
-                  <div class="ant-p-[var(--ant-padding-sm)] ant-[border-top:1px_solid_var(--ant-color-border)]">
-                    {item.children}
-                  </div>
-                </div>
-              </Show>
-            </Transition>
-          </div>
-        )}
-      </For>
-    </div>
-  )
-}
-
-export default Collapse

package/src/ColorPicker.tsx

@@ -1,11 +0,0 @@
-import { ColorPicker } from 'antd'
-import { type Color } from 'antd/es/color-picker'
-import { reactToSolidComponent } from './utils/component'
-
-export interface ColorPickerProps {
-  defaultValue?: string | Color
-  value?: string | Color
-  onChange?: (value: Color, hex: string) => void
-}
-
-export default reactToSolidComponent(ColorPicker)

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

package/src/DatePicker.tsx

@@ -1,30 +0,0 @@
-import { DatePicker as DatePickerAntd } from 'antd'
-import { type DatePickerProps, type RangePickerProps } from 'antd/es/date-picker'
-import { reactToSolidComponent, replaceClassName } from './utils/component'
-
-const RangePicker = replaceClassName(
-  reactToSolidComponent<
-  RangePickerProps & {
-    dropdownClassName?: string | undefined
-    popupClassName?: string | undefined
-    rootClassName?: string | undefined
-  }
-  >(DatePickerAntd.RangePicker),
-)
-
-const _DatePicker = replaceClassName(
-  reactToSolidComponent<
-  DatePickerProps & {
-    status?: '' | 'error' | 'warning' | undefined
-    hashId?: string | undefined
-    popupClassName?: string | undefined
-    rootClassName?: string | undefined
-  }
-  >(DatePickerAntd),
-)
-const DatePicker = _DatePicker as typeof _DatePicker & {
-  RangePicker: typeof RangePicker
-}
-DatePicker.RangePicker = RangePicker
-
-export default DatePicker

package/src/Drawer/index.scss

@@ -1,53 +0,0 @@
-.ant-drawer-content-right {
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.ant-drawer-content-left {
-  top: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.ant-drawer-content-top {
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
-.ant-drawer-content-bottom {
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.ant-drawer-fade-enter-active,
-.ant-drawer-fade-exit-active {
-  transition: opacity .3s;
-
-  .ant-drawer-content {
-    transition: transform .3s;
-  }
-}
-
-.ant-drawer-fade-enter,
-.ant-drawer-fade-exit-to {
-  opacity: 0;
-
-  .ant-drawer-content-right {
-    transform: translateX(100%);
-  }
-
-  .ant-drawer-content-left {
-    transform: translateX(-100%);
-  }
-
-  .ant-drawer-content-top {
-    transform: translateY(-100%);
-  }
-
-  .ant-drawer-content-bottom {
-    transform: translateY(100%);
-  }
-}