cione-comp-lib/es/packages/co-novnc-std/layout/Controls.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import "../../../node_modules/@novnc/novnc/lib/rfb.mjs";
import { isTouchDevice } from "../../../node_modules/@novnc/novnc/core/util/browser.mjs";
import SettingsIcon from "../components/icons/SettingsIcon.mjs";
import Button from "../components/inputs/Button.mjs";
import KeysIcon from "../components/icons/KeysIcon.mjs";
import ClipboardIcon from "../components/icons/ClipboardIcon.mjs";
import MinimizeIcon from "../components/icons/MinimizeIcon.mjs";
import MaximizeIcon from "../components/icons/MaximizeIcon.mjs";
import PowerIcon from "../components/icons/PowerIcon.mjs";
import DisconnectIcon from "../components/icons/DisconnectIcon.mjs";
import ConnectIcon from "../components/icons/ConnectIcon.mjs";
import DragIcon from "../components/icons/DragIcon.mjs";
import TouchKeyboardIcon from "../components/icons/TouchKeyboardIcon.mjs";
import ChevronIcon from "../components/icons/ChevronIcon.mjs";
import { resolveComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, createBlock, withCtx, createVNode, Fragment, createElementVNode } from "vue";
import style0 from "./Controls.vue_used_vue_type_style_index_0_lang.module.mjs";
import _export_sfc from "../../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = {
  name: "Controls",
  components: {
    Button,
    SettingsIcon,
    ChevronIcon,
    KeysIcon,
    ClipboardIcon,
    MinimizeIcon,
    MaximizeIcon,
    PowerIcon,
    DisconnectIcon,
    ConnectIcon,
    DragIcon,
    TouchKeyboardIcon
  },
  props: {
    connected: {
      type: Boolean,
      required: true
    },
    connecting: {
      type: Boolean,
      required: true
    },
    reconnecting: {
      type: Boolean,
      required: true
    },
    fullscreen: {
      type: Boolean,
      required: true
    },
    power: {
      type: Boolean,
      required: true
    },
    viewOnly: {
      type: Boolean,
      required: true
    },
    features: {
      type: Object,
      required: true
    },
    dragging: {
      type: Boolean,
      required: true
    },
    clipToWindow: {
      type: Boolean,
      required: true
    },
    touchKeyboard: {
      type: Boolean,
      required: true
    },
    panelOpen: {
      type: Boolean,
      required: true
    }
  },
  emits: [
    "settings",
    "minimize",
    "maximize",
    "disconnect",
    "connect",
    "toggle-keys",
    "toggle-clipboard",
    "toggle-touch-keyboard",
    "toggle-panel",
    "power",
    "drag",
    "power"
  ],
  setup() {
    return {
      isTouchDevice
    };
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  resolveComponent("SettingsIcon");
  const _component_Button = resolveComponent("Button");
  const _component_DisconnectIcon = resolveComponent("DisconnectIcon");
  const _component_ConnectIcon = resolveComponent("ConnectIcon");
  const _component_MinimizeIcon = resolveComponent("MinimizeIcon");
  const _component_MaximizeIcon = resolveComponent("MaximizeIcon");
  const _component_ChevronIcon = resolveComponent("ChevronIcon");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(["hzjControls", _ctx.$style.controls])
  }, [
    $props.panelOpen ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: normalizeClass(_ctx.$style.inner)
    }, [
      createCommentVNode("", true),
      $props.connecting || $props.reconnecting || $props.connected ? (openBlock(), createBlock(_component_Button, {
        key: 1,
        title: "\u65AD\u5F00",
        onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("disconnect", $event))
      }, {
        default: withCtx(() => [
          createVNode(_component_DisconnectIcon)
        ]),
        _: 1
      })) : (openBlock(), createBlock(_component_Button, {
        key: 2,
        title: "\u8FDE\u63A5",
        onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("connect", $event))
      }, {
        default: withCtx(() => [
          createVNode(_component_ConnectIcon)
        ]),
        _: 1
      })),
      $props.features.fullscreen ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
        $props.fullscreen ? (openBlock(), createBlock(_component_Button, {
          key: 0,
          title: "\u9ED8\u8BA4",
          disabled: $setup.isTouchDevice,
          onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("minimize", $event))
        }, {
          default: withCtx(() => [
            createVNode(_component_MinimizeIcon)
          ]),
          _: 1
        }, 8, ["disabled"])) : (openBlock(), createBlock(_component_Button, {
          key: 1,
          title: "\u5168\u5C4F",
          disabled: $setup.isTouchDevice,
          onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("maximize", $event))
        }, {
          default: withCtx(() => [
            createVNode(_component_MaximizeIcon)
          ]),
          _: 1
        }, 8, ["disabled"]))
      ], 64)) : createCommentVNode("", true)
    ], 2)) : createCommentVNode("", true),
    createElementVNode("div", {
      class: normalizeClass(["stretchBtn", { [_ctx.$style.togglerClosed]: !$props.panelOpen }])
    }, [
      createVNode(_component_Button, {
        tabindex: $props.panelOpen ? void 0 : -1,
        onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("toggle-panel", $event, !$props.panelOpen))
      }, {
        default: withCtx(() => [
          createVNode(_component_ChevronIcon, {
            dir: $props.panelOpen ? "left" : "right"
          }, null, 8, ["dir"])
        ]),
        _: 1
      }, 8, ["tabindex"])
    ], 2)
  ], 2);
}
const cssModules = {
  "$style": style0
};
var Controls = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__cssModules", cssModules]]);
export { Controls as default };