antd-solid 0.0.2 → 0.0.3

package/.eslintignore

@@ -0,0 +1,2 @@
+**/*.cjs
+**/*.d.ts

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx tsc --noEmit && npx lint-staged

package/.vscode/settings.json

@@ -8,6 +8,6 @@
   },
   "eslint.format.enable": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }

package/docs/.vitepress/components/Code.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ant-[border:1px_solid_rgba(5,5,5,0.06)] ant-rounded-6px">
     <div class="ant-px-24px ant-py-36px">
-      <div ref="demoContainer"></div>
+      <div ref="app" />
     </div>
     <!-- <div class="ant-[border-top:1px_solid_rgba(5,5,5,0.06)] ant-relative ant-px-24px ant-pt-18px ant-pb-12px">
       <div class="ant-font-bold ant-absolute -ant-translate-y-1/2 ant-left-16px ant-top-0 ant-bg-white ant-px-8px">{{
@@ -26,31 +26,147 @@
 </template>
 
 <script lang="ts" setup>
-import { type Component } from 'solid-js'
-import { render, createComponent } from 'solid-js/web'
 import { onMounted, ref } from 'vue'
 import Prism from 'prismjs'
+// @ts-ignore
+import antdCss from 'antd-solid-dist/index.css?raw'
+// @ts-ignore
+import antdRaw from 'antd-solid-dist/index.umd.js?raw'
 import 'prismjs/themes/prism.css'
 import 'prismjs/components/prism-typescript'
+import { nanoid } from 'nanoid'
 
 interface Props {
-  component: Component
-  code: string
-  // title?: string
-  // description?: string
+  path: string
 }
 const props = defineProps<Props>()
 
-let demoContainer = ref<HTMLDivElement>()
-
 let expand = ref(false)
 
 let codeHtml = ref('')
+let code = ref('')
+
+let app = ref<HTMLDivElement>()
+
+// @ts-ignore
+const codeModules = import.meta.glob('../../components/*/**.tsx', { as: 'raw' })
 
 onMounted(() => {
-  render(() => createComponent(props.component, {}), demoContainer.value!)
+  codeModules[`../../components/${props.path}.tsx`]().then(value => {
+    codeHtml.value = Prism.highlight(value, Prism.languages.typescript, 'typescript')
+    code.value = value
+
+    // 以下的代码在生产环境下会被注释掉
+    // Non-production code start
+    // @ts-ignore
+    if (import.meta.env.MODE !== 'production') {
+      // @ts-ignore
+      const modules = import.meta.glob('../../components/*/**.tsx')
+      modules[`../../components/${props.path}.tsx`]().then(module => {
+        const App = module.default
+        import('solid-js/web').then(({ render, createComponent }) => {
+          render(() => createComponent(App, {}), app.value!)
+        })
+      })
+      return
+    }
+    // Non-production code end
+
+    // @ts-ignore
+    if (!window.babelLoadPromise) {
+      // @ts-ignore
+      window.babelLoadPromise = new Promise(resolve => {
+        const style = document.createElement('style')
+        style.innerHTML = antdCss
+        document.head.append(style)
+
+        const script = document.createElement('script')
+        script.src = 'https://unpkg.com/@babel/standalone@7.21.2/babel.min.js'
+        document.head.append(script)
+        script.onload = () => {
+          const script = document.createElement('script')
+          script.type = 'module'
+          // @ts-ignore
+          window.__resolve__ = resolve
+          script.innerHTML = `
+        import babelPresetSolid from 'https://cdn.jsdelivr.net/npm/babel-preset-solid@1.8.4/+esm';
+        import * as SolidJs from "https://jspm.dev/solid-js";
+        import * as SolidJsWeb from "https://jspm.dev/solid-js/web";
+        import React from "https://cdn.jsdelivr.net/npm/react@18.2.0/+esm";
+        import ReactDOM from "https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm";
+        import * as Nanoid from "https://cdn.jsdelivr.net/npm/nanoid@5.0.2/+esm";
+        import * as Antd from "https://cdn.jsdelivr.net/npm/antd@5.10.2/+esm";
+        import Classnames from "https://cdn.jsdelivr.net/npm/classnames@2.3.2/+esm";
+        import Lodash from "https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/+esm";
+        import * as Yup from "https://cdn.jsdelivr.net/npm/yup@1.3.2/+esm";
+
+        Babel.registerPreset("solid", babelPresetSolid());
+
+        window.SolidJs = SolidJs;
+        window.SolidJsWeb = SolidJsWeb;
+        window.React = React;
+        window.ReactDOM = ReactDOM;
+        window.Nanoid = Nanoid;
+        window.Antd = Antd;
+        window.Classnames = Classnames;
+        window.Lodash = Lodash;
+        window.Yup = Yup;
+
+        ${antdRaw}
+
+        // babel 转化后的代码依赖于 require
+        function require(name) {
+          const libMap = {
+            'solid-js': SolidJs,
+            'solid-js/web': SolidJsWeb,
+            'antd-solid': AntdSolid,
+            yup: Yup,
+            lodash: Lodash,
+            nanoid: Nanoid,
+            classnames: Classnames,
+            react: React,
+          'react-dom': ReactDOM,
+          }
+          return libMap[name]
+        }
+        window.require = require;
+
+        window.__resolve__();
+        delete window.__resolve__;
+      `
+          document.head.append(script)
+        }
+      })
+    }
+
+    // @ts-ignore
+    window.babelLoadPromise.then(() => {
+      const appRef = nanoid()
+      // @ts-ignore
+      window[appRef] = app.value
+
+      let _code = `
+    // import { render } from 'solid-js/web';
+    ${code.value}
+    const App = exports["default"];
+    window.SolidJsWeb.render(() => <App />, window['${appRef}']);
+  `
+
+      // @ts-ignore
+      _code = window.Babel.transform(_code, {
+        presets: [
+          ['typescript', { isTSX: true, allExtensions: true }],
+          'env',
+          'solid'
+        ],
+        filename: 'app.ts',
+      }).code;
 
-  codeHtml.value = Prism.highlight(props.code, Prism.languages.typescript, 'typescript')
+      // @ts-ignore
+      window.exports = {}
+      eval(_code)
+    })
+  })
 })
 
 function onCopy(text: string) {

package/docs/.vitepress/config.ts

@@ -8,6 +8,7 @@ export default defineConfig({
   description: "UI 库",
   cleanUrls: true,
   head: [['link', { rel: 'shortcut icon', href: 'https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png' }]],
+  appearance: false,
   themeConfig: {
     logo: 'https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png',
     nav: [
@@ -16,15 +17,50 @@ export default defineConfig({
     ],
     sidebar: [
       {
-        text: '通用组件',
+        text: '通用',
         items: [
           { text: 'Button 按钮', link: '/components/button' },
         ]
       },
+      {
+        text: '布局',
+        items: [
+          { text: 'Compact 压缩', link: '/components/compact' },
+        ]
+      },
+      {
+        text: '数据录入',
+        items: [
+          { text: 'ColorPicker 颜色选择器', link: '/components/color-picker' },
+          { text: 'DatePicker 日期选择框', link: '/components/date-picker' },
+          { text: 'Input 输入框', link: '/components/input' },
+          { text: 'InputNumber 数字输入框', link: '/components/input-number' },
+          { text: 'Radio 单选框', link: '/components/radio' },
+          { text: 'Form 表单', link: '/components/form' },
+          { text: 'Select 选择器', link: '/components/select' },
+          { text: 'Switch 开关', link: '/components/switch' },
+        ]
+      },
       {
         text: '数据展示',
         items: [
+          { text: 'Collapse 折叠面板', link: '/components/collapse' },
+          { text: 'Empty 空状态', link: '/components/empty' },
+          { text: 'Image 图片', link: '/components/image' },
+          { text: 'Popover 气泡卡片', link: '/components/popover' },
+          { text: 'Segmented 分段控制器', link: '/components/segmented' },
           { text: 'Table 表格', link: '/components/table' },
+          { text: 'Tabs 标签页', link: '/components/tabs' },
+          { text: 'Tooltip 文字提示', link: '/components/tooltip' },
+          { text: 'Tree 树形控件', link: '/components/tree' },
+        ]
+      },
+      {
+        text: '反馈',
+        items: [
+          { text: 'Modal 对话框', link: '/components/modal' },
+          { text: 'Popconfirm 气泡确认框', link: '/components/popconfirm' },
+          { text: 'Progress 进度条', link: '/components/progress' },
         ]
       },
     ],
@@ -38,7 +74,9 @@ export default defineConfig({
   vite: {
     resolve: {
       alias: {
+        '@': path.resolve(__dirname, '../../docs'),
         'antd-solid': path.resolve(__dirname, '../../src'),
+        'antd-solid-dist': path.resolve(__dirname, '../../dist'),
       },
     },
     plugins: [

package/docs/.vitepress/theme/index.css

@@ -12,4 +12,8 @@
     #1184ff 60%
   );
   --vp-home-hero-image-filter: blur(40px);
+}
+
+body {
+  font-size: 14px;
 }

package/docs/.vitepress/theme/index.ts

@@ -1,6 +1,5 @@
 import 'uno.css'
 import DefaultTheme from 'vitepress/theme'
-import 'antd-solid/index.css'
 import './index.css'
 import Code from '../components/Code.vue'
 

package/docs/components/{Button.tsx → button/Base.tsx}

@@ -11,6 +11,7 @@ const Index: Component = () => {
     >
       <Button type="primary">Primary Button</Button>
       <Button>Default Button</Button>
+      <Button type="dashed">Dashed Button</Button>
       <Button type="text">Text Button</Button>
       <Button type="link">Link Button</Button>
     </div>

package/docs/components/button/Danger.tsx

@@ -0,0 +1,21 @@
+import { type Component } from 'solid-js'
+import { Button } from 'antd-solid'
+
+const Index: Component = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: '8px',
+      }}
+    >
+      <Button type="primary" danger>Primary Button</Button>
+      <Button danger>Default Button</Button>
+      <Button type="dashed" danger>Dashed Button</Button>
+      <Button type="text" danger>Text Button</Button>
+      <Button type="link" danger>Link Button</Button>
+    </div>
+  )
+}
+
+export default Index

package/docs/components/button.md

@@ -8,16 +8,28 @@ outline: deep
 
 ## 代码演示
 
-
 ### 按钮类型
 
 按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
 
-<!-- The following frontmatter options are only applicable when using the default theme. -->
+<Code path="button/Base" />
+
+### 危险按钮
+
+在 4.0 之后，危险成为一种按钮属性而不是按钮类型。
+
+<Code path="button/Danger" />
+
+## API
+
+### Button
+
+<div class="vp-table">
 
-<script lang="ts" setup>
-import component from './Button.tsx'
-import code from './Button.tsx?raw'
-</script>
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+| allowClear      | 支持清除		       | boolean | false |
+| options   | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能        | { label, value }[] | - |
+| placeholder   | 选择框默认文本        | string | - |
 
-<Code :component="component" :code="code" />
+</div>

package/docs/components/collapse/Base.tsx

@@ -0,0 +1,25 @@
+import { type Component } from 'solid-js'
+import { Collapse } from 'antd-solid'
+
+const Index: Component = () => {
+  const items = [
+    {
+      key: '1',
+      label: 'Tab 1',
+      children: 'Content of Tab Pane 1',
+    },
+    {
+      key: '2',
+      label: 'Tab 2',
+      children: 'Content of Tab Pane 2',
+    },
+    {
+      key: '3',
+      label: 'Tab 3',
+      children: 'Content of Tab Pane 3',
+    },
+  ]
+  return <Collapse items={items} />
+}
+
+export default Index

package/docs/components/collapse.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# Collapse 折叠面板 {#title}
+
+可以折叠/展开的内容区域。
+
+## 代码演示
+
+### 折叠面板
+
+可以同时展开多个面板，这个例子默认展开了第一个。
+
+<Code path="collapse/Base" />
+
+## API
+
+### Collapse
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/color-picker/Base.tsx

@@ -0,0 +1,14 @@
+import { type Component } from 'solid-js'
+import { ColorPicker } from 'antd-solid'
+
+const Base: Component = () => {
+  return (
+    <ColorPicker
+      onChange={(value, hex) => {
+        console.log('onChange', value, hex)
+      }}
+    />
+  )
+}
+
+export default Base

package/docs/components/color-picker.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# ColorPicker 颜色选择器 {#title}
+
+提供颜色选取的组件。
+
+## 代码演示
+
+### 基本用法
+
+最简单的使用方法。
+
+<Code path="color-picker/Base" />
+
+## API
+
+### InputNumber
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/compact/Base.tsx

@@ -0,0 +1,27 @@
+import { type Component } from 'solid-js'
+import { Compact, Input, InputNumber } from 'antd-solid'
+
+const Index: Component = () => {
+  return (
+    <div style={{
+      display: 'grid',
+      gap: '8px',
+    }}>
+      <Compact>
+        <Input style={{ width: '20%' }} />
+        <InputNumber style={{ width: '30%' }} />
+        <Input style={{ width: '20%' }} />
+      </Compact>
+      <Compact>
+        <Input style={{ width: '50%' }} prefix="$" suffix=".00" />
+        <Input style={{ width: '50%' }} prefix="$" suffix=".00" />
+      </Compact>
+      <Compact>
+        <Input style={{ width: '50%' }} addonBefore="$" addonAfter=".00" />
+        <Input style={{ width: '50%' }} addonBefore="$" addonAfter=".00" />
+      </Compact>
+    </div>
+  )
+}
+
+export default Index

package/docs/components/compact.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# Compact 压缩 {#title}
+
+需要表单组件之间紧凑连接且合并边框时，使用 Compact。
+
+## 代码演示
+
+### 基本
+
+使用 Compact 让表单组件之间紧凑连接且合并边框。
+
+<Code path="compact/Base" />
+
+## API
+
+### Compact
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/date-picker/Base.tsx

@@ -0,0 +1,15 @@
+import { type Component } from 'solid-js'
+import { DatePicker } from 'antd-solid'
+
+const Index: Component = () => {
+  return (
+    <DatePicker
+      placeholder="请选择日期"
+      onChange={value => {
+        console.log('onChange', value)
+      }}
+    />
+  )
+}
+
+export default Index

package/docs/components/date-picker.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# DatePicker 日期选择框 {#title}
+
+输入或选择日期的控件。
+
+## 代码演示
+
+### 基本
+
+最简单的用法，在浮层中可以选择或者输入日期。
+
+<Code path="date-picker/Base" />
+
+## API
+
+### DatePicker
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/empty/Base.tsx

@@ -0,0 +1,8 @@
+import { type Component } from 'solid-js'
+import { Empty } from 'antd-solid'
+
+const App: Component = () => {
+  return <Empty />
+}
+
+export default App

package/docs/components/empty/PRESENTED_IMAGE_SIMPLE.tsx

@@ -0,0 +1,8 @@
+import { type Component } from 'solid-js'
+import { Empty } from 'antd-solid'
+
+const App: Component = () => {
+  return <Empty.PRESENTED_IMAGE_SIMPLE />
+}
+
+export default App

package/docs/components/empty.md

@@ -0,0 +1,32 @@
+---
+outline: deep
+---
+
+# Empty 空状态 {#title}
+
+空状态时的展示占位图。
+
+## 代码演示
+
+### 基本
+
+简单的展示。
+
+<Code path="empty/Base" />
+
+### 选择图片
+
+可以通过设置 `image` 为 `Empty.PRESENTED_IMAGE_SIMPLE` 选择另一种风格的图片。
+
+<Code path="empty/PRESENTED_IMAGE_SIMPLE" />
+
+## API
+
+### Empty
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/form/Base.tsx

@@ -0,0 +1,63 @@
+import { type Component } from 'solid-js'
+import { Button, Form, type FormInstance, Input } from 'antd-solid'
+import { string } from 'yup'
+
+const Base: Component = () => {
+  let ref: FormInstance
+
+  return (
+    <Form ref={ref!}>
+      <Form.Item
+        label="Username"
+        name="username"
+        component={props => (
+          <Input
+            {...props}
+            onChange={e => {
+              props.onChange?.(e.target.value)
+            }}
+          />
+        )}
+        required
+        rules={[string().required('Please input your username!')]}
+      />
+      <Form.Item
+        label="Password"
+        name="password"
+        component={props => (
+          <Input
+            {...props}
+            type="password"
+            onChange={e => {
+              props.onChange?.(e.target.value)
+            }}
+          />
+        )}
+        required
+        rules={[string().required('Please input your password!')]}
+      />
+      <Form.Item
+        component={() => (
+          <Button
+            type="primary"
+            // eslint-disable-next-line solid/reactivity
+            onClick={() => {
+              ref
+                .validateFields()
+                .then(resp => {
+                  console.log('resp', resp)
+                })
+                .catch(err => {
+                  console.log('catch', err)
+                })
+            }}
+          >
+            提交
+          </Button>
+        )}
+      />
+    </Form>
+  )
+}
+
+export default Base

package/docs/components/form.md

@@ -0,0 +1,27 @@
+---
+outline: deep
+---
+
+# Form 表单 {#title}
+
+高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
+
+## 代码演示
+
+### 基本用法
+
+基本的表单数据域控制展示，包含布局、初始化、验证、提交。
+
+<Code path="form/Base" />
+
+## API
+
+### Form
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+| layout      | 表单布局	 | `horizontal` \| `vertical` \| `inline` | `horizontal` |
+
+</div>