MahdiandCursor
4abab55a6b
Adopt ant-design-vue and a shared antdTheme for leads, pipeline, invoices, and shared form controls under strict single-page governance. Co-authored-by: Cursor <cursoragent@cursor.com>
72 lines
2.0 KiB
Vue
72 lines
2.0 KiB
Vue
<script setup lang="ts">
|
||
import { computed, ref } from 'vue';
|
||
import {
|
||
Button as AButton,
|
||
Checkbox as ACheckbox,
|
||
Flex as AFlex,
|
||
Popover as APopover,
|
||
Typography,
|
||
} from 'ant-design-vue';
|
||
import { SettingOutlined } from '@ant-design/icons-vue';
|
||
import { useTableColumns } from '@/lib/tableColumns';
|
||
import { toFaDigits } from '@/lib/jalali';
|
||
|
||
const { Text: ATypographyText } = Typography;
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
tableKey: string;
|
||
label?: string;
|
||
align?: 'start' | 'end';
|
||
}>(),
|
||
{ label: 'ستونها', align: 'start' },
|
||
);
|
||
|
||
const open = ref(false);
|
||
const cols = useTableColumns(() => props.tableKey);
|
||
|
||
const columns = computed(() => cols.columns());
|
||
const hiddenCount = computed(() => cols.hiddenCount());
|
||
|
||
const placement = computed(() =>
|
||
props.align === 'end' ? 'bottomLeft' : 'bottomRight',
|
||
);
|
||
</script>
|
||
|
||
<template>
|
||
<a-popover v-model:open="open" trigger="click" :placement="placement">
|
||
<template #content>
|
||
<a-flex
|
||
vertical
|
||
:gap="8"
|
||
style="min-width: 13rem; max-width: calc(100vw - 1.5rem)"
|
||
>
|
||
<a-typography-text type="secondary" strong>
|
||
نمایش ستونها
|
||
</a-typography-text>
|
||
<a-typography-text v-if="!columns.length" type="secondary">
|
||
ستونی برای نمایش وجود ندارد.
|
||
</a-typography-text>
|
||
<a-checkbox
|
||
v-for="col in columns"
|
||
:key="col"
|
||
:checked="cols.isVisible(col)"
|
||
@click.prevent="cols.toggle(col)"
|
||
>
|
||
{{ col }}
|
||
</a-checkbox>
|
||
<a-button v-if="hiddenCount" type="link" @click="cols.showAll()">
|
||
نمایش همه ستونها
|
||
</a-button>
|
||
</a-flex>
|
||
</template>
|
||
<a-button :type="hiddenCount > 0 ? 'primary' : 'default'" :ghost="hiddenCount > 0">
|
||
<template #icon><SettingOutlined /></template>
|
||
{{ label }}
|
||
<template v-if="hiddenCount">
|
||
· {{ toFaDigits(hiddenCount) }} مخفی
|
||
</template>
|
||
</a-button>
|
||
</a-popover>
|
||
</template>
|