@mixd-id/web-scaffold 0.1.230406267 → 0.1.230406269

package/package.json

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

package/src/components/Image.vue

@@ -131,6 +131,7 @@ export default{
 				var reader = new FileReader();
 				reader.addEventListener('load', () => {
 					this.$emit('change', reader.result, e.target.files[0])
+          this.$refs.file.value = null
 				}, false)
 				reader.readAsDataURL(e.target.files[0]);
 			}

package/src/components/List.vue

@@ -3,7 +3,7 @@
     <div v-if="readyState === 1"
          class="flex-1 flex flex-row">
 
-      <div v-if="computedPresetMode === 'sidebar' && config.sidebarOpen"
+      <div v-if="computedPresetMode === 'sidebar' && sidebarOpen"
            class="relative flex flex-col border-r-[1px] border-text-50 panel-400"
            :style="sidebarWidth">
 
@@ -11,13 +11,13 @@
                    class="flex-1"
                    @apply="load">
           <template #toolbar>
-            <button type="button" class="px-1" @click="config.sidebarOpen = false">
+            <button type="button" class="px-1" @click="closeSidebar">
               <svg width="19" height="19" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" 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="M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256L7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256L312.1 375z"/></svg>
             </button>
           </template>
         </PresetBar>
 
-        <div v-if="config.sidebarOpen"
+        <div v-if="sidebarOpen"
              :class="$style.resize1"
              @mousedown="(e) => $util.dragResize(e, resize1)"></div>
       </div>
@@ -166,6 +166,10 @@ export default{
       type: [ String, Boolean ],
       default: true
     },
+    editHash: {
+      type: String,
+      default: '#719ed'
+    }
   },
 
   methods: {
@@ -326,7 +330,10 @@ export default{
           break
 
         case 'sidebar':
-          this.config.sidebarOpen = !this.config.sidebarOpen
+          this.$router.push({
+            ...this.$route,
+            hash: this.$route.hash.replace(this.editHash, '') + this.editHash
+          })
           break
 
         default:
@@ -336,6 +343,13 @@ export default{
       }
     },
 
+    closeSidebar(){
+      this.$router.replace({
+        ...this.$route,
+        hash: this.$route.hash.replace(this.editHash, '')
+      })
+    },
+
     onSignal(event, items){
 
       switch(event){
@@ -468,9 +482,13 @@ export default{
           (this.view ?? this.preset.view)
     },
 
+    sidebarOpen(){
+      return this.$route.hash.indexOf(this.editHash) >= 0
+    },
+
     sidebarWidth(){
       return {
-        width: (!this.config.sidebarOpen ? 0 : (this.config.sidebarWidth ?? '360')) + 'px'
+        width: (!this.sidebarOpen ? 0 : (this.config.sidebarWidth ?? '360')) + 'px'
       }
     },
 

package/src/components/Modal.vue

@@ -109,15 +109,24 @@ export default{
 	methods: {
 
 		open(context = {}){
-			this.context = context
-			this._state = true
+      this.context = context
+
+      if(this.hash){
+        this.$router.push({
+          ...this.$route,
+          hash: this.$route.hash.replace(this.hash, '') + this.hash
+        })
+      }
+      else{
+        this._state = true
+      }
 		},
 
 		close(){
       if(this.hash){
         this.$router.replace({
           ...this.$route,
-          hash: this.$route.hash.replace(`${this.hash}`, '')
+          hash: this.hash === '#' ? '' : this.$route.hash.replace(`${this.hash}`, '')
         })
       }
       else{
@@ -127,13 +136,8 @@ export default{
 
     dismiss(){
       if(this.isDisabled) return
-
-      if(this.hash){
-        this.$router.push({ hash: this.$route.hash.replace(this.hash, '') })
-      }
-      else{
-        this.$emit('dismiss')
-      }
+      this.close()
+      this.$emit('dismiss')
     },
 
 		onAfterLeave(){

package/src/components/Toast.vue

@@ -6,7 +6,7 @@
 				<slot>
 					<div class="p-6">
 						<div ref="item" :class="$style.item" @mouseover="onMouseOver" @mouseout="onMouseOut">
-							<div class="flex-1">{{ text }}</div>
+							<p class="flex-1 whitespace-pre-wrap">{{ text }}</p>
 							<div>
 								<button type="button" class="text-sm text-primary" @click="close">Dismiss</button>
 							</div>
@@ -58,6 +58,9 @@ export default{
 			if(this.toast.text){
 				return this.toast.text
 			}
+      else if(this.toast.errors){
+        return Object.values(this.toast.errors).join('\n')
+      }
 			else if(this.toast.message){
 				return this.toast.message
 			}

package/src/utils/wss.js

@@ -101,8 +101,8 @@ class WSS extends EventEmitter2{
         if((socket.channels ?? {})[channel]){
           delete socket.channels[channel]
 
-          if(this._opt.debug){
-            console.log('leave', channel)
+          if(process.verbose){
+            process.verbose('wss.leave', channel)
           }
         }
       }
@@ -114,8 +114,8 @@ class WSS extends EventEmitter2{
 
         socket.channels[channel] = 1
 
-        if(this._opt.debug){
-          console.log('join', channel)
+        if(process.verbose){
+          process.verbose('wss.join', channel)
         }
       }
 
@@ -156,8 +156,8 @@ class WSS extends EventEmitter2{
                 data = arr.length > 0 ? JSON.parse(JSON.stringify(arr.pop())) : data
               }
               catch(e){
-                if(this._opt.debug){
-                  console.error(e)
+                if(process.verbose){
+                  process.verbose('wss.error', e)
                 }
 
                 status = 500
@@ -221,8 +221,13 @@ class WSS extends EventEmitter2{
 
   async broadcast(channel, { model, event, items }){
 
-    if(this._opt.debug){
-      console.log('broadcast', channel, JSON.stringify({ model, event, items }).substring(0, 70))
+    if(process.verbose){
+      process.verbose('wss.broadcast', {
+        channel,
+        model,
+        event,
+        items
+      })
     }
 
     for(let socket of this._instance.clients){

package/src/utils/wss.mjs

@@ -107,7 +107,9 @@ class WSS extends EventEmitter2{
           delete this._callbacks[_requestId]
 
           if(this._opt.debug){
-            console.log(new Date().getTime() - t1, path, params, data)
+            status === 200 ?
+              console.log(new Date().getTime() - t1, path, params, data) :
+              console.error(new Date().getTime() - t1, path, params, data)
           }
         }
       }

package/src/widgets/ComponentSetting.vue

@@ -1964,6 +1964,35 @@ export default{
         minWidth: [
           [ 'None', 'min-w-none' ],
           [ '0', 'min-w-0' ],
+          [ '1', 'min-w-1' ],
+          [ '2', 'min-w-2' ],
+          [ '3', 'min-w-3' ],
+          [ '4', 'min-w-4' ],
+          [ '5', 'min-w-5' ],
+          [ '6', 'min-w-6' ],
+          [ '7', 'min-w-7' ],
+          [ '8', 'min-w-8' ],
+          [ '9', 'min-w-9' ],
+          [ '10', 'min-w-10' ],
+          [ '11', 'min-w-11' ],
+          [ '12', 'min-w-12' ],
+          [ '14', 'min-w-14' ],
+          [ '16', 'min-w-16' ],
+          [ '20', 'min-w-20' ],
+          [ '24', 'min-w-24' ],
+          [ '28', 'min-w-28' ],
+          [ '32', 'min-w-32' ],
+          [ '36', 'min-w-36' ],
+          [ '40', 'min-w-40' ],
+          [ '44', 'min-w-44' ],
+          [ '48', 'min-w-48' ],
+          [ '52', 'min-w-52' ],
+          [ '56', 'min-w-56' ],
+          [ '60', 'min-w-60' ],
+          [ '64', 'min-w-64' ],
+          [ '72', 'min-w-72' ],
+          [ '80', 'min-w-80' ],
+          [ '96', 'min-w-96' ],
           [ 'Full', 'min-w-full' ],
           [ 'Screen', 'min-w-screen' ],
           [ 'Min', 'min-w-min' ],

package/src/widgets/ComponentSetting2.vue

@@ -757,6 +757,35 @@ export default{
             { text:'Min Width', key:'minWidth', values: [
                 [ 'min-w-none', 'None' ],
                 [ 'min-w-0', '0' ],
+                [ 'min-w-1', '1' ],
+                [ 'min-w-2', '2' ],
+                [ 'min-w-3', '3' ],
+                [ 'min-w-4', '4' ],
+                [ 'min-w-5', '5' ],
+                [ 'min-w-6', '6' ],
+                [ 'min-w-7', '7' ],
+                [ 'min-w-8', '8' ],
+                [ 'min-w-9', '9' ],
+                [ 'min-w-10', '10' ],
+                [ 'min-w-11', '11' ],
+                [ 'min-w-12', '12' ],
+                [ 'min-w-14', '14' ],
+                [ 'min-w-16', '16' ],
+                [ 'min-w-20', '20' ],
+                [ 'min-w-24', '24' ],
+                [ 'min-w-28', '28' ],
+                [ 'min-w-32', '32' ],
+                [ 'min-w-36', '36' ],
+                [ 'min-w-40', '40' ],
+                [ 'min-w-44', '44' ],
+                [ 'min-w-48', '48' ],
+                [ 'min-w-52', '52' ],
+                [ 'min-w-56', '56' ],
+                [ 'min-w-60', '60' ],
+                [ 'min-w-64', '64' ],
+                [ 'min-w-72', '72' ],
+                [ 'min-w-80', '80' ],
+                [ 'min-w-96', '96' ],
                 [ 'min-w-full', 'Full' ],
                 [ 'min-w-screen', 'Screen' ],
                 [ 'min-w-min', 'Min' ],

package/tailwind.config.js

@@ -73,6 +73,11 @@ module.exports = {
     'w-[60px]', 'w-[120px]', 'w-[180px]', 'w-[240px]', 'w-[300px]', 'w-[360px]', 'w-[420px]', 'w-[480px]',
 
     'min-w-none', 'min-w-full', 'min-w-min', 'min-w-max', 'min-w-fit', 'min-w-0',
+    'md:min-w-0', 'md:min-w-1', 'md:min-w-2', 'md:min-w-3', 'md:min-w-4', 'md:min-w-5', 'md:min-w-6',
+    'md:min-w-7', 'md:min-w-8', 'md:min-w-9', 'md:min-w-10', 'md:min-w-11', 'md:min-w-12', 'md:min-w-14',
+    'md:min-w-16', 'md:min-w-20', 'md:min-w-24', 'md:min-w-28', 'md:min-w-32', 'md:min-w-36', 'md:min-w-40',
+    'md:min-w-44', 'md:min-w-48', 'md:min-w-52', 'md:min-w-56', 'md:min-w-60', 'md:min-w-64', 'md:min-w-72',
+    'md:min-w-80', 'md:min-w-96',
 
     'max-w-none', 'max-w-0', 'max-w-xs', 'max-w-sm', 'max-w-md', 'max-w-lg', 'max-w-xl', 'max-w-2xl', 'max-w-3xl',
     'max-w-4xl', 'max-w-screen-sm', 'max-w-screen-md', 'max-w-screen-lg', 'max-w-screen-xl', 'max-w-screen-2xl',
@@ -298,6 +303,11 @@ module.exports = {
     'md:w-[60px]', 'md:w-[120px]', 'md:w-[180px]', 'md:w-[240px]', 'md:w-[300px]', 'md:w-[360px]', 'md:w-[420px]', 'md:w-[480px]',
 
     'md:min-w-none', 'md:min-w-full', 'md:min-w-min', 'md:min-w-max', 'md:min-w-fit', 'md:min-w-0',
+    'md:min-w-0', 'md:min-w-1', 'md:min-w-2', 'md:min-w-3', 'md:min-w-4', 'md:min-w-5', 'md:min-w-6',
+    'md:min-w-7', 'md:min-w-8', 'md:min-w-9', 'md:min-w-10', 'md:min-w-11', 'md:min-w-12', 'md:min-w-14',
+    'md:min-w-16', 'md:min-w-20', 'md:min-w-24', 'md:min-w-28', 'md:min-w-32', 'md:min-w-36', 'md:min-w-40',
+    'md:min-w-44', 'md:min-w-48', 'md:min-w-52', 'md:min-w-56', 'md:min-w-60', 'md:min-w-64', 'md:min-w-72',
+    'md:min-w-80', 'md:min-w-96',
 
     'md:max-w-none', 'md:max-w-0', 'md:max-w-xs', 'md:max-w-sm', 'md:max-w-md', 'md:max-w-lg', 'md:max-w-xl', 'md:max-w-2xl', 'md:max-w-3xl',
     'md:max-w-4xl', 'md:max-w-screen-sm', 'md:max-w-screen-md', 'md:max-w-screen-lg', 'md:max-w-screen-xl', 'md:max-w-screen-2xl',