@netang/quasar 0.2.20 → 0.2.21

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-pagination/index.vue

@@ -1,192 +1,192 @@
-<template>
-    <div>
-        <!-- 页码 -->
-        <span class="q-table__bottom-item">{{props.pagination.page}} / {{props.pagesNumber}}</span>
-
-        <!-- 第一页 -->
-        <q-btn
-            v-if="props.pagesNumber > 2"
-            :class="{ dense }"
-            icon="first_page"
-            color="grey-8"
-            round
-            dense
-            flat
-            :disable="props.isFirstPage"
-            @click="props.firstPage"
-        />
-
-        <!-- 上页 -->
-        <q-btn
-            :class="{ dense }"
-            icon="chevron_left"
-            color="grey-8"
-            round
-            dense
-            flat
-            :disable="props.isFirstPage"
-            @click="props.prevPage"
-        />
-
-        <!-- 下页 -->
-        <q-btn
-            :class="{ dense }"
-            icon="chevron_right"
-            color="grey-8"
-            round
-            dense
-            flat
-            :disable="props.isLastPage"
-            @click="props.nextPage"
-        />
-
-        <!-- 最后一页 -->
-        <q-btn
-            :class="{ dense }"
-            v-if="props.pagesNumber > 2"
-            icon="last_page"
-            color="grey-8"
-            round
-            dense
-            flat
-            :disable="props.isLastPage"
-            @click="props.lastPage"
-        />
-
-        <!-- 刷新 -->
-        <q-btn
-            :class="{ dense }"
-            icon="refresh"
-            color="grey-8"
-            round
-            dense
-            flat
-            @click="tableRefresh"
-            v-if="! noRefresh && hasRefresh"
-        />
-
-        <!-- 当前页面工具栏无权限按钮时显示 -->
-        <template v-if="! noPower && ! toolbarPowerBtns.length">
-
-            <!-- 左边侧滑菜单切换按钮-->
-            <q-btn
-                :class="{ dense }"
-                :icon="leftDrawer.icon"
-                dense
-                round
-                flat
-                @click="leftDrawer.toggle"
-                v-if="leftDrawer.showButton()"
-            />
-
-            <!-- 表格筛选可见列按钮 -->
-            <table-visible-columns-button
-                :class="{ dense }"
-                v-if="hasTable"
-            />
-
-            <!-- 右边侧滑菜单切换按钮-->
-            <q-btn
-                :class="{ dense }"
-                :icon="rightDrawer.icon"
-                dense
-                round
-                flat
-                @click="rightDrawer.toggle"
-                v-if="rightDrawer.showButton()"
-            />
-
-        </template>
-
-    </div>
-</template>
-
-<script>
-import { inject } from 'vue'
-
-import TableVisibleColumnsButton from '../private/table-visible-columns-button'
-import { NPowerKey, NTableKey } from '../../utils/symbols'
-
-export default {
-
-    /**
-     * 标识
-     */
-    name: 'NTablePagination',
-
-    /**
-     * 容器
-     */
-    components: {
-        TableVisibleColumnsButton,
-    },
-
-    /**
-     * 声明属性
-     */
-    props: {
-        // 传值
-        props: Object,
-        // 是否关闭权限
-        noPower: Boolean,
-        // 是否关闭刷新按钮
-        noRefresh: Boolean,
-        // 紧凑模式
-        dense: Boolean,
-    },
-
-    /**
-     * 组合式
-     */
-    setup() {
-
-        // ==========【数据】============================================================================================
-
-        // 获取权限注入
-        const $power = inject(NPowerKey)
-        const {
-            // 左边侧滑菜单数据
-            leftDrawer,
-            // 右边侧滑菜单数据
-            rightDrawer,
-            // 当前页面工具栏权限按钮
-            toolbarPowerBtns,
-        } = $power
-
-        // 获取表格注入
-        const $table = inject(NTableKey)
-        const hasTable = !! $table
-
-        const {
-            // 表格刷新
-            tableRefresh,
-        } = $table
-
-        // ==========【返回】=============================================================================================
-
-
-        return {
-            // 是否有表格
-            hasTable,
-            // 是否有刷新按钮
-            hasRefresh: hasTable && !! $table.routeFullPath,
-            // 表格刷新
-            tableRefresh,
-            // 当前页面工具栏权限按钮
-            toolbarPowerBtns,
-            // 左边侧滑菜单数据
-            leftDrawer,
-            // 右边侧滑菜单数据
-            rightDrawer,
-        }
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-
-// 紧凑模式
-.dense {
-    font-size: 12px;
-}
-</style>
+<template>
+    <div>
+        <!-- 页码 -->
+        <span class="q-table__bottom-item">{{props.pagination.page}} / {{props.pagesNumber}}</span>
+
+        <!-- 第一页 -->
+        <q-btn
+            v-if="props.pagesNumber > 2"
+            :class="{ dense }"
+            icon="first_page"
+            color="grey-8"
+            round
+            dense
+            flat
+            :disable="props.isFirstPage"
+            @click="props.firstPage"
+        />
+
+        <!-- 上页 -->
+        <q-btn
+            :class="{ dense }"
+            icon="chevron_left"
+            color="grey-8"
+            round
+            dense
+            flat
+            :disable="props.isFirstPage"
+            @click="props.prevPage"
+        />
+
+        <!-- 下页 -->
+        <q-btn
+            :class="{ dense }"
+            icon="chevron_right"
+            color="grey-8"
+            round
+            dense
+            flat
+            :disable="props.isLastPage"
+            @click="props.nextPage"
+        />
+
+        <!-- 最后一页 -->
+        <q-btn
+            :class="{ dense }"
+            v-if="props.pagesNumber > 2"
+            icon="last_page"
+            color="grey-8"
+            round
+            dense
+            flat
+            :disable="props.isLastPage"
+            @click="props.lastPage"
+        />
+
+        <!-- 刷新 -->
+        <q-btn
+            :class="{ dense }"
+            icon="refresh"
+            color="grey-8"
+            round
+            dense
+            flat
+            @click="tableRefresh"
+            v-if="! noRefresh && hasRefresh"
+        />
+
+        <!-- 当前页面工具栏无权限按钮时显示 -->
+        <template v-if="! noPower && ! toolbarPowerBtns.length">
+
+            <!-- 左边侧滑菜单切换按钮-->
+            <q-btn
+                :class="{ dense }"
+                :icon="leftDrawer.icon"
+                dense
+                round
+                flat
+                @click="leftDrawer.toggle"
+                v-if="leftDrawer.showButton()"
+            />
+
+            <!-- 表格筛选可见列按钮 -->
+            <table-visible-columns-button
+                :class="{ dense }"
+                v-if="hasTable"
+            />
+
+            <!-- 右边侧滑菜单切换按钮-->
+            <q-btn
+                :class="{ dense }"
+                :icon="rightDrawer.icon"
+                dense
+                round
+                flat
+                @click="rightDrawer.toggle"
+                v-if="rightDrawer.showButton()"
+            />
+
+        </template>
+
+    </div>
+</template>
+
+<script>
+import { inject } from 'vue'
+
+import TableVisibleColumnsButton from '../private/table-visible-columns-button'
+import { NPowerKey, NTableKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NTablePagination',
+
+    /**
+     * 容器
+     */
+    components: {
+        TableVisibleColumnsButton,
+    },
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 传值
+        props: Object,
+        // 是否关闭权限
+        noPower: Boolean,
+        // 是否关闭刷新按钮
+        noRefresh: Boolean,
+        // 紧凑模式
+        dense: Boolean,
+    },
+
+    /**
+     * 组合式
+     */
+    setup() {
+
+        // ==========【数据】============================================================================================
+
+        // 获取权限注入
+        const $power = inject(NPowerKey)
+        const {
+            // 左边侧滑菜单数据
+            leftDrawer,
+            // 右边侧滑菜单数据
+            rightDrawer,
+            // 当前页面工具栏权限按钮
+            toolbarPowerBtns,
+        } = $power
+
+        // 获取表格注入
+        const $table = inject(NTableKey)
+        const hasTable = !! $table
+
+        const {
+            // 表格刷新
+            tableRefresh,
+        } = $table
+
+        // ==========【返回】=============================================================================================
+
+
+        return {
+            // 是否有表格
+            hasTable,
+            // 是否有刷新按钮
+            hasRefresh: hasTable && !! $table.routeFullPath,
+            // 表格刷新
+            tableRefresh,
+            // 当前页面工具栏权限按钮
+            toolbarPowerBtns,
+            // 左边侧滑菜单数据
+            leftDrawer,
+            // 右边侧滑菜单数据
+            rightDrawer,
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+
+// 紧凑模式
+.dense {
+    font-size: 12px;
+}
+</style>