feat: update

docs/.vitepress/theme/index.ts

@@ -1,7 +1,7 @@
 import DefaultTheme from "vitepress/theme";
 import { installComponents } from "atomu-vue";
-import "atomu-theme";
 import "./custom.css";
+import "atomu-theme";
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {

docs/component/table.md

@@ -0,0 +1,63 @@
+# Rate 评分
+
+## 基础使用
+
+ <table class="min-w-full divide-y divide-gray-300">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Name</th>
+                  <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Title</th>
+                  <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Email</th>
+                  <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Role</th>
+                  <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                    <span class="sr-only">Edit</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-200 bg-white">
+                <tr v-for="person in people" :key="person.email">
+                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{{ person.name }}</td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ person.title }}</td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ person.email }}</td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ person.role }}</td>
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                    <a href="#" class="text-indigo-600 hover:text-indigo-900"
+                      >Edit<span class="sr-only">, {{ person.name }}</span></a
+                    >
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+```vue
+
+```
+
+## 属性
+
+| 名称                 | 类型    | 可选值 | 默认值 | 说明   |
+| -------------------- | ------- | ------ | ------ | ------ |
+| modelValue / v-model | number  | -      | 0      | 绑定值 |
+| disabled             | boolean | -      | false  | 禁用   |
+
+## 事件
+
+| 名称   | 说明           | 参数           |
+| ------ | -------------- | -------------- |
+| change | 分数改变时触发 | (value:number) |
+
+<script lang="ts" setup>
+import { ref } from "vue";
+const people = [
+  { name: 'Lindsay Walton', title: 'Front-end Developer', email: 'lindsay.walton@example.com', role: 'Member' },
+  { name: 'Lindsay Walton', title: 'Front-end Developer', email: 'lindsay.walton@example.com', role: 'Member' },
+  { name: 'Lindsay Walton', title: 'Front-end Developer', email: 'lindsay.walton@example.com', role: 'Member' },
+  { name: 'Lindsay Walton', title: 'Front-end Developer', email: 'lindsay.walton@example.com', role: 'Member' },
+  { name: 'Lindsay Walton', title: 'Front-end Developer', email: 'lindsay.walton@example.com', role: 'Member' },
+]
+
+</script>
+
+```
+
+```

packages/components/checkbox/src/checkbox.vue

@@ -1,17 +1,18 @@
 <template>
-  <label class="a-checkbox" :class="{ 'is-checked': isChecked, 'is-disabled': disabled }">
+  <span class="a-checkbox" :class="{ 'is-checked': isChecked, 'is-disabled': disabled }">
     <input
       class="a-checkbox__inner"
       type="checkbox"
+      :id="label + ''"
       :value="label"
       :disabled="disabled"
       v-model="modelValue"
     />
-    <span class="a-checkbox__label">
+    <label :for="label + ''" class="a-checkbox__label">
       <slot></slot>
       <template v-if="!$slots.default">{{ label }}</template>
-    </span>
-  </label>
+    </label>
+  </span>
 </template>
 
 <script setup lang="ts">

packages/components/radio/src/radio.vue

@@ -1,17 +1,18 @@
 <template>
-  <label class="a-radio" :class="{ 'is-checked': label === modelValue, 'is-disabled': disabled }">
+  <span class="a-radio" :class="{ 'is-checked': label === modelValue, 'is-disabled': disabled }">
     <input
       class="a-radio__inner"
       type="radio"
+      :id="label + ''"
       :value="label"
       :disabled="disabled"
       v-model="modelValue"
     />
-    <span class="a-radio__label">
+    <label :for="label + ''" class="a-radio__label">
       <slot></slot>
       <template v-if="!$slots.default">{{ label }}</template>
-    </span>
-  </label>
+    </label>
+  </span>
 </template>
 
 <script setup lang="ts">

packages/components/switch/src/switch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div
+  <span
     class="a-switch"
     :class="{ 'is-checked': modelValue, 'is-disabled': disabled }"
     @click="handleClick"
@@ -8,7 +8,7 @@
     <span class="a-switch__core">
       <span class="a-switch__button"></span>
     </span>
-  </div>
+  </span>
 </template>
 
 <script setup lang="ts">

packages/components/table/index.ts

@@ -0,0 +1,14 @@
+import _Table from "./src/rate.vue";
+import { withInstall } from "atomu-utils";
+
+const Table = withInstall(_Table);
+
+export default Table;
+
+export * from "./src/table";
+
+declare module "vue" {
+  export interface GlobalComponents {
+    ATable: typeof Table;
+  }
+}

packages/components/table/src/table.ts

@@ -0,0 +1,14 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const tableProps = {
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+} as const;
+
+export type TableProps = ExtractPropTypes<typeof tableProps>;

packages/components/table/src/table.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="a-rate" :class="{ 'is-disabled': disabled }">
+    <span
+      v-for="(item, index) in 5"
+      :key="index"
+      class="a-rate__item"
+      :class="'a-rate__item--' + (currentValue >= item ? 'on' : 'off')"
+      @mousemove="setCurrentValue(item)"
+      @mouseleave="resetCurrentValue"
+      @click="selectValue(item)"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 576 512"
+      >
+        <path
+          d="M259.3 17.8L194 150.2L47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103l-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5l105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2L316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { tableProps } from './table';
+
+const props = defineProps(tableProps);
+const emit = defineEmits(['update:modelValue', 'change']);
+
+let currentValue = ref(props.modelValue);
+
+const setCurrentValue = (val: number) => {
+  if (props.disabled) return;
+  currentValue.value = val;
+};
+
+const resetCurrentValue = () => {
+  if (props.disabled) return;
+  currentValue.value = props.modelValue;
+};
+
+const selectValue = (val: number) => {
+  if (props.disabled) return;
+  emit('update:modelValue', val);
+  emit('change', val);
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ATable',
+  inheritAttrs: false
+};
+</script>

packages/theme/checkbox.css

@@ -1,5 +1,4 @@
 .a-checkbox-group {
-  @apply text-sm;
   @apply flex items-center;
 }
 
@@ -14,8 +13,9 @@
 
 .a-checkbox__inner {
   @apply appearance-none cursor-pointer;
-  @apply h-4 w-4 bg-white border-solid border-1px border-gray-300 rounded-sm; 
-  @apply text-primary hover:ring-2 ring-gray-200;
+  @apply h-4 w-4 bg-white border-solid border-1px border-gray-300 rounded-sm;
+  @apply text-primary focus:ring-1;
+  @apply focus:ring-primary;
 }
 
 .a-checkbox__inner:checked {
@@ -24,7 +24,7 @@
 }
 
 .a-checkbox__label {
-  @apply ml-1;
+  @apply ml-2 text-sm;
 }
 
 .a-checkbox.is-disabled {

packages/theme/radio.css

@@ -3,7 +3,6 @@
 }
 
 .a-radio {
-  @apply text-sm;
   @apply inline-flex items-center;
   @apply cursor-pointer;
 }
@@ -15,7 +14,8 @@
 .a-radio__inner {
   @apply appearance-none cursor-pointer;
   @apply h-4 w-4  bg-white border-solid border-1px border-gray-300 rounded-full;
-  @apply text-primary hover:ring-2 ring-gray-200;
+  @apply text-primary focus:ring-1;
+  @apply focus:ring-primary;
 }
 
 .a-radio__inner:checked {
@@ -24,7 +24,7 @@
 }
 
 .a-radio__label {
-  @apply ml-1;
+  @apply ml-2 text-sm;
 }
 
 .a-radio.is-disabled {

packages/theme/switch.css

@@ -8,8 +8,8 @@
 
 .a-switch__core {
   @apply relative inline-block w-10 h-5 bg-light-900 rounded-full;
-  @apply hover:ring-4 ring-gray-200;
   @apply cursor-pointer shadow;
+  @apply hover:ring-1 ring-offset-1 hover:ring-primary;
 }
 
 .a-switch__button {

packages/theme/theme.css

@@ -22,4 +22,8 @@
   --a-danger: #f43f5e; /* colors.rose-500 */
 }
 
+svg{
+  @apply inline-block;
+}
+
 /* https://www.tailwindcss.cn/docs/customizing-colors#-8 */