index.mjs 1.1 KB

1234567891011121314151617181920212223242526272829
  1. import { getCurrentInstance, inject, unref } from 'vue';
  2. import { isClient, computedEager } from '@vueuse/core';
  3. import { useGetDerivedNamespace } from '../use-namespace/index.mjs';
  4. import { debugWarn } from '../../utils/error.mjs';
  5. const defaultIdInjection = {
  6. prefix: Math.floor(Math.random() * 1e4),
  7. current: 0
  8. };
  9. const ID_INJECTION_KEY = Symbol("elIdInjection");
  10. const useIdInjection = () => {
  11. return getCurrentInstance() ? inject(ID_INJECTION_KEY, defaultIdInjection) : defaultIdInjection;
  12. };
  13. const useId = (deterministicId) => {
  14. const idInjection = useIdInjection();
  15. if (!isClient && idInjection === defaultIdInjection) {
  16. debugWarn("IdInjection", `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
  17. usage: app.provide(ID_INJECTION_KEY, {
  18. prefix: number,
  19. current: number,
  20. })`);
  21. }
  22. const namespace = useGetDerivedNamespace();
  23. const idRef = computedEager(() => unref(deterministicId) || `${namespace.value}-id-${idInjection.prefix}-${idInjection.current++}`);
  24. return idRef;
  25. };
  26. export { ID_INJECTION_KEY, useId, useIdInjection };
  27. //# sourceMappingURL=index.mjs.map