@progress/kendo-vue-layout/splitter/SplitterBar.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as m, createVNode as n } from "vue";
import { Keys as a, classNames as x, Draggable as w, Icon as d } from "@progress/kendo-vue-common";
import { provideLocalizationService as k } from "@progress/kendo-vue-intl";
import { splitterPaneLabel as f, messages as $ } from "../messages/main.mjs";
import { chevronLeftIcon as c, chevronRightIcon as p, chevronDownIcon as b, chevronUpIcon as v } from "@progress/kendo-svg-icons";
const C = /* @__PURE__ */ m({
  name: "KendoSplitterBar",
  emits: {
    drag: null,
    toggle: null,
    keyboardresize: null
  },
  props: {
    orientation: {
      type: String,
      default: "vertical",
      validator: function(t) {
        return ["vertical", "horizontal"].includes(t);
      }
    },
    index: Number,
    prev: Object,
    next: Object,
    isRtl: Boolean
  },
  created() {
    this.draggable = null;
  },
  computed: {
    isStatic() {
      const {
        prev: t,
        next: r
      } = this.$props, e = t.resizable && r.resizable, s = t.collapsible || r.collapsible;
      return !e && !s;
    },
    isDraggable() {
      const {
        prev: t,
        next: r
      } = this.$props, e = t.resizable && r.resizable, s = t.collapsed || r.collapsed;
      return !!e && !s;
    },
    isHorizontal() {
      return this.$props.orientation === "horizontal";
    }
  },
  inject: {
    kendoLocalizationService: {
      default: null
    }
  },
  data() {
    return {
      focused: !1
    };
  },
  mounted() {
    this.$el && (this.draggable = this.$refs.draggable);
  },
  render() {
    const t = this.isDraggable, r = this.isStatic, e = this.isHorizontal, s = x("k-splitbar", {
      "k-focus": this.focused,
      "k-splitbar-horizontal": e,
      "k-splitbar-vertical": !e,
      "k-splitbar-draggable-horizontal": e && t,
      "k-splitbar-draggable-vertical": !e && t,
      "k-splitbar-static-horizontal": e && r,
      "k-splitbar-static-vertical": !e && r
    }), i = this.previousArrowName(e), o = this.previousArrowSVG(e), h = this.nextArrowName(e), u = this.nextArrowSVG(e), g = k(this).toLanguageString(f, $[f]);
    return n(w, {
      onPress: (l) => this.onDrag(l, !0, !1),
      onDrag: (l) => this.onDrag(l, !1, !1),
      onRelease: (l) => this.onDrag(l, !1, !0),
      ref: "draggable"
    }, {
      default: () => [n("div", {
        tabindex: r ? -1 : 0,
        role: "separator",
        class: s,
        style: {
          touchAction: "none"
        },
        onFocusin: this.onFocus,
        onFocusout: this.onBlur,
        onDblclick: this.onToggle,
        onKeydown: this.onKeyDown,
        "aria-label": g,
        "aria-orientation": this.isHorizontal ? "vertical" : "horizontal"
      }, [this.prev.collapsible && n("span", {
        class: "k-collapse-prev",
        onClick: this.onPrevToggle
      }, [n(d, {
        name: i,
        icon: o,
        size: "xsmall"
      }, null)]), n("div", {
        class: "k-resize-handle"
      }, null), this.next.collapsible && n("span", {
        class: "k-collapse-next",
        onClick: this.onNextToggle
      }, [n(d, {
        name: h,
        icon: u,
        size: "xsmall"
      }, null)])])]
    });
  },
  methods: {
    onDrag(t, r, e) {
      const s = t, {
        index: i
      } = this.$props, o = this.draggable && this.draggable.element;
      !e && s && s.originalEvent.preventDefault(), o && !this.isStatic && this.isDraggable && this.$emit("drag", s, o, i, r, e);
    },
    onFocus() {
      this.focused = !0;
    },
    onBlur() {
      this.focused = !1;
    },
    onToggle(t) {
      const {
        index: r,
        prev: e,
        next: s
      } = this.$props;
      (e.collapsible || s.collapsible) && this.$emit("toggle", e.collapsible ? r : r + 1, t);
    },
    onPrevToggle(t) {
      const {
        index: r,
        prev: e
      } = this.$props;
      e.collapsible && this.$emit("toggle", r, t);
    },
    onNextToggle(t) {
      const {
        index: r,
        next: e
      } = this.$props;
      e.collapsible && this.$emit("toggle", r + 1, t);
    },
    onKeyDown(t) {
      const r = t && t.keyCode, e = this.isHorizontal, {
        index: s
      } = this.$props, i = this.draggable && this.draggable.element, o = (h, u, g) => {
        t.preventDefault(), this.$emit("keyboardresize", h, u, g, t);
      };
      i && (r === a.enter ? (t.preventDefault(), this.onToggle(t)) : this.isDraggable && (e && r === a.left ? o(i, s, -10) : e && r === a.right ? o(i, s, 10) : !e && r === a.up ? o(i, s, -10) : !e && r === a.down && o(i, s, 10)));
    },
    previousArrowName(t) {
      const {
        prev: r
      } = this.$props, e = r.collapsed;
      return t && !e ? this.isRtl ? "chevron-right" : "chevron-left" : t && e ? this.isRtl ? "chevron-left" : "chevron-right" : !t && !e ? "chevron-up" : !t && e ? "chevron-down" : "";
    },
    previousArrowSVG(t) {
      const {
        prev: r
      } = this.$props, e = r.collapsed;
      if (t && !e)
        return this.isRtl ? p : c;
      if (t && e)
        return this.isRtl ? c : p;
      if (!t && !e)
        return v;
      if (!t && e)
        return b;
    },
    nextArrowName(t) {
      const {
        next: r
      } = this.$props, e = r.collapsed;
      return t && !e ? this.isRtl ? "chevron-left" : "chevron-right" : t && e ? this.isRtl ? "chevron-right" : "chevron-left" : !t && !e ? "chevron-down" : !t && e ? "chevron-up" : "";
    },
    nextArrowSVG(t) {
      const {
        next: r
      } = this.$props, e = r.collapsed;
      if (t && !e)
        return this.isRtl ? c : p;
      if (t && e)
        return this.isRtl ? p : c;
      if (!t && !e)
        return b;
      if (!t && e)
        return v;
    }
  }
});
export {
  C as SplitterBar
};