@ithinkdt/ui 4.0.0-19 → 4.0.0-200

package/src/components/Checkboxes.jsx

@@ -1,130 +0,0 @@
-import { NCheckbox, NCheckboxGroup, NFlex } from 'ithinkdt-ui'
-import { computed, defineComponent, ref, watch } from 'vue'
-
-import { useI18n } from '../use-i18n.js'
-
-export const NCheckboxes = defineComponent({
-    name: 'Checkboxes',
-    inheritAttrs: false,
-    props: {
-        options: {
-            type: Array,
-            default: () => [],
-        },
-        vertical: {
-            type: Boolean,
-            default: false,
-        },
-        default: {
-            type: [Boolean, String, Object],
-            default: false,
-        },
-        gap: {
-            type: [Number, String, Array],
-            default: undefined,
-        },
-        modelValue: {
-            type: Array,
-            default: undefined,
-        },
-        labelPadding: {
-            type: String,
-            default: undefined,
-        },
-        labelField: {
-            type: String,
-            default: 'label',
-        },
-        valueField: {
-            type: String,
-            default: 'value',
-        },
-        disabledField: {
-            type: String,
-            default: 'disabled',
-        },
-    },
-    emits: {
-        'update:modelValue': () => true,
-        'updateModelValue': () => true,
-    },
-
-    setup(props, { emit, attrs }) {
-        const { t } = useI18n()
-        const defaultLabel = computed(() => {
-            if (!props.default) return ''
-            if (props.default === true) return t('common.all')
-            if (typeof props.default === 'string') return props.default
-            return props.default?.[props.labelField] ?? t('common.all')
-        })
-        const checked = ref([])
-
-        watch(
-            () => props.modelValue,
-            v => (checked.value = v),
-            { immediate: true },
-        )
-
-        const emitValue = (v) => {
-            emit('update:modelValue', v)
-            emit('updateModelValue', v)
-        }
-        const onAll = () => {
-            emitValue(
-                checked.value?.length === props.options.length ? [] : props.options.map(it => it[props.valueField]),
-            )
-        }
-        const indeterminate = computed(() => props.options.length > checked.value?.length && checked.value?.length > 0)
-
-        const style = computed(() => {
-            return {
-                '--n-label-padding': props.labelPadding,
-            }
-        })
-        return () => {
-            const group = (
-                <NCheckboxGroup {...attrs} value={checked.value} onUpdateValue={emitValue}>
-                    <NFlex
-                        size={props.gap ?? (props.vertical ? undefined : 'small')}
-                        vertical={props.vertical}
-                        style={!props.default && props.vertical ? { padding: '6px 0 0' } : {}}
-                    >
-                        {props.options?.map(op => (
-                            <NCheckbox
-                                value={op[props.valueField]}
-                                disabled={op[props.disabledField]}
-                                style={style.value}
-                            >
-                                {op[props.labelField]}
-                            </NCheckbox>
-                        ))}
-                    </NFlex>
-                </NCheckboxGroup>
-            )
-
-            return props.default
-                ? (
-                        <NFlex
-                            size={props.gap ?? (props.vertical ? undefined : 'small')}
-                            vertical={props.vertical}
-                            style={props.vertical ? { padding: '6px 0 0' } : {}}
-                        >
-                            <span>
-                                <NCheckbox
-                                    indeterminate={indeterminate.value}
-                                    checked={checked.value?.length > 0}
-                                    onUpdateChecked={onAll}
-                                    style={style.value}
-                                >
-                                    {defaultLabel.value}
-                                </NCheckbox>
-                            </span>
-                            {group}
-                        </NFlex>
-                    )
-                : (
-                        group
-                    )
-        }
-    },
-})

package/src/components/DataActions.jsx

@@ -1,105 +0,0 @@
-import { NButton, NDropdown } from 'ithinkdt-ui'
-import { computed, defineComponent, ref } from 'vue'
-import { VOverflow, VResizeObserver } from 'vueuc'
-
-import { IMore } from './assets.jsx'
-
-export const DataActions = /* @__PURE__ */ defineComponent({
-    name: 'DataActions',
-    props: {
-        options: {
-            type: Array,
-            default: () => [],
-        },
-    },
-    setup(props) {
-        const ofRef = ref()
-        let isFirstResize = true
-        const onResize = () => {
-            if (isFirstResize) {
-                isFirstResize = false
-            } else {
-                ofRef.value?.sync({
-                    showAllItemsBeforeCalculate: true,
-                })
-            }
-        }
-        const counter = ref()
-        const getCounter = () => {
-            return counter.value
-        }
-        const ellipsisFromIndexRef = ref(-1)
-        const onUpdateCount = (count) => {
-            ellipsisFromIndexRef.value = props.options.length - count
-        }
-        const onUpdateOverflow = (overflow) => {
-            if (!overflow) {
-                ellipsisFromIndexRef.value = -1
-            }
-        }
-        const updateCounter = () => {}
-        const moreOptions = computed(() => {
-            if (ellipsisFromIndexRef.value === -1) return []
-            return props.options.slice(ellipsisFromIndexRef.value).map((act) => {
-                return {
-                    ...act,
-                    key: act.text,
-                }
-            })
-        })
-
-        const renderLabel = (act) => {
-            const color = act.color === 'danger'
-                ? 'error'
-                : ['default', 'tertiary', 'primary', 'info', 'success', 'warning', 'error'].includes(act.color)
-                        ? act.color
-                        : 'primary'
-            return (
-                <NButton type={color} text>
-                    {act.text}
-                </NButton>
-            )
-        }
-
-        const onSelect = (key, act) => {
-            act.onClick?.()
-        }
-
-        return () => {
-            return (
-                <VResizeObserver onResize={onResize}>
-                    <VOverflow
-                        ref={ofRef}
-                        getCounter={getCounter}
-                        onUpdateCount={onUpdateCount}
-                        onUpdateOverflow={onUpdateOverflow}
-                        updateCounter={updateCounter}
-                        style="margin-top: 2px"
-                    >
-                        { {
-                            default: () => props.options.map((act) => {
-                                const color = act.color === 'danger'
-                                    ? 'error'
-                                    : ['default', 'tertiary', 'primary', 'info', 'success', 'warning', 'error'].includes(act.color)
-                                            ? act.color
-                                            : 'primary'
-                                return (
-                                    <NButton quaternary type={color} size="small" onClick={act.onClick}>
-                                        {act.text}
-                                    </NButton>
-                                )
-                            }),
-                            counter: () => (
-                                <span ref={counter} style="position: absolute">
-                                    <NDropdown options={moreOptions.value} renderLabel={renderLabel} onSelect={onSelect}>
-                                        <NButton quaternary size="small"><IMore style="font-size: 14px; color: #888" /></NButton>
-                                    </NDropdown>
-                                </span>
-                            ),
-                        }}
-                    </VOverflow>
-                </VResizeObserver>
-            )
-        }
-    },
-})

package/src/components/DataCustom.jsx

@@ -1,172 +0,0 @@
-import { NButton, NCheckbox, NEllipsis, NFlex, NIcon, NPopover } from 'ithinkdt-ui'
-import { Sortable } from 'sortablejs/modular/sortable.core.esm.js'
-import { defineComponent, ref, toValue, watch, withDirectives } from 'vue'
-
-import { vTooltip } from '../directives/tooltip.jsx'
-import { useI18n } from '../use-i18n.js'
-
-import { ICustom, IDrag, ILeft, IRight } from './assets.jsx'
-
-const DataCustomItem = /* @__PURE__ */ defineComponent({
-    name: 'DataCustomRow',
-    props: {
-        label: [String, Function],
-        disabled: Boolean,
-        hidden: Boolean,
-        fixed: [Boolean, String],
-    },
-    emits: ['update-hidden', 'update-fixed'],
-    setup(props, { emit }) {
-        return () => {
-            return (
-                <NFlex align="center" wrap={false} size="small">
-                    <NButton type="primary" text class="icon-drag">
-                        <NIcon size="18">
-                            <IDrag />
-                        </NIcon>
-                    </NButton>
-                    <NCheckbox
-                        checked={!props.hidden}
-                        disabled={props.disabled}
-                        onUpdateChecked={v => emit('update-hidden', !v)}
-                    />
-                    <NEllipsis style="flex: 1 1 auto">{toValue(props.label)}</NEllipsis>
-                    <NButton
-                        text
-                        type={props.fixed === 'left' ? 'primary' : undefined}
-                        onClick={() => emit('update-fixed', props.fixed === 'left' ? false : 'left')}
-                    >
-                        <NIcon>
-                            <ILeft />
-                        </NIcon>
-                    </NButton>
-                    <NButton
-                        text
-                        type={props.fixed === 'right' ? 'primary' : undefined}
-                        onClick={() => emit('update-fixed', props.fixed === 'right' ? false : 'right')}
-                    >
-                        <NIcon>
-                            <IRight />
-                        </NIcon>
-                    </NButton>
-                </NFlex>
-            )
-        }
-    },
-})
-
-export const DataCustom = /* @__PURE__ */ defineComponent({
-    name: 'DataCustom',
-    props: {
-        data: {
-            type: Array,
-            required: true,
-        },
-        keyField: {
-            type: String,
-            default: 'key',
-        },
-        labelField: {
-            type: String,
-            default: 'label',
-        },
-        fixedField: {
-            type: String,
-            default: 'fixed',
-        },
-        hiddenField: {
-            type: String,
-            default: 'hidden',
-        },
-        showFixed: {
-            type: Boolean,
-            default: false,
-        },
-        disabledField: {
-            type: String,
-            default: 'disabled',
-        },
-        visiblityField: {
-            type: String,
-            default: 'visiblity',
-        },
-        tooltip: [String, Object],
-    },
-    emits: {
-        custom: () => true,
-    },
-    setup(props, { emit }) {
-        const { t } = useI18n()
-
-        function emitCols(col, field, value) {
-            emit('custom', {
-                key: col.key,
-                [field]: value,
-            })
-        }
-
-        const ulRef = ref()
-
-        watch(ulRef, (inst) => {
-            if (!inst.$el) return
-            Sortable.create(inst.$el, {
-                animation: 150,
-                ghostClass: 'ghost',
-                handle: '.icon-drag',
-                filter: '.disabled',
-                onEnd(e) {
-                    const orders = props.data.map(item => item[props.keyField])
-                    const [curr] = orders.splice(e.oldIndex, 1)
-                    orders.splice(e.newIndex, 0, curr)
-                    emit('custom', orders)
-                },
-            })
-        })
-
-        return () => (
-            <NPopover
-                trigger="click"
-                scrollable
-                placement="left-start"
-                displayDirective="show"
-                style="max-height: 400px; width: 240px"
-            >
-                {{
-                    trigger: () =>
-                        withDirectives(
-                            <NButton text>
-                                <NIcon size="20">
-                                    <ICustom />
-                                </NIcon>
-                            </NButton>,
-                            [[vTooltip, props.tooltip ?? t('common.page.custom.tooltip')]],
-                        ),
-                    default: () => (
-                        <NFlex vertical>
-                            <NFlex justify="space-between">
-                                <div style="font-weight: bold">{props.tooltip ?? t('common.page.custom.tooltip') }</div>
-                                <NButton text type="primary" size="small" onClick={() => emit('custom', true)}>
-                                    { t('common.page.custom.reset') }
-                                </NButton>
-                            </NFlex>
-                            <NFlex ref={ulRef} vertical>
-                                {props.data
-                                    .filter(item => item[props.visiblityField] !== false)
-                                    .map(item => (
-                                        <DataCustomItem
-                                            key={item[props.keyField]}
-                                            label={item[props.labelField]}
-                                            hidden={item[props.hiddenField]}
-                                            fixed={item[props.fixedField]}
-                                            onUpdateHidden={v => emitCols(item, 'hidden', v)}
-                                            onUpdateFixed={v => emitCols(item, 'fixed', v)}
-                                        />
-                                    ))}
-                            </NFlex>
-                        </NFlex>
-                    ),
-                }}
-            </NPopover>
-        )
-    },
-})

package/src/components/DataFilter.jsx

@@ -1,113 +0,0 @@
-import { NButton, NFlex, formProps } from 'ithinkdt-ui'
-import { defineComponent, reactive, ref } from 'vue'
-
-import { pickProps } from '@ithinkdt/common/object'
-
-import { useI18n } from '../use-i18n.js'
-
-import { DataForm } from './DataForm.jsx'
-import { IDown, IUp } from './assets.jsx'
-
-export const DataFilter = /* @__PURE__ */ defineComponent({
-    name: 'DataFilter',
-    props: {
-        grid: {
-            type: Object,
-            default: () => ({}),
-        },
-        ...pickProps(formProps, 'disabled', 'model'),
-        labelWidth: { type: [String, Number], default: '5em' },
-        labelPlacement: { type: String, default: 'left' },
-        items: { type: Array, required: true },
-        loading: { type: Boolean, required: false, default: false },
-        filterOnReset: { type: Boolean, required: false, default: true },
-        filterText: { type: String, default: undefined },
-        resetText: { type: String, default: undefined },
-        customizable: { type: Boolean, required: false, default: true },
-        collapsible: { type: Boolean, required: false, default: true },
-        defaultCollapsed: { type: Boolean, required: false, default: true },
-    },
-    emits: ['filter', 'reset', 'custom', 'collapse'],
-    setup(props, { expose, emit }) {
-        const { t } = useI18n()
-
-        const onSubmit = (e) => {
-            emit('filter', props.model, e)
-        }
-        const onReset = (e) => {
-            emit('reset', e)
-            if (props.filterOnReset) {
-                emit('filter', props.model, e)
-            }
-        }
-        const collapsed = ref(props.defaultCollapsed)
-        const collapse = (collapsedValue) => {
-            collapsed.value = collapsedValue
-        }
-
-        expose({
-            collapse,
-        })
-
-        const action = reactive({
-            span: 6,
-            suffix: true,
-        })
-
-        return () => {
-            const { filterOnReset, filterText, resetText, customizable, defaultCollapsed, collapsible, grid, ...formProps } = props
-
-            return (
-                <DataForm
-                    grid={
-                        {
-                            cols: '12 768:18 1280:24 1536:30',
-                            yGap: 20,
-                            xGap: 8,
-                            ...grid,
-                            collapsed: collapsed.value,
-                        }
-                    }
-                    {...formProps}
-                    showFeedback={false}
-                    showAction={action}
-                    onSubmit={onSubmit}
-                    onReset={onReset}
-                >
-                    {{
-                        action: ({ cols, spans }) => {
-                            action.suffix = cols < (spans + action.span)
-
-                            return (
-                                <NFlex justify={action.suffix ? 'end' : 'start'} align="center">
-                                    {action.suffix ? undefined : <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>}
-                                    <NButton attrType="submit" type="primary" disabled={props.disabled} loading={props.loading}>
-                                        {filterText || t('common.page.filter.submitText') }
-                                    </NButton>
-                                    <NButton attrType="reset" disabled={props.disabled || props.loading}>
-                                        {resetText || t('common.page.form.resetText') }
-                                    </NButton>
-                                    {
-                                        collapsible && action.suffix
-                                            ? (
-                                                    <NButton
-                                                        text
-                                                        type="primary"
-                                                        iconPlacement="right"
-                                                        renderIcon={collapsed.value ? IDown : IUp}
-                                                        onClick={() => collapse(!collapsed.value)}
-                                                    >
-                                                        {collapsed.value ? t('common.page.filter.expand') : t('common.page.filter.collapse') }
-                                                    </NButton>
-                                                )
-                                            : undefined
-                                    }
-                                </NFlex>
-                            )
-                        },
-                    }}
-                </DataForm>
-            )
-        }
-    },
-})