@everchron/ec-shards 9.4.0 → 9.5.0

package/dist/ec-shards.js

@@ -12992,7 +12992,7 @@ function Tv(e, s, t, a, n, i) {
 }
 const W_ = /* @__PURE__ */ v($v, [["render", Tv], ["__scopeId", "data-v-ec263a49"]]), Mv = {
   name: "ecs-segments",
-  emits: ["click"],
+  emits: ["click", "update:modelValue"],
   components: { EcsIcon: M },
   props: {
     /** Array of all the options objects:
@@ -13008,6 +13008,12 @@ const W_ = /* @__PURE__ */ v($v, [["render", Tv], ["__scopeId", "data-v-ec263a49
       type: String,
       required: !0
     },
+    /** Determines the size of the segment control. */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sml", "md"].includes(e)
+    },
     /** Renders the segment control inline - which means it will not adapt to the full available width of it's parent element. */
     inline: {
       type: Boolean,
@@ -13018,48 +13024,64 @@ const W_ = /* @__PURE__ */ v($v, [["render", Tv], ["__scopeId", "data-v-ec263a49
       type: [String, Number],
       default: ""
     },
+    /** Disables all segments. */
     disabled: {
       type: Boolean,
       default: !1
+    },
+    /** Sets the currently active value. Must match an `option.id` from the `options` array. */
+    modelValue: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  emits: ["click", "update:modelValue"],
+  computed: {
+    isChecked() {
+      return (e) => String(this.modelValue || this.value).toLowerCase() === String(e).toLowerCase();
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit("update:modelValue", e), this.$emit("click", e);
     }
   }
-}, Lv = ["for", "disabled"], Ov = ["name", "value", "id", "checked", "disabled", "onClick"], Av = ["title"];
+}, Lv = ["for"], Ov = ["name", "value", "id", "checked", "disabled", "onChange"], Av = ["title"];
 function Nv(e, s, t, a, n, i) {
   const r = g("ecs-icon");
   return o(), l("div", {
-    class: y(["ecs-segments", [t.inline ? "ecs-segments-inline" : ""]])
+    class: y(["ecs-segments", { "ecs-segments-inline": t.inline }])
   }, [
     (o(!0), l(X, null, he(t.options, (c) => (o(), l("label", {
       key: c.id,
-      for: c.id,
-      disabled: t.disabled
+      for: c.id
     }, [
       f("input", {
         type: "radio",
         name: t.name,
         value: c.id,
         id: c.id,
-        checked: t.value.toLowerCase() == c.id.toLowerCase() || null,
+        checked: i.isChecked(c.id),
         disabled: c.disabled || t.disabled,
-        onClick: (d) => e.$emit("click", c.id)
-      }, null, 8, Ov),
+        onChange: (d) => i.handleChange(c.id)
+      }, null, 40, Ov),
       f("span", {
-        class: "ecs-segment",
+        class: y(["ecs-segment", { "ecs-segment-sml": t.size === "sml", "ecs-segment-md": t.size === "md" }]),
         title: c.title
       }, [
         c.icon ? (o(), h(r, {
           key: 0,
-          class: y([c.icon && c.label ? "icon-spacing" : ""]),
+          class: y({ "icon-spacing": c.icon && c.label }),
           type: c.icon,
           size: "20",
           color: "#2F333C"
         }, null, 8, ["class", "type"])) : u("", !0),
         D(" " + w(c.label), 1)
-      ], 8, Av)
+      ], 10, Av)
     ], 8, Lv))), 128))
   ], 2);
 }
-const j_ = /* @__PURE__ */ v(Mv, [["render", Nv], ["__scopeId", "data-v-0b149ba2"]]), Dv = {
+const j_ = /* @__PURE__ */ v(Mv, [["render", Nv], ["__scopeId", "data-v-b5e60ac4"]]), Dv = {
   name: "ecs-select-tile",
   emits: ["click"],
   components: {