@netang/quasar 0.0.45 → 0.0.47

package/components/field-table/index.vue

@@ -12,12 +12,13 @@
     </template>
 
     <!--:class="fieldFocused ? 'q-field&#45;&#45;float q-field&#45;&#45;focused q-field&#45;&#45;highlighted' : ''"-->
+    <!--:clearable="clearable && (! multiple || collapseTags)"-->
     <q-field
         class="n-field-table"
         :model-value="showValue"
         :disable="disable"
         :readonly="readonly"
-        :clearable="clearable && (! multiple || collapseTags)"
+        :clearable="clearable"
         @focus="onFieldFocus"
         @blur="onFieldBlur"
         @clear="onFieldClear"
@@ -203,12 +204,12 @@ export default {
         // 标签字段
         labelKey:  String,
         // 值类型
-        // string: 分隔符隔开的字符串
-        // array: 数组
-        // arrayObject: 数组对象
+        // string: 字符串或数字
+        // stringArray: 普通数组(包含字符串或数字的一维数组)
+        // objectArray: 对象数组(包含对象的一维数组)
         valueType: {
             type: String,
-            default: 'arrayObject'
+            default: 'objectArray'
         },
         // 值分隔符(值类型为 string 有效)
         valueSeparator: {
@@ -602,12 +603,16 @@ export default {
          * 当前格式化显示标签
          */
         function currentFormatLabel(item) {
+
             // 如果有格式化显示标签方法
-            return _.isFunction(props.formatLabel)
+            if (_.isFunction(props.formatLabel)) {
                 // 执行格式化显示标签方法
-                ? props.formatLabel(item)
-                // 否则显示该值的标签字段
-                : item[currentlabelKey.value]
+                return props.formatLabel(item)
+            }
+
+            // 否则显示该值的标签字段
+            const val = item[currentlabelKey.value]
+            return utils.isValidValue(val) ? val : item[props.valueKey]
         }
 
         /**
@@ -841,6 +846,8 @@ export default {
             // 停止冒泡
             e.stopPropagation()
 
+            console.log('onFieldBluronFieldBlur', props.filter, showPopup.value)
+
             if (
                 // 如果开启筛选
                 props.filter
@@ -1071,6 +1078,8 @@ export default {
             popupRef,
             // 是否显示对话框
             showDialog,
+            // 是否显示弹出层
+            showPopup,
             // 当前已选数据
             selected,
             // 当前表格列数据

package/components/field-tree/index.vue

@@ -592,6 +592,8 @@ export default {
             inputValue,
             // 弹出层节点
             popupRef,
+            // 是否显示弹出层
+            showPopup,
             // 树节点
             treeRef,
             // 树选择数据

package/components/input-format/index.vue

@@ -45,7 +45,6 @@ export default {
      */
     emits: [
         'update:modelValue',
-        'blur',
     ],
 
     /**
@@ -84,6 +83,14 @@ export default {
 
         // ==========【方法】=============================================================================================
 
+        /**
+         * 触发更新值
+         */
+        function emitModelValue(val) {
+            // 触发更新值
+            emit('update:modelValue', val)
+        }
+
         /**
          * 格式化声明值
          */
@@ -117,7 +124,7 @@ export default {
                 }
             }
 
-            return val
+            return Array.isArray(val) ? val.join(',') : val
         }
 
         /**
@@ -219,28 +226,30 @@ export default {
          */
         function onBlur() {
 
-            let val = currentValue.value
+            const val = currentValue.value
 
             // 如果修改值
             if (props.formatAfter) {
 
                 // 如果是方法
                 if (_.isFunction(props.formatAfter)) {
-                    val = props.formatAfter(val)
+
+                    // 触发更新值
+                    emitModelValue(props.formatAfter(val))
+                    return
+                }
 
                 // 如果是参数
-                } else if (props.formatAfter === true || utils.isValidObject(props.formatAfter)) {
+                if (props.formatAfter === true || utils.isValidObject(props.formatAfter)) {
 
-                    // 格式化字符串值
-                    val = formatStringValue(val, props.formatAfter === true ? {} : props.formatAfter, props.valueArray)
+                    // 触发更新值
+                    emitModelValue(formatStringValue(val, props.formatAfter === true ? {} : props.formatAfter, props.valueArray))
+                    return
                 }
             }
 
-            // 更新值
-            emit('update:modelValue', val)
-
-            // 失去焦点触发
-            emit('blur', val)
+            // 触发更新值
+            emitModelValue(props.valueArray ? utils.split(val, ',') : val)
         }
 
         // ==========【返回】=============================================================================================

package/components/splitter/index.vue

@@ -61,10 +61,7 @@ export default {
         // 手机模式隐藏后插槽
         hideAfterInMobile: Boolean,
         // 是否开启缓存
-        cache: {
-            type: [ Boolean, String ],
-            default: true,
-        },
+        cache: [ Boolean, String ],
     },
 
     /**

package/components/{splitter-table → table-splitter}/index.vue

@@ -1,18 +1,28 @@
 <template>
     <n-splitter
         class="absolute-full"
+        v-model="currentValue"
+        :reverse="reverse"
+        :unit="unit"
+        :limits="limits"
+        :horizontal="horizontal"
+
+        v-model:after="currentAfter"
         @update:after="setSelection"
         :hide-after-in-mobile="hideAfterInMobile"
-        v-bind="$attrs"
+        :cache="cache"
     >
         <!-- 表格 -->
         <template v-slot:before="{ after, toggleAfter }">
             <n-table
-                v-bind="tableProps"
+                v-bind="$attrs"
             >
                 <!-- 工具栏右边插槽(手机端不显示) -->
                 <template #toolbar-right v-if="isWatcher">
 
+                    <!-- 工具栏右边插槽 -->
+                    <slot name="toolbar-right" />
+
                     <!-- 是否显示详情 -->
                     <q-toggle
                         icon="apps"
@@ -58,7 +68,7 @@
 
             <!-- 空状态 -->
             <n-empty
-                :description="description"
+                :description="renderDescription"
                 v-else
             />
 
@@ -75,26 +85,51 @@ import { NTableKey } from '../../utils/symbols'
 
 export default {
 
+    /**
+     * 关闭组件 attribute 透传行为
+     */
+    inheritAttrs: false,
+
     /**
      * 标识
      */
-    name: 'NSplitterTable',
+    name: 'NTableSplitter',
 
     /**
      * 声明属性
      */
     props: {
-        // 表格声明参数
-        tableProps: Object,
+        // 值 v-model
+        modelValue: {
+            type: Number,
+            default: 50,
+        },
+        reverse: Boolean,
+        unit: String,
+        limits: Array,
+        horizontal: Boolean,
+
+        // 显示后置插槽 v-model:after
+        // 注意: 如果非双向绑定, 如 :after 并不会影响内部值变化, 仅做初始值使用
+        after: {
+            type: Boolean,
+            default: true,
+        },
         // 手机模式隐藏后插槽
         hideAfterInMobile: {
             type: Boolean,
             default: true,
         },
-        // 空状态描述
-        description: {
+        // 是否开启缓存
+        cache: {
+            type: [ Boolean, String ],
+            default: true,
+        },
+
+        // 工具提示
+        tooltip: {
             type: String,
-            default: '没有找到任何数据',
+            default: '是否显示详情',
         },
         // 渲染组件路径
         renderPath: {
@@ -103,17 +138,25 @@ export default {
         },
         // 格式化已选表格的数据并返回渲染组件参数
         renderQuery: Function,
-        // 工具提示
-        tooltip: {
+        // 渲染空状态描述
+        renderDescription: {
             type: String,
-            default: '是否显示详情',
+            default: '没有找到任何数据',
         },
     },
 
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+        'update:after',
+    ],
+
     /**
      * 组合式
      */
-    setup(props, { slots }) {
+    setup(props, { emit, slots }) {
 
         // ==========【计算属性】=========================================================================================
 
@@ -121,7 +164,7 @@ export default {
          * 插槽标识
          */
         const slotNames = computed(function() {
-            return utils.isValidObject(slots) ? Object.keys(slots) : []
+            return utils.isValidObject(slots) ? Object.keys(slots).filter(e => e !== 'toolbar-right') : []
         })
 
         /**
@@ -166,8 +209,42 @@ export default {
         // 当前已选单条数据
         const currentSelectedItem = ref(null)
 
+        // 当前值
+        const currentValue = ref(props.modelValue)
+
+        // 当前显示前置插槽
+        const currentAfter = ref(props.after)
+
         // ==========【监听数据】=========================================================================================
 
+        /**
+         * 监听声明值
+         */
+        watch(() => props.modelValue, function (val) {
+            currentValue.value = val
+        })
+
+        /**
+         * 监听声明显示前置插槽
+         */
+        watch(() => props.after, function (val) {
+            currentAfter.value = val
+        })
+
+        /**
+         * 监听当前值
+         */
+        watch(currentValue, function (val) {
+            emit('update:modelValue', val)
+        })
+
+        /**
+         * 监听当前显示前置插槽
+         */
+        watch(currentAfter, function (val) {
+            emit('update:after', val)
+        })
+
         /**
          * 监听表格已选数据(非手机端有效)
          */
@@ -235,6 +312,11 @@ export default {
             // 当前传参
             currentQuery,
 
+            // 当前值
+            currentValue,
+            // 当前显示前置插槽
+            currentAfter,
+
             // 设置表格选择类型
             setSelection,
         }

package/components/value-format/index.vue

@@ -0,0 +1,240 @@
+<template>
+    <slot
+        :value="currentValue"
+        :emitValue="emitValue"
+    />
+</template>
+
+<script>
+import { ref, watch } from 'vue'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NValueFormat',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 值 v-model
+        modelValue: {
+            required: true,
+        },
+        // 修改前值
+        before: [ Function, Object, Boolean ],
+        // 修改后值
+        after: [ Function, Object, Boolean ],
+        // 不自动触发更新
+        noEmit: Boolean,
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit }) {
+
+        // ==========【数据】============================================================================================
+
+        // 当前值
+        const currentValue = ref(formatModelValue(props.modelValue))
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听声明值
+         */
+        watch(() => props.modelValue, function (val) {
+
+            // 格式化声明值
+            currentValue.value = formatModelValue(val)
+
+        }, {
+            // 深度监听
+            deep: true,
+        })
+
+        /**
+         * 监听当前值
+         */
+        watch(currentValue, function (value) {
+
+            // 如果是不自动触发更新
+            if (props.noEmit) {
+
+                // 则无任何操作
+                return
+            }
+
+            // 立即执行触发更新值
+            emitValue(value)
+
+        }, {
+            // 深度监听
+            deep: true,
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 格式化声明值
+         */
+        function formatModelValue(value) {
+            return _.isFunction(props.before)
+                // 如果有修改前值方法
+                ? props.before({ value, formatArray, formatString })
+                // 返回值
+                : value
+        }
+
+        /**
+         * 触发更新值
+         */
+        function emitValue(value) {
+
+            // 触发更新值
+            emit(
+                'update:modelValue',
+                _.isFunction(props.after) ?
+                    // 如果有修改提交值方法
+                    props.after({ value, formatArray, formatString })
+                    // 否则返回当前值
+                    : value
+            )
+        }
+
+        /**
+         * 格式化数组
+         */
+        function formatArray(val, params) {
+
+            const o = Object.assign({
+                // 是否去重
+                unique: true,
+                // 分隔符
+                separator: ',',
+                // 是否给每个值去除首位空格
+                trim: true,
+                // 验证每个值是否为有效字符串/数字
+                isValidValue: true,
+                // 是否转字符串
+                toString: false,
+            }, params)
+
+            val = utils.isValidArray(val) ? val : []
+
+            // 如果数组有值
+            if (val.length) {
+
+                // 是否给每个值去除首位空格
+                if (o.trim) {
+                    val = val.map(e => utils.trimString(e))
+                }
+
+                // 是否验证每个值是否为有效字符串/数字
+                if (o.isValidValue) {
+                    val = val.filter(val => utils.isValidValue(val))
+                }
+
+                // 去重
+                if (o.unique) {
+                    val = _.uniq(val)
+                }
+            }
+
+            // 如果转字符串
+            if (o.toString) {
+                // 合并为字符串
+                return val.join(o.separator)
+            }
+
+            return []
+        }
+
+        /**
+         * 格式化字符串
+         */
+        function formatString(val, params) {
+
+            const o = Object.assign({
+                // 是否给每个值去除首位空格
+                trim: true,
+                // 替换内容
+                replace: /\n|\，|\s+/g,
+                // 是否去重
+                unique: true,
+                // 分隔符
+                separator: ',',
+                // 验证每个值是否为有效字符串/数字
+                isValidValue: true,
+                // 是否转数组
+                toArray: false,
+            }, params)
+
+            // 是否去除首尾空格
+            if (o.trim) {
+                // 去除首尾空格
+                val = utils.trimString(val)
+
+            // 否则转字符串
+            } else {
+                val = utils.isValidValue(val) ? String(val) : ''
+            }
+
+            // 如果有分割符
+            if (utils.isValidValue(o.separator, true)) {
+
+                // 分隔符
+                o.separator = utils.trimString(o.separator)
+
+                // 是否替换
+                if (o.replace) {
+                    val = val.replace(o.replace, o.separator)
+                }
+
+                // 分隔成数组
+                val = utils.split(val, o.separator)
+
+                // 如果去重
+                if (o.unique) {
+                    val = _.uniq(val)
+                }
+
+                // 如果验证每个值是否为有效字符串/数字
+                if (o.isValidValue) {
+                    val = val.filter(val => utils.isValidValue(val))
+                }
+
+                // 如果转数组
+                if (o.toArray) {
+                    // 则直接返回
+                    return val
+                }
+
+                // 返回分隔符隔开的字符串
+                return val.join(o.separator)
+            }
+
+            return o.toArray ? [ val ] : ''
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 当前值
+            currentValue,
+            // 触发更新值
+            emitValue,
+        }
+    }
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netang/quasar",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "description": "netang-quasar",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"