Feat: Add disabled option on select and buttons
This commit is contained in:
parent
ceed039a80
commit
4ad8f97e6b
@ -8,11 +8,15 @@ const { type, primary } = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<button :type="type" :class="primary ? 'primary' : ''">
|
<button :disabled="disabled" :type="type" :class="primary ? 'primary' : ''">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
@ -31,6 +35,10 @@ button {
|
|||||||
transform 0.25s;
|
transform 0.25s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
cursor: initial;
|
||||||
|
}
|
||||||
|
|
||||||
button.primary {
|
button.primary {
|
||||||
background-color: var(--color-primary);
|
background-color: var(--color-primary);
|
||||||
color: var(--color-background);
|
color: var(--color-background);
|
||||||
@ -46,10 +54,6 @@ button.primary {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
button.primary:active {
|
button.primary:active {
|
||||||
background-color: var(--color-primary-soft);
|
background-color: var(--color-primary-soft);
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
import { computed, onMounted, ref } from 'vue';
|
import { computed, onMounted, ref } from 'vue';
|
||||||
import FilledButton from './FilledButton.vue';
|
import FilledButton from './FilledButton.vue';
|
||||||
|
|
||||||
const { placeholder, options, optionName } = defineProps({
|
const { placeholder, options, optionName, disabled } = defineProps({
|
||||||
placeholder: {
|
placeholder: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '----',
|
default: '----',
|
||||||
@ -16,7 +16,16 @@ const { placeholder, options, optionName } = defineProps({
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'value',
|
default: 'value',
|
||||||
},
|
},
|
||||||
|
modelValue: {
|
||||||
|
sidoCode: Number,
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
const updateModel = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
const body = document.querySelector('body');
|
const body = document.querySelector('body');
|
||||||
const buttonRef = ref(null);
|
const buttonRef = ref(null);
|
||||||
const isOpen = ref(false);
|
const isOpen = ref(false);
|
||||||
@ -32,7 +41,6 @@ onMounted(() => {
|
|||||||
const selectedName = computed(() => selected.value?.[optionName] ?? selected.value);
|
const selectedName = computed(() => selected.value?.[optionName] ?? selected.value);
|
||||||
|
|
||||||
function handleOpen() {
|
function handleOpen() {
|
||||||
console.log('open');
|
|
||||||
isOpen.value = true;
|
isOpen.value = true;
|
||||||
body.style.pointerEvents = 'none';
|
body.style.pointerEvents = 'none';
|
||||||
body.style.overflow = 'hidden';
|
body.style.overflow = 'hidden';
|
||||||
@ -53,12 +61,14 @@ function handleClose({ target }) {
|
|||||||
|
|
||||||
function handleSelect(option) {
|
function handleSelect(option) {
|
||||||
selected.value = option;
|
selected.value = option;
|
||||||
|
updateModel('update:modelValue', option);
|
||||||
closeMenu();
|
closeMenu();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<FilledButton
|
<FilledButton
|
||||||
|
:disabled="disabled"
|
||||||
:class="'select' + (isOpen ? ' active' : '')"
|
:class="'select' + (isOpen ? ' active' : '')"
|
||||||
ref="buttonRef"
|
ref="buttonRef"
|
||||||
@mousedown="handleOpen"
|
@mousedown="handleOpen"
|
||||||
@ -86,7 +96,7 @@ function handleSelect(option) {
|
|||||||
v-for="option in options"
|
v-for="option in options"
|
||||||
:key="option.value"
|
:key="option.value"
|
||||||
@click.stop="handleSelect(option)"
|
@click.stop="handleSelect(option)"
|
||||||
:class="'menu-item' + (selected === option ? 'selected' : '')"
|
:class="'menu-item' + (selected === option ? ' selected' : '')"
|
||||||
>
|
>
|
||||||
{{ option[optionName] ?? option }}
|
{{ option[optionName] ?? option }}
|
||||||
</li>
|
</li>
|
||||||
|
@ -8,11 +8,15 @@ const { type, primary } = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<button :type="type" :class="primary ? 'primary' : ''">
|
<button :disabled="disabled" :type="type" :class="primary ? 'primary' : ''">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
Reference in New Issue
Block a user