@mixd-id/web-scaffold 0.1.230406232 → 0.1.230406234

package/package.json

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

package/src/components/Button.vue

@@ -140,7 +140,7 @@ export default{
 	@apply p-2;
 	@apply relative flex items-center justify-center;
 	@apply whitespace-nowrap text-ellipsis overflow-hidden;
-	@apply rounded-lg;
+	@apply rounded-lg appearance-none;
 }
 .button>*:first-child{
 	@apply flex items-center justify-center
@@ -155,21 +155,17 @@ export default{
 .button-primary{
 	@apply bg-primary-500 text-white rounded-lg;
 	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
-	outline: solid 1px rgb(var(--primary-700));
 	border: solid 1px rgb(var(--primary-400));
 }
 .button-primary:focus{
-	outline-color: rgb(var(--primary-800));
 	border-color: rgb(var(--primary-600));
 }
 .button-primary:hover{
 	@apply bg-primary-600;
-	outline-color: rgb(var(--primary-800))
 }
 .button-primary:disabled{
 	@apply bg-primary-500 opacity-50 top-0 left-0 cursor-not-allowed;
 	@apply top-0 left-0;
-	outline: solid 1px rgb(var(--primary-700));
 }
 .button-primary *{
 	@apply text-white fill-white;
@@ -188,10 +184,8 @@ export default{
 
 .button-outline{
 	@apply bg-transparent text-primary-500;
-	outline: solid 1px rgb(var(--primary-700));
 }
 .button-outline:hover{
-	outline-color: rgb(var(--primary-800))
 }
 .button-outline:disabled{
 	@apply opacity-50 top-0 left-0 cursor-not-allowed;
@@ -215,17 +209,14 @@ export default{
 .button-secondary{
 	@apply bg-secondary-200 text-text-500 rounded-lg;
 	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
-	outline: solid 1px rgb(var(--secondary-200));
 	border: solid 1px rgb(var(--secondary-200));
 }
 .button-secondary:hover{
 	@apply bg-secondary-100;
-	outline-color: rgb(var(--secondary-100));
 	border-color: rgb(var(--secondary-100));
 }
 .button-secondary:disabled{
 	@apply bg-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
-	outline: solid 1px rgb(var(--secondary-700));
 }
 .button-secondary *{
 	@apply text-text-500 fill-white;

package/src/components/Toast.vue

@@ -6,10 +6,9 @@
 				<slot>
 					<div class="p-6">
 						<div ref="item" :class="$style.item" @mouseover="onMouseOver" @mouseout="onMouseOut">
-							<div></div>
-							<div class="flex-1 break-all whitespace-pre-line">{{ text }}</div>
+							<div class="flex-1">{{ text }}</div>
 							<div>
-								<button type="button" class="text-sm" @click="close">Dismiss</button>
+								<button type="button" class="text-sm text-primary" @click="close">Dismiss</button>
 							</div>
 						</div>
 					</div>

package/src/components/VirtualScroll.vue

@@ -210,10 +210,14 @@ export default{
 
 		items: {
 			deep: true,
-			handler(){
-				this.resize()
+			handler(to, from){
+        if((to ?? []).length !== (from ?? []).length){
+          this.scrollTop = 0
+        }
+
+        this.resize()
 			}
-		}
+		},
 
   }
 
@@ -241,11 +245,11 @@ export default{
   }
 
 	.item:hover{
-		@apply bg-primary-50;
+		@apply bg-text-50;
 	}
 
 	.item.trSelected{
-		@apply bg-primary-100;
+		@apply bg-text-100;
 	}
 
 	.highlight{

package/src/components/VirtualTable.vue

@@ -405,7 +405,11 @@ export default{
 
 		items: {
 			deep: true,
-			handler(){
+			handler(to, from){
+        if((to ?? []).length !== (from ?? []).length){
+          this.scrollTop = 0
+        }
+
 				this.resize()
 			}
 		},

package/src/index.js

@@ -1,6 +1,8 @@
 import {defineAsyncComponent, ref} from "vue"
 import {observeInit} from './utils/helpers.mjs'
 import throttle from "lodash/throttle"
+import dayjs from "dayjs";
+import groupBy from "lodash/groupBy";
 
 let _UNIQID = 0
 const uniqid = (additionalKey = '') => {
@@ -150,6 +152,11 @@ const consoleTime = (text) => { console.time(text) }
 const consoleTimeLog = (text) => { console.timeLog(text) }
 const consoleTimeEnd = (text) => { console.timeEnd(text) }
 
+const formatDate = (date, format = 'YYYY-MM-DD HH:mm:ss') => {
+  if(!date) return ''
+  return dayjs(date).format(format)
+}
+
 const util = {
 
   dragResize: (e, callback) => {
@@ -178,13 +185,35 @@ const util = {
     window.addEventListener('mouseup', onMouseUp)
   },
 
-  push: (arr, item, opt = { key:"id" }) => {
-    const index = arr.findIndex((_) => _[opt.key] === item[opt.key])
-    if(index >= 0){
-      Object.assign(arr[index], item)
+  push: (arr, items, opt = { key:"id" }) => {
+    if(!Array.isArray(arr)) return
+    if(!Array.isArray(items)) items = [ items ]
+
+    for(let item of items){
+      if(!item) continue
+
+      const index = arr.findIndex((_) => _[opt.key] === item[opt.key])
+      if(index >= 0){
+        Object.assign(arr[index], item)
+      }
+      else{
+        arr.push(item)
+      }
     }
-    else{
-      arr.push(item)
+  },
+
+  remove: (arr, sliced, opt = { key:'id' }) => {
+    if(!Array.isArray(arr)) return
+    if(!Array.isArray(sliced)) sliced = [ sliced ]
+
+    sliced = groupBy(sliced, opt.key)
+
+    for(let i = arr.length - 1 ; i >= 0 ; i--){
+      if(!arr[i]) continue
+
+      if(arr[i][opt.key] in sliced){
+        arr.splice(i, 1)
+      }
     }
   },
 
@@ -337,6 +366,7 @@ export default{
     const privateVars = {}
 
     app.config.globalProperties.uniqid = uniqid
+    app.config.globalProperties.formatDate = formatDate
     app.config.globalProperties.$download = download
     app.config.globalProperties.$preload = preload
     app.config.globalProperties.$popPreloads = popPreloads

package/src/themes/default/index.js

@@ -57,6 +57,9 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       '--whatsapp-100': '179, 206, 201',
       '--whatsapp-500': '0, 93, 75',
 
+      '--facebook-100': '205, 215, 231',
+      '--facebook-500': '8, 102, 255',
+
     },
 
     'html[data-theme="dark"], .html[data-theme="dark"]': {

package/src/utils/listview.js

@@ -90,7 +90,7 @@ let ListView = {
   async unsubscribe(params, socket){
     const { name } = params
     if(name){
-      socket.leave(this.name)
+      socket.leave(name)
     }
   },