vuestic-ui/dist/web-components/src/composables/useZIndex.js

Vue 3 UI Framework

import { shallowReactive, computed, onMounted, onBeforeUnmount, watch } from "vue";
import { g as generateUniqueId } from "../utils/uuid.js";
const createInstance = () => {
  return generateUniqueId();
};
const zIndexStack = shallowReactive([]);
const useZIndex = (isVisible) => {
  const instance = createInstance();
  const register = () => {
    if (zIndexStack.includes(instance)) {
      return;
    }
    zIndexStack.push(instance);
  };
  const unregister = () => {
    const index = zIndexStack.findIndex((item) => item === instance);
    if (index !== -1) {
      zIndexStack.splice(index, 1);
    }
  };
  const zIndex = computed(() => {
    const index = zIndexStack.findIndex((item) => item === instance);
    if (index === -1) {
      return -1;
    }
    return index + 1;
  });
  const isTop = computed(() => zIndex.value === zIndexStack.length - 1);
  const isLowest = computed(() => zIndex.value === 0);
  onMounted(() => {
    if (isVisible.value) {
      register();
    }
  });
  onBeforeUnmount(() => {
    unregister();
  });
  watch(isVisible, (value) => {
    if (value) {
      register();
    } else {
      unregister();
    }
  });
  return {
    zIndex,
    isTop,
    isLowest,
    register,
    unregister
  };
};
export {
  useZIndex as u
};
//# sourceMappingURL=useZIndex.js.map