@mixd-id/web-scaffold 0.1.2301231340 → 0.1.2301231343

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231340",
+  "version": "0.1.2301231343",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -38,7 +38,6 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.14",
     "prismjs": "^1.28.0",
-    "sequelize": "^6.29.0",
     "serve-static": "^1.15.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.25",
@@ -48,6 +47,7 @@
     "@vitejs/plugin-vue": "^2.2.0",
     "autoprefixer": "^10.4.4",
     "postcss": "^8.4.12",
+    "sequelize": "^6.29.0",
     "vite": "^2.8.0"
   },
   "description": "This scaffold based on express vitejs vuejs",

package/src/components/Button.vue

@@ -86,7 +86,7 @@ export default{
 	@apply h-[var(--h-cp)];
 	@apply relative flex items-center justify-center;
 	@apply whitespace-nowrap text-ellipsis overflow-hidden;
-	@apply rounded-md;
+	@apply rounded-lg;
 }
 .button>*:first-child{
 	@apply flex items-center justify-center

package/src/components/ContextMenu.vue

@@ -2,7 +2,7 @@
 	<Teleport to=".Y29u">
 		<div v-if="!!(computedState)" :class="$style.contextMenu" :style="computedStyle" ref="contextMenu">
 			<div :class="bodyClass">
-				<slot></slot>
+				<slot name="default" :context="context"></slot>
 			</div>
 		</div>
 	</Teleport>
@@ -50,7 +50,8 @@ export default {
 	data(){
 		return {
 			computedStyle: null,
-			isOpen: false
+			isOpen: false,
+			context: null
 		}
 	},
 
@@ -105,7 +106,7 @@ export default {
 			this.$refs.contextMenu.classList.remove(this.$style.active)
 		},
 
-		open(caller){
+		open(caller, context){
 
 			if(caller){
 				this.isOpen = true
@@ -118,6 +119,8 @@ export default {
 				caller = caller.$el ? caller.$el :
 					caller instanceof HTMLElement ? caller : null
 
+				this.context = context
+
 				if(caller){
 
 					this.$nextTick(() => {

package/src/components/Image.vue

@@ -1,13 +1,18 @@
 <template>
-  <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>
-		<div :class="$style.loading" v-if="loading && spinnerType === 'spinner'">
-			<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 :class="outerClass">
+
+		<slot v-if="$slots['empty'] && status === 0" name="empty" :instance="this"></slot>
+		<slot v-else-if="$slots['loading'] && status === 1" name="loading" :instance="this"></slot>
+		<div v-else-if="!$slots['loading'] && status === 1 && spinnerType === 'spinner'" :class="$style.loading">
+			<svg class="animate-spin aspect-square w-[15%] min-w-[14px] 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>
+		<slot v-else-if="$slots['error'] && status === 3" name="error" :instance="this"></slot>
+		<img v-else :class="computedClass" :src="actualSrc" ref="img" />
+
+		<slot :instance="this"></slot>
+
+		<input v-if="Boolean(editable)" class="hidden" type="file" accept="image/*" ref="file" @change="onChange"/>
+
 	</div>
 </template>
 
@@ -30,17 +35,11 @@ export default{
 
 		class: String,
 
-		outerClass: String,
-
 		editable:{
 			type: [ Boolean, String ],
 			default: false
 		},
 
-		aspectRatio: {
-			type: String
-		},
-
     src:{
       type: [ String, Object ]
     },
@@ -59,36 +58,30 @@ export default{
 
   computed:{
 
-		computedOuterClass(){
+		outerClass(){
 			return [
-				this.$style.img,
-				this.outerClass,
-				this.loading && this.spinnerType === 'shimmer' ? this.$style.shimmer : ''
+				this.$style.comp,
+				this.class,
+				this.status === 1 && this.spinnerType === 'shimmer' && !this.$slots['loading'] ?
+					this.$style.shimmer : ''
 			]
 				.join(' ')
 		},
 
 		computedClass(){
 			return [
+				this.$style.img,
 				this.class
 			]
 				.join(' ')
-		},
-
-		imageStyle(){
-			return {
-				...(this.aspectRatio ? { 'aspect-ratio':this.aspectRatio } : {}),
-				...(this.actualSrc ? {} : { visibility:'hidden' })
-			}
 		}
 
   },
 
   data(){
     return {
-			loading: false,
-			actualSrc: null,
-			loaded: false
+			status: 0, // 0:empty, 1:loading, 2:image, 3:error
+			actualSrc: 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
     }
   },
 
@@ -119,9 +112,9 @@ export default{
 		async loadSrc(){
 
 			if(typeof this.src === 'string') {
-				if (!this.loaded && this.src.startsWith('data:image')) {
-					this.loaded = true
+				if (this.src.startsWith('data:image')) {
 					this.actualSrc = this.src
+					this.status = 2
 				}
 				else{
 					const src = {}
@@ -140,38 +133,34 @@ export default{
 
 							var img = new Image()
 							img.addEventListener('load', () => {
-								this.loaded = true
+								this.status = 2
 								this.actualSrc = img.src
-								this.loading = false
 							})
 							img.addEventListener('error', () => {
-								this.loaded = true
+								this.status = 3
 								this.actualSrc = this.defaultSrc
-								this.loading = false
 							})
 							img.src = src[screens[b]]
-							this.loading = true
+							this.status = 1
 						}
 					}
 				}
 			}
-			else if(!this.loaded && this.src instanceof File){
+			else if(this.src instanceof File){
 				var reader = new FileReader();
 
 				reader.addEventListener('load', () => {
-					this.loaded = true
+					this.status = 2
 					this.actualSrc = reader.result
-					this.loading = false
 				}, false)
 
 				reader.addEventListener('error', () => {
-					this.loaded = true
+					this.status = 3
 					this.actualSrc = this.defaultSrc
-					this.loading = false
 				})
 
 				reader.readAsDataURL(this.src)
-				this.loading = true
+				this.status = 1
 			}
 		}
 
@@ -180,7 +169,6 @@ export default{
 	watch:{
 
 		src(to){
-			this.loaded = false
 			this.loadSrc()
 		},
 
@@ -195,10 +183,14 @@ export default{
 
 <style module>
 
-.img{
+.comp{
 	@apply relative;
 }
 
+.img{
+	@apply object-contain;
+}
+
 .editArea{
 	@apply absolute top-0 left-0 right-0 bottom-0;
 }
@@ -209,8 +201,7 @@ export default{
 }
 
 .shimmer{
-	@apply bg-text-100 animate-pulse;
+	@apply bg-text-200 animate-pulse;
 }
 
-
 </style>

package/src/components/Textbox.vue

@@ -120,7 +120,7 @@ export default{
 		},
 
 		onKeyUp(e){
-			if(e.keyCode === 13 && this.$refs.input.value.length > 0){
+			if(e.keyCode === 13){
 				this.$emit('submit')
 			}
 			else if(e.keyCode === 27 && this.clearable){

package/src/index.js

@@ -26,10 +26,112 @@ const download = (url, as) => {
   }, 100)
 }
 
+let preloads = []
+
+const preload = (params) => {
+
+  if(!params) return
+
+  if(typeof params === 'string'){
+    params.split(',').forEach((param) => {
+      let media, href
+      if(param.startsWith('sm:')){
+        media = 'sm'
+        href = param.substring(param.indexOf(':') + 1)
+      }
+      else if(param.startsWith('md:')){
+        media = 'md'
+        href = param.substring(param.indexOf(':') + 1)
+      }
+      else if(param.startsWith('lg:')){
+        media = 'lg'
+        href = param.substring(param.indexOf(':') + 1)
+      }
+      else if(param.startsWith('xl:')){
+        media = 'xl'
+        href = param.substring(param.indexOf(':') + 1)
+      }
+      else if(param.startsWith('2xl:')){
+        media = '2xl'
+        href = param.substring(param.indexOf(':') + 1)
+      }
+      else{
+        media = ''
+        href = param
+      }
+
+      switch(media){
+        case 'sm':
+          media = "(min-width: 640px)"
+          break
+        case 'md':
+          media = "(min-width: 768px)"
+          break
+        case 'lg':
+          media = "(min-width: 1024px)"
+          break
+        case 'xl':
+          media = "(min-width: 1280px)"
+          break
+        case '2xl':
+          media = "(min-width: 1536px)"
+          break
+      }
+
+      const ext = href.split('.').slice(-1).pop()
+      let as
+      switch(ext){
+        case 'png':
+        case 'jpg':
+        case 'jpeg':
+        case 'webp':
+        case 'gif':
+          as = 'image'
+          break
+      }
+
+      if(href && as){
+        const preloadObj = {
+          href,
+          media,
+          as
+        }
+
+        preloads.push(preloadObj)
+      }
+    })
+  }
+  else{
+    if(Array.isArray(params)){
+      preloads.push(...params)
+    }
+    else{
+      preloads.push(params)
+    }
+  }
+}
+
+const popPreloads = () => {
+
+  let link = ''
+
+  preloads.forEach((obj) => {
+    let str = `<link rel="preload" href="${obj.href}" as="${obj.as}"`
+    if(obj.media)
+      str += ` media="${obj.media}"`
+    str += ' />'
+
+    link += str
+  })
+
+  preloads = []
+
+  return link
+}
+
 export default{
 
   install: (app, options) => {
-    //console.log('installing webfxfy-vue...')
 
     let isMobile = ref(calculateIsMobile())
 
@@ -44,6 +146,8 @@ export default{
     app.config.globalProperties.uniqid = uniqid
     app.config.globalProperties.isMobile = isMobile
     app.config.globalProperties.$download = download
+    app.config.globalProperties.$preload = preload
+    app.config.globalProperties.$popPreloads = popPreloads
 
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
     app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))