@netang/quasar 0.1.52 → 0.1.54

package/components/img/index.vue

@@ -134,7 +134,6 @@ export default {
          * 当前图片地址
          */
         const currentSrc = computed(function () {
-            console.log('---props.src', props.src)
             const res = $n_getImage(props.src, { w: props.width, zoom: true })
             if (res) {
                 return res

package/components/mixed-table/index.vue

@@ -10,6 +10,7 @@
         <!-- 头部 -->
         <n-toolbar
             :dense="dense"
+            :show="showToolbar"
             header
         >
             <!-- 插槽 -->
@@ -290,6 +291,8 @@ export default {
         hideRightDrawer: Boolean,
         // 右边侧滑菜单声明属性
         rightDrawerProps: Object,
+        // 是否强制显示工具栏
+        showToolbar: Boolean,
     },
 
     /**

package/components/toolbar/index.vue

@@ -1,6 +1,9 @@
 <template>
-    <container
-        :header="header"
+    <component
+        :is="header ? QHeader : QFooter"
+        class="n-toolbar"
+        :dark="$q.dark.isActive"
+        bordered
         v-if="show || toolbarPowerBtns.length"
     >
         <q-toolbar>
@@ -61,13 +64,15 @@
             />
 
         </q-toolbar>
-    </container>
+    </component>
 </template>
 
 <script>
 import { inject } from 'vue'
 
-import Container from './container'
+import QHeader from 'quasar/src/components/header/QHeader'
+import QFooter from 'quasar/src/components/footer/QFooter'
+
 import TableVisibleColumnsButton from '../private/table-visible-columns-button'
 
 import { NPowerKey, NTableKey } from '../../utils/symbols'
@@ -83,7 +88,6 @@ export default {
      * 容器
      */
     components: {
-        Container,
         TableVisibleColumnsButton,
     },
 
@@ -117,6 +121,9 @@ export default {
             ...$power,
             // 是否有表格
             hasTable: !! $table,
+
+            QHeader,
+            QFooter,
         }
     },
 }

package/components/tree/index.vue

@@ -1,11 +1,9 @@
 <template>
-    <q-virtual-scroll
+    <component
+        :is="isNVirtualScroll ? NVirtualScroll : QVirtualScroll"
         :class="classes"
         :items="currentChildren"
-        :virtual-scroll-slice-ratio-before="virtualScrollSliceRatioBefore"
-        :virtual-scroll-slice-ratio-after="virtualScrollSliceRatioAfter"
         :virtual-scroll-item-size="virtualScrollItemSize"
-        separator
         v-bind="virtualScrollProps"
         v-slot="{ item, index }"
     >
@@ -104,7 +102,7 @@
             />
 
         </div>
-    </q-virtual-scroll>
+    </component>
 </template>
 
 <script>
@@ -115,6 +113,9 @@ import {
 
 import { stopAndPrevent } from 'quasar/src/utils/event'
 
+import QVirtualScroll from 'quasar/src/components/virtual-scroll/QVirtualScroll'
+import NVirtualScroll from '../virtual-scroll'
+
 const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
 
 import $n_has from 'lodash/has'
@@ -208,16 +209,6 @@ export default {
         allowDrop: Function,
         // 是否多选
         multiple: Boolean,
-        // 可见区域中要在其之前渲染的行数的比率
-        virtualScrollSliceRatioBefore: {
-            type: [ Number, String ],
-            default: 1,
-        },
-        // 可见区域中要在其之后渲染的行数的比率
-        virtualScrollSliceRatioAfter: {
-            type: [ Number, String ],
-            default: 1,
-        },
         // 以像素为单位的默认行大小
         virtualScrollItemSize: {
             type: [ Number, String ],
@@ -225,6 +216,8 @@ export default {
         },
         // 虚拟滚动声明
         virtualScrollProps: Object,
+        // 是否为自定义虚拟滚动
+        isNVirtualScroll: Boolean,
 
         // 箭头大小
         arrowSize: {
@@ -1546,6 +1539,9 @@ export default {
             onDragEnter,
             onDragLeave,
             onDragEnd,
+
+            NVirtualScroll,
+            QVirtualScroll,
         }
     }
 }

package/components/tree/virtual-scroll.vue

@@ -0,0 +1,41 @@
+<template>
+    <!-- 如果为自定义虚拟滚动 -->
+    <virtual-scroll
+        v-bind="$attrs"
+        v-slot="props"
+        v-if="isNVirtualScroll"
+    >
+        <slot v-bind="props" />
+    </virtual-scroll>
+
+    <!-- 否则为 quasar 虚拟滚动 -->
+    <q-virtual-scroll
+        v-bind="$attrs"
+        v-slot="props"
+        v-else
+    >
+        <slot v-bind="props" />
+    </q-virtual-scroll>
+</template>
+
+<script>
+import VirtualScroll from '../virtual-scroll'
+
+export default {
+
+    /**
+     * 组件
+     */
+    components: {
+        VirtualScroll,
+    },
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 是否为自定义虚拟滚动
+        isNVirtualScroll: Boolean,
+    },
+}
+</script>

package/components/virtual-scroll/index.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="n-virtual-scroll">
+
+    </div>
+</template>
+
+<script>
+import { ref, computed, watch, nextTick, getCurrentInstance, onBeforeUpdate, onMounted, onUnmounted } from 'vue'
+
+import $n_has from 'lodash/has'
+import $n_get from 'lodash/get'
+import $n_isFunction from 'lodash/isFunction'
+import $n_findIndex from 'lodash/findIndex'
+
+import $n_isValidArray from '@netang/utils/isValidArray'
+import $n_indexOf from '@netang/utils/indexOf'
+import $n_on from '@netang/utils/on'
+import $n_off from '@netang/utils/off'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NVirtualScroll',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        virtualScrollSliceSize: {
+            type: [ Number, String ],
+            default: null
+        },
+
+        virtualScrollSliceRatioBefore: {
+            type: [ Number, String ],
+            default: 1
+        },
+
+        virtualScrollSliceRatioAfter: {
+            type: [ Number, String ],
+            default: 1
+        },
+
+        virtualScrollItemSize: {
+            type: [ Number, String ],
+            default: 24
+        },
+
+        virtualScrollStickySizeStart: {
+            type: [ Number, String ],
+            default: 0
+        },
+
+        virtualScrollStickySizeEnd: {
+            type: [ Number, String ],
+            default: 0
+        },
+
+        tableColspan: [ Number, String ],
+        virtualScrollHorizontal: Boolean,
+        onVirtualScroll: Function,
+        type: {
+            type: String,
+            default: 'list',
+            validator: v => typeOptions.includes(v)
+        },
+
+        items: {
+            type: Array,
+            default: () => []
+        },
+
+        itemsFn: Function,
+        itemsSize: Number,
+
+        scrollTarget: {
+            default: void 0
+        }
+    },
+
+    /**
+     * 组合式
+     */
+    setup (props, { slots, emit }) {
+
+        const { proxy } = getCurrentInstance()
+        const { $q } = proxy
+
+        // ==========【数据】============================================================================================
+
+
+        // ==========【方法】============================================================================================
+
+        /**
+         * 是否有默认插槽
+         */
+        const hasSlots = computed(function () {
+
+        })
+
+        // ==========【生命周期】=========================================================================================
+
+        /**
+         * 更新 DOM 之前调用
+         */
+        onBeforeUpdate(function () {
+
+        })
+
+        /**
+         * 实例被挂载后调用
+         */
+        onMounted(function() {
+
+        })
+
+        /**
+         * 实例被卸载后调用
+         */
+        onUnmounted(function () {
+
+        })
+
+        return {
+
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/sass/variables.scss";
+
+</style>

package/package.json

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

package/components/toolbar/container.vue

@@ -1,31 +0,0 @@
-<template>
-    <q-header
-        class="n-toolbar"
-        :dark="$q.dark.isActive"
-        bordered
-        v-if="header"
-    >
-        <slot />
-    </q-header>
-
-    <q-footer
-        class="n-toolbar"
-        :dark="$q.dark.isActive"
-        bordered
-        v-else
-    >
-        <slot />
-    </q-footer>
-</template>
-
-<script>
-export default {
-    /**
-     * 声明属性
-     */
-    props: {
-        // 是否头部
-        header: Boolean,
-    },
-}
-</script>