@ithinkdt/naive/src/components/custom-columns/CustomCol.jsx

iThinkDT Naive UI

import { defineComponent } from 'vue'
import { useI18n } from '@ithinkdt/core'
import { NIcon, NCheckbox, NEllipsis, NFlex } from 'ithinkdt-ui'

const IDrag = () => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="1em"
        height="1em"
        viewBox="0 0 1024 1024"
    >
        <path
            fill="currentColor"
            d="M300 276.497a56 56 0 1 0 56-96.994a56 56 0 0 0-56 96.994Zm0 284a56 56 0 1 0 56-96.994a56 56 0 0 0-56 96.994ZM640 228a56 56 0 1 0 112 0a56 56 0 0 0-112 0Zm0 284a56 56 0 1 0 112 0a56 56 0 0 0-112 0ZM300 844.497a56 56 0 1 0 56-96.994a56 56 0 0 0-56 96.994ZM640 796a56 56 0 1 0 112 0a56 56 0 0 0-112 0Z"
        />
    </svg>
)
const ILeft = () => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="1em"
        height="1em"
        viewBox="0 0 1024 1024"
    >
        <path
            fill="currentColor"
            d="M326 164h-64c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h64c4.4 0 8-3.6 8-8V172c0-4.4-3.6-8-8-8zm444 72.4V164c0-6.8-7.9-10.5-13.1-6.1L335 512l421.9 354.1c5.2 4.4 13.1.7 13.1-6.1v-72.4c0-9.4-4.2-18.4-11.4-24.5L459.4 512l299.2-251.1c7.2-6.1 11.4-15.1 11.4-24.5z"
        />
    </svg>
)
const IRight = () => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="1em"
        height="1em"
        viewBox="0 0 1024 1024"
    >
        <path
            fill="currentColor"
            d="M762 164h-64c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h64c4.4 0 8-3.6 8-8V172c0-4.4-3.6-8-8-8zm-508 0v72.4c0 9.5 4.2 18.4 11.4 24.5L564.6 512L265.4 763.1c-7.2 6.1-11.4 15-11.4 24.5V860c0 6.8 7.9 10.5 13.1 6.1L689 512L267.1 157.9A7.95 7.95 0 0 0 254 164z"
        />
    </svg>
)

export const CustomCol = defineComponent({
    name: 'NCustomCol',
    props: {
        column: {
            type: Object,
            required: true,
        },
    },
    emits: ['update-hidden', 'update-fixed'],
    setup(props, { emit }) {
        const { t } = useI18n('global')
        return () => {
            const col = props.column
            return (
                <NFlex align="center" wrap={false} size="small">
                    <NIcon size="18" color="var(--dt-primary-color)" style="cursor: move" class="icon-drag">
                        <IDrag />
                    </NIcon>
                    <NCheckbox
                        checked={!col.hidden}
                        disabled={col.disaCustom}
                        onUpdateChecked={(v) => emit('update-hidden', !v)}
                    />
                    <NEllipsis style="flex: 1 1 auto">{col.label}</NEllipsis>
                    <NIcon
                        size="18"
                        title={t('page.column.fixedLeft')}
                        style="cursor: pointer"
                        color={col.fixed === 'left' ? 'var(--dt-primary-color)' : ''}
                        onClick={() => emit('update-fixed', col.fixed === 'left' ? false : 'left')}
                    >
                        <ILeft />
                    </NIcon>
                    <NIcon
                        size="18"
                        title={t('page.column.fixedRight')}
                        style="cursor: pointer"
                        color={col.fixed === 'right' ? 'var(--dt-primary-color)' : ''}
                        onClick={() => emit('update-fixed', col.fixed === 'right' ? false : 'right')}
                    >
                        <IRight />
                    </NIcon>
                </NFlex>
            )
        }
    },
})