@mixd-id/web-scaffold 0.1.230406262 → 0.1.230406263

package/package.json

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

package/src/components/Chart.vue

@@ -480,8 +480,6 @@ export default{
 
 .comp{
   @apply flex flex-col p-2;
-  @apply backdrop-blur-lg;
-  padding-bottom: 50px;
 }
 
 </style>

package/src/components/List.vue

@@ -133,11 +133,12 @@
 <script>
 
 import VirtualTable from "./VirtualTable.vue";
+import VirtualGrid from "./VirtualGrid.vue";
 import throttle from "lodash/throttle";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import groupBy from "lodash/groupBy";
-import {capitalize} from "lodash";
 import {sortsFn} from "../utils/preset-selector.mjs";
+import PresetBar from "../widgets/PresetBar.vue";
 
 export default{
 
@@ -359,7 +360,7 @@ export default{
 
   },
 
-  components: {PresetSelector, VirtualTable},
+  components: {PresetBar, PresetSelector, VirtualGrid, VirtualTable},
 
   emits: [ 'after-load', 'open-preset' ],
 

package/src/components/Modal.vue

@@ -311,6 +311,10 @@ export default{
 	@apply panel-400;
 	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden transition-all;
+  background-color: rgba(255, 255, 255, .6)
+}
+html[data-theme='dark'] .modal{
+  background-color: rgba(0, 0, 0, .3)
 }
 
 .modal.v-show{

package/src/utils/wss.js

@@ -95,7 +95,7 @@ class WSS extends EventEmitter2{
     this._opt = opt
     this._instance = new WebSocket.Server(opt);
 
-    this._instance.on('connection', (socket, req) => {
+    this._instance.on('connection', async (socket, req) => {
 
       socket.leave = (channel) => {
         if((socket.channels ?? {})[channel]){
@@ -128,6 +128,7 @@ class WSS extends EventEmitter2{
       }
 
       socket.on('message', async (binaryData) => {
+        if(!socket.isAuth) return
 
         let obj
         try{
@@ -143,17 +144,6 @@ class WSS extends EventEmitter2{
         let data
         switch(path){
 
-          case '_auth':
-            try{
-              for(let fn of this._authFn){
-                await fn(params, socket)
-              }
-            }
-            catch(e){
-              return socket.close(1002, e.message);
-            }
-            break
-
           case 'ping':
             data = { type:'pong' }
             break
@@ -192,6 +182,16 @@ class WSS extends EventEmitter2{
       socket.on('close', (e) => {
         this.emit('close', e, socket)
       });
+
+      const token = req.headers['sec-websocket-protocol'];
+      try{
+        await this._opt.auth(token, socket)
+        socket.isAuth = true
+        socket.send(await this.toBinaryData({ auth:true }))
+      }
+      catch(e){
+        return socket.close(1002, e.message);
+      }
     })
   }
 

package/src/utils/wss.mjs

@@ -46,7 +46,6 @@ class WSS extends EventEmitter2{
   _callbacks = {}
   _pendingSend = []
   _lastBlurAt
-  _readyState = 0
 
   constructor(opt) {
     super();
@@ -55,19 +54,16 @@ class WSS extends EventEmitter2{
       auth: {},
       debug: false,
       key: '',
-      onConnect: null,
-      onConnectError: null,
-      onDisconnect: null,
       timeout: 30000,
       url: '',
     }, opt ?? {})
 
-    if(typeof window !== 'undefined'){
+    /*if(typeof window !== 'undefined'){
       window.addEventListener('online', this._onOnlineChanged)
       window.addEventListener('offline', this._onOnlineChanged)
       window.addEventListener('blur', this._onBlur)
       window.addEventListener('focus', this._onFocus)
-    }
+    }*/
 
     this.connect().then()
   }
@@ -113,31 +109,24 @@ class WSS extends EventEmitter2{
 
   async connect(reconnect = false){
 
-    this._readyState = 0
+    this._instance = new WebSocket(this._opt.url, this._opt.token)
 
-    this._instance = new WebSocket(this._opt.url)
     this._instance.binaryType = 'arraybuffer';
-    this._instance.onopen = () => {
-      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._instance.onmessage = async (event) => {
       const obj = await this.fromBinaryData(event.data);
 
-      const { _requestId, status, data } = obj
+      const { _requestId, status, data, auth } = obj
+
+      if(auth){
+        reconnect ? this.emit('reconnect', null, []) : this.emit('connect', null, [])
 
-      if(_requestId){
+        for(let sendParams of this._pendingSend){
+          this.sendSync(sendParams.path, sendParams.params, sendParams.cb, sendParams.err)
+        }
+        this._pendingSend = []
+      }
+      else if(_requestId){
         if(this._callbacks[_requestId]){
           const { cb, err, path, params, t1 } = this._callbacks[_requestId]
           status === 200 ? cb(data) : err(data)
@@ -160,10 +149,13 @@ class WSS extends EventEmitter2{
     };
 
     this._instance.onerror = (e) => {
+      console.log('onerror', e)
+
       this.emit('error', e, [])
     }
 
     this._instance.onclose = (e) => {
+      console.log('onclose', e)
 
       switch(e.code){
 
@@ -189,10 +181,15 @@ class WSS extends EventEmitter2{
   }
 
   sendSync(path, params, cb, err, override){
-    if(this._instance.readyState !== 1 || (path !== '_auth' && this._readyState !== 1)){
+
+    if(this._instance.readyState === 0){
       this._pendingSend.push({ path, params, cb, err })
       return
     }
+    else if(this._instance.readyState !== 1){
+      console.log('unable to send, ready state not 1', this._instance.readyState)
+      return
+    }
 
     /*if(!navigator.onLine){
       err({ message: 'Unable to send, network disconnected' })
@@ -207,7 +204,9 @@ class WSS extends EventEmitter2{
       params
     })
       .then(async(dataUrlObj) => {
+
         const binaryData = await this.toBinaryData(dataUrlObj)
+        console.log('sendSync', this._instance.readyState, dataUrlObj)
         this._instance.send(binaryData)
 
         this._callbacks[_requestId] = {