@netang/quasar 0.1.35 → 0.1.37

package/components/table-column-fixed/index.vue

@@ -1,110 +1,110 @@
-<template>
-    <div class="q-gutter-sm" v-if="currentTableFixedPowerBtns.length">
-        <q-btn
-            v-for="item in currentTableFixedPowerBtns"
-            :key="`btn-item-${item.id}`"
-            class="n-button-icon"
-            :icon="item.icon"
-            dense
-            unelevated
-            round
-            @click.prevent.stop="onClick(item)"
-        >
-            <!-- 标题提示 -->
-            <q-tooltip>{{item.title}}</q-tooltip>
-        </q-btn>
-    </div>
-</template>
-
-<script>
-import { inject, computed } from 'vue'
-
-import $n_cloneDeep from 'lodash/cloneDeep'
-import $n_isFunction from 'lodash/isFunction'
-
-import $n_forEach from '@netang/utils/forEach'
-
-import { NPowerKey, NTableKey } from '../../utils/symbols'
-
-export default {
-
-    /**
-     * 标识
-     */
-    name: 'NTableColumnFixed',
-
-    /**
-     * 声明属性
-     */
-    props: {
-        // 传值
-        props: Object,
-    },
-
-    /**
-     * 组合式
-     */
-    setup(props) {
-
-        // ==========【数据】============================================================================================
-
-        // 获取权限注入
-        const {
-            // 权限按钮点击
-            powerBtnClick,
-            // 格式化权限按钮
-            formatPowerBtns,
-        } = inject(NPowerKey)
-
-        // 获取表格注入
-        const {
-            // 固定在右边的权限按钮列表
-            tableFixedPowerBtns,
-        } = inject(NTableKey)
-
-        // ==========【计算属性】=========================================================================================
-
-        /**
-         * 当前表格固定权限按钮
-         */
-        const currentTableFixedPowerBtns = computed(function () {
-
-            const lists = []
-
-            $n_forEach(tableFixedPowerBtns.value, function (item) {
-
-                item = $n_cloneDeep(item)
-
-                // 格式化权限按钮
-                if (formatPowerBtns(item, true, [ props.props.row ]) === false || item.hidden === true) {
-                    return
-                }
-
-                lists.push(item)
-            })
-
-            return lists
-        })
-
-        // ==========【方法】=============================================================================================
-
-        /**
-         * 点击
-         */
-        function onClick(item) {
-            powerBtnClick(item, [ props.props.row ])
-        }
-
-        // ==========【返回】=============================================================================================
-
-        return {
-            // 固定在右边的权限按钮列表
-            tableFixedPowerBtns,
-            // 当前表格固定权限按钮
-            currentTableFixedPowerBtns: $n_isFunction(formatPowerBtns) ? currentTableFixedPowerBtns : tableFixedPowerBtns,
-            // 权限按钮点击
-            onClick,
-        }
-    },
-}
-</script>
+<template>
+    <div class="q-gutter-sm" v-if="currentTableFixedPowerBtns.length">
+        <q-btn
+            v-for="item in currentTableFixedPowerBtns"
+            :key="`btn-item-${item.id}`"
+            class="n-button-icon"
+            :icon="item.icon"
+            dense
+            unelevated
+            round
+            @click.prevent.stop="onClick(item)"
+        >
+            <!-- 标题提示 -->
+            <q-tooltip>{{item.title}}</q-tooltip>
+        </q-btn>
+    </div>
+</template>
+
+<script>
+import { inject, computed } from 'vue'
+
+import $n_cloneDeep from 'lodash/cloneDeep'
+import $n_isFunction from 'lodash/isFunction'
+
+import $n_forEach from '@netang/utils/forEach'
+
+import { NPowerKey, NTableKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NTableColumnFixed',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 传值
+        props: Object,
+    },
+
+    /**
+     * 组合式
+     */
+    setup(props) {
+
+        // ==========【数据】============================================================================================
+
+        // 获取权限注入
+        const {
+            // 权限按钮点击
+            powerBtnClick,
+            // 格式化权限按钮
+            formatPowerBtns,
+        } = inject(NPowerKey)
+
+        // 获取表格注入
+        const {
+            // 固定在右边的权限按钮列表
+            tableFixedPowerBtns,
+        } = inject(NTableKey)
+
+        // ==========【计算属性】=========================================================================================
+
+        /**
+         * 当前表格固定权限按钮
+         */
+        const currentTableFixedPowerBtns = computed(function () {
+
+            const lists = []
+
+            $n_forEach(tableFixedPowerBtns.value, function (item) {
+
+                item = $n_cloneDeep(item)
+
+                // 格式化权限按钮
+                if (formatPowerBtns(item, true, [ props.props.row ]) === false || item.hidden === true) {
+                    return
+                }
+
+                lists.push(item)
+            })
+
+            return lists
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 点击
+         */
+        function onClick(item) {
+            powerBtnClick(item, [ props.props.row ])
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 固定在右边的权限按钮列表
+            tableFixedPowerBtns,
+            // 当前表格固定权限按钮
+            currentTableFixedPowerBtns: $n_isFunction(formatPowerBtns) ? currentTableFixedPowerBtns : tableFixedPowerBtns,
+            // 权限按钮点击
+            onClick,
+        }
+    },
+}
+</script>

package/components/table-summary/index.vue

@@ -1,107 +1,107 @@
-<template>
-    <q-tr class="q-table__bottom">
-        <q-td
-            v-for="(item, index) in columns"
-            :class="item.css"
-        >
-            <!-- 合计标题 -->
-            <span v-if="index === 0">合计</span>
-
-            <!-- 合计数据 -->
-            <span v-else-if="item.value">{{item.value}}</span>
-        </q-td>
-    </q-tr>
-</template>
-
-<script>
-import { computed, inject } from 'vue'
-
-import $n_has from 'lodash/has'
-import $n_get from 'lodash/get'
-
-import $n_forEach from '@netang/utils/forEach'
-
-import $n_price from '../../utils/price'
-
-import { NTableKey } from '../../utils/symbols'
-
-export default {
-
-    /**
-     * 标识
-     */
-    name: 'NTableSummary',
-
-    /**
-     * 声明属性
-     */
-    props: {
-        // 传值
-        props: Object,
-    },
-
-    /**
-     * 组合式
-     */
-    setup(props) {
-
-        // ==========【数据】============================================================================================
-
-        // 获取表格注入
-        const {
-            // 表格选择类型
-            tableSelection,
-            tableSummary,
-        } = inject(NTableKey)
-
-        // ==========【计算属性】============================================================================================
-
-        const columns = computed(function () {
-
-            const lists = []
-
-            if (tableSelection.value !== 'none') {
-                lists.push({
-                    css: 'q-table--col-auto-width text-center',
-                    name: '',
-                })
-            }
-
-            $n_forEach($n_get(props.props, 'cols'), function(item) {
-
-                const {
-                    // 标识
-                    name,
-                    // 对齐方式
-                    align,
-                } = item
-
-                const res = {
-                    css: `text-${align}`,
-                    name,
-                    value: '',
-                }
-
-                // 如果有统计字段
-                if ($n_has(tableSummary.value, name)) {
-                    // 判断是否是价格
-                    res.value = $n_has(item, 'price') ? $n_price(tableSummary.value[name]) : tableSummary.value[name]
-                }
-
-                lists.push(res)
-            })
-
-            return lists
-        })
-
-        // ==========【返回】=============================================================================================
-
-        return {
-            // 栏目
-            columns,
-            // 表格选择类型
-            tableSelection,
-        }
-    },
-}
-</script>
+<template>
+    <q-tr class="q-table__bottom">
+        <q-td
+            v-for="(item, index) in columns"
+            :class="item.css"
+        >
+            <!-- 合计标题 -->
+            <span v-if="index === 0">合计</span>
+
+            <!-- 合计数据 -->
+            <span v-else-if="item.value">{{item.value}}</span>
+        </q-td>
+    </q-tr>
+</template>
+
+<script>
+import { computed, inject } from 'vue'
+
+import $n_has from 'lodash/has'
+import $n_get from 'lodash/get'
+
+import $n_forEach from '@netang/utils/forEach'
+
+import $n_price from '../../utils/price'
+
+import { NTableKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NTableSummary',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 传值
+        props: Object,
+    },
+
+    /**
+     * 组合式
+     */
+    setup(props) {
+
+        // ==========【数据】============================================================================================
+
+        // 获取表格注入
+        const {
+            // 表格选择类型
+            tableSelection,
+            tableSummary,
+        } = inject(NTableKey)
+
+        // ==========【计算属性】============================================================================================
+
+        const columns = computed(function () {
+
+            const lists = []
+
+            if (tableSelection.value !== 'none') {
+                lists.push({
+                    css: 'q-table--col-auto-width text-center',
+                    name: '',
+                })
+            }
+
+            $n_forEach($n_get(props.props, 'cols'), function(item) {
+
+                const {
+                    // 标识
+                    name,
+                    // 对齐方式
+                    align,
+                } = item
+
+                const res = {
+                    css: `text-${align}`,
+                    name,
+                    value: '',
+                }
+
+                // 如果有统计字段
+                if ($n_has(tableSummary.value, name)) {
+                    // 判断是否是价格
+                    res.value = $n_has(item, 'price') ? $n_price(tableSummary.value[name]) : tableSummary.value[name]
+                }
+
+                lists.push(res)
+            })
+
+            return lists
+        })
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 栏目
+            columns,
+            // 表格选择类型
+            tableSelection,
+        }
+    },
+}
+</script>

package/components/tree/index.vue

@@ -12,7 +12,6 @@
         <div
             :class="item.classes"
             :key="item.key"
-            :style="{ paddingLeft: (item.level * arrowSize) + 'px' }"
             @mousedown.self="onMouseDown($event, item)"
             @mouseup="onDragEnd"
             @dragstart.stop="onDragStart($event, item)"
@@ -24,31 +23,40 @@
         >
             <div class="q-focus-helper" @click="onClick(item.node, item.m, $event)"></div>
 
-            <!-- 旋转器 -->
-            <q-spinner
-                class="q-tree__spinner q-ml-sm"
-                :color="computedControlColor"
-                v-if="item.m.lazy === 'loading'"
-            />
-
-            <!-- 箭头 -->
-            <q-icon
-                class="q-tree__arrow q-ml-sm"
-                :name="computedIcon"
-                :class="`${item.m.expanded ? 'q-tree__arrow--rotate' : ''}`"
-                :size="arrowSize + 'px'"
-                @click="onExpandClick(item.node, item.m, $event)"
-                v-bind="iconProps"
-                v-if="item.isParent === true"
-            />
+            <!-- 前置容器 -->
             <div
-                class="n-tree__arrow--noop q-ml-sm"
-                :style="{
-                    width: arrowSize + 'px',
-                    height: arrowSize + 'px',
-                }"
-                v-else
-            ></div>
+                class="n-tree__node__prepend"
+                :style="{ paddingLeft: (item.level * arrowSize) + 'px' }"
+                @click="onNode(item, $event)"
+            >
+                <!-- 旋转器 -->
+                <q-spinner
+                    class="q-tree__spinner q-ml-sm"
+                    :color="computedControlColor"
+                    v-if="item.m.lazy === 'loading'"
+                />
+
+                <!-- 箭头图标 -->
+                <q-icon
+                    class="q-tree__arrow q-ml-sm"
+                    :name="computedIcon"
+                    :class="`${item.m.expanded ? 'q-tree__arrow--rotate' : ''}`"
+                    :size="arrowSize + 'px'"
+                    v-bind="iconProps"
+                    v-else-if="item.isParent === true"
+                />
+
+                <!-- 空白占位符 -->
+                <div
+                    class="n-tree__arrow--noop q-ml-sm"
+                    :style="{
+                        width: arrowSize + 'px',
+                        height: arrowSize + 'px',
+                    }"
+                    v-else
+                ></div>
+
+            </div>
 
             <!-- 复选框-->
             <q-checkbox
@@ -1061,6 +1069,20 @@ export default {
             return $n_has(slots, 'default-header')
         })
 
+        /**
+         * 点击节点
+         */
+        function onNode(item, $event) {
+            if (
+                item.m.lazy !== 'loading'
+                && item.isParent === true
+            ) {
+                onExpandClick(item.node, item.m, $event)
+            } else {
+                onClick(item.node, item.m, $event)
+            }
+        }
+
         /**
          * 获取节点
          */
@@ -1090,7 +1112,7 @@ export default {
                 const dragCss = $n_get(dragClasses.value, key)
 
                 // 当前节点类名
-                const classes = 'n-tree__node relative-position row no-wrap items-center q-tree__node--link q-hoverable'
+                const classes = 'n-tree__node relative-position row no-wrap q-tree__node--link q-hoverable'
                         // + (m.link === true ? ' q-tree__node--link q-hoverable q-focusable' : '')
                         + (m.selected === true || props.multiple && m.ticked === true ? ' n-tree__node--selected' : '')
                         + (m.disabled === true ? ' q-tree__node--disabled' : '')
@@ -1489,6 +1511,7 @@ export default {
             hasSlotDefault,
             currentChildren,
 
+            onNode,
             onMouseDown,
             onDragStart,
             onDragEnter,
@@ -1512,10 +1535,21 @@ export default {
         margin-right: 4px;
     }
 
+    // 树节点
     &__node {
         margin: 4px;
         border-radius: 4px;
         //transition: all .3s;
+        //background-color: green;
+
+        // 前置容器
+        &__prepend {
+            position: relative;
+            //height: 100% !important;
+            display: flex;
+            align-items: center;
+            //background-color: red;
+        }
 
         // 已选
         &--selected:not(.drag-over--inner) {
@@ -1599,6 +1633,7 @@ export default {
                     width: 8px;
                     height: 8px;
                     border: 2px solid var(--q-primary);
+                    pointer-events: none;
                 }
             }
 
@@ -1616,8 +1651,6 @@ export default {
             align-items: center;
             padding: 4px 5px;
             margin-left: -5px;
-            //border-top: 2px transparent solid;
-            //border-bottom: 2px transparent solid;
             color: #000000;
 
             &:after {
@@ -1629,6 +1662,7 @@ export default {
                 right: 0;
                 border-top: 2px transparent solid;
                 border-bottom: 2px transparent solid;
+                pointer-events: none;
             }
         }
     }