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

TODO

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