@mixd-id/web-scaffold 0.2.240702 → 0.2.240703

package/src/components/VirtualGrid.vue

@@ -1,41 +1,37 @@
 <template>
-	<div :class="$style.virtualGrid" @click="resize">
-
-		<div ref="scroller" :class="$style.scroller" :style="scrollerStyle">
-			<div :class="spacerClass" ref="spacer" :style="spacerStyle">
-				<div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id"
-						 @click="">
-					<slot name="item" :item="item" :index="index">
-            {{ item }}
-          </slot>
-				</div>
-			</div>
-		</div>
-
-		<div :class="$style.calc" v-if="items && items.length > 0" ref="calc">
-			<slot name="item" :item="items[0]" :index="0">
-        {{ items[0] }}
-      </slot>
-		</div>
-
-		<Teleport v-if="optBar" :to="optBar">
-			<div class="flex flex-row gap-2 items-center">
-				<small class="text-text-400">Column</small>
-				<select v-model="config.gridColumn"
-								class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-text-100 text-center">
-					<option v-for="i in 8" :value="i">{{ i }}</option>
-				</select>
-			</div>
-			<div class="flex flex-row gap-2 items-center">
-				<small class="text-text-400">Gap</small>
-				<select v-model="config.gridGap"
-								class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-text-100 text-center">
-					<option v-for="i in 8" :value="`gap-${i}`">{{ i }}</option>
-				</select>
-			</div>
-		</Teleport>
-
-	</div>
+  <div :class="$style.virtualGrid" @click="resize">
+
+    <div ref="scroller" :class="$style.scroller" :style="scrollerStyle">
+      <div :class="spacerClass" ref="spacer" :style="spacerStyle">
+        <div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id"
+             @click="">
+          <slot name="item" :item="item" :index="index"></slot>
+        </div>
+      </div>
+    </div>
+
+    <div :class="$style.calc" v-if="items && items.length > 0" ref="calc">
+      <slot name="item" :item="items[0]" :index="0"></slot>
+    </div>
+
+    <Teleport v-if="optBar" :to="optBar">
+      <div class="flex flex-row gap-2 items-center">
+        <small class="text-text-400">Column</small>
+        <select v-model="config.gridColumn"
+                class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-text-100 text-center">
+          <option v-for="i in 8" :value="i">{{ i }}</option>
+        </select>
+      </div>
+      <div class="flex flex-row gap-2 items-center">
+        <small class="text-text-400">Gap</small>
+        <select v-model="config.gridGap"
+                class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-text-100 text-center">
+          <option v-for="i in 8" :value="`gap-${i}`">{{ i }}</option>
+        </select>
+      </div>
+    </Teleport>
+
+  </div>
 </template>
 
 <script>
@@ -44,200 +40,200 @@ import throttle from "lodash/throttle";
 
 export default{
 
-	emits: [ 'scroll-end' ],
+  emits: [ 'scroll-end' ],
 
-	props: {
+  props: {
 
-		column: {
-			type: [ Number, String ],
-			default: 1
-		},
+    column: {
+      type: [ Number, String ],
+      default: 1
+    },
 
-		gap: {
-			type: [ String ],
-			default: 'gap-0'
-		},
+    gap: {
+      type: [ String ],
+      default: 'gap-0'
+    },
 
     containerClass: String,
 
-		items: Array,
+    items: Array,
+
+    pinned: Function,
+
+    optBar: String,
+
+    config: Object
+
+  },
+
+  methods: {
+
+    handleScroll: throttle(function(){
+      this.scrollTop = this.$el.scrollTop
+
+      if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$el.clientHeight - this.itemHeight){
+        if(!this.isOnEndScroll){
+          this.$emit('scroll-end')
+          this.isOnEndScroll = true
+        }
+      }
+      else{
+        if(this.isOnEndScroll){
+          this.isOnEndScroll = false
+        }
+      }
+    }, 16),
+
+    init(){
+      this.$el.addEventListener(
+          "scroll",
+          this.handleScroll,
+          this.passiveScrollSupported() ? { passive: true } : false
+      )
+
+      this.resize()
+    },
+
+    passiveScrollSupported() {
+      let passiveSupported = false;
+
+      try {
+        const options = {
+          get passive() {
+            passiveSupported = true;
+            return false;
+          }
+        };
+        window.addEventListener("test", null, options);
+        window.removeEventListener("test", null, options);
+      } catch (err) {
+        passiveSupported = false;
+      }
+      return passiveSupported;
+    },
+
+    resetState(){
+      this.state = 1
+    },
+
+    async resize(){
+
+      this.$nextTick(() => {
+        if(this.$refs.calc){
+          const elHeight = parseInt(window.getComputedStyle(this.$el).height !== '0px' ?
+              window.getComputedStyle(this.$el).height :
+              window.getComputedStyle(this.$el).maxHeight)
+
+          if(isNaN(elHeight)) return
+
+          this.itemHeight = parseFloat(window.getComputedStyle(this.$refs.calc).height.replace('px', ''))
+
+          this.itemGap = parseFloat(window.getComputedStyle(this.$refs.spacer)['row-gap'].replace('px', ''));
 
-		pinned: Function,
+          this.maxVisibleItems = elHeight > 0 ? (Math.ceil(elHeight / this.itemHeight) * this.column) : this.items.length
 
-		optBar: String,
+          if(this.itemHeight <= 0){
+            console.error('Unable to calculate virtual grid item height, async component not supported.')
+          }
+        }
+      })
+
+    },
+
+    setState(state){
+      this.state = state
+    }
 
-		config: Object
+  },
 
-	},
+  computed: {
 
-	methods: {
+    scrollerStyle(){
+      if(!this.items || this.items.length < 1)
+        return {}
 
-		handleScroll: throttle(function(){
-			this.scrollTop = this.$el.scrollTop
+      const rowCount = Math.ceil((this.items.length / this.column))
+      const height = (rowCount * this.itemHeight) + (this.itemGap * (rowCount - 1))
+
+      return {
+        height: height + 'px'
+      }
+    },
 
-			if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$el.clientHeight - this.itemHeight){
-				if(!this.isOnEndScroll){
-					this.$emit('scroll-end')
-					this.isOnEndScroll = true
-				}
-			}
-			else{
-				if(this.isOnEndScroll){
-					this.isOnEndScroll = false
-				}
-			}
-		}, 16),
-
-		init(){
-			this.$el.addEventListener(
-				"scroll",
-				this.handleScroll,
-				this.passiveScrollSupported() ? { passive: true } : false
-			)
-
-			this.resize()
-		},
-
-		passiveScrollSupported() {
-			let passiveSupported = false;
-
-			try {
-				const options = {
-					get passive() {
-						passiveSupported = true;
-						return false;
-					}
-				};
-				window.addEventListener("test", null, options);
-				window.removeEventListener("test", null, options);
-			} catch (err) {
-				passiveSupported = false;
-			}
-			return passiveSupported;
-		},
-
-		resetState(){
-			this.state = 1
-		},
-
-		async resize(){
-
-			this.$nextTick(() => {
-				if(this.$refs.calc){
-					const elHeight = parseInt(window.getComputedStyle(this.$el).height !== '0px' ?
-						window.getComputedStyle(this.$el).height :
-						window.getComputedStyle(this.$el).maxHeight)
-
-					if(isNaN(elHeight)) return
-
-					this.itemHeight = parseFloat(window.getComputedStyle(this.$refs.calc).height.replace('px', ''))
-
-					this.itemGap = parseFloat(window.getComputedStyle(this.$refs.spacer)['row-gap'].replace('px', ''));
-
-					this.maxVisibleItems = elHeight > 0 ? (Math.ceil(elHeight / this.itemHeight) * this.column) : this.items.length
-
-					if(this.itemHeight <= 0){
-						console.error('Unable to calculate virtual grid item height, async component not supported.')
-					}
-				}
-			})
-
-		},
-
-		setState(state){
-			this.state = state
-		}
-
-	},
-
-	computed: {
-
-		scrollerStyle(){
-			if(!this.items || this.items.length < 1)
-				return {}
-
-			const rowCount = Math.ceil((this.items.length / this.column))
-			const height = (rowCount * this.itemHeight) + (this.itemGap * (rowCount - 1))
-
-			return {
-				height: height + 'px'
-			}
-		},
-
-		sortedItems(){
-			if(!Array.isArray(this.items)) return []
-
-			if(typeof this.pinned === 'function'){
-				const pinnedItems = []
-				const unpinnedItems = []
-				this.items.forEach((item) => {
-					if(this.pinned(item))
-						pinnedItems.push(item)
-					else
-						unpinnedItems.push(item)
-				})
-
-				return [
-					...pinnedItems,
-					...unpinnedItems
-				]
-			}
-			return this.items
-		},
-
-		spacerClass(){
-			return [
-				this.$style.spacer,
+    sortedItems(){
+      if(!Array.isArray(this.items)) return []
+
+      if(typeof this.pinned === 'function'){
+        const pinnedItems = []
+        const unpinnedItems = []
+        this.items.forEach((item) => {
+          if(this.pinned(item))
+            pinnedItems.push(item)
+          else
+            unpinnedItems.push(item)
+        })
+
+        return [
+          ...pinnedItems,
+          ...unpinnedItems
+        ]
+      }
+      return this.items
+    },
+
+    spacerClass(){
+      return [
+        this.$style.spacer,
         this.containerClass,
-				this.gap
-			]
-				.join(' ')
-		},
-
-		spacerStyle(){
-			return {
-				transform: "translateY(" + (this.visibleStartIndex * (this.itemHeight + this.itemGap)) + "px)",
-				'grid-template-columns': `repeat(${this.column}, minmax(0, 1fr))`,
-				gap: this.gap
-			}
-		},
-
-		visibleItems(){
-			if(this.itemHeight <= 0) return []
-			return this.sortedItems.slice(this.visibleStartIndex * this.column, (this.visibleStartIndex * this.column) + this.maxVisibleItems)
-		},
-
-		visibleStartIndex(){
-			return Math.floor((this.scrollTop < 0 ? 0 : this.scrollTop) / (this.itemHeight + this.itemGap))
-		},
-
-	},
-
-	data(){
-		return {
-			scrollTop: 0,
-			itemHeight: 0,
-			itemGap: 0,
-			maxVisibleItems: 0,
-			isOnEndScroll: false,
-			selectedIndex: -1,
-			state: 1,
-		}
-	},
-
-	mounted() {
-		this.init()
-	},
-
-	watch: {
-
-		column(to){
-			this.resize()
-		},
-
-		gap(to){
-			this.resize()
-		},
+        this.gap
+      ]
+          .join(' ')
+    },
+
+    spacerStyle(){
+      return {
+        transform: "translateY(" + (this.visibleStartIndex * (this.itemHeight + this.itemGap)) + "px)",
+        'grid-template-columns': `repeat(${this.column}, minmax(0, 1fr))`,
+        gap: this.gap
+      }
+    },
+
+    visibleItems(){
+      if(this.itemHeight <= 0) return []
+      return this.sortedItems.slice(this.visibleStartIndex * this.column, (this.visibleStartIndex * this.column) + this.maxVisibleItems)
+    },
+
+    visibleStartIndex(){
+      return Math.floor((this.scrollTop < 0 ? 0 : this.scrollTop) / (this.itemHeight + this.itemGap))
+    },
+
+  },
+
+  data(){
+    return {
+      scrollTop: 0,
+      itemHeight: 0,
+      itemGap: 0,
+      maxVisibleItems: 0,
+      isOnEndScroll: false,
+      selectedIndex: -1,
+      state: 1,
+    }
+  },
+
+  mounted() {
+    this.init()
+  },
+
+  watch: {
+
+    column(to){
+      this.resize()
+    },
+
+    gap(to){
+      this.resize()
+    },
 
     items: {
       deep: true,
@@ -250,7 +246,7 @@ export default{
       }
     },
 
-	}
+  }
 
 }
 
@@ -259,25 +255,25 @@ export default{
 <style module>
 
 .virtualGrid{
-	@apply flex-1 overflow-y-auto;
+  @apply flex-1 overflow-y-auto;
 }
 
 .scroller{
-	position: relative;
-	overflow: hidden;
-	will-change: auto;
-	@apply min-w-full;
+  position: relative;
+  overflow: hidden;
+  will-change: auto;
+  @apply min-w-full;
 }
 
 .spacer{
-	will-change: auto;
-	position: relative;
-	@apply grid;
+  will-change: auto;
+  position: relative;
+  @apply grid;
 }
 
 .calc{
-	@apply absolute invisible max-w-full;
-	top: -10000px;
+  @apply absolute invisible max-w-full;
+  top: -10000px;
 
 }