@evance/evance-ui 1.1.8 → 1.1.9

package/dist/esm/components/EvSlideGroup/EvSlideGroup.vue.mjs

@@ -0,0 +1,355 @@
+/*! Evance UI v1.1.9 | MIT License */
+import { defineComponent, shallowRef, computed, watch, createBlock, openBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, unref, withCtx, createElementVNode, createElementBlock, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createVNode } from "vue";
+/* empty css                   */
+import { makeEvSlideGroupProps } from "./EvSlideGroup.mjs";
+import _sfc_main$1 from "../EvButton/EvButton.vue.mjs";
+import { useDisplayRuleClasses } from "../../composables/display.mjs";
+import { useGroup } from "../../composables/group.mjs";
+import { useResizeObserver } from "../../composables/resizeObserver.mjs";
+import { calculateCenteredOffset, calculateUpdatedOffset, bias } from "./helpers.mjs";
+import ChevronDownIcon from "../../icons/glyph/ChevronDownIcon.svg.mjs";
+import ChevronLeftIcon from "../../icons/glyph/ChevronLeftIcon.svg.mjs";
+import ChevronRightIcon from "../../icons/glyph/ChevronRightIcon.svg.mjs";
+import ChevronUpIcon from "../../icons/glyph/ChevronUpIcon.svg.mjs";
+import { useRtl } from "../../composables/locale.mjs";
+import { focusableChildren } from "../../util/children.mjs";
+import { Browser } from "../../util/browser.mjs";
+import { isBoolean } from "../../util/is-functions.mjs";
+import { clamp } from "../../util/helpers.mjs";
+const _hoisted_1 = ["hidden"];
+const _hoisted_2 = ["hidden"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EvSlideGroup",
+  props: {
+    ...makeEvSlideGroupProps()
+  },
+  setup(__props) {
+    const props = __props;
+    const group = useGroup(props, props.symbol);
+    const { isRtl } = useRtl();
+    const isFocused = shallowRef(false);
+    const isOverflowing = shallowRef(false);
+    const scrollOffset = shallowRef(0);
+    const containerSize = shallowRef(0);
+    const contentSize = shallowRef(0);
+    const isHorizontal = computed(() => props.direction === "horizontal");
+    const disableTransition = shallowRef(false);
+    const { resizeRef: containerRef, contentRect: containerRect } = useResizeObserver();
+    const { resizeRef: contentRef, contentRect } = useResizeObserver();
+    const firstSelectedIndex = computed(() => {
+      if (!group.selected.value.length) {
+        return -1;
+      }
+      return group.items.value.findIndex(
+        (item) => item.id === group.selected.value[0]
+      );
+    });
+    const lastSelectedIndex = computed(() => {
+      if (!group.selected.value.length) {
+        return -1;
+      }
+      return group.items.value.findIndex(
+        (item) => item.id === group.selected.value[group.selected.value.length - 1]
+      );
+    });
+    if (Browser.hasWindow) {
+      let frame = -1;
+      watch(
+        () => [
+          group.selected.value,
+          containerRect.value,
+          contentRect.value,
+          isHorizontal.value
+        ],
+        () => {
+          cancelAnimationFrame(frame);
+          frame = requestAnimationFrame(() => {
+            if (containerRect.value && contentRect.value) {
+              const sizeProperty = isHorizontal.value ? "width" : "height";
+              containerSize.value = containerRect.value[sizeProperty];
+              contentSize.value = contentRect.value[sizeProperty];
+              isOverflowing.value = containerSize.value + 1 < contentSize.value;
+            }
+            if (firstSelectedIndex.value >= 0 && contentRef.value) {
+              const selectedElement = contentRef.value.children[lastSelectedIndex.value];
+              if (firstSelectedIndex.value === 0 || !isOverflowing.value) {
+                scrollOffset.value = 0;
+              } else if (props.centerActive) {
+                scrollOffset.value = calculateCenteredOffset({
+                  selectedElement,
+                  containerSize: containerSize.value,
+                  contentSize: contentSize.value,
+                  isRtl: isRtl.value,
+                  isHorizontal: isHorizontal.value
+                });
+              } else if (isOverflowing.value) {
+                scrollOffset.value = calculateUpdatedOffset({
+                  selectedElement,
+                  containerSize: containerSize.value,
+                  contentSize: contentSize.value,
+                  isRtl: isRtl.value,
+                  currentScrollOffset: scrollOffset.value,
+                  isHorizontal: isHorizontal.value
+                });
+              }
+            }
+          });
+        }
+      );
+    }
+    function focus(location) {
+      var _a, _b, _c, _d, _e;
+      if (!contentRef.value) {
+        return;
+      }
+      if (!location) {
+        const focusable = focusableChildren(contentRef.value);
+        (_a = focusable[0]) == null ? void 0 : _a.focus();
+      } else if (location === "next") {
+        const el = (_b = contentRef.value.querySelector(":focus")) == null ? void 0 : _b.nextElementSibling;
+        if (el) {
+          el.focus();
+        } else {
+          focus("first");
+        }
+      } else if (location === "previous") {
+        const el = (_c = contentRef.value.querySelector(":focus")) == null ? void 0 : _c.previousElementSibling;
+        if (el) {
+          el.focus();
+        } else {
+          focus("last");
+        }
+      } else if (location === "first") {
+        (_d = contentRef.value.firstElementChild) == null ? void 0 : _d.focus();
+      } else if (location === "last") {
+        (_e = contentRef.value.lastElementChild) == null ? void 0 : _e.focus();
+      }
+    }
+    function onFocus(e) {
+      var _a;
+      if (!isFocused.value && !(e.relatedTarget && ((_a = contentRef.value) == null ? void 0 : _a.contains(e.relatedTarget)))) {
+        focus();
+      }
+    }
+    function onFocusin(e) {
+      isFocused.value = true;
+      if (!isOverflowing.value || !contentRef.value) {
+        return;
+      }
+      for (const el of e.composedPath()) {
+        for (const item of contentRef.value.children) {
+          if (item === el) {
+            scrollOffset.value = calculateUpdatedOffset({
+              selectedElement: item,
+              containerSize: containerSize.value,
+              contentSize: contentSize.value,
+              isRtl: isRtl.value,
+              currentScrollOffset: scrollOffset.value,
+              isHorizontal: isHorizontal.value
+            });
+            return;
+          }
+        }
+      }
+    }
+    function onFocusout(e) {
+      isFocused.value = false;
+    }
+    function onKeydown(e) {
+      if (!contentRef.value) {
+        return;
+      }
+      if (isHorizontal.value) {
+        if (e.key === "ArrowRight") {
+          focus(isRtl.value ? "previous" : "next");
+        } else if (e.key === "ArrowLeft") {
+          focus(isRtl.value ? "next" : "previous");
+        }
+      } else {
+        if (e.key === "ArrowDown") {
+          focus("next");
+        } else if (e.key === "ArrowUp") {
+          focus("previous");
+        }
+      }
+      if (e.key === "Home") {
+        focus("first");
+      } else if (e.key === "End") {
+        focus("last");
+      }
+    }
+    function onScroll() {
+      if (!containerRef.value) {
+        return;
+      }
+      containerRef.value[isHorizontal.value ? "scrollLeft" : "scrollTop"] = 0;
+    }
+    let startTouch = 0;
+    let startOffset = 0;
+    function onTouchstart(e) {
+      const sizeProperty = isHorizontal.value ? "clientX" : "clientY";
+      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
+      startOffset = sign * scrollOffset.value;
+      startTouch = e.touches[0][sizeProperty];
+      disableTransition.value = true;
+    }
+    function onTouchmove(e) {
+      if (!isOverflowing.value) {
+        return;
+      }
+      const sizeProperty = isHorizontal.value ? "clientX" : "clientY";
+      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
+      scrollOffset.value = sign * (startOffset + startTouch - e.touches[0][sizeProperty]);
+    }
+    function onTouchend(e) {
+      const maxScrollOffset = contentSize.value - containerSize.value;
+      if (scrollOffset.value < 0 || !isOverflowing.value) {
+        scrollOffset.value = 0;
+      } else if (scrollOffset.value >= maxScrollOffset) {
+        scrollOffset.value = maxScrollOffset;
+      }
+      disableTransition.value = false;
+    }
+    function scrollTo(location) {
+      const newAbsoluteOffset = scrollOffset.value + (location === "previous" ? -1 : 1) * containerSize.value;
+      scrollOffset.value = clamp(
+        newAbsoluteOffset,
+        0,
+        contentSize.value - containerSize.value
+      );
+    }
+    const arrowsHiddenClasses = useDisplayRuleClasses(
+      props,
+      "arrowsHidden",
+      "hidden"
+    );
+    const arrowsHiddenAttribute = computed(() => {
+      return isBoolean(props.arrowsHidden) && props.arrowsHidden;
+    });
+    const contentStyles = computed(() => {
+      let scrollAmount = scrollOffset.value > contentSize.value - containerSize.value ? -(contentSize.value - containerSize.value) + bias(contentSize.value - containerSize.value - scrollOffset.value) : -scrollOffset.value;
+      if (scrollOffset.value <= 0) {
+        scrollAmount = bias(-scrollOffset.value);
+      }
+      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
+      return {
+        transform: `translate${isHorizontal.value ? "X" : "Y"}(${sign * scrollAmount}px)`,
+        transition: disableTransition.value ? "none" : "",
+        willChange: disableTransition.value ? "transform" : ""
+      };
+    });
+    const slotProps = computed(() => ({
+      next: group.next,
+      previous: group.previous,
+      select: group.select,
+      isSelected: group.isSelected
+    }));
+    const hasPrevious = computed(() => {
+      return Math.abs(scrollOffset.value) > 0;
+    });
+    const hasNext = computed(() => {
+      return contentSize.value > Math.abs(scrollOffset.value) + containerSize.value;
+    });
+    const hasAffix = computed(() => {
+      if (isBoolean(props.arrowsHidden) && props.arrowsHidden) {
+        return false;
+      }
+      return isOverflowing.value || Math.abs(scrollOffset.value) > 0;
+    });
+    const arrowsAlignClass = computed(() => {
+      return `is-arrows-${props.arrowsAlign}`;
+    });
+    const iconNext = computed(() => {
+      if (props.iconNext) {
+        return props.iconNext;
+      }
+      return isHorizontal.value ? ChevronRightIcon : ChevronDownIcon;
+    });
+    const iconPrevious = computed(() => {
+      if (props.iconPrevious) {
+        return props.iconPrevious;
+      }
+      return isHorizontal.value ? ChevronLeftIcon : ChevronUpIcon;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(props.tag), {
+        class: normalizeClass([
+          "ev-slide-group",
+          {
+            "is-overflowing": isOverflowing.value,
+            "is-vertical": !isHorizontal.value
+          },
+          arrowsAlignClass.value,
+          props.class
+        ]),
+        style: normalizeStyle(props.style),
+        tabindex: isFocused.value || unref(group).selected.value.length ? -1 : 0,
+        onFocus
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            key: "container",
+            ref_key: "containerRef",
+            ref: containerRef,
+            class: "ev-slide-group--container",
+            onScroll
+          }, [
+            createElementVNode("div", {
+              ref_key: "contentRef",
+              ref: contentRef,
+              class: "ev-slide-group--content",
+              style: normalizeStyle(contentStyles.value),
+              onTouchstartPassive: onTouchstart,
+              onTouchmovePassive: onTouchmove,
+              onTouchendPassive: onTouchend,
+              onFocusin,
+              onFocusout,
+              onKeydown
+            }, [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))
+            ], 36)
+          ], 544),
+          hasAffix.value ? (openBlock(), createElementBlock("div", {
+            key: "previous",
+            class: normalizeClass([
+              "ev-slide-group--previous",
+              { "is-disabled": !hasPrevious.value },
+              ...unref(arrowsHiddenClasses)
+            ]),
+            hidden: arrowsHiddenAttribute.value,
+            onClick: _cache[0] || (_cache[0] = () => scrollTo("previous"))
+          }, [
+            renderSlot(_ctx.$slots, "previous", {}, () => [
+              createVNode(unref(_sfc_main$1), {
+                icon: unref(isRtl) && isHorizontal.value ? iconNext.value : iconPrevious.value,
+                variant: "subtle"
+              }, null, 8, ["icon"])
+            ])
+          ], 10, _hoisted_1)) : createCommentVNode("", true),
+          hasAffix.value ? (openBlock(), createElementBlock("div", {
+            key: "next",
+            class: normalizeClass([
+              "ev-slide-group--next",
+              { "is-disabled": !hasNext.value },
+              ...unref(arrowsHiddenClasses)
+            ]),
+            hidden: arrowsHiddenAttribute.value,
+            onClick: _cache[1] || (_cache[1] = () => scrollTo("next"))
+          }, [
+            renderSlot(_ctx.$slots, "next", {}, () => [
+              createVNode(unref(_sfc_main$1), {
+                icon: unref(isRtl) && isHorizontal.value ? iconPrevious.value : iconNext.value,
+                variant: "subtle"
+              }, null, 8, ["icon"])
+            ])
+          ], 10, _hoisted_2)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 40, ["class", "style", "tabindex"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=EvSlideGroup.vue.mjs.map

package/dist/esm/components/EvSlideGroup/EvSlideGroup.vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvSlideGroup.vue.mjs","sources":["../../../../src/components/EvSlideGroup/EvSlideGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * # EvSlideGroup\n */\nimport \"./EvSlideGroup.scss\";\nimport { makeEvSlideGroupProps, EvSlideGroupSlot } from \"./EvSlideGroup\";\nimport { EvButton } from \"@/components/EvButton\";\nimport { useDisplayRuleClasses } from \"@/composables/display\";\nimport { computed, shallowRef, watch } from \"vue\";\nimport { Browser, clamp, focusableChildren, isBoolean } from \"@/util\";\nimport { GroupProps, useGroup } from \"@/composables/group\";\nimport { useResizeObserver } from \"@/composables/resizeObserver\";\nimport {\n    bias,\n    calculateCenteredOffset,\n    calculateUpdatedOffset,\n} from \"@/components/EvSlideGroup/helpers\";\nimport {\n    ChevronDownIcon,\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    ChevronUpIcon,\n} from \"@/icons\";\nimport { useRtl } from \"@/composables/locale\";\n\ndefineSlots<EvSlideGroupSlot>();\n\nconst props = defineProps({\n    ...makeEvSlideGroupProps(),\n});\nconst group = useGroup(props as any as GroupProps, props.symbol);\nconst { isRtl } = useRtl();\nconst isFocused = shallowRef(false);\nconst isOverflowing = shallowRef(false);\nconst scrollOffset = shallowRef(0);\nconst containerSize = shallowRef(0);\nconst contentSize = shallowRef(0);\nconst isHorizontal = computed(() => props.direction === \"horizontal\");\nconst disableTransition = shallowRef(false);\n\nconst { resizeRef: containerRef, contentRect: containerRect } =\n    useResizeObserver();\nconst { resizeRef: contentRef, contentRect } = useResizeObserver();\n\nconst firstSelectedIndex = computed(() => {\n    if (!group.selected.value.length) {\n        return -1;\n    }\n    return group.items.value.findIndex(\n        (item) => item.id === group.selected.value[0],\n    );\n});\n\nconst lastSelectedIndex = computed(() => {\n    if (!group.selected.value.length) {\n        return -1;\n    }\n    return group.items.value.findIndex(\n        (item) =>\n            item.id === group.selected.value[group.selected.value.length - 1],\n    );\n});\n\nif (Browser.hasWindow) {\n    let frame = -1;\n    watch(\n        () => [\n            group.selected.value,\n            containerRect.value,\n            contentRect.value,\n            isHorizontal.value,\n        ],\n        () => {\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(() => {\n                if (containerRect.value && contentRect.value) {\n                    const sizeProperty = isHorizontal.value\n                        ? \"width\"\n                        : \"height\";\n                    containerSize.value = containerRect.value[sizeProperty];\n                    contentSize.value = contentRect.value[sizeProperty];\n                    isOverflowing.value =\n                        containerSize.value + 1 < contentSize.value;\n                }\n\n                if (firstSelectedIndex.value >= 0 && contentRef.value) {\n                    // @todo: Is this too naive? Should we store element references in group composable?\n                    const selectedElement = contentRef.value.children[\n                        lastSelectedIndex.value\n                    ] as HTMLElement;\n\n                    if (\n                        firstSelectedIndex.value === 0 ||\n                        !isOverflowing.value\n                    ) {\n                        scrollOffset.value = 0;\n                    } else if (props.centerActive) {\n                        scrollOffset.value = calculateCenteredOffset({\n                            selectedElement,\n                            containerSize: containerSize.value,\n                            contentSize: contentSize.value,\n                            isRtl: isRtl.value,\n                            isHorizontal: isHorizontal.value,\n                        });\n                    } else if (isOverflowing.value) {\n                        scrollOffset.value = calculateUpdatedOffset({\n                            selectedElement,\n                            containerSize: containerSize.value,\n                            contentSize: contentSize.value,\n                            isRtl: isRtl.value,\n                            currentScrollOffset: scrollOffset.value,\n                            isHorizontal: isHorizontal.value,\n                        });\n                    }\n                }\n            });\n        },\n    );\n}\n\n/**\n * ## focus\n * @param location\n */\nfunction focus(location?: \"next\" | \"previous\" | \"first\" | \"last\") {\n    if (!contentRef.value) {\n        return;\n    }\n    if (!location) {\n        const focusable = focusableChildren(contentRef.value);\n        focusable[0]?.focus();\n    } else if (location === \"next\") {\n        const el = contentRef.value.querySelector(\":focus\")\n            ?.nextElementSibling as HTMLElement | undefined;\n        if (el) {\n            el.focus();\n        } else {\n            focus(\"first\");\n        }\n    } else if (location === \"previous\") {\n        const el = contentRef.value.querySelector(\":focus\")\n            ?.previousElementSibling as HTMLElement | undefined;\n        if (el) {\n            el.focus();\n        } else {\n            focus(\"last\");\n        }\n    } else if (location === \"first\") {\n        (contentRef.value.firstElementChild as HTMLElement)?.focus();\n    } else if (location === \"last\") {\n        (contentRef.value.lastElementChild as HTMLElement)?.focus();\n    }\n}\n\n/**\n * ## onFocus\n * @param e\n */\nfunction onFocus(e: FocusEvent) {\n    if (\n        !isFocused.value &&\n        !(\n            e.relatedTarget &&\n            contentRef.value?.contains(e.relatedTarget as Node)\n        )\n    ) {\n        focus();\n    }\n}\n\n/**\n * ## onFocusin\n * @param e\n */\nfunction onFocusin(e: FocusEvent) {\n    isFocused.value = true;\n\n    if (!isOverflowing.value || !contentRef.value) {\n        return;\n    }\n\n    // Focused element is likely to be the root of an item, so a\n    // breadth-first search will probably find it in the first iteration\n    for (const el of e.composedPath()) {\n        for (const item of contentRef.value.children) {\n            if (item === el) {\n                scrollOffset.value = calculateUpdatedOffset({\n                    selectedElement: item as HTMLElement,\n                    containerSize: containerSize.value,\n                    contentSize: contentSize.value,\n                    isRtl: isRtl.value,\n                    currentScrollOffset: scrollOffset.value,\n                    isHorizontal: isHorizontal.value,\n                });\n                return;\n            }\n        }\n    }\n}\n\n/**\n * ## onFocusout\n * @param e\n */\nfunction onFocusout(e: FocusEvent) {\n    isFocused.value = false;\n}\n\n/**\n * ## onKeydown\n * @param e\n */\nfunction onKeydown(e: KeyboardEvent) {\n    if (!contentRef.value) {\n        return;\n    }\n    if (isHorizontal.value) {\n        if (e.key === \"ArrowRight\") {\n            focus(isRtl.value ? \"previous\" : \"next\");\n        } else if (e.key === \"ArrowLeft\") {\n            focus(isRtl.value ? \"next\" : \"previous\");\n        }\n    } else {\n        if (e.key === \"ArrowDown\") {\n            focus(\"next\");\n        } else if (e.key === \"ArrowUp\") {\n            focus(\"previous\");\n        }\n    }\n    if (e.key === \"Home\") {\n        focus(\"first\");\n    } else if (e.key === \"End\") {\n        focus(\"last\");\n    }\n}\n\n/**\n * ## onScroll\n */\nfunction onScroll() {\n    if (!containerRef.value) {\n        return;\n    }\n    containerRef.value[isHorizontal.value ? \"scrollLeft\" : \"scrollTop\"] = 0;\n}\n\nlet startTouch = 0;\nlet startOffset = 0;\n\n/**\n * ## onTouchstart\n * @param e\n */\nfunction onTouchstart(e: TouchEvent) {\n    const sizeProperty = isHorizontal.value ? \"clientX\" : \"clientY\";\n    const sign = isRtl.value && isHorizontal.value ? -1 : 1;\n    startOffset = sign * scrollOffset.value;\n    startTouch = e.touches[0][sizeProperty];\n    disableTransition.value = true;\n}\n\n/**\n * ## onTouchmove\n * @param e\n */\nfunction onTouchmove(e: TouchEvent) {\n    if (!isOverflowing.value) {\n        return;\n    }\n    const sizeProperty = isHorizontal.value ? \"clientX\" : \"clientY\";\n    const sign = isRtl.value && isHorizontal.value ? -1 : 1;\n    scrollOffset.value =\n        sign * (startOffset + startTouch - e.touches[0][sizeProperty]);\n}\n\n/**\n * # onTouchend\n * @param e\n */\nfunction onTouchend(e: TouchEvent) {\n    const maxScrollOffset = contentSize.value - containerSize.value;\n    if (scrollOffset.value < 0 || !isOverflowing.value) {\n        scrollOffset.value = 0;\n    } else if (scrollOffset.value >= maxScrollOffset) {\n        scrollOffset.value = maxScrollOffset;\n    }\n    disableTransition.value = false;\n}\n\n/**\n * ## scrollTo\n * @param location\n */\nfunction scrollTo(location: \"previous\" | \"next\") {\n    const newAbsoluteOffset =\n        scrollOffset.value +\n        (location === \"previous\" ? -1 : 1) * containerSize.value;\n    scrollOffset.value = clamp(\n        newAbsoluteOffset,\n        0,\n        contentSize.value - containerSize.value,\n    );\n}\n\n/**\n * Arrows Hidden\n */\nconst arrowsHiddenClasses = useDisplayRuleClasses(\n    props,\n    \"arrowsHidden\",\n    \"hidden\",\n);\nconst arrowsHiddenAttribute = computed(() => {\n    return isBoolean(props.arrowsHidden) && props.arrowsHidden;\n});\n\nconst contentStyles = computed(() => {\n    // This adds friction when scrolling the 'wrong' way when at max offset\n    let scrollAmount =\n        scrollOffset.value > contentSize.value - containerSize.value\n            ? -(contentSize.value - containerSize.value) +\n              bias(contentSize.value - containerSize.value - scrollOffset.value)\n            : -scrollOffset.value;\n\n    // This adds friction when scrolling the 'wrong' way when at min offset\n    if (scrollOffset.value <= 0) {\n        scrollAmount = bias(-scrollOffset.value);\n    }\n\n    const sign = isRtl.value && isHorizontal.value ? -1 : 1;\n    return {\n        transform: `translate${isHorizontal.value ? \"X\" : \"Y\"}(${sign * scrollAmount}px)`,\n        transition: disableTransition.value ? \"none\" : \"\",\n        willChange: disableTransition.value ? \"transform\" : \"\",\n    };\n});\n\nconst slotProps = computed(() => ({\n    next: group.next,\n    previous: group.previous,\n    select: group.select,\n    isSelected: group.isSelected,\n}));\n\nconst hasPrevious = computed(() => {\n    return Math.abs(scrollOffset.value) > 0;\n});\n\nconst hasNext = computed(() => {\n    // Check one scroll ahead to know the width of right-most item\n    return (\n        contentSize.value > Math.abs(scrollOffset.value) + containerSize.value\n    );\n});\n\nconst hasAffix = computed(() => {\n    if (isBoolean(props.arrowsHidden) && props.arrowsHidden) {\n        return false;\n    }\n    return isOverflowing.value || Math.abs(scrollOffset.value) > 0;\n});\n\nconst arrowsAlignClass = computed(() => {\n    return `is-arrows-${props.arrowsAlign}`;\n});\n\nconst iconNext = computed(() => {\n    if (props.iconNext) {\n        return props.iconNext;\n    }\n    return isHorizontal.value ? ChevronRightIcon : ChevronDownIcon;\n});\n\nconst iconPrevious = computed(() => {\n    if (props.iconPrevious) {\n        return props.iconPrevious;\n    }\n    return isHorizontal.value ? ChevronLeftIcon : ChevronUpIcon;\n});\n</script>\n\n<template>\n    <component\n        :is=\"props.tag\"\n        :class=\"[\n            'ev-slide-group',\n            {\n                'is-overflowing': isOverflowing,\n                'is-vertical': !isHorizontal,\n            },\n            arrowsAlignClass,\n            props.class,\n        ]\"\n        :style=\"props.style\"\n        :tabindex=\"isFocused || group.selected.value.length ? -1 : 0\"\n        @focus=\"onFocus\">\n        <div\n            key=\"container\"\n            ref=\"containerRef\"\n            class=\"ev-slide-group--container\"\n            @scroll=\"onScroll\">\n            <div\n                ref=\"contentRef\"\n                class=\"ev-slide-group--content\"\n                :style=\"contentStyles\"\n                @touchstart.passive=\"onTouchstart\"\n                @touchmove.passive=\"onTouchmove\"\n                @touchend.passive=\"onTouchend\"\n                @focusin=\"onFocusin\"\n                @focusout=\"onFocusout\"\n                @keydown=\"onKeydown\">\n                <slot name=\"default\" v-bind=\"slotProps\" />\n            </div>\n        </div>\n\n        <div\n            v-if=\"hasAffix\"\n            key=\"previous\"\n            :class=\"[\n                'ev-slide-group--previous',\n                { 'is-disabled': !hasPrevious },\n                ...arrowsHiddenClasses,\n            ]\"\n            :hidden=\"arrowsHiddenAttribute\"\n            @click=\"() => scrollTo('previous')\">\n            <slot name=\"previous\">\n                <ev-button\n                    :icon=\"isRtl && isHorizontal ? iconNext : iconPrevious\"\n                    variant=\"subtle\" />\n            </slot>\n        </div>\n\n        <div\n            v-if=\"hasAffix\"\n            key=\"next\"\n            :class=\"[\n                'ev-slide-group--next',\n                { 'is-disabled': !hasNext },\n                ...arrowsHiddenClasses,\n            ]\"\n            :hidden=\"arrowsHiddenAttribute\"\n            @click=\"() => scrollTo('next')\">\n            <slot name=\"next\">\n                <ev-button\n                    :icon=\"isRtl && isHorizontal ? iconPrevious : iconNext\"\n                    variant=\"subtle\" />\n            </slot>\n        </div>\n    </component>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,UAAM,QAAQ,SAAS,OAA4B,MAAM,MAAM;AACzD,UAAA,EAAE,MAAM,IAAI,OAAO;AACnB,UAAA,YAAY,WAAW,KAAK;AAC5B,UAAA,gBAAgB,WAAW,KAAK;AAChC,UAAA,eAAe,WAAW,CAAC;AAC3B,UAAA,gBAAgB,WAAW,CAAC;AAC5B,UAAA,cAAc,WAAW,CAAC;AAChC,UAAM,eAAe,SAAS,MAAM,MAAM,cAAc,YAAY;AAC9D,UAAA,oBAAoB,WAAW,KAAK;AAE1C,UAAM,EAAE,WAAW,cAAc,aAAa,cAAA,IAC1C,kBAAkB;AACtB,UAAM,EAAE,WAAW,YAAY,YAAA,IAAgB,kBAAkB;AAE3D,UAAA,qBAAqB,SAAS,MAAM;AACtC,UAAI,CAAC,MAAM,SAAS,MAAM,QAAQ;AACvB,eAAA;AAAA,MAAA;AAEJ,aAAA,MAAM,MAAM,MAAM;AAAA,QACrB,CAAC,SAAS,KAAK,OAAO,MAAM,SAAS,MAAM,CAAC;AAAA,MAChD;AAAA,IAAA,CACH;AAEK,UAAA,oBAAoB,SAAS,MAAM;AACrC,UAAI,CAAC,MAAM,SAAS,MAAM,QAAQ;AACvB,eAAA;AAAA,MAAA;AAEJ,aAAA,MAAM,MAAM,MAAM;AAAA,QACrB,CAAC,SACG,KAAK,OAAO,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,SAAS,CAAC;AAAA,MACxE;AAAA,IAAA,CACH;AAED,QAAI,QAAQ,WAAW;AACnB,UAAI,QAAQ;AACZ;AAAA,QACI,MAAM;AAAA,UACF,MAAM,SAAS;AAAA,UACf,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,aAAa;AAAA,QACjB;AAAA,QACA,MAAM;AACF,+BAAqB,KAAK;AAC1B,kBAAQ,sBAAsB,MAAM;AAC5B,gBAAA,cAAc,SAAS,YAAY,OAAO;AACpC,oBAAA,eAAe,aAAa,QAC5B,UACA;AACQ,4BAAA,QAAQ,cAAc,MAAM,YAAY;AAC1C,0BAAA,QAAQ,YAAY,MAAM,YAAY;AAClD,4BAAc,QACV,cAAc,QAAQ,IAAI,YAAY;AAAA,YAAA;AAG9C,gBAAI,mBAAmB,SAAS,KAAK,WAAW,OAAO;AAEnD,oBAAM,kBAAkB,WAAW,MAAM,SACrC,kBAAkB,KACtB;AAEA,kBACI,mBAAmB,UAAU,KAC7B,CAAC,cAAc,OACjB;AACE,6BAAa,QAAQ;AAAA,cAAA,WACd,MAAM,cAAc;AAC3B,6BAAa,QAAQ,wBAAwB;AAAA,kBACzC;AAAA,kBACA,eAAe,cAAc;AAAA,kBAC7B,aAAa,YAAY;AAAA,kBACzB,OAAO,MAAM;AAAA,kBACb,cAAc,aAAa;AAAA,gBAAA,CAC9B;AAAA,cAAA,WACM,cAAc,OAAO;AAC5B,6BAAa,QAAQ,uBAAuB;AAAA,kBACxC;AAAA,kBACA,eAAe,cAAc;AAAA,kBAC7B,aAAa,YAAY;AAAA,kBACzB,OAAO,MAAM;AAAA,kBACb,qBAAqB,aAAa;AAAA,kBAClC,cAAc,aAAa;AAAA,gBAAA,CAC9B;AAAA,cAAA;AAAA,YACL;AAAA,UACJ,CACH;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAOJ,aAAS,MAAM,UAAmD;;AAC1D,UAAA,CAAC,WAAW,OAAO;AACnB;AAAA,MAAA;AAEJ,UAAI,CAAC,UAAU;AACL,cAAA,YAAY,kBAAkB,WAAW,KAAK;AAC1C,wBAAA,CAAC,MAAD,mBAAI;AAAA,MAAM,WACb,aAAa,QAAQ;AAC5B,cAAM,MAAK,gBAAW,MAAM,cAAc,QAAQ,MAAvC,mBACL;AACN,YAAI,IAAI;AACJ,aAAG,MAAM;AAAA,QAAA,OACN;AACH,gBAAM,OAAO;AAAA,QAAA;AAAA,MACjB,WACO,aAAa,YAAY;AAChC,cAAM,MAAK,gBAAW,MAAM,cAAc,QAAQ,MAAvC,mBACL;AACN,YAAI,IAAI;AACJ,aAAG,MAAM;AAAA,QAAA,OACN;AACH,gBAAM,MAAM;AAAA,QAAA;AAAA,MAChB,WACO,aAAa,SAAS;AAC5B,yBAAW,MAAM,sBAAjB,mBAAoD;AAAA,MAAM,WACpD,aAAa,QAAQ;AAC3B,yBAAW,MAAM,qBAAjB,mBAAmD;AAAA,MAAM;AAAA,IAC9D;AAOJ,aAAS,QAAQ,GAAe;;AAExB,UAAA,CAAC,UAAU,SACX,EACI,EAAE,mBACF,gBAAW,UAAX,mBAAkB,SAAS,EAAE,kBAEnC;AACQ,cAAA;AAAA,MAAA;AAAA,IACV;AAOJ,aAAS,UAAU,GAAe;AAC9B,gBAAU,QAAQ;AAElB,UAAI,CAAC,cAAc,SAAS,CAAC,WAAW,OAAO;AAC3C;AAAA,MAAA;AAKO,iBAAA,MAAM,EAAE,gBAAgB;AACpB,mBAAA,QAAQ,WAAW,MAAM,UAAU;AAC1C,cAAI,SAAS,IAAI;AACb,yBAAa,QAAQ,uBAAuB;AAAA,cACxC,iBAAiB;AAAA,cACjB,eAAe,cAAc;AAAA,cAC7B,aAAa,YAAY;AAAA,cACzB,OAAO,MAAM;AAAA,cACb,qBAAqB,aAAa;AAAA,cAClC,cAAc,aAAa;AAAA,YAAA,CAC9B;AACD;AAAA,UAAA;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAOJ,aAAS,WAAW,GAAe;AAC/B,gBAAU,QAAQ;AAAA,IAAA;AAOtB,aAAS,UAAU,GAAkB;AAC7B,UAAA,CAAC,WAAW,OAAO;AACnB;AAAA,MAAA;AAEJ,UAAI,aAAa,OAAO;AAChB,YAAA,EAAE,QAAQ,cAAc;AAClB,gBAAA,MAAM,QAAQ,aAAa,MAAM;AAAA,QAAA,WAChC,EAAE,QAAQ,aAAa;AACxB,gBAAA,MAAM,QAAQ,SAAS,UAAU;AAAA,QAAA;AAAA,MAC3C,OACG;AACC,YAAA,EAAE,QAAQ,aAAa;AACvB,gBAAM,MAAM;AAAA,QAAA,WACL,EAAE,QAAQ,WAAW;AAC5B,gBAAM,UAAU;AAAA,QAAA;AAAA,MACpB;AAEA,UAAA,EAAE,QAAQ,QAAQ;AAClB,cAAM,OAAO;AAAA,MAAA,WACN,EAAE,QAAQ,OAAO;AACxB,cAAM,MAAM;AAAA,MAAA;AAAA,IAChB;AAMJ,aAAS,WAAW;AACZ,UAAA,CAAC,aAAa,OAAO;AACrB;AAAA,MAAA;AAEJ,mBAAa,MAAM,aAAa,QAAQ,eAAe,WAAW,IAAI;AAAA,IAAA;AAG1E,QAAI,aAAa;AACjB,QAAI,cAAc;AAMlB,aAAS,aAAa,GAAe;AAC3B,YAAA,eAAe,aAAa,QAAQ,YAAY;AACtD,YAAM,OAAO,MAAM,SAAS,aAAa,QAAQ,KAAK;AACtD,oBAAc,OAAO,aAAa;AAClC,mBAAa,EAAE,QAAQ,CAAC,EAAE,YAAY;AACtC,wBAAkB,QAAQ;AAAA,IAAA;AAO9B,aAAS,YAAY,GAAe;AAC5B,UAAA,CAAC,cAAc,OAAO;AACtB;AAAA,MAAA;AAEE,YAAA,eAAe,aAAa,QAAQ,YAAY;AACtD,YAAM,OAAO,MAAM,SAAS,aAAa,QAAQ,KAAK;AACzC,mBAAA,QACT,QAAQ,cAAc,aAAa,EAAE,QAAQ,CAAC,EAAE,YAAY;AAAA,IAAA;AAOpE,aAAS,WAAW,GAAe;AACzB,YAAA,kBAAkB,YAAY,QAAQ,cAAc;AAC1D,UAAI,aAAa,QAAQ,KAAK,CAAC,cAAc,OAAO;AAChD,qBAAa,QAAQ;AAAA,MAAA,WACd,aAAa,SAAS,iBAAiB;AAC9C,qBAAa,QAAQ;AAAA,MAAA;AAEzB,wBAAkB,QAAQ;AAAA,IAAA;AAO9B,aAAS,SAAS,UAA+B;AAC7C,YAAM,oBACF,aAAa,SACZ,aAAa,aAAa,KAAK,KAAK,cAAc;AACvD,mBAAa,QAAQ;AAAA,QACjB;AAAA,QACA;AAAA,QACA,YAAY,QAAQ,cAAc;AAAA,MACtC;AAAA,IAAA;AAMJ,UAAM,sBAAsB;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AACM,UAAA,wBAAwB,SAAS,MAAM;AACzC,aAAO,UAAU,MAAM,YAAY,KAAK,MAAM;AAAA,IAAA,CACjD;AAEK,UAAA,gBAAgB,SAAS,MAAM;AAE7B,UAAA,eACA,aAAa,QAAQ,YAAY,QAAQ,cAAc,QACjD,EAAE,YAAY,QAAQ,cAAc,SACpC,KAAK,YAAY,QAAQ,cAAc,QAAQ,aAAa,KAAK,IACjE,CAAC,aAAa;AAGpB,UAAA,aAAa,SAAS,GAAG;AACV,uBAAA,KAAK,CAAC,aAAa,KAAK;AAAA,MAAA;AAG3C,YAAM,OAAO,MAAM,SAAS,aAAa,QAAQ,KAAK;AAC/C,aAAA;AAAA,QACH,WAAW,YAAY,aAAa,QAAQ,MAAM,GAAG,IAAI,OAAO,YAAY;AAAA,QAC5E,YAAY,kBAAkB,QAAQ,SAAS;AAAA,QAC/C,YAAY,kBAAkB,QAAQ,cAAc;AAAA,MACxD;AAAA,IAAA,CACH;AAEK,UAAA,YAAY,SAAS,OAAO;AAAA,MAC9B,MAAM,MAAM;AAAA,MACZ,UAAU,MAAM;AAAA,MAChB,QAAQ,MAAM;AAAA,MACd,YAAY,MAAM;AAAA,IAAA,EACpB;AAEI,UAAA,cAAc,SAAS,MAAM;AAC/B,aAAO,KAAK,IAAI,aAAa,KAAK,IAAI;AAAA,IAAA,CACzC;AAEK,UAAA,UAAU,SAAS,MAAM;AAE3B,aACI,YAAY,QAAQ,KAAK,IAAI,aAAa,KAAK,IAAI,cAAc;AAAA,IAAA,CAExE;AAEK,UAAA,WAAW,SAAS,MAAM;AAC5B,UAAI,UAAU,MAAM,YAAY,KAAK,MAAM,cAAc;AAC9C,eAAA;AAAA,MAAA;AAEX,aAAO,cAAc,SAAS,KAAK,IAAI,aAAa,KAAK,IAAI;AAAA,IAAA,CAChE;AAEK,UAAA,mBAAmB,SAAS,MAAM;AAC7B,aAAA,aAAa,MAAM,WAAW;AAAA,IAAA,CACxC;AAEK,UAAA,WAAW,SAAS,MAAM;AAC5B,UAAI,MAAM,UAAU;AAChB,eAAO,MAAM;AAAA,MAAA;AAEV,aAAA,aAAa,QAAQ,mBAAmB;AAAA,IAAA,CAClD;AAEK,UAAA,eAAe,SAAS,MAAM;AAChC,UAAI,MAAM,cAAc;AACpB,eAAO,MAAM;AAAA,MAAA;AAEV,aAAA,aAAa,QAAQ,kBAAkB;AAAA,IAAA,CACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/EvSlideGroup/EvSlideGroup.vue2.mjs

@@ -0,0 +1,6 @@
+/*! Evance UI v1.1.9 | MIT License */
+import _sfc_main from "./EvSlideGroup.vue.mjs";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=EvSlideGroup.vue2.mjs.map

package/dist/esm/components/EvSlideGroup/EvSlideGroupItem.vue.mjs

@@ -0,0 +1,33 @@
+/*! Evance UI v1.1.9 | MIT License */
+import { defineComponent, computed, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { makeGroupItemProps, useGroupItem } from "../../composables/groupItem.mjs";
+import { EvSlideGroupSymbol } from "./EvSlideGroup.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EvSlideGroupItem",
+  props: {
+    ...makeGroupItemProps()
+  },
+  emits: ["group:selected"],
+  setup(__props) {
+    const props = __props;
+    const slideGroupItem = useGroupItem(
+      props,
+      EvSlideGroupSymbol
+    );
+    const slotProps = computed(() => {
+      return {
+        isSelected: slideGroupItem.isSelected.value,
+        select: slideGroupItem.select,
+        toggle: slideGroupItem.toggle,
+        selectedClass: slideGroupItem.selectedClass.value
+      };
+    });
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=EvSlideGroupItem.vue.mjs.map

package/dist/esm/components/EvSlideGroup/EvSlideGroupItem.vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvSlideGroupItem.vue.mjs","sources":["../../../../src/components/EvSlideGroup/EvSlideGroupItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n    GroupItemProps,\n    GroupItemProvide,\n    makeGroupItemProps,\n    useGroupItem,\n} from \"@/composables/groupItem.ts\";\nimport { computed, UnwrapRef } from \"vue\";\nimport { EvSlideGroupSymbol } from \"./EvSlideGroup\";\n\ntype EvSlideGroupItemSlots = {\n    default: {\n        isSelected: UnwrapRef<GroupItemProvide[\"isSelected\"]>;\n        select: GroupItemProvide[\"select\"];\n        toggle: GroupItemProvide[\"toggle\"];\n        selectedClass: UnwrapRef<GroupItemProvide[\"selectedClass\"]>;\n    };\n};\n\ndefineEmits([\"group:selected\"]);\n\ndefineSlots<EvSlideGroupItemSlots>();\n\nconst props = defineProps({\n    ...makeGroupItemProps(),\n});\nconst slideGroupItem = useGroupItem(\n    props as any as GroupItemProps,\n    EvSlideGroupSymbol,\n);\nconst slotProps = computed(() => {\n    return {\n        isSelected: slideGroupItem!.isSelected.value,\n        select: slideGroupItem!.select,\n        toggle: slideGroupItem!.toggle,\n        selectedClass: slideGroupItem!.selectedClass.value,\n    };\n});\n</script>\n\n<template>\n    <slot v-bind=\"slotProps\" />\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AA0BA,UAAM,iBAAiB;AAAA,MACnB;AAAA,MACA;AAAA,IACJ;AACM,UAAA,YAAY,SAAS,MAAM;AACtB,aAAA;AAAA,QACH,YAAY,eAAgB,WAAW;AAAA,QACvC,QAAQ,eAAgB;AAAA,QACxB,QAAQ,eAAgB;AAAA,QACxB,eAAe,eAAgB,cAAc;AAAA,MACjD;AAAA,IAAA,CACH;;;;;;"}

package/dist/esm/components/EvSlideGroup/EvSlideGroupItem.vue2.mjs

@@ -0,0 +1,6 @@
+/*! Evance UI v1.1.9 | MIT License */
+import _sfc_main from "./EvSlideGroupItem.vue.mjs";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=EvSlideGroupItem.vue2.mjs.map

package/dist/esm/components/EvSlideGroup/helpers.mjs

@@ -0,0 +1,51 @@
+/*! Evance UI v1.1.9 | MIT License */
+function bias(val) {
+  const c = 0.501;
+  const x = Math.abs(val);
+  return Math.sign(val) * (x / ((1 / c - 2) * (1 - x) + 1));
+}
+function calculateUpdatedOffset({
+  selectedElement,
+  containerSize,
+  contentSize,
+  isRtl,
+  currentScrollOffset,
+  isHorizontal
+}) {
+  const clientSize = isHorizontal ? selectedElement.clientWidth : selectedElement.clientHeight;
+  const offsetStart = isHorizontal ? selectedElement.offsetLeft : selectedElement.offsetTop;
+  const adjustedOffsetStart = isRtl && isHorizontal ? contentSize - offsetStart - clientSize : offsetStart;
+  const totalSize = containerSize + currentScrollOffset;
+  const itemOffset = clientSize + adjustedOffsetStart;
+  const additionalOffset = clientSize * 0.4;
+  if (adjustedOffsetStart <= currentScrollOffset) {
+    currentScrollOffset = Math.max(
+      adjustedOffsetStart - additionalOffset,
+      0
+    );
+  } else if (totalSize <= itemOffset) {
+    currentScrollOffset = Math.min(
+      currentScrollOffset - (totalSize - itemOffset - additionalOffset),
+      contentSize - containerSize
+    );
+  }
+  return currentScrollOffset;
+}
+function calculateCenteredOffset({
+  selectedElement,
+  containerSize,
+  contentSize,
+  isRtl,
+  isHorizontal
+}) {
+  const clientSize = isHorizontal ? selectedElement.clientWidth : selectedElement.clientHeight;
+  const offsetStart = isHorizontal ? selectedElement.offsetLeft : selectedElement.offsetTop;
+  const offsetCentered = isRtl && isHorizontal ? contentSize - offsetStart - clientSize / 2 - containerSize / 2 : offsetStart + clientSize / 2 - containerSize / 2;
+  return Math.min(contentSize - containerSize, Math.max(0, offsetCentered));
+}
+export {
+  bias,
+  calculateCenteredOffset,
+  calculateUpdatedOffset
+};
+//# sourceMappingURL=helpers.mjs.map

package/dist/esm/components/EvSlideGroup/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.mjs","sources":["../../../../src/components/EvSlideGroup/helpers.ts"],"sourcesContent":["/**\n * # bias\n *\n * @param val\n */\nexport function bias(val: number) {\n    const c = 0.501;\n    const x = Math.abs(val);\n    return Math.sign(val) * (x / ((1 / c - 2) * (1 - x) + 1));\n}\n\n/**\n * # calculateUpdatedOffset\n *\n * @param selectedElement\n * @param containerSize\n * @param contentSize\n * @param isRtl\n * @param currentScrollOffset\n * @param isHorizontal\n */\nexport function calculateUpdatedOffset({\n    selectedElement,\n    containerSize,\n    contentSize,\n    isRtl,\n    currentScrollOffset,\n    isHorizontal,\n}: {\n    selectedElement: HTMLElement;\n    containerSize: number;\n    contentSize: number;\n    isRtl: boolean;\n    currentScrollOffset: number;\n    isHorizontal: boolean;\n}): number {\n    const clientSize = isHorizontal\n        ? selectedElement.clientWidth\n        : selectedElement.clientHeight;\n    const offsetStart = isHorizontal\n        ? selectedElement.offsetLeft\n        : selectedElement.offsetTop;\n    const adjustedOffsetStart =\n        isRtl && isHorizontal\n            ? contentSize - offsetStart - clientSize\n            : offsetStart;\n\n    const totalSize = containerSize + currentScrollOffset;\n    const itemOffset = clientSize + adjustedOffsetStart;\n    const additionalOffset = clientSize * 0.4; // @todo: why 0.4?\n\n    if (adjustedOffsetStart <= currentScrollOffset) {\n        currentScrollOffset = Math.max(\n            adjustedOffsetStart - additionalOffset,\n            0,\n        );\n    } else if (totalSize <= itemOffset) {\n        currentScrollOffset = Math.min(\n            currentScrollOffset - (totalSize - itemOffset - additionalOffset),\n            contentSize - containerSize,\n        );\n    }\n\n    return currentScrollOffset;\n}\n\n/**\n * # calculateCenteredOffset\n *\n * @param selectedElement\n * @param containerSize\n * @param contentSize\n * @param isRtl\n * @param isHorizontal\n */\nexport function calculateCenteredOffset({\n    selectedElement,\n    containerSize,\n    contentSize,\n    isRtl,\n    isHorizontal,\n}: {\n    selectedElement: HTMLElement;\n    containerSize: number;\n    contentSize: number;\n    isRtl: boolean;\n    isHorizontal: boolean;\n}): number {\n    const clientSize = isHorizontal\n        ? selectedElement.clientWidth\n        : selectedElement.clientHeight;\n    const offsetStart = isHorizontal\n        ? selectedElement.offsetLeft\n        : selectedElement.offsetTop;\n\n    const offsetCentered =\n        isRtl && isHorizontal\n            ? contentSize - offsetStart - clientSize / 2 - containerSize / 2\n            : offsetStart + clientSize / 2 - containerSize / 2;\n\n    return Math.min(contentSize - containerSize, Math.max(0, offsetCentered));\n}\n"],"names":[],"mappings":";AAKO,SAAS,KAAK,KAAa;AAC9B,QAAM,IAAI;AACJ,QAAA,IAAI,KAAK,IAAI,GAAG;AACf,SAAA,KAAK,KAAK,GAAG,KAAK,MAAM,IAAI,IAAI,MAAM,IAAI,KAAK;AAC1D;AAYO,SAAS,uBAAuB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAOW;AACP,QAAM,aAAa,eACb,gBAAgB,cAChB,gBAAgB;AACtB,QAAM,cAAc,eACd,gBAAgB,aAChB,gBAAgB;AACtB,QAAM,sBACF,SAAS,eACH,cAAc,cAAc,aAC5B;AAEV,QAAM,YAAY,gBAAgB;AAClC,QAAM,aAAa,aAAa;AAChC,QAAM,mBAAmB,aAAa;AAEtC,MAAI,uBAAuB,qBAAqB;AAC5C,0BAAsB,KAAK;AAAA,MACvB,sBAAsB;AAAA,MACtB;AAAA,IACJ;AAAA,EAAA,WACO,aAAa,YAAY;AAChC,0BAAsB,KAAK;AAAA,MACvB,uBAAuB,YAAY,aAAa;AAAA,MAChD,cAAc;AAAA,IAClB;AAAA,EAAA;AAGG,SAAA;AACX;AAWO,SAAS,wBAAwB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAMW;AACP,QAAM,aAAa,eACb,gBAAgB,cAChB,gBAAgB;AACtB,QAAM,cAAc,eACd,gBAAgB,aAChB,gBAAgB;AAEtB,QAAM,iBACF,SAAS,eACH,cAAc,cAAc,aAAa,IAAI,gBAAgB,IAC7D,cAAc,aAAa,IAAI,gBAAgB;AAElD,SAAA,KAAK,IAAI,cAAc,eAAe,KAAK,IAAI,GAAG,cAAc,CAAC;AAC5E;"}

package/dist/esm/components/EvSurface/EvSurface.mjs

@@ -0,0 +1,36 @@
+/*! Evance UI v1.1.9 | MIT License */
+import { makeDimensionsProps } from "../../composables/dimensions.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeComponentProps } from "../../composables/component.mjs";
+import { propsFactory } from "../../util/props.mjs";
+import { makeClassName } from "../../util/modifiers.mjs";
+function makeElevationClass(elevation) {
+  return makeClassName(elevation, "elevation");
+}
+const makeEvSurfaceProps = propsFactory(
+  {
+    elevation: {
+      type: String,
+      default: "default"
+    },
+    // Rounded
+    rounded: {
+      type: [String, Number, Boolean],
+      default: void 0
+    },
+    // Scrollable
+    scrollable: {
+      type: [String, Boolean],
+      default: void 0
+    },
+    ...makeComponentProps(),
+    ...makeDimensionsProps(),
+    ...makeTagProps()
+  },
+  "EvSurface"
+);
+export {
+  makeElevationClass,
+  makeEvSurfaceProps
+};
+//# sourceMappingURL=EvSurface.mjs.map

package/dist/esm/components/EvSurface/EvSurface.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvSurface.mjs","sources":["../../../../src/components/EvSurface/EvSurface.ts"],"sourcesContent":["import { makeClassName, propsFactory } from \"@/util\";\nimport { makeDimensionsProps } from \"@/composables/dimensions\";\nimport { PropType } from \"vue\";\nimport { makeTagProps } from \"@/composables/tag\";\nimport { makeComponentProps } from \"@/composables/component\";\n\n/**\n * # Surface Elevation\n *\n * Elevations are the layered surfaces that form the foundation of the UI.\n * They create a blank canvas containing other UI components.\n * Such as text, icons, backgrounds, and borders.\n *\n */\nexport type SurfaceElevation = \"default\" | \"panel\" | \"overlay\" | \"sunken\";\n\n/**\n * # Make Elevation Class\n */\nexport function makeElevationClass(elevation: string) {\n    return makeClassName(elevation, \"elevation\");\n}\n\n/**\n * # Make Surface Props\n */\nexport const makeEvSurfaceProps = propsFactory(\n    {\n        elevation: {\n            type: String as PropType<SurfaceElevation>,\n            default: \"default\",\n        },\n        // Rounded\n        rounded: {\n            type: [String, Number, Boolean],\n            default: undefined,\n        },\n        // Scrollable\n        scrollable: {\n            type: [String, Boolean],\n            default: undefined,\n        },\n        ...makeComponentProps(),\n        ...makeDimensionsProps(),\n        ...makeTagProps(),\n    },\n    \"EvSurface\",\n);\n"],"names":[],"mappings":";;;;;;AAmBO,SAAS,mBAAmB,WAAmB;AAC3C,SAAA,cAAc,WAAW,WAAW;AAC/C;AAKO,MAAM,qBAAqB;AAAA,EAC9B;AAAA,IACI,WAAW;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACb;AAAA;AAAA,IAEA,SAAS;AAAA,MACL,MAAM,CAAC,QAAQ,QAAQ,OAAO;AAAA,MAC9B,SAAS;AAAA,IACb;AAAA;AAAA,IAEA,YAAY;AAAA,MACR,MAAM,CAAC,QAAQ,OAAO;AAAA,MACtB,SAAS;AAAA,IACb;AAAA,IACA,GAAG,mBAAmB;AAAA,IACtB,GAAG,oBAAoB;AAAA,IACvB,GAAG,aAAa;AAAA,EACpB;AAAA,EACA;AACJ;"}

package/dist/esm/components/EvSurface/EvSurface.vue.mjs

@@ -0,0 +1,66 @@
+/*! Evance UI v1.1.9 | MIT License */
+import { defineComponent, createBlock, openBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, unref, withCtx, renderSlot } from "vue";
+/* empty css                */
+import { makeEvSurfaceProps, makeElevationClass } from "./EvSurface.mjs";
+import { useDimensions } from "../../composables/dimensions.mjs";
+import { isEmpty, isString } from "../../util/is-functions.mjs";
+import { makeClassName } from "../../util/modifiers.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EvSurface",
+  props: {
+    ...makeEvSurfaceProps()
+  },
+  setup(__props) {
+    const props = __props;
+    const dimensions = useDimensions(props);
+    function makeRoundedClass(rounded) {
+      if (!rounded || isEmpty(rounded)) {
+        return void 0;
+      }
+      if (rounded === true) {
+        return "is-rounded";
+      }
+      if (!isString(rounded)) {
+        return void 0;
+      }
+      return makeClassName(rounded, "is-rounded");
+    }
+    function makeScrollableClass(scrollable) {
+      if (typeof scrollable === "undefined") {
+        return void 0;
+      }
+      if (scrollable === false) {
+        return "is-overflow-hidden";
+      }
+      switch (scrollable) {
+        case "x":
+          return "is-scrollable-x";
+        case "y":
+          return "is-scrollable-y";
+        default:
+          return "is-scrollable";
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(props.tag), {
+        class: normalizeClass([
+          "ev-surface",
+          unref(makeElevationClass)(props.elevation),
+          makeRoundedClass(props.rounded),
+          makeScrollableClass(props.scrollable),
+          props.class
+        ]),
+        style: normalizeStyle([unref(dimensions), props.style])
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=EvSurface.vue.mjs.map

package/dist/esm/components/EvSurface/EvSurface.vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvSurface.vue.mjs","sources":["../../../../src/components/EvSurface/EvSurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"./EvSurface.scss\";\nimport { makeElevationClass, makeEvSurfaceProps } from \"./EvSurface\";\nimport { isEmpty, isString, makeClassName } from \"@/util\";\nimport { useDimensions } from \"@/composables/dimensions\";\n\nconst props = defineProps({\n    ...makeEvSurfaceProps(),\n});\nconst dimensions = useDimensions(props);\n\n/**\n * @todo: this probably belongs in its own composable, if we expand on it or make it generic.\n *\n * @param rounded\n */\nfunction makeRoundedClass(rounded?: string | number | boolean) {\n    if (!rounded || isEmpty(rounded)) {\n        return undefined;\n    }\n    if (rounded === true) {\n        return \"is-rounded\";\n    }\n    if (!isString(rounded)) {\n        return undefined;\n    }\n    return makeClassName(rounded, \"is-rounded\");\n}\n\n/**\n * # Make Scrollable Class\n * @param scrollable\n */\nfunction makeScrollableClass(scrollable?: string | boolean) {\n    if (typeof scrollable === \"undefined\") {\n        return undefined;\n    }\n    if (scrollable === false) {\n        return \"is-overflow-hidden\";\n    }\n    switch (scrollable) {\n        case \"x\":\n            return \"is-scrollable-x\";\n        case \"y\":\n            return \"is-scrollable-y\";\n        default:\n            return \"is-scrollable\";\n    }\n}\n</script>\n\n<template>\n    <component\n        :is=\"props.tag\"\n        :class=\"[\n            'ev-surface',\n            makeElevationClass(props.elevation),\n            makeRoundedClass(props.rounded),\n            makeScrollableClass(props.scrollable),\n            props.class,\n        ]\"\n        :style=\"[dimensions, props.style]\">\n        <slot />\n    </component>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASM,UAAA,aAAa,cAAc,KAAK;AAOtC,aAAS,iBAAiB,SAAqC;AAC3D,UAAI,CAAC,WAAW,QAAQ,OAAO,GAAG;AACvB,eAAA;AAAA,MAAA;AAEX,UAAI,YAAY,MAAM;AACX,eAAA;AAAA,MAAA;AAEP,UAAA,CAAC,SAAS,OAAO,GAAG;AACb,eAAA;AAAA,MAAA;AAEJ,aAAA,cAAc,SAAS,YAAY;AAAA,IAAA;AAO9C,aAAS,oBAAoB,YAA+B;AACpD,UAAA,OAAO,eAAe,aAAa;AAC5B,eAAA;AAAA,MAAA;AAEX,UAAI,eAAe,OAAO;AACf,eAAA;AAAA,MAAA;AAEX,cAAQ,YAAY;AAAA,QAChB,KAAK;AACM,iBAAA;AAAA,QACX,KAAK;AACM,iBAAA;AAAA,QACX;AACW,iBAAA;AAAA,MAAA;AAAA,IACf;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/EvSurface/EvSurface.vue2.mjs

@@ -0,0 +1,6 @@
+/*! Evance UI v1.1.9 | MIT License */
+import _sfc_main from "./EvSurface.vue.mjs";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=EvSurface.vue2.mjs.map