@mixd-id/web-scaffold 0.1.230406310 → 0.1.230406312

package/package.json

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

package/src/App.vue

@@ -4,6 +4,14 @@
 
 <script>
 
+export default {
+  name: 'App',
+
+  setup(){
+
+  }
+}
+
 </script>
 
 <style>
@@ -14,4 +22,4 @@
 <style module>
 
 
-</style>
+</style>

package/src/components/Button.vue

@@ -210,14 +210,14 @@ export default{
 }
 
 .button-secondary{
-	@apply bg-primary-100 border-primary-100 text-primary-700 rounded-lg text-text;
-  border: solid 1px rgb(var(--primary-100));
+	@apply bg-secondary-500 border-secondary-500 text-primary-700 rounded-lg text-white;
+  border: solid 1px rgb(var(--secondary-500));
 }
 .button-secondary:hover{
-	@apply bg-primary-200 border-primary-200;
+	@apply bg-secondary-600 border-secondary-600;
 }
 .button-secondary:disabled{
-	@apply bg-primary-100 top-0 left-0 cursor-not-allowed;
+	@apply bg-secondary-400 border-secondary-400 cursor-not-allowed;
 }
 .button-secondary *{
 	@apply text-text-500 fill-white;

package/src/components/Carousel.vue

@@ -12,8 +12,7 @@
     </div>
 
     <div v-if="items && items.length > 1" :class="$style.carouselNext" @click="next(true)">
-      <slot name="next">
-      </slot>
+      <slot name="next"></slot>
     </div>
 
 		<div v-if="items && items.length > 1" :class="$style.carouselPrev" @click="prev">
@@ -179,7 +178,8 @@ export default{
     },
 
 		play(){
-			this.timeoutId = window.setTimeout(() => { this.next(true); this.play() }, this.autoPlay)
+      if(this.autoPlay > 0)
+			  this.timeoutId = window.setTimeout(() => { this.next(true); this.play() }, this.autoPlay)
 		},
 
 		stop(){

package/src/components/ColorPicker2.vue

@@ -83,7 +83,7 @@ export default{
 
 		select(color){
 			if(this.mode === 'class'){
-				this.$emit('update:modelValue', color ? this.keys[0][0] + color : '')
+				this.$emit('update:modelValue', color ? `${this.prefix}${this.keys[0][0]}` + color : '')
 			}
 			else{
         if(this.valueType === 'rgb'){

package/src/components/Image.vue

@@ -14,7 +14,7 @@
     </slot>
 
     <div v-else-if="status === 2 && actualSrc.indexOf('<svg') >= 0" v-html="actualSrc"></div>
-    <img v-else-if="status === 2" :class="computedItemClass" :src="actualSrc" ref="img" />
+    <img v-else-if="status === 2" :class="computedItemClass" :src="actualSrc" ref="img" :alt="alt" />
 
 		<slot v-else-if="status === 3" name="error" :instance="this"></slot>
 
@@ -45,6 +45,8 @@ export default{
 
   props:{
 
+    alt: String,
+
     eager: {
       type: [ Boolean, String ],
       default: false
@@ -207,9 +209,9 @@ export default{
 			else if(Array.isArray(this.src)){
 
 				const src = {}
-				src['all'] = import.meta.env.VITE_IMAGE_HOST + '/' + this.src[0]
+				src['all'] = this.src[0]
 				if(this.src[1]){
-					src['md'] = import.meta.env.VITE_IMAGE_HOST + '/' + this.src[1]
+					src['md'] = this.src[1]
 				}
 
 				let imgSrc

package/src/components/ImagePreview.vue

@@ -4,10 +4,10 @@
 			<div class="flex flex-row gap-4 justify-end items-center p-3 pr-6">
         <slot name="moreButtons"></slot>
 				<a v-if="download" :href="imageUrl" target="_blank" download>
-          <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M480 352h-133.5l-45.25 45.25C289.2 409.3 273.1 416 256 416s-33.16-6.656-45.25-18.75L165.5 352H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456zM233.4 374.6C239.6 380.9 247.8 384 256 384s16.38-3.125 22.62-9.375l128-128c12.49-12.5 12.49-32.75 0-45.25c-12.5-12.5-32.76-12.5-45.25 0L288 274.8V32c0-17.67-14.33-32-32-32C238.3 0 224 14.33 224 32v242.8L150.6 201.4c-12.49-12.5-32.75-12.5-45.25 0c-12.49 12.5-12.49 32.75 0 45.25L233.4 374.6z"/></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" class="fill-text" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M480 352h-133.5l-45.25 45.25C289.2 409.3 273.1 416 256 416s-33.16-6.656-45.25-18.75L165.5 352H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456zM233.4 374.6C239.6 380.9 247.8 384 256 384s16.38-3.125 22.62-9.375l128-128c12.49-12.5 12.49-32.75 0-45.25c-12.5-12.5-32.76-12.5-45.25 0L288 274.8V32c0-17.67-14.33-32-32-32C238.3 0 224 14.33 224 32v242.8L150.6 201.4c-12.49-12.5-32.75-12.5-45.25 0c-12.49 12.5-12.49 32.75 0 45.25L233.4 374.6z"/></svg>
         </a>
 				<button @click="close">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="fill-text" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
         </button>
 			</div>
 			<div class="flex items-center justify-center">

package/src/components/Modal.vue

@@ -308,7 +308,7 @@ export default{
 
 .bW9k{
 	@apply z-20 hidden w-[100vw] h-[100vh];
-	@apply bg-white/50 backdrop-blur-md;
+	@apply bg-white/50 backdrop-blur-xl;
   position: fixed;
   top: 0;
   left: 0;
@@ -334,7 +334,7 @@ export default{
   background-color: rgba(255, 255, 255, .6)
 }
 html[data-theme='dark'] .modal{
-  background-color: rgba(0, 0, 0, .3)
+  background-color: rgba(0, 0, 0, .6)
 }
 
 .modal.v-show{

package/src/components/Text.vue

@@ -0,0 +1,34 @@
+<template>
+	<component :is="tag" v-html="htmlText2[$device.mediaIndex]"></component>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default{
+
+  mixins: [ componentMixin ],
+
+  props: {
+
+    tag: {
+      type: String,
+      default: 'div'
+    },
+
+    htmlText2: {
+      type: Array,
+      default: () => []
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+
+</style>

package/src/components/Textarea.vue

@@ -117,6 +117,10 @@ export default{
 
 	methods:{
 
+    focus(){
+      this.$refs.input.focus()
+    },
+
 		select(){
 			this.$refs.input.select()
 		},

package/src/components/Textbox.vue

@@ -92,7 +92,7 @@ export default{
 				switch(this.type){
 
 					case 'number':
-						const val = parseInt(this.modelValue)
+						const val = parseFloat(this.modelValue)
 						return isNaN(val) ? '' : val.toLocaleString()
 
 					default:

package/src/components/VirtualTable.vue

@@ -4,7 +4,7 @@
 			<table :class="$style.table" ref="tableHead" :style="tableHeadStyle">
 				<thead>
 				<tr>
-					<th v-for="column in visibleColumns" :style="thStyle(column)"
+					<th v-for="column in visibleColumns" :style="thStyle(column)" :class="thClass(column)"
               v-tooltip="`${column.label ? column.label : column.key}`">
 						<slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
 						<div v-else :class="headerColumnClass(column)">
@@ -64,7 +64,7 @@
 				<table :class="$style.table">
 					<tbody>
 					<tr>
-						<td v-for="column in columns" :style="thStyle(column)">
+						<td v-for="column in columns" :style="thStyle(column)" :class="thClass(column)">
 							<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="items[0]"></slot>
 							<slot v-else-if="$slots.default" name="default" :column="column" :item="items[0]"></slot>
 							<div v-else :class="columnClass(column)" v-html="formatColumn(items[0] ?? {}, column)"></div>
@@ -246,6 +246,16 @@ export default{
 			}
 		},
 
+    thClass(column){
+      let classNames = []
+
+      if(column.align){
+        classNames.push(`text-${column.align}`)
+      }
+
+      return classNames.join(' ')
+    },
+
 		async resize(){
 
 			this.$nextTick(() => {

package/src/index.js

@@ -10,13 +10,13 @@ const uniqid = (additionalKey = '') => {
   return 'u' + Math.random().toString(36).substr(2) + Date.now().toString(36)
 }
 
-const mediaBreakpoints = {
-  640: 'sm',
-  768: 'md',
-  1024: 'lg',
-  1280: 'xl',
-  1536: '2xl',
-}
+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()
@@ -291,14 +291,18 @@ const util = {
 
   calculateMediaPrefix(width){
 
-    let prefix = ''
-    for(let breakpoint in mediaBreakpoints){
+    let media = ''
+    let mediaIndex = 0
+    for(let breakpointIdx in mediaBreakpoints){
+      const [ breakpoint, breakpointPrefix ] = mediaBreakpoints[breakpointIdx]
       if(width > breakpoint){
-        prefix = mediaBreakpoints[breakpoint] ?? prefix
+        media = breakpointPrefix
+        mediaIndex = breakpointIdx
       }
+      else break
     }
 
-    return prefix
+    return { media, mediaIndex }
   },
 
   uniqid
@@ -403,29 +407,9 @@ export default{
     app.config.globalProperties.timeLog = consoleTimeLog
     app.config.globalProperties.timeEnd = consoleTimeEnd
     app.config.globalProperties.$device = reactive({
-
-      getValue: (arr) => {
-        if(Array.isArray(arr)){
-          let index = 0
-          switch(app.config.globalProperties.$device){
-            case 'md':
-              index = 1
-              break
-            case 'lg':
-              index = 2
-              break
-          }
-
-          for(let i = index ; i >= 0 ; i--){
-            if(arr && arr[i])
-              return arr[i]
-          }
-        }
-      },
-
       type: 'mobile',
       media: '',
-
+      mediaIndex: 0
     })
     app.config.globalProperties.$isDebugMode = () => {
       if(!('isDebugMode' in privateVars)){
@@ -477,18 +461,16 @@ export default{
       }
 
       const onWindowResize = throttle(() => {
-
         Object.assign(app.config.globalProperties.$device, {
           type: getDeviceType(),
-          media: util.calculateMediaPrefix(document.documentElement.clientWidth)
+          ...util.calculateMediaPrefix(document.documentElement.clientWidth)
         })
 
         resizeEvents.forEach((fn) => fn())
-      }, 1000, {leading: true})
+      }, 300, {leading: true})
       window.addEventListener('resize', onWindowResize)
 
       app.config.globalProperties.$addResizeListener = (el, fn) => {
-
         if (!resizeObserver) {
           resizeObserver = new ResizeObserver((entries) => {
             for (const entry of entries) {
@@ -515,8 +497,8 @@ export default{
       app.config.globalProperties.$onMounted = () => {
         Object.assign(app.config.globalProperties.$device, {
           type: getDeviceType(),
-          media: util.calculateMediaPrefix(document.documentElement.clientWidth),
-          touchSupported: isTouchSupported()
+          touchSupported: isTouchSupported(),
+          ...util.calculateMediaPrefix(document.documentElement.clientWidth)
         })
       }
     }
@@ -658,6 +640,7 @@ export default{
     app.component('WebPageBuilder', defineAsyncComponent(() => import("./widgets/WebPageBuilder.vue")))
     app.component('WebPageBuilder2', defineAsyncComponent(() => import("./widgets/WebPageBuilder2.vue")))
     app.component('WebPageBuilder3', defineAsyncComponent(() => import("./widgets/WebPageBuilder3.vue")))
+    app.component('WebPageBuilder4', defineAsyncComponent(() => import("./widgets/WebPageBuilder4.vue")))
     app.component('WebPagePreview', defineAsyncComponent(() => import("./widgets/WebPagePreview.vue")))
     app.component('WebComponentSelector', defineAsyncComponent(() => import("./widgets/WebComponentSelector.vue")))
     app.component('WebDatasourceSelector', defineAsyncComponent(() => import("./widgets/WebDatasourceSelector.vue")))
@@ -685,6 +668,7 @@ 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('Text', defineAsyncComponent(() => import("./components/Text.vue")))
   }
 
 }

package/src/main.js

@@ -5,14 +5,6 @@ import { createRouter } from './router'
 import WebScaffold from './index'
 import './index.css'
 
-const AppScaffold = {
-  install: (app, options) => {
-    app.component('PropertyTable', defineAsyncComponent(() => import("./pages/playground/components/PropertyTable.vue")))
-    app.component('Preview', defineAsyncComponent(() => import("./pages/playground/components/Preview.vue")))
-    app.component('SourceCode', defineAsyncComponent(() => import("./pages/playground/components/SourceCode.vue")))
-  }
-}
-
 export function createApp(){
 
   const app = createSSRApp(App)
@@ -22,7 +14,6 @@ export function createApp(){
   app.use(router)
   app.use(pinia)
   app.use(WebScaffold)
-  app.use(AppScaffold)
 
   return { app, router, pinia }
 }

package/src/mixin/component.js

@@ -67,6 +67,7 @@ export const componentMixin = {
     },
 
     htmlText: String,
+    htmlText2: Array,
 
     editSelectable: {
       type: undefined,
@@ -119,7 +120,7 @@ export const componentMixin = {
     },
 
     componentClick(e){
-      if(this.editMode !== 1) return
+      if(!this.editMode) return
 
       e.stopPropagation()
       e.preventDefault()

package/src/utils/helpers.js

@@ -140,11 +140,11 @@ const strSlug = (title, separator) => {
   return title.replace(new RegExp('^[' + separator + '\\s]+|[' + separator + '\\s]+$', 'g'),'');
 }
 
-const strVars = (text, vars) => {
+const strVars = (text, vars, opt = { emptyUndefined:true }) => {
 
   (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
     const key = match.substring(1, match.length - 1)
-    const value = vars[key] ?? ''
+    const value = vars[key] ?? (opt?.emptyUndefined ? '' : `{${key}}`)
     text = text.replace(match, value)
   })
 

package/src/utils/helpers.mjs

@@ -84,11 +84,11 @@ const parseBoolean = function(exp){
       exp.toLowerCase() : exp)
 }
 
-const strVars = function(text, vars){
+const strVars = function(text, vars, opt = { emptyUndefined:true }){
 
   (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
     const key = match.substring(1, match.length - 1)
-    const value = vars[key] ?? ''
+    const value = vars[key] ?? (opt?.emptyUndefined ? '' : `{${key}}`)
     text = text.replace(match, value)
   })
 

package/src/utils/preset-selector.js

@@ -995,7 +995,10 @@ const presetToSequelizeList = async(preset, {
       searchReplacements = syntaxSearchOpt.replacements
     }
     else{
-      const match = (config.columns ?? []).filter(_ => (_.search && _.key)).map(_ => _.key)
+      const match = (config.columns ?? [])
+        .filter(_ => (_.search && _.key))
+        .map(_ => typeof _.search === 'string' ? _.search : _.key)
+
       if(match !== null){
         const searchOpt = await searchToSequelizeWhere(search, {
           match

package/src/utils/wss.js

@@ -97,7 +97,12 @@ class WSS extends EventEmitter2{
     this._opt = opt
     this._instance = new WebSocket.Server(opt);
 
-    this._client = redis.createClient()
+    this._client = redis.createClient({
+      socket: {
+        host: process.env.REDIS_HOST ?? '127.0.0.1',
+        port: process.env.REDIS_PORT ?? 6379
+      }
+    })
     this._client.connect().then()
 
     this._instance.on('connection', async (socket, req) => {

package/src/utils/wss.mjs

@@ -128,8 +128,8 @@ class WSS extends EventEmitter2{
 
           if(this._opt.debug){
             status === 200 ?
-              console.log(new Date().getTime() - t1, path, params, data) :
-              console.error(new Date().getTime() - t1, path, params, data)
+              console.log(`${new Date().getTime() - t1}ms`, `l:${JSON.stringify(data ?? '').length}`, path, params, data) :
+              console.error(`${new Date().getTime() - t1}ms`, `l:${JSON.stringify(data ?? '').length}`, path, params, data)
           }
         }
       }