@empoleon/spotlight/esm/SpotlightAction.mjs

Command center components for react and Empoleon

import { createComponent, mergeProps, template, spread, insert, memo } from 'solid-js/web';
import { splitProps } from 'solid-js';
import { factory, useProps, Highlight, UnstyledButton, Box } from '@empoleon/core';
import { useSpotlightContext } from './Spotlight.context.mjs';
import { spotlightActions } from './spotlight.store.mjs';
import classes from './Spotlight.module.css.mjs';

var _tmpl$ = /*#__PURE__*/template(`<span>`),
  _tmpl$2 = /*#__PURE__*/template(`<span><span>`);
const defaultProps = {
  dimmedSections: true,
  highlightQuery: false
};
const SpotlightAction = factory(_props => {
  const props = useProps("SpotlightAction", defaultProps, _props);
  const [local, others] = splitProps(props, ["className", "style", "classNames", "styles", "id", "description", "label", "leftSection", "rightSection", "children", "dimmedSections", "highlightQuery", "highlightColor", "closeSpotlightOnTrigger", "onClick", "onMouseDown", "keywords", "vars", "ref"]);
  const ctx = useSpotlightContext();
  const stylesApi = {
    classNames: local.classNames,
    styles: local.styles
  };
  const labelNode = local.highlightQuery && typeof local.label === "string" ? createComponent(Highlight, mergeProps({
    component: "span",
    get highlight() {
      return ctx.query;
    },
    get color() {
      return local.highlightColor;
    }
  }, () => ctx.getStyles("actionLabel", stylesApi), {
    get children() {
      return local.label;
    }
  })) : (() => {
    var _el$ = _tmpl$();
    spread(_el$, mergeProps(() => ctx.getStyles("actionLabel", stylesApi)), false, true);
    insert(_el$, () => local.label);
    return _el$;
  })();
  return createComponent(UnstyledButton, mergeProps({
    ref(r$) {
      var _ref$ = local.ref;
      typeof _ref$ === "function" ? _ref$(r$) : local.ref = r$;
    },
    "data-action": true
  }, () => ctx.getStyles("action", {
    className: local.className,
    style: local.style,
    ...stylesApi
  }), others, {
    onMouseDown: event => {
      event.preventDefault();
      typeof local.onMouseDown === "function" && local.onMouseDown?.(event);
    },
    onClick: event => {
      typeof local.onClick === "function" && local.onClick?.(event);
      if (local.closeSpotlightOnTrigger ?? ctx.closeOnActionTrigger) {
        spotlightActions.close(ctx.store);
      }
    },
    tabIndex: -1,
    get children() {
      return local.children || [memo(() => memo(() => !!local.leftSection)() && createComponent(Box, mergeProps({
        component: "span",
        get mod() {
          return {
            position: "left",
            dimmed: local.dimmedSections
          };
        }
      }, () => ctx.getStyles("actionSection", stylesApi), {
        get children() {
          return local.leftSection;
        }
      }))), (() => {
        var _el$2 = _tmpl$2(),
          _el$3 = _el$2.firstChild;
        spread(_el$2, mergeProps(() => ctx.getStyles("actionBody", stylesApi)), false, true);
        insert(_el$2, labelNode, _el$3);
        spread(_el$3, mergeProps(() => ctx.getStyles("actionDescription", stylesApi)), false, true);
        insert(_el$3, () => local.description);
        return _el$2;
      })(), memo(() => memo(() => !!local.rightSection)() && createComponent(Box, mergeProps({
        component: "span",
        get mod() {
          return {
            position: "right",
            dimmed: local.dimmedSections
          };
        }
      }, () => ctx.getStyles("actionSection", stylesApi), {
        get children() {
          return local.rightSection;
        }
      })))];
    }
  }));
});
SpotlightAction.classes = classes;
SpotlightAction.displayName = "@empoleon/spotlight/SpotlightAction";

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