vuetify-masonry 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Hakan Sener
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,47 @@
+# vuetify-masonry
+
+A small Vue 3 component providing a simple masonry grid compatible with Vuetify 3's layout primitives.
+
+## Install
+
+As a published package:
+
+npm install vuetify-masonry
+
+Peer dependencies: `vue` and `vuetify` (install those in your app).
+
+## Usage
+
+Global install:
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createVuetify } from 'vuetify'
+import VuetifyMasonry from 'vuetify-masonry'
+
+const app = createApp(App)
+app.use(createVuetify())
+app.use(VuetifyMasonry)
+app.mount('#app')
+
+Or local import:
+
+import { MasonryGrid } from 'vuetify-masonry'
+
+export default { components: { MasonryGrid } }
+
+### Slot API
+
+Use the `item` named slot and read `item`, `index`, `columnIndex` from slot props.
+
+## Build
+
+Install dev dependencies and build:
+
+```bash
+cd vuetify-masonry
+npm install
+npm run build
+```
+
+The build outputs `dist` suitable for publishing to npm.

package/dist/vuetify-masonry.mjs

@@ -0,0 +1,90 @@
+import { defineComponent as B, computed as x, resolveComponent as m, createBlock as v, openBlock as t, withCtx as i, createVNode as M, createElementBlock as p, Fragment as _, renderList as g, normalizeClass as E, renderSlot as N } from "vue";
+import { useDisplay as z } from "vuetify";
+const y = /* @__PURE__ */ B({
+  __name: "VMasonry",
+  props: {
+    col: {},
+    items: { default: () => [] },
+    xs: {},
+    sm: {},
+    md: {},
+    lg: {},
+    xl: {},
+    xxl: {}
+  },
+  setup(s) {
+    const e = s, {
+      xs: A,
+      smAndUp: h,
+      mdAndUp: U,
+      lgAndUp: k,
+      xlAndUp: C,
+      xxl: b
+    } = z(), c = x(() => {
+      const l = (o) => {
+        if (o !== void 0)
+          return typeof o == "string" ? Number(o) : o;
+      }, n = (...o) => {
+        for (const u of o) {
+          const r = l(u);
+          if (r !== void 0) return r;
+        }
+        return 1;
+      };
+      return b.value ? n(
+        e.xxl,
+        e.xl,
+        e.lg,
+        e.md,
+        e.sm,
+        e.xs,
+        e.col
+      ) : C.value ? n(e.xl, e.lg, e.md, e.sm, e.xs, e.col) : k.value ? n(e.lg, e.md, e.sm, e.xs, e.col) : U.value ? n(e.md, e.sm, e.xs, e.col) : h.value ? n(e.sm, e.xs, e.col) : A.value ? n(e.xs, e.col) : n(e.col);
+    }), V = x(() => {
+      const l = Array.from({ length: c.value }, () => []);
+      return e.items.forEach((n, o) => {
+        l[o % c.value].push(n);
+      }), l;
+    });
+    return (l, n) => {
+      const o = m("v-col"), u = m("v-row"), r = m("v-container");
+      return t(), v(r, { class: "pt-6" }, {
+        default: i(() => [
+          M(u, null, {
+            default: i(() => [
+              (t(!0), p(_, null, g(V.value, (d, f) => (t(), v(o, {
+                key: f,
+                cols: 12 / c.value
+              }, {
+                default: i(() => [
+                  (t(!0), p(_, null, g(d, (w, a) => (t(), p("div", {
+                    key: a,
+                    class: E({ "mb-6": a !== d.length - 1 })
+                  }, [
+                    N(l.$slots, "item", {
+                      item: w,
+                      index: a,
+                      columnIndex: f
+                    })
+                  ], 2))), 128))
+                ]),
+                _: 2
+              }, 1032, ["cols"]))), 128))
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      });
+    };
+  }
+}), L = {
+  ...y,
+  install(s) {
+    s.component("VMasonry", y);
+  }
+};
+export {
+  y as VMasonry,
+  L as default
+};

package/dist/vuetify-masonry.umd.js

@@ -0,0 +1 @@
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuetify")):typeof define=="function"&&define.amd?define(["exports","vue","vuetify"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.VuetifyMasonry={},l.Vue,l.Vuetify))})(this,(function(l,e,p){"use strict";const c=e.defineComponent({__name:"VMasonry",props:{col:{},items:{default:()=>[]},xs:{},sm:{},md:{},lg:{},xl:{},xxl:{}},setup(i){const n=i,{xs:_,smAndUp:y,mdAndUp:k,lgAndUp:h,xlAndUp:g,xxl:B}=p.useDisplay(),a=e.computed(()=>{const r=t=>{if(t!==void 0)return typeof t=="string"?Number(t):t},o=(...t)=>{for(const m of t){const s=r(m);if(s!==void 0)return s}return 1};return B.value?o(n.xxl,n.xl,n.lg,n.md,n.sm,n.xs,n.col):g.value?o(n.xl,n.lg,n.md,n.sm,n.xs,n.col):h.value?o(n.lg,n.md,n.sm,n.xs,n.col):k.value?o(n.md,n.sm,n.xs,n.col):y.value?o(n.sm,n.xs,n.col):_.value?o(n.xs,n.col):o(n.col)}),C=e.computed(()=>{const r=Array.from({length:a.value},()=>[]);return n.items.forEach((o,t)=>{r[t%a.value].push(o)}),r});return(r,o)=>{const t=e.resolveComponent("v-col"),m=e.resolveComponent("v-row"),s=e.resolveComponent("v-container");return e.openBlock(),e.createBlock(s,{class:"pt-6"},{default:e.withCtx(()=>[e.createVNode(m,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C.value,(d,f)=>(e.openBlock(),e.createBlock(t,{key:f,cols:12/a.value},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d,(A,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,class:e.normalizeClass({"mb-6":u!==d.length-1})},[e.renderSlot(r.$slots,"item",{item:A,index:u,columnIndex:f})],2))),128))]),_:2},1032,["cols"]))),128))]),_:3})]),_:3})}}}),x={...c,install(i){i.component("VMasonry",c)}};l.VMasonry=c,l.default=x,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "vuetify-masonry",
+  "version": "0.0.1",
+  "description": "A simple Vuetify-compatible masonry grid Vue 3 component",
+  "main": "dist/vuetify-masonry.umd.js",
+  "module": "dist/vuetify-masonry.es.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext .ts,.vue"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0",
+    "vuetify": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.3",
+    "typescript": "^5.0.0",
+    "vite": "^7.3.0",
+    "vue": "^3.2.0",
+    "vuetify": "^3.0.0"
+  }
+}