133 lines
3.2 KiB
Vue
133 lines
3.2 KiB
Vue
 
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import BaseButton from '@/components/ui/BaseButton.vue'
|
||
|
|
import ProfileSubpageLayout from '@/views/profile/components/ProfileSubpageLayout.vue'
|
||
|
|
|
||
|
|
const language = ref('fa')
|
||
|
|
const currency = ref('irr')
|
||
|
|
const density = ref('comfortable')
|
||
|
|
const saved = ref(false)
|
||
|
|
|
||
|
|
function save() {
|
||
|
|
saved.value = true
|
||
|
|
setTimeout(() => {
|
||
|
|
saved.value = false
|
||
|
|
}, 2000)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ProfileSubpageLayout title="تنظیمات نمایش" subtitle="زبان، واحد پول و حالت نمایش">
|
||
|
|
<div class="display-form">
|
||
|
|
<label class="display-field">
|
||
|
|
<span class="display-field__label">زبان</span>
|
||
|
|
<select v-model="language" class="display-field__control">
|
||
|
|
<option value="fa">فارسی</option>
|
||
|
|
<option value="en">English</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label class="display-field">
|
||
|
|
<span class="display-field__label">واحد پول</span>
|
||
|
|
<select v-model="currency" class="display-field__control">
|
||
|
|
<option value="irr">تومان</option>
|
||
|
|
<option value="rial">ریال</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<fieldset class="display-field">
|
||
|
|
<legend class="display-field__label">حالت نمایش</legend>
|
||
|
|
<div class="display-options">
|
||
|
|
<label class="display-option">
|
||
|
|
<input v-model="density" type="radio" value="comfortable" />
|
||
|
|
<span>راحت</span>
|
||
|
|
</label>
|
||
|
|
<label class="display-option">
|
||
|
|
<input v-model="density" type="radio" value="compact" />
|
||
|
|
<span>فشرده</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<BaseButton block @click="save">ذخیره تنظیمات</BaseButton>
|
||
|
|
<p v-if="saved" class="display-saved">تنظیمات نمایش ذخیره شد ✓</p>
|
||
|
|
</div>
|
||
|
|
</ProfileSubpageLayout>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.display-form {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-field {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 8px;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-field__label {
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--color-text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-field__control {
|
||
|
|
width: 100%;
|
||
|
|
min-height: var(--btn-height);
|
||
|
|
padding: 0 14px;
|
||
|
|
border: 1px solid var(--color-border);
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
background: var(--color-surface);
|
||
|
|
color: var(--color-text);
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: 0.9375rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-field__control:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: var(--color-primary);
|
||
|
|
box-shadow: 0 0 0 3px var(--color-primary-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-options {
|
||
|
|
display: flex;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-option {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
min-height: 40px;
|
||
|
|
padding: 0 14px;
|
||
|
|
border: 1px solid var(--color-border);
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
font-size: 0.875rem;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-option:has(input:checked) {
|
||
|
|
border-color: var(--color-primary);
|
||
|
|
background: var(--color-primary-soft);
|
||
|
|
color: var(--color-primary);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-option input {
|
||
|
|
accent-color: var(--color-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-saved {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
text-align: center;
|
||
|
|
color: var(--color-success);
|
||
|
|
}
|
||
|
|
</style>
|