import { defineComponent as r, shallowRef as v, ref as c, watch as d, createVNode as a, resolveComponent as l } from "vue";
import { ElTooltip as f, ElButton as m, ElSelect as C, ElOption as T } from "element-plus";
import "@klweb/compose-app-engine";
import "@klweb/utils";
import { Z as u, _ as o, $ as n, a0 as b, a1 as h, a2 as y, a3 as I, A as s, a4 as E } from "./main-DXvReGBc.js";
import { e as V } from "./index-ClGUov3E.js";
const {
  IconComputer: k,
  IconPad: P,
  IconPhone: R,
  IconFit: S,
  IconRotate: w
} = V, x = /* @__PURE__ */ r({
  name: "KlSetDeviceType",
  components: {
    ElTooltip: f,
    ElButton: m,
    ElSelect: C,
    ElOption: T
  },
  setup() {
    const i = v([{
      label: "PC 端",
      value: "pc",
      icon: k
    }, {
      label: "Pad 端",
      value: "pad",
      icon: P
    }, {
      label: "手机端",
      value: "phone",
      icon: R
    }]), t = c(u.value), p = c(["50%", "75%", "100%", "125%", "150%", "200%"]);
    return d(u, (e) => {
      t.value = e;
    }), () => a("span", {
      class: o["editor-header-action"]
    }, [a("span", {
      class: o["change-device"]
    }, [i.value.map((e) => a(l("el-tooltip"), {
      effect: "dark",
      "hide-after": 0,
      placement: "top",
      content: e.label
    }, {
      default: () => [a(l("el-button"), {
        class: o["button--icon"],
        type: n.value === e.value ? "primary" : "",
        icon: e.icon,
        plain: n.value !== e.value,
        onClick: () => b(e.value, !0)
      }, null)]
    }))]), a(l("el-select"), {
      class: o["scale-value"],
      modelValue: t.value,
      "onUpdate:modelValue": (e) => t.value = e,
      onChange: (e) => h(e)
    }, {
      default: () => [p.value.map((e) => a(l("el-option"), {
        key: e,
        label: e,
        value: e
      }, null))],
      footer: () => a(l("el-button"), {
        type: y.value ? "primary" : "",
        onClick: I,
        icon: S,
        link: !0
      }, {
        default: () => [s.FIT_VIEWPORT_SIZE]
      })
    }), a(l("el-tooltip"), {
      effect: "dark",
      "hide-after": 0,
      placement: "top",
      content: s.ROTATE_VIEWPORT
    }, {
      default: () => [a(l("el-button"), {
        class: [o["button--icon"], o["rotate-viewport"]],
        icon: w,
        onClick: E,
        plain: !0,
        disabled: n.value === "pc"
      }, null)]
    })]);
  }
});
export {
  x as default
};
