@knime/kds-components 0.11.0 → 0.12.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, normalizeStyle, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, useTemplateRef, createCommentVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, createVNode, defineAsyncComponent, useId, Fragment, renderList, onBeforeUpdate, nextTick, withModifiers, normalizeProps, guardReactiveProps, withDirectives, vModelText, onBeforeUnmount, createTextVNode, useCssVars, mergeDefaults, createSlots } from 'vue';
+import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, normalizeStyle, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, useTemplateRef, createCommentVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, createVNode, defineAsyncComponent, useId, Fragment, renderList, onBeforeUpdate, nextTick, withModifiers, normalizeProps, guardReactiveProps, withDirectives, vModelText, watchEffect, createTextVNode, useCssVars, mergeDefaults, createSlots } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, useElementSize } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -2866,7 +2866,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
 
 const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-2e4d2d42"]]);
 
-const _hoisted_1$9 = ["id", "popover", "role", "aria-label"];
+const _hoisted_1$9 = ["id", "role", "aria-label"];
 const _hoisted_2$3 = {
   key: 0,
   class: "kds-popover-default-content"
@@ -2874,8 +2874,6 @@ const _hoisted_2$3 = {
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "KdsPopover",
   props: /* @__PURE__ */ mergeModels({
-    activatorEl: {},
-    anchorEl: {},
     placement: { default: "bottom-left" },
     role: { default: "dialog" },
     fullWidth: { type: Boolean, default: false },
@@ -2886,71 +2884,28 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const open = useModel(__props, "modelValue");
     const popoverEl = useTemplateRef("popoverEl");
     const popoverId = useId();
     const anchorName = `--anchor-${popoverId}`;
-    const resolveElement = (el) => {
-      if (!el) {
-        return null;
-      }
-      const maybeInstance = el;
-      const candidate = maybeInstance.$el ?? el;
-      return candidate instanceof HTMLElement ? candidate : null;
-    };
-    const setA11yAttributes = (el, options) => {
-      if (!el) {
-        return;
-      }
-      if (options === null) {
-        el.removeAttribute("aria-expanded");
-        el.removeAttribute("aria-controls");
-        el.removeAttribute("aria-haspopup");
-        return;
-      }
-      el.setAttribute("aria-expanded", String(options.expanded));
-      el.setAttribute("aria-controls", options.popoverId);
-      el.setAttribute("aria-haspopup", props.role);
-    };
-    watch(open, (isOpen) => {
-      if (isOpen) {
+    watchEffect(() => {
+      if (open.value) {
         popoverEl.value?.showPopover?.();
       } else {
         popoverEl.value?.hidePopover?.();
       }
-      const activatorElement = resolveElement(unref(props.activatorEl));
-      activatorElement?.setAttribute("aria-expanded", String(isOpen));
-    });
-    watch(
-      () => [unref(props.anchorEl), unref(props.activatorEl)],
-      ([nextAnchorEl, nextActivatorEl], prev) => {
-        const [prevAnchorEl, prevActivatorEl] = prev ?? [null, null];
-        const prevAnchor = resolveElement(prevAnchorEl ?? null) ?? resolveElement(prevActivatorEl);
-        prevAnchor?.style.removeProperty("anchor-name");
-        const prevActivator = resolveElement(prevActivatorEl);
-        setA11yAttributes(prevActivator, null);
-        const nextAnchor = resolveElement(nextAnchorEl ?? null) ?? resolveElement(nextActivatorEl);
-        nextAnchor?.style.setProperty("anchor-name", anchorName);
-        const nextActivator = resolveElement(nextActivatorEl);
-        setA11yAttributes(nextActivator, { expanded: open.value, popoverId });
-      },
-      { immediate: true }
-    );
-    onBeforeUnmount(() => {
-      const anchor = resolveElement(unref(props.anchorEl) ?? null) ?? resolveElement(unref(props.activatorEl));
-      anchor?.style.removeProperty("anchor-name");
-      const activator = resolveElement(unref(props.activatorEl));
-      setA11yAttributes(activator, null);
     });
+    const anchorStyle = { "anchor-name": anchorName };
+    __expose({ anchorStyle, popoverId });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         id: unref(popoverId),
         ref_key: "popoverEl",
         ref: popoverEl,
         class: normalizeClass(["kds-popover", ["floating", props.placement, { "full-width": props.fullWidth }]]),
-        popover: unref(props.activatorEl) ? "auto" : void 0,
+        popover: "auto",
         style: normalizeStyle({ "position-anchor": anchorName }),
         role: props.role,
         "aria-label": props.popoverAriaLabel,
@@ -2964,7 +2919,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-22bbe124"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-9125d023"]]);
 
 const _hoisted_1$8 = { class: "kds-info-popover-content" };
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
@@ -2986,7 +2941,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
 
 const InfoPopover = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-951f2a2b"]]);
 
-const _hoisted_1$7 = ["aria-pressed"];
+const _hoisted_1$7 = ["aria-pressed", "aria-expanded", "aria-controls"];
 const TITLE = "Click for more information";
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "KdsInfoToggleButton",
@@ -3001,15 +2956,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
-    const buttonEl = useTemplateRef("buttonEl");
+    const popoverEl = useTemplateRef("popoverEl");
     const isHovered = ref(false);
     const isFocused = ref(false);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("button", mergeProps({
-          ref_key: "buttonEl",
-          ref: buttonEl
-        }, _ctx.$attrs, {
+        createElementVNode("button", mergeProps(_ctx.$attrs, {
           class: {
             "info-toggle-button": true,
             selected: modelValue.value,
@@ -3018,6 +2970,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           title: TITLE,
           "aria-label": TITLE,
           "aria-pressed": modelValue.value,
+          "aria-expanded": modelValue.value,
+          "aria-controls": popoverEl.value?.popoverId,
+          "aria-haspopup": "dialog",
+          style: popoverEl.value?.anchorStyle,
           type: "button",
           onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value),
           onMouseenter: _cache[1] || (_cache[1] = ($event) => isHovered.value = true),
@@ -3031,9 +2987,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           })
         ], 16, _hoisted_1$7),
         createVNode(KdsPopover, {
+          ref_key: "popoverEl",
+          ref: popoverEl,
           modelValue: modelValue.value,
           "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modelValue.value = $event),
-          "activator-el": buttonEl.value,
           placement: "top-right",
           "popover-aria-label": "Description"
         }, {
@@ -3048,13 +3005,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             }, 8, ["content"])
           ]),
           _: 3
-        }, 8, ["modelValue", "activator-el"])
+        }, 8, ["modelValue"])
       ], 64);
     };
   }
 });
 
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-9c9e8369"]]);
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-f98c9924"]]);
 
 const KdsInfoToggleButton$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -3081,7 +3038,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 
 const VariablePopover = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-54c206b9"]]);
 
-const _hoisted_1$5 = ["title", "aria-label", "aria-pressed"];
+const _hoisted_1$5 = ["title", "aria-label", "aria-pressed", "aria-expanded", "aria-controls"];
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "KdsVariableToggleButton",
   props: /* @__PURE__ */ mergeModels({
@@ -3098,7 +3055,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
-    const buttonEl = useTemplateRef("buttonEl");
+    const popoverEl = useTemplateRef("popoverEl");
     const isHovered = ref(false);
     const isFocused = ref(false);
     const iconState = computed(() => {
@@ -3146,10 +3103,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("button", mergeProps({
-          ref_key: "buttonEl",
-          ref: buttonEl
-        }, _ctx.$attrs, {
+        createElementVNode("button", mergeProps(_ctx.$attrs, {
           class: {
             "variable-toggle-button": true,
             error: props.error,
@@ -3159,6 +3113,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           title: title.value,
           "aria-label": title.value,
           "aria-pressed": modelValue.value,
+          "aria-expanded": modelValue.value,
+          "aria-controls": popoverEl.value?.popoverId,
+          "aria-haspopup": "dialog",
+          style: popoverEl.value?.anchorStyle,
           type: "button",
           onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value),
           onMouseenter: _cache[1] || (_cache[1] = ($event) => isHovered.value = true),
@@ -3172,9 +3130,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"])
         ], 16, _hoisted_1$5),
         createVNode(KdsPopover, {
+          ref_key: "popoverEl",
+          ref: popoverEl,
           modelValue: modelValue.value,
           "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modelValue.value = $event),
-          "activator-el": buttonEl.value,
           placement: "bottom-right",
           "popover-aria-label": "Flow Variable settings"
         }, {
@@ -3189,13 +3148,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             }, 8, ["content"])
           ]),
           _: 3
-        }, 8, ["modelValue", "activator-el"])
+        }, 8, ["modelValue"])
       ], 64);
     };
   }
 });
 
-const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-ece95962"]]);
+const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-1541cbb3"]]);
 
 const _hoisted_1$4 = { class: "kds-empty-state" };
 const _hoisted_2$2 = { class: "kds-empty-state-headline" };
@@ -3695,19 +3654,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-67e036b5"]]);
 
-const kdsPopoverPlacement = {
-  TOP_LEFT: "top-left",
-  TOP_RIGHT: "top-right",
-  BOTTOM_LEFT: "bottom-left",
-  BOTTOM_RIGHT: "bottom-right"
-};
-const kdsPopoverPlacements = Object.values(kdsPopoverPlacement);
-const kdsPopoverRole = {
-  DIALOG: "dialog",
-  MENU: "menu",
-  LISTBOX: "listbox"
-};
-const kdsPopoverRoles = Object.values(kdsPopoverRole);
-
-export { KdsAvatar, _sfc_main$t as KdsButton, KdsCardClickable, _sfc_main$m as KdsCheckbox, KdsCheckboxGroup, KdsColorSwatch, KdsDataType, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$s as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsModal, KdsModalLayout, _sfc_main$e as KdsNumberInput, _sfc_main$d as KdsPatternInput, KdsPopover, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$c as KdsSearchInput, KdsSubText, _sfc_main$b as KdsTextInput, KdsTextarea, _sfc_main$r as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, _sfc_main$t as KdsButton, KdsCardClickable, _sfc_main$m as KdsCheckbox, KdsCheckboxGroup, KdsColorSwatch, KdsDataType, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$s as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsModal, KdsModalLayout, _sfc_main$e as KdsNumberInput, _sfc_main$d as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$c as KdsSearchInput, KdsSubText, _sfc_main$b as KdsTextInput, KdsTextarea, _sfc_main$r as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map