@mixd-id/web-scaffold 0.1.2301231323 → 0.1.2301231325

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231323",
+  "version": "0.1.2301231325",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Carousel.vue

@@ -3,12 +3,12 @@
     <div :class="$style.inner">
       <span v-if="images && images.length && images.length > 0" v-for="image in images" :key="image">
         <a v-if="image.target && image.target.indexOf('://') >= 0" :href="image.target" @click="checkClick">
-          <Image :src="image.imageUrl" :class="imageClass" />
+          <Image :src="image.imageUrl" :outerClass="imageClass" />
         </a>
         <router-link v-if="image.target" :to="scrolling ? '' : image.target">
-          <Image :src="image.imageUrl" :class="imageClass"/>
+          <Image :src="image.imageUrl" :outerClass="imageClass"/>
         </router-link>
-				<Image v-else :src="image.imageUrl" :class="imageClass" />
+				<Image v-else :src="image.imageUrl" :outerClass="imageClass" />
       </span>
 			<div v-else :class="imageClass" class="bg-gray-200 animate-pulse"></div>
     </div>

package/src/components/Image.vue

@@ -5,7 +5,7 @@
 		<img :class="computedClass" :src="actualSrc" ref="img" :style="imageStyle"/>
 		<input v-if="Boolean(editable)" class="hidden" type="file" accept="image/*" ref="file" @change="onChange"/>
 		<slot></slot>
-		<div :class="$style.isLoading" v-if="isLoading">
+		<div :class="$style.loading" v-if="loading">
 			<svg class="animate-spin aspect-square w-[15%] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
 		</div>
 	</div>
@@ -80,8 +80,7 @@ export default{
 
   data(){
     return {
-      visible: 0,
-			isLoading: false,
+			loading: false,
 			actualSrc: null,
 			loaded: false
     }
@@ -113,10 +112,8 @@ export default{
 
 		async loadSrc(){
 
-			this.loaded = false
-
 			if(typeof this.src === 'string') {
-				if (this.src.startsWith('data:image')) {
+				if (!this.loaded && this.src.startsWith('data:image')) {
 					this.loaded = true
 					this.actualSrc = this.src
 				}
@@ -139,34 +136,36 @@ export default{
 							img.addEventListener('load', () => {
 								this.loaded = true
 								this.actualSrc = img.src
-								this.isLoading = false
+								this.loading = false
 							})
 							img.addEventListener('error', () => {
 								this.loaded = true
 								this.actualSrc = this.defaultSrc
-								this.isLoading = false
+								this.loading = false
 							})
 							img.src = src[screens[b]]
+							this.loading = true
 						}
 					}
 				}
 			}
-			else if(this.src instanceof File){
+			else if(!this.loaded && this.src instanceof File){
 				var reader = new FileReader();
 
 				reader.addEventListener('load', () => {
 					this.loaded = true
 					this.actualSrc = reader.result
-					this.isLoading = false
+					this.loading = false
 				}, false)
 
 				reader.addEventListener('error', () => {
 					this.loaded = true
 					this.actualSrc = this.defaultSrc
-					this.isLoading = false
+					this.loading = false
 				})
 
 				reader.readAsDataURL(this.src)
+				this.loading = true
 			}
 		}
 
@@ -175,14 +174,12 @@ export default{
 	watch:{
 
 		src(to){
+			this.loaded = false
 			this.loadSrc()
+		},
 
-			window.setTimeout(() => {
-				if(!this.loaded){
-					this.actualSrc = null
-					this.isLoading = true
-				}
-			}, 200)
+		"isMobile.value"(to){
+			this.loadSrc()
 		}
 
 	}
@@ -200,7 +197,7 @@ export default{
 	@apply absolute top-0 left-0 right-0 bottom-0;
 }
 
-.isLoading{
+.loading{
 	@apply absolute top-0 left-0 right-0 bottom-0;
 	@apply flex items-center justify-center;
 }

package/src/components/ImagePreview.vue

@@ -32,11 +32,21 @@ export default{
 		open(imageUrl){
 			this.imageUrl = imageUrl
 			this.isOpen = true
+			window.addEventListener('keyup', this.onKeyUp)
 		},
 
 		close(){
 			this.isOpen = false
 			this.imageUrl = null
+			window.removeEventListener('keyup', this.onKeyUp)
+		},
+
+		onKeyUp(e){
+			if(e.keyCode === 27){
+				e.preventDefault()
+				e.stopPropagation()
+				this.close()
+			}
 		}
 
 	}
@@ -53,7 +63,7 @@ export default{
 
 .previewModal{
 	@apply !w-screen !h-screen !bg-base-300;
-	z-index: 21;
+	z-index: 21 !important;
 	max-width: unset !important;
 	max-height: unset !important;
 }

package/src/components/ListPage1.vue

@@ -5,10 +5,11 @@
 			<div class="flex-1 flex flex-col">
 
 				<div class="p-6 pb-0 flex flex-row gap-3 items-center">
-					<div class="mr-6">
+					<div class="mr-6 hidden md:block">
 						<h2>{{ title }}</h2>
 					</div>
-					<div class="flex-1 overflow-hidden mr-4">
+					<div class="flex-1"></div>
+					<div class="overflow-hidden mr-4 hidden md:block">
 						<slot v-if="$slots['lp-search']" name="lp-search" :preset="preset"/>
 						<Textbox v-else :clearable="true" placeholder="Cari..." class="w-[200px]" v-model="preset.search"
 										 @clear="clearSearch" @submit="load">
@@ -21,7 +22,7 @@
 							</template>
 						</Textbox>
 					</div>
-					<div>
+					<div class="hidden md:block">
 						<slot name="lp-tabspace" :preset="preset"/>
 					</div>
 					<div class="flex flex-row gap-1 items-center">
@@ -45,8 +46,17 @@
 					</div>
 				</div>
 
-				<VirtualTable class="flex-1 m-6" :columns="presetColumns" :items="items"
-											:appearances="appearances" @scroll-end="loadNext">
+				<VirtualScroll v-if="isMobile.value" :items="items" class="flex-1" @scroll-end="loadNext">
+					<template #item="{ item, index }">
+						<slot v-if="$slots.mobile" name="mobile" :item="item" :index="index"></slot>
+						<div v-else>
+							<div class="h-[2rem] bg-base-300 rounded-lg my-2"></div>
+						</div>
+					</template>
+				</VirtualScroll>
+
+				<VirtualTable v-else class="flex-1 m-6" :columns="presetColumns" :items="items"
+											:appearances="appearances" @scroll-end="loadNext" :pinned="pinned">
 					<template v-for="(_, slot) in $slots" #[slot]="{ item, index }">
 						<slot :name="slot" :item="item" :index="index"></slot>
 					</template>
@@ -191,6 +201,8 @@ export default{
 
 		title: String,
 
+		pinned: Function
+
 	},
 
 	computed: {

package/src/components/VirtualTable.vue

@@ -80,6 +80,8 @@ export default{
 
 		items: Array,
 
+		pinned: Function,
+
 		defaultColumnWidth: {
 			type: String,
 			default: _DEFAULT_COLUMN_WIDTH
@@ -108,9 +110,30 @@ export default{
 			return Math.round(this.scrollTop / this.itemHeight)
 		},
 
+		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
+		},
+
 		visibleItems(){
 			if(this.itemHeight <= 0) return []
-			return this.items ? this.items.slice(this.visibleStartIndex, this.visibleStartIndex + this.maxVisibleItems) : []
+			return this.sortedItems.slice(this.visibleStartIndex, this.visibleStartIndex + this.maxVisibleItems)
 		},
 
 		spacerStyle(){

package/src/index.js

@@ -1,14 +1,11 @@
-import {defineAsyncComponent} from "vue"
+import {defineAsyncComponent, ref} from "vue"
 import {observeInit} from './helper.js'
+import throttle from "lodash-es/throttle";
 //import './index.css'
 
-const isBrowser = () => {
-  return typeof window === 'object'
-}
-
-const isMobile = () => {
-  return isBrowser &&
-      (window.innerWidth < window.innerHeight && window.innerWidth <= 800)
+const calculateIsMobile = () => {
+  if(typeof window === 'undefined') return false
+  return window.innerWidth < window.innerHeight && window.innerWidth <= 800
 }
 
 let _UNIQID = 0
@@ -36,14 +33,18 @@ export default{
   install: (app, options) => {
     //console.log('installing webfxfy-vue...')
 
-    app.config.globalProperties.isBrowser = isBrowser
-    app.config.globalProperties.isMobile = isMobile
-    app.config.globalProperties.uniqid = uniqid
+    let isMobile = ref(calculateIsMobile())
 
     if(typeof window !== 'undefined' && 'IntersectionObserver' in window) {
       app.config.globalProperties.$observe = observeInit()
+
+      window.addEventListener('resize', throttle(() => {
+        isMobile.value = calculateIsMobile()
+      }, 300, { trailing:true }))
     }
 
+    app.config.globalProperties.uniqid = uniqid
+    app.config.globalProperties.isMobile = isMobile
     app.config.globalProperties.$download = download
 
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))