@directus/app 9.0.0-rc.96 → 9.0.0-rc.97

package/dist/assets/v-card-title.dfa34dfb.js

@@ -0,0 +1,4 @@
+import{r as n,p as r,q as c,w as o,B as e,P as l}from"./vendor.9bb37c18.js";const d=e("div",{class:"markdown-body"},[e("p",null,[l("This component is used to give a "),e("code",null,"v-card"),l(" an already stylized title.")]),e("pre",null,[e("code",{class:"language-html"},[e("span",{class:"hljs-tag"},[l("<"),e("span",{class:"hljs-name"},"v-card"),l(">")]),l(`
+	`),e("span",{class:"hljs-tag"},[l("<"),e("span",{class:"hljs-name"},"v-card-title"),l(">")]),l("My Own Title"),e("span",{class:"hljs-tag"},[l("</"),e("span",{class:"hljs-name"},"v-card-title"),l(">")]),l(`
+`),e("span",{class:"hljs-tag"},[l("</"),e("span",{class:"hljs-name"},"v-card"),l(">")]),l(`
+`)])]),e("h2",{id:"reference"},[l("Reference "),e("a",{class:"header-anchor",href:"#reference"},"#")]),e("h4",{id:"slots"},[l("Slots "),e("a",{class:"header-anchor",href:"#slots"},"#")]),e("table",null,[e("thead",null,[e("tr",null,[e("th",null,"Slot"),e("th",null,"Description"),e("th",null,"Data")])]),e("tbody",null,[e("tr",null,[e("td",null,[e("em",null,"default")]),e("td",null,"Where the title will go"),e("td")])])])],-1),m={setup(h,{expose:s}){const a={title:"Card Title",modularExtension:!1};return s({frontmatter:a}),(p,u)=>{const t=n("DocsWrapper");return r(),c(t,{frontmatter:a},{default:o(()=>[d]),_:1})}}};export{m as default};

package/dist/assets/v-card.a9bdcfe7.js

@@ -0,0 +1,23 @@
+import{r as e,p as c,q as r,w as d,B as l,P as s}from"./vendor.9bb37c18.js";const o=l("div",{class:"markdown-body"},[l("p",null,"A card is nothing but a v-sheet with predefined building blocks to enforce consistency."),l("h2",{id:"usage"},[s("Usage "),l("a",{class:"header-anchor",href:"#usage"},"#")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-card"),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-card-title"),s(">")]),s("Hello, world!"),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-card-title"),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-card-subtitle"),s(">")]),s("This is a card"),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-card-subtitle"),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-card-text"),s(">")]),s("Consectetur enim ullamco sint sit deserunt proident consectetur."),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-card-text"),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-card-actions"),s(">")]),s(`
+		`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-button"),s(">")]),s("Save"),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-button"),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-card-actions"),s(">")]),s(`
+`),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-card"),s(">")]),s(`
+`)])]),l("p",null,"Cards can be used to consistently style dialogs:"),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-dialog"),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"template"),s(" #"),l("span",{class:"hljs-attr"},"activator"),s("="),l("span",{class:"hljs-string"},'"{ on }"'),s(">")]),s(`
+		`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-button"),s(" @"),l("span",{class:"hljs-attr"},"click"),s("="),l("span",{class:"hljs-string"},'"on"'),s(">")]),s("Show dialog"),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-button"),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"template"),s(">")]),s(`
+
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-card"),s(">")]),s(`
+		`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-card-title"),s(">")]),s("Are you sure you want to delete 1 item?"),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-card-title"),s(">")]),s(`
+		`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-card-actions"),s(">")]),s(`
+			`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-button"),s(),l("span",{class:"hljs-attr"},"secondary"),s(),l("span",{class:"hljs-attr"},"outlined"),s(">")]),s("Cancel"),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-button"),s(">")]),s(`
+			`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-button"),s(">")]),s("Yes"),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-button"),s(">")]),s(`
+		`),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-card-actions"),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-card"),s(">")]),s(`
+`),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-dialog"),s(">")]),s(`
+`)])]),l("h2",{id:"reference"},[s("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[s("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"disabled")]),l("td",null,"Disable the card, prevents all cursor interaction"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"tile")]),l("td",null,"Render without rounded corners"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])])])]),l("h4",{id:"events"},[s("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("p",null,"n/a"),l("h4",{id:"slots"},[s("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Slot"),l("th",null,"Description"),l("th",null,"Data")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("em",null,"default")]),l("td"),l("td")])])]),l("h4",{id:"css-variables"},[s("CSS Variables "),l("a",{class:"header-anchor",href:"#css-variables"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Default")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"--v-card-min-width")]),l("td",null,[l("code",null,"none")])]),l("tr",null,[l("td",null,[l("code",null,"--v-card-max-width")]),l("td",null,[l("code",null,"400px")])]),l("tr",null,[l("td",null,[l("code",null,"--v-card-min-height")]),l("td",null,[l("code",null,"none")])]),l("tr",null,[l("td",null,[l("code",null,"--v-card-max-height")]),l("td",null,[l("code",null,"min-content")])]),l("tr",null,[l("td",null,[l("code",null,"--v-card-padding")]),l("td",null,[l("code",null,"16px")])]),l("tr",null,[l("td",null,[l("code",null,"--v-card-background-color")]),l("td",null,[l("code",null,"var(--background-subdued)")])]),l("tr",null,[l("td",null,[l("code",null,"--v-card-height")]),l("td",null,[l("code",null,"auto")])])])]),l("hr"),l("h1",{id:"card-title"},[s("Card Title "),l("a",{class:"header-anchor",href:"#card-title"},"#")]),l("p",null,"Functional component that enforces consistent styling."),l("h2",{id:"usage-2"},[s("Usage "),l("a",{class:"header-anchor",href:"#usage-2"},"#")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-card-title"),s(">")]),s("Hello, world!"),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-card-title"),s(">")]),s(`
+`)])])],-1),j={setup(h,{expose:n}){const a={title:"Card",modularExtension:!1};return n({frontmatter:a}),(u,p)=>{const t=e("DocsWrapper");return c(),r(t,{frontmatter:a},{default:d(()=>[o]),_:1})}}};export{j as default};

package/dist/assets/v-checkbox.6c39e9ba.js

@@ -0,0 +1,52 @@
+import{r as t,p as c,q as o,w as r,B as l,P as s}from"./vendor.9bb37c18.js";const h=l("div",{class:"markdown-body"},[l("p",null,"Display a single checkbox on which you can model a boolean."),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-checkbox"),s(),l("span",{class:"hljs-attr"},"v-model"),s("="),l("span",{class:"hljs-string"},'"checked"'),s(),l("span",{class:"hljs-attr"},"label"),s("="),l("span",{class:"hljs-string"},'"Receive newsletter"'),s(" />")]),s(`
+`)])]),l("h2",{id:"colors"},[s("Colors "),l("a",{class:"header-anchor",href:"#colors"},"#")]),l("p",null,[s("The colors can be changed via the css variables "),l("code",null,"--v-checkbox-color"),s(".")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-checkbox"),s(),l("span",{class:"hljs-attr"},"class"),s("="),l("span",{class:"hljs-string"},'"example-1"'),s(" />")]),s(`
+`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-checkbox"),s(),l("span",{class:"hljs-attr"},"class"),s("="),l("span",{class:"hljs-string"},'"example-2"'),s(" />")]),s(`
+`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-checkbox"),s(),l("span",{class:"hljs-attr"},"class"),s("="),l("span",{class:"hljs-string"},'"example-3"'),s(" />")]),s(`
+`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-checkbox"),s(),l("span",{class:"hljs-attr"},"class"),s("="),l("span",{class:"hljs-string"},'"example-4"'),s(" />")]),s(`
+
+`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"style"),s(">")]),l("span",{class:"css"},[s(`
+	`),l("span",{class:"hljs-selector-class"},".example-1"),s(` {
+		--v-checkbox-`),l("span",{class:"hljs-attribute"},"color"),s(": "),l("span",{class:"hljs-number"},"#abcabc"),s(`;
+	}
+
+	`),l("span",{class:"hljs-selector-class"},".example-2"),s(` {
+		--v-checkbox-`),l("span",{class:"hljs-attribute"},"color"),s(": "),l("span",{class:"hljs-built_in"},"rgba"),s("("),l("span",{class:"hljs-number"},"125"),s(", "),l("span",{class:"hljs-number"},"125"),s(", "),l("span",{class:"hljs-number"},"198"),s(", "),l("span",{class:"hljs-number"},"0.5"),s(`);
+	}
+
+	`),l("span",{class:"hljs-selector-class"},".example-3"),s(` {
+		--v-checkbox-`),l("span",{class:"hljs-attribute"},"color"),s(": "),l("span",{class:"hljs-built_in"},"var"),s(`(--red);
+	}
+
+	`),l("span",{class:"hljs-selector-class"},".example-4"),s(` {
+		--v-checkbox-`),l("span",{class:"hljs-attribute"},"color"),s(": "),l("span",{class:"hljs-built_in"},"var"),s(`(--border-normal);
+	}
+`)]),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"style"),s(">")]),s(`
+`)])]),l("h2",{id:"boolean-vs-arrays"},[s("Boolean vs arrays "),l("a",{class:"header-anchor",href:"#boolean-vs-arrays"},"#")]),l("p",null,[s("Just as with checkboxes, you can use "),l("code",null,"v-model"),s(" with both an array and a boolean:")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"template"),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-checkbox"),s(),l("span",{class:"hljs-attr"},"v-model"),s("="),l("span",{class:"hljs-string"},'"withBoolean"'),s(" />")]),s(`
+
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-checkbox"),s(),l("span",{class:"hljs-attr"},"v-model"),s("="),l("span",{class:"hljs-string"},'"withArray"'),s(),l("span",{class:"hljs-attr"},"value"),s("="),l("span",{class:"hljs-string"},'"red"'),s(" />")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-checkbox"),s(),l("span",{class:"hljs-attr"},"v-model"),s("="),l("span",{class:"hljs-string"},'"withArray"'),s(),l("span",{class:"hljs-attr"},"value"),s("="),l("span",{class:"hljs-string"},'"blue"'),s(" />")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-checkbox"),s(),l("span",{class:"hljs-attr"},"v-model"),s("="),l("span",{class:"hljs-string"},'"withArray"'),s(),l("span",{class:"hljs-attr"},"value"),s("="),l("span",{class:"hljs-string"},'"green"'),s(" />")]),s(`
+`),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"template"),s(">")]),s(`
+
+`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"script"),s(">")]),l("span",{class:"javascript"},[s(`
+	`),l("span",{class:"hljs-keyword"},"export"),s(),l("span",{class:"hljs-keyword"},"default"),s(` {
+		`),l("span",{class:"hljs-function"},[l("span",{class:"hljs-title"},"data"),s("("),l("span",{class:"hljs-params"}),s(")")]),s(` {
+			`),l("span",{class:"hljs-keyword"},"return"),s(` {
+				`),l("span",{class:"hljs-attr"},"withBoolean"),s(": "),l("span",{class:"hljs-literal"},"false"),s(`,
+				`),l("span",{class:"hljs-attr"},"withArray"),s(": ["),l("span",{class:"hljs-string"},"'red'"),s(", "),l("span",{class:"hljs-string"},"'green'"),s(`],
+			};
+		},
+	};
+`)]),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"script"),s(">")]),s(`
+`)])]),l("p",null,[s("Keep in mind to pass the "),l("code",null,"value"),s(" prop with a unique value when using arrays in "),l("code",null,"v-model"),s(".")]),l("h2",{id:"indeterminate"},[s("Indeterminate "),l("a",{class:"header-anchor",href:"#indeterminate"},"#")]),l("p",null,[s("The indeterminate state can be set with the "),l("code",null,"indeterminate"),s(" prop. We recommend using the "),l("code",null,"v-model"),s(" directive with the indeterminate prop, so the checkbox can set change it too:")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-checkbox"),s(),l("span",{class:"hljs-attr"},"v-model:indeterminate"),s("="),l("span",{class:"hljs-string"},'"indeterminate"'),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"script"),s(">")]),l("span",{class:"javascript"},[s(`
+		`),l("span",{class:"hljs-keyword"},"export"),s(),l("span",{class:"hljs-keyword"},"default"),s(` {
+			`),l("span",{class:"hljs-function"},[l("span",{class:"hljs-title"},"data"),s("("),l("span",{class:"hljs-params"}),s(")")]),s(` {
+				`),l("span",{class:"hljs-attr"},"indeterminate"),s(": "),l("span",{class:"hljs-literal"},"true"),s(`;
+			},
+		};
+	`)]),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"script"),s(">")]),s(`
+`),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-checkbox"),s(">")]),s(`
+`)])]),l("p",null,[s("If you can\u2019t, you should listen to the "),l("code",null,"update:indeterminate"),s(" event and respond to that:")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-checkbox"),s(),l("span",{class:"hljs-attr"},"indeterminate"),s(" @"),l("span",{class:"hljs-attr"},"update:indeterminate"),s("="),l("span",{class:"hljs-string"},'"setIndeterminate"'),s(">")]),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-checkbox"),s(">")]),s(`
+`)])]),l("h2",{id:"reference"},[s("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[s("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"value")]),l("td",null,"Value for checkbox. Similar to value attr on checkbox type input in HTML"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"input-value")]),l("td",null,[s("Value that\u2019s used with "),l("code",null,"v-model"),s(". Either boolean or array of values")]),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"[Boolean, Array]")])]),l("tr",null,[l("td",null,[l("code",null,"label")]),l("td",null,"Label for the checkbox"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"disabled")]),l("td",null,"Disable the checkbox"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"indeterminate")]),l("td",null,"Show the indeterminate state"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"icon-on")]),l("td",null,"What icon to use for the on state"),l("td",null,[l("code",null,"'check_box'")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"icon-off")]),l("td",null,"What icon to use for the off state"),l("td",null,[l("code",null,"'check_box_outline_blank'")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"icon-indeterminate")]),l("td",null,"What icon to use for the indeterminate state"),l("td",null,[l("code",null,"'indeterminate_check_box'")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"block")]),l("td",null,"Show as styled block. Matches input size"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"custom-value")]),l("td"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])])])]),l("h4",{id:"slots"},[s("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Slot"),l("th",null,"Description"),l("th",null,"Data")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"prepend")]),l("td",null,"Rendered right before the checkbox"),l("td")]),l("tr",null,[l("td",null,[l("code",null,"append")]),l("td",null,"Rendered right after the label"),l("td")]),l("tr",null,[l("td",null,[l("em",null,"default")]),l("td"),l("td")])])]),l("h4",{id:"events"},[s("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Event"),l("th",null,"Description"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"change")]),l("td",null,"New state for the checkbox"),l("td",null,"Boolean or array of values")]),l("tr",null,[l("td",null,[l("code",null,"update:indeterminate")]),l("td",null,"New state for the checkbox"),l("td",null,"Boolean or array of values")])])]),l("h4",{id:"css-variables"},[s("CSS Variables "),l("a",{class:"header-anchor",href:"#css-variables"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Default")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"--v-checkbox-color")]),l("td",null,[l("code",null,"var(--primary)")])])])])],-1),j={setup(u,{expose:n}){const a={title:"Checkbox",modularExtension:!1};return n({frontmatter:a}),(d,p)=>{const e=t("DocsWrapper");return c(),o(e,{frontmatter:a},{default:r(()=>[h]),_:1})}}};export{j as default};

package/dist/assets/v-chip.7de0f28d.js

@@ -0,0 +1,14 @@
+import{r as c,p as t,q as o,w as u,B as l,P as n}from"./vendor.9bb37c18.js";const r=l("div",{class:"markdown-body"},[l("p",null,"Chips are small round components that can be used to display tags or similar data."),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"v-chip"),n(">")]),n("I'm a chip!"),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"v-chip"),n(">")]),n(`
+`)])]),l("h2",{id:"sizes"},[n("Sizes "),l("a",{class:"header-anchor",href:"#sizes"},"#")]),l("p",null,"The chip component supports the following sizes through the use of props:"),l("ul",null,[l("li",null,"x-small"),l("li",null,"small"),l("li",null,"(default)"),l("li",null,"large"),l("li",null,"x-large")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"v-chip"),n(),l("span",{class:"hljs-attr"},"x-small"),n(">")]),n("I'm a chip!"),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"v-chip"),n(">")]),n(`
+`)])]),l("h2",{id:"colors"},[n("Colors "),l("a",{class:"header-anchor",href:"#colors"},"#")]),l("p",null,[n("You can set the color, background color, hover color, and background hover color with the "),l("code",null,"--v-chip-color"),n(", "),l("code",null,"--v-chip-background-color"),n(", "),l("code",null,"--v-chip-color-hover"),n(", and "),l("code",null,"--v-chip-background-color-hover"),n(" css variables respectively:")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"v-chip"),n(">")]),n("I'm a chip!"),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"v-chip"),n(">")]),n(`
+`),l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"style"),n(">")]),l("span",{class:"css"},[n(`
+	`),l("span",{class:"hljs-selector-class"},".v-chip"),n(` {
+		--v-chip-`),l("span",{class:"hljs-attribute"},"color"),n(": "),l("span",{class:"hljs-built_in"},"var"),n(`(--red);
+		--v-chip-`),l("span",{class:"hljs-attribute"},"background-color"),n(": "),l("span",{class:"hljs-built_in"},"var"),n("(--red-"),l("span",{class:"hljs-number"},"50"),n(`);
+		--v-chip-`),l("span",{class:"hljs-attribute"},"color"),n("-hover: "),l("span",{class:"hljs-built_in"},"var"),n(`(--white);
+		--v-chip-`),l("span",{class:"hljs-attribute"},"background-color"),n("-hover: "),l("span",{class:"hljs-built_in"},"var"),n(`(--red);
+	}
+`)]),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"style"),n(">")]),n(`
+`)])]),l("h2",{id:"clicks-%2F-closes"},[n("Clicks / Closes "),l("a",{class:"header-anchor",href:"#clicks-%2F-closes"},"#")]),l("p",null,[n("There are two events, one when clicking on the chip called "),l("code",null,"click"),n(" and one when clicking on the enabled close icon called "),l("code",null,"close"),n(".")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"v-chip"),n(" @"),l("span",{class:"hljs-attr"},"click"),n("="),l("span",{class:"hljs-string"},'"sayHi"'),n(">")]),n("Hello!"),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"v-chip"),n(">")]),n(`
+`),l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"v-chip"),n(),l("span",{class:"hljs-attr"},"close"),n(" @"),l("span",{class:"hljs-attr"},"close"),n("="),l("span",{class:"hljs-string"},'"close"'),n(">")]),n("I'm closeable!"),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"v-chip"),n(">")]),n(`
+`)])]),l("h2",{id:"reference"},[n("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[n("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"active")]),l("td",null,[n("Change visibility. Can be reacted to via "),l("code",null,"sync")]),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"close")]),l("td",null,"Displays a close icon which triggers the close event"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"close-icon")]),l("td",null,[n("Which icon should be displayed instead of "),l("code",null,"close ")]),l("td",null,[l("code",null,"'close'")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"outlined")]),l("td",null,"No background"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"label")]),l("td",null,"Label style"),l("td",null,[l("code",null,"true")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"disabled")]),l("td",null,"Disabled state"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])])])]),l("h4",{id:"slots"},[n("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Slot"),l("th",null,"Description"),l("th",null,"Data")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("em",null,"default")]),l("td"),l("td",null,"\u2013")])])]),l("h4",{id:"events"},[n("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Event"),l("th",null,"Description"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"click")]),l("td",null,"Triggers when clicked somewhere on the chip"),l("td")]),l("tr",null,[l("td",null,[l("code",null,"close")]),l("td",null,[n("Triggers when the "),l("code",null,"close"),n(" prop is enabled and gets clicked (Doesn\u2019t trigger the "),l("code",null,"click"),n(" event)")]),l("td")]),l("tr",null,[l("td",null,[l("code",null,"update:active")]),l("td"),l("td")])])]),l("h4",{id:"css-variables"},[n("CSS Variables "),l("a",{class:"header-anchor",href:"#css-variables"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Default")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"--v-chip-color")]),l("td",null,[l("code",null,"var(--foreground-normal)")])]),l("tr",null,[l("td",null,[l("code",null,"--v-chip-background-color")]),l("td",null,[l("code",null,"var(--background-normal-alt)")])]),l("tr",null,[l("td",null,[l("code",null,"--v-chip-color-hover")]),l("td",null,[l("code",null,"var(--white)")])]),l("tr",null,[l("td",null,[l("code",null,"--v-chip-background-color-hover")]),l("td",null,[l("code",null,"var(--primary-125)")])]),l("tr",null,[l("td",null,[l("code",null,"--v-chip-close-color")]),l("td",null,[l("code",null,"var(--danger)")])]),l("tr",null,[l("td",null,[l("code",null,"--v-chip-close-color-disabled")]),l("td",null,[l("code",null,"var(--primary)")])]),l("tr",null,[l("td",null,[l("code",null,"--v-chip-close-color-hover")]),l("td",null,[l("code",null,"var(--primary-125)")])])])])],-1),v={setup(d,{expose:e}){const s={title:"Chip",modularExtension:!1};return e({frontmatter:s}),(h,i)=>{const a=c("DocsWrapper");return t(),o(a,{frontmatter:s},{default:u(()=>[r]),_:1})}}};export{v as default};

package/dist/assets/v-detail.70754781.js

@@ -0,0 +1,4 @@
+import{r as s,p as o,q as d,w as u,B as l,P as e}from"./vendor.9bb37c18.js";const r=l("div",{class:"markdown-body"},[l("p",null,"Use the detail component to hide not so important information or elements."),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"v-detail"),e(),l("span",{class:"hljs-attr"},"label"),e("="),l("span",{class:"hljs-string"},'"There is content hidden in me"'),e(">")]),e(`
+	`),l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"div"),e(">")]),e("I'm hidden until you open the component"),l("span",{class:"hljs-tag"},[e("</"),l("span",{class:"hljs-name"},"div"),e(">")]),e(`
+`),l("span",{class:"hljs-tag"},[e("</"),l("span",{class:"hljs-name"},"v-detail"),e(">")]),e(`
+`)])]),l("h2",{id:"reference"},[e("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[e("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"active")]),l("td",null,[e("Used with "),l("code",null,"v-model")]),l("td",null,[l("code",null,"undefined")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"label")]),l("td",null,"Label of detail"),l("td",null,[l("code",null,"i18n.global.t('toggle')")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"start-open")]),l("td",null,"Have it open by default"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"disabled")]),l("td",null,"Disable any interaction"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])])])]),l("h4",{id:"events"},[e("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Event"),l("th",null,"Description"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"toggle")]),l("td",null,"New active value of divider"),l("td",null,[l("code",null,"boolean")])])])]),l("h4",{id:"slots"},[e("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Slot"),l("th",null,"Description"),l("th",null,"Data")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("em",null,"default")]),l("td",null,"Content of the detail section"),l("td")]),l("tr",null,[l("td",null,[l("code",null,"title")]),l("td",null,"Content to render in divider"),l("td",null,[l("code",null,"{ active: boolean }")])])])]),l("h4",{id:"css-variables"},[e("CSS Variables "),l("a",{class:"header-anchor",href:"#css-variables"},"#")]),l("p",null,"n/a")],-1),f={setup(c,{expose:t}){const n={title:"Detail",modularExtension:!1};return t({frontmatter:n}),(i,h)=>{const a=s("DocsWrapper");return o(),d(a,{frontmatter:n},{default:u(()=>[r]),_:1})}}};export{f as default};

package/dist/assets/v-dialog.5e4d5eec.js

@@ -0,0 +1,8 @@
+import{r as a,p as o,q as u,w as d,B as l,P as n}from"./vendor.9bb37c18.js";const c=l("div",{class:"markdown-body"},[l("p",null,"Renders an overlay with a flex slot rendering whatever content you pass."),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"v-dialog"),n(">")]),n(`
+	`),l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"v-sheet"),n(">")]),n(`
+		`),l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"h2"),n(">")]),n("Are you sure you want to delete this item?"),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"h2"),n(">")]),n(`
+		`),l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"v-button"),n(">")]),n("No"),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"v-button"),n(">")]),n(`
+		`),l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"v-button"),n(">")]),n("Yes"),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"v-button"),n(">")]),n(`
+	`),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"v-sheet"),n(">")]),n(`
+`),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"v-dialog"),n(">")]),n(`
+`)])]),l("h2",{id:"reference"},[n("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[n("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"persistent")]),l("td",null,"Disable closing by clicking on the side"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"active")]),l("td",null,[n("Can be used in combination with "),l("code",null,"v-model")]),l("td",null,[l("code",null,"undefined")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"placement")]),l("td",null,[n("Display it either in the "),l("code",null,"center"),n(" or to the "),l("code",null,"right")]),l("td",null,[l("code",null,"'center'")]),l("td",null,[l("code",null,"String")])])])]),l("h4",{id:"slots"},[n("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Slot"),l("th",null,"Description"),l("th",null,"Data")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("em",null,"default")]),l("td",null,"Whatever should be rendered inside the dialog"),l("td")]),l("tr",null,[l("td",null,[l("code",null,"activator")]),l("td",null,"Insert an activator for the dialog"),l("td")])])]),l("h4",{id:"events"},[n("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Event"),l("th",null,"Description"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"toggle")]),l("td",null,"Change the active state"),l("td",null,[l("code",null,"boolean")])]),l("tr",null,[l("td",null,[l("code",null,"esc")]),l("td",null,"Escape has been pressed"),l("td",null,[l("code",null,"boolean")])])])]),l("h4",{id:"css-variables"},[n("CSS Variables "),l("a",{class:"header-anchor",href:"#css-variables"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Default")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"--v-dialog-z-index")]),l("td",null,[l("code",null,"100")])])])])],-1),b={setup(r,{expose:t}){const e={title:"Dialog",modularExtension:!1};return t({frontmatter:e}),(h,i)=>{const s=a("DocsWrapper");return o(),u(s,{frontmatter:e},{default:d(()=>[c]),_:1})}}};export{b as default};

package/dist/assets/v-divider.a12d7826.js

@@ -0,0 +1,2 @@
+import{r as d,p as a,q as o,w as s,B as l,P as e}from"./vendor.9bb37c18.js";const u=l("div",{class:"markdown-body"},[l("p",null,[e("Divides content. Made to be used in "),l("code",null,"v-list"),e(" or "),l("code",null,"v-tabs"),e(" components.")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"v-divider"),e(">")]),e("New Section"),l("span",{class:"hljs-tag"},[e("</"),l("span",{class:"hljs-name"},"v-divider"),e(">")]),e(`
+`)])]),l("h2",{id:"reference"},[e("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[e("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"vertical")]),l("td",null,"Render the divider vertically"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"inline-title")]),l("td",null,"Render the title inline with the divider, or under it"),l("td",null,[l("code",null,"true")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"large")]),l("td",null,"Renders a larger divider"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])])])]),l("h4",{id:"events"},[e("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("p",null,"n/a"),l("h4",{id:"slots"},[e("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Slot"),l("th",null,"Description"),l("th",null,"Data")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("em",null,"default")]),l("td",null,"Label on the divider. This isn\u2019t rendered in vertical mode."),l("td")]),l("tr",null,[l("td",null,[l("code",null,"icon")]),l("td",null,"Icon on the divider. Rendered in all modes, inline with title if present"),l("td")])])]),l("h4",{id:"css-variables"},[e("CSS Variables "),l("a",{class:"header-anchor",href:"#css-variables"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Default")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"--v-divider-color")]),l("td",null,[l("code",null,"var(--border-normal)")])]),l("tr",null,[l("td",null,[l("code",null,"--v-divider-label-color")]),l("td",null,[l("code",null,"var(--foreground-normal-alt)")])])])])],-1),v={setup(c,{expose:t}){const n={title:"Divider",modularExtension:!1};return t({frontmatter:n}),(i,h)=>{const r=d("DocsWrapper");return a(),o(r,{frontmatter:n},{default:s(()=>[u]),_:1})}}};export{v as default};

package/dist/assets/v-drawer.f1d66a7a.js

@@ -0,0 +1,4 @@
+import{r as a,p as u,q as r,w as s,B as l,P as e}from"./vendor.9bb37c18.js";const o=l("div",{class:"markdown-body"},[l("p",null,"A more robust dialog that is rendered at the side and provides more space than a usual dialog. Can be helpful for relational or nested data."),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"v-drawer"),e(),l("span",{class:"hljs-attr"},"v-model"),e("="),l("span",{class:"hljs-string"},'"isOpen"'),e(">")]),e(`
+	`),l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"div"),e(">")]),e("This text will show up in the drawer"),l("span",{class:"hljs-tag"},[e("</"),l("span",{class:"hljs-name"},"div"),e(">")]),e(`
+`),l("span",{class:"hljs-tag"},[e("</"),l("span",{class:"hljs-name"},"v-drawer"),e(">")]),e(`
+`)])]),l("h2",{id:"reference"},[e("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[e("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"title"),e("*")]),l("td",null,"The title of the drawer"),l("td"),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"subtitle")]),l("td",null,"The subtitle of the drawer"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"active")]),l("td",null,[e("Can be used with "),l("code",null,"v-model"),e(" to open or close the drawer")]),l("td",null,[l("code",null,"undefined")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"persistent")]),l("td",null,"Disallow closing the drawer by clicking out of it"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"icon")]),l("td",null,"An icon for the drawer"),l("td",null,[l("code",null,"'box'")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"sidebar-label")]),l("td",null,"A label for the sidebar"),l("td",null,[l("code",null,"i18n.global.t('sidebar')")]),l("td",null,[l("code",null,"String")])])])]),l("h4",{id:"events"},[e("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Event"),l("th",null,"Description"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"cancel")]),l("td",null,"When escape is pressed or the drawer gets canceled in other ways"),l("td")]),l("tr",null,[l("td",null,[l("code",null,"toggle")]),l("td",null,"When the drawer gets opened or closed"),l("td",null,[l("code",null,"boolean")])])])]),l("h4",{id:"slots"},[e("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Slot"),l("th",null,"Description"),l("th",null,"Data")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"activator")]),l("td",null,"Elements placed inside here can activate the drawer"),l("td",null,[l("code",null,"on")])]),l("tr",null,[l("td",null,[l("code",null,"sidebar")]),l("td",null,"Display components to the side of the drawer like tabs"),l("td")]),l("tr",null,[l("td",null,[l("code",null,"subtitle")]),l("td",null,"Add a custom subtitle"),l("td")]),l("tr",null,[l("td",null,[l("code",null,"actions:prepend")]),l("td",null,"Prepend actions to the drawer"),l("td")]),l("tr",null,[l("td",null,[l("code",null,"actions")]),l("td",null,"Add actions to the top right corner"),l("td")]),l("tr",null,[l("td",null,[l("code",null,"header:append")]),l("td",null,"Append your elements to the header"),l("td")]),l("tr",null,[l("td",null,[l("em",null,"default")]),l("td",null,"Where the content of the drawer goes"),l("td")])])]),l("h4",{id:"css-variables"},[e("CSS Variables "),l("a",{class:"header-anchor",href:"#css-variables"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Default")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"--v-drawer-max-width")]),l("td",null,[l("code",null,"856px")])])])])],-1),b={setup(c,{expose:n}){const t={title:"Drawer",modularExtension:!1};return n({frontmatter:t}),(h,i)=>{const d=a("DocsWrapper");return u(),r(d,{frontmatter:t},{default:s(()=>[o]),_:1})}}};export{b as default};

package/dist/assets/v-error.135a88cd.js

@@ -0,0 +1,2 @@
+import{r as a,p as n,q as o,w as c,B as e,P as r}from"./vendor.9bb37c18.js";const p=e("div",{class:"markdown-body"},[e("p",null,"Display an api request error."),e("pre",null,[e("code",{class:"language-html"},[e("span",{class:"hljs-tag"},[r("<"),e("span",{class:"hljs-name"},"v-error"),r(),e("span",{class:"hljs-attr"},":error"),r("="),e("span",{class:"hljs-string"},'"error"'),r(" />")]),r(`
+`)])]),e("h2",{id:"reference"},[r("Reference "),e("a",{class:"header-anchor",href:"#reference"},"#")]),e("h4",{id:"props"},[r("Props "),e("a",{class:"header-anchor",href:"#props"},"#")]),e("table",null,[e("thead",null,[e("tr",null,[e("th",null,"Prop"),e("th",null,"Description"),e("th",null,"Default"),e("th",null,"Type")])]),e("tbody",null,[e("tr",null,[e("td",null,[e("code",null,"error"),r("*")]),e("td",null,"The error returned from the api request"),e("td"),e("td",null,[e("code",null,"any")])])])])],-1),f={setup(u,{expose:s}){const l={title:"Error",modularExtension:!1};return s({frontmatter:l}),(d,h)=>{const t=a("DocsWrapper");return n(),o(t,{frontmatter:l},{default:c(()=>[p]),_:1})}}};export{f as default};

package/dist/assets/v-fancy-select.02f7aaca.js

@@ -0,0 +1,24 @@
+import{r as s,p as o,q as d,w as u,B as l,P as t}from"./vendor.9bb37c18.js";const r=l("div",{class:"markdown-body"},[l("p",null,"Mimics the functionality of a select, where only the current value is shown, but does it in a different visual representation."),l("h2",{id:"usage"},[t("Usage "),l("a",{class:"header-anchor",href:"#usage"},"#")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[t("<"),l("span",{class:"hljs-name"},"v-fancy-select"),t(`
+	`),l("span",{class:"hljs-attr"},"v-model"),t("="),l("span",{class:"hljs-string"},'"selection"'),t(`
+	`),l("span",{class:"hljs-attr"},":items"),t("="),l("span",{class:"hljs-string"},`"[
+		{
+			value: 'code',
+			icon: 'code',
+			text: 'Raw Value',
+			description: 'This works for most non-relational fields',
+		},
+		{
+			value: 'palette',
+			icon: 'palette',
+			text: 'Formatted Value',
+			description: 'Templated formatting and conditional coloring to text values',
+		},
+		{
+			value: 'label',
+			icon: 'label',
+			text: 'Placard',
+			description: 'Shows the value within a colored badge',
+		},
+	]"`),t(`
+/>`)]),t(`
+`)])]),l("h2",{id:"fancyselectitem"},[t("FancySelectItem "),l("a",{class:"header-anchor",href:"#fancyselectitem"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"icon")]),l("td",null,"Which icon to display"),l("td",null,[l("code",null,"string")])]),l("tr",null,[l("td",null,[l("code",null,"value")]),l("td",null,"Which value the item represents"),l("td",null,[l("code",null,"string or number")])]),l("tr",null,[l("td",null,[l("code",null,"text")]),l("td",null,"The displayed text"),l("td",null,[l("code",null,"undefined or string")])]),l("tr",null,[l("td",null,[l("code",null,"description")]),l("td",null,"Optional description to display"),l("td",null,[l("code",null,"undefined or string")])]),l("tr",null,[l("td",null,[l("code",null,"divider")]),l("td",null,"If set to true, display an divider instead"),l("td",null,[l("code",null,"undefined or boolean")])]),l("tr",null,[l("td",null,[l("code",null,"iconRight")]),l("td",null,"Display an optional icon to the right"),l("td",null,[l("code",null,"undefined or string")])])])]),l("h2",{id:"reference"},[t("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[t("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"items"),t("*")]),l("td",null,"The list of possible items to display"),l("td"),l("td",null,[l("code",null,"FancySelectItem[]")])]),l("tr",null,[l("td",null,[l("code",null,"value")]),l("td",null,"used to model the selected items"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"[String, Number]")])]),l("tr",null,[l("td",null,[l("code",null,"disabled")]),l("td",null,"Disable selecting / deselecting a value"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])])])]),l("h4",{id:"events"},[t("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Event"),l("th",null,"Description"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"input")]),l("td",null,[t("Syncs value with "),l("code",null,"v-model")]),l("td",null,[l("code",null,"boolean")])])])]),l("h4",{id:"slots"},[t("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("p",null,"n/a"),l("h4",{id:"css-variables"},[t("CSS Variables "),l("a",{class:"header-anchor",href:"#css-variables"},"#")]),l("p",null,"n/a")],-1),f={setup(c,{expose:n}){const e={title:"Fancy Select",modularExtension:!1};return n({frontmatter:e}),(i,h)=>{const a=s("DocsWrapper");return o(),d(a,{frontmatter:e},{default:u(()=>[r]),_:1})}}};export{f as default};

package/dist/assets/v-field-select.2a7923c2.js

@@ -0,0 +1,2 @@
+import{r as o,p as d,q as c,w as u,B as l,P as e}from"./vendor.9bb37c18.js";const a=l("div",{class:"markdown-body"},[l("p",null,"Allows for easy selection of field inside a collection. Also works with relations inside a collection."),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"v-field-select"),e(),l("span",{class:"hljs-attr"},"collection"),e("="),l("span",{class:"hljs-string"},'"articles"'),e(),l("span",{class:"hljs-attr"},"v-model"),e("="),l("span",{class:"hljs-string"},'"selection"'),e(" />")]),e(`
+`)])]),l("h2",{id:"reference"},[e("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[e("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"collection"),e("*")]),l("td",null,"From where the fields should be selected"),l("td"),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"disabled")]),l("td",null,"Disables this component"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"value")]),l("td",null,"Can be used to model the selected field"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"string[]")])]),l("tr",null,[l("td",null,[l("code",null,"depth")]),l("td",null,[e("If greater than "),l("code",null,"0"),e(", it also considers relations of fields")]),l("td",null,[l("code",null,"1")]),l("td",null,[l("code",null,"Number")])]),l("tr",null,[l("td",null,[l("code",null,"inject")]),l("td",null,"Inject you own fields, collections or relations"),l("td",null,[l("code",null,"() => ({})")]),l("td",null,[l("code",null,"Object")])])])]),l("h4",{id:"events"},[e("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Event"),l("th",null,"Description"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"input")]),l("td",null,"The changed selection"),l("td",null,[l("code",null,"string[]")])])])])],-1),f={setup(r,{expose:t}){const n={title:"Field Select",modularExtension:!1};return t({frontmatter:n}),(i,h)=>{const s=o("DocsWrapper");return d(),c(s,{frontmatter:n},{default:u(()=>[a]),_:1})}}};export{f as default};

package/dist/assets/v-field-template.20f91158.js

@@ -0,0 +1,2 @@
+import{r as o,p as s,q as d,w as r,B as l,P as e}from"./vendor.9bb37c18.js";const u=l("div",{class:"markdown-body"},[l("p",null,"Similar to the v-field-select. Allows you to select fields or relational fields from a collection with the benefit of being able to add text in between."),l("p",null,[e("Models a template string like "),l("code",null,"My name is {name} and I'm {age} years old"),e(".")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"v-field-template"),e(),l("span",{class:"hljs-attr"},"collection"),e("="),l("span",{class:"hljs-string"},'"articles"'),e(" />")]),e(`
+`)])]),l("h2",{id:"reference"},[e("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[e("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"collection"),e("*")]),l("td",null,"From where the fields should be selected"),l("td"),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"disabled")]),l("td",null,"Disables this component"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"value")]),l("td",null,"Can be used to model the template string"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"depth")]),l("td",null,[e("If greater than "),l("code",null,"0"),e(", it also considers relations of fields")]),l("td",null,[l("code",null,"2")]),l("td",null,[l("code",null,"Number")])])])]),l("h4",{id:"events"},[e("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Event"),l("th",null,"Description"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"input")]),l("td",null,"The changed template string"),l("td",null,[l("code",null,"String")])])])])],-1),f={setup(c,{expose:n}){const t={title:"Field Template",modularExtension:!1};return n({frontmatter:t}),(i,h)=>{const a=o("DocsWrapper");return s(),d(a,{frontmatter:t},{default:r(()=>[u]),_:1})}}};export{f as default};

package/dist/assets/v-form.5f224455.js

@@ -0,0 +1,8 @@
+import{r as o,p as s,q as u,w as a,B as l,P as e}from"./vendor.9bb37c18.js";const r=l("div",{class:"markdown-body"},[l("p",null,"Renders a form using interfaces based on the passed collection name."),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"v-form"),e(`
+	`),l("span",{class:"hljs-attr"},"collection"),e("="),l("span",{class:"hljs-string"},'"articles"'),e(`
+	`),l("span",{class:"hljs-attr"},"v-model"),e("="),l("span",{class:"hljs-string"},'"{}"'),e(`
+	`),l("span",{class:"hljs-attr"},":initial-values"),e("="),l("span",{class:"hljs-string"},`"{
+		title: 'Hello World'
+	}"`),e(`
+/>`)]),e(`
+`)])]),l("h2",{id:"reference"},[e("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[e("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"collection")]),l("td",null,"The collection of which you want to render the fields"),l("td",null,[l("code",null,"undefined")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"fields")]),l("td",null,"Array of fields to render. This can be used instead of the collection prop"),l("td",null,[l("code",null,"undefined")]),l("td",null,[l("code",null,"Field[]")])]),l("tr",null,[l("td",null,[l("code",null,"initial-values")]),l("td",null,"Object of the starting values of the fields"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"FieldValues")])]),l("tr",null,[l("td",null,[l("code",null,"model-value")]),l("td",null,[e("The edits that were made after the form was rendered. Being used in "),l("code",null,"v-model")]),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"FieldValues")])]),l("tr",null,[l("td",null,[l("code",null,"loading")]),l("td",null,"Display the form in a loading state. Prevents the ctx menus from being used and renders skeleton loaders for the fields"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"batch-mode")]),l("td",null,"If enabled, allows to select multiple entries"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"primary-key")]),l("td",null,"The primary key of the given collection"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"[String, Number]")])]),l("tr",null,[l("td",null,[l("code",null,"disabled")]),l("td",null,"Disables any interaction with the form"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"validation-errors")]),l("td",null,"Add custom validation to any field"),l("td",null,[l("code",null,"() => []")]),l("td",null,[l("code",null,"ValidationError[]")])])])]),l("p",null,[l("strong",null,"Note"),e(": You have to pass either the collection or fields prop.")]),l("h4",{id:"slots"},[e("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("p",null,"n/a"),l("h4",{id:"events"},[e("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Event"),l("th",null,"Description"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"update:model-value")]),l("td",null,"Edits have been updated."),l("td")])])])],-1),f={setup(c,{expose:t}){const n={title:"Form",modularExtension:!1};return t({frontmatter:n}),(i,h)=>{const d=o("DocsWrapper");return s(),u(d,{frontmatter:n},{default:a(()=>[r]),_:1})}}};export{f as default};

package/dist/assets/v-hover.a0cfae04.js

@@ -0,0 +1,15 @@
+import{r as n,p as o,q as r,w as c,B as l,P as s}from"./vendor.9bb37c18.js";const h=l("div",{class:"markdown-body"},[l("p",null,"Adds hover functionality to any component you place inside. Can be used to display different states of a component depending if you are hovering over it."),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-hover"),s(),l("span",{class:"hljs-attr"},"v-slot"),s("="),l("span",{class:"hljs-string"},'"{ hover }"'),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-button"),s(),l("span",{class:"hljs-attr"},":color"),s("="),l("span",{class:"hljs-string"},'"hover ? red : blue"'),s(" />")]),s(`
+`),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-hover"),s(">")]),s(`
+`)])]),l("h2",{id:"delays"},[s("Delays "),l("a",{class:"header-anchor",href:"#delays"},"#")]),l("p",null,[s("You can control how long the hover state persists after the user leaves the element with the "),l("code",null,"close-delay"),s(" prop. Likewise, you can set how long it will take before the hover state is set with the "),l("code",null,"open-delay"),s(" prop:")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-hover"),s(),l("span",{class:"hljs-attr"},"v-slot"),s("="),l("span",{class:"hljs-string"},'"{ hover }"'),s(),l("span",{class:"hljs-attr"},":open-delay"),s("="),l("span",{class:"hljs-string"},'"250"'),s(),l("span",{class:"hljs-attr"},":close-delay"),s("="),l("span",{class:"hljs-string"},'"400"'),s(">")]),s(`
+	`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"v-button"),s(),l("span",{class:"hljs-attr"},":class"),s("="),l("span",{class:"hljs-string"},'"hover ? red : blue"'),s(" />")]),s(`
+`),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"v-hover"),s(">")]),s(`
+`),l("span",{class:"hljs-tag"},[s("<"),l("span",{class:"hljs-name"},"style"),s(">")]),l("span",{class:"css"},[s(`
+	`),l("span",{class:"hljs-selector-class"},".v-button"),l("span",{class:"hljs-selector-class"},".red"),s(` {
+		--v-`),l("span",{class:"hljs-selector-tag"},"button"),s("-"),l("span",{class:"hljs-attribute"},"color"),s(": "),l("span",{class:"hljs-built_in"},"var"),s(`(--red);
+	}
+	`),l("span",{class:"hljs-selector-class"},".v-button"),l("span",{class:"hljs-selector-class"},".blue"),s(` {
+		--v-`),l("span",{class:"hljs-selector-tag"},"button"),s("-"),l("span",{class:"hljs-attribute"},"color"),s(": "),l("span",{class:"hljs-built_in"},"var"),s(`(--blue);
+	}
+`)]),l("span",{class:"hljs-tag"},[s("</"),l("span",{class:"hljs-name"},"style"),s(">")]),s(`
+`)])]),l("h2",{id:"reference"},[s("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[s("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"close-delay")]),l("td",null,"Delay (ms) before the hover state is removed"),l("td",null,[l("code",null,"0")]),l("td",null,[l("code",null,"Number")])]),l("tr",null,[l("td",null,[l("code",null,"open-delay")]),l("td",null,"Delay (ms) before the hover state is applied"),l("td",null,[l("code",null,"0")]),l("td",null,[l("code",null,"Number")])]),l("tr",null,[l("td",null,[l("code",null,"disabled")]),l("td",null,"Disables the hover state from happening"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"tag")]),l("td",null,"What HTML tag to use for the wrapper"),l("td",null,[l("code",null,"'div'")]),l("td",null,[l("code",null,"String")])])])]),l("h4",{id:"events"},[s("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("p",null,"n/a"),l("h4",{id:"slots"},[s("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Slot"),l("th",null,"Description"),l("th",null,"Data")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("em",null,"default")]),l("td",null,"Place your components that should use the hover effect here"),l("td")])])])],-1),v={setup(u,{expose:a}){const e={title:"Hover",modularExtension:!1};return a({frontmatter:e}),(d,p)=>{const t=n("DocsWrapper");return o(),r(t,{frontmatter:e},{default:c(()=>[h]),_:1})}}};export{v as default};

package/dist/assets/v-icon.01a972a1.js

@@ -0,0 +1,11 @@
+import{r as a,p as o,q as c,w as r,B as l,P as e}from"./vendor.9bb37c18.js";const u=l("div",{class:"markdown-body"},[l("p",null,[e("The icon component allows you to render any "),l("a",{href:"https://material.io/icons",target:"_blank",rel:"noopener noreferrer"},"Material Design Icons"),e(". It also supports rendering of custom SVG based icons.")]),l("h2",{id:"sizes-%2F-colors"},[e("Sizes / Colors "),l("a",{class:"header-anchor",href:"#sizes-%2F-colors"},"#")]),l("p",null,[e("The icon component supports multiple sizes and colors. The color prop accepts any valid CSS color. Color changes are done via the css variable "),l("code",null,"--v-icon-color"),e(" like in the example below.")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"v-icon"),e(),l("span",{class:"hljs-attr"},"name"),e("="),l("span",{class:"hljs-string"},'"add"'),e(" />")]),e(`
+`),l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"style"),e(">")]),l("span",{class:"css"},[e(`
+	`),l("span",{class:"hljs-selector-class"},".v-icon"),e(` {
+		--v-`),l("span",{class:"hljs-attribute"},"icon"),e("-"),l("span",{class:"hljs-attribute"},"color"),e(": "),l("span",{class:"hljs-built_in"},"var"),e("(--green-"),l("span",{class:"hljs-number"},"500"),e(`);
+	}
+`)]),l("span",{class:"hljs-tag"},[e("</"),l("span",{class:"hljs-name"},"style"),e(">")]),e(`
+`)])]),l("h2",{id:"custom-size"},[e("Custom Size "),l("a",{class:"header-anchor",href:"#custom-size"},"#")]),l("p",null,[e("If the default sizes don\u2019t give you the exact size you require, you can add the "),l("code",null,"size"),e(" prop with any custom pixel value. Note: we recommend using one of the pre-defined sizes to ensure a consistent look across the platform.")]),l("h2",{id:"outline"},[e("Outline "),l("a",{class:"header-anchor",href:"#outline"},"#")]),l("p",null,[e("You can render the outline variant of the Material Icon by setting the "),l("code",null,"outline"),e(" property.")]),l("h2",{id:"click-events"},[e("Click events "),l("a",{class:"header-anchor",href:"#click-events"},"#")]),l("p",null,"When you add a click event to the icon, the icon will automatically add a pointer cursor."),l("h2",{id:"left-%2F-right"},[e("Left / Right "),l("a",{class:"header-anchor",href:"#left-%2F-right"},"#")]),l("p",null,[e("Oftentimes, you\u2019ll use the icon next to some text, for example in a button. When doing this, you can use the "),l("code",null,"left"),e(" / "),l("code",null,"right"),e(" props to add some spacing to the icon:")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"v-button"),e(">")]),e(`
+	`),l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"v-icon"),e(),l("span",{class:"hljs-attr"},"name"),e("="),l("span",{class:"hljs-string"},'"add"'),e(),l("span",{class:"hljs-attr"},"left"),e(" />")]),e(`
+	Add new
+`),l("span",{class:"hljs-tag"},[e("</"),l("span",{class:"hljs-name"},"v-button"),e(">")]),e(`
+`)])]),l("h2",{id:"reference"},[e("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[e("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"name"),e("*")]),l("td",null,"Which icon to display"),l("td"),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"filled")]),l("td",null,"Removes the outline style if enabled"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"sup")]),l("td"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"left")]),l("td",null,"Displays the icon more to the left"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"right")]),l("td",null,"Displays the icon more to the right"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"disabled")]),l("td",null,"Disables the icon"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])])])]),l("h4",{id:"css-variables"},[e("CSS Variables "),l("a",{class:"header-anchor",href:"#css-variables"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Default")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"--v-icon-color")]),l("td",null,[l("code",null,"currentColor")])]),l("tr",null,[l("td",null,[l("code",null,"--v-icon-color-hover")]),l("td",null,[l("code",null,"currentColor")])]),l("tr",null,[l("td",null,[l("code",null,"--v-icon-size")]),l("td",null,[l("code",null,"24px")])])])]),l("h4",{id:"events"},[e("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Event"),l("th",null,"Description"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"click")]),l("td",null,"Fires when clicking on the icon"),l("td")])])])],-1),f={setup(d,{expose:s}){const n={title:"Icon",modularExtension:!1};return s({frontmatter:n}),(i,h)=>{const t=a("DocsWrapper");return o(),c(t,{frontmatter:n},{default:r(()=>[u]),_:1})}}};export{f as default};

package/dist/assets/v-info.66acb1ca.js

@@ -0,0 +1,2 @@
+import{r as a,p as o,q as r,w as d,B as l,P as n}from"./vendor.9bb37c18.js";const c=l("div",{class:"markdown-body"},[l("p",null,[n("Renders a stylized informational placard. It\u2019s similar in "),l("code",null,"v-notice"),n(" in it\u2019s use case.")]),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[n("<"),l("span",{class:"hljs-name"},"v-info"),n(),l("span",{class:"hljs-attr"},"icon"),n("="),l("span",{class:"hljs-string"},'"person"'),n(),l("span",{class:"hljs-attr"},"title"),n("="),l("span",{class:"hljs-string"},'"User Not Found"'),n(),l("span",{class:"hljs-attr"},"type"),n("="),l("span",{class:"hljs-string"},'"warning"'),n(">")]),n("We couldn't find the user you're looking for."),l("span",{class:"hljs-tag"},[n("</"),l("span",{class:"hljs-name"},"v-info"),n(">")]),n(`
+`)])]),l("h2",{id:"reference"},[n("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[n("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"title"),n("*")]),l("td",null,"The title to display in the info"),l("td"),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"icon")]),l("td",null,"What icon to render above the title"),l("td",null,[l("code",null,"'box'")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"type")]),l("td",null,[n("One of "),l("code",null,"info"),n(", "),l("code",null,"success"),n(", "),l("code",null,"warning"),n(", "),l("code",null,"danger")]),l("td",null,[l("code",null,"'info'")]),l("td",null,[l("code",null,"'info' or 'success' or 'warning' or 'danger'")])]),l("tr",null,[l("td",null,[l("code",null,"center")]),l("td",null,"Display the info centered"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])])])]),l("h4",{id:"events"},[n("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("p",null,"n/a"),l("h4",{id:"slots"},[n("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Slot"),l("th",null,"Description"),l("th",null,"Data")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("em",null,"default")]),l("td",null,[n("Default content area. Is rendered within a styled "),l("code",null,"<p>"),n(" tag.")]),l("td")]),l("tr",null,[l("td",null,[l("code",null,"append")]),l("td",null,"After the main body copy. Can be used to inject buttons etc."),l("td")])])]),l("h4",{id:"css-variables"},[n("CSS Variables "),l("a",{class:"header-anchor",href:"#css-variables"},"#")]),l("p",null,"n/a")],-1),f={setup(u,{expose:t}){const e={title:"Info",modularExtension:!1};return t({frontmatter:e}),(i,h)=>{const s=a("DocsWrapper");return o(),r(s,{frontmatter:e},{default:d(()=>[c]),_:1})}}};export{f as default};

package/dist/assets/v-input.8b320383.js

@@ -0,0 +1,2 @@
+import{r as d,p as o,q as a,w as r,B as l,P as e}from"./vendor.9bb37c18.js";const s=l("div",{class:"markdown-body"},[l("p",null,"Displays the usual input. Can be used to model strings and numbers."),l("pre",null,[l("code",{class:"language-html"},[l("span",{class:"hljs-tag"},[e("<"),l("span",{class:"hljs-name"},"v-input"),e(),l("span",{class:"hljs-attr"},"v-model"),e("="),l("span",{class:"hljs-string"},'"value"'),e(" />")]),e(`
+`)])]),l("h2",{id:"attributes-%26-events"},[e("Attributes & Events "),l("a",{class:"header-anchor",href:"#attributes-%26-events"},"#")]),l("p",null,[e("The HTML "),l("code",null,"<input>"),e(" element supports a huge amount of attributes and events. In order to support all of these, all props that aren\u2019t specially handled (see list below) will be passed on to the "),l("code",null,"<input>"),e(" element directly. This allows you to change anything you want on the input.")]),l("h2",{id:"prefixes-%2F-suffixes"},[e("Prefixes / Suffixes "),l("a",{class:"header-anchor",href:"#prefixes-%2F-suffixes"},"#")]),l("p",null,[e("You can add any custom (text) prefix/suffix to the value in the input using the "),l("code",null,"prefix"),e(" and "),l("code",null,"suffix"),e(" slots.")]),l("h2",{id:"reference"},[e("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[e("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"value")]),l("td",null,[e("Used with "),l("code",null,"v-model"),e(" to mirror the entered value")]),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"[String, Number]")])]),l("tr",null,[l("td",null,[l("code",null,"autofocus")]),l("td",null,"Autofocusses the input on render"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"disabled")]),l("td",null,"Set the disabled state for the input"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"full-width")]),l("td",null,"Render the input with 100% width"),l("td",null,[l("code",null,"true")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"prefix")]),l("td",null,"Prefix the users value with a value"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"suffix")]),l("td",null,"Show a value at the end of the input"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"slug")]),l("td",null,"Force the value to be URL safe"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"slug-separator")]),l("td",null,"What character to use as separator in slugs"),l("td",null,[l("code",null,"'-'")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"active")]),l("td",null,"Force the focus state"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"trim")]),l("td",null,"Trim the start and end whitespace"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"nullable")]),l("td",null,"When active, sets an empty entry to null"),l("td",null,[l("code",null,"true")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"type")]),l("td",null,[e("Can be "),l("code",null,"text"),e(" or "),l("code",null,"number")]),l("td",null,[l("code",null,"'text'")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"max")]),l("td",null,"The maximum number that can be entered"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"Number")])]),l("tr",null,[l("td",null,[l("code",null,"min")]),l("td",null,"The minimum number that can be entered"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"Number")])]),l("tr",null,[l("td",null,[l("code",null,"step")]),l("td",null,"In which unit steps should be counted up or down"),l("td",null,[l("code",null,"1")]),l("td",null,[l("code",null,"Number")])]),l("tr",null,[l("td",null,[l("code",null,"db-safe")]),l("td",null,"Make the value save to be used with the DB"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"hide-arrows")]),l("td",null,"Hide the arrows that are used to increase or decrease a number"),l("td",null,[l("code",null,"false")]),l("td",null,[l("code",null,"Boolean")])])])]),l("p",null,[e("Note: all other attached attributes are bound to the input HTMLElement in the component. This allows you to attach any of the standard HTML attributes like "),l("code",null,"min"),e(", "),l("code",null,"length"),e(", or "),l("code",null,"pattern"),e(".")]),l("h4",{id:"slots"},[e("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Slot"),l("th",null,"Description"),l("th",null,"Data")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"prepend-outer")]),l("td",null,"Before the input"),l("td",null,[l("code",null,"{ disabled: boolean, value: string or number; }")])]),l("tr",null,[l("td",null,[l("code",null,"prepend")]),l("td",null,"In the input, before the value, before the prefix"),l("td",null,[l("code",null,"{ disabled: boolean, value: string or number; }")])]),l("tr",null,[l("td",null,[l("code",null,"append")]),l("td",null,"In the input, after the value, after the suffix"),l("td",null,[l("code",null,"{ disabled: boolean, value: string or number; }")])]),l("tr",null,[l("td",null,[l("code",null,"append-outer")]),l("td",null,"After the input"),l("td",null,[l("code",null,"{ disabled: boolean, value: string or number; }")])]),l("tr",null,[l("td",null,[l("code",null,"input")]),l("td"),l("td")])])]),l("h4",{id:"css-variables"},[e("CSS Variables "),l("a",{class:"header-anchor",href:"#css-variables"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Default")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"--v-input-font-family")]),l("td",null,[l("code",null,"var(--family-sans-serif)")])]),l("tr",null,[l("td",null,[l("code",null,"--v-input-placeholder-color")]),l("td",null,[l("code",null,"var(--foreground-subdued)")])])])]),l("h4",{id:"events"},[e("Events "),l("a",{class:"header-anchor",href:"#events"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Event"),l("th",null,"Description"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"click")]),l("td",null,"Fires when the input gets clicked"),l("td")]),l("tr",null,[l("td",null,[l("code",null,"keydown")]),l("td",null,"When a key has been pressed"),l("td")]),l("tr",null,[l("td",null,[l("code",null,"input")]),l("td",null,"Updated the modeled value"),l("td",null,[l("code",null,"String or Number")])])])])],-1),f={setup(c,{expose:t}){const n={title:"Input",modularExtension:!1};return t({frontmatter:n}),(i,h)=>{const u=d("DocsWrapper");return o(),a(u,{frontmatter:n},{default:r(()=>[s]),_:1})}}};export{f as default};

package/dist/assets/v-item-group.a2284b25.js

@@ -0,0 +1,90 @@
+import{r as e,p as c,q as p,w as h,B as s,P as l}from"./vendor.9bb37c18.js";const o=s("div",{class:"markdown-body"},[s("p",null,"Provides the ability to make groups of items out of any nested component. Can be reused to make more advanced selectable elements like a list of cards, or a button group."),s("h2",{id:"usage"},[l("Usage "),s("a",{class:"header-anchor",href:"#usage"},"#")]),s("pre",null,[s("code",{class:"language-html"},[s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"template"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item-group"),l(),s("span",{class:"hljs-attr"},"v-model"),l("="),s("span",{class:"hljs-string"},'"selection"'),l(">")]),l(`
+		`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"div"),l(),s("span",{class:"hljs-attr"},"class"),l("="),s("span",{class:"hljs-string"},'"whatever-nested-markup"'),l(">")]),l(`
+			`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(),s("span",{class:"hljs-attr"},"v-slot:default"),l("="),s("span",{class:"hljs-string"},'"{ active, toggle }"'),l(),s("span",{class:"hljs-attr"},"v-for"),l("="),s("span",{class:"hljs-string"},'"n in 5"'),l(">")]),l(`
+				`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"p"),l(),s("span",{class:"hljs-attr"},":class"),l("="),s("span",{class:"hljs-string"},'"{ active }"'),l(">")]),l("Item {{ n }}"),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"p"),l(">")]),l(`
+				`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-button"),l(" @"),s("span",{class:"hljs-attr"},"click"),l("="),s("span",{class:"hljs-string"},'"toggle"'),l(">")]),l("Click me to {{ active ? 'activate' : 'deactivate' }}"),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-button"),l(">")]),l(`
+			`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-item"),l(">")]),l(`
+		`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-item-group"),l(">")]),l(`
+`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"template"),l(">")]),l(`
+
+`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"script"),l(),s("span",{class:"hljs-attr"},"lang"),l("="),s("span",{class:"hljs-string"},'"ts"'),l(">")]),s("span",{class:"javascript"},[l(`
+	`),s("span",{class:"hljs-keyword"},"import"),l(" { defineComponent, ref } "),s("span",{class:"hljs-keyword"},"from"),l(),s("span",{class:"hljs-string"},"'vue'"),l(`;
+
+	`),s("span",{class:"hljs-keyword"},"export"),l(),s("span",{class:"hljs-keyword"},"default"),l(` defineComponent({
+		`),s("span",{class:"hljs-function"},[s("span",{class:"hljs-title"},"setup"),l("("),s("span",{class:"hljs-params"}),l(")")]),l(` {
+			`),s("span",{class:"hljs-keyword"},"const"),l(` selection = ref([]);
+			`),s("span",{class:"hljs-keyword"},"return"),l(` { selection };
+		},
+	});
+`)]),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"script"),l(">")]),l(`
+`)])]),s("p",null,[l("The "),s("code",null,"v-item-group"),l(" component will keep the final state for the selection; every nested "),s("code",null,"v-item"),l(" component will be registered to the context of the first "),s("code",null,"v-item-group"),l(" parent up in the tree. This means that "),s("code",null,"v-item"),l(" can be in any nested component or sibling:")]),s("pre",null,[s("code",{class:"language-html"},[s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item-group"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(" />")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+		`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(" />")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+		`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-button"),l(">")]),l(`
+			`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(" />")]),l(`
+		`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-button"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-item-group"),l(">")]),l(`
+`)])]),s("p",null,"It also means you can theoretically nest item-groups inside of items:"),s("pre",null,[s("code",{class:"language-html"},[s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item-group"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(" />")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+		`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(">")]),l(`
+			`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item-group"),l(">")]),l(`
+				`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(" />")]),l(`
+				`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+					`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(" />")]),l(`
+				`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+				`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+					`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-button"),l(">")]),l(`
+						`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(" />")]),l(`
+					`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-button"),l(">")]),l(`
+				`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+			`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-item-group"),l(">")]),l(`
+		`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-item"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+		`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-button"),l(">")]),l(`
+			`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(" />")]),l(`
+		`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-button"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"div"),l(">")]),l(`
+`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-item-group"),l(">")]),l(`
+`)])]),s("p",null,"(That being said, if you ever find yourself in this situation, think long and hard if what you\u2019re doing makes sense)"),s("h3",{id:"active-%2F-toggle"},[l("Active / Toggle "),s("a",{class:"header-anchor",href:"#active-%2F-toggle"},"#")]),s("p",null,[l("Every "),s("code",null,"v-item"),l(" provides the "),s("code",null,"active"),l(" state and a "),s("code",null,"toggle"),l(" function to the default slot. Use this to render custom markup / styling and to toggle the active state for this item:")]),s("pre",null,[s("code",{class:"language-html"},[s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(),s("span",{class:"hljs-attr"},"v-slot:default"),l("="),s("span",{class:"hljs-string"},'"{ active, toggle }"'),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"p"),l(),s("span",{class:"hljs-attr"},":class"),l("="),s("span",{class:"hljs-string"},'"{ active }"'),l(">")]),l("Am I active? {{ active }}"),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"p"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-button"),l(" @"),s("span",{class:"hljs-attr"},"click"),l("="),s("span",{class:"hljs-string"},'"toggle"'),l(">")]),l("Toggle active state"),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-button"),l(">")]),l(`
+`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-item"),l(">")]),l(`
+`)])]),s("h3",{id:"custom-values"},[l("Custom values "),s("a",{class:"header-anchor",href:"#custom-values"},"#")]),s("p",null,[l("By default, the "),s("code",null,"v-item-group"),l(" component will use the index of the child as model value (eg "),s("code",null,"[2, 4]"),l("). The child "),s("code",null,"v-item"),l(" component accepts a "),s("code",null,"value"),l(" prop that lets you choose what is used as identifier for the v-item. This can be useful when you\u2019re working with a predefined list of items:")]),s("pre",null,[s("code",{class:"language-html"},[s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"template"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item-group"),l(),s("span",{class:"hljs-attr"},"v-model"),l("="),s("span",{class:"hljs-string"},'"selection"'),l(">")]),l(`
+		`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"v-item"),l(),s("span",{class:"hljs-attr"},"v-for"),l("="),s("span",{class:"hljs-string"},'"item in items"'),l(),s("span",{class:"hljs-attr"},":value"),l("="),s("span",{class:"hljs-string"},'"item.id"'),l(">")]),l("{{ item.title }}"),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-item"),l(">")]),l(`
+	`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"v-item-group"),l(">")]),l(`
+`),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"template"),l(">")]),l(`
+
+`),s("span",{class:"hljs-tag"},[l("<"),s("span",{class:"hljs-name"},"script"),l(),s("span",{class:"hljs-attr"},"lang"),l("="),s("span",{class:"hljs-string"},'"ts"'),l(">")]),s("span",{class:"javascript"},[l(`
+	`),s("span",{class:"hljs-keyword"},"import"),l(" { defineComponent, ref } "),s("span",{class:"hljs-keyword"},"from"),l(),s("span",{class:"hljs-string"},"'vue'"),l(`;
+
+	`),s("span",{class:"hljs-keyword"},"export"),l(),s("span",{class:"hljs-keyword"},"default"),l(` defineComponent({
+		`),s("span",{class:"hljs-function"},[s("span",{class:"hljs-title"},"setup"),l("("),s("span",{class:"hljs-params"}),l(")")]),l(` {
+			`),s("span",{class:"hljs-keyword"},"const"),l(` selection = ref([]);
+			`),s("span",{class:"hljs-keyword"},"const"),l(` items = [
+				{
+					`),s("span",{class:"hljs-attr"},"id"),l(": "),s("span",{class:"hljs-number"},"15"),l(`,
+					`),s("span",{class:"hljs-attr"},"title"),l(": "),s("span",{class:"hljs-string"},"'Hello world'"),l(`,
+				},
+				{
+					`),s("span",{class:"hljs-attr"},"id"),l(": "),s("span",{class:"hljs-number"},"414"),l(`,
+					`),s("span",{class:"hljs-attr"},"title"),l(": "),s("span",{class:"hljs-string"},"'This might be the hardest component i built'"),l(`,
+				},
+				{
+					`),s("span",{class:"hljs-attr"},"id"),l(": "),s("span",{class:"hljs-string"},"'jolly'"),l(`,
+					`),s("span",{class:"hljs-attr"},"title"),l(": "),s("span",{class:"hljs-string"},"'Goooooood times'"),l(`,
+				},
+			];
+			`),s("span",{class:"hljs-keyword"},"return"),l(` { selection };
+		},
+	});
+`)]),s("span",{class:"hljs-tag"},[l("</"),s("span",{class:"hljs-name"},"script"),l(">")]),l(`
+`)])]),s("p",null,[l("In this case, the selection state for all items selected would be "),s("code",null,"[15, 414, 'jolly']")]),s("h2",{id:"reference"},[l("Reference "),s("a",{class:"header-anchor",href:"#reference"},"#")]),s("h4",{id:"props"},[l("Props "),s("a",{class:"header-anchor",href:"#props"},"#")]),s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Prop"),s("th",null,"Description"),s("th",null,"Default"),s("th",null,"Type")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("code",null,"value")]),s("td",null,[l("Used with "),s("code",null,"v-model"),l(" to model the selected items")]),s("td",null,[s("code",null,"undefined")]),s("td",null,[s("code",null,"(string or number)[]")])]),s("tr",null,[s("td",null,[s("code",null,"mandatory")]),s("td",null,"If enabled, at least one item has to be selected"),s("td",null,[s("code",null,"false")]),s("td",null,[s("code",null,"Boolean")])]),s("tr",null,[s("td",null,[s("code",null,"max")]),s("td",null,"The maximum amount of items that can be selected"),s("td",null,[s("code",null,"-1")]),s("td",null,[s("code",null,"Number")])]),s("tr",null,[s("td",null,[s("code",null,"multiple")]),s("td",null,"If enabled, multiple elements can be selected"),s("td",null,[s("code",null,"false")]),s("td",null,[s("code",null,"Boolean")])]),s("tr",null,[s("td",null,[s("code",null,"scope")]),s("td",null,"Items that do not have the same scope will be ignored"),s("td",null,[s("code",null,"'item-group'")]),s("td",null,[s("code",null,"String")])])])]),s("h4",{id:"events"},[l("Events "),s("a",{class:"header-anchor",href:"#events"},"#")]),s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Event"),s("th",null,"Description"),s("th",null,"Value")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("code",null,"input")]),s("td",null,"Used to update the modeled value"),s("td",null,"(String or Number)[]")])])]),s("h4",{id:"slots"},[l("Slots "),s("a",{class:"header-anchor",href:"#slots"},"#")]),s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Slot"),s("th",null,"Description"),s("th",null,"Data")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("em",null,"default")]),s("td",null,"All items placed inside here will be part of the item group"),s("td")])])])],-1),m={setup(i,{expose:t}){const a={title:"Item Group",modularExtension:!1};return t({frontmatter:a}),(r,u)=>{const n=e("DocsWrapper");return c(),p(n,{frontmatter:a},{default:h(()=>[o]),_:1})}}};export{m as default};

package/dist/assets/v-item.c7047233.js

@@ -0,0 +1 @@
+import{r as u,p as a,q as r,w as d,B as l,P as e}from"./vendor.9bb37c18.js";const c=l("div",{class:"markdown-body"},[l("p",null,[e("Should be used in combination with "),l("code",null,"v-item-group"),e(" to model the state of active / inactive items. For more information have a look at the item group component.")]),l("h2",{id:"reference"},[e("Reference "),l("a",{class:"header-anchor",href:"#reference"},"#")]),l("h4",{id:"props"},[e("Props "),l("a",{class:"header-anchor",href:"#props"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Prop"),l("th",null,"Description"),l("th",null,"Default"),l("th",null,"Type")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"value")]),l("td",null,"Which value to represent when active"),l("td",null,[l("code",null,"null")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"scope")]),l("td",null,"Only matches to a group when both scopes are the same"),l("td",null,[l("code",null,"'item-group'")]),l("td",null,[l("code",null,"String")])]),l("tr",null,[l("td",null,[l("code",null,"active")]),l("td",null,"If the item is currently activated"),l("td",null,[l("code",null,"undefined")]),l("td",null,[l("code",null,"Boolean")])]),l("tr",null,[l("td",null,[l("code",null,"watch")]),l("td",null,"If the active state should update after initial set"),l("td",null,[l("code",null,"true")]),l("td",null,[l("code",null,"Boolean")])])])]),l("h4",{id:"slots"},[e("Slots "),l("a",{class:"header-anchor",href:"#slots"},"#")]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Slot"),l("th",null,"Description"),l("th",null,"Data")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("em",null,"default")]),l("td",null,"Where the item content goes"),l("td")])])])],-1),m={setup(s,{expose:n}){const t={title:"Item",modularExtension:!1};return n({frontmatter:t}),(h,i)=>{const o=u("DocsWrapper");return a(),r(o,{frontmatter:t},{default:d(()=>[c]),_:1})}}};export{m as default};