vueuc - npm Package Compare versions

Comparing version 0.1.0-alpha.0 to 0.1.0-alpha.1

es/virtual-list/src/type.d.ts

@@ -1,4 +0,4 @@
-export declare type ItemData = {
+export interface ItemData {
     key: string | number;
     [rest: string]: any;
-};
+}

es/virtual-list/src/VirtualList.d.ts

 import { PropType } from 'vue';
 import { ItemData } from './type';
 declare const _default: import("vue").DefineComponent<{
+    showScrollbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     items: {
@@ -15,6 +19,9 @@ type: PropType<ItemData[]>;
     scrollTop: import("vue").Ref<number>;
-    itemsWrapperStyle: import("vue").ComputedRef<{
+    listStyle: import("vue").ComputedRef<{
+        overflow: string;
+    }>;
+    itemsStyle: import("vue").ComputedRef<{
         height: string;
     }>;
-    itemsViewportStyle: import("vue").ComputedRef<{
+    visibleItemsStyle: import("vue").ComputedRef<{
         transform: string;
@@ -32,7 +39,9 @@ }>;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    showScrollbar: boolean;
     items: ItemData[];
     itemHeight: number;
 } & {}>, {
+    showScrollbar: boolean;
     items: ItemData[];
 }>;
 export default _default;

es/virtual-list/src/VirtualList.js

 import { computed, defineComponent, ref, onMounted, h, renderSlot, renderList } from 'vue';
 import { nextFrame, c } from '../../shared';
 import VResizeObserver from '../../resize-observer/src';
-const styles = c([
-    `.vvl {
-    border: 1px solid cornflowerblue;
-    width: 400px;
-    overflow: scroll;
-    height: 350px;
-    resize: both;
-  }`
+const styles = c('.v-vl', {
+    overflow: 'auto'
+}, [
+    c('&:not(.v-vl--show-scrollbar)', {
+        scrollbarWidth: 'none'
+    }, [
+        c('&::-webkit-scrollbar', {
+            width: 0,
+            height: 0
+        })
+    ])
 ]);
@@ -16,2 +19,6 @@ export default defineComponent({
     props: {
+        showScrollbar: {
+            type: Boolean,
+            default: true
+        },
         items: {
@@ -54,8 +61,13 @@ type: Array,
             scrollTop: scrollTopRef,
-            itemsWrapperStyle: computed(() => {
+            listStyle: computed(() => {
                 return {
+                    overflow: 'auto'
+                };
+            }),
+            itemsStyle: computed(() => {
+                return {
                     height: `${props.itemHeight * props.items.length}px`
                 };
             }),
-            itemsViewportStyle: computed(() => {
+            visibleItemsStyle: computed(() => {
                 return {
@@ -94,3 +106,8 @@ transform: `translate3d(0, ${startIndexRef.value * props.itemHeight}px, 0)`
                 return h('div', {
-                    class: 'vvl',
+                    class: [
+                        'v-vl',
+                        {
+                            'v-vl--show-scrollbar': this.showScrollbar
+                        }
+                    ],
                     onScroll: this.handleListScroll,
@@ -100,10 +117,10 @@ ref: 'listRef'
                     h('div', {
-                        class: 'vvl-items',
-                        style: this.itemsWrapperStyle
+                        class: 'v-vl-items',
+                        style: this.itemsStyle
                     }, [
                         h('div', {
-                            class: 'vvl-visible-items',
-                            style: this.itemsViewportStyle
-                        }, renderList(this.viewportItems, (item) => {
-                            return renderSlot(this.$slots, 'default', item);
+                            class: 'v-vl-visible-items',
+                            style: this.visibleItemsStyle
+                        }, renderList(this.viewportItems, (item, index) => {
+                            return renderSlot(this.$slots, 'default', { item, index });
                         }))
@@ -110,0 +127,0 @@ ])

lib/virtual-list/src/type.d.ts

@@ -1,4 +0,4 @@
-export declare type ItemData = {
+export interface ItemData {
     key: string | number;
     [rest: string]: any;
-};
+}

lib/virtual-list/src/VirtualList.d.ts

 import { PropType } from 'vue';
 import { ItemData } from './type';
 declare const _default: import("vue").DefineComponent<{
+    showScrollbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     items: {
@@ -15,6 +19,9 @@ type: PropType<ItemData[]>;
     scrollTop: import("vue").Ref<number>;
-    itemsWrapperStyle: import("vue").ComputedRef<{
+    listStyle: import("vue").ComputedRef<{
+        overflow: string;
+    }>;
+    itemsStyle: import("vue").ComputedRef<{
         height: string;
     }>;
-    itemsViewportStyle: import("vue").ComputedRef<{
+    visibleItemsStyle: import("vue").ComputedRef<{
         transform: string;
@@ -32,7 +39,9 @@ }>;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    showScrollbar: boolean;
     items: ItemData[];
     itemHeight: number;
 } & {}>, {
+    showScrollbar: boolean;
     items: ItemData[];
 }>;
 export default _default;

lib/virtual-list/src/VirtualList.js

@@ -9,10 +9,13 @@ "use strict";
 const src_1 = __importDefault(require("../../resize-observer/src"));
-const styles = shared_1.c([
-    `.vvl {
-    border: 1px solid cornflowerblue;
-    width: 400px;
-    overflow: scroll;
-    height: 350px;
-    resize: both;
-  }`
+const styles = shared_1.c('.v-vl', {
+    overflow: 'auto'
+}, [
+    shared_1.c('&:not(.v-vl--show-scrollbar)', {
+        scrollbarWidth: 'none'
+    }, [
+        shared_1.c('&::-webkit-scrollbar', {
+            width: 0,
+            height: 0
+        })
+    ])
 ]);
@@ -22,2 +25,6 @@ exports.default = vue_1.defineComponent({
     props: {
+        showScrollbar: {
+            type: Boolean,
+            default: true
+        },
         items: {
@@ -60,8 +67,13 @@ type: Array,
             scrollTop: scrollTopRef,
-            itemsWrapperStyle: vue_1.computed(() => {
+            listStyle: vue_1.computed(() => {
                 return {
+                    overflow: 'auto'
+                };
+            }),
+            itemsStyle: vue_1.computed(() => {
+                return {
                     height: `${props.itemHeight * props.items.length}px`
                 };
             }),
-            itemsViewportStyle: vue_1.computed(() => {
+            visibleItemsStyle: vue_1.computed(() => {
                 return {
@@ -100,3 +112,8 @@ transform: `translate3d(0, ${startIndexRef.value * props.itemHeight}px, 0)`
                 return vue_1.h('div', {
-                    class: 'vvl',
+                    class: [
+                        'v-vl',
+                        {
+                            'v-vl--show-scrollbar': this.showScrollbar
+                        }
+                    ],
                     onScroll: this.handleListScroll,
@@ -106,10 +123,10 @@ ref: 'listRef'
                     vue_1.h('div', {
-                        class: 'vvl-items',
-                        style: this.itemsWrapperStyle
+                        class: 'v-vl-items',
+                        style: this.itemsStyle
                     }, [
                         vue_1.h('div', {
-                            class: 'vvl-visible-items',
-                            style: this.itemsViewportStyle
-                        }, vue_1.renderList(this.viewportItems, (item) => {
-                            return vue_1.renderSlot(this.$slots, 'default', item);
+                            class: 'v-vl-visible-items',
+                            style: this.visibleItemsStyle
+                        }, vue_1.renderList(this.viewportItems, (item, index) => {
+                            return vue_1.renderSlot(this.$slots, 'default', { item, index });
                         }))
@@ -116,0 +133,0 @@ ])

package.json

 {
   "name": "vueuc",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "description": "Util Components for Vue",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24188

increased by6.17%

Lines of code

676

increased by8.33%

No dependency changes