antd-solid 0.0.2 → 0.0.3

package/docs/components/switch/Base.tsx

@@ -0,0 +1,14 @@
+import { type Component } from 'solid-js'
+import { Switch } from 'antd-solid'
+
+const Index: Component = () => {
+  const onChange = (checked: boolean) => {
+    console.log(`switch to ${checked}`);
+  };
+
+  return (
+    <Switch onChange={onChange} />
+  )
+}
+
+export default Index

package/docs/components/switch.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# Switch 开关 {#title}
+
+开关选择器。
+
+## 代码演示
+
+### 基本
+
+最简单的用法。
+
+<Code path="switch/Base" />
+
+## API
+
+### Switch
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/{Table.tsx → table/Base.tsx}

@@ -1,12 +1,12 @@
 import { type Component } from 'solid-js'
-import { type Column, Table } from 'antd-solid'
+import { type TableColumn, Table } from 'antd-solid'
 
 interface Row {
   name: string
 }
 
 const Index: Component = () => {
-  const columns: Array<Column<Row>> = [
+  const columns: Array<TableColumn<Row>> = [
     {
       title: '动画',
       render(row) {

package/docs/components/table.md

@@ -13,11 +13,17 @@ outline: deep
 
 简单的表格
 
-<!-- The following frontmatter options are only applicable when using the default theme. -->
+<Code path="table/Base" />
 
-<script lang="ts" setup>
-import component from './Table.tsx'
-import code from './Table.tsx?raw'
-</script>
+## API
 
-<Code :component="component" :code="code" />
+### Table
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+| columns      | 表格列的配置描述，具体项见下表	       | Column[] | - |
+| dataSource   | 数据数组        | object[] | - |
+
+</div>

package/docs/components/tabs/Base.tsx

@@ -0,0 +1,25 @@
+import { type Component } from 'solid-js'
+import { Tabs } from 'antd-solid'
+
+const App: 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 <Tabs items={items} />
+}
+
+export default App

package/docs/components/tabs/Segment.tsx

@@ -0,0 +1,25 @@
+import { type Component } from 'solid-js'
+import { Tabs } from 'antd-solid'
+
+const App: 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 <Tabs type="segment" items={items} />
+}
+
+export default App

package/docs/components/tabs.md

@@ -0,0 +1,33 @@
+---
+outline: deep
+---
+
+# Tabs 标签页 {#title}
+
+选项卡切换组件。
+
+## 代码演示
+
+### 基本
+
+默认选中第一项。
+
+<Code path="tabs/Base" />
+
+### 分段
+
+分段类型的标签页。
+
+<Code path="tabs/Segment" />
+
+## API
+
+### Tabs
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+| type | 页签的基本样式，可选 `line`、`segment` 类型 | string | `line` |
+
+</div>

package/docs/components/tooltip/Base.tsx

@@ -0,0 +1,12 @@
+import { type Component } from 'solid-js'
+import { Tooltip } from 'antd-solid'
+
+const Index: Component = () => {
+  return (
+    <Tooltip content="prompt text">
+      <span>Tooltip will show on mouse enter.</span>
+    </Tooltip>
+  )
+}
+
+export default Index

package/docs/components/tooltip/Placement.tsx

@@ -0,0 +1,90 @@
+import { type Component } from 'solid-js'
+import { Button, Tooltip } from 'antd-solid'
+
+const buttonWidth = 80
+
+const text = <span>prompt text</span>
+
+const App: Component = () => {
+  return (
+    <div>
+      <div
+        style={{
+          'margin-inline-start': `${buttonWidth}px`,
+          'white-space': 'nowrap',
+          display: 'flex',
+          gap: '8px',
+        }}
+      >
+        <Tooltip placement="topLeft" content={text}>
+          <Button style={{ width: '80px' }}>TL</Button>
+        </Tooltip>
+        <Tooltip placement="top" content={text}>
+          <Button style={{ width: '80px' }}>Top</Button>
+        </Tooltip>
+        <Tooltip placement="topRight" content={text}>
+          <Button style={{ width: '80px' }}>TR</Button>
+        </Tooltip>
+      </div>
+      <div
+        style={{
+          width: `${buttonWidth}px`,
+          float: 'inline-start',
+          display: 'flex',
+          'flex-direction': 'column',
+          gap: '8px',
+        }}
+      >
+        <Tooltip placement="leftTop" content={text}>
+          <Button style={{ width: '80px' }}>LT</Button>
+        </Tooltip>
+        <Tooltip placement="left" content={text}>
+          <Button style={{ width: '80px' }}>Left</Button>
+        </Tooltip>
+        <Tooltip placement="leftBottom" content={text}>
+          <Button style={{ width: '80px' }}>LB</Button>
+        </Tooltip>
+      </div>
+      <div
+        style={{
+          width: `${buttonWidth}px`,
+          'margin-inline-start': `${buttonWidth * 4 + 24}px`,
+          display: 'flex',
+          'flex-direction': 'column',
+          gap: '8px',
+        }}
+      >
+        <Tooltip placement="rightTop" content={text}>
+          <Button style={{ width: '80px' }}>RT</Button>
+        </Tooltip>
+        <Tooltip placement="right" content={text}>
+          <Button style={{ width: '80px' }}>Right</Button>
+        </Tooltip>
+        <Tooltip placement="rightBottom" content={text}>
+          <Button style={{ width: '80px' }}>RB</Button>
+        </Tooltip>
+      </div>
+      <div
+        style={{
+          'margin-inline-start': `${buttonWidth}px`,
+          clear: 'both',
+          'white-space': 'nowrap',
+          display: 'flex',
+          gap: '8px',
+        }}
+      >
+        <Tooltip placement="bottomLeft" content={text}>
+          <Button style={{ width: '80px' }}>BL</Button>
+        </Tooltip>
+        <Tooltip placement="bottom" content={text}>
+          <Button style={{ width: '80px' }}>Bottom</Button>
+        </Tooltip>
+        <Tooltip placement="bottomRight" content={text}>
+          <Button style={{ width: '80px' }}>BR</Button>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default App

package/docs/components/tooltip.md

@@ -0,0 +1,32 @@
+---
+outline: deep
+---
+
+# Tooltip 文字提示 {#title}
+
+简单的文字提示气泡框。
+
+## 代码演示
+
+### 基本
+
+最简单的用法。
+
+<Code path="tooltip/Base" />
+
+### 位置
+
+位置有 12 个方向。
+
+<Code path="tooltip/Placement" />
+
+## API
+
+### Tooltip
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/tree/Base.tsx

@@ -0,0 +1,45 @@
+import { type Component } from 'solid-js'
+import { Tree } from 'antd-solid'
+
+const Index: Component = () => {
+  const treeData = [
+    {
+      title: 'parent 1',
+      key: '0-0',
+      children: [
+        {
+          title: 'parent 1-0',
+          key: '0-0-0',
+          disabled: true,
+          children: [
+            {
+              title: 'leaf',
+              key: '0-0-0-0',
+              disableCheckbox: true,
+            },
+            {
+              title: 'leaf',
+              key: '0-0-0-1',
+            },
+          ],
+        },
+        {
+          title: 'parent 1-1',
+          key: '0-0-1',
+          children: [{ title: <span style={{ color: '#1677ff' }}>sss</span>, key: '0-0-1-0' }],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <Tree
+      blockNode
+      titleRender={node => node.title}
+      children={node => node.children as any}
+      treeData={treeData}
+    />
+  )
+}
+
+export default Index

package/docs/components/tree.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# Tree 树形控件 {#title}
+
+多层次的结构列表。
+
+## 代码演示
+
+### 基本
+
+最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。
+
+<Code path="tree/Base" />
+
+## API
+
+### Tree
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/global.d.ts

@@ -0,0 +1,9 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.svg?raw' {
+  const content: string;
+  export default content;
+}

package/package.json

@@ -1,36 +1,42 @@
 {
   "name": "antd-solid",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
-  "main": "index.js",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "type": "module",
   "devDependencies": {
     "@iconify-json/ant-design": "^1.1.5",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@solidjs/testing-library": "^0.7.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/lodash-es": "^4.17.7",
     "@types/react": "^18.0.26",
-    "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "@unocss/cli": "^0.51.8",
     "@unocss/preset-icons": "^0.51.6",
     "@unocss/preset-mini": "^0.51.6",
+    "@unocss/reset": "^0.57.1",
     "@unocss/transformer-variant-group": "^0.51.6",
     "@unocss/vite": "^0.51.6",
     "babel-preset-solid": "^1.7.3",
-    "eslint": "^8.39.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-config-standard-with-typescript": "^34.0.1",
+    "eslint-config-standard-with-typescript": "^43.0.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-solid": "^0.12.1",
+    "husky": "^8.0.3",
     "jsdom": "^21.1.1",
+    "lint-staged": "^15.2.0",
     "rollup": "^3.21.0",
+    "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-import-css": "^3.2.1",
     "rollup-plugin-typescript2": "^0.34.1",
     "typescript": "^5.1.6",
@@ -42,21 +48,30 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "antd": "^5.3.0",
+    "antd": "^5.10.2",
     "classnames": "^2.3.2",
     "lodash-es": "^4.17.21",
+    "nanoid": "^5.0.1",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
-    "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
-    "solid-js": "^1.7.8"
+    "solid-js": "^1.8.7",
+    "solid-transition-group": "^0.2.3",
+    "yup": "^1.2.0"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ]
   },
   "scripts": {
     "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
+    "docs:build": "node scripts/annotationNonProductionCode && vitepress build docs && node scripts/cancelAnnotationNonProductionCode",
     "docs:preview": "vitepress preview docs",
-    "build": "npx rollup -c && npm run build:unocss",
-    "build:unocss": "npx unocss './src/**' -o es/unocss.css -m",
-    "test": "vitest"
+    "build": "rm -rf dist && NODE_ENV=production && npx rollup -c && npm run build:unocss",
+    "build:unocss": "npx unocss './src/**' -o dist/index.css -m",
+    "test": "vitest",
+    "preinstall": "husky install"
   }
 }

package/patches/vitepress@1.0.0-rc.4.patch

@@ -0,0 +1,60 @@
+diff --git a/dist/client/theme-default/styles/components/vp-doc.css b/dist/client/theme-default/styles/components/vp-doc.css
+index 12c5bf2d6a69f0d63c34b636985984b4ddb067db..fae415af1cf2800f435bab6fa1cb81ee07f95ef3 100644
+--- a/dist/client/theme-default/styles/components/vp-doc.css
++++ b/dist/client/theme-default/styles/components/vp-doc.css
+@@ -151,29 +151,30 @@
+  * Table
+  * -------------------------------------------------------------------------- */
+ 
+-.vp-doc table {
+-  display: block;
++.vp-table table {
++  width: 100%;
++  display: table;
+   border-collapse: collapse;
+   margin: 20px 0;
+   overflow-x: auto;
+ }
+ 
+-.vp-doc tr {
++.vp-table tr {
+   border-top: 1px solid var(--vp-c-divider);
+   transition: background-color 0.5s;
+ }
+ 
+-.vp-doc tr:nth-child(2n) {
++.vp-table tr:nth-child(2n) {
+   background-color: var(--vp-c-bg-soft);
+ }
+ 
+-.vp-doc th,
+-.vp-doc td {
++.vp-table th,
++.vp-table td {
+   border: 1px solid var(--vp-c-divider);
+   padding: 8px 16px;
+ }
+ 
+-.vp-doc th {
++.vp-table th {
+   text-align: left;
+   font-size: 14px;
+   font-weight: 600;
+@@ -181,7 +182,7 @@
+   background-color: var(--vp-c-bg-soft);
+ }
+ 
+-.vp-doc td {
++.vp-table td {
+   font-size: 14px;
+ }
+ 
+@@ -189,7 +190,7 @@
+  * Decorational elements
+  * -------------------------------------------------------------------------- */
+ 
+-.vp-doc hr {
++.vp-table hr {
+   margin: 16px 0;
+   border: none;
+   border-top: 1px solid var(--vp-c-divider);

package/rollup.config.js

@@ -1,25 +1,65 @@
 import ts from "rollup-plugin-typescript2"
-import css from "rollup-plugin-import-css"
 import commonjs from "@rollup/plugin-commonjs"
 import { babel } from "@rollup/plugin-babel"
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import terser from '@rollup/plugin-terser'
+import cleanup from 'rollup-plugin-cleanup'
 
-export default {
-  input: "src/index.ts",
-  output: {
-    file: "es/index.js",
+export default [
+  {
+    input: "src/index.ts",
+    output: {
+      file: "dist/index.esm.js",
+    },
+    plugins: [
+      ts({
+        tsconfig: "./tsconfig.json",
+        // include: "src/**/*.ts+(|x)",
+        exclude: ["**/*.test.[ts|tsx]"],
+      }),
+      babel({
+        extensions: [".js", ".ts", ".jsx", ".tsx"],
+        presets: ["babel-preset-solid"],
+      }),
+      commonjs(),
+    ],
+    external: ["uno.css"],
   },
-  plugins: [
-    ts({
-      tsconfig: "./tsconfig.json",
-      // include: "src/**/*.ts+(|x)",
-      exclude: ["**/*.test.[ts|tsx]"],
-    }),
-    babel({
-      extensions: [".js", ".ts", ".jsx", ".tsx"],
-      presets: ["babel-preset-solid"],
-    }),
-    commonjs(),
-    css(),
-  ],
-  external: ["uno.css"],
-}
+  {
+    input: "src/index.ts",
+    output: {
+      name: 'AntdSolid',
+      file: "dist/index.umd.js",
+      format: 'umd',
+      globals: {
+        'solid-js': 'SolidJs',
+        'solid-js/web': 'SolidJsWeb',
+        antd: 'Antd',
+        react: 'React',
+        'react-dom/client': 'ReactDOM',
+        'nanoid': 'Nanoid',
+        'classnames': 'Classnames',
+        'lodash-es': 'Lodash',
+      },
+    },
+    context: 'window',
+    plugins: [
+      ts({
+        tsconfig: "./tsconfig.json",
+        // include: "src/**/*.ts+(|x)",
+        exclude: ["**/*.test.[ts|tsx]"],
+      }),
+      babel({
+        extensions: [".js", ".ts", ".jsx", ".tsx"],
+        presets: ["babel-preset-solid"],
+      }),
+      nodeResolve({
+        browser: true,
+      }),
+      commonjs(),
+      terser(),
+      cleanup(),
+    ],
+    external: ["uno.css", 'solid-js', 'solid-js/web', 'react', 'react-dom/client', 'antd', 'nanoid', 'lodash-es', 'classnames'],
+  }
+]

package/scripts/annotationNonProductionCode.js

@@ -0,0 +1,30 @@
+/**
+ * 注释 Code 组件中的 Non-production 代码
+ */
+import path from 'path'
+import fs from 'fs'
+
+const codeComponentPath = path.resolve('docs/.vitepress/components/Code.vue')
+
+fs.readFile(codeComponentPath, 'utf8', (err, data) => {
+  if (err) {
+    console.error(err)
+    return
+  }
+
+  const reg = /(\/\/ Non-production code start\n)([\s\S]*)(\n.*\/\/ Non-production code end)/
+  const match = data.match(reg)
+  const annotation = match[2]
+    .split('\n')
+    .map(s => `// ${s}`)
+    .join('\n')
+  const newData = data.replace(reg, `$1${annotation}$3`)
+
+  fs.writeFile(codeComponentPath, newData, err => {
+    if (err) {
+      console.error(err)
+      return
+    }
+  })
+})
+console.log('codeComponentPathpath', codeComponentPath)

package/scripts/cancelAnnotationNonProductionCode.js

@@ -0,0 +1,30 @@
+/**
+ * 取消注释 Code 组件中的 Non-production 代码
+ */
+import path from 'path'
+import fs from 'fs'
+
+const codeComponentPath = path.resolve('docs/.vitepress/components/Code.vue')
+
+fs.readFile(codeComponentPath, 'utf8', (err, data) => {
+  if (err) {
+    console.error(err)
+    return
+  }
+
+  const reg = /(\/\/ Non-production code start\n)([\s\S]*)(\n.*\/\/ Non-production code end)/
+  const match = data.match(reg)
+  const annotation = match[2]
+    .split('\n')
+    .map(s => s.replace('// ', ''))
+    .join('\n')
+  const newData = data.replace(reg, `$1${annotation}$3`)
+
+  fs.writeFile(codeComponentPath, newData, err => {
+    if (err) {
+      console.error(err)
+      return
+    }
+  })
+})
+console.log('codeComponentPathpath', codeComponentPath)