slippers-ui - npm Package Compare versions

Comparing version 3.0.0-alpha.26 to 3.0.0-alpha.27

dist/slippers-ui.es.js

@@ -1,4 +0,4 @@
-import { defineComponent as h, computed as r, openBlock as o, createElementBlock as t, mergeProps as f, renderSlot as n, normalizeClass as i, createElementVNode as u, normalizeStyle as g, createBlock as _, resolveDynamicComponent as y, withCtx as m, createCommentVNode as $ } from "vue";
+import { defineComponent as f, computed as r, openBlock as t, createElementBlock as o, mergeProps as _, renderSlot as n, normalizeClass as c, createElementVNode as p, createBlock as y, resolveDynamicComponent as m, normalizeStyle as b, withCtx as g, createCommentVNode as $ } from "vue";
 import { _ as v } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
-const k = ["href"], z = /* @__PURE__ */ h({
+const k = ["href"], z = /* @__PURE__ */ f({
   __name: "SlpButton",
@@ -10,4 +10,4 @@ props: {
   },
-  setup(c) {
-    const e = c, d = r(() => e.disabled ?? !1), l = r(() => e.variant ?? "primary");
+  setup(i) {
+    const e = i, d = r(() => e.disabled ?? !1), l = r(() => e.variant ?? "primary");
     r(() => e.href ?? "");
@@ -18,3 +18,3 @@ const s = r(() => {
     });
-    return (a, p) => e.href ? (o(), t("a", f({ key: 0 }, a.$attrs, {
+    return (a, u) => e.href ? (t(), o("a", _({ key: 0 }, a.$attrs, {
       class: ["slp-btn", s.value],
@@ -24,3 +24,3 @@ href: e.href
       n(a.$slots, "default", {}, void 0, !0)
-    ], 16, k)) : (o(), t("button", f({ key: 1 }, a.$attrs, {
+    ], 16, k)) : (t(), o("button", _({ key: 1 }, a.$attrs, {
       class: ["slp-btn", s.value],
@@ -32,3 +32,3 @@ type: "button"
   }
-}), H = /* @__PURE__ */ v(z, [["__scopeId", "data-v-1e88c315"]]), N = /* @__PURE__ */ h({
+}), H = /* @__PURE__ */ v(z, [["__scopeId", "data-v-84d6c452"]]), N = /* @__PURE__ */ f({
   __name: "SlpColumn",
@@ -39,6 +39,6 @@ props: {
   },
-  setup(c) {
-    const e = c, d = r(() => e.cols ?? null), l = r(() => e.size ?? "md"), s = r(() => d.value ? `slp-col-${l.value}-${d.value}` : `slp-col-${l.value}`);
-    return (a, p) => (o(), t("div", {
-      class: i(s.value)
+  setup(i) {
+    const e = i, d = r(() => e.cols ?? null), l = r(() => e.size ?? "md"), s = r(() => d.value ? `slp-col-${l.value}-${d.value}` : `slp-col-${l.value}`);
+    return (a, u) => (t(), o("div", {
+      class: c(s.value)
     }, [
@@ -63,6 +63,6 @@ n(a.$slots, "default", {}, void 0, !0)
   class: "slp-full-charcoal-background"
-}, V = {
+}, q = {
   key: 5,
   class: "slp-partial-charcoal-background"
-}, T = {
+}, V = {
   key: 6,
@@ -73,6 +73,6 @@ class: "slp-half-grey-background"
   class: "slp-partial-white-background"
-}, E = {
+}, T = {
   key: 8,
   class: "slp-partial-grey-background"
-}, W = /* @__PURE__ */ h({
+}, E = /* @__PURE__ */ f({
   __name: "SlpContainer",
@@ -83,61 +83,61 @@ props: {
   },
-  setup(c) {
-    const e = c, d = r(() => e.fluid ?? !1), l = r(() => e.variant ?? "white"), s = r(() => d.value ? "fluid" : "");
-    return (a, p) => l.value === "light-purple-100" ? (o(), t("div", S, [
-      u("div", {
-        class: i(["slp-container", s.value])
+  setup(i) {
+    const e = i, d = r(() => e.fluid ?? !1), l = r(() => e.variant ?? "white"), s = r(() => d.value ? "fluid" : "");
+    return (a, u) => l.value === "light-purple-100" ? (t(), o("div", S, [
+      p("div", {
+        class: c(["slp-container", s.value])
       }, [
         n(a.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : l.value === "grey-100" ? (o(), t("div", w, [
-      u("div", {
-        class: i(["slp-container", s.value])
+    ])) : l.value === "grey-100" ? (t(), o("div", w, [
+      p("div", {
+        class: c(["slp-container", s.value])
       }, [
         n(a.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : l.value === "gradient" ? (o(), t("div", C, [
-      u("div", {
-        class: i(["slp-container", s.value])
+    ])) : l.value === "gradient" ? (t(), o("div", C, [
+      p("div", {
+        class: c(["slp-container", s.value])
       }, [
         n(a.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : l.value === "gradient-full" ? (o(), t("div", I, [
-      u("div", {
-        class: i(["slp-container", s.value])
+    ])) : l.value === "gradient-full" ? (t(), o("div", I, [
+      p("div", {
+        class: c(["slp-container", s.value])
       }, [
         n(a.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : l.value === "charcoal-100" ? (o(), t("div", B, [
-      u("div", {
-        class: i(["slp-container", s.value])
+    ])) : l.value === "charcoal-100" ? (t(), o("div", B, [
+      p("div", {
+        class: c(["slp-container", s.value])
       }, [
         n(a.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : l.value === "charcoal-75" ? (o(), t("div", V, [
-      u("div", {
-        class: i(["slp-container", s.value])
+    ])) : l.value === "charcoal-75" ? (t(), o("div", q, [
+      p("div", {
+        class: c(["slp-container", s.value])
       }, [
         n(a.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : l.value === "grey-50" ? (o(), t("div", T, [
-      u("div", {
-        class: i(["slp-container", s.value])
+    ])) : l.value === "grey-50" ? (t(), o("div", V, [
+      p("div", {
+        class: c(["slp-container", s.value])
       }, [
         n(a.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : l.value === "white-75" ? (o(), t("div", j, [
-      u("div", {
-        class: i(["slp-container", s.value])
+    ])) : l.value === "white-75" ? (t(), o("div", j, [
+      p("div", {
+        class: c(["slp-container", s.value])
       }, [
         n(a.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : l.value === "grey-75" ? (o(), t("div", E, [
-      u("div", {
-        class: i(["slp-container", s.value])
+    ])) : l.value === "grey-75" ? (t(), o("div", T, [
+      p("div", {
+        class: c(["slp-container", s.value])
       }, [
         n(a.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : (o(), t("div", {
+    ])) : (t(), o("div", {
       key: 9,
-      class: i(["slp-container", s.value])
+      class: c(["slp-container", s.value])
     }, [
@@ -147,11 +147,23 @@ n(a.$slots, "default", {}, void 0, !0)
   }
-}), K = /* @__PURE__ */ v(W, [["__scopeId", "data-v-908ff4ab"]]), q = /* @__PURE__ */ h({
+}), K = /* @__PURE__ */ v(E, [["__scopeId", "data-v-908ff4ab"]]), O = /* @__PURE__ */ f({
   __name: "SlpIcon",
   props: {
-    size: {},
-    color: {},
-    icon: {}
+    size: {
+      type: [String, Number],
+      // Accept string or number
+      required: !1,
+      default: "sm"
+    },
+    color: {
+      type: String,
+      required: !1,
+      default: "color-text-300"
+    },
+    icon: {
+      type: Object,
+      required: !0
+    }
   },
-  setup(c) {
-    const e = c, d = r(() => {
+  setup(i) {
+    const e = i, d = r(() => {
       const s = ["slp-icon"];
@@ -162,27 +174,29 @@ return typeof e.size == "string" && isNaN(Number(e.size)) && s.push(`slp-icon--size-${e.size}`), e.color && !e.color.startsWith("#") && s.push(`slp-icon--color-${e.color}`), s;
       const s = {};
-      if ((a = e.color) != null && a.startsWith("#") && (s.color = e.color), typeof e.size == "number" || !isNaN(Number(e.size))) {
-        const p = typeof e.size == "number" ? e.size : Number(e.size);
-        s.width = `${p}px`, s.height = `${p}px`;
+      if ((a = e.color) != null && a.startsWith("#") && (s.color = e.color, s.fill = e.color), typeof e.size == "number" || !isNaN(Number(e.size))) {
+        const u = typeof e.size == "number" ? e.size : Number(e.size);
+        s.width = `${u}px`, s.height = `${u}px`;
       }
       return s;
     });
-    return (s, a) => (o(), t("div", {
-      class: i(["slp-icon", d.value]),
-      style: g(l.value),
-      role: "img",
-      "aria-hidden": "true"
-    }, [
-      (o(), _(y(s.icon)))
-    ], 6));
+    return (s, a) => {
+      var u, h;
+      return t(), y(m(i.icon), {
+        class: c(["slp-icon", d.value]),
+        style: b(l.value),
+        role: "img",
+        "aria-hidden": "true",
+        "data-icon-name": ((h = (u = i.icon) == null ? void 0 : u.__docgenInfo) == null ? void 0 : h.displayName) || ""
+      }, null, 8, ["class", "style", "data-icon-name"]);
+    };
   }
-}), M = /* @__PURE__ */ v(q, [["__scopeId", "data-v-f3eed84d"]]), D = {}, L = { class: "slp-row" };
-function O(c, e) {
-  return o(), t("div", L, [
-    n(c.$slots, "default", {}, void 0, !0)
+}), M = /* @__PURE__ */ v(O, [["__scopeId", "data-v-b35e69a8"]]), W = {}, D = { class: "slp-row" };
+function L(i, e) {
+  return t(), o("div", D, [
+    n(i.$slots, "default", {}, void 0, !0)
   ]);
 }
-const Q = /* @__PURE__ */ v(D, [["render", O], ["__scopeId", "data-v-1afd1355"]]), P = {
+const Q = /* @__PURE__ */ v(W, [["render", L], ["__scopeId", "data-v-1afd1355"]]), P = {
   key: 0,
   class: "arrow-symbol"
-}, R = /* @__PURE__ */ h({
+}, R = /* @__PURE__ */ f({
   __name: "SlpTypography",
@@ -193,3 +207,3 @@ props: {
   },
-  setup(c) {
+  setup(i) {
     const e = [
@@ -217,9 +231,9 @@ "display1",
       "emphasis"
-    ], d = ["span", "h1", "h2", "h3", "h4", "p", "div"], l = c, s = r(() => e.includes(l.variant || "") ? l.variant : "body1"), a = r(() => d.includes(l.tag || "") ? l.tag : "span"), p = r(() => `slp-text-${s.value}`);
-    return (b, A) => (o(), _(y(a.value), {
-      class: i(p.value)
+    ], d = ["span", "h1", "h2", "h3", "h4", "p", "div"], l = i, s = r(() => e.includes(l.variant || "") ? l.variant : "body1"), a = r(() => d.includes(l.tag || "") ? l.tag : "span"), u = r(() => `slp-text-${s.value}`);
+    return (h, A) => (t(), y(m(a.value), {
+      class: c(u.value)
     }, {
-      default: m(() => [
-        n(b.$slots, "default", {}, void 0, !0),
-        s.value === "arrow" ? (o(), t("span", P, "→")) : $("", !0)
+      default: g(() => [
+        n(h.$slots, "default", {}, void 0, !0),
+        s.value === "arrow" ? (t(), o("span", P, "→")) : $("", !0)
       ]),
@@ -226,0 +240,0 @@ _: 3

package.json

@@ -5,3 +5,3 @@ {
   "author": "GitLab",
-  "version": "3.0.0-alpha.26",
+  "version": "3.0.0-alpha.27",
   "type": "module",
@@ -45,13 +45,13 @@ "files": [
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@storybook/vue3": "^8.3.6",
-    "@storybook/vue3-vite": "^8.3.6",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@storybook/vue3": "^8.4.5",
+    "@storybook/vue3-vite": "^8.4.5",
     "@types/node": "^20.17.0",
     "@vitejs/plugin-vue": "^5.1.4",
     "sass-embedded": "^1.80.4",
-    "storybook": "^8.3.6",
+    "storybook": "^8.4.5",
     "typescript": "~5.6.2",
@@ -58,0 +58,0 @@ "vite": "^5.4.9",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1239293

increased by0.04%

Lines of code

7611

increased by0.18%

No dependency changes