@mixd-id/web-scaffold 0.1.230406172 → 0.1.230406174

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406172",
+  "version": "0.1.230406174",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -15,6 +15,7 @@
     "./components/Textbox.vue": "./src/components/Textbox.vue",
     "./mixin/component": "./src/mixin/component.js",
     "./mixin/edit-mode": "./src/mixin/edit-mode.js",
+    "./middleware/http/trim-string": "./src/middleware/http/trim-string.js",
     "./helpers": {
       "require": "./src/utils/helpers.js",
       "import": "./src/utils/helpers.mjs"

package/src/components/Flex.vue

@@ -1,8 +1,9 @@
 <template>
-	<div :class="$style.comp">
+	<div :class="$style.Flex">
 
 		<component v-for="(item, idx) in items"
 							 :is="item.type"
+               :key="item.key"
 							 :="item" />
 
 	</div>
@@ -32,13 +33,13 @@ export default{
 
 <style module>
 
-.comp{
+.Flex{
 	@apply flex;
 	background-image: v-bind(bgImages[0]);
 }
 
 @media screen(md){
-	.comp{
+	.Flex{
 		background-image: v-bind(bgImages[1]);
 	}
 }

package/src/components/Grid.vue

@@ -3,6 +3,7 @@
 
     <component v-for="item in items"
 							 :is="item.type"
+               :key="item.key"
 							 :="item" />
 
   </div>

package/src/components/Image.vue

@@ -248,7 +248,6 @@ export default{
 	watch:{
 
 		src(to, from){
-      console.log('src changed', to, from)
 			this.loadSrc()
 		},
 

package/src/components/ListView.vue

@@ -374,6 +374,8 @@ export default{
 				this.configLoaded = true
 				if('reset' in ((this.$route ?? {}).query ?? {}))
 					await this.saveConfig()
+
+        this.$router.replace({ query: { ...this.$route.query, reset: undefined } })
 			}
 			else{
 				switch(this.configStoreObj.type){

package/src/index.js

@@ -146,6 +146,9 @@ const unregisterResizeEvent = (fn) => {
 const consoleInfo = (text) => { console.info(text) }
 const consoleLog = (text) => { console.log(text) }
 const consoleWarn = (text) => { console.warn(text) }
+const consoleTime = (text) => { console.time(text) }
+const consoleTimeLog = (text) => { console.timeLog(text) }
+const consoleTimeEnd = (text) => { console.timeEnd(text) }
 
 const util = {
 
@@ -333,6 +336,9 @@ export default{
     app.config.globalProperties.log = consoleLog
     app.config.globalProperties.warn = consoleWarn
     app.config.globalProperties.info = consoleInfo
+    app.config.globalProperties.time = consoleTime
+    app.config.globalProperties.timeLog = consoleTimeLog
+    app.config.globalProperties.timeEnd = consoleTimeEnd
 
     app.config.globalProperties.$isDev = () => import.meta.env.DEV
 

package/src/middleware/http/trim-string.js

@@ -0,0 +1,20 @@
+function trimStrings(obj) {
+  for (const key in obj) {
+    if (typeof obj[key] === 'string') {
+      obj[key] = obj[key].trim();
+    } else if (typeof obj[key] === 'object') {
+      trimStrings(obj[key]);
+    }
+  }
+}
+
+module.exports = async function(req, res, next){
+
+  if(req.query)
+    trimStrings(req.query)
+
+  if(req.body)
+    trimStrings(req.body)
+
+  next()
+}

package/src/utils/helpers.js

@@ -384,6 +384,14 @@ const deepObjectContainsObject = (outerObject, innerObject) => {
   return true; // All properties and values in innerObject exist in outerObject
 }
 
+const removeStyleFromTag = (html) => {
+  const regex = /<[^>]+style="[^"]*"[^>]*>/g;
+
+  return html.replace(regex, (match) => {
+    return match.replace(/style="[^"]*"/, '');
+  });
+}
+
 
 module.exports = {
   ceil,
@@ -408,4 +416,5 @@ module.exports = {
   hexToRgb,
   createComponentInstance,
   deepObjectContainsObject,
+  removeStyleFromTag,
 }

package/src/utils/helpers.mjs

@@ -275,6 +275,14 @@ const unPascalCase = function(str){
 
 const sleep = ms => new Promise(r => setTimeout(r, ms))
 
+const removeStyleFromTag = (html) => {
+  const regex = /<[^>]+style="[^"]*"[^>]*>/g;
+
+  return html.replace(regex, (match) => {
+    return match.replace(/style="[^"]*"/, '');
+  });
+}
+
 export {
   downsizeImage,
   uid,
@@ -291,6 +299,7 @@ export {
   getComponentUids,
   unPascalCase,
   sleep,
+  removeStyleFromTag,
 }
 
 function observeInit(){

package/src/widgets/ComponentSetting.vue

@@ -10,7 +10,7 @@
           <label :class="$style.label">Aspect Ratio</label>
           <div v-for="(_, idx) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="itemRatio[idx]" @change="apply">
+            <Dropdown v-model="aspectRatio[idx]" @change="apply">
               <option value="">Not Set</option>
               <option :value="`${viewType}aspect-square`">Square</option>
               <option :value="`${viewType}aspect-[2/1]`">2/1</option>
@@ -562,6 +562,35 @@
       </div>
     </div>
 
+    <div>
+      <strong class="text-text-400">Flex Column</strong>
+      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
+      <div class="grid grid-cols-2 gap-4">
+        <div>
+          <label class="flex-1 text-text-400">Basis</label>
+          <Dropdown v-for="(_viewType, index) in viewTypes"
+                    v-show="_viewType.value === viewType"
+                    v-model="colSpan[index]"
+                    @change="apply">
+            <option value="">Not Set</option>
+            <option :value="`${viewType}basis-1/12`">1/12</option>
+            <option :value="`${viewType}basis-2/12`">2/12</option>
+            <option :value="`${viewType}basis-3/12`">3/12</option>
+            <option :value="`${viewType}basis-4/12`">4/12</option>
+            <option :value="`${viewType}basis-5/12`">5/12</option>
+            <option :value="`${viewType}basis-6/12`">6/12</option>
+            <option :value="`${viewType}basis-7/12`">7/12</option>
+            <option :value="`${viewType}basis-8/12`">8/12</option>
+            <option :value="`${viewType}basis-9/12`">9/12</option>
+            <option :value="`${viewType}basis-10/12`">10/12</option>
+            <option :value="`${viewType}basis-11/12`">11/12</option>
+            <option :value="`${viewType}basis-full`">Full</option>
+          </Dropdown>
+        </div>
+
+      </div>
+    </div>
+
 		<div class="flex flex-col gap-4">
 
 			<div>
@@ -1021,10 +1050,10 @@ export default{
 			return this.item.props.height
 		},
 
-    itemRatio(){
-      if(!Array.isArray(this.item.props.itemRatio))
-        this.item.props.itemRatio = []
-      return this.item.props.itemRatio
+    aspectRatio(){
+      if(!Array.isArray(this.item.props.aspectRatio))
+        this.item.props.aspectRatio = []
+      return this.item.props.aspectRatio
     },
 
     left(){

package/src/widgets/WebPageBuilder.vue

@@ -501,7 +501,7 @@
 import throttle from "lodash/throttle";
 import md5 from "md5";
 import groupBy from "lodash/groupBy";
-import {copyToClipboard, getClipboardData} from "../utils/helpers.mjs";
+import {copyToClipboard, getClipboardData, removeStyleFromTag} from "../utils/helpers.mjs";
 
 export default{
 
@@ -605,7 +605,12 @@ export default{
 
       for(let key in component.props){
         if(!this.compClasses.includes(key) && ![ 'enabled' ].includes(key)){
-          instance[key] = component.props[key]
+
+          let value = component.props[key]
+          if(key === 'htmlText'){
+            value = removeStyleFromTag(value)
+          }
+          instance[key] = value
         }
       }
 
@@ -890,22 +895,24 @@ export default{
 
 			this.socketEmit2('page.save', this.page)
 				.then((page) => {
-          if(page){
-            this.$refs.iframe.contentWindow.postMessage({
-              action: 'load',
-              page
-            }, '*')
-          }
-          else if(reload){
-						this.iframeSrc = (this.host ?? import.meta.env.VITE_WEB_HOST) + '/' + (this.page.path ?? '')
-						this.reloadIframe()
+          if(reload){
+            if(page){
+              this.$refs.iframe.contentWindow.postMessage({
+                action: 'load',
+                page
+              }, '*')
+            }
+            else{
+              this.iframeSrc = (this.host ?? import.meta.env.VITE_WEB_HOST) + '/' + (this.page.path ?? '')
+              this.reloadIframe()
+            }
 					}
 				})
 				.catch((err) => {
 					this.toast(err)
 					this.load()
 				})
-		}, 300),
+		}, 1000),
 
 		saveLayout: throttle(function(reload = true){
 			if(!this.layout.instances || typeof this.layout.instances !== 'object' || Array.isArray(this.layout.instances))