@mixd-id/web-scaffold 0.1.230406294 → 0.1.230406296

package/package.json

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

package/src/components/List.vue

@@ -124,26 +124,28 @@
             <svg class="animate-spin" width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
           </div>
 
-          <VirtualTable v-else-if="presetView === 'table' || pivotEnabled"
-                        ref="table"
-                        :columns="columns"
-                        class="flex-1 rounded-lg panel-400"
-                        :items="data.items"
-                        :enumCache="enumCache"
-                        @scroll-end="loadNext"
-                        @item-click="onTableItemClick">
+          <div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex" :class="pivotEnabled ? 'p-3 panel-400 md:p-0' : ''">
+            <VirtualTable
+                          ref="table"
+                          :columns="columns"
+                          class="flex-1 rounded-lg panel-400"
+                          :items="data.items"
+                          :enumCache="enumCache"
+                          @scroll-end="loadNext"
+                          @item-click="onTableItemClick">
+
+              <template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
+                <div :class="getHeader(slot.replace('col-', ''))">
+                  <slot :name="slot" :item="item" :index="index"></slot>
+                </div>
+              </template>
 
-            <template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
-              <div :class="getHeader(slot.replace('col-', ''))">
+              <template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
                 <slot :name="slot" :item="item" :index="index"></slot>
-              </div>
-            </template>
-
-            <template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
-              <slot :name="slot" :item="item" :index="index"></slot>
-            </template>
+              </template>
 
-          </VirtualTable>
+            </VirtualTable>
+          </div>
 
           <VirtualGrid v-else-if="presetView === 'grid'"
                        ref="grid"
@@ -154,7 +156,7 @@
                        :container-class="`${gridContainerClass}`"
                        :config="config">
             <template #item="{ item }">
-              <slot name="gridItem" :item="item" :enumCache="enumCache">
+              <slot name="gridItem" :item="item" :enumCache="enumCache" :getEnumText="getEnumText">
                 <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
                   <div>
                     <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
@@ -174,17 +176,6 @@
         <div v-if="extBar.open && pivotEnabled"
              :style="extStyle" class="border-t-[1px] border-text-50 flex flex-col relative md:p-5">
 
-          <div :class="$style.resize2" class="group"
-               @mousedown="(e) => $util.dragResize(e, resize2)">
-            <button type="button" @click.prevent="extBar.open = false"
-                    :class="$style.extClose" class="group-hover:bg-primary">
-              <svg width="14"
-                   height="14"
-                   class="fill-text-300 group-hover:fill-white cursor-pointer"
-                   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>
-            </button>
-          </div>
-
           <div v-if="readyState === 3" class="flex-1 flex items-center justify-center">
             <svg class="animate-spin" width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
           </div>
@@ -218,7 +209,7 @@
                        :container-class="`${gridContainerClass}`"
                        :config="config">
             <template #item="{ item }">
-              <slot name="gridItem" :item="item">
+              <slot name="gridItem" :item="item" :getEnumText="getEnumText">
                 <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
                   <div>
                     <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
@@ -232,6 +223,17 @@
             </template>
           </VirtualGrid>
 
+          <div :class="$style.resize2" class="group"
+               @mousedown="(e) => $util.dragResize(e, resize2)">
+            <button type="button" @click.prevent="extBar.open = false"
+                    :class="$style.extClose" class="group-hover:bg-primary">
+              <svg width="14"
+                   height="14"
+                   class="fill-text-300 group-hover:fill-white cursor-pointer"
+                   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>
+            </button>
+          </div>
+
         </div>
 
       </div>
@@ -298,6 +300,24 @@ export default{
 
   methods: {
 
+    getEnumText(key, value){
+
+      let enumText
+
+      const column = this.config.columns.find(_ => _.key === key)
+
+      if(Array.isArray(column.typeParams)){
+        const typeParam = (column.typeParams ?? []).filter((_) => _.value === value).pop()
+        enumText = typeParam && typeParam.text ? typeParam.text : enumText
+      }
+
+      if(this.enumCache && this.enumCache[column.key] && this.enumCache[column.key][value]){
+        enumText = this.enumCache[column.key][value].text ?? enumText
+      }
+
+      return enumText ? enumText : value
+    },
+
     getHeader(column){
 
       return [

package/src/components/Textbox.vue

@@ -47,9 +47,9 @@ export default{
 			default: ''
 		},
 
-		modelValue: [ String, Number ],
+		modelValue: undefined,
 
-		value: String,
+		value: undefined,
 
 		placeholder: String,
 		readonly: undefined,

package/src/utils/wss.js

@@ -71,6 +71,7 @@ class WSS extends EventEmitter2{
 
   _authFn = []
   _reqFn = []
+  _retryCount = 0
 
   async fromBinaryData(binaryData){
     const encryptedString = Buffer.from(binaryData).toString('utf-8');
@@ -142,6 +143,7 @@ class WSS extends EventEmitter2{
 
         if(pong){
           delete socket.pinging
+          this._retryCount = 0
         }
         else if(ping){
           socket.send(await this.toBinaryData({ pong: 1 }))
@@ -196,13 +198,18 @@ class WSS extends EventEmitter2{
       }
 
       if(this._opt.ping !== false){
+
         const ping = async() => {
           socket.send(await this.toBinaryData({ ping:1 }))
           socket.pinging = true
 
           setTimeout(() => {
             if(socket.pinging){
-              socket.close(1002, 'ping timeout')
+              this._retryCount++
+
+              if(this._retryCount > 10){
+                socket.close(1002, 'ping timeout')
+              }
             }
             else{
               setTimeout(ping, (Math.round(Math.random() * 10) % 5) * 5000)

package/src/utils/wss.mjs

@@ -66,7 +66,6 @@ class WSS extends EventEmitter2{
     if(typeof window !== 'undefined'){
       window.addEventListener('visibilitychange', () => {
         if(document.visibilityState === 'visible'){
-          console.log('visibilitychange', this._instance.readyState)
           this.emit('visibilitychange', this._instance.readyState, [])
 
           this.ping().catch(e => {