vuejs-toggle-switch/dist/vuejs-toggle-switch.js

A toggle switch component for Vue.js

import { openBlock as r, createElementBlock as n, createElementVNode as c, normalizeClass as u, normalizeStyle as f, Fragment as p, renderList as y, toDisplayString as h } from "vue";
const O = (e, l) => {
  const t = e.__vccOpts || e;
  for (const [o, i] of l)
    t[o] = i;
  return t;
}, d = (e) => e + "rem", b = {
  name: "ToggleSwitch",
  props: {
    options: {
      type: Object,
      required: !1
    },
    modelValue: {
      type: String,
      required: !1
    },
    name: {
      type: String,
      required: !1
    },
    group: {
      type: String,
      required: !1,
      default: ""
    },
    disabled: {
      type: Boolean,
      required: !1,
      default: !1
    }
  },
  emits: ["update:modelValue"],
  created() {
    this.defaultOptions = {
      layout: {
        color: "black",
        backgroundColor: "lightgray",
        selectedColor: "white",
        selectedBackgroundColor: "green",
        borderColor: "gray",
        fontFamily: "Arial",
        fontWeight: "normal",
        fontWeightSelected: "bold",
        squareCorners: !1,
        noBorder: !1
      },
      size: {
        fontSize: 1.5,
        height: 3.25,
        padding: 0.5,
        width: 10
      },
      config: {
        preSelected: "unknown",
        disabled: !1,
        items: [
          { name: "Off", value: "Off", color: "white", backgroundColor: "red" },
          { name: "On", value: "On", color: "white", backgroundColor: "green" }
        ]
      }
    };
  },
  mounted() {
    this.options !== null && this.options !== void 0 && this.mergeDefaultOptionsWithProp(this.options), this.defaultOptions.config.preSelected !== "unknown" ? (this.selectedItem = this.defaultOptions.config.preSelected, this.$emit("update:modelValue", this.selectedItem), this.$emit("input", this.selectedItem)) : this.modelValue && (this.selectedItem = this.modelValue, this.$emit("update:modelValue", this.selectedItem), this.$emit("input", this.selectedItem));
  },
  data() {
    return {
      selected: !1,
      selectedItem: "unknown",
      defaultOptions: Object
    };
  },
  computed: {
    toggleSwitchStyle() {
      return {
        width: d(this.defaultOptions.size.width),
        height: d(this.defaultOptions.size.height)
      };
    },
    itemStyle() {
      return {
        width: d(this.defaultOptions.size.width),
        height: d(this.defaultOptions.size.height),
        fontFamily: this.defaultOptions.layout.fontFamily,
        fontSize: d(this.defaultOptions.size.fontSize),
        textAlign: "center"
      };
    },
    labelStyle() {
      return {
        padding: d(this.defaultOptions.size.padding),
        borderColor: this.defaultOptions.layout.noBorder ? "transparent" : this.defaultOptions.layout.borderColor,
        backgroundColor: this.defaultOptions.layout.backgroundColor,
        color: this.defaultOptions.layout.color,
        fontWeight: this.defaultOptions.layout.fontWeight
      };
    }
  },
  methods: {
    toggle(e) {
      this.defaultOptions.config.disabled || (this.selected = !0, this.selectedItem = e.target.id.replace(this.group, ""), this.$emit("selected", this.selected), this.$emit("update:modelValue", e.target.id.replace(this.group, "")), this.$emit("input", this.selectedItem), this.$emit("change", {
        value: e.target.id.replace(this.group, ""),
        srcEvent: e
      }));
    },
    labelStyleSelected(e, l) {
      return {
        padding: d(this.defaultOptions.size.padding),
        borderColor: this.defaultOptions.layout.noBorder ? "transparent" : this.defaultOptions.layout.borderColor,
        fontWeight: this.defaultOptions.layout.fontWeightSelected,
        backgroundColor: l !== void 0 ? l : this.defaultOptions.layout.selectedBackgroundColor,
        color: e !== void 0 ? e : this.defaultOptions.layout.selectedColor
      };
    },
    mergeDefaultOptionsWithProp(e) {
      var l = this.defaultOptions;
      for (var t in e)
        if (e[t] !== null && typeof e[t] == "object")
          for (var o in e[t])
            e[t][o] !== void 0 && e[t][o] !== null && (l[t][o] = e[t][o]);
        else
          l[t] = e[t];
    }
  },
  watch: {
    modelValue(e) {
      this.selectedItem = e;
    },
    options(e) {
      e != null && this.mergeDefaultOptionsWithProp(e);
    }
  }
}, S = ["disabled", "id", "value", "name"], k = ["for"], C = ["for"];
function w(e, l, t, o, i, a) {
  return r(), n("div", null, [
    c("ul", {
      class: u(["toggle-switch", { square: i.defaultOptions.layout.squareCorners }]),
      style: f(a.toggleSwitchStyle)
    }, [
      (r(!0), n(p, null, y(i.defaultOptions.config.items, (s, g) => (r(), n("li", {
        style: f(a.itemStyle),
        key: g
      }, [
        c("input", {
          disabled: i.defaultOptions.config.disabled || t.disabled,
          id: s.value + t.group,
          value: s.value,
          name: t.name,
          class: u({ active: !i.defaultOptions.config.disabled || t.disabled }),
          type: "radio",
          onClick: l[0] || (l[0] = (...m) => a.toggle && a.toggle(...m))
        }, null, 10, S),
        s.value === i.selectedItem ? (r(), n("label", {
          key: 0,
          style: f(a.labelStyleSelected(s.color, s.backgroundColor)),
          class: u([{ active: !i.defaultOptions.config.disabled || t.disabled }, "selected"]),
          for: s.value + t.group,
          type: "radio"
        }, h(s.name), 15, k)) : (r(), n("label", {
          key: 1,
          style: f(a.labelStyle),
          class: u({ active: !i.defaultOptions.config.disabled || t.disabled }),
          for: s.value + t.group,
          type: "radio"
        }, h(s.name), 15, C))
      ], 4))), 128))
    ], 6)
  ]);
}
const _ = /* @__PURE__ */ O(b, [["render", w]]);
export {
  _ as ToggleSwitch
};