@ithinkdt/ui 4.0.0-10 → 4.0.0-11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.0-10",
+  "version": "4.0.0-11",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -63,7 +63,7 @@
     "sortablejs": "^1.15.6",
     "@types/sortablejs": "^1.15.8",
     "nanoid": "^5.1.6",
-    "@ithinkdt/common": "^4.0.0-10"
+    "@ithinkdt/common": "^4.0.0-11"
   },
   "peerDependencies": {
     "@ithinkdt/page": ">=4.0",
@@ -88,12 +88,9 @@
     "vite": "npm:rolldown-vite@^7.1.16",
     "vue": "^3.5.22",
     "vue-router": "^4.5.1",
-    "@ithinkdt/page": "^4.0.0-10"
+    "@ithinkdt/page": "^4.0.0-11"
   },
   "scripts": {
-    "build": " vite build && cp -r ./_src/*.d.ts ./src",
-    "prerelease": "cp -r ./src ./_src && pnpm run build",
-    "release": "pnpm publish --no-git-checks",
-    "postrelease": "rm -rf ./src && cp -r ./_src ./src && rm -rf ./_src"
+    "release": "pnpm publish --no-git-checks"
   }
 }

package/src/components/Checkboxes.jsx

@@ -0,0 +1,128 @@
+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,
+        },
+        value: {
+            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:value': () => 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.value,
+            v => (checked.value = v),
+            { immediate: true },
+        )
+
+        const emitValue = (v) => {
+            emit('update:value', 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

@@ -0,0 +1,107 @@
+import { NButton, NDropdown } from 'ithinkdt-ui'
+import { computed, defineComponent } 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="width: 100%; display: flex; overflow: hidden; align-items: center; line-height: 1.25;"
+                    >
+                        { {
+                            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 (
+                                    <span>
+                                        <NButton quaternary type={color} size="small" onClick={act.onClick}>
+                                            {act.text}
+                                        </NButton>
+                                    </span>
+                                )
+                            }),
+                            counter: () => (
+                                <span ref={counter}>
+                                    <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

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,113 @@
+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>
+            )
+        }
+    },
+})