chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: icon only button

Browse source
This commit is contained in:
Methapon2001 2024-08-08 11:09:45 +07:00
parent 314ffa8582
commit b309f91ca4
7 changed files with 49 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/button/AddButton.vue
View file

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void; (e: 'click', v: MouseEvent): void;
}>(); }>();
defineProps<{ defineProps<{
iconOnly?: boolean;
solid?: boolean; solid?: boolean;
outlined?: boolean; outlined?: boolean;
disabled?: boolean; disabled?: boolean;
@ -20,6 +21,7 @@ defineProps<{
'main-btn__solid': solid && !outlined, 'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined, 'main-btn__outline': !solid && outlined,
'main-btn__dark': dark, 'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}" }"
:disabled="disabled" :disabled="disabled"
> >
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon { & > .main-btn-icon {
color: hsla(var(--button-main-color) / 1); color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem; font-size: 1.2rem;
} }
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
} }
.main-btn__solid { .main-btn__solid {

9
src/components/button/BackButton.vue
View file

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void; (e: 'click', v: MouseEvent): void;
}>(); }>();
defineProps<{ defineProps<{
iconOnly?: boolean;
solid?: boolean; solid?: boolean;
outlined?: boolean; outlined?: boolean;
disabled?: boolean; disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined, 'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined, 'main-btn__outline': !solid && outlined,
'main-btn__dark': dark, 'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}" }"
:disabled="disabled" :disabled="disabled"
> >
<slot name="icon"> <slot name="icon">
<Icon icon="mdi-arrow-left" class="main-btn-icon" /> <Icon icon="mdi-arrow-left" class="main-btn-icon" />
</slot> </slot>
<slot>{{ $t('back') }}</slot> <slot v-if="!iconOnly">{{ $t('back') }}</slot>
</button> </button>
</template> </template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon { & > .main-btn-icon {
color: hsla(var(--button-main-color) / 1); color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem; font-size: 1.2rem;
} }
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
} }
.main-btn__solid { .main-btn__solid {

9
src/components/button/CancelButton.vue
View file

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void; (e: 'click', v: MouseEvent): void;
}>(); }>();
defineProps<{ defineProps<{
iconOnly?: boolean;
solid?: boolean; solid?: boolean;
outlined?: boolean; outlined?: boolean;
disabled?: boolean; disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined, 'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined, 'main-btn__outline': !solid && outlined,
'main-btn__dark': dark, 'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}" }"
:disabled="disabled" :disabled="disabled"
> >
<slot name="icon"> <slot name="icon">
<Icon icon="mdi-close" class="main-btn-icon" /> <Icon icon="mdi-close" class="main-btn-icon" />
</slot> </slot>
<slot>{{ $t('cancel') }}</slot> <slot v-if="!iconOnly">{{ $t('cancel') }}</slot>
</button> </button>
</template> </template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon { & > .main-btn-icon {
color: hsla(var(--button-main-color) / 1); color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem; font-size: 1.2rem;
} }
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
} }
.main-btn__solid { .main-btn__solid {

11
src/components/button/DeleteButton.vue
View file

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void; (e: 'click', v: MouseEvent): void;
}>(); }>();
defineProps<{ defineProps<{
iconOnly?: boolean;
solid?: boolean; solid?: boolean;
outlined?: boolean; outlined?: boolean;
disabled?: boolean; disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined, 'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined, 'main-btn__outline': !solid && outlined,
'main-btn__dark': dark, 'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}" }"
:disabled="disabled" :disabled="disabled"
> >
<slot name="icon"> <slot name="icon">
<Icon icon="mdi-close" class="main-btn-icon" /> <Icon icon="mdi-trash-can" class="main-btn-icon" />
</slot> </slot>
<slot>{{ $t('delete') }}</slot> <slot v-if="!iconOnly">{{ $t('delete') }}</slot>
</button> </button>
</template> </template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon { & > .main-btn-icon {
color: hsla(var(--button-main-color) / 1); color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem; font-size: 1.2rem;
} }
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
} }
.main-btn__solid { .main-btn__solid {

9
src/components/button/EditButton.vue
View file

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void; (e: 'click', v: MouseEvent): void;
}>(); }>();
defineProps<{ defineProps<{
iconOnly?: boolean;
solid?: boolean; solid?: boolean;
outlined?: boolean; outlined?: boolean;
disabled?: boolean; disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined, 'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined, 'main-btn__outline': !solid && outlined,
'main-btn__dark': dark, 'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}" }"
:disabled="disabled" :disabled="disabled"
> >
<slot name="icon"> <slot name="icon">
<Icon icon="mdi-pencil" class="main-btn-icon" /> <Icon icon="mdi-pencil" class="main-btn-icon" />
</slot> </slot>
<slot>{{ $t('edit') }}</slot> <slot v-if="!iconOnly">{{ $t('edit') }}</slot>
</button> </button>
</template> </template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon { & > .main-btn-icon {
color: hsla(var(--button-main-color) / 1); color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem; font-size: 1.2rem;
} }
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
} }
.main-btn__solid { .main-btn__solid {

9
src/components/button/SaveButton.vue
View file

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void; (e: 'click', v: MouseEvent): void;
}>(); }>();
defineProps<{ defineProps<{
iconOnly?: boolean;
solid?: boolean; solid?: boolean;
outlined?: boolean; outlined?: boolean;
disabled?: boolean; disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined, 'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined, 'main-btn__outline': !solid && outlined,
'main-btn__dark': dark, 'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}" }"
:disabled="disabled" :disabled="disabled"
> >
<slot name="icon"> <slot name="icon">
<Icon icon="mdi-content-save" class="main-btn-icon" /> <Icon icon="mdi-content-save" class="main-btn-icon" />
</slot> </slot>
<slot>{{ $t('save') }}</slot> <slot v-if="!iconOnly">{{ $t('save') }}</slot>
</button> </button>
</template> </template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon { & > .main-btn-icon {
color: hsla(var(--button-main-color) / 1); color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem; font-size: 1.2rem;
} }
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
} }
.main-btn__solid { .main-btn__solid {

9
src/components/button/UndoButton.vue
View file

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void; (e: 'click', v: MouseEvent): void;
}>(); }>();
defineProps<{ defineProps<{
iconOnly?: boolean;
solid?: boolean; solid?: boolean;
outlined?: boolean; outlined?: boolean;
disabled?: boolean; disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined, 'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined, 'main-btn__outline': !solid && outlined,
'main-btn__dark': dark, 'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}" }"
:disabled="disabled" :disabled="disabled"
> >
<slot name="icon"> <slot name="icon">
<Icon icon="mdi-arrow-left" class="main-btn-icon" /> <Icon icon="mdi-arrow-left" class="main-btn-icon" />
</slot> </slot>
<slot>{{ $t('undo') }}</slot> <slot v-if="!iconOnly">{{ $t('undo') }}</slot>
</button> </button>
</template> </template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon { & > .main-btn-icon {
color: hsla(var(--button-main-color) / 1); color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem; font-size: 1.2rem;
} }
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
} }
.main-btn__solid { .main-btn__solid {