@netang/quasar 0.0.35 → 0.0.37

package/components/column-title/index.vue

@@ -8,6 +8,9 @@
             <!-- 提示信息 -->
             <q-tooltip anchor="center right" self="center left" v-if="tooltip">{{tooltip}}</q-tooltip>
         </q-badge>
+
+        <!-- 插槽 -->
+        <slot />
     </div>
 </template>
 

package/components/data/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <slot :data="data" />
+</template>
+
+<script>
+export default {
+    /**
+     * 标识
+     */
+    name: 'NData',
+
+    /**
+     * 传参
+     */
+    props: {
+        // 数据
+        data: {},
+    },
+}
+</script>
+
+<style>
+</style>

package/components/field-table/index.vue

@@ -3,6 +3,7 @@
     <q-field
         class="n-field-table"
         :model-value="showValue"
+        :disable="disable"
         :readonly="readonly"
         :clearable="clearable && (! multiple || collapseTags)"
         @focus="onFieldFocus"
@@ -37,7 +38,7 @@
                             :key="`options-${index}`"
                             :label="currentFormatLabel(item)"
                             dense
-                            removable
+                            :removable="! readonly && ! disable"
                             @remove="onRemoveSelected(index)"
                         />
                     </template>
@@ -58,13 +59,13 @@
                 ref="inputRef"
                 class="q-field__input q-placeholder col q-field__input--padding"
                 v-model="inputValue"
-                v-if="filter"
+                v-if="filter && ! readonly && ! disable"
             />
 
         </template>
 
         <!-- 弹出对话框图标 -->
-        <template v-slot:append v-if="! noDialog">
+        <template v-slot:append v-if="! noDialog && ! readonly && ! disable">
             <q-icon
                 class="cursor-pointer"
                 name="search"
@@ -222,6 +223,8 @@ export default {
         placeholder: String,
         // 是否可清除
         clearable: Boolean,
+        // 是否禁用
+        disable: Boolean,
         // 是否只读
         readonly: Boolean,
         // 输入防抖(毫秒)

package/components/input-format/index.vue

@@ -32,8 +32,12 @@ export default {
         modelValue: {
             required: false,
         },
-        // 格式化值
-        format: [Function, String],
+        // 值是否为数组
+        valueArray: Boolean,
+        // 修改前值
+        formatBefore: [Function, Object, Boolean],
+        // 修改后值
+        formatAfter: [Function, Object, Boolean],
     },
 
     /**
@@ -61,7 +65,7 @@ export default {
         // ==========【数据】============================================================================================
 
         // 当前值
-        const currentValue = ref(props.modelValue)
+        const currentValue = ref(formatModelValue(props.modelValue))
 
         // ==========【监听数据】=========================================================================================
 
@@ -69,11 +73,148 @@ export default {
          * 监听声明值
          */
         watch(()=>props.modelValue, function (val) {
-            currentValue.value = val
+
+            // 格式化声明值
+            currentValue.value = formatModelValue(val)
+        }, {
+            // 深度监听
+            deep: true,
         })
 
         // ==========【方法】=============================================================================================
 
+        /**
+         * 格式化声明值
+         */
+        function formatModelValue(val) {
+
+            if (props.formatBefore) {
+
+                // 如果是方法
+                if (_.isFunction(props.formatBefore)) {
+                    return props.formatBefore(val)
+                }
+
+                // 如果是参数
+                if (props.formatBefore === true || utils.isValidObject(props.formatBefore)) {
+
+                    // 如果值是数组
+                    if (Array.isArray(val)) {
+
+                        // 格式化数组值
+                        return formatArrayValue(val, props.formatBefore === true ? {} : props.formatBefore)
+                    }
+
+                    // 如果是有效值
+                    if (utils.isValidValue(val)) {
+
+                        // 格式化字符串值
+                        return formatStringValue(val, props.formatBefore === true ? {} : props.formatBefore, false)
+                    }
+
+                    return ''
+                }
+            }
+
+            return val
+        }
+
+        /**
+         * 格式化数组值
+         */
+        function formatArrayValue(val, params) {
+
+            // 如果数组有值
+            if (val.length) {
+
+                const o = Object.assign({
+                    // 是否去重
+                    unique: true,
+                    // 分隔符
+                    separator: ',',
+                    // 是否给每个值去除首位空格
+                    trim: true,
+                    // 验证每个值是否为有效字符串/数字
+                    isValidValue: true,
+                }, params)
+
+                // 是否给每个值去除首位空格
+                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)
+                }
+
+                // 合并为字符串
+                return val.join(o.separator)
+            }
+
+            return ''
+        }
+
+        /**
+         * 格式化字符串值
+         */
+        function formatStringValue(val, params, valueArray) {
+
+            console.log(val, params, valueArray)
+
+            const o = Object.assign({
+                // 替换内容
+                replace: /\n|\，|\s+/g,
+                // 是否去重
+                unique: true,
+                // 分隔符
+                separator: ',',
+                // 验证每个值是否为有效字符串/数字
+                isValidValue: true,
+            }, params)
+
+            // 去除首位空格
+            val = utils.trimString(val)
+
+            // 如果有分割符
+            if (utils.isValidValue(o.separator, true)) {
+
+                o.separator = String(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 (! valueArray) {
+                    val = val.join(o.separator)
+                }
+
+                return val
+            }
+
+            return valueArray ? [ val ] : ''
+        }
+
         /**
          * 失去焦点触发
          */
@@ -81,11 +222,19 @@ export default {
 
             let val = currentValue.value
 
-            if (
-                props.format
-                && _.isFunction(props.format)
-            ) {
-                val = props.format(val)
+            // 如果修改值
+            if (props.formatAfter) {
+
+                // 如果是方法
+                if (_.isFunction(props.formatAfter)) {
+                    val = props.formatAfter(val)
+
+                // 如果是参数
+                } else if (props.formatAfter === true || utils.isValidObject(props.formatAfter)) {
+
+                    // 格式化字符串值
+                    val = formatStringValue(val, props.formatAfter === true ? {} : props.formatAfter, props.valueArray)
+                }
             }
 
             // 更新值

package/package.json

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

package/sass/var.scss

@@ -0,0 +1,141 @@
+// ==========【quasar 重定义】=====================================================================================================
+
+$primary   : #4380fa;
+$secondary : #19be6b;
+$accent    : #9C27B0;
+
+$dark      : #27282e;
+$dark-page : #1b1c21;
+
+$positive  : #19be6b;
+$negative  : #ff3750;
+$info      : #2db7f5;
+$warning   : #ff9900;
+
+//$shadow-color         : #000000 !default;
+//$elevation-umbra      : rgba($shadow-color, 0.1) !default;
+//$elevation-penumbra   : rgba($shadow-color, 0.1) !default;
+//$elevation-ambient    : rgba($shadow-color, 0.1) !default;
+
+// 按钮紧凑内边距
+$button-dense-padding: 0.285em 16px !important;
+
+// ==========【自定义】=====================================================================================================
+
+$color-gray-dark: $dark-page;
+$color-gray-white: #ffffff;
+
+$color-gray-99: mix($color-gray-dark, $color-gray-white, 99%);
+$color-gray-98: mix($color-gray-dark, $color-gray-white, 98%);
+$color-gray-97: mix($color-gray-dark, $color-gray-white, 97%);
+$color-gray-96: mix($color-gray-dark, $color-gray-white, 96%);
+$color-gray-95: mix($color-gray-dark, $color-gray-white, 95%);
+$color-gray-94: mix($color-gray-dark, $color-gray-white, 94%);
+$color-gray-93: mix($color-gray-dark, $color-gray-white, 93%);
+$color-gray-92: mix($color-gray-dark, $color-gray-white, 92%);
+$color-gray-91: mix($color-gray-dark, $color-gray-white, 91%);
+$color-gray-90: mix($color-gray-dark, $color-gray-white, 90%);
+$color-gray-89: mix($color-gray-dark, $color-gray-white, 89%);
+$color-gray-88: mix($color-gray-dark, $color-gray-white, 88%);
+$color-gray-87: mix($color-gray-dark, $color-gray-white, 87%);
+$color-gray-86: mix($color-gray-dark, $color-gray-white, 86%);
+$color-gray-85: mix($color-gray-dark, $color-gray-white, 85%);
+$color-gray-84: mix($color-gray-dark, $color-gray-white, 84%);
+$color-gray-83: mix($color-gray-dark, $color-gray-white, 83%);
+$color-gray-82: mix($color-gray-dark, $color-gray-white, 82%);
+$color-gray-81: mix($color-gray-dark, $color-gray-white, 81%);
+$color-gray-80: mix($color-gray-dark, $color-gray-white, 80%);
+$color-gray-79: mix($color-gray-dark, $color-gray-white, 79%);
+$color-gray-78: mix($color-gray-dark, $color-gray-white, 78%);
+$color-gray-77: mix($color-gray-dark, $color-gray-white, 77%);
+$color-gray-76: mix($color-gray-dark, $color-gray-white, 76%);
+$color-gray-75: mix($color-gray-dark, $color-gray-white, 75%);
+$color-gray-74: mix($color-gray-dark, $color-gray-white, 74%);
+$color-gray-73: mix($color-gray-dark, $color-gray-white, 73%);
+$color-gray-72: mix($color-gray-dark, $color-gray-white, 72%);
+$color-gray-71: mix($color-gray-dark, $color-gray-white, 71%);
+$color-gray-70: mix($color-gray-dark, $color-gray-white, 70%);
+$color-gray-69: mix($color-gray-dark, $color-gray-white, 69%);
+$color-gray-68: mix($color-gray-dark, $color-gray-white, 68%);
+$color-gray-67: mix($color-gray-dark, $color-gray-white, 67%);
+$color-gray-66: mix($color-gray-dark, $color-gray-white, 66%);
+$color-gray-65: mix($color-gray-dark, $color-gray-white, 65%);
+$color-gray-64: mix($color-gray-dark, $color-gray-white, 64%);
+$color-gray-63: mix($color-gray-dark, $color-gray-white, 63%);
+$color-gray-62: mix($color-gray-dark, $color-gray-white, 62%);
+$color-gray-61: mix($color-gray-dark, $color-gray-white, 61%);
+$color-gray-60: mix($color-gray-dark, $color-gray-white, 60%);
+$color-gray-59: mix($color-gray-dark, $color-gray-white, 59%);
+$color-gray-58: mix($color-gray-dark, $color-gray-white, 58%);
+$color-gray-57: mix($color-gray-dark, $color-gray-white, 57%);
+$color-gray-56: mix($color-gray-dark, $color-gray-white, 56%);
+$color-gray-55: mix($color-gray-dark, $color-gray-white, 55%);
+$color-gray-54: mix($color-gray-dark, $color-gray-white, 54%);
+$color-gray-53: mix($color-gray-dark, $color-gray-white, 53%);
+$color-gray-52: mix($color-gray-dark, $color-gray-white, 52%);
+$color-gray-51: mix($color-gray-dark, $color-gray-white, 51%);
+$color-gray-50: mix($color-gray-dark, $color-gray-white, 50%);
+$color-gray-49: mix($color-gray-dark, $color-gray-white, 49%);
+$color-gray-48: mix($color-gray-dark, $color-gray-white, 48%);
+$color-gray-47: mix($color-gray-dark, $color-gray-white, 47%);
+$color-gray-46: mix($color-gray-dark, $color-gray-white, 46%);
+$color-gray-45: mix($color-gray-dark, $color-gray-white, 45%);
+$color-gray-44: mix($color-gray-dark, $color-gray-white, 44%);
+$color-gray-43: mix($color-gray-dark, $color-gray-white, 43%);
+$color-gray-42: mix($color-gray-dark, $color-gray-white, 42%);
+$color-gray-41: mix($color-gray-dark, $color-gray-white, 41%);
+$color-gray-40: mix($color-gray-dark, $color-gray-white, 40%);
+$color-gray-39: mix($color-gray-dark, $color-gray-white, 39%);
+$color-gray-38: mix($color-gray-dark, $color-gray-white, 38%);
+$color-gray-37: mix($color-gray-dark, $color-gray-white, 37%);
+$color-gray-36: mix($color-gray-dark, $color-gray-white, 36%);
+$color-gray-35: mix($color-gray-dark, $color-gray-white, 35%);
+$color-gray-34: mix($color-gray-dark, $color-gray-white, 34%);
+$color-gray-33: mix($color-gray-dark, $color-gray-white, 33%);
+$color-gray-32: mix($color-gray-dark, $color-gray-white, 32%);
+$color-gray-31: mix($color-gray-dark, $color-gray-white, 31%);
+$color-gray-30: mix($color-gray-dark, $color-gray-white, 30%);
+$color-gray-29: mix($color-gray-dark, $color-gray-white, 29%);
+$color-gray-28: mix($color-gray-dark, $color-gray-white, 28%);
+$color-gray-27: mix($color-gray-dark, $color-gray-white, 27%);
+$color-gray-26: mix($color-gray-dark, $color-gray-white, 26%);
+$color-gray-25: mix($color-gray-dark, $color-gray-white, 25%);
+$color-gray-24: mix($color-gray-dark, $color-gray-white, 24%);
+$color-gray-23: mix($color-gray-dark, $color-gray-white, 23%);
+$color-gray-22: mix($color-gray-dark, $color-gray-white, 22%);
+$color-gray-21: mix($color-gray-dark, $color-gray-white, 21%);
+$color-gray-20: mix($color-gray-dark, $color-gray-white, 20%);
+$color-gray-16: mix($color-gray-dark, $color-gray-white, 16%);
+$color-gray-19: mix($color-gray-dark, $color-gray-white, 19%);
+$color-gray-18: mix($color-gray-dark, $color-gray-white, 18%);
+$color-gray-17: mix($color-gray-dark, $color-gray-white, 17%);
+$color-gray-16: mix($color-gray-dark, $color-gray-white, 16%);
+$color-gray-15: mix($color-gray-dark, $color-gray-white, 15%);
+$color-gray-14: mix($color-gray-dark, $color-gray-white, 14%);
+$color-gray-13: mix($color-gray-dark, $color-gray-white, 13%);
+$color-gray-12: mix($color-gray-dark, $color-gray-white, 12%);
+$color-gray-11: mix($color-gray-dark, $color-gray-white, 11%);
+$color-gray-10: mix($color-gray-dark, $color-gray-white, 10%);
+$color-gray-9: mix($color-gray-dark, $color-gray-white, 9%);
+$color-gray-8: mix($color-gray-dark, $color-gray-white, 8%);
+$color-gray-7: mix($color-gray-dark, $color-gray-white, 7%);
+$color-gray-6: mix($color-gray-dark, $color-gray-white, 6%);
+$color-gray-5: mix($color-gray-dark, $color-gray-white, 5%);
+$color-gray-4: mix($color-gray-dark, $color-gray-white, 4%);
+$color-gray-3: mix($color-gray-dark, $color-gray-white, 3%);
+$color-gray-2: mix($color-gray-dark, $color-gray-white, 2%);
+$color-gray-1: mix($color-gray-dark, $color-gray-white, 1%);
+
+$color-ccc: #cccccc;
+$color-999: #999999;
+$color-888: #888888;
+$color-777: #777777;
+$color-666: #666666;
+$color-555: #555555;
+$color-444: #444444;
+$color-333: #333333;
+$color-222: #222222;
+$color-111: #111111;
+$color-000: $color-gray-dark;
+
+@import "~quasar/src/css/variables.sass";

package/utils/price.js

@@ -1,13 +1,13 @@
-/**
- * 换算金额
- */
-utils.price = function(value, params) {
-    return utils.decimal(value, Object.assign({
-        // 最小值
-        min: 0,
-        // 小数点位数
-        decimalLength: 2,
-        // 是否开启人民币分转元(如值 189 -> 1.89)
-        centToYuan: utils.config('priceCent') === true,
-    }, params))
-}
+/**
+ * 换算金额
+ */
+utils.price = function(value, params) {
+    return utils.decimal(value, Object.assign({
+        // 最小值
+        min: 0,
+        // 小数点位数
+        decimalLength: 2,
+        // 是否开启人民币分转元(如值 189 -> 1.89)
+        centToYuan: utils.config('priceCent') === true,
+    }, params))
+}