feat(type): change props o to type (#121)

onu-ui · Nov 25, 2022 · 87898fb · 87898fb
1 parent c336493
commit 87898fb
Show file tree

Hide file tree

Showing 29 changed files with 128 additions and 125 deletions.
diff --git a/docs/components/alert.md b/docs/components/alert.md
@@ -3,7 +3,7 @@ title: Alert
 lang: en-US
 ---
 
-# Alert
+# Alert <update-badge/>
 
 Alert informs users about important events.
 
@@ -55,7 +55,7 @@ Use the `center` attribute to center the text.
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| o | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'primary'` | Alert type. |
+| type | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'primary'` | Alert type. |
 | title | `string` | `undefined` | Alert title. |
 | description | `string` | `undefined` | Alert message. |
 | closable | `boolean` | `false` | Whether the alert can be closed. |

diff --git a/docs/components/button.md b/docs/components/button.md
@@ -9,7 +9,7 @@ Buttons allow the user to take actions or make choices.
 
 ## Basic usage
 
-Use `o` and `light` to define Button's style.
+Use `type` and `light` to define Button's style.
 
 <demo src="../example/button/basic.vue"></demo>
 
@@ -70,14 +70,14 @@ Use attribute `size` to set additional sizes with `xs`, `sm`,`md`,`lg`.
 ## Button Props
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| type | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'primary'` | Button type. |
 | size | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` | Button size.  |
 | light | `boolean` | `false` |  Determine whether it's a light button.  |
 | text | `boolean` | `false` | Determine whether it's a text button. |
 | to | `string` | `undefined` | Determine whether it's a link button. |
 | rounded | `boolean` | `false` | Determine whether it's a round button. |
 | loading | `boolean` | `false` | Determine whether it's loading.  |
 | disabled | `boolean` | `false` | Disable the button. |
-| o | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'primary'` | Button type. |
 
 
 

diff --git a/docs/components/tag.md b/docs/components/tag.md
@@ -9,7 +9,7 @@ Tags are used to inform the user of the status of specific data.
 
 ## Basic usage
 
-Use the `o` attribute to define Tag's type. In addition, the `bgColor` attribute can be used to set the background color of the Tag.
+Use the `type` attribute to define Tag's type. In addition, the `bgColor` attribute can be used to set the background color of the Tag.
 
 <demo src="../example/tag/basic.vue"></demo>
 
@@ -59,7 +59,7 @@ TODO
 | --- | --- | --- | --- |
 | size | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'sm'` | Tag size.  |
 | light | `boolean` | `false` |  Determine whether it's a light tag.  |
-| o | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'primary'` | Tag type. |
+| type | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'primary'` | Tag type. |
 | closable | `boolean` | `false` | Whether Tag can be removed. |
 | bgColor | `string` | `undefined` | Background color of the tag. |
 | rounded | `boolean` | `false`  | Whether tag is rounded. |

diff --git a/docs/example/alert/basic.vue b/docs/example/alert/basic.vue
@@ -1,21 +1,21 @@
 <template>
   <div fscw space-y-2>
-    <o-alert o="primary">
+    <o-alert type="primary">
       {{ content }}
     </o-alert>
-    <o-alert o="secondary">
+    <o-alert type="secondary">
       {{ content }}
     </o-alert>
-    <o-alert o="success">
+    <o-alert type="success">
       {{ content }}
     </o-alert>
-    <o-alert o="warning">
+    <o-alert type="warning">
       {{ content }}
     </o-alert>
-    <o-alert o="error">
+    <o-alert type="error">
       {{ content }}
     </o-alert>
-    <o-alert o="info">
+    <o-alert type="info">
       {{ content }}
     </o-alert>
   </div>

diff --git a/docs/example/alert/center.vue b/docs/example/alert/center.vue
@@ -1,6 +1,6 @@
 <template>
   <div fscw space-y-2>
-    <o-alert o="primary" :description="content" title="Center title and description" center />
+    <o-alert type="primary" :description="content" title="Center title and description" center />
   </div>
 </template>
 

diff --git a/docs/example/alert/custom-close.vue b/docs/example/alert/custom-close.vue
@@ -1,14 +1,14 @@
 <template>
   <div fscw space-y-2>
-    <o-alert o="primary" :description="content" closable @close="handleClose" />
+    <o-alert type="primary" :description="content" closable @close="handleClose" />
     <o-alert
-      o="success"
+      type="success"
       :description="content"
       closable
       close-text="close"
       @close="handleClose"
     />
-    <o-alert o="secondary" title="Custom title and close" :description="content" closable @close="handleClose">
+    <o-alert type="secondary" title="Custom title and close" :description="content" closable @close="handleClose">
       <template #icon>
         <o-icon name="i-fluent-emoji-astonished-face" text-6 />
       </template>

diff --git a/docs/example/alert/icon.vue b/docs/example/alert/icon.vue
@@ -1,7 +1,7 @@
 <template>
   <div fscw space-y-2>
-    <o-alert o="error" :description="content" :title="title + ' and Icon'" closable icon="i-carbon-logo-github" />
-    <o-alert o="secondary" title="Custom title and close" :description="content" closable @close="handleClose">
+    <o-alert type="error" :description="content" :title="title + ' and Icon'" closable icon="i-carbon-logo-github" />
+    <o-alert type="secondary" title="Custom title and close" :description="content" closable @close="handleClose">
       <template #icon>
         <o-icon name="i-fluent-emoji:clown-face" text-6 />
       </template>

diff --git a/docs/example/alert/light.vue b/docs/example/alert/light.vue
@@ -1,21 +1,21 @@
 <template>
   <div fscw space-y-2>
-    <o-alert o="primary" light>
+    <o-alert type="primary" light>
       {{ content }}
     </o-alert>
-    <o-alert o="secondary" light>
+    <o-alert type="secondary" light>
       {{ content }}
     </o-alert>
-    <o-alert o="success" light>
+    <o-alert type="success" light>
       {{ content }}
     </o-alert>
-    <o-alert o="warning" light>
+    <o-alert type="warning" light>
       {{ content }}
     </o-alert>
-    <o-alert o="error" light>
+    <o-alert type="error" light>
       {{ content }}
     </o-alert>
-    <o-alert o="info" light>
+    <o-alert type="info" light>
       {{ content }}
     </o-alert>
   </div>

diff --git a/docs/example/alert/title.vue b/docs/example/alert/title.vue
@@ -1,6 +1,6 @@
 <template>
   <div fscw space-y-2>
-    <o-alert o="primary" :description="content" :title="title" />
+    <o-alert type="primary" :description="content" :title="title" />
   </div>
 </template>
 

diff --git a/docs/example/button/basic.vue b/docs/example/button/basic.vue
@@ -1,42 +1,42 @@
 <template>
   <div space-y-2>
     <div fscw gap-2>
-      <o-button o="primary">
+      <o-button type="primary">
         Primary
       </o-button>
-      <o-button o="secondary">
+      <o-button type="secondary">
         Secondary
       </o-button>
-      <o-button o="success">
+      <o-button type="success">
         Success
       </o-button>
-      <o-button o="warning" rounded="full">
+      <o-button type="warning" rounded="full">
         Warning
       </o-button>
-      <o-button o="error" rounded="full">
+      <o-button type="error" rounded="full">
         Danger
       </o-button>
-      <o-button o="info" rounded="full">
+      <o-button type="info" rounded="full">
         Info
       </o-button>
     </div>
     <div fscw gap-2>
-      <o-button light o="primary">
+      <o-button light type="primary">
         Primary
       </o-button>
-      <o-button light o="secondary">
+      <o-button light type="secondary">
         Secondary
       </o-button>
-      <o-button light o="success">
+      <o-button light type="success">
         Success
       </o-button>
-      <o-button light o="warning dashed" rounded="full">
+      <o-button light type="warning dashed" rounded="full">
         Warning
       </o-button>
-      <o-button light o="error dashed" rounded="full">
+      <o-button light type="error dashed" rounded="full">
         Danger
       </o-button>
-      <o-button light o="info dashed" rounded="full">
+      <o-button light type="info dashed" rounded="full">
         Info
       </o-button>
     </div>

diff --git a/docs/example/button/disable.vue b/docs/example/button/disable.vue
@@ -1,53 +1,53 @@
 <template>
   <div space-y-2>
     <div fscw gap-2>
-      <o-button disabled o="primary">
+      <o-button disabled type="primary">
         Disabled
       </o-button>
-      <o-button disabled o="secondary">
+      <o-button disabled type="secondary">
         Disabled
       </o-button>
-      <o-button disabled o="success">
+      <o-button disabled type="success">
         Disabled
       </o-button>
-      <o-button disabled o="warning">
+      <o-button disabled type="warning">
         Disabled
       </o-button>
-      <o-button disabled o="error">
+      <o-button disabled type="error">
         Disabled
       </o-button>
     </div>
     <div fscw gap-2>
-      <o-button disabled o="primary" light>
+      <o-button disabled type="primary" light>
         Disabled
       </o-button>
-      <o-button disabled o="secondary" light>
+      <o-button disabled type="secondary" light>
         Disabled
       </o-button>
-      <o-button disabled o="success" light>
+      <o-button disabled type="success" light>
         Disabled
       </o-button>
-      <o-button disabled o="warning" light>
+      <o-button disabled type="warning" light>
         Disabled
       </o-button>
-      <o-button disabled o="error" light>
+      <o-button disabled type="error" light>
         Disabled
       </o-button>
     </div>
     <div fscw gap-2>
-      <o-button disabled o="primary" text>
+      <o-button disabled type="primary" text>
         Disabled
       </o-button>
-      <o-button disabled o="secondary" text>
+      <o-button disabled type="secondary" text>
         Disabled
       </o-button>
-      <o-button disabled o="success" text>
+      <o-button disabled type="success" text>
         Disabled
       </o-button>
-      <o-button disabled o="warning" text>
+      <o-button disabled type="warning" text>
         Disabled
       </o-button>
-      <o-button disabled o="error" text>
+      <o-button disabled type="error" text>
         Disabled
       </o-button>
     </div>

diff --git a/docs/example/button/icon.vue b/docs/example/button/icon.vue
@@ -1,36 +1,36 @@
 <template>
   <div space-y-2>
     <div fscw gap-2>
-      <o-button o="secondary">
+      <o-button type="secondary">
         <template #icon>
           <div i-carbon-share />
         </template>
       </o-button>
-      <o-button o="success" rounded-full>
+      <o-button type="success" rounded-full>
         <template #icon>
           <div i-carbon-logo-wechat />
         </template>
       </o-button>
-      <o-button o="error" rounded-full>
+      <o-button type="error" rounded-full>
         <template #icon>
           <div i-carbon-music />
         </template>
       </o-button>
     </div>
     <div fscw gap-2>
-      <o-button o="secondary">
+      <o-button type="secondary">
         <template #icon>
           <div i-carbon-share />
         </template>
         Share
       </o-button>
-      <o-button o="success">
+      <o-button type="success">
         <template #icon>
           <div i-carbon-logo-wechat />
         </template>
         WeChat
       </o-button>
-      <o-button o="error">
+      <o-button type="error">
         <template #icon>
           <div i-carbon-music />
         </template>

diff --git a/docs/example/button/link.vue b/docs/example/button/link.vue
@@ -1,11 +1,11 @@
 <template>
   <div fscw gap-2>
-    <o-button :to="githubUrl" o="secondary">
+    <o-button :to="githubUrl" type="secondary">
       <template #icon>
         <div i-carbon-logo-github />
       </template>
     </o-button>
-    <o-button :to="githubUrl" o="secondary">
+    <o-button :to="githubUrl" type="secondary">
       <template #icon>
         <div i-carbon-logo-github />
       </template>

diff --git a/docs/example/button/loading.vue b/docs/example/button/loading.vue
@@ -1,5 +1,5 @@
 <template>
-  <o-button o="info" :loading="loading" @click="startLoading">
+  <o-button type="info" :loading="loading" @click="startLoading">
     {{ loading ? 'Loading~~' : 'Start Load' }}
   </o-button>
 </template>

diff --git a/docs/example/button/round.vue b/docs/example/button/round.vue
@@ -1,35 +1,35 @@
 <template>
   <div space-y-3>
     <div fscw gap-2>
-      <o-button o="warning" rounded="full">
+      <o-button type="warning" rounded="full">
         Warning
       </o-button>
-      <o-button o="error" rounded="full">
+      <o-button type="error" rounded="full">
         Danger
       </o-button>
-      <o-button o="info" rounded="full">
+      <o-button type="info" rounded="full">
         Info
       </o-button>
     </div>
     <div fscw gap-2>
-      <o-button light o="warning dashed" rounded="full">
+      <o-button light type="warning dashed" rounded="full">
         Warning
       </o-button>
-      <o-button light o="error dashed" rounded="full">
+      <o-button light type="error dashed" rounded="full">
         Danger
       </o-button>
-      <o-button light o="info dashed" rounded="full">
+      <o-button light type="info dashed" rounded="full">
         Info
       </o-button>
     </div>
     <div fscw gap-2>
-      <o-button text o="warning" rounded="full">
+      <o-button text type="warning" rounded="full">
         Warning
       </o-button>
-      <o-button text o="error" rounded="full">
+      <o-button text type="error" rounded="full">
         Danger
       </o-button>
-      <o-button text o="info" rounded="full">
+      <o-button text type="info" rounded="full">
         Info
       </o-button>
     </div>