vuetify-masonry 0.3.3 → 0.4.1

package/README.md

@@ -1,49 +1,51 @@
 # vuetify-masonry
 
-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.
+[![npm version](https://img.shields.io/npm/v/vuetify-masonry.svg)](https://www.npmjs.com/package/vuetify-masonry)
+[![npm downloads](https://img.shields.io/npm/dm/vuetify-masonry.svg)](https://www.npmjs.com/package/vuetify-masonry)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Vue 3](https://img.shields.io/badge/Vue-3-42b883?logo=vue.js)](https://vuejs.org/)
+[![Vuetify 3](https://img.shields.io/badge/Vuetify-3-1867C0?logo=vuetify)](https://vuetifyjs.com/)
+[![semantic-release: conventionalcommits](https://img.shields.io/badge/semantic--release-conventionalcommits-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
 
-## Installation
+Lightweight Vue 3 component for responsive masonry-style grids built on Vuetify 3 primitives.
 
-Install the package and ensure peer dependencies are present:
+## ✨ Features
 
-```bash
-npm install vuetify-masonry
-# or
-# yarn add vuetify-masonry
-```
+- 📱 **Fully responsive** - Automatic column adjustment across all breakpoints
+- ⚡ **Lightweight** - Built on Vuetify's native layout components
+- 🎯 **Flexible** - Customizable column count per breakpoint
+- 🔧 **TypeScript** - Full type support included
+- 🎨 **Slot-based** - Complete control over item rendering
 
-Peer dependencies: Vue 3 and Vuetify 3 (see `package.json`).
+## 🚀 Demo
 
-## Usage
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/vuetify-masonry-demo?file=src%2FApp.vue)
 
-Import the component locally when you need it:
+## 📦 Installation
 
-```js
-import { VMasonry } from 'vuetify-masonry'
+```bash
+npm install vuetify-masonry
 ```
 
-## Props
+**Peer dependencies:** Vue 3 and Vuetify 3
 
-- `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.
+## 📖 Usage
 
-The component uses Vuetify's `useDisplay` breakpoints to pick the appropriate column count.
+Import `VMasonry` and simply use it in template.
 
-## 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
+```js
+<script setup>
+  import { VMasonry } from 'vuetify-masonry'
 
-Example:
+  const cards = [
+    { title: 'Card 1', description: 'Short' },
+    { title: 'Card 2', description: 'Longer content to show varying heights' }
+  ]
+</script>
 
-```vue
 <template>
-  <v-masonry :items="cards" col="3">
-    <template #item="{ item }">
+  <v-masonry :items="cards" col="2" sm="3">
+    <template #default="{ item }">
       <v-card>
         <v-card-title>{{ item.title }}</v-card-title>
         <v-card-text>{{ item.description }}</v-card-text>
@@ -51,34 +53,34 @@ Example:
     </template>
   </v-masonry>
 </template>
-
-<script setup>
-const cards = [
-  { title: 'One', description: 'Short' },
-  {
-    title: 'Two',
-    description: 'Longer content to demonstrate varying heights',
-  },
-  // ...
-]
-</script>
 ```
 
-## Notes
+## ⚙️ API
 
-- 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`).
+### Props
 
-## Development
+- **items** (`Array<T>`): List of items to render
+- **col, xs, sm, md, lg, xl, xxl** (`1 | 2 | 3 | 4 | 6 | 12`): Column count per breakpoint (mobile-first)
 
-Run the dev server or build for publishing:
+### Slot
 
-```bash
-npm install
-npm run dev     # start example / dev server
-npm run build   # produce files in dist/
-```
+**Default slot** - Renders each item in the masonry grid
+
+Slot props:
+
+- `item` - The item value from the `items` array
+- `index` - The index of the item within its column
+- `columnIndex` - The index of the column where the item is placed
+
+## 🏗️ How It Works
+
+The component distributes items across columns using a round-robin algorithm (`columns[index % nbColumns]`), ensuring balanced column heights. It leverages Vuetify's `VRow` and `VCol` components for responsive grid behavior.
+
+## 🌟 Showcase
+
+[![Benim Pencerem Ebru](https://img.shields.io/badge/🌐-benimpenceremebru.com-blue)](https://benimpenceremebru.com/)
+
+_Using vuetify-masonry in your project? [Open a PR](https://github.com/senerh/vuetify-masonry/edit/main/README.md) to add it here!_
 
 ## License
 

package/dist/components/VMasonry.vue.d.ts

@@ -14,7 +14,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
-        item?(_: {
+        default?(_: {
             item: T;
             index: number;
             columnIndex: number;

package/dist/vuetify-masonry.mjs

@@ -58,17 +58,17 @@ const y = /* @__PURE__ */ B({
               key: m,
               class: E({ "mb-6": m !== l.length - 1 })
             }, [
-              M(t.$slots, "item", {
+              M(t.$slots, "default", {
                 item: s,
                 index: m,
                 columnIndex: n
               }, () => [
-                r[0] || (r[0] = g(" Please provide an ", -1)),
+                r[0] || (r[0] = g(" Please ", -1)),
                 r[1] || (r[1] = N("a", {
-                  href: "https://github.com/senerh/vuetify-masonry?tab=readme-ov-file#slot-api",
+                  href: "https://github.com/senerh/vuetify-masonry?tab=readme-ov-file#-usage",
                   target: "_blank",
                   rel: "noopener"
-                }, "item slot", -1)),
+                }, "provide a slot", -1)),
                 r[2] || (r[2] = g(". ", -1))
               ])
             ], 2))), 128))

package/dist/vuetify-masonry.umd.js

@@ -1 +1 @@
-(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,d){"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(),f=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:f.value},()=>[]);return t.items.forEach((n,o)=>{l[o%f.value].push(n)}),l});return(l,n)=>(e.openBlock(),e.createBlock(e.unref(d.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(d.VCol),{key:s,cols:12/f.value},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o,(i,a)=>(e.openBlock(),e.createElementBlock("div",{key:a,class:e.normalizeClass({"mb-6":a!==o.length-1})},[e.renderSlot(l.$slots,"item",{item:i,index:a,columnIndex:s},()=>[n[0]||(n[0]=e.createTextVNode(" Please provide an ",-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"},"item slot",-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"}})}));
+(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,d){"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:g,xlAndUp:V,xxl:B}=m.useDisplay(),f=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):V.value?n(t.xl,t.lg,t.md,t.sm,t.xs,t.col):g.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,o)=>{l[o%f.value].push(n)}),l});return(l,n)=>(e.openBlock(),e.createBlock(e.unref(d.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(d.VCol),{key:s,cols:12/f.value},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o,(i,a)=>(e.openBlock(),e.createElementBlock("div",{key:a,class:e.normalizeClass({"mb-6":a!==o.length-1})},[e.renderSlot(l.$slots,"default",{item:i,index:a,columnIndex:s},()=>[n[0]||(n[0]=e.createTextVNode(" Please ",-1)),n[1]||(n[1]=e.createElementVNode("a",{href:"https://github.com/senerh/vuetify-masonry?tab=readme-ov-file#-usage",target:"_blank",rel:"noopener"},"provide a slot",-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.3.3",
+  "version": "0.4.1",
   "description": "A simple Vuetify-compatible masonry grid Vue 3 component",
   "main": "dist/vuetify-masonry.umd.js",
   "module": "dist/vuetify-masonry.mjs",