fix: netural => neutral; add doc for Element

daief · Nov 30, 2022 · ae18e1e · ae18e1e
1 parent f402067
commit ae18e1e
Show file tree

Hide file tree

Showing 20 changed files with 92 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -114,6 +114,8 @@ export function render() {
 - [x] divider
 - [x] drawer - 🛠 refactor
 - [x] dropdown - 🛠 refactor(popper inside)
+- [ ] widgets 🆕 new
+  - [x] element
 - [ ] footer
 - [ ] hero
 - [x] icon - 🛠 [xicons](https://github.com/07akioni/xicons)

diff --git a/docs/src/pages/components/badge.md b/docs/src/pages/components/badge.md
@@ -8,7 +8,7 @@ badge
 <div
   class="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row"
 >
-  <dv-badge>netural</dv-badge>
+  <dv-badge>neutral</dv-badge>
   <dv-badge type="primary">primary</dv-badge>
   <dv-badge type="secondary">secondary</dv-badge>
   <dv-badge type="accent">accent</dv-badge>
@@ -77,7 +77,7 @@ badge outline
 <div
   class="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row"
 >
-  <dv-badge outline>netural</dv-badge>
+  <dv-badge outline>neutral</dv-badge>
   <dv-badge outline type="primary">primary</dv-badge>
   <dv-badge outline type="secondary">secondary</dv-badge>
   <dv-badge outline type="accent">accent</dv-badge>
@@ -142,6 +142,6 @@ badge in button
 
 | name    | description                              | type                                                                                   | default |
 | ------- | ---------------------------------------- | -------------------------------------------------------------------------------------- | ------- |
-| type    | color type                               | netural, primary, secondary, accent, info, success, warning, error, ghost, link, glass | netural |
+| type    | color type                               | neutral, primary, secondary, accent, info, success, warning, error, ghost, link, glass | neutral |
 | size    | size                                     | ISize                                                                                  | md      |
 | outline | transparent badge with [colorful] border | boolean                                                                                | false   |
diff --git a/docs/src/pages/components/button.md b/docs/src/pages/components/button.md
@@ -8,7 +8,7 @@ button with brand colors
 <div
   class="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row"
 >
-  <dv-button>netural</dv-button>
+  <dv-button>neutral</dv-button>
   <dv-button variant="primary">secondary</dv-button>
   <dv-button variant="secondary">secondary</dv-button>
   <dv-button variant="accent">accent</dv-button>
@@ -23,7 +23,7 @@ active state button
 <div
   class="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row"
 >
-  <dv-button active>netural</dv-button>
+  <dv-button active>neutral</dv-button>
   <dv-button active variant="primary">secondary</dv-button>
   <dv-button active variant="secondary">secondary</dv-button>
   <dv-button active variant="accent">accent</dv-button>
@@ -38,7 +38,7 @@ outline button
 <div
   class="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row"
 >
-  <dv-button outline>netural</dv-button>
+  <dv-button outline>neutral</dv-button>
   <dv-button variant="primary" outline>secondary</dv-button>
   <dv-button variant="secondary" outline>secondary</dv-button>
   <dv-button variant="accent" outline>accent</dv-button>
@@ -51,7 +51,7 @@ disabled button
 <div
   class="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row"
 >
-  <dv-button disabled>netural</dv-button>
+  <dv-button disabled>neutral</dv-button>
   <dv-button variant="primary" disabled>secondary</dv-button>
   <dv-button variant="secondary" disabled>secondary</dv-button>
   <dv-button variant="accent" disabled>accent</dv-button>
@@ -150,7 +150,7 @@ button loading
   <div
     class="w-full flex flex-wrap justify-center items-center md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row mb-4"
   >
-    <dv-button loading>netural</dv-button>
+    <dv-button loading>neutral</dv-button>
     <dv-button loading variant="primary">secondary</dv-button>
     <dv-button loading variant="accent">accent</dv-button>
     <dv-button loading variant="ghost">ghost</dv-button>
@@ -270,7 +270,7 @@ button group outline
 
 | name        | description                            | type                                                                                   | default |
 | ----------- | -------------------------------------- | -------------------------------------------------------------------------------------- | ------- |
-| variant     | button color type                      | netural, primary, secondary, accent, info, success, warning, error, ghost, link, glass | netural |
+| variant     | button color type                      | neutral, primary, secondary, accent, info, success, warning, error, ghost, link, glass | neutral |
 | size        | button size                            | ISize                                                                                  | md      |
 | shape       | button shape                           | default, circle, square                                                                | default |
 | block       | full with button                       | boolean                                                                                | false   |

diff --git a/docs/src/pages/components/checkbox.md b/docs/src/pages/components/checkbox.md
@@ -30,7 +30,7 @@ Color type
 ```tsx :::run
 export default {
   setup: () => {
-    const types = ['netural', 'primary', 'secondary', 'accent'];
+    const types = ['neutral', 'primary', 'secondary', 'accent'];
     return () => (
       <div class="flex flex-col items-center space-y-4">
         {types.map((type) => (
@@ -127,7 +127,7 @@ export default {
 | name           | description                                               | type                                | default |
 | -------------- | --------------------------------------------------------- | ----------------------------------- | ------- |
 | size           | size                                                      | ISize                               | md      |
-| type           | color type                                                | netural, primary, secondary, accent | netural |
+| type           | color type                                                | neutral, primary, secondary, accent | neutral |
 | disabled       | disable status                                            | bool                                | -       |
 | checked        | checked status                                            | bool                                | -       |
 | onChange       | change callback                                           | Function                            | -       |
@@ -143,7 +143,7 @@ export default {
 | name         | description     | type                                | default |
 | ------------ | --------------- | ----------------------------------- | ------- |
 | size         | size            | ISize                               | md      |
-| type         | color type      | netural, primary, secondary, accent | netural |
+| type         | color type      | neutral, primary, secondary, accent | neutral |
 | disabled     | disable status  | bool                                | -       |
 | options      | options         | IOption[]                           | -       |
 | value        | selected values | IText[]                             | -       |

diff --git a/docs/src/pages/components/dropdown.md b/docs/src/pages/components/dropdown.md
@@ -68,7 +68,7 @@ export default {
           size="xs"
           data-pls={plsKey}
           onClick={() => (pls.value = plsKey)}
-          type={plsKey === pls.value ? 'primary' : 'netural'}
+          type={plsKey === pls.value ? 'primary' : 'neutral'}
         >
           {plsKey}
         </dv-button>

diff --git a/docs/src/pages/components/element.md b/docs/src/pages/components/element.md
@@ -0,0 +1,55 @@
+# Element
+
+## Examples
+
+background type
+
+```html :::demo
+<div class="space-y-2 p-2 w-full text-center">
+  <dv-element class="border-gray-400 border">div</dv-element>
+  <dv-element variant="neutral">neutral</dv-element>
+  <dv-element variant="primary">parimary</dv-element>
+  <dv-element variant="secondary">secondary</dv-element>
+  <dv-element variant="accent">accent</dv-element>
+  <dv-element variant="info">info</dv-element>
+  <dv-element variant="success">success</dv-element>
+  <dv-element variant="warning">warning</dv-element>
+  <dv-element variant="error">error</dv-element>
+  <dv-element variant="base-100">base-100</dv-element>
+  <dv-element variant="base-200">base-200</dv-element>
+  <dv-element variant="base-300">base-300</dv-element>
+</div>
+```
+
+text color
+
+```html :::demo
+<div class="space-y-2 p-2 w-full text-center">
+  <dv-element color="primary">primary</dv-element>
+  <dv-element color="info">info</dv-element>
+  <dv-element color="base-content">base-content</dv-element>
+
+  <dv-element color="red">color name</dv-element>
+  <dv-element color="#6cf">#6cf</dv-element>
+  <dv-element color="rgb(218 137 33)">rgb(218 137 33)</dv-element>
+</div>
+```
+
+html tag
+
+```html :::demo
+<div class="space-y-2 p-2 w-full text-center flex flex-col">
+  <dv-element tag="span" color="primary">span</dv-element>
+  <dv-element tag="button" color="primary">button</dv-element>
+</div>
+```
+
+## Element
+
+### Attributes
+
+| name    | description | type          | default |
+| ------- | ----------- | ------------- | ------- |
+| tag     | html tag    | string        | div     |
+| variant | theme type  | IElementType  | -       |
+| color   | text color  | IColor,string | -       |
diff --git a/docs/src/pages/components/input.md b/docs/src/pages/components/input.md
@@ -95,6 +95,6 @@ Disabled
 
 | name   | description      | type                                                                      | default |
 | ------ | ---------------- | ------------------------------------------------------------------------- | ------- |
-| type   | input color type | netural, primary, secondary, accent, info, success, warning, error, ghost | netural |
+| type   | input color type | neutral, primary, secondary, accent, info, success, warning, error, ghost | neutral |
 | size   | input size       | ISize                                                                     | md      |
 | border | input border     | boolean                                                                   | true    |
diff --git a/docs/src/pages/components/link.md b/docs/src/pages/components/link.md
@@ -27,7 +27,7 @@ Link type color
 
 ```html :::demo
 <div class="flex flex-col items-center space-y-2">
-  <dv-link type="netural">netural color</dv-link>
+  <dv-link type="neutral">neutral color</dv-link>
   <dv-link type="primary">primary color</dv-link>
   <dv-link type="secondary">secondary color</dv-link>
   <dv-link type="accent">accent color</dv-link>
@@ -48,5 +48,5 @@ Show underline only on hover
 
 | name             | description                  | type                                | default |
 | ---------------- | ---------------------------- | ----------------------------------- | ------- |
-| type             | link color type              | netural, primary, secondary, accent | netural |
+| type             | link color type              | neutral, primary, secondary, accent | neutral |
 | enableHoverClass | show underline only on hover | boolean                             | false   |
diff --git a/docs/src/pages/components/popper.md b/docs/src/pages/components/popper.md
@@ -95,7 +95,7 @@ export default {
           size="xs"
           data-pls={plsKey}
           onClick={() => (pls.value = plsKey)}
-          type={plsKey === pls.value ? 'primary' : 'netural'}
+          type={plsKey === pls.value ? 'primary' : 'neutral'}
         >
           {plsKey}
         </dv-button>

diff --git a/docs/src/pages/components/progress.md b/docs/src/pages/components/progress.md
@@ -157,7 +157,7 @@ Custom size and custom thickness
 
 | name  | description            | type                                                               | default |
 | ----- | ---------------------- | ------------------------------------------------------------------ | ------- |
-| type  | progress color type    | netural, primary, secondary, accent, info, success, warning, error | netural |
+| type  | progress color type    | neutral, primary, secondary, accent, info, success, warning, error | neutral |
 | value | current progress value | number                                                             | 0       |
 | max   | max progress value     | number                                                             | 100     |
 
@@ -167,7 +167,7 @@ Custom size and custom thickness
 
 | name      | description                   | type                                                               | default   |
 | --------- | ----------------------------- | ------------------------------------------------------------------ | --------- |
-| type      | progress color type           | netural, primary, secondary, accent, info, success, warning, error | netural   |
+| type      | progress color type           | neutral, primary, secondary, accent, info, success, warning, error | neutral   |
 | value     | current progress value, 0~100 | number                                                             | 0         |
 | size      | circle size                   | number, string                                                     | 5rem      |
 | thickness | thickness size                | number, string                                                     | size / 10 |
diff --git a/docs/src/pages/components/radio.md b/docs/src/pages/components/radio.md
@@ -44,7 +44,7 @@ Color type
 ```tsx :::run
 export default {
   setup: () => {
-    const types = ['netural', 'primary', 'secondary', 'accent'];
+    const types = ['neutral', 'primary', 'secondary', 'accent'];
     return () => (
       <div class="flex flex-col items-center space-y-4">
         {types.map((type) => (
@@ -124,7 +124,7 @@ export default {
 | name     | description      | type                                | default |
 | -------- | ---------------- | ----------------------------------- | ------- |
 | size     | size             | ISize                               | md      |
-| type     | color type       | netural, primary, secondary, accent | netural |
+| type     | color type       | neutral, primary, secondary, accent | neutral |
 | disabled | disable status   | bool                                | -       |
 | checked  | checked status   | bool                                | -       |
 | value    | input value      | IText                               | -       |
@@ -138,7 +138,7 @@ export default {
 | name         | description    | type                                | default |
 | ------------ | -------------- | ----------------------------------- | ------- |
 | size         | size           | ISize                               | md      |
-| type         | color type     | netural, primary, secondary, accent | netural |
+| type         | color type     | neutral, primary, secondary, accent | neutral |
 | disabled     | disable status | bool                                | -       |
 | options      | options        | IOption[]                           | -       |
 | value        | selected value | IText                               | -       |

diff --git a/docs/src/pages/components/toggle.md b/docs/src/pages/components/toggle.md
@@ -46,5 +46,5 @@ Toggle size
 | -------- | ---------------------------------- | ----------------------------------- | ------- |
 | checked  | toggle checked status              | boolean                             | -       |
 | onChange | toggle checked status change event | Function                            | -       |
-| type     | toogle color type                  | netural, primary, secondary, accent | netural |
+| type     | toogle color type                  | neutral, primary, secondary, accent | neutral |
 | size     | toogle size                        | xs, sm, md, lg                      | -       |
diff --git a/docs/src/pages/components/tooltip.md b/docs/src/pages/components/tooltip.md
@@ -58,8 +58,8 @@ with colors
 <div
   class="text-center grid grid-cols-1 lg:grid-cols-5 my-10 place-items-center gap-y-12"
 >
-  <dv-tooltip content="hello" open placement="top" type="netural">
-    <dv-button variant="netural">netural</dv-button>
+  <dv-tooltip content="hello" open placement="top" type="neutral">
+    <dv-button variant="neutral">neutral</dv-button>
   </dv-tooltip>
   <dv-tooltip content="hello" open placement="top" type="primary">
     <dv-button variant="primary">primary</dv-button>
@@ -91,6 +91,6 @@ with colors
 
 | name | description | type                                                               | default |
 | ---- | ----------- | ------------------------------------------------------------------ | ------- |
-| type | color type  | netural, primary, secondary, accent, info, success, warning, error | netural |
+| type | color type  | neutral, primary, secondary, accent, info, success, warning, error | neutral |
 
 Others attributes are same as `Popper`.
diff --git a/src/components/_widgets/element.tsx b/src/components/_widgets/element.tsx
@@ -34,7 +34,7 @@ export const Element = componentV2<IElementProps, HTMLAttributes>(
         let color = '';
 
         if (props.variant) {
-          bg = COLORS[props.variant];
+          bg = COLORS[props.variant] || 'none';
           bgContent = props.variant.startsWith('base-')
             ? COLORS['base-content']
             : COLORS[`${props.variant}-content`];

diff --git a/src/components/badge/index.tsx b/src/components/badge/index.tsx
@@ -11,7 +11,7 @@ export const badgeProps = {
   outline: { type: Boolean, default: void 0 },
   type: {
     type: String as PropType<IColorType | 'ghost'>,
-    default: 'netural',
+    default: 'neutral',
   },
   size: {
     type: String as PropType<ISize>,

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -31,11 +31,11 @@ export const buttonProps = {
   noAnimation: Boolean,
   variant: {
     type: String as PropType<IButtonType>,
-    default: 'netural',
+    default: 'neutral',
   },
   shape: {
     type: String as PropType<IButtonShape>,
-    default: 'netural',
+    default: 'neutral',
   },
   size: {
     type: String as PropType<ISize>,

diff --git a/src/components/toggle/index.tsx b/src/components/toggle/index.tsx
@@ -20,7 +20,7 @@ export const toggleProps = {
   },
   type: {
     type: String as PropType<IBrandColor>,
-    default: 'netural',
+    default: 'neutral',
   },
   size: {
     type: String as PropType<ISize>,

diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
@@ -8,7 +8,7 @@ export const toolTipprops = {
   ...popperProps,
   type: {
     type: String as PropType<IColorType>,
-    default: 'netural',
+    default: 'neutral',
   },
 };
 

diff --git a/src/shared/constants/base-props.ts b/src/shared/constants/base-props.ts
@@ -11,13 +11,13 @@ export const sizeProps = {
 export const colorTypeProps = {
   type: {
     type: String as PropType<IColorType>,
-    default: 'netural',
+    default: 'neutral',
   },
 };
 
 export const brandTypeProps = {
   type: {
     type: String as PropType<IBrandColor>,
-    default: 'netural',
+    default: 'neutral',
   },
 };
diff --git a/src/shared/types/common.ts b/src/shared/types/common.ts
@@ -4,7 +4,7 @@ export type ISize = 'xs' | 'sm' | 'md' | 'lg';
 
 export type IStateColor = 'info' | 'success' | 'warning' | 'error';
 
-export type IBrandColor = 'netural' | 'primary' | 'secondary' | 'accent';
+export type IBrandColor = 'neutral' | 'primary' | 'secondary' | 'accent';
 
 export type IColorType = IBrandColor | IStateColor;