bagus-arie05
83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
Vue
<template>
|
|
<div class="day-selector">
|
|
<v-chip
|
|
v-for="hari in dayList"
|
|
:key="hari.hari"
|
|
class="day-chip"
|
|
:class="{ 'day-chip-active': selectedDays.includes(hari.hari) }"
|
|
label
|
|
@click="toggleDay(hari.hari)"
|
|
>
|
|
<v-icon v-if="selectedDays.includes(hari.hari)" left size="16">mdi-check</v-icon>
|
|
{{ hari.hari }}
|
|
</v-chip>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const dayList = ref([
|
|
{ no: 1, hari: 'Senin' },
|
|
{ no: 2, hari: 'Selasa' },
|
|
{ no: 3, hari: 'Rabu' },
|
|
{ no: 4, hari: 'Kamis' },
|
|
{ no: 5, hari: 'Jum\'at' },
|
|
]);
|
|
|
|
const selectedDays = ref(props.modelValue);
|
|
|
|
const toggleDay = (hari) => {
|
|
const index = selectedDays.value.indexOf(hari);
|
|
if (index > -1) {
|
|
selectedDays.value.splice(index, 1);
|
|
} else {
|
|
selectedDays.value.push(hari);
|
|
}
|
|
emit('update:modelValue', selectedDays.value);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$neutral-100: #FFFFFF;
|
|
$neutral-500: #ABBED1;
|
|
$neutral-800: #4D4D4D;
|
|
$secondary-300: #DBEDFF;
|
|
$secondary-600: #0671E0;
|
|
$font-weight-medium: 500;
|
|
|
|
.day-selector {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.day-chip {
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
font-weight: $font-weight-medium;
|
|
border: 1px solid $neutral-500;
|
|
background-color: $neutral-100;
|
|
color: $neutral-800;
|
|
|
|
&:hover {
|
|
background-color: $secondary-300;
|
|
}
|
|
}
|
|
|
|
.day-chip-active {
|
|
background-color: $secondary-600 !important;
|
|
color: $neutral-100 !important;
|
|
border-color: $secondary-600 !important;
|
|
}
|
|
</style> |