@mixd-id/web-scaffold 0.1.230406311 → 0.1.230406313

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406311",
+  "version": "0.1.230406313",
   "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/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/List.vue

@@ -250,7 +250,7 @@ import VirtualGrid from "./VirtualGrid.vue";
 import throttle from "lodash/throttle";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import groupBy from "lodash/groupBy";
-import { generatePivotColumns, sortsFn } from "../utils/preset-selector.mjs";
+import { generatePivotColumns, generateTotalColumns, sortsFn } from "../utils/preset-selector.mjs";
 import PresetBar from "../widgets/PresetBar.vue";
 
 export default{
@@ -340,12 +340,11 @@ export default{
           itemsPerPage: this.data.itemsPerPage,
         })
             .then(data => {
-
               generatePivotColumns(this.preset, data.items)
+              generateTotalColumns(this.preset, data.items)
               this.loadEnums(data.items)
               Object.assign(this.data, data ?? {})
               this.$emit('after-load')
-
             })
             .catch(err => {
               this.toast(err)
@@ -586,24 +585,60 @@ export default{
         const filters = []
 
         for(let idx in this.preset.pivot.rows){
-          const key = this.preset.pivot.rows[idx].key
+          const pivotRow = this.preset.pivot.rows[idx]
+          const key = pivotRow.key
           const presetColumn = this.preset.columns.find(_ => _.key === key)
-          let value = item[this.preset.pivot.rows[idx].key]
+          let value = item[pivotRow.key]
           switch(presetColumn.type){
 
             case 'bool':
             case 'boolean':
-              value = value === 'true'
+              filters.push({
+                key,
+                value: [{
+                  operator: '=',
+                  value: value === 'true'
+                }]
+              })
+              break
+
+            case 'date':
+              switch(pivotRow.aggregrate){
+
+                case 'hour':
+                  value = value.split('-')
+                  filters.push({
+                    key,
+                    value: [{
+                      operator: '>=',
+                      value: value[0] + ':00',
+                      fn: 'format_hour'
+                    }]
+                  })
+                  filters.push({
+                    key,
+                    value: [{
+                      operator: '<=',
+                      value: value[1] + ':59',
+                      fn: 'format_hour'
+                    }]
+                  })
+                  break
+
+              }
+              break
+
+            default:
+              filters.push({
+                key,
+                value: [{
+                  operator: '=',
+                  value
+                }]
+              })
               break
           }
 
-          filters.push({
-            key,
-            value: [{
-              operator: '=',
-              value
-            }]
-          })
         }
 
         let [ kk, ...vv ] = column.key.split('-')

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/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)">
@@ -32,18 +32,23 @@
 						</tr>
 						</thead>
 						<tbody ref="tbody">
-						<tr v-for="(item, index) in visibleItems" :key="item"
-								@click="select(item, index)"
-								:class="trClass(item, index)">
-							<td v-for="column in visibleColumns"
-									:class="tdClass(item, column)"
-                  @click="$emit('item-click', item, column)">
-								<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
-								<slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
-                <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
-							</td>
-							<td :class="$style.spacer"></td>
-						</tr>
+              <tr v-for="(item, index) in visibleItems" :key="item"
+                  @click="select(item, index)"
+                  :class="trClass(item, index)">
+                <td v-for="(column, columnIndex) in visibleColumns"
+                    :class="tdClass(item, column)"
+                    @click="$emit('item-click', item, column)">
+
+                  <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
+                  <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
+
+                  <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
+                  <slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
+                  <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
+
+                </td>
+                <td :class="$style.spacer"></td>
+              </tr>
 						</tbody>
 					</table>
 					<div v-if="state === 2" ref="spinner" class="h-[44px] relative">
@@ -64,7 +69,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 +251,16 @@ export default{
 			}
 		},
 
+    thClass(column){
+      let classNames = []
+
+      if(column.align){
+        classNames.push(`text-${column.align}`)
+      }
+
+      return classNames.join(' ')
+    },
+
 		async resize(){
 
 			this.$nextTick(() => {
@@ -333,8 +348,16 @@ export default{
 					case 'currency':
 						align = 'right'
 						break
+
+          default:
+            if(column.key.startsWith('_'))
+              align = 'center'
+            break
 				}
 			}
+      else{
+        align = column.align
+      }
 
       let appearanceClass = ''
       if(item && Array.isArray(column.appearances)){
@@ -351,93 +374,95 @@ export default{
             break
         }
 
-        for(let appearance of column.appearances){
-
-          let conditionMatched = false
-          for(let condition of appearance.conditions ?? []){
-            switch(condition.operator){
-
-              case '>':
-                if(value > condition.value){
+        if(!('_type' in item)){
+          for(let appearance of column.appearances){
+
+            let conditionMatched = false
+            for(let condition of appearance.conditions ?? []){
+              switch(condition.operator){
+
+                case '>':
+                  if(value > condition.value){
+                    conditionMatched = true
+                  }
+                  break
+
+                case '>=':
+                  if(value >= condition.value){
+                    conditionMatched = true
+                  }
+                  break
+
+                case '=':
+                  if(value === condition.value){
+                    conditionMatched = true
+                  }
+                  break
+
+                case '<':
+                  if(value < condition.value){
+                    conditionMatched = true
+                  }
+                  break
+
+                case '<=':
+                  if(value <= condition.value){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'startsWith':
+                  if(value.startsWith(condition.value)){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'notStartsWith':
+                  if(!value.startsWith(condition.value)){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'contains':
+                  if(value.indexOf(condition.value) >= 0){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'notContains':
+                  if(value.indexOf(condition.value) < 0){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'endsWith':
+                  if(value.endsWith(condition.value)){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'notEndsWith':
+                  if(!value.endsWith(condition.value)){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'none':
                   conditionMatched = true
-                }
-                break
+                  break
 
-              case '>=':
-                if(value >= condition.value){
-                  conditionMatched = true
-                }
-                break
+                case 'regex':
+                  break
 
-              case '=':
-                if(value === condition.value){
-                  conditionMatched = true
-                }
-                break
-
-              case '<':
-                if(value < condition.value){
-                  conditionMatched = true
-                }
-                break
-
-              case '<=':
-                if(value <= condition.value){
-                  conditionMatched = true
-                }
-                break
-
-              case 'startsWith':
-                if(value.startsWith(condition.value)){
-                  conditionMatched = true
-                }
-                break
-
-              case 'notStartsWith':
-                if(!value.startsWith(condition.value)){
-                  conditionMatched = true
-                }
-                break
-
-              case 'contains':
-                if(value.indexOf(condition.value) >= 0){
-                  conditionMatched = true
-                }
-                break
-
-              case 'notContains':
-                if(value.indexOf(condition.value) < 0){
-                  conditionMatched = true
-                }
-                break
-
-              case 'endsWith':
-                if(value.endsWith(condition.value)){
-                  conditionMatched = true
-                }
-                break
-
-              case 'notEndsWith':
-                if(!value.endsWith(condition.value)){
-                  conditionMatched = true
-                }
-                break
-
-              case 'none':
-                conditionMatched = true
-                break
-
-              case 'regex':
-                break
+              }
 
+              if(conditionMatched) break
             }
 
-            if(conditionMatched) break
-          }
-
-          if(conditionMatched){
-            appearanceClass = appearance.class
-            break
+            if(conditionMatched){
+              appearanceClass = appearance.class
+              break
+            }
           }
         }
       }
@@ -665,4 +690,8 @@ export default{
 	@apply inline-block m-1 rounded-md bg-orange-600 text-white px-2 text-sm;
 }
 
+.total{
+  @apply px-3 uppercase font-bold;
+}
+
 </style>

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