feat: Form表单

DvShu · Jun 14, 2024 · cbe390f · cbe390f
1 parent 800bda3
commit cbe390f
Show file tree

Hide file tree

Showing 50 changed files with 3,188 additions and 712 deletions.
diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
@@ -12,8 +12,12 @@ name: release-please
 jobs:
   release:
     runs-on: ubuntu-latest
+    outputs:
+      release_created: ${{ steps.set-output-step.outputs.release_created }}
+      job_output: ${{ steps.set-output-step.outputs.output_value }}
+      b: ${{ steps.set-output-step.outputs.b }}
     steps:
-      - uses: google-github-actions/release-please-action@v4
+      - uses: googleapis/release-please-action@v4
         id: release
         name: release
         with:
@@ -25,13 +29,25 @@ jobs:
           # for more options
           release-type: node
 
+      - name: Generate output value
+        id: set-output-step
+        run: |
+          echo "Generating output value..."
+          VALUE="Hello, World!"
+          release_created=${{ steps.release.outputs.release_created }}
+          b="release_created_after"
+          echo "::set-output name=output_value::$VALUE"
+          echo "::set-output name=release_created::$release_created"
+          echo "::set-output name=b::$b"
+
   joblog:
     runs-on: ubuntu-latest
     needs: release
     steps:
       - name: Print Previous Job Output
         run: |
-          echo "Previous job output: ${{ needs.release.outputs }}"
+          echo "Previous job output: "
+          echo "${{ toJson(needs.release.outputs) }}"
 
   publish:
     runs-on: ubuntu-latest

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,65 @@
 # Changelog
 
+## [0.5.4](https://github.com/DvShu/neatui-vue/compare/v0.5.3...v0.5.4) (2024-06-07)
+
+
+### Bug Fixes
+
+* 修复上个版本未正确导出组件 ([404aac0](https://github.com/DvShu/neatui-vue/commit/404aac00600084214276e9d38b29a267b1b5638c))
+
+## [0.5.3](https://github.com/DvShu/neatui-vue/compare/v0.5.2...v0.5.3) (2024-06-07)
+
+
+### Bug Fixes
+
+* **Icon:** 增加 ArrowUp、ArrowDown 组件 ([f18a31f](https://github.com/DvShu/neatui-vue/commit/f18a31f487d7c16906290f5e561bd3aa187ba602))
+* **Table:** 优化表格 ([f18a31f](https://github.com/DvShu/neatui-vue/commit/f18a31f487d7c16906290f5e561bd3aa187ba602))
+
+## [0.5.2](https://github.com/DvShu/neatui-vue/compare/v0.5.1...v0.5.2) (2024-05-30)
+
+
+### Bug Fixes
+
+* **Button:** 按钮增加曾定义颜色功能 ([3d7ea23](https://github.com/DvShu/neatui-vue/commit/3d7ea23490f5113299cda3e26f99945ecc8c382c))
+
+## [0.5.1](https://github.com/DvShu/neatui-vue/compare/v0.5.0...v0.5.1) (2024-05-24)
+
+
+### Bug Fixes
+
+* **Checkbox:** 复选框增加 checked 属性 ([4dd23f6](https://github.com/DvShu/neatui-vue/commit/4dd23f62e7ac7905469108dad29f26666f83e8a8))
+* **Polygon:** 完善多边形文档 ([4dd23f6](https://github.com/DvShu/neatui-vue/commit/4dd23f62e7ac7905469108dad29f26666f83e8a8))
+* **Radio:** 单选框增加 checked 属性 ([4dd23f6](https://github.com/DvShu/neatui-vue/commit/4dd23f62e7ac7905469108dad29f26666f83e8a8))
+
+## [0.5.0](https://github.com/DvShu/neatui-vue/compare/v0.4.0...v0.5.0) (2024-05-23)
+
+
+### Features
+
+* **Switch:** 开关按钮 ([3e557a1](https://github.com/DvShu/neatui-vue/commit/3e557a16afd208d4f47aa39c1981543daede8786))
+
+## [0.4.0](https://github.com/DvShu/neatui-vue/compare/v0.3.1...v0.4.0) (2024-05-22)
+
+
+### Features
+
+* **Radio:** 单选框 ([8eb7ce3](https://github.com/DvShu/neatui-vue/commit/8eb7ce33c9e2f777b0980180d3a3cc16e8277a7f))
+
+## [0.3.1](https://github.com/DvShu/neatui-vue/compare/v0.3.0...v0.3.1) (2024-05-21)
+
+
+### Bug Fixes
+
+* **Tooltip:** 修复 Tooltip 位置错误 ([be72448](https://github.com/DvShu/neatui-vue/commit/be724481b204d8627aa6e8015f3b2ee5d6affcb8))
+* 优化主题色 ([be72448](https://github.com/DvShu/neatui-vue/commit/be724481b204d8627aa6e8015f3b2ee5d6affcb8))
+
+## [0.3.0](https://github.com/DvShu/neatui-vue/compare/v0.2.1...v0.3.0) (2024-05-17)
+
+
+### Features
+
+* **Checkbox:** 复选框组件 ([0a57ae6](https://github.com/DvShu/neatui-vue/commit/0a57ae66b33f0f68d5125f41097634f66211953b))
+
 ## [0.2.1](https://github.com/DvShu/neatui-vue/compare/v0.2.0...v0.2.1) (2024-05-08)
 
 

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -52,6 +52,11 @@ export default defineConfig({
           { text: 'Image 图片', link: '/components/image' },
           { text: 'Shadow 阴影', link: '/components/shadow' },
           { text: 'Table 表格', link: '/components/table' },
+          { text: 'Checkbox 复选框', link: '/components/checkbox' },
+          { text: 'Radio 单选框', link: '/components/radio' },
+          { text: 'Switch 开关', link: '/components/switch' },
+          { text: 'Polygon 多边形', link: '/components/polygon' },
+          { text: 'Form 表单', link: '/components/form' },
         ],
       },
     ],

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -19,6 +19,9 @@ import CodePreview from '../../../src/app_components/CodePreview.vue';
 import '../../../style/message';
 import '../../../style/shadow';
 import '../../../style/table';
+import '../../../style/switch';
+import '../../../style/form';
+import '../../../style/form_item';
 
 export default {
   extends: DefaultTheme,

diff --git a/docs/components/Polygon.md b/docs/components/Polygon.md
@@ -1,5 +1,134 @@
-# Polygon
-Polygon
+# Polygon 多边形
+
+显示一些多边形，例如：三角形、菱形、六边形、梯形等；全部采用 [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) 实现
+
 ## 演示
+
+<script setup>
+  import { Polygon } from '../../src';
+</script>
+
 ### 基础用法
-基础用法
+
+默认提供了多种三角形，只需要配置 `shape` 属性即可。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <div class="grid grid-cols-4">
+    <div class="center flex-col">
+      <Polygon shape="triangle-top"></Polygon>
+      <span>triangle-top</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-bottom"></Polygon>
+      <span>triangle-bottom</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-left"></Polygon>
+      <span>triangle-left</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-right"></Polygon>
+      <span>triangle-right</span>
+    </div>
+  </div>
+  <div class="grid grid-cols-4 mt-15">
+    <div class="center flex-col">
+      <Polygon shape="triangle-top-right"></Polygon>
+      <span>triangle-top-right</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-top-left"></Polygon>
+      <span>triangle-top-left</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-bottom-right"></Polygon>
+      <span>triangle-bottom-right</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-bottom-left"></Polygon>
+      <span>triangle-bottom-left</span>
+    </div>
+  </div>
+  </textarea>
+  <template #preview>
+    <div class="grid grid-cols-4">
+      <div class="center flex-col">
+        <Polygon shape="triangle-top"></Polygon>
+        <span>triangle-top</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-bottom"></Polygon>
+        <span>triangle-bottom</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-left"></Polygon>
+        <span>triangle-left</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-right"></Polygon>
+        <span>triangle-right</span>
+      </div>
+    </div>
+    <div class="grid grid-cols-4 mt-15">
+      <div class="center flex-col">
+        <Polygon shape="triangle-top-right"></Polygon>
+        <span>triangle-top-right</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-top-left"></Polygon>
+        <span>triangle-top-left</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-bottom-right"></Polygon>
+        <span>triangle-bottom-right</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-bottom-left"></Polygon>
+        <span>triangle-bottom-left</span>
+      </div>
+    </div>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 自定义菱形
+
+传递 `shape` 为 `rhombus`。然后自己定义 `nt-polygon-rhombus` 样式即可。同时可以通过 `background` 设置图形颜色
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <template>
+    <nt-polygon shape="rhombus" background="red"></nt-polygon>
+  </template>
+  <style>
+    .nt-polygon-rhombus {
+      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+    }
+  </style>
+  </textarea>
+  <template #preview>
+    <Polygon shape="rhombus" background="red"></Polygon>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### Shape Props
+
+| 属性名       | 类型     | 说明   | 默认值 |
+| ------------ | -------- | ------ | ------ |
+| `shape`      | `string` | 形状   | -      |
+| `background` | `string` | 背景色 | -      |
+
+### 样式变量
+
+| 变量名                    | 默认值                   | 说明         |
+| ------------------------- | ------------------------ | ------------ |
+| `--nt-polygen-size`       | `10px`                   | 多边形大小   |
+| `--nt-polygen-width`      | `var(--nt-polygen-size)` | 多边形宽度   |
+| `--nt-polygen-height`     | `var(--nt-polygen-size)` | 多边形高度   |
+| `--nt-polygen-background` | `#666`                   | 多边形背景色 |