@vuesax-alpha/nightly/es/components/sidebar/src/sidebar2.mjs

A Component Library for Vue 3

import { defineComponent, ref, computed, watch, provide, onMounted, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, unref, renderSlot, createCommentVNode, createElementVNode } from 'vue';
import '../../../hooks/index.mjs';
import '../../../directives/index.mjs';
import '../../../utils/index.mjs';
import '../../../tokens/index.mjs';
import { sidebarProps, sidebarEmits } from './sidebar.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useColor } from '../../../hooks/use-common-props/index.mjs';
import { useVuesaxBaseComponent } from '../../../hooks/use-base-component/index.mjs';
import { getVsColor, setColor } from '../../../utils/color.mjs';
import { sidebarContextKey } from '../../../tokens/sidebar.mjs';
import ClickOutside from '../../../directives/click-outside/index.mjs';

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

export { Sidebar as default };
//# sourceMappingURL=sidebar2.mjs.map