@maizzle/framework 6.0.8 → 6.0.9

package/dist/server/ui/.vite/deps/_metadata.json

@@ -1,67 +1,67 @@
 {
-  "hash": "3b54bef3",
-  "configHash": "713dc748",
+  "hash": "b4b60ec2",
+  "configHash": "09dd6fb0",
   "lockfileHash": "e3b0c442",
-  "browserHash": "ce701eeb",
+  "browserHash": "cfed9a1f",
   "optimized": {
     "@lucide/vue": {
       "src": "../../../../../node_modules/@lucide/vue/dist/esm/lucide-vue.mjs",
       "file": "@lucide_vue.js",
-      "fileHash": "706ba87f",
+      "fileHash": "a3d54b31",
       "needsInterop": false
     },
     "@vueuse/core": {
       "src": "../../../../../node_modules/@vueuse/core/dist/index.js",
       "file": "@vueuse_core.js",
-      "fileHash": "3cf62389",
+      "fileHash": "9ac6c9e8",
       "needsInterop": false
     },
     "@vueuse/shared": {
       "src": "../../../../../node_modules/@vueuse/shared/dist/index.js",
       "file": "@vueuse_shared.js",
-      "fileHash": "9c0b3c8f",
+      "fileHash": "9a9286c4",
       "needsInterop": false
     },
     "class-variance-authority": {
       "src": "../../../../../node_modules/class-variance-authority/dist/index.mjs",
       "file": "class-variance-authority.js",
-      "fileHash": "d7aca618",
+      "fileHash": "a2ba5bd0",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../../../../node_modules/clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "a2824016",
+      "fileHash": "7f88946c",
       "needsInterop": false
     },
     "culori": {
       "src": "../../../../../node_modules/culori/src/index.js",
       "file": "culori.js",
-      "fileHash": "2168c639",
+      "fileHash": "798fcb02",
       "needsInterop": false
     },
     "reka-ui": {
       "src": "../../../../../node_modules/reka-ui/dist/index.js",
       "file": "reka-ui.js",
-      "fileHash": "73e1ad3a",
+      "fileHash": "78f37cba",
       "needsInterop": false
     },
     "tailwind-merge": {
       "src": "../../../../../node_modules/tailwind-merge/dist/bundle-cjs.js",
       "file": "tailwind-merge.js",
-      "fileHash": "c8257a39",
+      "fileHash": "7fd733dd",
       "needsInterop": true
     },
     "vue-router": {
       "src": "../../../../../node_modules/vue-router/dist/vue-router.js",
       "file": "vue-router.js",
-      "fileHash": "e47dc4d6",
+      "fileHash": "605db2ca",
       "needsInterop": false
     },
     "vue": {
       "src": "../../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "2ea5bfb6",
+      "fileHash": "f7a8609e",
       "needsInterop": false
     }
   },

package/dist/server/ui/App.vue

@@ -290,6 +290,31 @@ function toggleDarkMode() {
   darkMode.value = !darkMode.value
 }
 
+const vFade = {
+  mounted(el: HTMLElement) {
+    const update = () => {
+      const max = el.scrollWidth - el.clientWidth
+      el.style.setProperty('--fade-l', el.scrollLeft > 1 ? 'transparent' : '#000')
+      el.style.setProperty('--fade-r', el.scrollLeft < max - 1 ? 'transparent' : '#000')
+    }
+    ;(el as any)._fade = update
+    el.addEventListener('scroll', update, { passive: true })
+    window.addEventListener('resize', update)
+    const observer = new ResizeObserver(update)
+    observer.observe(el)
+    ;(el as any)._fadeObserver = observer
+    requestAnimationFrame(update)
+  },
+  updated(el: HTMLElement) {
+    requestAnimationFrame((el as any)._fade)
+  },
+  unmounted(el: HTMLElement) {
+    el.removeEventListener('scroll', (el as any)._fade)
+    window.removeEventListener('resize', (el as any)._fade)
+    ;(el as any)._fadeObserver?.disconnect()
+  },
+}
+
 onMounted(() => {
   document.addEventListener('keydown', onKeydown)
   window.addEventListener('blur', onWindowBlur)
@@ -329,7 +354,9 @@ onUnmounted(() => {
           </SidebarGroup>
 
           <SidebarGroup v-for="(items, dir) in grouped" :key="dir" v-else>
-            <SidebarGroupLabel>{{ dir }}</SidebarGroupLabel>
+            <SidebarGroupLabel>
+              <span v-fade class="min-w-0 overflow-x-auto whitespace-nowrap scrollbar-hide fade-scroll">{{ dir }}</span>
+            </SidebarGroupLabel>
             <SidebarGroupContent>
               <SidebarMenu>
                 <SidebarMenuItem v-for="t in items" :key="t.path">

package/dist/server/ui/main.css

@@ -152,3 +152,18 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22h6a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v6'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M3 22V14l4 4 4-4v8'/%3E%3C/svg%3E");
           mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22h6a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v6'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M3 22V14l4 4 4-4v8'/%3E%3C/svg%3E");
 }
+
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility fade-scroll {
+  --fade-l: #000;
+  --fade-r: #000;
+  -webkit-mask-image: linear-gradient(to right, var(--fade-l) 0, #000 1.5rem, #000 calc(100% - 1.5rem), var(--fade-r) 100%);
+          mask-image: linear-gradient(to right, var(--fade-l) 0, #000 1.5rem, #000 calc(100% - 1.5rem), var(--fade-r) 100%);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "6.0.8",
+  "version": "6.0.9",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",