vue-fluent-ui/dist/components/VfToggleSwitch/src/ToggleSwitch.js

一个winui3/fluent design风格的vue组件库

import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, useId } from "vue";
import { useNamespace } from "../../../utils/namespace.js";
import "./ToggleSwitch.style.css";

;// CONCATENATED MODULE: external "vue"

;// CONCATENATED MODULE: external "../../../utils/namespace.js"

;// CONCATENATED MODULE: external "./ToggleSwitch.style.css"

;// CONCATENATED MODULE: ./src/components/VfToggleSwitch/src/ToggleSwitch.vue


const _hoisted_1 = ["for"];
const _hoisted_2 = ["id", "checked", "disabled", "aria-checked", "aria-disabled", "aria-label"];



const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "ToggleSwitch",
  props: {
    disabled: { type: Boolean, default: false },
    onContent: { default: "" },
    offContent: { default: "" },
    header: { default: "" },
    modelValue: { type: Boolean, default: false }
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { emit: __emit }) {
    const ns = useNamespace("toggle-switch");
    const props = __props;
    const emit = __emit;
    const checked = computed(() => props.modelValue);
    const handleChange = (event) => {
      const newValue = event.target.checked;
      emit("update:modelValue", newValue);
      emit("change", newValue);
    };
    const toggleSwitchClass = computed(() => {
      console.log(ns.is("on", checked.value));
      return [
        ns.b(),
        ns.is("on", checked.value),
        ns.is("disabled", props.disabled)
      ];
    });
    const switchId = useId();
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(toggleSwitchClass.value)
      }, [
        createElementVNode("label", {
          class: normalizeClass(unref(ns).e("wrapper")),
          for: unref(switchId)
        }, [
          createElementVNode("input", {
            id: unref(switchId),
            checked: checked.value,
            disabled: props.disabled,
            "aria-checked": checked.value,
            role: "switch",
            type: "checkbox",
            "aria-disabled": props.disabled,
            "aria-label": props.header || "Toggle Switch",
            class: normalizeClass(unref(ns).e("input")),
            onChange: handleChange
          }, null, 42, _hoisted_2),
          props.header ? (openBlock(), createElementBlock("span", {
            key: 0,
            class: normalizeClass(unref(ns).e("header"))
          }, toDisplayString(props.header), 3)) : createCommentVNode("", true),
          createElementVNode("span", {
            class: normalizeClass(unref(ns).e("container"))
          }, [
            createElementVNode("span", {
              class: normalizeClass(unref(ns).e("track"))
            }, [
              createElementVNode("span", {
                class: normalizeClass(unref(ns).e("knob"))
              }, null, 2)
            ], 2),
            createElementVNode("span", {
              class: normalizeClass(unref(ns).e("content"))
            }, [
              checked.value ? (openBlock(), createElementBlock("span", {
                key: 0,
                class: normalizeClass(unref(ns).e("on-content"))
              }, toDisplayString(props.onContent), 3)) : (openBlock(), createElementBlock("span", {
                key: 1,
                class: normalizeClass(unref(ns).e("off-content"))
              }, toDisplayString(props.offContent), 3))
            ], 2)
          ], 2)
        ], 10, _hoisted_1)
      ], 2);
    };
  }
});
/* ESM default export */ const ToggleSwitch = (_sfc_main);

export { ToggleSwitch as default };