@mixd-id/web-scaffold 0.1.230406392 → 0.1.230406394

package/package.json

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

package/src/components/HTMLEditor.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="overflow-x-auto bg-text-50">
+		<div class="overflow-x-auto bg-text-50" :class="containerClass">
 			<div class="flex flex-row">
 				<button class="p-3" type="button" @click="format('bold')">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>
@@ -21,7 +21,7 @@
 				<button class="p-3" type="button" ref="listBtn" @click="$refs.listContext.open($refs.listBtn)">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 144c26.5 0 48-21.5 48-48s-21.5-48-48-48S16 69.5 16 96s21.5 48 48 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm48-208c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48z"/></svg>
 				</button>
-				<button class="p-3" type="button" @click="createImage">
+				<button v-if="uploadImage" class="p-3" type="button" @click="createImage">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M152 120c-26.51 0-48 21.49-48 48s21.49 48 48 48s48-21.49 48-48S178.5 120 152 120zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM463.1 409.3l-136.8-185.9C323.8 218.8 318.1 216 312 216c-6.113 0-11.82 2.768-15.21 7.379l-106.6 144.1l-37.09-46.1c-3.441-4.279-8.934-6.809-14.77-6.809c-5.842 0-11.33 2.529-14.78 6.809l-75.52 93.81c0-.0293 0 .0293 0 0L47.99 96c0-8.822 7.178-16 16-16h384c8.822 0 16 7.178 16 16V409.3z"/></svg>
 				</button>
 				<button class="p-3" type="button" @click="createLink">
@@ -35,7 +35,7 @@
 		</div>
 
 		<article ref="article" contenteditable="true" v-html="html" @paste="onPaste" spellcheck="false"
-						 @input="onInput" @click="onClick"
+						 @input="onInput" @click="onClick" :class="containerClass"
 						 @blur="onBlur">
 		</article>
 
@@ -258,7 +258,9 @@ export default{
 
 	props:{
 		modelValue: String,
-		uploadImage: String
+		uploadImage: String,
+    containerClass: String,
+    itemClass: String,
 	},
 
 	computed: {

package/src/components/List.vue

@@ -57,7 +57,7 @@
                         <div class="p-3 flex flex-col gap-1 bg-base-300">
                           <button v-for="(preset, idx) in config.presets"
                                   class="p-2 px-5 text-left flex flex-row items-center rounded-md"
-                                  :class="config.presetIdx === idx ? 'bg-primary-200 text-white' : 'hover:bg-primary-100'"
+                                  :class="configParams.presetIdx === preset.uid ? 'bg-primary-200 text-white' : 'hover:bg-primary-100'"
                                   type="button"
                                   @click="selectPreset(idx)">
                             <label class="flex-1 pr-12">
@@ -546,9 +546,11 @@ export default{
     selectPreset(idx){
       if(this.config.presets[idx]){
         this.configParams.presetIdx = this.config.presets[idx].uid
+        console.log('idx', this.config.presets)
+        console.log('idx', idx, this.configParams.presetIdx)
         this.load()
-        this.$refs.presetSelector.close()
-        this.$refs.contextMenu.close()
+        this.$refs.presetSelector?.close()
+        this.$refs.contextMenu?.close()
       }
     },
 

package/src/components/Modal.vue

@@ -141,11 +141,14 @@ export default{
 		close(){
       if(this.hash){
 
-        const hash = this.$route.hash
+        let hash = this.$route.hash
             .split('#')
             .filter(_ => _.length > 0 && !_.startsWith(this.hash.substring(1)))
             .join('#')
 
+        if(hash.substring(0, 1) !== '#')
+          hash = '#' + hash
+
         this.$router.replace({
           ...this.$route,
           hash

package/src/utils/helpers.js

@@ -536,16 +536,20 @@ function capitalize(str) {
 }
 
 const removeUnderscoredKey = (obj) => {
-  if(typeof obj === 'object' && obj !== null){
+  if (Array.isArray(obj)) {
+    return obj.map(removeUnderscoredKey);
+  }
+  else if (obj !== null && typeof obj === 'object') {
     for(let key in obj){
       if(key.startsWith('_')){
         delete obj[key]
       }
-      else if(Array.isArray(obj[key])){
-        obj[key].forEach(_ => removeUnderscoredKey(_))
+      else if(Array.isArray(obj[key]) || (obj[key] !== null && typeof obj[key] === 'object')){
+        removeUnderscoredKey(obj[key])
       }
     }
   }
+  return obj;
 }
 
 const hashMake = async (text) => {

package/src/utils/preset-selector.mjs

@@ -202,8 +202,9 @@ const generateTotalColumns = (preset, items) => {
   items.push(totalItem)
 }
 
+let presetUidSalt = 0
 const getPresetUid = function(extra = ''){
-  return md5('preset-' + new Date().getTime() + extra)
+  return md5('preset-' + new Date().getTime() + extra + (++presetUidSalt))
 }
 
 export {

package/src/widgets/PresetSelector.vue

@@ -55,7 +55,7 @@
       <div class="flex flex-col bg-base-300 border-t-[1px] border-b-[1px] border-text-50 divide-y divide-text-50">
         <div v-for="(preset, idx) in config.presets"
                 class="px-6 text-left hover:bg-primary-200 hover:text-white flex flex-row items-center">
-          <div class="flex-1 py-4" @click="select(idx)">
+          <div class="flex-1 py-4" @click="select(preset)">
             {{ preset.name }}
           </div>
           <button type="button"
@@ -479,6 +479,18 @@ export default{
 
   computed: {
 
+    configParams(){
+      if(!this.config.params)
+        this.config.params = {}
+
+      if(this.config.presets.length > 0 &&
+          (!this.config.params.presetIdx ||
+              !this.config.presets.find(_ => _.uid === this.config.params.presetIdx)))
+        this.config.params.presetIdx = this.config.presets[0].uid
+
+      return this.config.params
+    },
+
     filterColumns(){
       return JSON.parse(JSON.stringify(this.config.columns ?? []))
           .filter(_ => !('filterable' in _) || _.filterable)
@@ -641,8 +653,8 @@ export default{
       })
     },
 
-    select(idx){
-      this.config.presetIdx = idx
+    select(item){
+      this.configParams.presetIdx = item.uid
       this.close()
       this.$emit('select')
     },