vuetify-masonry 0.3.3 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# vuetify-masonry
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/vuetify-masonry)
|
|
4
|
+
[](https://www.npmjs.com/package/vuetify-masonry)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
[](https://vuejs.org/)
|
|
7
|
+
[](https://vuetifyjs.com/)
|
|
8
|
+
[](https://github.com/semantic-release/semantic-release)
|
|
9
|
+
|
|
3
10
|
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.
|
|
4
11
|
|
|
5
12
|
## Installation
|
|
@@ -8,8 +15,6 @@ Install the package and ensure peer dependencies are present:
|
|
|
8
15
|
|
|
9
16
|
```bash
|
|
10
17
|
npm install vuetify-masonry
|
|
11
|
-
# or
|
|
12
|
-
# yarn add vuetify-masonry
|
|
13
18
|
```
|
|
14
19
|
|
|
15
20
|
Peer dependencies: Vue 3 and Vuetify 3 (see `package.json`).
|
|
@@ -32,7 +37,7 @@ The component uses Vuetify's `useDisplay` breakpoints to pick the appropriate co
|
|
|
32
37
|
|
|
33
38
|
## Slot API
|
|
34
39
|
|
|
35
|
-
Provide a
|
|
40
|
+
Provide a slot to render each item. The slot receives these props:
|
|
36
41
|
|
|
37
42
|
- `item`: the item value from the `items` array
|
|
38
43
|
- `index`: the index of the item within its column
|
|
@@ -43,7 +48,7 @@ Example:
|
|
|
43
48
|
```vue
|
|
44
49
|
<template>
|
|
45
50
|
<v-masonry :items="cards" col="3">
|
|
46
|
-
<template
|
|
51
|
+
<template v-slot="{ item }">
|
|
47
52
|
<v-card>
|
|
48
53
|
<v-card-title>{{ item.title }}</v-card-title>
|
|
49
54
|
<v-card-text>{{ item.description }}</v-card-text>
|
package/dist/vuetify-masonry.mjs
CHANGED
|
@@ -58,17 +58,17 @@ const y = /* @__PURE__ */ B({
|
|
|
58
58
|
key: m,
|
|
59
59
|
class: E({ "mb-6": m !== l.length - 1 })
|
|
60
60
|
}, [
|
|
61
|
-
M(t.$slots, "
|
|
61
|
+
M(t.$slots, "default", {
|
|
62
62
|
item: s,
|
|
63
63
|
index: m,
|
|
64
64
|
columnIndex: n
|
|
65
65
|
}, () => [
|
|
66
|
-
r[0] || (r[0] = g(" Please provide
|
|
66
|
+
r[0] || (r[0] = g(" Please provide a ", -1)),
|
|
67
67
|
r[1] || (r[1] = N("a", {
|
|
68
68
|
href: "https://github.com/senerh/vuetify-masonry?tab=readme-ov-file#slot-api",
|
|
69
69
|
target: "_blank",
|
|
70
70
|
rel: "noopener"
|
|
71
|
-
}, "
|
|
71
|
+
}, "slot", -1)),
|
|
72
72
|
r[2] || (r[2] = g(". ", -1))
|
|
73
73
|
])
|
|
74
74
|
], 2))), 128))
|
|
@@ -1 +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,"
|
|
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,"default",{item:i,index:a,columnIndex:s},()=>[n[0]||(n[0]=e.createTextVNode(" Please provide a ",-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"},"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"}})}));
|