@mixd-id/web-scaffold 0.1.230406242 → 0.1.230406244

package/package.json

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

package/src/components/Alert.vue

@@ -15,8 +15,9 @@
 							<h5 :class="$style.title">{{ title }}</h5>
 						</div>
 
-						<div :class="$style.details" v-if="message">
-							<p class="text-center break-words">{{ message }}</p>
+						<div :class="$style.details">
+							<p class="text-center break-words" v-if="message">{{ message }}</p>
+							<p class="text-center break-words max-w-[420px]" v-if="stack">{{ stack }}</p>
 						</div>
 
 						<div :class="$style.details" v-if="details">
@@ -128,7 +129,6 @@ 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") :
@@ -150,6 +150,12 @@ export default{
 			}
 		},
 
+    stack(){
+      if(this.err.stack){
+        return this.err.stack
+      }
+    },
+
 		details(){
 
 			if(this.alert.details && typeof this.alert.details === 'object'){

package/src/components/DayTimeRange.vue

@@ -0,0 +1,126 @@
+<template>
+	<div :class="$style.comp">
+		<div v-for="(val, idx) in value" class="flex flex-row items-start">
+      <button type="button" @click="value.splice(idx, 1);updateModelValue()" class="p-2">
+        <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z"/></svg>
+      </button>
+      <div class="pr-2">
+        <select v-model="val.key" @change="updateModelValue">
+          <option value="*">All Days</option>
+          <option value="sun">Sun</option>
+          <option value="mon">Mon</option>
+          <option value="tue">Tue</option>
+          <option value="wed">Wed</option>
+          <option value="thu">Thu</option>
+          <option value="fri">Fri</option>
+          <option value="sat">Sat</option>
+        </select>
+      </div>
+      <div class="flex-1 flex flex-col gap-1 pl-2 border-l-[1px] border-text-100 divide-y divide-text-100">
+        <div v-for="(range, i) in val.value" class="flex flex-row">
+          <div class="flex-1 flex flex-row">
+            <input type="time" v-model="val.value[i][0]">
+            <div class="py-2">-</div>
+            <input type="time" v-model="val.value[i][1]">
+          </div>
+          <div class="p-2 flex flex-row gap-2">
+            <button v-if="val.value.length > 1" type="button" @click="val.value.splice(i, 1)">
+              <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M140 274c-6.6 0-12-5.4-12-12v-12c0-6.6 5.4-12 12-12h232c6.6 0 12 5.4 12 12v12c0 6.6-5.4 12-12 12H140zm364-18c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-32 0c0-119.9-97.3-216-216-216-119.9 0-216 97.3-216 216 0 119.9 97.3 216 216 216 119.9 0 216-97.3 216-216z"/></svg>
+            </button>
+            <button type="button" @click="val.value.push([ '00:00', '23:59' ])">
+              <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 248.5l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L241 419.9V44c0-6.6-5.4-12-12-12h-10c-6.6 0-12 5.4-12 12v375.9L28.5 241.4c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.8 4.8-12.3.1-17z"/></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-center">
+      <button type="button" @click="add" class="p-2">
+        <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M384 250v12c0 6.6-5.4 12-12 12h-98v98c0 6.6-5.4 12-12 12h-12c-6.6 0-12-5.4-12-12v-98h-98c-6.6 0-12-5.4-12-12v-12c0-6.6 5.4-12 12-12h98v-98c0-6.6 5.4-12 12-12h12c6.6 0 12 5.4 12 12v98h98c6.6 0 12 5.4 12 12zm120 6c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-32 0c0-119.9-97.3-216-216-216-119.9 0-216 97.3-216 216 0 119.9 97.3 216 216 216 119.9 0 216-97.3 216-216z"/></svg>
+      </button>
+    </div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'update:modelValue' ],
+
+  props: {
+
+    modelValue: {
+      type: Object
+    }
+
+  },
+
+  data(){
+    return {
+      value: [
+        { key:'mon', value:[ [ '08:00', '10:00' ], [ '12:00', '14:00' ] ] }
+      ]
+    }
+  },
+
+  methods: {
+
+    add(){
+
+      this.value.push({ value:[ [ '00:00', '23:59'] ] })
+
+    },
+
+    updateModelValue(){
+      const modelValue = {}
+      this.value.forEach( (val) => {
+        modelValue[val.key] = val.value
+      })
+
+      console.log(modelValue)
+
+      this.$emit('update:modelValue', modelValue)
+    },
+
+    updateValue(){
+      this.value = []
+      for( const key in this.modelValue ){
+        this.value.push({ key, value: this.modelValue[key] })
+      }
+    }
+
+  },
+
+  mounted() {
+    this.updateValue()
+  },
+
+  watch: {
+
+    modelValue(){
+      this.updateValue()
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply border-[1px] border-text-200 bg-base-50 rounded-lg;
+  @apply inline-flex flex-col divide-y divide-text-100;
+}
+
+.comp select{
+  @apply bg-transparent p-2 outline-none;
+}
+
+.comp input{
+  @apply bg-transparent p-1 outline-none appearance-none;
+}
+
+</style>

package/src/components/Modal.vue

@@ -118,6 +118,8 @@ export default{
 		},
 
     dismiss(){
+      if(this.isDisabled) return
+
       if(this.hash){
         this.$router.push({ hash: this.$route.hash.replace(this.hash, '') })
       }

package/src/components/Textarea.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="computedClass">
 		<slot name="start"></slot>
-		<textarea :maxlength="maxlength"
+		<textarea :maxlength="maxlength" :class="itemClass"
 			:placeholder="placeholder" :rows="rows" ref="input" @focus="isActive = true" @blur="onBlur" @input="onInput"
 			:value="modelValue" :readonly="Boolean(readonly)" />
 		<div v-if="state === -2 && !!(errors)">
@@ -29,6 +29,8 @@ export default{
 
 		customClass: String,
 
+    itemClass: String,
+
 		state: {
 			type: Number,
 			default: 1 // 1:normal, -1:disabled, -2:error

package/src/index.js

@@ -474,6 +474,7 @@ export default{
     app.component('ObjectTree', defineAsyncComponent(() => import("./components/ObjectTree.vue")))
     app.component('FBLogin', defineAsyncComponent(() => import("./components/FBLogin.vue")))
     app.component('GSignIn', defineAsyncComponent(() => import("./components/GSignIn.vue")))
+    app.component('DayTimeRange', defineAsyncComponent(() => import("./components/DayTimeRange.vue")))
 
     app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))

package/src/themes/default/index.js

@@ -23,7 +23,7 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       '--base-500': '255, 255, 255',
       '--base': '236, 236, 236',
 
-      "--text-50": '232, 232, 232',
+      "--text-50": '229, 229, 229',
       "--text-100": '223, 223, 223',
       "--text-200": '218, 218, 218',
       "--text-300": '191, 191, 191',
@@ -70,7 +70,7 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       "--base-500": '22, 26, 33',
       "--base": '22, 26, 33',
 
-      "--text-50": '28, 34, 41',
+      "--text-50": '33, 39, 46',
       "--text-100": '48, 54, 61',
       "--text-200": '53, 59, 66',
       "--text-300": '77, 77, 77',

package/src/utils/helpers.js

@@ -2,6 +2,7 @@ const md5 = require("md5");
 const fs = require("fs");
 const { Op } = module.parent.require('sequelize')
 const axios = module.parent.require('axios')
+const dayjs = module.parent.require('dayjs')
 
 
 const ceil = (num, precision = 0) => {
@@ -470,6 +471,26 @@ const datasourceLoad = async ({ datasource, Models }) => {
   return obj
 }
 
+const dayTimeRange = (params, value) => {
+
+  /*params = {
+    '*': [ [ '08:00', '12:00' ], [ '13:00', '18:00' ] ],
+    'sat': [ [ '08:00', '12:00' ], [ '13:00', '14:00' ] ],
+  }
+  value = '2023-02-06 17:59:00'*/
+
+  if(!value)
+    value = dayjs().format('YYYY-MM-DD HH:mm:ss')
+
+  const curDay = dayjs(value).format('ddd').toLowerCase()
+  const curTime = dayjs(value).format('HH:mm')
+  const ranges = params[curDay] ?? params['*']
+
+  return (ranges ?? []).some((range) => {
+    return curTime >= range[0] && curTime <= range[1]
+  })
+}
+
 
 module.exports = {
   ceil,
@@ -497,4 +518,5 @@ module.exports = {
   removeStyleFromTag,
   datasourceGet,
   datasourceLoad,
+  dayTimeRange,
 }

package/src/utils/wss.js

@@ -129,7 +129,15 @@ class WSS extends EventEmitter2{
 
       socket.on('message', async (binaryData) => {
 
-        const { _requestId, path, params } = await this.fromBinaryData(binaryData);
+        let obj
+        try{
+          obj = await this.fromBinaryData(binaryData);
+        }
+        catch(e){
+          return socket.close(1002, e.message);
+        }
+
+        const { _requestId, path, params } = obj
 
         let status = 200
         let data
@@ -142,7 +150,7 @@ class WSS extends EventEmitter2{
               }
             }
             catch(e){
-              socket.close(1002, e.message);
+              return socket.close(1002, e.message);
             }
             break
 
@@ -158,6 +166,10 @@ class WSS extends EventEmitter2{
               data = arr.length > 0 ? JSON.parse(JSON.stringify(arr.pop())) : data
             }
             catch(e){
+              if(this._opt.debug){
+                console.error(e)
+              }
+
               status = 500
               data = {
                 name: e.name,

package/src/utils/wss.mjs

@@ -121,14 +121,14 @@ class WSS extends EventEmitter2{
       this._readyState = 2
       this.send('_auth', this._opt.auth)
         .then(() => {
+          this._readyState = 1
+
           reconnect ? this.emit('reconnect', null, []) : this.emit('connect', null, [])
 
           for(let sendParams of this._pendingSend){
             this.sendSync(sendParams.path, sendParams.params, sendParams.cb, sendParams.err)
           }
           this._pendingSend = []
-
-          this._readyState = 1
         })
     };
 
@@ -178,24 +178,26 @@ class WSS extends EventEmitter2{
     };
   }
 
-  async reconnect(){
+  async reconnect(opt){
     if(this._instance){
       this._instance.close()
     }
 
+    Object.assign(this._opt, opt)
+
     await this.connect(true)
   }
 
   sendSync(path, params, cb, err, override){
-    if(this._instance.readyState !== 1 && this._readyState !== 1){
+    if(this._instance.readyState !== 1 || (path !== '_auth' && this._readyState !== 1)){
       this._pendingSend.push({ path, params, cb, err })
       return
     }
 
-    if(!navigator.onLine){
+    /*if(!navigator.onLine){
       err({ message: 'Unable to send, network disconnected' })
       return
-    }
+    }*/
 
     const _requestId = ++this._counter
 
@@ -216,14 +218,14 @@ class WSS extends EventEmitter2{
           t1: new Date().getTime()
         }
 
-        setTimeout(() => {
+        /*setTimeout(() => {
           if(this._callbacks[_requestId]){
             err({ message: 'Timeout' })
             delete this._callbacks[_requestId]
 
             this.reconnect()
           }
-        }, (override ?? {}).timeout ?? this._opt.timeout)
+        }, (override ?? {}).timeout ?? this._opt.timeout)*/
       })
   }