@ithinkdt/ui 4.0.0-12 → 4.0.0-14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.0-12",
+  "version": "4.0.0-14",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",

package/src/components/Checkboxes.jsx

@@ -23,7 +23,7 @@ export const NCheckboxes = defineComponent({
             type: [Number, String, Array],
             default: undefined,
         },
-        value: {
+        modelValue: {
             type: Array,
             default: undefined,
         },
@@ -45,7 +45,8 @@ export const NCheckboxes = defineComponent({
         },
     },
     emits: {
-        'update:value': () => true,
+        'update:modelValue': () => true,
+        'updateModelValue': () => true,
     },
 
     setup(props, { emit, attrs }) {
@@ -59,13 +60,14 @@ export const NCheckboxes = defineComponent({
         const checked = ref([])
 
         watch(
-            () => props.value,
+            () => props.modelValue,
             v => (checked.value = v),
             { immediate: true },
         )
 
         const emitValue = (v) => {
-            emit('update:value', v)
+            emit('update:modelValue', v)
+            emit('updateModelValue', v)
         }
         const onAll = () => {
             emitValue(

package/src/components/DataActions.jsx

@@ -74,7 +74,7 @@ export const DataActions = /* @__PURE__ */ defineComponent({
                         onUpdateCount={onUpdateCount}
                         onUpdateOverflow={onUpdateOverflow}
                         updateCounter={updateCounter}
-                        style="width: 100%; display: flex; overflow: hidden; align-items: center; line-height: 1.25;"
+                        style="margin-top: 2px"
                     >
                         { {
                             default: () => props.options.map((act) => {
@@ -84,15 +84,13 @@ export const DataActions = /* @__PURE__ */ defineComponent({
                                             ? act.color
                                             : 'primary'
                                 return (
-                                    <span>
-                                        <NButton quaternary type={color} size="small" onClick={act.onClick}>
-                                            {act.text}
-                                        </NButton>
-                                    </span>
+                                    <NButton quaternary type={color} size="small" onClick={act.onClick}>
+                                        {act.text}
+                                    </NButton>
                                 )
                             }),
                             counter: () => (
-                                <span ref={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>

package/src/components/DataTable.jsx

@@ -1,5 +1,5 @@
 import { toReactive, unrefElement, until } from '@vueuse/core'
-import { NButton, NDataTable, NFlex, NIcon, NTooltip } from 'ithinkdt-ui'
+import { NButton, NDataTable, NFlex, NIcon, NPerformantEllipsis, NTooltip } from 'ithinkdt-ui'
 import { Sortable } from 'sortablejs'
 import { computed, defineComponent, inject, mergeProps, nextTick, ref, shallowRef, toValue, useTemplateRef, watch, withDirectives } from 'vue'
 
@@ -43,40 +43,52 @@ function _map(columns, width) {
                 },
             }
 
-            if (column.children?.length) {
-                column.children = _map(column.children, width.value)
+            if (col.children?.length) {
+                column.children = _map(col.children, width.value)
             } else {
-                if (column.hidden !== true) {
+                if (col.hidden !== true) {
                     column.width ??= 100
                     width.value += Number(column.width)
                 }
 
-                const render0 = column.render ?? (v => v)
-                if (column.ellipsis !== false) {
-                    column.ellipsis = mergeProps(
-                        {
-                            expandTrigger: 'click',
-                            lineClamp: 1,
-                            tooltip: {
-                                style: {
-                                    maxWidth: '61.8vw',
-                                    wordBreak: 'break-all',
-                                },
-                            },
-                        },
-                        typeof column.ellipsis === 'boolean' ? {} : column.ellipsis,
-                    )
-                    if (column.ellipsisTooltip === true) {
+                const render0 = col.render ?? (v => v)
+                if (col.ellipsis !== false) {
+                    column.ellipsis = false
+                    column.render = (...params) => {
+                        const vnode = render0(...params)
+                        return (
+                            <NPerformantEllipsis
+                                {...mergeProps(
+                                    {
+                                        expandTrigger: 'click',
+                                        lineClamp: 1,
+                                        tooltip: {
+                                            style: {
+                                                maxWidth: '61.8vw',
+                                                wordBreak: 'break-all',
+                                            },
+                                        },
+                                    },
+                                    typeof col.ellipsis === 'boolean' ? {} : col.ellipsis,
+                                )}
+                            >
+                                {
+                                    vnode
+                                }
+                            </NPerformantEllipsis>
+                        )
+                    }
+
+                    if (col.ellipsisTooltip === true) {
                         column.ellipsisTooltip ??= render0
                     }
                 }
 
                 Object.assign(column, {
-                    resizable: column.resizable !== false,
-                    sorter: column.sortable,
-                    type: ['selection', 'expand'].includes(column.type) ? column.type : undefined,
-                    disabled: column.selectable ? model => column.selectable(model) === false : undefined,
-                    ellipsisComponent: 'performant-ellipsis',
+                    resizable: col.resizable !== false,
+                    sorter: col.sortable,
+                    type: ['selection', 'expand'].includes(col.type) ? col.type : undefined,
+                    disabled: col.selectable ? model => col.selectable(model) === false : undefined,
                 })
             }
 

package/src/components/Radios.jsx

@@ -38,9 +38,17 @@ export const NRadios = defineComponent({
             type: String,
             default: 'disabled',
         },
+        modelValue: {
+            type: [String, Number, Boolean],
+            default: undefined,
+        },
+    },
+    emits: {
+        'update:modelValue': () => true,
+        'updateModelValue': () => true,
     },
 
-    setup(props) {
+    setup(props, { emit }) {
         const { t } = useI18n()
 
         const defaultLabel = computed(() => {
@@ -56,6 +64,12 @@ export const NRadios = defineComponent({
                     '--n-button-text-color-active': 'var(--color-base)',
                 }
             : {})
+
+        const emitValue = (v) => {
+            emit('update:modelValue', v)
+            emit('updateModelValue', v)
+        }
+
         return () => {
             const Comp = props.type === 'button' ? NRadioButton : NRadio
 
@@ -103,7 +117,7 @@ export const NRadios = defineComponent({
                 </>
             )
             return (
-                <NRadioGroup style={props.vertical ? { ...groupStyle.value, padding: '6px 0 0' } : groupStyle.value}>
+                <NRadioGroup style={props.vertical ? { ...groupStyle.value, padding: '6px 0 0' } : groupStyle.value} value={props.modelValue} onUpdateValue={emitValue}>
                     {props.type === 'radio'
                         ? (
                                 <NFlex size={props.vertical ? undefined : 'small'} vertical={props.vertical}>

package/src/components/UserDept.jsx

@@ -17,7 +17,7 @@ export const DtUserDept = defineComponent({
         users: { type: Array, default: () => [] },
         groups: { type: Array, default: () => [] },
         depts: { type: Array, default: () => [] },
-        value: { type: [Array, String], default: undefined },
+        modelValue: { type: [Array, String], default: undefined },
         placeholder: { type: String, default: undefined },
         size: { type: String, default: undefined },
         type: { type: String, default: 'user' },
@@ -36,9 +36,9 @@ export const DtUserDept = defineComponent({
 
         const valueArray = computed(() => {
             if (props.multiple) {
-                return props.value || []
+                return props.modelValue || []
             }
-            const value = props.value?.trim()
+            const value = props.modelValue?.trim()
             return value ? [value] : []
         })
 
@@ -301,7 +301,7 @@ export const DtUserDept = defineComponent({
                     options={options}
                     renderSourceList={({ onCheck, pattern }) => renderSourceList(value, onCheck, pattern)}
                     renderTargetList={
-                        props.placeholder?.trim() && !props.value?.length ? renderTargetListEmpty : undefined
+                        props.placeholder?.trim() && !props.modelValue?.length ? renderTargetListEmpty : undefined
                     }
                     sourceFilterable={props.filterable}
                     size={props.size}
@@ -400,7 +400,7 @@ export const DtUserDept = defineComponent({
                         checkable={props.multiple}
                         multiple={props.multiple}
                         filter={(pattern, it) => it.label.includes(pattern) || it.value.includes(pattern)}
-                        value={props.value}
+                        value={props.modelValue}
                         onUpdateValue={(v) => {
                             if (props.multiple && props.max && v?.length > props.max) return
                             emit('updateModelValue', v)
@@ -439,7 +439,7 @@ export const DtUserDept = defineComponent({
                     size={props.size}
                     placeholder={props.placeholder}
                     disabled={props.disabled || undefined}
-                    value={props.value}
+                    value={props.modelValue}
                     renderTag={props.multiple ? renderTag : undefined}
                     onFocus={isDropdown ? undefined : showDialog}
                     onUpdateValue={(v) => {
@@ -571,7 +571,7 @@ export const DtDeptRender = /* @__PURE__ */ defineComponent({
     setup(props) {
         const depts = ref([])
         const map = {}
-        watch([() => props.value, () => props.multiple],
+        watch([() => props.modelValue, () => props.multiple],
             ([value, multiple]) => {
                 depts.value = []
                 const deptcodes = value ? (multiple ? (Array.isArray(value) ? value : value.trim() ? value.trim().split(',') : []) : [value]) : []
@@ -613,7 +613,7 @@ export const DtUserRender = /* @__PURE__ */ defineComponent({
     setup(props) {
         const users = ref([])
         const map = {}
-        watch([() => props.value, () => props.multiple],
+        watch([() => props.modelValue, () => props.multiple],
             ([value, multiple]) => {
                 users.value = []
                 const usernames = value ? (multiple ? (Array.isArray(value) ? value : value.trim() ? value.trim().split(',') : []) : [value]) : []

package/src/page.jsx

@@ -218,6 +218,7 @@ export function createPageFormHelper({
                     {
                         ...props,
                         ...params,
+                        options: options0,
                         modelValue,
                     },
                 )
@@ -251,6 +252,7 @@ export function createPageFormHelper({
                     {
                         ...props,
                         ...params,
+                        options: options0,
                         modelValue,
                     },
                 )