@mixd-id/web-scaffold 0.1.230406302 → 0.1.230406303

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406302",
+  "version": "0.1.230406303",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -39,7 +39,6 @@
     "@tailwindcss/line-clamp": "^0.4.0",
     "@vueuse/core": "^9.0.2",
     "adm-zip": "^0.5.10",
-    "axios": "^1.3.4",
     "chart.js": "^4.2.1",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
@@ -57,7 +56,6 @@
     "pinia": "^2.0.14",
     "prismjs": "^1.28.0",
     "redis": "^4.6.13",
-    "sequelize": "^6.37.3",
     "serve-static": "^1.15.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.25",

package/src/components/Alert.vue

@@ -130,8 +130,14 @@ export default{
 
 		message(){
 			if(this.err.errors){
-				return typeof this.err.errors === 'object' && Object.keys(this.err.errors).length > 0 ?
-            Object.values(this.err.errors).join("\n") :
+				return typeof this.err.errors === 'object' &&
+            Object.keys(this.err.errors).length > 0 ?
+            Object.values(this.err.errors).map(_ => {
+              if(Array.isArray(_))
+                return _
+              return JSON.stringify(_)
+            })
+              .join("\n"):
             this.err.errors
 			}
       else if(this.err.reason){
@@ -216,7 +222,7 @@ export default{
 }
 
 .details{
-	@apply flex-1 flex flex-col gap-4 overflow-y-auto min-h-[1.6rem];
+	@apply flex-1 flex flex-col gap-4 overflow-auto min-h-[1.6rem] self-stretch;
 }
 .details::-webkit-scrollbar {
 	display: none;

package/src/components/Button.vue

@@ -1,5 +1,6 @@
 <template>
-	<button :class="compClass" :disabled="isDisabled" @click="onClick" :style="computedStyle">
+	<button :class="compClass" :disabled="isDisabled" @click="onClick" :style="computedStyle"
+    v-tooltip="disabledText">
     <slot>{{ text }}</slot>
 		<div v-if="isLoading" :class="$style.loadingPane">
 			<svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -38,6 +39,8 @@ export default{
 
 		width: Array,
 
+    disabledText: String
+
 	},
 
 	computed:{

package/src/components/ImagePreview.vue

@@ -2,7 +2,7 @@
 	<Modal :state="isOpen" width="400" height="400" :class="$style.previewModal">
 		<div class="flex-1 flex flex-col">
 			<div class="flex flex-row justify-end items-center p-3">
-				<a v-if="download" :href="imageUrl" download>
+				<a v-if="download" :href="imageUrl" target="_blank" download>
 					<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" class="fill-text"><path class="primary" d="M15 15v-3a3 3 0 0 0-6 0v3H6a4 4 0 0 1-.99-7.88 5.5 5.5 0 0 1 10.86-.82A4.49 4.49 0 0 1 22 10.5a4.5 4.5 0 0 1-4.5 4.5H15z"/><path class="secondary" d="M11 18.59V12a1 1 0 0 1 2 0v6.59l1.3-1.3a1 1 0 0 1 1.4 1.42l-3 3a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.42l1.3 1.3z"/></svg>
 				</a>
 				<button class="ml-3" @click="close">

package/src/components/List.vue

@@ -379,7 +379,7 @@ export default{
     },
 
     loadPreset(){
-      if(!('reset' in this.$route.query)){
+      if(!Object.keys(this.$route.query).map(_ => _.toLowerCase()).includes('reset')){
         if(this.presetKey){
           return this.socket.send('user.preset', { key:this.presetKey })
               .then(config => {
@@ -394,7 +394,7 @@ export default{
 
           const query = {}
           for(let key in this.$route.query){
-            if(key !== 'reset')
+            if(key.toLowerCase() !== 'reset')
               query[key] = this.$route.query[key]
           }
           this.$router.replace({

package/src/index.js

@@ -330,42 +330,60 @@ export default{
     const tooltips = {}
 
     app.directive('tooltip', (el, binding) => {
-      el.addEventListener('mouseover', () => {
 
-        if(!el.getAttribute('data-tooltip')){
-          const tooltip = document.createElement('div')
-          tooltip.classList.add('tooltip')
-          tooltip.innerHTML = binding.value
-          document.body.appendChild(tooltip)
+      if(!el.getAttribute('data-tooltip')) {
 
-          const uid = uniqid()
-          el.setAttribute('data-tooltip', uid)
-          tooltips[uid] = tooltip
+        const uid = uniqid()
+        el.setAttribute('data-tooltip', uid)
+
+        const tooltip = document.createElement('div')
+        tooltip.classList.add('tooltip')
+        document.body.appendChild(tooltip)
+        tooltips[uid] = {
+          el: tooltip,
+          text: binding.value
         }
 
-        window.setTimeout(() => {
-          if(el.getAttribute('data-tooltip-open')){
-            const uid = el.getAttribute('data-tooltip')
-            const tooltip = tooltips[uid]
-            const rect = el.getBoundingClientRect()
-            if(rect && rect.width > 0){
-              tooltip.style.top = (rect.y + rect.height + 10) + 'px'
-              tooltip.style.left = rect.x - (Math.round((tooltip.clientWidth - rect.width) / 2)) + 'px'
-              tooltip.classList.add('active')
+        el.addEventListener('mouseover', () => {
+          const { text } = tooltips[uid]
+          if(!text) return
+
+          tooltip.innerHTML = text
+
+          window.setTimeout(() => {
+            if(el.getAttribute('data-tooltip-open')){
+              const rect = el.getBoundingClientRect()
+              if(rect && rect.width > 0){
+
+                if(rect.y + rect.height + tooltip.clientHeight > window.innerHeight){
+                  delete tooltip.style.top
+                  tooltip.style.bottom = ((window.innerHeight - rect.y) + 10) + 'px'
+                  tooltip.style.transformOrigin = 'left bottom'
+                  tooltip.style.left = rect.x + 'px'
+                }
+
+                else{
+                  delete tooltip.style.bottom
+                  tooltip.style.top = (rect.y + rect.height + 10) + 'px'
+                  tooltip.style.transformOrigin = 'left top'
+                  tooltip.style.left = rect.x + 'px'
+                }
+
+                tooltip.classList.add('active')
+              }
             }
-          }
-        }, 1000)
-        el.setAttribute('data-tooltip-open', true)
-      })
-
-      el.addEventListener('mouseout', () => {
-        el.removeAttribute('data-tooltip-open')
-        const uid = el.getAttribute('data-tooltip')
-        const tooltip = tooltips[uid]
-        if(tooltip){
+          }, 1000)
+          el.setAttribute('data-tooltip-open', true)
+        })
+
+        el.addEventListener('mouseout', () => {
+          el.removeAttribute('data-tooltip-open')
           tooltip.classList.remove('active')
-        }
-      })
+        })
+      }
+      else{
+        tooltips[el.getAttribute('data-tooltip')].text = binding.value
+      }
     })
 
     const privateVars = {}
@@ -416,6 +434,41 @@ export default{
       }
       return privateVars.isDebugMode
     }
+    app.config.globalProperties.$validate = (obj, rules) => {
+
+      const errors = {}
+
+      for(let key in rules){
+
+        let value
+        if(typeof rules[key] === 'string'){
+          value = rules[key].split('|')
+        }
+
+        const keyErrors = []
+        for(let _value of value){
+
+          switch(_value){
+
+            case 'required':
+              if(!(key in obj)){
+                keyErrors.push(`${key} is required`)
+              }
+              break
+
+          }
+
+        }
+
+        if(keyErrors.length > 0){
+          errors[key] = keyErrors
+        }
+      }
+
+      return Object.keys(errors).length > 0 ?
+        errors :
+        undefined
+    }
 
     if(typeof window !== 'undefined') {
 
@@ -632,6 +685,6 @@ 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")))
-  },
+  }
 
 }

package/src/themes/default/index.js

@@ -170,11 +170,13 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       position: "fixed",
       'z-index': 1000,
       transform: 'scale(0)',
-      padding: '.3rem .6rem',
+      padding: '1rem',
       background: 'rgb(var(--text-50))',
       'border-radius': '5px',
       transition: 'transform .2s ease-in-out',
-      'transform-origin': 'top',
+      'white-space': 'pre-line',
+      'text-align': 'left',
+      'line-height': '1.8rem',
     },
 
     '.tooltip.active': {

package/src/utils/wss.js

@@ -97,7 +97,10 @@ class WSS extends EventEmitter2{
     this._opt = opt
     this._instance = new WebSocket.Server(opt);
 
-    this._client = redis.createClient()
+    this._client = redis.createClient({
+      host: process.env.REDIS_HOST ?? '127.0.0.1',
+      port: process.env.REDIS_PORT ?? 6379
+    })
     this._client.connect().then()
 
     this._instance.on('connection', async (socket, req) => {
@@ -180,15 +183,21 @@ class WSS extends EventEmitter2{
                 data = arr.length > 0 ? JSON.parse(JSON.stringify(arr.pop())) : data
               }
               catch(e){
-                '$report' in process ? process.$report(e) : console.error(e)
+
+                if(e.response){
+                  '$report' in process ? process.$report(e) : console.error(e.response.status, e.response.data)
+                }
+                else{
+                  '$report' in process ? process.$report(e) : console.error(e)
+                }
 
                 status = 500
                 data = {
                   name: e.name,
                   message: e.message,
-                  errors: e.errors,
+                  errors: e.response ? e.response.data : e.errors,
                   stack: process.env.APP_DEBUG === 'true' ?
-                    e.stack : undefined
+                    e.stack : undefined,
                 }
               }
               break
@@ -254,23 +263,22 @@ class WSS extends EventEmitter2{
     this._reqFn.push(fn)
   }
 
-  async broadcast(channel, { model, event, items }){
+  async broadcast(channels, { model, event, items }){
 
-    /*for(let socket of this._instance.clients){
-      if(socket.readyState === WebSocket.OPEN && (socket.channels ?? {})[channel]){
-        socket.send(await this.toBinaryData({ data:{ model, event, items } }))
-      }
-    }*/
+    if(!Array.isArray(channels))
+      channels = [ channels ]
 
-    await this._client.publish(channel, JSON.stringify({ model, event, items }))
+    for(let channel of channels){
+      await this._client.publish(channel, JSON.stringify({ model, event, items }))
 
-    if(process.verbose){
-      process.verbose('wss.broadcast', {
-        channel,
-        model,
-        event,
-        items
-      })
+      if(process.verbose){
+        process.verbose('wss.broadcast', {
+          channel,
+          model,
+          event,
+          items
+        })
+      }
     }
   }