@empoleon/nprogress/esm/NavigationProgress.mjs

Navigation progress bar

import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps, splitProps, createEffect } from 'solid-js';
import { getDefaultZIndex, OptionalPortal, Progress } from '@empoleon/core';
import { nprogressStore, useNprogress, resetNavigationProgressAction } from './nprogress.store.mjs';
import classes from './NavigationProgress.module.css.mjs';

function NavigationProgress(_props) {
  const props = mergeProps({
    initialProgress: 0,
    size: 3,
    stepInterval: 500,
    withinPortal: true,
    zIndex: getDefaultZIndex("max"),
    store: nprogressStore
  }, _props);
  const [local, others] = splitProps(props, ["initialProgress", "color", "size", "stepInterval", "withinPortal", "portalProps", "zIndex", "store"]);
  local.store.initialize({
    mounted: false,
    progress: local.initialProgress,
    interval: -1,
    step: 1,
    stepInterval: local.stepInterval,
    timeouts: []
  });
  const state = useNprogress(local.store);
  createEffect(() => () => resetNavigationProgressAction(local.store), [local.store]);
  return createComponent(OptionalPortal, mergeProps$1(() => local.portalProps, {
    get withinPortal() {
      return local.withinPortal;
    },
    get children() {
      return createComponent(Progress, mergeProps$1({
        radius: 0,
        get value() {
          return state().progress;
        },
        get size() {
          return local.size;
        },
        get color() {
          return local.color;
        },
        classNames: classes,
        get ["data-mounted"]() {
          return state().mounted || void 0;
        },
        get __vars() {
          return {
            "--nprogress-z-index": local.zIndex?.toString()
          };
        }
      }, others));
    }
  }));
}
NavigationProgress.displayName = "@empoleon/nprogress/NavigationProgress";

export { NavigationProgress };
//# sourceMappingURL=NavigationProgress.mjs.map