@mixd-id/web-scaffold 0.1.2301231339 → 0.1.2301231342

package/package.json

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

package/src/components/Image.vue

@@ -141,13 +141,13 @@ export default{
 							var img = new Image()
 							img.addEventListener('load', () => {
 								this.loaded = true
-								//this.actualSrc = img.src
-								//this.loading = false
+								this.actualSrc = img.src
+								this.loading = false
 							})
 							img.addEventListener('error', () => {
 								this.loaded = true
 								this.actualSrc = this.defaultSrc
-								//this.loading = false
+								this.loading = false
 							})
 							img.src = src[screens[b]]
 							this.loading = true

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")))