@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/configs/dashboard/data-table.js

@@ -0,0 +1,9 @@
+export const component = {
+
+  type:"DataTable",
+
+  props:{
+    height:[ "h-[50vh]", "md:h-[50vh]", "", "" ]
+  }
+
+}

package/src/configs/web-page-builder.js

@@ -0,0 +1,118 @@
+export default {
+
+  components: [
+
+    { type:"Flex", name:"3 Column Layout", group:"Layouts", thumbnailUrl:"/images/templates/3-column-layout1.png", items:[{ type:"Flex", name:"Flex", group:"Components","items":[{ type:"Article", name:"Article", group:"Components","props":{"htmlText":"Left","padding":["p-6",""],enabled:true,"direction":["flex-column"],"gap":["gap-2"], name:"Dummy Text"}}],"props":{"direction":["flex-col"],enabled:true,"width":["","md:w-2/12"], name:"Left"}},{ type:"Flex", name:"Flex", group:"Components","items":[{ type:"Article", name:"Article", group:"Components","props":{"htmlText":"Middle","padding":["p-6",""],enabled:true,"direction":["flex-column"],"gap":["gap-2"], name:"Dummy Text"}}],"props":{"direction":["flex-col"],enabled:true,"width":[null,"md:flex-1"], name:"Middle"}},{ type:"Flex", name:"Flex", group:"Components","items":[{ type:"Article", name:"Article", group:"Components","props":{"htmlText":"Right","padding":["p-6",""],enabled:true,"direction":["flex-column"],"gap":["gap-2"], name:"Dummy Text"}}],"props":{"direction":["flex-col"],enabled:true,"width":[null,"md:w-3/12"], name:"RIght"}}],"props":{"direction":["flex-col","md:flex-row"],"gap":[null,"md:gap-4"],enabled:true, name:"3 Column Layout"}},
+
+    { type:"Flex", name:"Thumbnails", group:"Sections", thumbnailUrl:"/images/templates/thumbnails.gif","items":[{ type:"Flex", name:"Flex", group:"Components","items":[{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Thumbnails","tagName":"h5","flex":["flex-1"]}},{ type:"Link", name:"Link", group:"Components","props":{ enabled:true,"textColor":["text-primary-500"],"direction":["flex-column"],"gap":["gap-2"],"text":"More Thumbnails"},"items":[]}],"props":{"direction":["flex-row"],enabled:true,"flexAlign":["items-center"]}},{ type:"Flex", name:"Flex", group:"Components","items":[{ type:"Thumbnail", name:"Thumbnail", group:"Components","props":{ enabled:true,"width":["w-5/12"],"direction":["flex-column"],"gap":["gap-2"],"flex":["flex-0"]},"items":[]},{ type:"Thumbnail", name:"Thumbnail", group:"Components","props":{ enabled:true,"width":["w-5/12"],"direction":["flex-column"],"gap":["gap-2"],"flex":["flex-0"]},"items":[]},{ type:"Thumbnail", name:"Thumbnail", group:"Components","props":{ enabled:true,"width":["w-5/12"],"direction":["flex-column"],"gap":["gap-2"],"flex":["flex-0"]},"items":[]}],"props":{"direction":["flex-row"],"gap":["gap-4"],enabled:true,"overflow":["overflow-x-scroll"],"width":["w-full"],"minWidth":["min-w-0"]}}],"props":{"direction":["flex-col"],"gap":["gap-2"],enabled:true,"padding":["p-5",""], name:"Thumbnails"}},
+
+    { type:"Carousel", name:"Image Carousel", group:"Sections", thumbnailUrl:"/images/templates/carousel1.png","items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["/assets/web/banner1.jpg"],enabled:true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-amber-300"]}},{ type:"Image", name:"Image", group:"Components","props":{"src":["/assets/web/banner1.jpg"],enabled:true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-lime-300"]}},{ type:"Image", name:"Image", group:"Components","props":{"src":["/assets/web/banner1.jpg"],enabled:true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-blue-300"]}}],"props":{ enabled:true,"containerGap":["gap-2"],"padding":["p-4",""],"direction":["flex-column"],"gap":["gap-2"],"useLegend":true}},
+
+    { type:"Link", name:"Icon Link", group:"Sections", thumbnailUrl:"/images/templates/icon-link.png","props":{ enabled:true,name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":[],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"","fontWeight":["font-normal"],enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Icon Link 1"}}]},
+
+    { type:"Carousel", name:"Icon Link Carousel", group:"Sections", thumbnailUrl:"/images/templates/icon-link-carousel.gif", items:[{ type:"Grid", name:"Grid", group:"Components", thumbnailUrl:"/images/templates/grid1.png","items":[{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["059bae0eadf1b650f3acff7dd1e7433a.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 1","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["c7e8d12c0dcda3b9d3b2862559a8bc2e.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 2","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["47bcb782edfc426c8506664cc3b320e7.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 3","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["01e5a3e8f0e89562a7f6a5449be44614.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 4","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["7d7cc53e346aa5abf1f1ada463ed0e5c.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 5","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["4a1d1808e9f1be18f0ba18322647a11e.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 6","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["1b7f9673aeee9ebdf305658a54c63dc8.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 7","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["71828d52f682527cd500c1ba6c2a9ef0.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 8","fontSize":["text-sm"]}}]}],"gap":[],"props":{"columns":["grid-cols-4"],"gap":["gap-5"],enabled:true,"direction":["flex-column"],"padding":["p-5",""]}},{ type:"Grid", name:"Grid", group:"Components", thumbnailUrl:"/images/templates/grid1.png","items":[{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["71828d52f682527cd500c1ba6c2a9ef0.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 9","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["059bae0eadf1b650f3acff7dd1e7433a.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 10","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["4a1d1808e9f1be18f0ba18322647a11e.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 11","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["7d7cc53e346aa5abf1f1ada463ed0e5c.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 12","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["47bcb782edfc426c8506664cc3b320e7.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 13","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["c7e8d12c0dcda3b9d3b2862559a8bc2e.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 14","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["4a1d1808e9f1be18f0ba18322647a11e.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 15","fontSize":["text-sm"]}}]},{ type:"Link", name:"Icon Link", group:"Sections","props":{ enabled:true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"], name:"Icon Link"},"items":[{ type:"Image", name:"Image", group:"Components","props":{"src":["059bae0eadf1b650f3acff7dd1e7433a.png"],enabled:true,"direction":["flex-column"],"gap":["gap-2"]}},{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"",enabled:true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 16","fontSize":["text-sm"]}}]}],"gap":[],"props":{"columns":["grid-cols-4"],"gap":["gap-5"],enabled:true,"direction":["flex-column"],"padding":["p-5",""]}}],"props":{ enabled:true,"containerGap":["gap-2"],"padding":["p-4",""],"direction":["flex-column"],"gap":["gap-2"],"useLegend":true,"bgColors":["bg-gray-200"], name:"Icon Link Carousel"}},
+
+    { type:'ContactForm', name:'Contact Form', group:'Widgets', thumbnailUrl:"/images/templates/contact-form1.png", props:{
+        fields:[
+          { type:'name', label:'Nama', required:true },
+          { type:'mobileNumber', label:'Nomor HP', required:true },
+          { type:'remark', label:'Pertanyaan' },
+        ],
+        title: 'Contact Us',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent gravida erat eget nisi',
+        submitMethod: 'post',
+        submitUrl: '/inquiry',
+        onSubmit:[],
+      }},
+
+    { type:'IconList', name:'Icon List', group:'Widgets', props:{
+        icons:[], columns:[ 'grid-cols-4' ],
+      }},
+
+    { type:'DataList', name:'Data List', group:'Widgets', props:{}, items:[] },
+
+    { type:'FAQ', name:'FAQ', group:'Widgets', thumbnailUrl:"/images/templates/faq.gif", props:{ items:[] }},
+
+    { type:'FeatureList', name:'Feature List', group:'Widgets', props:{ items:[], columns:[], variant:['variant1'] }},
+
+    { type:'Review', name:'Review', group:'Widgets', props:{} },
+
+    { type:'Share', name:'Share To', group:'Widgets', props:{ channels:[] }},
+
+    { type:'Testimonial', name:'Testimonial', group:'Widgets', props:{} },
+
+    {
+      type:'Header2',
+      name:'Header 2',
+      group:'Widgets',
+      props:{},
+      slots:{
+        left: [],
+        mid: [],
+        right: []
+      }
+    },
+
+    { type:'ThumbnailList', name:'Thumbnail List', group:'Widgets', props:{ items:[] } },
+
+    { type:'ProductDetail', name:'Product Detail', props:{}, group:'Widgets' },
+
+    { type:"Flex", name:"Section 1", group:"Components","items":[{ type:"TextBlock", name:"TextBlock", group:"Components","props":{"htmlText":"","fontSize":["text-4xl"],enabled:true,"text":"Drive more revenue at lower costs\n","fontWeight":["font-semibold"]}},{ type:"Paragraph", name:"Paragraph", group:"Components","props":{"name":"Paragraph",enabled:true,"text":"Reach every customer on their own preferred channel with dynamic, omnichannel campaigns, using channel-responsive templates.","html":"Reach every customer on their own preferred channel with dynamic, omnichannel campaigns, using channel-responsive templates.","maxWidth":["max-w-lg"],"fontSize":["text-xl"]}},{ type:"Flex", name:"Flex", group:"Components","items":[{ type:"Button", name:"Button", group:"Components","props":{"name":"Button","text":"Start Now",enabled:true,"padding":["px-3 py-0"],"fontSize":["text-xl"]}},{ type:"Button", name:"Button", group:"Components","props":{"name":"Button","text":"Contact Sales",enabled:true,"variant":"outline","padding":["p-3"],"fontSize":["text-xl"]}}],"props":{"direction":["flex-row"],"gap":["gap-3"],enabled:true}}],"props":{"direction":["flex-col"],"gap":["gap-4"],enabled:true,"padding":["p-8"],"margin":["mx-auto"],"width":["w-full"],"maxWidth":["max-w-screen-xl"]}},
+
+    { type:"Carousel", name:"Carousel", group:"Components","items":[],"props":{ enabled:true,"containerGap":["gap-2"],"padding":["p-4",""],"direction":["flex-column"],"gap":["gap-2"],"useLegend":true}},
+
+    { type:'Link', name:'Link', group:'Components', props:{}, items:[] },
+
+    { type:'Modal', name:'Modal', group:'Components', props:{}, items:[] },
+
+    { type:'Thumbnail', name:'Thumbnail', group:'Components', props:{}, items:[] },
+
+    { type:'Ahref', name:'Ahref', group:'Components', props:{ name:'Ahref', text:'Ahref' } },
+
+    { type:'Paragraph', name:'Paragraph', group:'Components', thumbnailUrl:"/images/templates/paragraph1.png", props:{ name:'Paragraph' } },
+
+    { type:'Button', name:'Button', group:'Components', props:{ name:'Button', text:'Button' }},
+
+    { type:'Flex', name:'Flex', group:'Components', items:[], props:{ direction: [ 'flex-row' ] }},
+
+    { type:'Grid', name:'Grid', group:'Components', thumbnailUrl:"/images/templates/grid1.png", items:[], gap:[], props:{ columns: [], gap: [] }},
+
+    { type:'Image', name:'Image', group:'Components', props:{ src:[] }},
+
+    { type:'EmbeddedVideo', name:'Video', group:'Components', props:{ src:[] }},
+
+    { type:'Article', name:'Article', group:'Components', props:{
+        htmlText:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis odio at odio dapibus, " +
+          "eget molestie risus semper. Aenean magna tellus, aliquet nec tristique eget, lacinia nec urna.",
+      }},
+
+    { type:'Table', name:'Table', group:'Components', props:{ items: [] }},
+
+    { type:'TextBlock', name:'TextBlock', group:'Components', props:{
+        htmlText:'',
+        fontFamily:[], fontSize:[], fontWeight:[], textColor:[]
+      }},
+
+    { type:'Block', name:'Block', group:'Components', items:[], props:{}},
+
+    { type:'Countdown', name:'Countdown', group:'Components', props:{}},
+
+    { type:'YoutubeVideo', name:'Youtube Video', group:'Components', props:{ name:"Youtube Video", delay:"0" }},
+
+    { type:'Svg', name:'Svg', group:'Components', props:{}},
+
+    { type:'MenuItem1', name:'Menu Item 1', group:'Components', props:{}},
+
+    { type:'CollapsiblePanel', name:'Collapsible Panel', group:'Components', props:{}, items:[] },
+
+    { type:'AccountIcon', name:'Account Icon', group:'Components', props:{} },
+    { type:'CartIcon', name:'Cart Icon', group:'Components', props:{} },
+    { type:'SearchModal', name:'Search Modal', group:'Components', props:{} },
+    { type:'404', name:'Page 404', group:'Components', props:{} },
+
+    { type:'Cart', name:'Cart', group:'Components', props:{ apiUrl:'/cart' } },
+    { type:'Checkout', name:'Checkout', group:'Components', props:{ apiUrl:'/checkout' } },
+
+  ]
+
+}

package/src/directives/intersect.js

@@ -0,0 +1,26 @@
+// directives/intersect.js
+export default {
+  mounted(el, binding) {
+    const callback = binding.value;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach(entry => {
+          callback({
+            inViewport: entry.isIntersecting,
+            entry
+          });
+        });
+      },
+      {
+        threshold: 0.1, // adjust sensitivity
+      }
+    );
+
+    observer.observe(el);
+    el._observer = observer;
+  },
+  unmounted(el) {
+    if (el._observer) el._observer.disconnect();
+  }
+};

package/src/hooks/device.js

@@ -0,0 +1,14 @@
+import {reactive} from "vue";
+
+export function useDevice(){
+
+  const device = reactive({
+    type: 'mobile',
+    media: '',
+    mediaIndex: 0
+  })
+
+  return {
+    device
+  }
+}

package/src/index.js

@@ -1,38 +1,25 @@
-import {defineAsyncComponent, reactive} from "vue"
-import {observeInit} from './utils/helpers.mjs'
-import throttle from "lodash/throttle"
+import {defineAsyncComponent, ref} from "vue"
+import {arrayPush, arrayRemove, arrayUnshift, downloadUrl, invokeAfterIdle, observeInit} from './utils/helpers.mjs'
 import dayjs from "dayjs";
-import groupBy from "lodash/groupBy";
+import {useDevice} from './hooks/device.js'
+import IntersectDirective from './directives/intersect';
 
 
 let _UNIQID = 0
 const uniqid = (additionalKey = '') => {
-  return 'u' + Math.random().toString(36).substr(2) + Date.now().toString(36)
+  return 'u' + (++_UNIQID)
 }
 
 const mediaBreakpoints = [
   [ 640, 'sm:' ],
   [ 768, 'md:' ],
-  [ 1024, 'lg:' ],
   [ 1280, 'xl:' ],
   [ 1536, '2xl:' ],
 ]
 
-const download = (url, as) => {
-  url = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'nocache=' + new Date().getTime()
+const { device } = useDevice()
 
-  const downloader = document.createElement('a')
-  downloader.setAttribute('href', url)
-  downloader.target = '_blank'
-  if(as) downloader.download = as
-  document.body.appendChild(downloader)
 
-  downloader.click()
-
-  window.setTimeout(() => {
-    document.body.removeChild(downloader)
-  }, 100)
-}
 
 let preloads = []
 
@@ -208,83 +195,11 @@ const util = {
     window.addEventListener('mouseup', onMouseUp)
   },
 
-  push: (arr, items, opt = { update:true }) => {
-    if(!Array.isArray(arr)) return
-    if(!Array.isArray(items)) items = [ items ]
-    if(!opt.key){
-      opt.key = items[0] && items[0].uid ? 'uid' : 'id'
-    }
-
-    for(let item of items){
-      if(!item) continue
-
-      const index = arr.findIndex((_) => _[opt.key] === item[opt.key])
-      if(index >= 0){
-        if(opt.update !== false){
-          Object.assign(arr[index], item)
-        }
-      }
-      else{
-        arr.push(item)
-      }
-    }
-  },
+  push: arrayPush,
 
-  remove: (arr, items, opt = {}) => {
-    if(!Array.isArray(arr)) return
-    if(!Array.isArray(items)) items = [ items ]
-    if(!opt.key){
-      opt.key = items[0] && items[0].uid ? 'uid' : 'id'
-    }
-
-    items = groupBy(items, opt.key)
-
-    for(let i = arr.length - 1 ; i >= 0 ; i--){
-      if(!arr[i]) continue
-
-      if(arr[i][opt.key] in items){
-        arr.splice(i, 1)
-      }
-    }
-  },
-
-  unshift: (arr, items, opt = {}) => {
-    if(!Array.isArray(arr)) return
-    if(!Array.isArray(items)) items = [ items ]
-    if(items.length < 1) return
-
-    if(!opt.key){
-      opt.key = items[0] && items[0].uid ? 'uid' : 'id'
-    }
+  remove: arrayRemove,
 
-    opt = Object.assign({ key:"id", highlight:false }, opt)
-
-    for(let item of items) {
-      if (!item) continue
-
-      const index = arr.findIndex((_) => _[opt.key] === item[opt.key])
-      if(index >= 0){
-
-        const keys = []
-        for(let key in item){
-          if(!(key in arr[index]) || arr[index][key] !== item[key]){
-            keys.push(key)
-          }
-        }
-
-        if(opt.highlight){
-          item._highlight = keys
-        }
-        Object.assign(arr[index], item)
-      }
-      else{
-        if(opt.highlight){
-          item._highlight = true
-        }
-        arr.unshift(item)
-      }
-    }
-  },
+  unshift: arrayUnshift,
 
   removeEmpty(array, emptyValues = [ '', '{}', '[]' ]){
     if(!Array.isArray(array)) return
@@ -400,9 +315,10 @@ export default{
 
     const privateVars = {}
 
+    app.config.globalProperties.$t = t => t
     app.config.globalProperties.uniqid = uniqid
     app.config.globalProperties.formatDate = formatDate
-    app.config.globalProperties.$download = download
+    app.config.globalProperties.$download = downloadUrl
     app.config.globalProperties.$preload = preload
     app.config.globalProperties.$popPreloads = popPreloads
     app.config.globalProperties.$util = util
@@ -414,11 +330,7 @@ export default{
     app.config.globalProperties.time = consoleTime
     app.config.globalProperties.timeLog = consoleTimeLog
     app.config.globalProperties.timeEnd = consoleTimeEnd
-    app.config.globalProperties.$device = reactive({
-      type: 'mobile',
-      media: '',
-      mediaIndex: 0
-    })
+    app.config.globalProperties.$device = device
     app.config.globalProperties.$isDebugMode = () => {
       if(!('isDebugMode' in privateVars)){
         privateVars.isDebugMode = location.search.indexOf('debug-mode') >= 0 ||
@@ -443,7 +355,7 @@ export default{
           switch(_value){
 
             case 'required':
-              if(!(key in obj)){
+              if(!(key in obj) || obj[key] === ''){
                 keyErrors.push(`${key} is required`)
               }
               break
@@ -461,6 +373,8 @@ export default{
         errors :
         undefined
     }
+    app.config.globalProperties.$mounted = ref(false)
+    app.config.globalProperties.$editMode = ref(0)
 
     if(typeof window !== 'undefined') {
 
@@ -468,14 +382,14 @@ export default{
         app.config.globalProperties.$observe = observeInit()
       }
 
-      const onWindowResize = throttle(() => {
+      const onWindowResize = invokeAfterIdle(() => {
         Object.assign(app.config.globalProperties.$device, {
           type: getDeviceType(),
           ...util.calculateMediaPrefix(document.documentElement.clientWidth)
         })
 
         resizeEvents.forEach((fn) => fn())
-      }, 300, {leading: true})
+      }, 100)
       window.addEventListener('resize', onWindowResize)
 
       app.config.globalProperties.$addResizeListener = (el, fn) => {
@@ -509,23 +423,30 @@ export default{
           ...util.calculateMediaPrefix(document.documentElement.clientWidth)
         })
       }
+
+      app.config.globalProperties.$mounted.value = true
     }
 
+    app.directive('intersect', IntersectDirective)
+
     app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
     app.component('Paragraph', defineAsyncComponent(() => import("./components/Paragraph.vue")))
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
+    app.component('ArrayList', defineAsyncComponent(() => import("./components/ArrayList.vue")))
     app.component('Article', defineAsyncComponent(() => import("./components/Article.vue")))
     app.component('Block', defineAsyncComponent(() => import("./components/Block.vue")))
     app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
     app.component('Box', defineAsyncComponent(() => import("./components/Box.vue")))
+    app.component('Card', defineAsyncComponent(() => import("./components/Card.vue")))
     app.component('ChartBar', defineAsyncComponent(() => import("./components/ChartBar.vue")))
     app.component('ColorPicker', defineAsyncComponent(() => import("./components/ColorPicker.vue")))
     app.component('ColorPicker2', defineAsyncComponent(() => import("./components/ColorPicker2.vue")))
+    app.component('ColorPicker3', defineAsyncComponent(() => import("./components/ColorPicker3.vue")))
     app.component('Confirm', defineAsyncComponent(() => import("./components/Confirm.vue")))
-    app.component('SearchButton', defineAsyncComponent(() => import("./components/SearchButton.vue")))
     app.component('ChatTyping', defineAsyncComponent(() => import("./components/ChatTyping.vue")))
     app.component('Checkbox', defineAsyncComponent(() => import("./components/Checkbox.vue")))
     app.component('CodeEditor', defineAsyncComponent(() => import("./components/CodeEditor.vue")))
+    app.component('SvgEditor', defineAsyncComponent(() => import("./components/SvgEditor.vue")))
     app.component('CopyToClipboard', defineAsyncComponent(() => import("./components/CopyToClipboard.vue")))
     app.component('Countdown', defineAsyncComponent(() => import("./components/Countdown.vue")))
     app.component('Datepicker', defineAsyncComponent(() => import("./components/Datepicker.vue")))
@@ -540,6 +461,8 @@ export default{
     app.component('IconMenu2', defineAsyncComponent(() => import("./components/IconMenu2.vue")))
     app.component('IconPlus', defineAsyncComponent(() => import("./components/IconPlus.vue")))
     app.component('Image', defineAsyncComponent(() => import("./components/Image.vue")))
+    app.component('ImageUploader', defineAsyncComponent(() => import("./components/ImageUploader.vue")))
+    app.component('Video', defineAsyncComponent(() => import("./components/Video.vue")))
     app.component('Image360', defineAsyncComponent(() => import("./components/Image360.vue")))
     app.component('ImagePreview', defineAsyncComponent(() => import("./components/ImagePreview.vue")))
     app.component('ImageFullScreen', defineAsyncComponent(() => import("./components/ImageFullScreen.vue")))
@@ -555,8 +478,11 @@ export default{
     app.component('ListViewTableSummary', defineAsyncComponent(() => import("./components/ListViewTableSummary.vue")))
     app.component('ListViewLineSummary', defineAsyncComponent(() => import("./components/ListViewLineSummary.vue")))
     app.component('ListViewMapSummary', defineAsyncComponent(() => import("./components/ListViewMapSummary.vue")))
+    app.component('MultiDropdown', defineAsyncComponent(() => import("./components/MultiDropdown.vue")))
     app.component('Carousel', defineAsyncComponent(() => import("./components/Carousel.vue")))
     app.component('ContextMenu', defineAsyncComponent(() => import("./components/ContextMenu.vue")))
+    app.component('ContextMenuItem', defineAsyncComponent(() => import("./components/ContextMenuItem.vue")))
+    app.component('ListContextMenu', defineAsyncComponent(() => import("./components/ListContextMenu.vue")))
     app.component('FAQ', defineAsyncComponent(() => import("./widgets/FAQ.vue")))
     app.component('Flex', defineAsyncComponent(() => import("./components/Flex.vue")))
     app.component('Grid', defineAsyncComponent(() => import("./components/Grid.vue")))
@@ -574,6 +500,9 @@ export default{
     app.component('Toast', defineAsyncComponent(() => import("./components/Toast.vue")))
     app.component('TreeView', defineAsyncComponent(() => import("./components/TreeView.vue")))
     app.component('TreeViewItem', defineAsyncComponent(() => import("./components/TreeViewItem.vue")))
+    app.component('TreeView2', defineAsyncComponent(() => import("./components/TreeView2.vue")))
+    app.component('TreeViewItem2', defineAsyncComponent(() => import("./components/TreeViewItem2.vue")))
+    app.component('Uploader', defineAsyncComponent(() => import("./components/Uploader.vue")))
     app.component('VirtualGrid', defineAsyncComponent(() => import("./components/VirtualGrid.vue")))
     app.component('VirtualScroll', defineAsyncComponent(() => import("./components/VirtualScroll.vue")))
     app.component('VirtualTable', defineAsyncComponent(() => import("./components/VirtualTable.vue")))
@@ -619,13 +548,15 @@ export default{
     app.component('FAQSetting', defineAsyncComponent(() => import("./widgets/FAQSetting.vue")))
     app.component('FeatureList', defineAsyncComponent(() => import("./widgets/FeatureList.vue")))
     app.component('FeatureListSetting', defineAsyncComponent(() => import("./widgets/FeatureListSetting.vue")))
+    app.component('BackgroundColorSetting', defineAsyncComponent(() => import("./widgets/BackgroundColorSetting.vue")))
+    app.component('BorderColorSetting', defineAsyncComponent(() => import("./widgets/BorderColorSetting.vue")))
     app.component('FlexSetting', defineAsyncComponent(() => import("./widgets/FlexSetting.vue")))
     app.component('GridSetting', defineAsyncComponent(() => import("./widgets/GridSetting.vue")))
     app.component('Header', defineAsyncComponent(() => import("./widgets/Header.vue")))
-    app.component('Header1', defineAsyncComponent(() => import("./widgets/Header1.vue")))
+    app.component('Header0', defineAsyncComponent(() => import("./widgets/Header0.vue")))
     app.component('Header2', defineAsyncComponent(() => import("./widgets/Header2.vue")))
     app.component('HeaderSetting', defineAsyncComponent(() => import("./widgets/HeaderSetting.vue")))
-    app.component('Header1Setting', defineAsyncComponent(() => import("./widgets/Header1Setting.vue")))
+    app.component('Header0Setting', defineAsyncComponent(() => import("./widgets/Header0Setting.vue")))
     app.component('Header2Setting', defineAsyncComponent(() => import("./widgets/Header2Setting.vue")))
     app.component('IconList', defineAsyncComponent(() => import("./widgets/IconList.vue")))
     app.component('IconListSetting', defineAsyncComponent(() => import("./widgets/IconListSetting.vue")))
@@ -635,6 +566,7 @@ export default{
     app.component('MarginPaddingSetting', defineAsyncComponent(() => import("./widgets/MarginPaddingSetting.vue")))
     app.component('MultiValueSetting', defineAsyncComponent(() => import("./widgets/MultiValueSetting.vue")))
     app.component('MultiValueSetting2', defineAsyncComponent(() => import("./widgets/MultiValueSetting2.vue")))
+    app.component('PositionSetting', defineAsyncComponent(() => import("./widgets/PositionSetting.vue")))
     app.component('PaddingSetting', defineAsyncComponent(() => import("./widgets/PaddingSetting.vue")))
     app.component('ParagraphSetting', defineAsyncComponent(() => import("./widgets/ParagraphSetting.vue")))
     app.component('Review', defineAsyncComponent(() => import("./widgets/Review.vue")))
@@ -678,16 +610,39 @@ export default{
     app.component('TypographySetting', defineAsyncComponent(() => import("./widgets/TypographySetting.vue")))
     app.component('FiltersSetting', defineAsyncComponent(() => import("./widgets/FiltersSetting.vue")))
     app.component('MenuEditor', defineAsyncComponent(() => import("./widgets/MenuEditor.vue")))
-    app.component('Dashboard', defineAsyncComponent(() => import("./widgets/Dashboard.vue")))
+    app.component('Dashboard', defineAsyncComponent(() => import("./components/Dashboard.vue")))
+    app.component('Dashboard2', defineAsyncComponent(() => import("./components/Dashboard2.vue")))
     app.component('Text', defineAsyncComponent(() => import("./components/Text.vue")))
+    app.component('MenuItem1', defineAsyncComponent(() => import("./components/MenuItem1.vue")))
+    app.component('MenuItem1Setting', defineAsyncComponent(() => import("./widgets/MenuItem1Setting.vue")))
+    app.component('CollapsiblePanel', defineAsyncComponent(() => import("./components/CollapsiblePanel.vue")))
+    app.component('CollapsiblePanelSetting', defineAsyncComponent(() => import("./widgets/CollapsiblePanelSetting.vue")))
+    app.component('VirtualTableSetting', defineAsyncComponent(() => import("./widgets/Dashboard/VirtualTableSetting.vue")))
 
     app.component('Doughnut', defineAsyncComponent(() => import("./widgets/Dashboard/Doughnut.vue")))
     app.component('Pie', defineAsyncComponent(() => import("./widgets/Dashboard/Pie.vue")))
     app.component('PolarArea', defineAsyncComponent(() => import("./widgets/Dashboard/PolarArea.vue")))
     app.component('Metric', defineAsyncComponent(() => import("./widgets/Dashboard/Metric.vue")))
     app.component('BarChart', defineAsyncComponent(() => import("./widgets/Dashboard/BarChart.vue")))
+    app.component('DataTable', defineAsyncComponent(() => import("./widgets/Dashboard/DataTable.vue")))
 
     app.component('BotEditor', defineAsyncComponent(() => import("./widgets/BotEditor.vue")))
+
+    app.component('AccountIcon', defineAsyncComponent(() => import("./components/AccountIcon.vue")))
+    app.component('CartIcon', defineAsyncComponent(() => import("./components/CartIcon.vue")))
+
+    app.component('SearchModal', defineAsyncComponent(() => import("./components/SearchModal.vue")))
+    app.component('SearchModalSetting', defineAsyncComponent(() => import("./widgets/SearchModalSetting.vue")))
+
+    app.component('404', defineAsyncComponent(() => import("./components/404.vue")))
+    app.component('Cart', defineAsyncComponent(() => import("./components/Cart.vue")))
+    app.component('CartSetting', defineAsyncComponent(() => import("./widgets/CartSetting.vue")))
+
+    app.component('Checkout', defineAsyncComponent(() => import("./components/Checkout.vue")))
+    app.component('CheckoutSetting', defineAsyncComponent(() => import("./widgets/CheckoutSetting.vue")))
+    app.component('TreeMenu', defineAsyncComponent(() => import("./components/TreeMenu.vue")))
+    app.component('MarkdownEdit', defineAsyncComponent(() => import("./components/MarkdownEdit.vue")))
+    app.component('MarkdownPreview', defineAsyncComponent(() => import("./components/MarkdownPreview.vue")))
   }
 
 }