@mixd-id/web-scaffold 0.1.230406171 → 0.1.230406173

package/package.json

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

@@ -15,9 +15,7 @@ export default{
 	mixins: [ componentMixin ],
 
 	props:{
-		class: String,
-		items: Array,
-		type: String,
+    items: Array,
 	}
 
 }

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

@@ -247,7 +247,7 @@ export default{
 
 	watch:{
 
-		src(){
+		src(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,12 +336,16 @@ 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
 
     app.config.globalProperties.$isDebugMode = () => {
       if(!('isDebugMode' in privateVars)){
-        privateVars.isDebugMode = location.search.indexOf('debug-mode') >= 0 || import.meta.env.DEV
+        privateVars.isDebugMode = location.search.indexOf('debug-mode') >= 0 ||
+          import.meta.env.VITE_APP_DEBUG === 'true'
       }
       return privateVars.isDebugMode
     }

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/ArticleSetting.vue

@@ -76,84 +76,6 @@
         </ColorPicker>
       </div>
 
-      <div class="grid grid-cols-2 gap-4">
-        <div>
-          <label class="text-text-400">Font</label>
-          <Dropdown v-for="(_, index) in viewTypes"
-                    v-show="_.value === viewType"
-                    v-model="fontFamily[index]"
-                    @change="$emit('change')">
-            <option :value="`${viewType}font-sans`">Sans</option>
-            <option :value="`${viewType}font-serif`">Serif</option>
-            <option :value="`${viewType}font-mono`">Mono</option>
-            <option value="">Not Set</option>
-          </Dropdown>
-        </div>
-
-        <div>
-          <label class="text-text-400">Size</label>
-          <Dropdown v-for="(_, index) in viewTypes"
-                    v-show="_.value === viewType"
-                    v-model="fontSize[index]"
-                    @change="$emit('change')">
-            <option :value="`${viewType}text-xs`">Extra Small</option>
-            <option :value="`${viewType}text-sm`">Small</option>
-            <option :value="`${viewType}text-base`">Normal</option>
-            <option :value="`${viewType}text-lg`">Large</option>
-            <option :value="`${viewType}text-xl`">Extra Large</option>
-            <option :value="`${viewType}text-2xl`">Extra Large 2</option>
-            <option :value="`${viewType}text-3xl`">Extra Large 3</option>
-            <option :value="`${viewType}text-4xl`">Extra Large 4</option>
-            <option :value="`${viewType}text-5xl`">Extra Large 5</option>
-            <option :value="`${viewType}text-6xl`">Extra Large 6</option>
-            <option value="">Not Set</option>
-          </Dropdown>
-        </div>
-
-        <div>
-          <label class="text-text-400">Weight</label>
-          <Dropdown v-for="(_, index) in viewTypes"
-                    v-show="_.value === viewType"
-                    v-model="fontWeight[index]"
-                    @change="$emit('change')">
-            <option :value="`${viewType}font-thin`">Thin</option>
-            <option :value="`${viewType}font-extralight`">Extra Light</option>
-            <option :value="`${viewType}font-light`">Light</option>
-            <option :value="`${viewType}font-normal`">Normal</option>
-            <option :value="`${viewType}font-medium`">Medium</option>
-            <option :value="`${viewType}font-semibold`">Semi Bold</option>
-            <option :value="`${viewType}font-bold`">Bold</option>
-            <option :value="`${viewType}font-extrabold`">Extra Bold</option>
-            <option :value="`${viewType}font-black`">Black</option>
-          </Dropdown>
-        </div>
-
-        <div>
-          <label class="text-text-400">Line Height</label>
-          <Dropdown v-for="(_, index) in viewTypes"
-                    v-show="_.value === viewType"
-                    v-model="lineHeight[index]"
-                    class="mt-1"
-                    @change="$emit('change')">
-            <option :value="`${viewType}leading-3`">Leading 3</option>
-            <option :value="`${viewType}leading-4`">Leading 4</option>
-            <option :value="`${viewType}leading-5`">Leading 5</option>
-            <option :value="`${viewType}leading-6`">Leading 6</option>
-            <option :value="`${viewType}leading-7`">Leading 7</option>
-            <option :value="`${viewType}leading-8`">Leading 8</option>
-            <option :value="`${viewType}leading-9`">Leading 9</option>
-            <option :value="`${viewType}leading-10`">Leading 10</option>
-            <option :value="`${viewType}leading-tight`">Tight</option>
-            <option :value="`${viewType}leading-snug`">Snug</option>
-            <option :value="`${viewType}leading-normal`">Normal</option>
-            <option :value="`${viewType}leading-relaxed`">Relaxed</option>
-            <option :value="`${viewType}leading-loose`">Loose</option>
-            <option value="">Not Set</option>
-          </Dropdown>
-        </div>
-
-      </div>
-
       <ContextMenu ref="headingContext">
         <div class="flex flex-col">
           <button class="p-3 text-4xl text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h1')">