@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/chunk-OXIODAJS.js

@@ -0,0 +1,192 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/ScrollSpy.ts
+
+
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var getWindowContainer = () => window;
+var ScrollSpy = _vue.defineComponent.call(void 0, {
+  name: "TigerScrollSpy",
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    activeKey: {
+      type: [String, Number],
+      default: void 0
+    },
+    defaultActiveKey: {
+      type: [String, Number],
+      default: void 0
+    },
+    offsetTop: {
+      type: Number,
+      default: 0
+    },
+    targetOffset: {
+      type: Number,
+      default: void 0
+    },
+    bounds: {
+      type: Number,
+      default: 5
+    },
+    direction: {
+      type: String,
+      default: "vertical"
+    },
+    sticky: {
+      type: Boolean,
+      default: false
+    },
+    ariaLabel: {
+      type: String,
+      default: "Scroll navigation"
+    },
+    getContainer: {
+      type: Function,
+      default: getWindowContainer
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:activeKey", "change", "click"],
+  setup(props, { attrs, emit }) {
+    const innerActiveKey = _vue.ref.call(void 0, 
+      _tigercatcore.getInitialScrollSpyActiveKey.call(void 0, props.items, props.activeKey, props.defaultActiveKey)
+    );
+    const isControlled = _vue.computed.call(void 0, () => props.activeKey !== void 0);
+    const currentActiveKey = _vue.computed.call(void 0, 
+      () => isControlled.value ? props.activeKey : innerActiveKey.value
+    );
+    const activeKeyString = _vue.computed.call(void 0, 
+      () => currentActiveKey.value === void 0 ? "" : _tigercatcore.getScrollSpyKeyString.call(void 0, currentActiveKey.value)
+    );
+    const flatItems = _vue.computed.call(void 0, () => _tigercatcore.flattenScrollSpyItems.call(void 0, props.items));
+    let stopObserver = null;
+    const emitActive = (item, source) => {
+      const nextKeyString = _tigercatcore.getScrollSpyKeyString.call(void 0, item.key);
+      if (nextKeyString === activeKeyString.value) return;
+      const payload = _tigercatcore.createScrollSpyPayload.call(void 0, item, source);
+      if (!isControlled.value) innerActiveKey.value = item.key;
+      emit("update:activeKey", item.key);
+      emit("change", item.key, item, payload);
+    };
+    const setupObserver = () => {
+      _optionalChain([stopObserver, 'optionalCall', _ => _()]);
+      stopObserver = _tigercatcore.createScrollSpyObserver.call(void 0, props.items, {
+        container: props.getContainer(),
+        offsetTop: props.offsetTop,
+        targetOffset: props.targetOffset,
+        bounds: props.bounds,
+        onChange: (item) => emitActive(item, "scroll")
+      });
+    };
+    const handleClick = (item, event) => {
+      event.preventDefault();
+      if (item.disabled) return;
+      emit("click", item, event);
+      emitActive(item, "click");
+      _tigercatcore.scrollToScrollSpyItem.call(void 0, item, props.getContainer(), _nullishCoalesce(props.targetOffset, () => ( props.offsetTop)));
+    };
+    _vue.onMounted.call(void 0, () => {
+      _vue.nextTick.call(void 0, () => setupObserver());
+    });
+    _vue.watch.call(void 0, 
+      () => [props.items, props.offsetTop, props.targetOffset, props.bounds, props.getContainer],
+      () => _vue.nextTick.call(void 0, () => setupObserver())
+    );
+    _vue.watch.call(void 0, 
+      () => [props.items, props.defaultActiveKey],
+      () => {
+        if (isControlled.value) return;
+        const currentItem = _tigercatcore.getScrollSpyItemByKey.call(void 0, props.items, innerActiveKey.value);
+        if (!currentItem || currentItem.disabled) {
+          innerActiveKey.value = _tigercatcore.getInitialScrollSpyActiveKey.call(void 0, 
+            props.items,
+            void 0,
+            props.defaultActiveKey
+          );
+        }
+      }
+    );
+    _vue.onBeforeUnmount.call(void 0, () => {
+      _optionalChain([stopObserver, 'optionalCall', _2 => _2()]);
+    });
+    const renderItems = (items, nested = false) => _vue.h.call(void 0, 
+      "ul",
+      { class: nested ? _tigercatcore.scrollSpyNestedListClasses : _tigercatcore.getScrollSpyListClasses.call(void 0, props.direction) },
+      items.map((item) => {
+        const keyString = _tigercatcore.getScrollSpyKeyString.call(void 0, item.key);
+        const isActive = keyString === activeKeyString.value;
+        const depth = _nullishCoalesce(_optionalChain([flatItems, 'access', _3 => _3.value, 'access', _4 => _4.find, 'call', _5 => _5((flat) => flat.key === item.key), 'optionalAccess', _6 => _6.depth]), () => ( 0));
+        return _vue.h.call(void 0, "li", { key: keyString, "data-depth": depth }, [
+          _vue.h.call(void 0, 
+            "a",
+            {
+              href: item.href,
+              class: _tigercatcore.getScrollSpyItemClasses.call(void 0, isActive, item.disabled),
+              "aria-current": isActive ? "location" : void 0,
+              "aria-disabled": item.disabled || void 0,
+              "data-key": keyString,
+              onClick: (event) => handleClick(item, event)
+            },
+            item.label
+          ),
+          _optionalChain([item, 'access', _7 => _7.children, 'optionalAccess', _8 => _8.length]) ? renderItems(item.children, true) : null
+        ]);
+      })
+    );
+    return () => {
+      const attrsRecord = attrs;
+      return _vue.h.call(void 0, 
+        "nav",
+        {
+          ...attrs,
+          class: _tigercatcore.classNames.call(void 0, 
+            _tigercatcore.getScrollSpyRootClasses.call(void 0, props.sticky, props.className),
+            _tigercatcore.coerceClassValue.call(void 0, attrsRecord.class)
+          ),
+          style: _tigercatcore.mergeStyleValues.call(void 0, attrsRecord.style, props.style),
+          "aria-label": props.ariaLabel
+        },
+        renderItems(props.items)
+      );
+    };
+  }
+});
+var ScrollSpy_default = ScrollSpy;
+
+
+
+
+exports.ScrollSpy = ScrollSpy; exports.ScrollSpy_default = ScrollSpy_default;

package/dist/{chunk-4Y2SJZB5.js → chunk-P7RXZVLT.js}

@@ -1,27 +1,49 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/AutoComplete.ts
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/AutoComplete.ts
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
 var autoCompleteInstanceId = 0;
-var ClearIcon = vue.h(
+var ClearIcon = _vue.h.call(void 0, 
   "svg",
   {
     class: "w-4 h-4",
-    viewBox: tigercatCore.icon20ViewBox,
+    viewBox: _tigercatcore.icon20ViewBox,
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   },
   [
-    vue.h("path", {
-      d: tigercatCore.closeSolidIcon20PathD,
+    _vue.h.call(void 0, "path", {
+      d: _tigercatcore.closeSolidIcon20PathD,
       "fill-rule": "evenodd",
       "clip-rule": "evenodd"
     })
   ]
 );
-var AutoComplete = vue.defineComponent({
+var AutoComplete = _vue.defineComponent.call(void 0, {
   name: "TigerAutoComplete",
   props: {
     modelValue: {
@@ -69,29 +91,30 @@ var AutoComplete = vue.defineComponent({
   setup(props, { emit, attrs }) {
     const instanceId = ++autoCompleteInstanceId;
     const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
-    const isOpen = vue.ref(false);
-    const inputValue = vue.ref(String(props.modelValue ?? ""));
-    const activeIndex = vue.ref(-1);
-    const containerRef = vue.ref(null);
-    const inputRef = vue.ref(null);
-    const filteredOptions = vue.computed(
-      () => tigercatCore.filterAutoCompleteOptions(props.options, inputValue.value, props.filterOption)
+    const isOpen = _vue.ref.call(void 0, false);
+    const inputValue = _vue.ref.call(void 0, String(_nullishCoalesce(props.modelValue, () => ( ""))));
+    const activeIndex = _vue.ref.call(void 0, -1);
+    const containerRef = _vue.ref.call(void 0, null);
+    const inputRef = _vue.ref.call(void 0, null);
+    const filteredOptions = _vue.computed.call(void 0, 
+      () => _tigercatcore.filterAutoCompleteOptions.call(void 0, props.options, inputValue.value, props.filterOption)
     );
-    const showClearButton = vue.computed(
+    const showClearButton = _vue.computed.call(void 0, 
       () => props.clearable && !props.disabled && inputValue.value !== ""
     );
-    vue.watch(
+    _vue.watch.call(void 0, 
       () => props.modelValue,
       (val) => {
-        inputValue.value = String(val ?? "");
+        inputValue.value = String(_nullishCoalesce(val, () => ( "")));
       }
     );
     function openDropdown() {
       if (props.disabled) return;
       isOpen.value = true;
-      if (props.defaultActiveFirstOption && filteredOptions.value.length > 0) {
-        activeIndex.value = 0;
-      }
+      activeIndex.value = _tigercatcore.getInitialPickerActiveIndex.call(void 0, 
+        filteredOptions.value,
+        props.defaultActiveFirstOption
+      );
     }
     function closeDropdown() {
       isOpen.value = false;
@@ -105,7 +128,7 @@ var AutoComplete = vue.defineComponent({
       emit("change", val);
       if (!isOpen.value) openDropdown();
       if (props.defaultActiveFirstOption) {
-        activeIndex.value = filteredOptions.value.length > 0 ? 0 : -1;
+        activeIndex.value = _tigercatcore.getInitialPickerActiveIndex.call(void 0, filteredOptions.value, true);
       }
     }
     function handleSelect(option) {
@@ -121,7 +144,7 @@ var AutoComplete = vue.defineComponent({
       inputValue.value = "";
       emit("update:modelValue", "");
       emit("change", "");
-      vue.nextTick(() => inputRef.value?.focus());
+      _vue.nextTick.call(void 0, () => _optionalChain([inputRef, 'access', _ => _.value, 'optionalAccess', _2 => _2.focus, 'call', _3 => _3()]));
     }
     function handleKeyDown(e) {
       if (!isOpen.value) {
@@ -134,20 +157,11 @@ var AutoComplete = vue.defineComponent({
       const options = filteredOptions.value;
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault();
-          if (options.length > 0) {
-            let next = activeIndex.value + 1;
-            while (next < options.length && options[next].disabled) next++;
-            if (next < options.length) activeIndex.value = next;
-          }
-          break;
         case "ArrowUp":
+        case "Home":
+        case "End":
           e.preventDefault();
-          if (options.length > 0) {
-            let prev = activeIndex.value - 1;
-            while (prev >= 0 && options[prev].disabled) prev--;
-            if (prev >= 0) activeIndex.value = prev;
-          }
+          activeIndex.value = _tigercatcore.getPickerNavigationIndex.call(void 0, options, activeIndex.value, e.key);
           break;
         case "Enter":
           e.preventDefault();
@@ -166,20 +180,20 @@ var AutoComplete = vue.defineComponent({
         closeDropdown();
       }
     }
-    vue.watch(isOpen, (val) => {
+    _vue.watch.call(void 0, isOpen, (val) => {
       if (val) {
         document.addEventListener("click", handleClickOutside);
       } else {
         document.removeEventListener("click", handleClickOutside);
       }
     });
-    vue.onBeforeUnmount(() => {
+    _vue.onBeforeUnmount.call(void 0, () => {
       document.removeEventListener("click", handleClickOutside);
     });
     return () => {
-      const containerClasses = tigercatCore.classNames(tigercatCore.autoCompleteBaseClasses, tigercatCore.coerceClassValue(attrs.class));
+      const containerClasses = _tigercatcore.classNames.call(void 0, _tigercatcore.autoCompleteBaseClasses, _tigercatcore.coerceClassValue.call(void 0, attrs.class));
       const options = filteredOptions.value;
-      return vue.h(
+      return _vue.h.call(void 0, 
         "div",
         {
           ref: containerRef,
@@ -187,25 +201,25 @@ var AutoComplete = vue.defineComponent({
         },
         [
           // Input
-          vue.h("input", {
+          _vue.h.call(void 0, "input", {
             ref: inputRef,
             type: "text",
-            class: tigercatCore.getAutoCompleteInputClasses(props.size, props.disabled, isOpen.value),
+            class: _tigercatcore.getAutoCompleteInputClasses.call(void 0, props.size, props.disabled, isOpen.value),
             value: inputValue.value,
             placeholder: props.placeholder,
             disabled: props.disabled,
-            role: "combobox",
-            "aria-expanded": String(isOpen.value),
-            "aria-haspopup": "listbox",
-            "aria-controls": isOpen.value ? listboxId : void 0,
-            "aria-activedescendant": isOpen.value && activeIndex.value >= 0 ? `${listboxId}-option-${activeIndex.value}` : void 0,
+            ..._tigercatcore.getPickerComboboxAria.call(void 0, {
+              expanded: isOpen.value,
+              listboxId,
+              activeIndex: activeIndex.value
+            }),
             autocomplete: "off",
             onInput: handleInput,
             onFocus: openDropdown,
             onKeydown: handleKeyDown
           }),
           // Clear button
-          showClearButton.value ? vue.h(
+          showClearButton.value ? _vue.h.call(void 0, 
             "button",
             {
               type: "button",
@@ -216,22 +230,22 @@ var AutoComplete = vue.defineComponent({
             [ClearIcon]
           ) : null,
           // Dropdown
-          isOpen.value && options.length > 0 ? vue.h(
+          isOpen.value && options.length > 0 ? _vue.h.call(void 0, 
             "div",
             {
-              id: listboxId,
-              role: "listbox",
-              class: tigercatCore.autoCompleteDropdownClasses
+              ..._tigercatcore.getPickerListboxAria.call(void 0, { id: listboxId }),
+              class: _tigercatcore.autoCompleteDropdownClasses
             },
             options.map(
-              (option, index) => vue.h(
+              (option, index) => _vue.h.call(void 0, 
                 "div",
                 {
-                  id: `${listboxId}-option-${index}`,
-                  role: "option",
-                  "aria-selected": String(option.value) === String(props.modelValue),
-                  "aria-disabled": option.disabled,
-                  class: tigercatCore.getAutoCompleteOptionClasses(
+                  id: _tigercatcore.getPickerOptionId.call(void 0, listboxId, index),
+                  ..._tigercatcore.getPickerOptionAria.call(void 0, {
+                    selected: String(option.value) === String(props.modelValue),
+                    disabled: !!option.disabled
+                  }),
+                  class: _tigercatcore.getAutoCompleteOptionClasses.call(void 0, 
                     String(option.value) === String(props.modelValue),
                     !!option.disabled,
                     props.size
@@ -244,10 +258,10 @@ var AutoComplete = vue.defineComponent({
                 option.label
               )
             )
-          ) : isOpen.value && inputValue.value && options.length === 0 ? vue.h(
+          ) : isOpen.value && inputValue.value && options.length === 0 ? _vue.h.call(void 0, 
             "div",
             {
-              class: tigercatCore.classNames(tigercatCore.autoCompleteDropdownClasses, tigercatCore.autoCompleteEmptyStateClasses)
+              class: _tigercatcore.classNames.call(void 0, _tigercatcore.autoCompleteDropdownClasses, _tigercatcore.autoCompleteEmptyStateClasses)
             },
             props.notFoundText
           ) : null
@@ -258,5 +272,7 @@ var AutoComplete = vue.defineComponent({
 });
 var AutoComplete_default = AutoComplete;
 
-exports.AutoComplete = AutoComplete;
-exports.AutoComplete_default = AutoComplete_default;
+
+
+
+exports.AutoComplete = AutoComplete; exports.AutoComplete_default = AutoComplete_default;