Skip to content

Commit

Permalink
feat: button
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaskang
jaskang committed Mar 24, 2023
1 parent d9cb97b commit f409fe6
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 92 deletions.
52 changes: 26 additions & 26 deletions docs/components/button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@
<EButton color="error">error</EButton>
<EButton disabled>默认</EButton>
<br /><br />
<EButton secondary>你测sd试好</EButton>
<EButton secondary color="primary">primary</EButton>
<EButton secondary color="success">success</EButton>
<EButton secondary color="warning">warning</EButton>
<EButton secondary color="error">error</EButton>
<EButton secondary disabled>默认</EButton>
<EButton plain>你测sd试好</EButton>
<EButton plain color="primary">primary</EButton>
<EButton plain color="success">success</EButton>
<EButton plain color="warning">warning</EButton>
<EButton plain color="error">error</EButton>
<EButton plain disabled>默认</EButton>
</template>
```

Expand All @@ -49,39 +49,39 @@
</template>
```

## 圆角
## 椭圆

```vue preview
<template>
<EButton type="round">默认</EButton>
<EButton color="primary" type="round">primary</EButton>
<EButton color="success" type="round">success</EButton>
<EButton color="warning" type="round">warning</EButton>
<EButton color="error" type="round">error</EButton>
<EButton shape="round">默认</EButton>
<EButton color="primary" shape="round">primary</EButton>
<EButton color="success" shape="round">success</EButton>
<EButton color="warning" shape="round">warning</EButton>
<EButton color="error" shape="round">error</EButton>
</template>
```

## 圆形

```vue preview
<template>
<EButton type="circle">D</EButton>
<EButton color="primary" type="circle">P</EButton>
<EButton color="success" type="circle">S</EButton>
<EButton color="warning" type="circle">W</EButton>
<EButton color="error" type="circle">E</EButton>
<EButton shape="circle">D</EButton>
<EButton color="primary" shape="circle">P</EButton>
<EButton color="success" shape="circle">S</EButton>
<EButton color="warning" shape="circle">W</EButton>
<EButton color="error" shape="circle">E</EButton>
</template>
```

## 链接
## 方形

```vue preview
<template>
<EButton type="link">default</EButton>
<EButton color="primary" type="link">primary</EButton>
<EButton color="success" type="link">success</EButton>
<EButton color="warning" type="link">warning</EButton>
<EButton color="error" type="link">error</EButton>
<EButton shape="square">D</EButton>
<EButton color="primary" shape="square">P</EButton>
<EButton color="success" shape="square">S</EButton>
<EButton color="warning" shape="square">W</EButton>
<EButton color="error" shape="square">E</EButton>
</template>
```

Expand All @@ -90,9 +90,9 @@
```vue preview
<template>
<EButton disabled>禁用状态</EButton>
<EButton type="round" disabled>圆角按钮-禁用状态</EButton>
<EButton type="circle" disabled>D</EButton>
<EButton type="link" disabled>链接按钮-禁用状态</EButton>
<EButton shape="round" disabled>圆角按钮-禁用状态</EButton>
<EButton shape="circle" disabled>D</EButton>
<EButton shape="square" disabled>链接按钮-禁用状态</EButton>
<EButton color="primary" disabled>primary</EButton>
</template>
```
Expand Down
133 changes: 79 additions & 54 deletions src/EButton/EButton.scss
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,32 @@
:root {
--e-button-bg-color: theme('colors.white');
--e-button-text-color: theme('colors.normal.700');
--e-button-border-color: theme('colors.normal.300');

--e-button-bg-color\:hover: theme('colors.normal.50');
--e-button-text-color\:hover: var(--e-button-text-color);
--e-button-border-color\:hover: var(--e-button-border-color);

--e-button-bg-color\:active: theme('colors.normal.100');

--e-button-outline-color: var(--e-button-border-color);
}
.e-button {
@apply inline-flex items-center rounded-md border border-solid border-transparent font-medium shadow-sm transition-colors
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
@apply inline-flex items-center rounded-md border border-solid border-transparent font-medium shadow-sm
transition-all focus:outline-none focus:ring-2 focus:ring-offset-2;

&--neutral {
@apply border-neutral-300 bg-white text-neutral-700 hover:bg-neutral-50 focus-visible:outline-indigo-600;
}
&--primary {
@apply bg-primary-600 text-white hover:bg-primary-500 focus:ring-primary-600 focus-visible:outline-primary-600;
}
&--success {
@apply bg-success-600 text-white hover:bg-success-500 focus:ring-success-600 focus-visible:outline-success-600;
background-color: var(--e-button-bg-color);
color: var(--e-button-text-color);
border-color: var(--e-button-border-color);
--tw-ring-color: var(--e-button-outline-color);
&:hover {
background-color: var(--e-button-bg-color\:hover);
color: var(--e-button-text-color\:hover);
border-color: var(--e-button-border-color\:hover);
}
&:active {
background-color: var(--e-button-bg-color\:active);
}
&--warning {
@apply bg-warning-600 text-white hover:bg-warning-500 focus:ring-warning-600 focus-visible:outline-warning-600;
}
&--error {
@apply bg-error-600 text-white hover:bg-error-500 focus:ring-error-600 focus-visible:outline-error-600;
}

&--xs {
@apply px-2.5 py-1.5 text-xs; // 30px / w-7 + 2px
}
Expand All @@ -34,51 +43,67 @@
@apply px-6 py-3 text-base; // 50px / w-12 + 2px
}

&.is-disabled {
@apply cursor-not-allowed opacity-50;
}
}

.e-button--round {
@apply rounded-full;
}

.e-button--circle {
@apply justify-center overflow-hidden rounded-full px-0;

&.e-button--xs {
width: calc(theme('width.7') + 2px); // 30px / w-7 + 2px
&--primary,
&--success,
&--warning,
&--error {
--e-button-border-color: transparent;
--e-button-text-color: theme('colors.white');
--e-button-outline-color: var(--e-button-bg-color\:hover);
&:hover {
--e-button-border-color\:hover: transparent;
--e-button-text-color\:hover: theme('colors.white');
}
}
&.e-button--sm {
width: calc(theme('width.8') + 2px); // 34px / w-8 + 2px
&--primary {
--e-button-bg-color: theme('colors.primary.600');
--e-button-bg-color\:hover: theme('colors.primary.500');
--e-button-bg-color\:active: theme('colors.primary.700');
}
&.e-button--md {
width: calc(theme('width.9') + 2px); // 38px / w-9 + 2px
&--success {
--e-button-bg-color: theme('colors.success.600');
--e-button-bg-color\:hover: theme('colors.success.500');
--e-button-bg-color\:active: theme('colors.success.700');
}
&.e-button--lg {
width: calc(theme('width.10') + 2px); // 42px / w-10 + 2px
&--warning {
--e-button-bg-color: theme('colors.warning.600');
--e-button-bg-color\:hover: theme('colors.warning.500');
--e-button-bg-color\:active: theme('colors.warning.700');
}
&.e-button--xl {
width: calc(theme('width.12') + 2px); // 50px / w-12 + 2px
&--error {
--e-button-bg-color: theme('colors.error.600');
--e-button-bg-color\:hover: theme('colors.error.500');
--e-button-bg-color\:active: theme('colors.error.700');
}
}

.e-button--link {
@apply border-transparent bg-transparent underline-offset-2 shadow-none hover:bg-transparent hover:underline;

&.e-button--neutral {
@apply text-neutral-700 hover:text-neutral-700;
}
&.e-button--primary {
@apply text-primary-600 hover:text-primary-700;
&--round {
@apply rounded-full;
}
&.e-button--success {
@apply text-success-600 hover:text-success-700;
&--circle {
@apply rounded-full;
}
&.e-button--warning {
@apply text-warning-600 hover:text-warning-700;
&--circle,
&--square {
@apply justify-center overflow-hidden whitespace-nowrap px-0;

&.e-button--xs {
width: calc(theme('width.7') + 2px); // 30px / w-7 + 2px
}
&.e-button--sm {
width: calc(theme('width.8') + 2px); // 34px / w-8 + 2px
}
&.e-button--md {
width: calc(theme('width.9') + 2px); // 38px / w-9 + 2px
}
&.e-button--lg {
width: calc(theme('width.10') + 2px); // 42px / w-10 + 2px
}
&.e-button--xl {
width: calc(theme('width.12') + 2px); // 50px / w-12 + 2px
}
}
&.e-button--error {
@apply text-error-600 hover:text-error-700;

&.disabled {
@apply cursor-not-allowed opacity-50;
}
}
9 changes: 4 additions & 5 deletions src/EButton/EButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@ import { computedCls } from '../utils'
import type { PropType } from 'vue'
const props = defineProps({
type: {
type: String as PropType<'round' | 'circle' | 'link'>,
shape: {
type: String as PropType<'square' | 'round' | 'circle'>,
},
color: {
type: String as PropType<'neutral' | 'primary' | 'success' | 'warning' | 'error'>,
default: 'neutral',
type: String as PropType<'primary' | 'success' | 'warning' | 'error'>,
},
size: {
type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
Expand All @@ -17,7 +16,7 @@ const props = defineProps({
disabled: Boolean,
})
const cls = computedCls('e-button', props, ['type', 'size', 'color', 'disabled'])
const cls = computedCls('e-button', props, ['--shape', '--size', '--color', 'disabled'])
</script>
<template>
<button :class="cls" type="button" :disabled="disabled">
Expand Down
14 changes: 8 additions & 6 deletions src/utils/classNames.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,21 @@ export function classNames(...args: ClassValue[]) {
return str
}

type BEMKey<T> = T extends string ? `-${T}` | `--${T}` | T : never

export const computedCls = <T extends Record<string, any>>(
b: string,
props: T,
keys: Array<keyof T>
tags: Array<BEMKey<keyof T>>
) => {
const cls = computed(() => {
const cls = [b]
for (const key of keys) {
for (const tag of tags) {
const preTag = tag.startsWith('--') ? '--' : tag.startsWith('-') ? '-' : ''
const key = tag.substring(preTag.length)
const val = toRef(props, key)
if (typeof val.value === 'boolean' && val.value) {
cls.push(`is-${key as string}`)
} else if (val.value) {
cls.push(b + '--' + val.value)
if (val.value) {
cls.push(`${preTag ? b + preTag : ''}${val.value}`)
}
}
return cls.join(' ')
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ module.exports = {
theme: {
extend: {
colors: {
neutral: colors.slate,
normal: colors.slate,
primary: colors.indigo,
success: colors.green,
warning: colors.amber,
Expand Down

1 comment on commit f409fe6

@vercel
Copy link

@vercel vercel bot commented on f409fe6 Mar 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

elenext – ./

elenext-jaskang.vercel.app
elenext.vercel.app
elenext-git-main-jaskang.vercel.app
elenext.jaskang.vip

Please sign in to comment.