vue-dock/dist/library.mjs

Easy to use dockable & resizable panels for Vue. Lightweight, zero dependencies, extensible.

import { openBlock, createElementBlock, normalizeClass, renderSlot, createElementVNode, toDisplayString } from 'vue';

var script$1 = {
  name: "DockContainer",
  props: {
    horizontal: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    containerClass() {
      const classes = ["vue-dock-container"];
      
      if (this.horizontal) {
        classes.push("vue-dock-horizontal");
      }

      return classes
    }
  }
};

function render$1(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("div", {
    class: normalizeClass($options.containerClass)
  }, [
    renderSlot(_ctx.$slots, "default")
  ], 2 /* CLASS */))
}

script$1.render = render$1;
script$1.__file = "src/Container.vue";

var script = {
  name: "DockPanel",
  
  props: {
    title: {
      type: String,
      default: "Unnamed Panel"
    }
  },

  methods: {
    handleClose() {
      console.log('close');
    }
  },

  computed: {
    panelClass() {
      const classes = ["vue-dock-panel"];
      if (this.horizontal) {
        classes.push("vue-dock-panel-horizontal");
      }
      return classes
    },

    horizontal() {
      return this.$parent.horizontal
    }
  }
};

const _hoisted_1 = { class: "vue-dock-panel-header" };
const _hoisted_2 = { class: "vue-dock-panel-header-title" };
const _hoisted_3 = { class: "vue-dock-panel-content" };

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("div", {
    class: normalizeClass($options.panelClass)
  }, [
    createElementVNode("div", _hoisted_1, [
      createElementVNode("span", _hoisted_2, toDisplayString($props.title), 1 /* TEXT */),
      renderSlot(_ctx.$slots, "header"),
      createElementVNode("button", {
        class: "vue-dock-panel-header-close-button",
        onClick: _cache[0] || (_cache[0] = (...args) => ($options.handleClose && $options.handleClose(...args)))
      }, "x")
    ]),
    createElementVNode("div", _hoisted_3, [
      renderSlot(_ctx.$slots, "content")
    ])
  ], 2 /* CLASS */))
}

script.render = render;
script.__file = "src/Panel.vue";

export { script$1 as Container, script as Panel };