wave-ui 2.31.3 → 2.32.1

package/dist/wave-ui.es.js

@@ -501,7 +501,7 @@ const _hoisted_1$u = ["aria-expanded"];
 const _hoisted_2$e = ["onClick", "onFocus", "onKeypress", "tabindex"];
 const _hoisted_3$b = ["innerHTML"];
 const _hoisted_4$a = ["innerHTML"];
-function render$O(_ctx, _cache, $props, $setup, $data, $options) {
+function render$P(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_button = resolveComponent("w-button");
   const _component_w_transition_expand = resolveComponent("w-transition-expand");
   return openBlock(), createElementBlock("div", {
@@ -594,7 +594,7 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$O = {
+const _sfc_main$P = {
   name: "w-accordion",
   props: {
     modelValue: { type: Array },
@@ -666,9 +666,9 @@ const _sfc_main$O = {
     }
   }
 };
-var wAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", render$O]]);
+var wAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", render$P]]);
 const _hoisted_1$t = { class: "w-alert__content" };
-function render$N(_ctx, _cache, $props, $setup, $data, $options) {
+function render$O(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   const _component_w_button = resolveComponent("w-button");
   return $data.show ? (openBlock(), createElementBlock("div", mergeProps({
@@ -705,7 +705,7 @@ function render$N(_ctx, _cache, $props, $setup, $data, $options) {
   ], 16)) : createCommentVNode("", true);
 }
 var wAlert_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$N = {
+const _sfc_main$O = {
   name: "w-alert",
   props: {
     modelValue: { default: true },
@@ -781,9 +781,9 @@ const _sfc_main$N = {
     }
   }
 };
-var wAlert = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", render$N]]);
+var wAlert = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", render$O]]);
 const _hoisted_1$s = ["innerHTML"];
-function render$M(_ctx, _cache, $props, $setup, $data, $options) {
+function render$N(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_alert = resolveComponent("w-alert");
   return openBlock(), createBlock(TransitionGroup, {
     class: normalizeClass(["w-notification-manager", { "w-notification-manager--left": $options.conf.align === "left" }]),
@@ -816,7 +816,7 @@ function render$M(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["class", "name"]);
 }
 var wNotificationManager_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$M = {
+const _sfc_main$N = {
   name: "w-notification-manager",
   data: () => ({
     notifManager: null
@@ -847,7 +847,7 @@ const _sfc_main$M = {
     delete this.notifManager;
   }
 };
-var NotificationManager = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", render$M]]);
+var NotificationManager = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", render$N]]);
 const { css: cssConfig } = config;
 const entries = Object.entries(config.breakpoints);
 const breakpoints = entries.map(([label, max], i) => {
@@ -900,7 +900,7 @@ const generateBreakpoints = () => {
 };
 const genBreakpointLayoutClasses = () => {
   let styles = "";
-  const { cssScope } = cssVars;
+  const { cssScope, baseIncrement } = cssVars;
   const layoutClasses = [
     "show{display:block}",
     "hide{display:none}",
@@ -935,17 +935,18 @@ const genBreakpointLayoutClasses = () => {
     "justify-space-around{justify-content:space-around}",
     "justify-space-evenly{justify-content:space-evenly}"
   ];
+  const array12 = Array(12).fill();
   breakpoints.forEach(({ label, min }) => {
     if (label !== "xs") {
-      styles += `@media(min-width:${min}px){` + layoutClasses.map((rule) => `${cssScope} .${label}u-${rule}`).join("") + "}";
+      styles += `@media(min-width:${min}px){` + layoutClasses.map((rule) => `${cssScope} .${label}u-${rule}`).join("") + array12.map((item, i) => `.w-grid.${label}u-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join("") + array12.map((item, i) => `.w-flex.${label}u-gap${i + 1},.w-grid.${label}u-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join("") + `.w-flex.${label}u-gap0,.w-flex.${label}u-gap0{gap:0}}`;
     }
   });
   breakpoints.forEach(({ label, min, max }) => {
-    styles += `@media (min-width:${min}px) and (max-width:${max}px){` + layoutClasses.map((rule) => `${cssScope} .${label}-${rule}`).join("") + "}";
+    styles += `@media (min-width:${min}px) and (max-width:${max}px){` + layoutClasses.map((rule) => `${cssScope} .${label}-${rule}`).join("") + array12.map((item, i) => `.w-grid.${label}-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join("") + array12.map((item, i) => `.w-flex.${label}-gap${i + 1},.w-grid.${label}-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join("") + `.w-flex.${label}-gap0,.w-flex.${label}-gap0{gap:0}}`;
   });
   breakpoints.forEach(({ label, max }) => {
     if (label !== "xl") {
-      styles += `@media (max-width:${max}px){` + layoutClasses.map((rule) => `${cssScope} .${label}d-${rule}`).join("") + "}";
+      styles += `@media (max-width:${max}px){` + layoutClasses.map((rule) => `${cssScope} .${label}d-${rule}`).join("") + array12.map((item, i) => `.w-grid.${label}d-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join("") + array12.map((item, i) => `.w-flex.${label}d-gap${i + 1},.w-grid.${label}d-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join("") + `.w-flex.${label}d-gap0,.w-flex.${label}d-gap0{gap:0}}`;
     }
   });
   return styles;
@@ -961,7 +962,7 @@ var DynamicCSS = () => {
     styles += genBreakpointLayoutClasses();
   return styles;
 };
-function render$L(_ctx, _cache, $props, $setup, $data, $options) {
+function render$M(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_notification_manager = resolveComponent("notification-manager");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["w-app", $options.classes])
@@ -973,7 +974,7 @@ function render$L(_ctx, _cache, $props, $setup, $data, $options) {
 var wApp_vue_vue_type_style_index_0_lang = "";
 const breakpointsNames = Object.keys(config.breakpoints);
 const breakpointsValues = Object.values(config.breakpoints);
-const _sfc_main$L = {
+const _sfc_main$M = {
   name: "w-app",
   props: {
     dark: { type: Boolean },
@@ -1051,8 +1052,8 @@ const _sfc_main$L = {
     window.removeEventListener("resize", this.getBreakpoint);
   }
 };
-var wApp = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", render$L]]);
-function render$K(_ctx, _cache, $props, $setup, $data, $options) {
+var wApp = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", render$M]]);
+function render$L(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", mergeProps({ class: "w-badge-wrap" }, toHandlers(_ctx.$attrs)), [
     renderSlot(_ctx.$slots, "default"),
     createVNode(Transition, {
@@ -1078,7 +1079,7 @@ function render$K(_ctx, _cache, $props, $setup, $data, $options) {
   ], 16);
 }
 var wBadge_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$K = {
+const _sfc_main$L = {
   name: "w-badge",
   props: {
     modelValue: { default: true },
@@ -1140,9 +1141,9 @@ const _sfc_main$K = {
     }
   }
 };
-var wBadge = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", render$K]]);
+var wBadge = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", render$L]]);
 const _hoisted_1$r = ["innerHTML"];
-function render$J(_ctx, _cache, $props, $setup, $data, $options) {
+function render$K(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["w-breadcrumbs", $options.classes])
@@ -1199,7 +1200,7 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2);
 }
 var wBreadcrumbs_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$J = {
+const _sfc_main$K = {
   name: "w-breadcrumbs",
   props: {
     items: { type: Array, required: true },
@@ -1230,7 +1231,7 @@ const _sfc_main$J = {
     }
   }
 };
-var wBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", render$J]]);
+var wBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", render$K]]);
 const _hoisted_1$q = {
   key: 0,
   class: "w-button__loader"
@@ -1246,7 +1247,7 @@ const _hoisted_2$d = /* @__PURE__ */ createElementVNode("svg", { viewBox: "0 0 4
     "stroke-linecap": "round"
   })
 ], -1);
-function render$I(_ctx, _cache, $props, $setup, $data, $options) {
+function render$J(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   return openBlock(), createBlock(resolveDynamicComponent($props.route ? "a" : "button"), mergeProps({
     class: ["w-button", $options.classes],
@@ -1276,7 +1277,7 @@ function render$I(_ctx, _cache, $props, $setup, $data, $options) {
   }, 16, ["type", "href", "class", "disabled", "style"]);
 }
 var wButton_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$I = {
+const _sfc_main$J = {
   name: "w-button",
   props: {
     color: { type: String },
@@ -1368,7 +1369,7 @@ const _sfc_main$I = {
     }
   }
 };
-var wButton = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", render$I]]);
+var wButton = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", render$J]]);
 const objectifyClasses = (classes = {}) => {
   if (typeof classes === "string")
     classes = { [classes]: true };
@@ -1377,7 +1378,7 @@ const objectifyClasses = (classes = {}) => {
   return classes;
 };
 const _hoisted_1$p = ["innerHTML"];
-function render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function render$I(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_image = resolveComponent("w-image");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["w-card", $options.classes]),
@@ -1417,7 +1418,7 @@ function render$H(_ctx, _cache, $props, $setup, $data, $options) {
   ], 6);
 }
 var wCard_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$H = {
+const _sfc_main$I = {
   name: "w-card",
   props: {
     color: { type: String },
@@ -1467,7 +1468,7 @@ const _sfc_main$H = {
     }
   }
 };
-var wCard = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", render$H]]);
+var wCard = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", render$I]]);
 var FormElementMixin = {
   inject: {
     formRegister: { default: null },
@@ -1516,7 +1517,7 @@ const _hoisted_5$8 = [
 ];
 const _hoisted_6$5 = ["for"];
 const _hoisted_7$5 = ["for", "innerHTML"];
-function render$G(_ctx, _cache, $props, $setup, $data, $options) {
+function render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister && !$options.wCheckboxes ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $data.isChecked, disabled: _ctx.isDisabled }, {
     valid: _ctx.valid,
     "onUpdate:valid": _cache[5] || (_cache[5] = ($event) => _ctx.valid = $event),
@@ -1583,7 +1584,7 @@ function render$G(_ctx, _cache, $props, $setup, $data, $options) {
   }, 16, ["valid", "class"]);
 }
 var wCheckbox_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$G = {
+const _sfc_main$H = {
   name: "w-checkbox",
   mixins: [FormElementMixin],
   inject: {
@@ -1651,9 +1652,9 @@ const _sfc_main$G = {
     }
   }
 };
-var wCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", render$G]]);
+var wCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", render$H]]);
 const _hoisted_1$n = ["innerHTML"];
-function render$F(_ctx, _cache, $props, $setup, $data, $options) {
+function render$G(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_checkbox = resolveComponent("w-checkbox");
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $options.checkboxItems.some((item) => item._isChecked), disabled: _ctx.isDisabled }, {
     valid: _ctx.valid,
@@ -1705,7 +1706,7 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
   }, 16, ["valid", "onReset", "column", "wrap", "class"]);
 }
 var wCheckboxes_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$F = {
+const _sfc_main$G = {
   name: "w-checkboxes",
   mixins: [FormElementMixin],
   props: {
@@ -1760,9 +1761,9 @@ const _sfc_main$F = {
     }
   }
 };
-var wCheckboxes = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", render$F]]);
+var wCheckboxes = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", render$G]]);
 const _hoisted_1$m = { class: "w-confirm" };
-function render$E(_ctx, _cache, $props, $setup, $data, $options) {
+function render$F(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_button = resolveComponent("w-button");
   const _component_w_flex = resolveComponent("w-flex");
   const _component_w_menu = resolveComponent("w-menu");
@@ -1827,7 +1828,7 @@ function render$E(_ctx, _cache, $props, $setup, $data, $options) {
     }, 16, ["modelValue"])
   ]);
 }
-const _sfc_main$E = {
+const _sfc_main$F = {
   name: "w-confirm",
   props: {
     bgColor: { type: String },
@@ -1911,8 +1912,8 @@ const _sfc_main$E = {
     }
   }
 };
-var wConfirm = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", render$E]]);
-function render$D(_ctx, _cache, $props, $setup, $data, $options) {
+var wConfirm = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", render$F]]);
+function render$E(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["w-date-picker", $options.classes]),
     style: normalizeStyle($options.styles)
@@ -1921,7 +1922,7 @@ function render$D(_ctx, _cache, $props, $setup, $data, $options) {
   ], 6);
 }
 var wDatePicker_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$D = {
+const _sfc_main$E = {
   name: "w-date-picker",
   props: {},
   emits: [],
@@ -1934,8 +1935,8 @@ const _sfc_main$D = {
     }
   }
 };
-var wDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", render$D]]);
-function render$C(_ctx, _cache, $props, $setup, $data, $options) {
+var wDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", render$E]]);
+function render$D(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_card = resolveComponent("w-card");
   const _component_w_overlay = resolveComponent("w-overlay");
   return openBlock(), createBlock(_component_w_overlay, {
@@ -1991,7 +1992,7 @@ function render$C(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["model-value", "persistent", "persistent-no-animation", "onClick", "bg-color", "opacity", "class"]);
 }
 var wDialog_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$C = {
+const _sfc_main$D = {
   name: "w-dialog",
   props: {
     modelValue: { default: true },
@@ -2058,8 +2059,8 @@ const _sfc_main$C = {
     }
   }
 };
-var wDialog = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", render$C]]);
-function render$B(_ctx, _cache, $props, $setup, $data, $options) {
+var wDialog = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", render$D]]);
+function render$C(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["w-divider", $options.classes])
   }, [
@@ -2067,7 +2068,7 @@ function render$B(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2);
 }
 var wDivider_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$B = {
+const _sfc_main$C = {
   name: "w-divider",
   props: {
     vertical: { type: Boolean },
@@ -2084,9 +2085,9 @@ const _sfc_main$B = {
     }
   }
 };
-var wDivider = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", render$B]]);
+var wDivider = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", render$C]]);
 const _hoisted_1$l = { class: "w-drawer-wrap__pushable" };
-function render$A(_ctx, _cache, $props, $setup, $data, $options) {
+function render$B(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_overlay = resolveComponent("w-overlay");
   return $data.showWrapper || $props.pushContent ? (openBlock(), createElementBlock("div", {
     key: 0,
@@ -2157,7 +2158,7 @@ function render$A(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var wDrawer_vue_vue_type_style_index_0_lang = "";
 const oppositeSides = { left: "right", right: "left", top: "down", bottom: "up" };
-const _sfc_main$A = {
+const _sfc_main$B = {
   name: "w-drawer",
   props: {
     modelValue: { default: true },
@@ -2263,32 +2264,19 @@ const _sfc_main$A = {
     }
   }
 };
-var wDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", render$A]]);
-function render$z(_ctx, _cache, $props, $setup, $data, $options) {
-  return $props.gap ? (openBlock(), createBlock(resolveDynamicComponent($props.tag), {
-    key: 0,
-    class: "w-flex-wrap"
-  }, {
-    default: withCtx(() => [
-      createElementVNode("div", {
-        class: normalizeClass(["w-flex", $options.classes])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2)
-    ]),
-    _: 3
-  })) : (openBlock(), createBlock(resolveDynamicComponent($props.tag), {
-    key: 1,
+var wDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", render$B]]);
+function render$A(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(resolveDynamicComponent($props.tag), {
     class: normalizeClass(["w-flex", $options.classes])
   }, {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
-  }, 8, ["class"]));
+  }, 8, ["class"]);
 }
 var wFlex_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$z = {
+const _sfc_main$A = {
   name: "w-flex",
   props: {
     tag: { type: String, default: "div" },
@@ -2309,7 +2297,7 @@ const _sfc_main$z = {
     justifySpaceAround: { type: Boolean },
     justifySpaceEvenly: { type: Boolean },
     basisZero: { type: Boolean },
-    gap: { type: Number, default: 0 }
+    gap: { type: [Number, String], default: 0 }
   },
   computed: {
     classes() {
@@ -2331,13 +2319,13 @@ const _sfc_main$z = {
         "justify-space-around": this.justifySpaceAround,
         "justify-space-evenly": this.justifySpaceEvenly,
         "basis-zero": this.basisZero,
-        [`w-flex--gap${this.gap}`]: this.gap
+        [`gap${this.gap}`]: ~~this.gap
       };
     }
   }
 };
-var wFlex = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", render$z]]);
-function render$y(_ctx, _cache, $props, $setup, $data, $options) {
+var wFlex = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", render$A]]);
+function render$z(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("form", {
     class: normalizeClass(["w-form", $options.classes]),
     onSubmit: _cache[0] || (_cache[0] = (...args) => $options.onSubmit && $options.onSubmit(...args)),
@@ -2354,7 +2342,7 @@ const asyncSome = async (array, predicate) => {
   }
   return false;
 };
-const _sfc_main$y = {
+const _sfc_main$z = {
   name: "w-form",
   provide() {
     return {
@@ -2476,13 +2464,13 @@ const _sfc_main$y = {
     }
   }
 };
-var wForm = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", render$y]]);
+var wForm = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", render$z]]);
 const _hoisted_1$k = {
   key: 0,
   class: "w-form-el__error error w-form-el__error w-form-el__error"
 };
 const _hoisted_2$b = ["innerHTML"];
-function render$x(_ctx, _cache, $props, $setup, $data, $options) {
+function render$y(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_transition_expand = resolveComponent("w-transition-expand");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass($options.classes)
@@ -2511,7 +2499,7 @@ function render$x(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2);
 }
 var wFormElement_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$x = {
+const _sfc_main$y = {
   name: "w-form-element",
   inject: {
     formRegister: { default: null },
@@ -2590,7 +2578,72 @@ const _sfc_main$x = {
       this.formUnregister(this);
   }
 };
-var wFormElement = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", render$x]]);
+var wFormElement = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", render$y]]);
+function render$x(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(resolveDynamicComponent($props.tag), {
+    class: normalizeClass(["w-grid", $options.classes])
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["class"]);
+}
+var wGrid_vue_vue_type_style_index_0_lang = "";
+const _sfc_main$x = {
+  name: "w-grid",
+  props: {
+    tag: { type: String, default: "div" },
+    columns: { type: [Number, Object, String] },
+    gap: { type: [Number, Object, String], default: 0 }
+  },
+  computed: {
+    breakpointsColumns() {
+      let columns = { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 };
+      switch (typeof this.columns) {
+        case "object":
+          columns = Object.assign(columns, this.columns);
+          break;
+        case "number":
+        case "string":
+          columns = Object.keys(columns).reduce((obj, breakpoint) => obj[breakpoint] = ~~this.columns, {});
+          break;
+      }
+      return columns;
+    },
+    breakpointsGap() {
+      let gap = { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 };
+      switch (typeof this.gap) {
+        case "object":
+          gap = Object.assign(gap, this.gap);
+          break;
+        case "number":
+        case "string":
+          gap = Object.keys(gap).reduce((obj, breakpoint) => obj[breakpoint] = ~~this.gap, {});
+          break;
+      }
+      return gap;
+    },
+    classes() {
+      let breakpointsColumns = null;
+      if (typeof this.columns === "object") {
+        breakpointsColumns = Object.entries(this.breakpointsColumns).reduce((obj, [breakpoint, columns]) => {
+          obj[`${breakpoint}-columns${columns}`] = true;
+          return obj;
+        }, {});
+      }
+      let breakpointsGap = null;
+      if (typeof this.gap === "object") {
+        breakpointsGap = Object.entries(this.breakpointsGap).reduce((obj, [breakpoint, gap]) => {
+          obj[`${breakpoint}-gap${gap}`] = true;
+          return obj;
+        }, {});
+      }
+      return __spreadValues(__spreadValues({}, breakpointsColumns || { [`columns${this.columns}`]: this.columns }), breakpointsGap || { [`gap${this.gap}`]: this.gap });
+    }
+  }
+};
+var wGrid = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", render$x]]);
 function render$w(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent($props.tag || "i"), mergeProps({
     class: ["w-icon", $options.classes]
@@ -2640,7 +2693,7 @@ const _sfc_main$w = {
     ligature() {
       if (!config.iconsLigature)
         return false;
-      const [fontName, icon] = this.$slots.default()[0].children;
+      const [fontName, icon] = this.icon.split(" ");
       return fontName === config.iconsLigature && { fontName, icon };
     },
     forcedSize() {
@@ -2651,7 +2704,7 @@ const _sfc_main$w = {
     },
     classes() {
       return {
-        [this.$slots.default()[0].children]: true,
+        [this.icon]: true,
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: this.presetSize && !this.forcedSize,
@@ -2672,6 +2725,12 @@ const _sfc_main$w = {
     styles() {
       return this.forcedSize && `font-size: ${this.forcedSize}`;
     }
+  },
+  created() {
+    this.icon = this.$slots.default && this.$slots.default()[0].children;
+  },
+  updated() {
+    this.icon = this.$slots.default && this.$slots.default()[0].children;
   }
 };
 var wIcon = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", render$w]]);
@@ -7356,6 +7415,7 @@ var components = /* @__PURE__ */ Object.freeze({
   WFlex: wFlex,
   WForm: wForm,
   WFormElement: wFormElement,
+  WGrid: wGrid,
   WIcon: wIcon,
   WImage: wImage,
   WInput: wInput,