@maizzle/framework 6.0.8 → 6.0.10

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

@@ -1,67 +1,67 @@
 {
-  "hash": "3b54bef3",
-  "configHash": "713dc748",
+  "hash": "cbb16bb0",
+  "configHash": "02cb2161",
   "lockfileHash": "e3b0c442",
-  "browserHash": "ce701eeb",
+  "browserHash": "98d765c2",
   "optimized": {
     "@lucide/vue": {
       "src": "../../../../../node_modules/@lucide/vue/dist/esm/lucide-vue.mjs",
       "file": "@lucide_vue.js",
-      "fileHash": "706ba87f",
+      "fileHash": "fcae4f29",
       "needsInterop": false
     },
     "@vueuse/core": {
       "src": "../../../../../node_modules/@vueuse/core/dist/index.js",
       "file": "@vueuse_core.js",
-      "fileHash": "3cf62389",
+      "fileHash": "b01cea7a",
       "needsInterop": false
     },
     "@vueuse/shared": {
       "src": "../../../../../node_modules/@vueuse/shared/dist/index.js",
       "file": "@vueuse_shared.js",
-      "fileHash": "9c0b3c8f",
+      "fileHash": "b5a784a1",
       "needsInterop": false
     },
     "class-variance-authority": {
       "src": "../../../../../node_modules/class-variance-authority/dist/index.mjs",
       "file": "class-variance-authority.js",
-      "fileHash": "d7aca618",
+      "fileHash": "5cae1021",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../../../../node_modules/clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "a2824016",
+      "fileHash": "1099431c",
       "needsInterop": false
     },
     "culori": {
       "src": "../../../../../node_modules/culori/src/index.js",
       "file": "culori.js",
-      "fileHash": "2168c639",
+      "fileHash": "897266f7",
       "needsInterop": false
     },
     "reka-ui": {
       "src": "../../../../../node_modules/reka-ui/dist/index.js",
       "file": "reka-ui.js",
-      "fileHash": "73e1ad3a",
+      "fileHash": "13c5a14b",
       "needsInterop": false
     },
     "tailwind-merge": {
       "src": "../../../../../node_modules/tailwind-merge/dist/bundle-cjs.js",
       "file": "tailwind-merge.js",
-      "fileHash": "c8257a39",
+      "fileHash": "fa35c58c",
       "needsInterop": true
     },
     "vue-router": {
       "src": "../../../../../node_modules/vue-router/dist/vue-router.js",
       "file": "vue-router.js",
-      "fileHash": "e47dc4d6",
+      "fileHash": "c1bf41a6",
       "needsInterop": false
     },
     "vue": {
       "src": "../../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "2ea5bfb6",
+      "fileHash": "aeeb6470",
       "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.10",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -58,7 +58,7 @@
     "markdown-exit": "^1.1.0-beta.2",
     "nodemailer": "^9.0.0",
     "ora": "^9.3.0",
-    "oxfmt": "^0.60.0",
+    "oxfmt": "^0.61.0",
     "pathe": "^2.0.3",
     "postcss": "^8.5.6",
     "postcss-calc": "^10.1.1",