vuetify-masonry 0.2.4 → 0.3.0

package/README.md

@@ -1,47 +1,85 @@
 # vuetify-masonry
 
-A small Vue 3 component providing a simple masonry grid compatible with Vuetify 3's layout primitives.
+Lightweight Vue 3 component that provides a responsive masonry-style grid built on Vuetify 3 layout primitives (`VRow`, `VCol`). Use it to render lists of variable-height items in evenly balanced columns.
 
-## Install
+## Installation
 
-As a published package:
+Install the package and ensure peer dependencies are present:
 
+```bash
 npm install vuetify-masonry
+# or
+# yarn add vuetify-masonry
+```
 
-Peer dependencies: `vue` and `vuetify` (install those in your app).
+Peer dependencies: Vue 3 and Vuetify 3 (see `package.json`).
 
 ## 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')
+Import the component locally when you need it:
 
-Or local import:
-
-import { MasonryGrid } from 'vuetify-masonry'
+```js
+import { VMasonry } from 'vuetify-masonry'
+```
 
-export default { components: { MasonryGrid } }
+## Props
+
+- `items` (Array<T>, default `[]`): the list of items to render into the masonry columns.
+- `col` (1 | 2 | 3 | 4 | 6 | 12 or string): default number of columns fallback.
+- `xs`, `sm`, `md`, `lg`, `xl`, `xxl` (same as `col`): responsive column count overrides for each breakpoint.
+
+The component uses Vuetify's `useDisplay` breakpoints to pick the appropriate column count.
+
+## Slot API
+
+Provide a named slot `item` to render each item. The slot receives these props:
+
+- `item`: the item value from the `items` array
+- `index`: the index of the item within its column
+- `columnIndex`: the index of the column the item was placed into
+
+Example:
+
+```vue
+<template>
+  <v-masonry :items="cards" col="3">
+    <template #item="{ item }">
+      <v-card>
+        <v-card-title>{{ item.title }}</v-card-title>
+        <v-card-text>{{ item.description }}</v-card-text>
+      </v-card>
+    </template>
+  </v-masonry>
+</template>
+
+<script setup>
+const cards = [
+  { title: 'One', description: 'Short' },
+  {
+    title: 'Two',
+    description: 'Longer content to demonstrate varying heights',
+  },
+  // ...
+]
+</script>
+```
 
-### Slot API
+## Notes
 
-Use the `item` named slot and read `item`, `index`, `columnIndex` from slot props.
+- The component implementation lives in `src/components/VMasonry.vue` and relies on Vuetify's `VRow` and `VCol` for layout.
+- Column distribution places items round-robin into columns: `columns[index % nbColumns]`.
+- This package targets Vue 3 + Vuetify 3 (see `peerDependencies` in `package.json`).
 
-## Build
+## Development
 
-Install dev dependencies and build:
+Run the dev server or build for publishing:
 
 ```bash
-cd vuetify-masonry
 npm install
-npm run build
+npm run dev     # start example / dev server
+npm run build   # produce files in dist/
 ```
 
-The build outputs `dist` suitable for publishing to npm.
+## License
+
+MIT

package/dist/vuetify-masonry.mjs

@@ -1,7 +1,7 @@
-import { defineComponent as b, computed as f, createBlock as p, openBlock as n, unref as c, withCtx as i, createVNode as h, createElementBlock as d, Fragment as x, renderList as v, normalizeClass as B, renderSlot as M, createTextVNode as N } from "vue";
+import { defineComponent as B, computed as c, createBlock as d, openBlock as o, unref as f, withCtx as p, createElementBlock as i, Fragment as x, renderList as v, normalizeClass as E, renderSlot as M, createTextVNode as g, createElementVNode as N } from "vue";
 import { useDisplay as w } from "vuetify";
-import { VContainer as E, VRow as z, VCol as D } from "vuetify/components";
-const g = /* @__PURE__ */ b({
+import { VRow as _, VCol as z } from "vuetify/components";
+const y = /* @__PURE__ */ B({
   __name: "VMasonry",
   props: {
     col: {},
@@ -15,24 +15,24 @@ const g = /* @__PURE__ */ b({
   },
   setup(u) {
     const e = u, {
-      xs: y,
-      smAndUp: V,
-      mdAndUp: A,
-      lgAndUp: C,
+      xs: b,
+      smAndUp: A,
+      mdAndUp: V,
+      lgAndUp: k,
       xlAndUp: U,
-      xxl: _
-    } = w(), a = f(() => {
-      const t = (l) => {
-        if (l !== void 0)
-          return typeof l == "string" ? Number(l) : l;
-      }, r = (...l) => {
-        for (const o of l) {
-          const s = t(o);
+      xxl: h
+    } = w(), a = c(() => {
+      const l = (t) => {
+        if (t !== void 0)
+          return typeof t == "string" ? Number(t) : t;
+      }, r = (...t) => {
+        for (const n of t) {
+          const s = l(n);
           if (s !== void 0) return s;
         }
         return 1;
       };
-      return _.value ? r(
+      return h.value ? r(
         e.xxl,
         e.xl,
         e.lg,
@@ -40,51 +40,52 @@ const g = /* @__PURE__ */ b({
         e.sm,
         e.xs,
         e.col
-      ) : U.value ? r(e.xl, e.lg, e.md, e.sm, e.xs, e.col) : C.value ? r(e.lg, e.md, e.sm, e.xs, e.col) : A.value ? r(e.md, e.sm, e.xs, e.col) : V.value ? r(e.sm, e.xs, e.col) : y.value ? r(e.xs, e.col) : r(e.col);
-    }), k = f(() => {
-      const t = Array.from({ length: a.value }, () => []);
-      return e.items.forEach((r, l) => {
-        t[l % a.value].push(r);
-      }), t;
+      ) : U.value ? r(e.xl, e.lg, e.md, e.sm, e.xs, e.col) : k.value ? r(e.lg, e.md, e.sm, e.xs, e.col) : V.value ? r(e.md, e.sm, e.xs, e.col) : A.value ? r(e.sm, e.xs, e.col) : b.value ? r(e.xs, e.col) : r(e.col);
+    }), C = c(() => {
+      const l = Array.from({ length: a.value }, () => []);
+      return e.items.forEach((r, t) => {
+        l[t % a.value].push(r);
+      }), l;
     });
-    return (t, r) => (n(), p(c(E), { class: "pt-6" }, {
-      default: i(() => [
-        h(c(z), null, {
-          default: i(() => [
-            (n(!0), d(x, null, v(k.value, (l, o) => (n(), p(c(D), {
-              key: o,
-              cols: 12 / a.value
-            }, {
-              default: i(() => [
-                (n(!0), d(x, null, v(l, (s, m) => (n(), d("div", {
-                  key: m,
-                  class: B({ "mb-6": m !== l.length - 1 })
-                }, [
-                  M(t.$slots, "item", {
-                    item: s,
-                    index: m,
-                    columnIndex: o
-                  }, () => [
-                    r[0] || (r[0] = N(' Please define a slot named "item" to render items ', -1))
-                  ])
-                ], 2))), 128))
-              ]),
-              _: 2
-            }, 1032, ["cols"]))), 128))
+    return (l, r) => (o(), d(f(_), null, {
+      default: p(() => [
+        (o(!0), i(x, null, v(C.value, (t, n) => (o(), d(f(z), {
+          key: n,
+          cols: 12 / a.value
+        }, {
+          default: p(() => [
+            (o(!0), i(x, null, v(t, (s, m) => (o(), i("div", {
+              key: m,
+              class: E({ "mb-6": m !== t.length - 1 })
+            }, [
+              M(l.$slots, "item", {
+                item: s,
+                index: m,
+                columnIndex: n
+              }, () => [
+                r[0] || (r[0] = g(" Please provide an item slot – see the ", -1)),
+                r[1] || (r[1] = N("a", {
+                  href: "https://github.com/senerh/vuetify-masonry?tab=readme-ov-file#slot-api",
+                  target: "_blank",
+                  rel: "noopener"
+                }, "documentation", -1)),
+                r[2] || (r[2] = g(". ", -1))
+              ])
+            ], 2))), 128))
           ]),
-          _: 3
-        })
+          _: 2
+        }, 1032, ["cols"]))), 128))
       ]),
       _: 3
     }));
   }
-}), R = {
-  ...g,
+}), P = {
+  ...y,
   install(u) {
-    u.component("VMasonry", g);
+    u.component("VMasonry", y);
   }
 };
 export {
-  g as VMasonry,
-  R as default
+  y as VMasonry,
+  P as default
 };

package/dist/vuetify-masonry.umd.js

@@ -1 +1 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuetify"),require("vuetify/components")):typeof define=="function"&&define.amd?define(["exports","vue","vuetify","vuetify/components"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.VuetifyMasonry={},o.Vue,o.Vuetify,o.Vuetify))})(this,(function(o,e,m,c){"use strict";const u=e.defineComponent({__name:"VMasonry",props:{col:{},items:{default:()=>[]},xs:{},sm:{},md:{},lg:{},xl:{},xxl:{}},setup(d){const t=d,{xs:x,smAndUp:y,mdAndUp:k,lgAndUp:V,xlAndUp:B,xxl:g}=m.useDisplay(),f=e.computed(()=>{const l=r=>{if(r!==void 0)return typeof r=="string"?Number(r):r},n=(...r)=>{for(const s of r){const i=l(s);if(i!==void 0)return i}return 1};return g.value?n(t.xxl,t.xl,t.lg,t.md,t.sm,t.xs,t.col):B.value?n(t.xl,t.lg,t.md,t.sm,t.xs,t.col):V.value?n(t.lg,t.md,t.sm,t.xs,t.col):k.value?n(t.md,t.sm,t.xs,t.col):y.value?n(t.sm,t.xs,t.col):x.value?n(t.xs,t.col):n(t.col)}),h=e.computed(()=>{const l=Array.from({length:f.value},()=>[]);return t.items.forEach((n,r)=>{l[r%f.value].push(n)}),l});return(l,n)=>(e.openBlock(),e.createBlock(e.unref(c.VContainer),{class:"pt-6"},{default:e.withCtx(()=>[e.createVNode(e.unref(c.VRow),null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(r,s)=>(e.openBlock(),e.createBlock(e.unref(c.VCol),{key:s,cols:12/f.value},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r,(i,a)=>(e.openBlock(),e.createElementBlock("div",{key:a,class:e.normalizeClass({"mb-6":a!==r.length-1})},[e.renderSlot(l.$slots,"item",{item:i,index:a,columnIndex:s},()=>[n[0]||(n[0]=e.createTextVNode(' Please define a slot named "item" to render items ',-1))])],2))),128))]),_:2},1032,["cols"]))),128))]),_:3})]),_:3}))}}),p={...u,install(d){d.component("VMasonry",u)}};o.VMasonry=u,o.default=p,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuetify"),require("vuetify/components")):typeof define=="function"&&define.amd?define(["exports","vue","vuetify","vuetify/components"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.VuetifyMasonry={},r.Vue,r.Vuetify,r.Vuetify))})(this,(function(r,e,m,f){"use strict";const u=e.defineComponent({__name:"VMasonry",props:{col:{},items:{default:()=>[]},xs:{},sm:{},md:{},lg:{},xl:{},xxl:{}},setup(c){const t=c,{xs:x,smAndUp:y,mdAndUp:k,lgAndUp:V,xlAndUp:g,xxl:B}=m.useDisplay(),a=e.computed(()=>{const l=o=>{if(o!==void 0)return typeof o=="string"?Number(o):o},n=(...o)=>{for(const s of o){const i=l(s);if(i!==void 0)return i}return 1};return B.value?n(t.xxl,t.xl,t.lg,t.md,t.sm,t.xs,t.col):g.value?n(t.xl,t.lg,t.md,t.sm,t.xs,t.col):V.value?n(t.lg,t.md,t.sm,t.xs,t.col):k.value?n(t.md,t.sm,t.xs,t.col):y.value?n(t.sm,t.xs,t.col):x.value?n(t.xs,t.col):n(t.col)}),h=e.computed(()=>{const l=Array.from({length:a.value},()=>[]);return t.items.forEach((n,o)=>{l[o%a.value].push(n)}),l});return(l,n)=>(e.openBlock(),e.createBlock(e.unref(f.VRow),null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(o,s)=>(e.openBlock(),e.createBlock(e.unref(f.VCol),{key:s,cols:12/a.value},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o,(i,d)=>(e.openBlock(),e.createElementBlock("div",{key:d,class:e.normalizeClass({"mb-6":d!==o.length-1})},[e.renderSlot(l.$slots,"item",{item:i,index:d,columnIndex:s},()=>[n[0]||(n[0]=e.createTextVNode(" Please provide an item slot – see the ",-1)),n[1]||(n[1]=e.createElementVNode("a",{href:"https://github.com/senerh/vuetify-masonry?tab=readme-ov-file#slot-api",target:"_blank",rel:"noopener"},"documentation",-1)),n[2]||(n[2]=e.createTextVNode(". ",-1))])],2))),128))]),_:2},1032,["cols"]))),128))]),_:3}))}}),p={...u,install(c){c.component("VMasonry",u)}};r.VMasonry=u,r.default=p,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-masonry",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "A simple Vuetify-compatible masonry grid Vue 3 component",
   "main": "dist/vuetify-masonry.umd.js",
   "module": "dist/vuetify-masonry.mjs",
@@ -24,7 +24,8 @@
     "dev": "vite",
     "prepublishOnly": "npm run build",
     "build": "vite build",
-    "lint": "eslint . --ext .ts,.vue",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
     "release": "semantic-release"
   },
   "peerDependencies": {
@@ -34,9 +35,12 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.3",
     "typescript": "^5.0.0",
+    "eslint": "^9.13.0",
+    "eslint-plugin-vue": "^9.29.0",
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.2.0",
-    "vuetify": "^3.0.0"
+    "vuetify": "^3.0.0",
+    "prettier": "^3.3.3"
   }
 }