antd-solid 0.0.2 → 0.0.3

package/docs/components/image/Base.tsx

@@ -0,0 +1,13 @@
+import { type Component } from 'solid-js'
+import { Image } from 'antd-solid'
+
+const Index: Component = () => {
+  return (
+    <Image
+      width={200}
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+    />
+  )
+}
+
+export default Index

package/docs/components/image.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# Image 图片 {#title}
+
+可预览的图片。
+
+## 代码演示
+
+### 基本
+
+单击图像可以放大显示。
+
+<Code path="image/Base" />
+
+## API
+
+### Image
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/input/AddonBeforeAndAfter.tsx

@@ -0,0 +1,14 @@
+import { type Component } from 'solid-js'
+import { Input } from 'antd-solid'
+
+const AddonBeforeAndAfter: Component = () => {
+  return (
+    <div class='ant-flex ant-flex-col ant-gap-8px'>
+      <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
+      <Input addonBefore="http://" defaultValue="mysite" />
+      <Input addonAfter=".com" defaultValue="mysite" />
+    </div>
+  )
+}
+
+export default AddonBeforeAndAfter

package/docs/components/input/Base.tsx

@@ -0,0 +1,15 @@
+import { type Component } from 'solid-js'
+import { Input } from 'antd-solid'
+
+const Base: Component = () => {
+  return (
+    <Input
+      placeholder="Basic usage"
+      onChange={e => {
+        console.log('onChange', e.target.value)
+      }}
+    />
+  )
+}
+
+export default Base

package/docs/components/input/Disabled.tsx

@@ -0,0 +1,19 @@
+import { type Component } from 'solid-js'
+import { Input } from 'antd-solid'
+
+const App: Component = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        'flex-direction': 'column',
+        gap: '8px',
+      }}
+    >
+      <Input disabled placeholder="disabled" />
+      <Input.TextArea disabled placeholder="disabled" />
+    </div>
+  )
+}
+
+export default App

package/docs/components/input/PrefixAndSuffix.tsx

@@ -0,0 +1,14 @@
+import { type Component } from 'solid-js'
+import { Input } from 'antd-solid'
+
+const PrefixAndSuffix: Component = () => {
+  return (
+    <div class="ant-flex ant-flex-col ant-gap-8px">
+      <Input prefix="http://" suffix=".com" defaultValue="mysite" />
+      <Input prefix="http://" defaultValue="mysite" />
+      <Input suffix=".com" defaultValue="mysite" />
+    </div>
+  )
+}
+
+export default PrefixAndSuffix

package/docs/components/input/Status.tsx

@@ -0,0 +1,25 @@
+import { type Component } from 'solid-js'
+import { Input } from 'antd-solid'
+
+const Status: Component = () => {
+  return (
+    <div class="ant-flex ant-flex-col ant-gap-8px">
+      <Input
+        placeholder="Error"
+        status="error"
+        onChange={e => {
+          console.log('onChange', e.target.value)
+        }}
+      />
+      <Input
+        placeholder="Warning"
+        status="warning"
+        onChange={e => {
+          console.log('onChange', e.target.value)
+        }}
+      />
+    </div>
+  )
+}
+
+export default Status

package/docs/components/input/TextArea.tsx

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

package/docs/components/input-number/Base.tsx

@@ -0,0 +1,15 @@
+import { type Component } from 'solid-js'
+import { InputNumber } from 'antd-solid'
+
+const Base: Component = () => {
+  return (
+    <InputNumber
+      placeholder="请输入"
+      onChange={value => {
+        console.log('onChange', value)
+      }}
+    />
+  )
+}
+
+export default Base

package/docs/components/input-number/MinMax.tsx

@@ -0,0 +1,17 @@
+import { type Component } from 'solid-js'
+import { InputNumber } from 'antd-solid'
+
+const Index: Component = () => {
+  return (
+    <InputNumber
+      min={1}
+      max={10}
+      placeholder="最小值 & 最大值"
+      onChange={value => {
+        console.log('onChange', value)
+      }}
+    />
+  )
+}
+
+export default Index

package/docs/components/input-number.md

@@ -0,0 +1,34 @@
+---
+outline: deep
+---
+
+# InputNumber 数字输入框 {#title}
+
+通过鼠标或键盘，输入范围内的数值。
+
+## 代码演示
+
+### 基本用法
+
+数字输入框。
+
+<Code path="input-number/Base" />
+
+### 最小值 & 最大值
+
+你可以设定最小值和最大值。
+
+<Code path="input-number/MinMax" />
+
+## API
+
+### InputNumber
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+| max      | 最大值			       | number | Infinity |
+| min      | 最小值			       | number | -Infinity |
+
+</div>

package/docs/components/input.md

@@ -0,0 +1,57 @@
+---
+outline: deep
+---
+
+# Input 输入框 {#title}
+
+通过鼠标或键盘输入内容，是最基础的表单域的包装。
+
+## 代码演示
+
+### 基本用法
+
+基本用法。
+
+<Code path="input/Base" />
+
+### 前置/后置标签
+
+用于配置一些固定组合。
+
+<Code path="input/AddonBeforeAndAfter" />
+
+### 文本域
+
+用于多行输入。
+
+<Code path="input/TextArea" />
+
+### 前缀和后缀
+
+在输入框上添加前缀或后缀图标。
+
+<Code path="input/PrefixAndSuffix" />
+
+### 不可用状态
+
+Input 不可用状态
+
+<Code path="input/Disabled" />
+
+### 自定义状态
+
+使用 `status` 为 Input 添加状态，可选 `error` 或者 `warning`。
+
+<Code path="input/Status" />
+
+## API
+
+### Input
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+| status      | 设置校验状态 | 'error' \| 'warning' | - |
+
+</div>

package/docs/components/modal/Base.tsx

@@ -0,0 +1,35 @@
+import { type Component } from 'solid-js'
+import { Button, Modal, type ModalInstance } from 'antd-solid'
+
+const Index: Component = () => {
+  let ref: ModalInstance
+
+  const showModal = () => {
+    ref.open()
+  }
+
+  const handleOk = () => {
+    console.log('确定')
+    return true
+  }
+
+  const afterClose = () => {
+    console.log('取消')
+  }
+
+  return (
+    <>
+      <Button type="primary" onClick={showModal}>
+        Open Modal
+      </Button>
+      <Modal ref={ref!} title="Basic Modal" onOk={handleOk} afterClose={afterClose}>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Modal>
+    </>
+  )
+}
+
+export default Index

package/docs/components/modal.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# Modal 对话框 {#title}
+
+模态对话框。
+
+## 代码演示
+
+### 基本
+
+基础弹框。
+
+<Code path="modal/Base" />
+
+## API
+
+### Modal
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/popconfirm/Base.tsx

@@ -0,0 +1,25 @@
+import { type Component } from 'solid-js'
+import { Button, Popconfirm, message } from 'antd-solid'
+
+const Index: Component = () => {
+  const confirm = () => {
+    message.success('Click on Yes')
+  }
+  const cancel = () => {
+    message.error('Click on No');
+  };
+
+  return (
+    <Popconfirm
+      title="是否同步删除后续继承节点"
+      okText="是"
+      cancelText="否"
+      onConfirm={confirm}
+      onCancel={cancel}
+    >
+      <Button danger>Delete</Button>
+    </Popconfirm>
+  )
+}
+
+export default Index

package/docs/components/popconfirm.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# Popconfirm 气泡确认框 {#title}
+
+点击元素，弹出气泡式的确认框。
+
+## 代码演示
+
+### 基本
+
+最简单的用法，支持确认标题和描述。
+
+<Code path="popconfirm/Base" />
+
+## API
+
+### Popconfirm
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/popover/Base.tsx

@@ -0,0 +1,19 @@
+import { type Component } from 'solid-js'
+import { Button, Popover } from 'antd-solid'
+
+const content = (
+  <div style={{ width: '150px' }}>
+    <p>Content</p>
+    <p>Content</p>
+  </div>
+);
+
+const Index: Component = () => {
+  return (
+    <Popover content={content} title="Title">
+      <Button type="primary">Hover me</Button>
+    </Popover>
+  )
+}
+
+export default Index

package/docs/components/popover.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# Popover 气泡卡片 {#title}
+
+点击/鼠标移入元素，弹出气泡式的卡片浮层。
+
+## 代码演示
+
+### 基本
+
+最简单的用法，浮层的大小由内容区域决定。
+
+<Code path="popover/Base" />
+
+## API
+
+### Popover
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/progress/Base.tsx

@@ -0,0 +1,16 @@
+import { type Component } from 'solid-js'
+import { Progress } from 'antd-solid'
+
+const Index: Component = () => {
+  return (
+    <>
+      <Progress percent={30} />
+      <Progress percent={50} status="active" />
+      <Progress percent={70} status="exception" />
+      <Progress percent={100} />
+      <Progress percent={50} showInfo={false} />
+    </>
+  )
+}
+
+export default Index

package/docs/components/progress.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# Progress 进度条 {#title}
+
+展示操作的当前进度。
+
+## 代码演示
+
+### 基本
+
+标准的进度条。
+
+<Code path="progress/Base" />
+
+## API
+
+### Progress
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/radio/Base.tsx

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

package/docs/components/radio.md

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

package/docs/components/segmented/Base.tsx

@@ -0,0 +1,10 @@
+import { type Component } from 'solid-js'
+import { Segmented } from 'antd-solid'
+
+const App: Component = () => {
+  const options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']
+
+  return <Segmented options={options} onChange={console.log} />
+}
+
+export default App

package/docs/components/segmented/Block.tsx

@@ -0,0 +1,10 @@
+import { type Component } from 'solid-js'
+import { Segmented } from 'antd-solid'
+
+const App: Component = () => {
+  const options = ['第一章', '第二章', '第三章']
+
+  return <Segmented block options={options} onChange={console.log} />
+}
+
+export default App

package/docs/components/segmented/Disabled.tsx

@@ -0,0 +1,28 @@
+import { type Component } from 'solid-js'
+import { Segmented } from 'antd-solid'
+
+const App: Component = () => {
+  const options = [
+    'Daily',
+    { label: () => 'Weekly', value: 'Weekly', disabled: true },
+    'Monthly',
+    { label: () => 'Quarterly', value: 'Quarterly', disabled: true },
+    'Yearly',
+  ]
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        'flex-direction': 'column',
+        'align-items': 'flex-start',
+        gap: '8px',
+      }}
+    >
+      <Segmented disabled options={options} onChange={console.log} />
+      <Segmented options={options} onChange={console.log} />
+    </div>
+  )
+}
+
+export default App

package/docs/components/segmented.md

@@ -0,0 +1,38 @@
+---
+outline: deep
+---
+
+# Segmented 分段控制器 {#title}
+
+选项卡切换组件。
+
+## 代码演示
+
+### 基本
+
+默认选中第一项。
+
+<Code path="segmented/Base" />
+
+### Block 分段选择器
+
+`block` 属性使其适合父元素宽度。
+
+<Code path="segmented/Block" />
+
+### 不可用
+
+Segmented 不可用。
+
+<Code path="segmented/Disabled" />
+
+## API
+
+### Segmented
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+
+</div>

package/docs/components/select/AllowClear.tsx

@@ -0,0 +1,18 @@
+import { type Component } from 'solid-js'
+import { Select } from 'antd-solid'
+
+const AllowClear: Component = () => {
+  return (
+    <Select
+      placeholder="请选择"
+      allowClear
+      options={[
+        { value: 'jack', label: 'Jack' },
+        { value: 'lucy', label: 'Lucy' },
+        { value: 'yiminghe', label: 'Yiminghe' },
+      ]}
+    />
+  )
+}
+
+export default AllowClear

package/docs/components/select/Base.tsx

@@ -0,0 +1,17 @@
+import { type Component } from 'solid-js'
+import { Select } from 'antd-solid'
+
+const Base: Component = () => {
+  return (
+    <Select
+      placeholder="请选择"
+      options={[
+        { value: 'jack', label: 'Jack' },
+        { value: 'lucy', label: 'Lucy' },
+        { value: 'yiminghe', label: 'Yiminghe' },
+      ]}
+    />
+  )
+}
+
+export default Base

package/docs/components/select.md

@@ -0,0 +1,35 @@
+---
+outline: deep
+---
+
+# Select 选择器 {#title}
+
+下拉选择器。
+
+## 代码演示
+
+### 基本用法
+
+选择器的基础用法。
+
+<Code path="select/Base" />
+
+### 可清空
+
+注意只有选了值才能清空值。
+
+<Code path="select/AllowClear" />
+
+## API
+
+### Table
+
+<div class="vp-table">
+
+| 参数      | 说明 | 类型 | 默认值
+| ----------- | ----------- | ----------- | ----------- |
+| allowClear      | 支持清除		       | boolean | false |
+| options   | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能        | { label, value }[] | - |
+| placeholder   | 选择框默认文本        | string | - |
+
+</div>