@vuesax-alpha/nightly/lib/components/sidebar/src/sidebar2.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../hooks/index.js');
require('../../../directives/index.js');
require('../../../utils/index.js');
require('../../../tokens/index.js');
var sidebar = require('./sidebar.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var index$1 = require('../../../hooks/use-common-props/index.js');
var index$2 = require('../../../hooks/use-base-component/index.js');
var color = require('../../../utils/color.js');
var sidebar$1 = require('../../../tokens/sidebar.js');
var index$3 = require('../../../directives/click-outside/index.js');

const __default__ = vue.defineComponent({
  name: "VsSidebar"
});
const _sfc_main = vue.defineComponent({
  ...__default__,
  props: sidebar.sidebarProps,
  emits: sidebar.sidebarEmits,
  setup(__props, { emit }) {
    const props = __props;
    const ns = index.useNamespace("sidebar");
    const color$1 = index$1.useColor("primary");
    const sidebarRef = vue.ref();
    const staticWidth = vue.ref(260);
    const reduceInternal = vue.ref(false);
    const vsBaseClasses = index$2.useVuesaxBaseComponent(color$1);
    const sidebarKls = vue.computed(() => [
      ns.b(),
      vsBaseClasses,
      ns.is("reduce", reduceInternal.value),
      ns.is("open", props.open),
      ns.is("not-line-active", props.notLineActive),
      ns.is("not-shadow", props.notShadow),
      ns.is("text-white", props.textWhite),
      ns.is("absolute", props.absolute),
      ns.is(props.shape, !!props.shape),
      ns.is("right", props.right)
    ]);
    const sidebarStyles = vue.computed(() => [
      ns.cssVar({
        color: color.getVsColor(color$1.value)
      })
    ]);
    const mouseEnterSidebar = () => {
      if (props.hoverExpand) {
        reduceInternal.value = false;
      }
    };
    const mouseLeaveSidebar = () => {
      if (props.hoverExpand) {
        reduceInternal.value = true;
      }
    };
    const clickCloseSidebar = () => {
      emit("update:open", false);
    };
    const handleClickItem = (id) => {
      emit("update:modelValue", id);
      clickCloseSidebar();
    };
    vue.watch(
      () => props.reduce,
      (val) => {
        const wrapper = sidebarRef.value;
        if (!wrapper)
          return;
        reduceInternal.value = val;
        if (val) {
          wrapper.style.width = "50px";
        } else {
          wrapper.style.width = `${staticWidth.value}px`;
        }
      }
    );
    vue.watch(reduceInternal, (val) => {
      const wrapper = sidebarRef.value;
      if (!wrapper)
        return;
      if (val) {
        wrapper.style.width = "50px";
      } else {
        wrapper.style.width = `${staticWidth.value}px`;
      }
    });
    vue.watch(
      () => props.background,
      () => {
        color.setColor(
          "background",
          props.background || "",
          sidebarRef.value,
          true,
          ns.namespace.value
        );
      }
    );
    vue.provide(sidebar$1.sidebarContextKey, {
      modelValue: vue.computed(() => props.modelValue),
      reduce: vue.computed(() => props.reduce),
      handleClickItem
    });
    vue.onMounted(() => {
      staticWidth.value = sidebarRef.value.offsetWidth;
      reduceInternal.value = props.reduce;
      color.setColor(
        "background",
        props.background || "",
        sidebarRef.value,
        true,
        ns.namespace.value
      );
      if (props.textWhite) {
        color.setColor("text", "#fff", sidebarRef.value, true, ns.namespace.value);
      }
    });
    return (_ctx, _cache) => {
      return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
        "div",
        {
          ref_key: "sidebarRef",
          ref: sidebarRef,
          class: vue.normalizeClass(sidebarKls.value),
          style: vue.normalizeStyle(sidebarStyles.value),
          onMouseenter: mouseEnterSidebar,
          onMouseleave: mouseLeaveSidebar
        },
        [
          _ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 0,
              class: vue.normalizeClass(vue.unref(ns).e("logo"))
            },
            [
              vue.renderSlot(_ctx.$slots, "logo")
            ],
            2
          )) : vue.createCommentVNode("v-if", true),
          _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 1,
              class: vue.normalizeClass(vue.unref(ns).e("header"))
            },
            [
              vue.renderSlot(_ctx.$slots, "header")
            ],
            2
          )) : vue.createCommentVNode("v-if", true),
          vue.createElementVNode(
            "div",
            {
              class: vue.normalizeClass(vue.unref(ns).e("body"))
            },
            [
              vue.renderSlot(_ctx.$slots, "default")
            ],
            2
          ),
          _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 2,
              class: vue.normalizeClass(vue.unref(ns).e("footer"))
            },
            [
              vue.renderSlot(_ctx.$slots, "footer")
            ],
            2
          )) : vue.createCommentVNode("v-if", true)
        ],
        38
      )), [
        [vue.unref(index$3["default"]), clickCloseSidebar]
      ]);
    };
  }
});
var Sidebar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/sidebar/src/sidebar.vue"]]);

exports["default"] = Sidebar;
//# sourceMappingURL=sidebar2.js.map