Ryan/drop-base
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop-base.git synced 2025-11-10 20:42:12 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: loading button disabled styles

Browse Source
This commit is contained in:
DecDuck
2025-01-28 15:55:11 +11:00
parent de0d1b4660
commit b7127c645d
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/LoadingButton.vue
View File

@ -1,5 +1,12 @@
<template> <template>
<button type="submit" :class="styles[style]"> <button
type="submit"
:class="[
styles[style].base,
props.disabled ? styles[style].disabled : styles[style].dft,
]"
:disabled="props.disabled"
>
<div v-if="props.loading" role="status"> <div v-if="props.loading" role="status">
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -28,13 +35,20 @@ type Style = "default" | "none";
const props = defineProps<{ const props = defineProps<{
loading: boolean; loading: boolean;
style?: Style; style?: Style;
disabled: boolean;
}>(); }>();
const style = props.style ?? "default"; const style = props.style ?? "default";
const styles: { [key in Style]: string } = { const styles: {
["default"]: [key in Style]: { base: string; dft: string; disabled: string };
"inline-flex min-h-9 items-center justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 text-white bg-blue-600 hover:bg-blue-500 disabled:text-zinc-400 disabled:bg-blue-600/10 disabled:hover:bg-blue-600/10", } = {
["none"]: "", ["default"]: {
base: "inline-flex min-h-9 items-center justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600",
dft: "text-white bg-blue-600 hover:bg-blue-500",
disabled:
"text-zinc-400 bg-blue-600/10 hover:bg-blue-600/10",
},
["none"]: { base: "", dft: "", disabled: "" },
}; };
</script> </script>