@inkline/inkline/composables/useCollapsible.js

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useCollapsible = useCollapsible;
var _vue = require("vue");
var _utils = require("@grozav/utils");
var _constants = require("@inkline/inkline/constants");
function useCollapsible(props) {
  const open = (0, _vue.ref)(props.modelValue.value);
  const collapsible = (0, _vue.ref)(typeof props.collapse.value === "boolean" ? props.collapse.value : false);
  const windowWidth = (0, _vue.ref)(typeof window !== "undefined" ? window.innerWidth : 0);
  const classes = (0, _vue.computed)(() => ({
    "-open": open.value,
    "-collapsible": collapsible.value,
    [`-collapse-${props.collapse.value}`]: Boolean(props.collapse.value)
  }));
  (0, _vue.watch)(() => props.modelValue.value, value => {
    open.value = value;
  });
  (0, _vue.onMounted)(() => {
    if (typeof window !== "undefined") {
      (0, _utils.on)(window, "resize", onWindowResize);
      onWindowResize();
    }
  });
  (0, _vue.onBeforeUnmount)(() => {
    if (typeof window !== "undefined") {
      (0, _utils.off)(window, "resize", onWindowResize);
    }
  });
  function setCollapsible() {
    if (props.collapse.value === true || props.collapse.value === false) {
      collapsible.value = props.collapse.value;
    } else {
      collapsible.value = windowWidth.value <= _constants.breakpoints[props.collapse.value][1];
    }
  }
  function setOpen(value) {
    open.value = value;
    props.emit("update:modelValue", open.value);
  }
  function toggleOpen() {
    open.value = !open.value;
    props.emit("update:modelValue", open.value);
  }
  function onWindowResize() {
    if (typeof window === "undefined") {
      return;
    }
    if (typeof props.collapse.value !== "boolean") {
      const currentWindowWidth = window.innerWidth;
      if (windowWidth.value <= _constants.breakpoints[props.collapse.value][1] && currentWindowWidth > _constants.breakpoints[props.collapse.value][1]) {
        setOpen(false);
      }
      windowWidth.value = window.innerWidth;
    }
    setCollapsible();
  }
  return {
    open,
    collapsible,
    classes,
    setOpen,
    toggleOpen
  };
}