mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-04 07:29:48 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): button component no style option

Browse Source
This commit is contained in:
Zack Spear
2024-05-02 16:11:50 -07:00
committed by Zack Spear
parent fd8b40d9aa
commit 37b717b142
2 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/components/Brand/Button.vue
View File

@@ -6,12 +6,14 @@ import type { ButtonProps } from '~/types/ui/button';
const props = withDefaults(defineProps<ButtonProps>(), {
btnStyle: 'fill',
btnType: 'button',
class: undefined,
click: undefined,
href: undefined,
icon: undefined,
iconRight: undefined,
iconRightHoverDisplay: false,
// iconRightHoverAnimate: true,
noPadding: false,
size: '16px',
text: '',
title: '',
@@ -58,33 +60,35 @@ const classes = computed(() => {
switch (props.size) {
case '12px':
buttonSize = 'text-12px p-8px gap-4px';
buttonSize = `text-12px ${props.noPadding ? 'p-0' : 'p-8px'} gap-4px`;
iconSize = 'w-12px';
break;
case '14px':
buttonSize = 'text-14px p-8px gap-8px';
buttonSize = `text-14px ${props.noPadding ? 'p-0' : 'p-8px'} gap-8px`;
iconSize = 'w-14px';
break;
case '16px':
buttonSize = 'text-16px p-12px gap-8px';
buttonSize = `text-16px ${props.noPadding ? 'p-0' : 'p-12px'} gap-8px`;
iconSize = 'w-16px';
break;
case '18px':
buttonSize = 'text-18px p-12px gap-8px';
buttonSize = `text-18px ${props.noPadding ? 'p-0' : 'p-12px'} gap-8px`;
iconSize = 'w-18px';
break;
case '20px':
buttonSize = 'text-20px p-16px gap-8px';
buttonSize = `text-20px ${props.noPadding ? 'p-0' : 'p-16px'} gap-8px`;
iconSize = 'w-20px';
break;
case '24px':
buttonSize = 'text-24px p-16px gap-8px';
buttonSize = `text-24px ${props.noPadding ? 'p-0' : 'p-16px'} gap-8px`;
iconSize = 'w-24px';
break;
}
return {
button: `${buttonSize} ${buttonColors} ${buttonDefaults}`,
button: props.btnStyle === 'none'
? `${buttonSize} ${props.class}`
: `${buttonSize} ${buttonColors} ${buttonDefaults} ${props.class}`,
icon: `${iconSize} fill-current flex-shrink-0`,
};
});

4
web/types/ui/button.ts
View File

@@ -1,6 +1,7 @@
export interface ButtonProps {
btnStyle?: 'black' | 'fill' | 'gray' | 'outline' | 'outline-black' | 'outline-white' | 'underline' | 'underline-hover-red' | 'white';
btnStyle?: 'black' | 'fill' | 'gray' | 'outline' | 'outline-black' | 'outline-white' | 'underline' | 'underline-hover-red' | 'white' | 'none';
btnType?: 'button' | 'submit' | 'reset';
class?: string;
click?: () => void;
disabled?: boolean;
download?: boolean;
@@ -10,6 +11,7 @@ export interface ButtonProps {
iconRight?: Component;
iconRightHoverDisplay?: boolean;
// iconRightHoverAnimate?: boolean;
noPadding?: boolean;
size?: '12px' | '14px' | '16px' | '18px' | '20px' | '24px';
text?: string;
title?: string;