front-end/banu-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: bugs
Deploy banu-front / deploy (push) Successful in 1m28s
Details

Browse Source
This commit is contained in:
sajjadtalkhabi
2026-07-09 13:25:59 +03:30
parent 38a396ba21
commit da34813b1d
45 changed files with 2486 additions and 1048 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/blocks/TabsBlock.vue
+25 -21
View File
@@ -17,10 +17,31 @@
</button>
</div>
<template v-for="tab in tabs">
<div
v-if="tab.hasButton"
:key="`btn-${tab.name}`"
class="tabs-block__action tabs-block__action--desktop"
>
<BaseButton
v-if="tab.hasButton && activeTab === tab.name"
:text="tab.textButton"
custom-class="tabs-block__action-btn"
@click="onActionClick(tab)"
>
<template #appendIcon>
<SvgIcon name="arrow-left" :size="16" color="#fff" />
</template>
</BaseButton>
</div>
</template>
</div>
<template v-for="tab in tabs">
<div
v-for="tab in tabs"
:key="`btn-${tab.name}`"
class="tabs-block__action tabs-block__action--desktop"
v-if="tab.hasButton"
:key="`mbtn-${tab.name}`"
class="tabs-block__action tabs-block__action--mobile"
>
<BaseButton
v-if="tab.hasButton && activeTab === tab.name"
@@ -33,24 +54,7 @@
</template>
</BaseButton>
</div>
</div>
<div
v-for="tab in tabs"
:key="`mbtn-${tab.name}`"
class="tabs-block__action tabs-block__action--mobile"
>
<BaseButton
v-if="tab.hasButton && activeTab === tab.name"
:text="tab.textButton"
custom-class="tabs-block__action-btn"
@click="onActionClick(tab)"
>
<template #appendIcon>
<SvgIcon name="arrow-left" :size="16" color="#fff" />
</template>
</BaseButton>
</div>
</template>
<div class="tabs-block__content">
<slot :name="activeTab" />
src/components/form/BadgeSelectField.vue
+124
View File
@@ -0,0 +1,124 @@
<template>
<div class="badge-select">
<label v-if="label" class="badge-select__label">{{ label }}</label>
<div class="badge-select__chips" :class="`badge-select__chips--${size}`">
<button
v-for="option in options"
:key="option[optionValue]"
type="button"
class="badge-select__chip"
:class="[
`badge-select__chip--${variant}`,
{ 'badge-select__chip--selected': modelValue === option[optionValue] },
]"
:disabled="disabled"
@click="select(option)"
>
{{ option[optionLabel] }}
</button>
</div>
<div v-if="error" class="badge-select__error">{{ error }}</div>
</div>
</template>
<script setup>
const props = defineProps({
modelValue: { type: [String, Number], default: null },
label: { type: String, default: '' },
options: { type: Array, default: () => [] },
optionLabel: { type: String, default: 'label' },
optionValue: { type: String, default: 'value' },
variant: { type: String, default: 'neutral' },
size: { type: String, default: 'md' },
disabled: { type: Boolean, default: false },
error: { type: String, default: '' },
})
const emit = defineEmits(['update:modelValue', 'change'])
const select = (option) => {
if (props.disabled) return
const value = option[props.optionValue]
emit('update:modelValue', value)
emit('change', value)
}
</script>
<style lang="scss" scoped>
.badge-select {
width: 100%;
margin-bottom: 0.75rem;
&__label {
display: flex;
margin-bottom: 0.375rem;
font-family: var(--font-family-fa);
font-weight: 300;
line-height: 1.5rem;
font-size: 0.875rem;
color: var(--color-prim-gray);
}
&__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
&__chip {
border: 1px solid #e8e8e8;
border-radius: 9999px;
background: transparent;
font-family: var(--font-family-fa);
color: #b5b5b5;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
&:hover:enabled {
color: #7a7a7a;
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
&--selected {
background: #fff;
border-color: #f0f0f0;
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 6%);
color: #4b4b4b;
font-weight: 500;
}
&--primary#{&}--selected {
color: var(--color-primary);
border-color: var(--color-primary);
}
}
&__chips--sm .badge-select__chip {
padding: 0.25rem 0.875rem;
font-size: 0.7rem;
}
&__chips--md .badge-select__chip {
padding: 0.375rem 1.125rem;
font-size: 0.8rem;
}
&__chips--lg .badge-select__chip {
padding: 0.5rem 1.375rem;
font-size: 0.875rem;
}
&__error {
margin-top: 0.25rem;
font-family: var(--font-family-fa);
font-size: 0.75rem;
color: var(--color-error);
}
}
</style>
src/components/form/SelectField.vue
+42
View File
@@ -15,6 +15,15 @@
@click="toggle"
>
<span class="select-field__value">{{ selectedLabel }}</span>
<button
v-if="showClear"
type="button"
class="select-field__clear"
aria-label="پاک کردن"
@click.stop="clearSelection"
>
<SvgIcon name="close" :size="14" color="currentColor" />
</button>
<SvgIcon
name="caret-down"
:size="20"
@@ -90,6 +99,7 @@ const props = defineProps({
optionLabel: { type: String, default: 'name' },
optionValue: { type: String, default: 'id' },
multiple: { type: Boolean, default: false },
clearable: { type: Boolean, default: true },
disabled: { type: Boolean, default: false },
error: { type: String, default: '' },
vibration: { type: Boolean, default: false },
@@ -130,6 +140,20 @@ const selectedLabel = computed(() => {
return found ? found[props.optionLabel] : props.placeholder
})
const hasValue = computed(() =>
props.multiple
? Array.isArray(props.modelValue) && props.modelValue.length > 0
: props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== ''
)
const showClear = computed(() => props.clearable && !props.disabled && hasValue.value)
const clearSelection = () => {
const cleared = props.multiple ? [] : null
emit('update:modelValue', cleared)
emit('change', cleared)
}
const select = (opt) => {
if (props.disabled) return
const value = opt[props.optionValue]
@@ -275,6 +299,24 @@ onBeforeUnmount(() => unmountFloating())
}
}
&__clear {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin-inline-end: 0.375rem;
border: none;
background: transparent;
color: var(--color-thd-gray);
cursor: pointer;
flex-shrink: 0;
transition: color 0.15s;
&:hover {
color: var(--color-error);
}
}
&__error {
margin-top: 0.25rem;
font-family: var(--font-family-fa);