@mixd-id/web-scaffold 0.1.2301231322 → 0.1.2301231324

package/package.json

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

package/src/components/Image.vue

@@ -1,5 +1,7 @@
 <template>
-  <div :class="computedOuterClass" @click="onClick">
+  <div :class="computedOuterClass">
+		<slot v-if="editable && $slots['edit-area']" name="edit-area"></slot>
+		<div v-else-if="editable" :class="$style.editArea" @click="edit"></div>
 		<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>
@@ -54,7 +56,8 @@ export default{
 
 		computedOuterClass(){
 			return [
-				this.$style.img
+				this.$style.img,
+				this.outerClass
 			]
 				.join(' ')
 		},
@@ -102,7 +105,7 @@ export default{
 			}
 		},
 
-		onClick(){
+		edit(){
 			if(this.$refs.file){
 				this.$refs.file.click()
 			}
@@ -193,6 +196,10 @@ export default{
 	@apply relative;
 }
 
+.editArea{
+	@apply absolute top-0 left-0 right-0 bottom-0;
+}
+
 .isLoading{
 	@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,6 +63,7 @@ export default{
 
 .previewModal{
 	@apply !w-screen !h-screen !bg-base-300;
+	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: {
@@ -381,7 +393,7 @@ export default{
 
 		onHooks(module, event, items){
 
-			console.log('onHooks', module, event, items)
+			//console.log('onHooks', module, event, items)
 
 			if(!Array.isArray(items)) return
 			items = items.filter((_) => _).map((_) => {

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()
+      }, 600, { 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")))