@mixd-id/web-scaffold 0.1.230406384 → 0.1.230406385

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406384",
+  "version": "0.1.230406385",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -14,6 +14,7 @@
     "./components/*": "./src/components/*",
     "./widgets/*": "./src/widgets/*",
     "./mixin/component": "./src/mixin/component.js",
+
     "./mixin/edit-mode": "./src/mixin/edit-mode.js",
     "./middleware/http/trim-string": "./src/middleware/http/trim-string.js",
     "./helpers": {

package/src/components/List.vue

@@ -27,7 +27,6 @@
       </div>
 
       <div class="flex-1 flex flex-col relative">
-        <div class="absolute bottom-0 left-0 w-[20px] h-[20px] z-10" @click="log(dataItems);log(sorts)"></div>
 
         <div class="flex-1 flex flex-col" :class="containerClass">
           <slot name="head"
@@ -597,6 +596,22 @@ export default{
       }
     },
 
+    sortItems(items){
+
+      if((this.sorts ?? []).length > 0){
+        return (items ?? []).sort((a, b) => {
+          return sortsFn(a, b, this.sorts, 0)
+        })
+      }
+      else if((this.preset.sorts ?? []).length > 0){
+        return (items ?? []).sort((a, b) => {
+          return sortsFn(a, b, this.preset.sorts, 0)
+        })
+      }
+      return items
+
+    },
+
     loadQueued(items){
       const key = items[0] && items[0].uid ? 'uid' : 'id'
 
@@ -605,10 +620,21 @@ export default{
         [key]: items.map(item => item[key])
       })
           .then(({ items:nextItems }) => {
-            nextItems.forEach(item => this.$util.unshift(this.data.items, item, { highlight: true }))
 
             const destroyedItems = items.filter(_ => !nextItems.find(i => i[key] === _[key]))
             this.$util.remove(this.data.items, destroyedItems)
+
+            let currentFirstItem = this.dataItems[0]
+            const sortedItems = this.sortItems([
+              ...nextItems,
+              currentFirstItem
+            ]
+              .filter(_ => _))
+
+            for(let item of sortedItems){
+              if(item === currentFirstItem) break
+              this.$util.unshift(this.data.items, item, { highlight: true })
+            }
           })
     },
 
@@ -920,20 +946,7 @@ export default{
     },
 
     dataItems(){
-
-      if((this.sorts ?? []).length > 0){
-        return (this.data.items ?? []).sort((a, b) => {
-          return sortsFn(a, b, this.sorts, 0)
-        })
-      }
-      else if((this.preset.sorts ?? []).length > 0){
-        return (this.data.items ?? []).sort((a, b) => {
-          return sortsFn(a, b, this.preset.sorts, 0)
-        })
-      }
-      else{
-        return this.data.items ?? []
-      }
+      return this.sortItems(this.data.items)
     },
 
     preset(){

package/src/utils/helpers.mjs

@@ -319,6 +319,17 @@ function unslugAndCapitalize(slug) {
     .join(' ');
 }
 
+function slugify(text) {
+  return text
+    .toString() // Ensure the input is a string
+    .normalize('NFD') // Normalize to decompose diacritic marks
+    .replace(/[\u0300-\u036f]/g, '') // Remove diacritic marks
+    .replace(/[^a-zA-Z0-9\s-]/g, '') // Remove special characters
+    .trim() // Trim leading/trailing spaces
+    .replace(/\s+/g, '-') // Replace spaces with dashes
+    .toLowerCase(); // Convert to lowercase
+}
+
 const hexToRgb = (hex) => {
   var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result ? {
@@ -393,7 +404,7 @@ const invokeAfterIdle = (callback, delay = 1300) => {
 const queueForLater = (params) => {
 
   const instance = {
-    delay: 1500,
+    delay: 1200,
     ...params,
 
     items: [],
@@ -443,6 +454,7 @@ export {
   removeStyleFromTag,
   createFormData,
   unslugAndCapitalize,
+  slugify,
   applyDatasourceReplacer,
   strVars,
   invokeAfterIdle,