47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<script setup>
|
|
// قناع الأيام: bit0=أحد … bit6=سبت (62 = الأحد–الخميس)
|
|
const props = defineProps({ modelValue: { type: Number, default: 62 } })
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const days = [
|
|
{ bit: 0, label: 'أحد' },
|
|
{ bit: 1, label: 'اثنين' },
|
|
{ bit: 2, label: 'ثلاثاء' },
|
|
{ bit: 3, label: 'أربعاء' },
|
|
{ bit: 4, label: 'خميس' },
|
|
{ bit: 5, label: 'جمعة' },
|
|
{ bit: 6, label: 'سبت' },
|
|
]
|
|
|
|
function isOn(bit) {
|
|
return ((props.modelValue >> bit) & 1) === 1
|
|
}
|
|
function toggle(bit) {
|
|
const next = isOn(bit) ? props.modelValue & ~(1 << bit) : props.modelValue | (1 << bit)
|
|
emit('update:modelValue', next)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="day-mask">
|
|
<button
|
|
v-for="d in days" :key="d.bit" type="button"
|
|
class="day-chip" :class="{ on: isOn(d.bit) }"
|
|
@click="toggle(d.bit)"
|
|
>
|
|
{{ d.label }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.day-mask { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.day-chip {
|
|
font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px;
|
|
border-radius: 100px; border: 1px solid var(--line-strong); background: var(--surface);
|
|
color: var(--ink-soft); cursor: pointer; transition: all .15s ease;
|
|
}
|
|
.day-chip.on { background: var(--brand); border-color: var(--brand); color: white; }
|
|
.day-chip:hover:not(.on) { background: var(--surface-2); }
|
|
</style>
|