@public-ui/vue/dist/index.mjs

Vue framework adapter for the KoliBri accessible web component library (@public-ui).

import { defineComponent, ref, getCurrentInstance, inject, h, withDirectives } from 'vue';

let tagNameTransformer;
const setTagNameTransformer = (_tagNameTransformer) => {
  tagNameTransformer = _tagNameTransformer;
};

const UPDATE_VALUE_EVENT = "update:modelValue";
const MODEL_VALUE = "modelValue";
const ROUTER_LINK_VALUE = "routerLink";
const NAV_MANAGER = "navManager";
const ROUTER_PROP_PREFIX = "router";
const ARIA_PROP_PREFIX = "aria";
const EMPTY_PROP = Symbol();
const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
const getComponentClasses = (classes) => {
  return classes?.split(" ") || [];
};
const getElementClasses = (ref2, componentClasses, defaultClasses = []) => {
  return [...Array.from(ref2.value?.classList || []), ...defaultClasses].filter(
    (c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i
  );
};
const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
  if (defineCustomElement !== void 0) {
    defineCustomElement();
  }
  const Container = defineComponent((props, { attrs, slots, emit }) => {
    let modelPropValue = props[modelProp];
    const containerRef = ref();
    const classes = new Set(getComponentClasses(attrs.class));
    const vModelDirective = {
      created: (el) => {
        const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
        eventsNames.forEach((eventName) => {
          el.addEventListener(eventName.toLowerCase(), (e) => {
            modelPropValue = (e?.target)[modelProp];
            emit(UPDATE_VALUE_EVENT, modelPropValue);
          });
        });
      }
    };
    const currentInstance = getCurrentInstance();
    const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
    const navManager = hasRouter ? inject(NAV_MANAGER) : void 0;
    const handleRouterLink = (ev) => {
      const { routerLink } = props;
      if (routerLink === EMPTY_PROP)
        return;
      if (navManager !== void 0) {
        let navigationPayload = { event: ev };
        for (const key in props) {
          const value = props[key];
          if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
            navigationPayload[key] = value;
          }
        }
        navManager.navigate(navigationPayload);
      } else {
        console.warn("Tried to navigate, but no router was found. Make sure you have mounted Vue Router.");
      }
    };
    return () => {
      modelPropValue = props[modelProp];
      getComponentClasses(attrs.class).forEach((value) => {
        classes.add(value);
      });
      const oldClick = props.onClick;
      const handleClick = (ev) => {
        if (oldClick !== void 0) {
          oldClick(ev);
        }
        if (!ev.defaultPrevented) {
          handleRouterLink(ev);
        }
      };
      let propsToAdd = {
        ref: containerRef,
        class: getElementClasses(containerRef, classes),
        onClick: handleClick
      };
      for (const key in props) {
        const value = props[key];
        if (props.hasOwnProperty(key) && value !== EMPTY_PROP || key.startsWith(ARIA_PROP_PREFIX)) {
          propsToAdd[key] = value;
        }
      }
      if (modelProp) {
        if (props[MODEL_VALUE] !== EMPTY_PROP) {
          propsToAdd = {
            ...propsToAdd,
            [modelProp]: props[MODEL_VALUE]
          };
        } else if (modelPropValue !== EMPTY_PROP) {
          propsToAdd = {
            ...propsToAdd,
            [modelProp]: modelPropValue
          };
        }
      }
      const newTagName = typeof tagNameTransformer === "function" ? tagNameTransformer(name) : name;
      const node = h(newTagName, propsToAdd, slots.default && slots.default());
      return modelProp === void 0 ? node : withDirectives(node, [[vModelDirective]]);
    };
  });
  if (typeof Container !== "function") {
    Container.name = name;
    Container.props = {
      [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP
    };
    componentProps.forEach((componentProp) => {
      Container.props[componentProp] = DEFAULT_EMPTY_PROP;
    });
    if (modelProp) {
      Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
      Container.emits = [UPDATE_VALUE_EVENT];
    }
  }
  return Container;
};

const KolAbbr = /* @__PURE__ */ defineContainer("kol-abbr", void 0, [
  "_label",
  "_tooltipAlign"
]);
const KolAccordion = /* @__PURE__ */ defineContainer("kol-accordion", void 0, [
  "_disabled",
  "_label",
  "_level",
  "_on",
  "_open"
]);
const KolAlert = /* @__PURE__ */ defineContainer("kol-alert", void 0, [
  "_alert",
  "_hasCloser",
  "_label",
  "_level",
  "_on",
  "_type",
  "_variant"
]);
const KolAvatar = /* @__PURE__ */ defineContainer("kol-avatar", void 0, [
  "_src",
  "_label"
]);
const KolBadge = /* @__PURE__ */ defineContainer("kol-badge", void 0, [
  "_color",
  "_icons",
  "_label",
  "_smartButton"
]);
const KolBreadcrumb = /* @__PURE__ */ defineContainer("kol-breadcrumb", void 0, [
  "_label",
  "_links"
]);
const KolButton = /* @__PURE__ */ defineContainer("kol-button", void 0, [
  "_accessKey",
  "_ariaControls",
  "_ariaDescription",
  "_ariaExpanded",
  "_ariaSelected",
  "_customClass",
  "_disabled",
  "_hideLabel",
  "_icons",
  "_id",
  "_label",
  "_name",
  "_on",
  "_role",
  "_shortKey",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_type",
  "_value",
  "_variant"
]);
const KolButtonGroup = /* @__PURE__ */ defineContainer("kol-button-group", void 0);
const KolButtonLink = /* @__PURE__ */ defineContainer("kol-button-link", void 0, [
  "_accessKey",
  "_ariaControls",
  "_ariaDescription",
  "_ariaExpanded",
  "_ariaSelected",
  "_disabled",
  "_hideLabel",
  "_icons",
  "_id",
  "_label",
  "_name",
  "_on",
  "_role",
  "_shortKey",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_type",
  "_value"
]);
const KolCard = /* @__PURE__ */ defineContainer("kol-card", void 0, [
  "_on",
  "_hasCloser",
  "_label",
  "_level"
]);
const KolCombobox = /* @__PURE__ */ defineContainer("kol-combobox", void 0, [
  "_accessKey",
  "_placeholder",
  "_alert",
  "_disabled",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_msg",
  "_name",
  "_on",
  "_suggestions",
  "_required",
  "_shortKey",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value"
]);
const KolDetails = /* @__PURE__ */ defineContainer("kol-details", void 0, [
  "_disabled",
  "_label",
  "_level",
  "_on",
  "_open"
]);
const KolDrawer = /* @__PURE__ */ defineContainer("kol-drawer", void 0, [
  "_open",
  "_align",
  "_label",
  "_modal",
  "_on"
]);
const KolForm = /* @__PURE__ */ defineContainer("kol-form", void 0, [
  "_on",
  "_requiredText",
  "_errorList"
]);
const KolHeading = /* @__PURE__ */ defineContainer("kol-heading", void 0, [
  "_label",
  "_level",
  "_secondaryHeadline",
  "_variant"
]);
const KolIcon = /* @__PURE__ */ defineContainer("kol-icon", void 0, [
  "_icons",
  "_label"
]);
const KolImage = /* @__PURE__ */ defineContainer("kol-image", void 0, [
  "_alt",
  "_loading",
  "_sizes",
  "_src",
  "_srcset"
]);
const KolIndentedText = /* @__PURE__ */ defineContainer("kol-indented-text", void 0);
const KolInputCheckbox = /* @__PURE__ */ defineContainer("kol-input-checkbox", void 0, [
  "_accessKey",
  "_alert",
  "_checked",
  "_hideError",
  "_disabled",
  "_error",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_indeterminate",
  "_label",
  "_labelAlign",
  "_msg",
  "_name",
  "_on",
  "_required",
  "_shortKey",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value",
  "_variant"
]);
const KolInputColor = /* @__PURE__ */ defineContainer("kol-input-color", void 0, [
  "_accessKey",
  "_alert",
  "_autoComplete",
  "_disabled",
  "_error",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_msg",
  "_name",
  "_on",
  "_shortKey",
  "_smartButton",
  "_suggestions",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value"
]);
const KolInputDate = /* @__PURE__ */ defineContainer("kol-input-date", void 0, [
  "_accessKey",
  "_alert",
  "_autoComplete",
  "_disabled",
  "_error",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_max",
  "_min",
  "_msg",
  "_name",
  "_on",
  "_readOnly",
  "_required",
  "_shortKey",
  "_smartButton",
  "_suggestions",
  "_syncValueBySelector",
  "_step",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_type",
  "_value"
]);
const KolInputEmail = /* @__PURE__ */ defineContainer("kol-input-email", void 0, [
  "_accessKey",
  "_alert",
  "_autoComplete",
  "_disabled",
  "_error",
  "_hasCounter",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_maxLength",
  "_msg",
  "_multiple",
  "_name",
  "_on",
  "_pattern",
  "_placeholder",
  "_readOnly",
  "_required",
  "_shortKey",
  "_smartButton",
  "_suggestions",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value"
]);
const KolInputFile = /* @__PURE__ */ defineContainer("kol-input-file", void 0, [
  "_accept",
  "_accessKey",
  "_alert",
  "_disabled",
  "_error",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_msg",
  "_multiple",
  "_name",
  "_on",
  "_required",
  "_shortKey",
  "_smartButton",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value"
]);
const KolInputNumber = /* @__PURE__ */ defineContainer("kol-input-number", void 0, [
  "_accessKey",
  "_alert",
  "_autoComplete",
  "_disabled",
  "_error",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_max",
  "_min",
  "_msg",
  "_name",
  "_on",
  "_placeholder",
  "_readOnly",
  "_required",
  "_shortKey",
  "_smartButton",
  "_suggestions",
  "_step",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value"
]);
const KolInputPassword = /* @__PURE__ */ defineContainer("kol-input-password", void 0, [
  "_accessKey",
  "_alert",
  "_autoComplete",
  "_disabled",
  "_error",
  "_hasCounter",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_maxLength",
  "_msg",
  "_name",
  "_on",
  "_pattern",
  "_placeholder",
  "_readOnly",
  "_required",
  "_shortKey",
  "_smartButton",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value",
  "_variant"
]);
const KolInputRadio = /* @__PURE__ */ defineContainer("kol-input-radio", void 0, [
  "_accessKey",
  "_alert",
  "_disabled",
  "_error",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_id",
  "_label",
  "_msg",
  "_name",
  "_on",
  "_options",
  "_orientation",
  "_required",
  "_shortKey",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value"
]);
const KolInputRange = /* @__PURE__ */ defineContainer("kol-input-range", void 0, [
  "_accessKey",
  "_alert",
  "_autoComplete",
  "_disabled",
  "_error",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_max",
  "_min",
  "_msg",
  "_name",
  "_on",
  "_shortKey",
  "_step",
  "_suggestions",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value"
]);
const KolInputText = /* @__PURE__ */ defineContainer("kol-input-text", void 0, [
  "_accessKey",
  "_alert",
  "_autoComplete",
  "_disabled",
  "_error",
  "_hasCounter",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_maxLength",
  "_msg",
  "_name",
  "_on",
  "_pattern",
  "_placeholder",
  "_readOnly",
  "_required",
  "_shortKey",
  "_spellCheck",
  "_suggestions",
  "_smartButton",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_type",
  "_value"
]);
const KolKolibri = /* @__PURE__ */ defineContainer("kol-kolibri", void 0, [
  "_color",
  "_labeled"
]);
const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
  "_accessKey",
  "_ariaCurrentValue",
  "_ariaDescription",
  "_disabled",
  "_download",
  "_hideLabel",
  "_href",
  "_icons",
  "_label",
  "_on",
  "_role",
  "_shortKey",
  "_tabIndex",
  "_target",
  "_tooltipAlign"
]);
const KolLinkButton = /* @__PURE__ */ defineContainer("kol-link-button", void 0, [
  "_accessKey",
  "_ariaCurrentValue",
  "_ariaDescription",
  "_customClass",
  "_disabled",
  "_download",
  "_hideLabel",
  "_href",
  "_icons",
  "_label",
  "_on",
  "_role",
  "_shortKey",
  "_tabIndex",
  "_target",
  "_tooltipAlign",
  "_variant"
]);
const KolLinkGroup = /* @__PURE__ */ defineContainer("kol-link-group", void 0, [
  "_listStyleType",
  "_label",
  "_links",
  "_orientation"
]);
const KolLogo = /* @__PURE__ */ defineContainer("kol-logo", void 0, [
  "_org"
]);
const KolModal = /* @__PURE__ */ defineContainer("kol-modal", void 0, [
  "_activeElement",
  "_label",
  "_on",
  "_width"
]);
const KolNav = /* @__PURE__ */ defineContainer("kol-nav", void 0, [
  "_collapsible",
  "_hasCompactButton",
  "_hasIconsWhenExpanded",
  "_hideLabel",
  "_label",
  "_links",
  "_orientation"
]);
const KolPagination = /* @__PURE__ */ defineContainer("kol-pagination", void 0, [
  "_boundaryCount",
  "_customClass",
  "_label",
  "_hasButtons",
  "_page",
  "_pageSize",
  "_pageSizeOptions",
  "_on",
  "_siblingCount",
  "_tooltipAlign",
  "_max"
]);
const KolPopoverButton = /* @__PURE__ */ defineContainer("kol-popover-button", void 0, [
  "_accessKey",
  "_ariaControls",
  "_ariaDescription",
  "_ariaExpanded",
  "_ariaSelected",
  "_customClass",
  "_disabled",
  "_hideLabel",
  "_icons",
  "_id",
  "_label",
  "_name",
  "_on",
  "_popoverAlign",
  "_role",
  "_shortKey",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_type",
  "_value",
  "_variant"
]);
const KolProgress = /* @__PURE__ */ defineContainer("kol-progress", void 0, [
  "_label",
  "_max",
  "_unit",
  "_value",
  "_variant"
]);
const KolQuote = /* @__PURE__ */ defineContainer("kol-quote", void 0, [
  "_label",
  "_href",
  "_quote",
  "_variant"
]);
const KolSelect = /* @__PURE__ */ defineContainer("kol-select", void 0, [
  "_accessKey",
  "_alert",
  "_disabled",
  "_error",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_msg",
  "_multiple",
  "_name",
  "_on",
  "_options",
  "_required",
  "_shortKey",
  "_rows",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value"
]);
const KolSingleSelect = /* @__PURE__ */ defineContainer("kol-single-select", void 0, [
  "_accessKey",
  "_placeholder",
  "_alert",
  "_disabled",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_msg",
  "_name",
  "_on",
  "_options",
  "_required",
  "_shortKey",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value",
  "_hideClearButton"
]);
const KolSkipNav = /* @__PURE__ */ defineContainer("kol-skip-nav", void 0, [
  "_label",
  "_links"
]);
const KolSpin = /* @__PURE__ */ defineContainer("kol-spin", void 0, [
  "_show",
  "_variant"
]);
const KolSplitButton = /* @__PURE__ */ defineContainer("kol-split-button", void 0, [
  "_ariaControls",
  "_ariaExpanded",
  "_ariaSelected",
  "_customClass",
  "_disabled",
  "_hideLabel",
  "_icons",
  "_id",
  "_label",
  "_name",
  "_on",
  "_role",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_type",
  "_value",
  "_variant"
]);
const KolSymbol = /* @__PURE__ */ defineContainer("kol-symbol", void 0, [
  "_label",
  "_symbol"
]);
const KolTable = /* @__PURE__ */ defineContainer("kol-table", void 0, [
  "_allowMultiSort",
  "_data",
  "_dataFoot",
  "_headers",
  "_label",
  "_minWidth",
  "_pagination",
  "_paginationPosition",
  "_selection",
  "_on"
]);
const KolTableStateful = /* @__PURE__ */ defineContainer("kol-table-stateful", void 0, [
  "_allowMultiSort",
  "_data",
  "_dataFoot",
  "_headers",
  "_label",
  "_minWidth",
  "_pagination",
  "_paginationPosition",
  "_selection",
  "_on"
]);
const KolTableStateless = /* @__PURE__ */ defineContainer("kol-table-stateless", void 0, [
  "_data",
  "_dataFoot",
  "_headerCells",
  "_label",
  "_minWidth",
  "_on",
  "_selection"
]);
const KolTabs = /* @__PURE__ */ defineContainer("kol-tabs", void 0, [
  "_align",
  "_behavior",
  "_label",
  "_on",
  "_selected",
  "_tabs"
]);
const KolTextarea = /* @__PURE__ */ defineContainer("kol-textarea", void 0, [
  "_accessKey",
  "_adjustHeight",
  "_alert",
  "_disabled",
  "_error",
  "_hasCounter",
  "_hideError",
  "_hideLabel",
  "_hint",
  "_icons",
  "_id",
  "_label",
  "_maxLength",
  "_msg",
  "_name",
  "_on",
  "_placeholder",
  "_readOnly",
  "_resize",
  "_required",
  "_rows",
  "_shortKey",
  "_spellCheck",
  "_syncValueBySelector",
  "_tabIndex",
  "_tooltipAlign",
  "_touched",
  "_value"
]);
const KolToastContainer = /* @__PURE__ */ defineContainer("kol-toast-container", void 0);
const KolToolbar = /* @__PURE__ */ defineContainer("kol-toolbar", void 0, [
  "_label",
  "_items"
]);
const KolTree = /* @__PURE__ */ defineContainer("kol-tree", void 0, [
  "_label"
]);
const KolTreeItem = /* @__PURE__ */ defineContainer("kol-tree-item", void 0, [
  "_active",
  "_label",
  "_open",
  "_href"
]);
const KolTreeItemWc = /* @__PURE__ */ defineContainer("kol-tree-item-wc", void 0, [
  "_active",
  "_label",
  "_open",
  "_href"
]);
const KolVersion = /* @__PURE__ */ defineContainer("kol-version", void 0, [
  "_label"
]);

export { KolAbbr, KolAccordion, KolAlert, KolAvatar, KolBadge, KolBreadcrumb, KolButton, KolButtonGroup, KolButtonLink, KolCard, KolCombobox, KolDetails, KolDrawer, KolForm, KolHeading, KolIcon, KolImage, KolIndentedText, KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRadio, KolInputRange, KolInputText, KolKolibri, KolLink, KolLinkButton, KolLinkGroup, KolLogo, KolModal, KolNav, KolPagination, KolPopoverButton, KolProgress, KolQuote, KolSelect, KolSingleSelect, KolSkipNav, KolSpin, KolSplitButton, KolSymbol, KolTable, KolTableStateful, KolTableStateless, KolTabs, KolTextarea, KolToastContainer, KolToolbar, KolTree, KolTreeItem, KolTreeItemWc, KolVersion, setTagNameTransformer };