@ulu/frontend-vue 0.6.23 → 0.6.25

package/dist/plugins/tour/UluTourDisplay.vue.js

@@ -0,0 +1,133 @@
+import { computed as i, ref as f, watch as S, nextTick as T, onMounted as b, onUnmounted as L, createBlock as l, openBlock as o, Teleport as F, createElementBlock as x, createCommentVNode as $, unref as v, Fragment as I, resolveDynamicComponent as g, normalizeProps as h, mergeProps as s, createSlots as k, withCtx as c, createVNode as w, normalizeStyle as R } from "vue";
+import V from "../../components/collapsible/UluModal.vue.js";
+import D from "../popovers/UluPopoverBase.vue.js";
+import P from "./UluTourPager.vue.js";
+import _ from "./UluTourContent.vue.js";
+import { useTour as M } from "./useTour.js";
+const H = {
+  __name: "UluTourDisplay",
+  setup(N) {
+    const { api: m, state: a } = M(), t = i(() => a.active?.steps[a.stepIndex]), u = f(null), d = f(null), C = i(() => ({
+      placement: t.value?.placement || "bottom",
+      arrow: !0,
+      offset: 8
+    })), E = i(() => ({
+      ...a.active?.modalProps || {},
+      ...t.value?.modalProps || {}
+    })), z = i(() => ({
+      modifiers: "large",
+      ...a.active?.popoverProps || {},
+      ...t.value?.popoverProps || {}
+    })), r = f(null), p = () => {
+      if (u.value) {
+        const e = u.value.getBoundingClientRect();
+        r.value = {
+          top: e.top,
+          left: e.left,
+          width: e.width,
+          height: e.height
+        };
+      } else
+        r.value = null;
+    }, B = i(() => {
+      if (!r.value) return {};
+      const e = r.value;
+      return {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        pointerEvents: "auto",
+        zIndex: 9998,
+        background: "rgba(0,0,0,0.5)",
+        clipPath: `polygon(
+        0% 0%, 
+        100% 0%, 
+        100% 100%, 
+        0% 100%, 
+        0% ${e.top}px, 
+        ${e.left}px ${e.top}px, 
+        ${e.left}px ${e.top + e.height}px, 
+        ${e.left + e.width}px ${e.top + e.height}px, 
+        ${e.left + e.width}px ${e.top}px, 
+        ${e.left}px ${e.top}px, 
+        0% ${e.top}px
+      )`
+      };
+    });
+    return S(t, async (e) => {
+      if (e?.target) {
+        await T();
+        const n = document.querySelector(e.target);
+        n ? (u.value = n, d.value && d.value.update(), e.highlight && p()) : console.warn(`Tour target not found: ${e.target}`);
+      } else
+        u.value = null, r.value = null;
+    }, { immediate: !0 }), b(() => {
+      window.addEventListener("resize", p), window.addEventListener("scroll", p);
+    }), L(() => {
+      window.removeEventListener("resize", p), window.removeEventListener("scroll", p);
+    }), (e, n) => (o(), l(F, { to: "body" }, [
+      v(a).active ? (o(), x(I, { key: 0 }, [
+        t.value?.component ? (o(), l(g(t.value.component), h(s({ key: 0 }, t.value.componentProps)), null, 16)) : t.value?.target ? (o(), l(D, s({
+          key: 2,
+          ref_key: "popoverBase",
+          ref: d,
+          trigger: u.value,
+          config: C.value,
+          style: { zIndex: 9999 },
+          isOpen: !0,
+          onClose: n[1] || (n[1] = (y) => v(m).stop())
+        }, z.value), k({
+          default: c(() => [
+            t.value?.contentComponent ? (o(), l(g(t.value.contentComponent), h(s({ key: 0 }, t.value.componentProps)), null, 16)) : (o(), l(_, {
+              key: 1,
+              step: t.value,
+              "is-modal": !1
+            }, null, 8, ["step"]))
+          ]),
+          _: 2
+        }, [
+          t.value?.hideFooter ? void 0 : {
+            name: "footer",
+            fn: c(() => [
+              w(P)
+            ]),
+            key: "0"
+          }
+        ]), 1040, ["trigger", "config"])) : (o(), l(V, s({
+          key: 1,
+          modelValue: !0
+        }, E.value, {
+          onClose: n[0] || (n[0] = (y) => v(m).stop())
+        }), k({
+          default: c(() => [
+            t.value?.contentComponent ? (o(), l(g(t.value.contentComponent), h(s({ key: 0 }, t.value.componentProps)), null, 16)) : (o(), l(_, {
+              key: 1,
+              step: t.value,
+              "is-modal": !0
+            }, null, 8, ["step"]))
+          ]),
+          _: 2
+        }, [
+          t.value?.hideFooter ? void 0 : {
+            name: "footer",
+            fn: c(() => [
+              w(P)
+            ]),
+            key: "0"
+          }
+        ]), 1040)),
+        t.value?.target && t.value?.highlight && r.value ? (o(), x("div", {
+          key: 3,
+          class: "tour-highlight-backdrop",
+          style: R(B.value),
+          onClick: n[2] || (n[2] = (y) => v(m).stop())
+        }, null, 4)) : $("", !0)
+      ], 64)) : $("", !0)
+    ]));
+  }
+};
+export {
+  H as default
+};

package/dist/plugins/tour/UluTourPager.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=UluTourPager.vue.d.ts.map

package/dist/plugins/tour/UluTourPager.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluTourPager.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/UluTourPager.vue"],"names":[],"mappings":"AAqBA;"}

package/dist/plugins/tour/UluTourPager.vue.js

@@ -0,0 +1,31 @@
+import { computed as s, createElementBlock as p, openBlock as u, createVNode as i, unref as n } from "vue";
+import { useTour as c } from "./useTour.js";
+import l from "../../components/elements/UluButton.vue.js";
+const d = { class: "tour-pager layout-flex-justified" }, y = {
+  __name: "UluTourPager",
+  setup(m) {
+    const { api: r, state: e } = c(), o = s(() => e.active && e.stepIndex === e.active.steps.length - 1);
+    return s(() => e.active && e.stepIndex === 0), (x, t) => (u(), p("div", d, [
+      i(l, {
+        onClick: t[0] || (t[0] = (a) => n(r).prev()),
+        text: "Previous",
+        disabled: n(e).stepIndex === 0,
+        icon: "type:previous",
+        iconBefore: "",
+        small: "",
+        secondary: "",
+        transparent: ""
+      }, null, 8, ["disabled"]),
+      i(l, {
+        primary: "",
+        icon: o.value ? null : "type:next",
+        onClick: t[1] || (t[1] = (a) => n(r).next()),
+        text: o.value ? "Finish" : "Next",
+        small: ""
+      }, null, 8, ["icon", "text"])
+    ]));
+  }
+};
+export {
+  y as default
+};

package/dist/plugins/tour/api.d.ts

@@ -0,0 +1,52 @@
+export function createApi(state: Object): Object;
+export type TourStep = {
+    /**
+     * - The CSS selector for the target element. If omitted, step renders as a modal.
+     */
+    target?: string | undefined;
+    /**
+     * - The title text for the step.
+     */
+    title?: string | undefined;
+    /**
+     * - The content text for the step.
+     */
+    content?: string | undefined;
+    /**
+     * - A Vue component to completely replace the modal/popover wrapper and layout.
+     */
+    component?: Object | undefined;
+    /**
+     * - A Vue component to replace the step text content, keeping the modal/popover wrappers and default footer.
+     */
+    contentComponent?: Object | undefined;
+    /**
+     * - Props to bind to the custom component.
+     */
+    componentProps?: Object | undefined;
+    /**
+     * - If true, hides the default tour footer (Next/Back buttons).
+     */
+    hideFooter?: boolean | undefined;
+    /**
+     * - Floating UI placement string (e.g. 'bottom', 'right').
+     */
+    placement?: string | undefined;
+    /**
+     * - If true, darkens the backdrop around the target element.
+     */
+    highlight?: boolean | undefined;
+    /**
+     * - Props to pass to the modal (if target is omitted).
+     */
+    modalProps?: Object | undefined;
+    /**
+     * - Props to pass to the popover (if target is present).
+     */
+    popoverProps?: Object | undefined;
+    /**
+     * - Async hook called before the step is rendered.
+     */
+    onEnter?: Function | undefined;
+};
+//# sourceMappingURL=api.d.ts.map

package/dist/plugins/tour/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/api.js"],"names":[],"mappings":"AAuBO,iCAHI,MAAM,GACJ,MAAM,CA6DjB"}

package/dist/plugins/tour/api.js

@@ -0,0 +1,52 @@
+import { markRaw as t } from "vue";
+const o = (e) => ({
+  /**
+   * Starts a new tour
+   * @param {Object} tour - The tour configuration object
+   * @param {TourStep[]} tour.steps - Array of steps for the tour
+   * @param {String} [tour.name] - Optional name for the tour
+   * @param {Object} [tour.modalProps] - Global props applied to all modal steps in this tour (can be overridden by step)
+   * @param {Object} [tour.popoverProps] - Global props applied to all popover steps in this tour (can be overridden by step)
+   */
+  async start(n) {
+    n?.steps?.length && (await this._runHooks(n.steps[0]), e.active = t(n), e.stepIndex = 0);
+  },
+  /**
+   * Advances the tour to the next step, or stops if it is the last step
+   */
+  async next() {
+    const n = e.active;
+    if (n)
+      if (e.stepIndex < n.steps.length - 1) {
+        const s = e.stepIndex + 1;
+        await this._runHooks(n.steps[s]), e.stepIndex = s;
+      } else
+        this.stop();
+  },
+  /**
+   * Returns the tour to the previous step
+   */
+  async prev() {
+    const n = e.active;
+    if (n && e.stepIndex > 0) {
+      const s = e.stepIndex - 1;
+      await this._runHooks(n.steps[s]), e.stepIndex = s;
+    }
+  },
+  /**
+   * Stops and closes the current tour
+   */
+  stop() {
+    e.active = null, e.stepIndex = 0;
+  },
+  /**
+   * Internal method to run asynchronous lifecycle hooks on a step
+   * @param {Object} step - The tour step configuration
+   */
+  async _runHooks(n) {
+    n && typeof n.onEnter == "function" && await n.onEnter();
+  }
+});
+export {
+  o as createApi
+};

package/dist/plugins/tour/index.d.ts

@@ -0,0 +1,7 @@
+import { useTour } from './useTour.js';
+export default function install(app: any): void;
+export { useTour };
+export { default as UluTourDisplay } from './UluTourDisplay.vue';
+export { default as UluTourPager } from './UluTourPager.vue';
+export { default as UluTourContent } from './UluTourContent.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/plugins/tour/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/index.js"],"names":[],"mappings":"AAQA,gDAeC;;;;;wBAjBuB,cAAc"}

package/dist/plugins/tour/index.js

@@ -0,0 +1,14 @@
+import { reactive as e } from "vue";
+import u from "./UluTourDisplay.vue.js";
+import { createApi as i } from "./api.js";
+function s(o) {
+  const t = e({
+    active: null,
+    stepIndex: 0
+  }), r = i(t);
+  o.component("UluTourDisplay", u), o.config.globalProperties.$uluTour = r, o.config.globalProperties.$uluTourState = t, o.provide("uluTour", r), o.provide("uluTourState", t);
+}
+export {
+  u as UluTourDisplay,
+  s as default
+};

package/dist/plugins/tour/useTour.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Composable for accessing the Tour API and state
+ */
+export function useTour(): {
+    api: {};
+    state: {};
+};
+//# sourceMappingURL=useTour.d.ts.map

package/dist/plugins/tour/useTour.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTour.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/useTour.js"],"names":[],"mappings":"AAEA;;GAEG;AACH;;;EAIC"}

package/dist/plugins/tour/useTour.js

@@ -0,0 +1,8 @@
+import { useRequiredInject as u } from "../../composables/useRequiredInject.js";
+function r() {
+  const t = u("uluTour"), e = u("uluTourState");
+  return { api: t, state: e };
+}
+export {
+  r as useTour
+};

package/lib/composables/useUluFloating.js

@@ -38,6 +38,7 @@ export function useUluFloating(trigger, content, config) {
   const contentArrow = ref(null);
   const middleware = ref([]);
   const placementConfig = computed(() => config.value?.placement);
+  const strategyConfig = computed(() => config.value?.strategy || 'absolute');
 
   const { 
     floatingStyles, 
@@ -47,6 +48,7 @@ export function useUluFloating(trigger, content, config) {
     isPositioned
   } = useFloating(trigger, content, {
     placement: placementConfig,
+    strategy: strategyConfig,
     whileElementsMounted: autoUpdate,
     middleware: middleware,
   });

package/lib/plugins/index.js

@@ -4,9 +4,9 @@
  * - Used in bundle exports
  */
 
-
 export { default as corePlugin } from './core/index.js';
-export { default as popoversPlugin, useTooltip, useTooltipFollow } from './popovers/index.js';
+export { default as popoversPlugin, useTooltip, useTooltipFollow, UluPopover, UluPopoverBase, UluTooltipDisplay, UluTooltipPopover } from './popovers/index.js';
 export { default as modalsPlugin, useModals } from './modals/index.js';
 export { default as toastPlugin, useToast, UluToast, UluToastDisplay } from "./toast/index.js";
-export { default as breakpointsPlugin } from './breakpoints/index.js';
+export { default as breakpointsPlugin } from './breakpoints/index.js';
+export { default as tourPlugin, useTour, UluTourDisplay, UluTourPager, UluTourContent } from './tour/index.js';

package/lib/plugins/popovers/UluPopover.vue

@@ -19,143 +19,101 @@
       {{ triggerText }}
     </slot>
   </button>
-  <span 
-    class="popover"
-    ref="content"
+
+  <UluPopoverBase 
+    ref="popoverBase"
+    :trigger="trigger"
+    :config="resolvedConfig"
+    :isOpen="isOpen"
+    :clickOutsideCloses="clickOutsideCloses"
+    :directFocus="directFocus"
     :class="[ 
       size ? `popover--${ size }` : '',
       { 
-        'popover--no-padding' : noPadding,
-        'popover--fixed' : isFixedStrategy,
-        'is-active' : isOpen
+        'popover--no-padding' : noPadding
       }, 
       classes.content,
     ]"
     :aria-labelledby="triggerId" 
     :id="id" 
-    :style="floatingStyles"
-    :data-placement="placement"
-    @keydown.esc="changeTo(false)"
-    tabindex="-1"
+    @close="changeTo(false)"
   >
-    <span class="popover__inner">
-      <slot :isOpen="isOpen" :toggle="toggle" :close="close"/>
-    </span>
-    <span v-if="$slots.footer" class="popover__footer">
+    <slot :isOpen="isOpen" :toggle="toggle" :close="close"/>
+    <template #footer v-if="$slots.footer">
       <slot name="footer" :close="close"/>
-    </span>
-    <span 
-      v-if="resolvedConfig.arrow"
-      class="popover__arrow" 
-      ref="contentArrow"
-      :style="arrowStyles"
-      data-ulu-popover-arrow
-    ></span>
-  </span>
+    </template>
+  </UluPopoverBase>
 </template>
 <script setup>
-  import { ref, computed, unref, nextTick } from "vue";
+  import { ref, computed } from "vue";
   import { useRequiredInject } from "../../composables/useRequiredInject.js";
   import { POPOVER_OPTIONS_KEY } from "./index.js";
   import defaults from "./defaults.js";
   import { newId } from "../../utils/dom.js";
-  import { useUluFloating } from "../../composables/useUluFloating.js";
+  import UluPopoverBase from "./UluPopoverBase.vue";
 
-  const emit = defineEmits(["toggle"]);
+  const emit = defineEmits(["toggle", "update:modelValue"]);
   const props = defineProps({
     /**
-     * Text for popover button
+     * V-model state to control the popover externally
      */
+    modelValue: {
+      type: Boolean,
+      default: undefined
+    },
     triggerText: String,
-    /**
-     * Add optional aria-label to button for icons/etc
-     */
     triggerAlt: String,
-    /**
-     * Disable trigger button
-     */
     disabled: Boolean,
-    /**
-     * Tooltip text for trigger button
-     */
     tooltip: String,
-    /**
-     * Popover size (ie large, etc)
-     */
     size: String,
-    /**
-     * No padding on popover content
-     */
     noPadding: Boolean,
-    /**
-     * Floating UI config (merged with defaults for popover)
-     * - See useUluFloating() composable for config API
-     */
     config: {
       type: Object,
       default: () => ({})
     },
-    /**
-     * Mount this component already open state
-     */
     startOpen: Boolean,
-    /**
-     * Active class for trigger button
-     */
     activeClass: {
       type: String,
       default: "is-active"
     },
-    /**
-     * Add custom classes to specific elements
-     * { trigger, content }
-     */
     classes: {
       type: Object,
       default: () => ({})
     },
-    /**
-     * Close popover when click is outside
-     */
     clickOutsideCloses: {
       type: Boolean,
       default: true
     },
     /**
-     * Direct focus when open/closing popover
+     * Direct focus when open/closing popover.
+     * Overrides UluPopoverBase's default focus management.
      */
-    directFocus: {
-      type: Function,
-      default: ({ isOpen, content }) => {
-        if (isOpen) {
-          content.focus({ preventScroll: true });
-        }
-      }
-    }
+    directFocus: Function
   });
 
   const id = newId();
   const triggerId = newId();
 
-  // Inject global options, falling back to the static defaults file.
   const injectedOptions = useRequiredInject(POPOVER_OPTIONS_KEY);
   const baseConfig = injectedOptions ? injectedOptions.popover : defaults.popover;
-
-  // Create a plain config object, same as pre-refactor.
   const resolvedConfig = computed(() => ({ ...baseConfig, ...props.config }));
   
-  const isOpen = ref(props.startOpen || false);
+  const internalIsOpen = ref(props.startOpen || false);
   const trigger = ref(null);
-  const content = ref(null);
+  const popoverBase = ref(null);
 
-  const { 
-    floatingStyles, 
-    placement, 
-    update,
-    arrowStyles,
-    contentArrow,
-    isFixedStrategy
-  } = useUluFloating(trigger, content, resolvedConfig);
+  const isOpen = computed({
+    get() {
+      return props.modelValue !== undefined ? props.modelValue : internalIsOpen.value;
+    },
+    set(val) {
+      if (props.modelValue !== undefined) {
+        emit("update:modelValue", val);
+      } else {
+        internalIsOpen.value = val;
+      }
+    }
+  });
 
   const toggle = () => {
     changeTo(!isOpen.value);
@@ -163,49 +121,28 @@
 
   const changeTo = (toOpen) => {
     isOpen.value = toOpen;
-    
-    const focusArgs = { 
-      trigger: unref(trigger), 
-      content: unref(content), 
-      isOpen: unref(isOpen) 
-    };
-    const eventArgs = { isOpen: focusArgs.isOpen };
-    nextTick(() => {
-      if (isOpen.value) {
-        update();
-        // Push to next event, without this will get triggered by the original click event
-        window.setTimeout(() => {
-          addOutsideClick();
-          props.directFocus(focusArgs);
-          emit("toggle", eventArgs);
-        }, 0);
-      } else {
-        destroyOutsideClick();
-        props.directFocus(focusArgs);
-        emit("toggle", eventArgs);
-      }
-    });
+    emit("toggle", { isOpen: toOpen });
   };
   
-  let outsideHandler;
-  const addOutsideClick = () => {
-    if (props.clickOutsideCloses) {
-      if (outsideHandler) {
-        destroyOutsideClick();
-      }
-      outsideHandler = event => {
-        if (content.value && !content.value.contains(event.target)) {
-          changeTo(false);
-        }
-      };
-      document.addEventListener("click", outsideHandler);
-    }
-  };
-  const destroyOutsideClick = () => {
-    if (outsideHandler) {
-      document.removeEventListener("click", outsideHandler);
-      outsideHandler = null;
-    }
-  };
   const close = () => changeTo(false);
-</script>
+
+  defineExpose({
+    /**
+     * The reactive internal open/closed state of the popover
+     */
+    isOpen,
+    /**
+     * Method to toggle the popover open/closed
+     */
+    toggle,
+    /**
+     * Method to force the popover closed
+     */
+    close,
+    /**
+     * Method to explicitly set the open state
+     * @param {Boolean} toOpen - The desired state
+     */
+    changeTo
+  });
+</script>