From ae18e1e11515fd41363fd5c2cb5528c8d0092505 Mon Sep 17 00:00:00 2001 From: daief <1437931235@qq.com> Date: Wed, 30 Nov 2022 21:42:58 +0800 Subject: [PATCH] fix: netural => neutral; add doc for Element --- README.md | 2 + docs/src/pages/components/badge.md | 6 +-- docs/src/pages/components/button.md | 12 +++--- docs/src/pages/components/checkbox.md | 6 +-- docs/src/pages/components/dropdown.md | 2 +- docs/src/pages/components/element.md | 55 +++++++++++++++++++++++++++ docs/src/pages/components/input.md | 2 +- docs/src/pages/components/link.md | 4 +- docs/src/pages/components/popper.md | 2 +- docs/src/pages/components/progress.md | 4 +- docs/src/pages/components/radio.md | 6 +-- docs/src/pages/components/toggle.md | 2 +- docs/src/pages/components/tooltip.md | 6 +-- src/components/_widgets/element.tsx | 2 +- src/components/badge/index.tsx | 2 +- src/components/button/button.tsx | 4 +- src/components/toggle/index.tsx | 2 +- src/components/tooltip/tooltip.tsx | 2 +- src/shared/constants/base-props.ts | 4 +- src/shared/types/common.ts | 2 +- 20 files changed, 92 insertions(+), 35 deletions(-) create mode 100644 docs/src/pages/components/element.md diff --git a/README.md b/README.md index dc96d78..c538de6 100644 --- 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 index 43ae0bd..62c663f 100644 --- a/docs/src/pages/components/badge.md +++ b/docs/src/pages/components/badge.md @@ -8,7 +8,7 @@ badge
- netural + neutral primary secondary accent @@ -77,7 +77,7 @@ badge outline
- netural + neutral primary secondary accent @@ -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 index fd6f9f3..92acfa9 100644 --- a/docs/src/pages/components/button.md +++ b/docs/src/pages/components/button.md @@ -8,7 +8,7 @@ button with brand colors
- netural + neutral secondary secondary accent @@ -23,7 +23,7 @@ active state button
- netural + neutral secondary secondary accent @@ -38,7 +38,7 @@ outline button
- netural + neutral secondary secondary accent @@ -51,7 +51,7 @@ disabled button
- netural + neutral secondary secondary accent @@ -150,7 +150,7 @@ button loading
- netural + neutral secondary accent ghost @@ -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 index 85f3dd1..2b0928e 100644 --- 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 () => (
{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 index a3bcc99..30a454e 100644 --- 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} diff --git a/docs/src/pages/components/element.md b/docs/src/pages/components/element.md new file mode 100644 index 0000000..f9a607e --- /dev/null +++ b/docs/src/pages/components/element.md @@ -0,0 +1,55 @@ +# Element + +## Examples + +background type + +```html :::demo +
+ div + neutral + parimary + secondary + accent + info + success + warning + error + base-100 + base-200 + base-300 +
+``` + +text color + +```html :::demo +
+ primary + info + base-content + + color name + #6cf + rgb(218 137 33) +
+``` + +html tag + +```html :::demo +
+ span + button +
+``` + +## 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 index 8ba250a..d4d2351 100644 --- 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 index 1f2c038..ab6b855 100644 --- a/docs/src/pages/components/link.md +++ b/docs/src/pages/components/link.md @@ -27,7 +27,7 @@ Link type color ```html :::demo
- netural color + neutral color primary color secondary color accent color @@ -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 index d0b6c26..1d1df81 100644 --- 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} diff --git a/docs/src/pages/components/progress.md b/docs/src/pages/components/progress.md index b1a8d28..c18483a 100644 --- 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 index 176c9f2..603626e 100644 --- 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 () => (
{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 index 2500105..45cec92 100644 --- 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 index 5b61c2f..94daaca 100644 --- a/docs/src/pages/components/tooltip.md +++ b/docs/src/pages/components/tooltip.md @@ -58,8 +58,8 @@ with colors
- - netural + + neutral primary @@ -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 index d488fa4..3416bd1 100644 --- a/src/components/_widgets/element.tsx +++ b/src/components/_widgets/element.tsx @@ -34,7 +34,7 @@ export const Element = componentV2( 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 index 4523bb4..e7b3450 100644 --- 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, - default: 'netural', + default: 'neutral', }, size: { type: String as PropType, diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index c968145..5bd27d8 100644 --- 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, - default: 'netural', + default: 'neutral', }, shape: { type: String as PropType, - default: 'netural', + default: 'neutral', }, size: { type: String as PropType, diff --git a/src/components/toggle/index.tsx b/src/components/toggle/index.tsx index 246ff66..359ed45 100644 --- a/src/components/toggle/index.tsx +++ b/src/components/toggle/index.tsx @@ -20,7 +20,7 @@ export const toggleProps = { }, type: { type: String as PropType, - default: 'netural', + default: 'neutral', }, size: { type: String as PropType, diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx index dc9f565..43b0c61 100644 --- 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, - default: 'netural', + default: 'neutral', }, }; diff --git a/src/shared/constants/base-props.ts b/src/shared/constants/base-props.ts index 675782e..ba6d714 100644 --- 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, - default: 'netural', + default: 'neutral', }, }; export const brandTypeProps = { type: { type: String as PropType, - default: 'netural', + default: 'neutral', }, }; diff --git a/src/shared/types/common.ts b/src/shared/types/common.ts index 0f47441..807f419 100644 --- 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;