@mixd-id/web-scaffold 0.1.240411001 → 0.1.240411003

package/package.json

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

package/src/themes/default/index.js

@@ -211,6 +211,17 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       transform: 'translate3d(0, 10px, 0)'
     },
 
+    '.popout-enter-active, .popout-leave-active': {
+      transition: 'all 300ms cubic-bezier(0.25, 1, 0.5, 1)',
+      transform: 'scale(1)',
+      opacity: '1'
+    },
+
+    '.popout-enter-from, .popout-leave-to': {
+      transform: 'scale(0)',
+      opacity: '0'
+    },
+
     '.slideleft-enter-active, .slideleft-leave-active': {
       transition: 'all 300ms cubic-bezier(0.25, 1, 0.5, 1)',
       transform: 'translate3d(0, 0, 0)'

package/src/utils/helpers.mjs

@@ -431,6 +431,42 @@ const queueForLater = (params) => {
   return instance.queue
 }
 
+const queueForLaterWithKey = (params) => {
+
+  const instance = {
+    delay: 1200,
+    ...params,
+
+    items: {},
+    timeoutId: {},
+
+    run: (key) => {
+      const items = instance.items[key].splice(0, instance.items[key].length);
+      //console.log('run', key, items)
+      typeof instance.pop === 'function' ? instance.pop(items) : null;
+      instance.timeoutId[key] = false
+    },
+
+    queue(key, item) {
+      if(!instance.items[key]){
+        instance.items[key] = []
+      }
+
+      if(Array.isArray(item))
+        instance.items[key].push(...item)
+      else
+        instance.items[key].push(item)
+
+      //console.log('queue', key, item, instance.items[key])
+
+      if(!instance.timeoutId[key])
+        instance.timeoutId[key] = window.setTimeout(() => instance.run(key), instance.delay);
+    }
+  }
+
+  return instance.queue
+}
+
 const transactionWithRetry = async (sequelize, callback, opt = {}) => {
   const { maxRetries = 99, delay = 1000, rollback = false } = opt
 
@@ -480,10 +516,22 @@ const arrayPush = (arr, items, opt = { update:true }) => {
     opt.key = items[0] && items[0].uid ? 'uid' : 'id'
   }
 
+  if(!Array.isArray(opt.key)){
+    opt.key = [ opt.key ]
+  }
+
   for(let item of items){
     if(!item) continue
 
-    const index = arr.findIndex((_) => _[opt.key] === item[opt.key])
+    const index = arr.findIndex((_) => {
+      for(let key of opt.key){
+        if(_[key] !== item[key]){
+          return false
+        }
+      }
+      return true
+    })
+
     if(index >= 0){
       if(opt.update !== false){
         Object.assign(arr[index], item)
@@ -582,6 +630,7 @@ export {
   strVars,
   invokeAfterIdle,
   queueForLater,
+  queueForLaterWithKey,
   transactionWithRetry,
   groupBy,
   arrayPush,

package/src/widgets/FeatureList.vue

@@ -11,6 +11,7 @@
 			<div v-for="item in items" class="flex gap-4" :class="computedItemClass">
 				<div>
 					<Image :src="imageUrl(item.imageUrl)"
+                 @click="previewImage(imageUrl(item.imageUrl))"
                  :class="`object-contain ${item.sizeClass} rounded-xl`"
                  edit-selectable="false" />
 				</div>
@@ -29,6 +30,8 @@ import {componentMixin} from "../mixin/component";
 
 export default{
 
+  inject: [ 'previewImage' ],
+
 	mixins: [ componentMixin ],
 
 	props:{