@ulu/frontend-vue 0.2.0-beta.8 → 0.3.0

package/lib/components/collapsible/UluModal.vue

@@ -14,7 +14,6 @@
       @cancel.prevent="close"  
       @close="handleDialogCloseEvent"
       @click="handleClick"
-      @toggle="handleToggle"
     >
       <header 
         v-if="hasHeader" 
@@ -68,321 +67,302 @@
   </Teleport>
 </template>
 
-<script>
-  import { useSlots, computed } from "vue";
+<script setup>
+  import { useSlots, computed, ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
   import UluIcon from "../elements/UluIcon.vue";
   import { useModifiers } from "../../composables/useModifiers.js";
   import { wasClickOutside, preventScroll as setupPreventScroll } from "@ulu/utils/browser/dom.js";
-  import { Resizer } from "@ulu/frontend";
+  import { Resizer, observeDialogToggle } from "@ulu/frontend";
   import { newId } from "../../utils/dom.js";
 
-  export default {
-    name: "UluModal",
-    components: {
-      UluIcon
+  const emit = defineEmits(["update:modelValue", "close", "open"]);
+
+  const props = defineProps({
+    /**
+     * Controls the visibility of the modal (for v-model).
+     */
+    modelValue: Boolean, 
+    /**
+     * Target for Vue's Teleport. Defaults to 'body'.
+     * Set to `false` to disable teleporting (modal renders inline).
+     * Set to `null` or `undefined` for `body` fallback with disabled as false.
+     */
+    teleport: {
+      type: [String, Boolean, Object], // Allow string for target selector, or false to disable, or object (Dome node)
+      default: "body"
     },
-    emits: ['update:modelValue', 'close', 'open'],
-    props: {
-      /**
-       * Controls the visibility of the modal (for v-model).
-       */
-      modelValue: Boolean, 
-      /**
-       * Target for Vue's Teleport. Defaults to 'body'.
-       * Set to `false` to disable teleporting (modal renders inline).
-       * Set to `null` or `undefined` for `body` fallback with disabled as false.
-       */
-      teleport: {
-        type: [String, Boolean, Object], // Allow string for target selector, or false to disable, or object (Dome node)
-        default: 'body'
-      },
-      /**
-       * When open and not non-modal, the body is prevented from scrolling (defaults to true).
-       */
-      preventScroll: {
-        type: Boolean,
-        default: true
-      },
-      /**
-       * Compensate for layout shift when preventing scroll. Which adds padding equal to scrollbars 
-       * width while dialog is open
-       */
-      preventScrollShift: {
-        type: Boolean,
-        default: true
-      },
-      /**
-       * Use non-modal interface for dialog
-       */
-      nonModal: Boolean,
-      /**
-       * Close modal on click outside
-       */
-      clickOutsideCloses: {
-        type: Boolean,
-        default: true
-      },
-      /**
-       * Enable resizer
-       */
-      allowResize: Boolean,
-      /**
-       * Position (any position that modal.scss supports)
-       */
-      position: {
-        type: String,
-        default: "center"
-      },
-      /**
-       * If `true`, the modal body will fill the available space. 
-       */
-      bodyFills: Boolean,
-      /**
-       * If `true`, no backdrop will be displayed behind the modal
-       */
-      noBackdrop: Boolean,
-      /**
-       * If `true`, the modal will not have a minimum height
-       */
-      noMinHeight: Boolean,
-      /**
-       * Set aria-labelledby by element id (to add accessible label)
-       * - Use this if you are not using the default modal title (custom titles)
-       */
-      labelledby: String,
-      /**
-       * Set aria-describedby by element id (to add accessible description)
-       * - This is usually content you passed into the modal body (paragraph/etc)
-       */
-      describedby: String,
-      /**
-       * Text for modal title in header (can use title slot as well for complex markup), if not passed the header will be omitted
-       */
-      title: String,
-      /**
-       * Optional icon for before title (uses UluIcon interface)
-       */
-      titleIcon: String,
-      /**
-       * Default icon for resizer
-       */
-      resizerIcon: String,
-      /**
-       * Default icon for close button (uses UluIcon interface)
-       */
-      closeIcon: String,
-      /**
-       * Classes for elements ({ container, header, title, body, footer })
-       * - Any valid class binding value per element
-       */
-      classes: {
-        type: Object,
-        default: () => ({
-          close: "button button--icon"
-        })
-      },
-      /**
-       * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
-       */
-      modifiers: [String, Array]
+    /**
+     * When open and not non-modal, the body is prevented from scrolling (defaults to true).
+     */
+    preventScroll: {
+      type: Boolean,
+      default: true
     },
-    data() {
-      return {
-        containerWidth: null,
-        titleId: newId('ulu-modal-title'),
-        bodyOverflowValue: null,
-        bodyPaddingRightValue: null,
-        isResizing: false,
-      }
+    /**
+     * Compensate for layout shift when preventing scroll. Which adds padding equal to scrollbars 
+     * width while dialog is open
+     */
+    preventScrollShift: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Use non-modal interface for dialog
+     */
+    nonModal: Boolean,
+    /**
+     * Close modal on click outside
+     */
+    clickOutsideCloses: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Enable resizer
+     */
+    allowResize: Boolean,
+    /**
+     * Position (any position that modal.scss supports)
+     */
+    position: {
+      type: String,
+      default: "center"
+    },
+    /**
+     * If `true`, the modal body will fill the available space. 
+     */
+    bodyFills: Boolean,
+    /**
+     * If `true`, no backdrop will be displayed behind the modal
+     */
+    noBackdrop: Boolean,
+    /**
+     * If `true`, the modal will not have a minimum height
+     */
+    noMinHeight: Boolean,
+    /**
+     * Set aria-labelledby by element id (to add accessible label)
+     * - Use this if you are not using the default modal title (custom titles)
+     */
+    labelledby: String,
+    /**
+     * Set aria-describedby by element id (to add accessible description)
+     * - This is usually content you passed into the modal body (paragraph/etc)
+     */
+    describedby: String,
+    /**
+     * Text for modal title in header (can use title slot as well for complex markup), if not passed the header will be omitted
+     */
+    title: String,
+    /**
+     * Optional icon for before title (uses UluIcon interface)
+     */
+    titleIcon: String,
+    /**
+     * Default icon for resizer
+     */
+    resizerIcon: String,
+    /**
+     * Default icon for close button (uses UluIcon interface)
+     */
+    closeIcon: String,
+    /**
+     * Classes for elements ({ container, header, title, body, footer })
+     * - Any valid class binding value per element
+     */
+    classes: {
+      type: Object,
+      default: () => ({
+        close: "button button--icon"
+      })
     },
-    setup(props) {
-      const slots = useSlots(); // Access slots via useSlots() helper
+    /**
+     * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
+     */
+    modifiers: [String, Array],
+    /**
+     * If true, modal is forced to fullscreen on mobile viewports
+     */
+    fullscreenMobile: Boolean
+  });
+
+  const slots = useSlots();
+
+  const containerWidth = ref(null);
+  const titleId = newId("ulu-modal-title");
+  const isResizing = ref(false);
+
+  const container = ref(null);
+  const resizer = ref(null);
+
+  const hasHeader = computed(() => props.title || slots.title);
 
-      // Note: These two computed need to be defined in setup since their used in internalModifiers
-      const hasHeader = computed(() => props.title || slots.title);
-      /**
-       * Flag for if resizer script should be enabled
-       * - Resizer only available for left and right
-       */
-      const resizerEnabled = computed(() => {
-        const { allowResize, position } = props;
-        if (!allowResize || !position) return;
+  const resizerEnabled = computed(() => {
+    const { allowResize, position } = props;
+    if (!allowResize || !position) return false;
 
-        const resizablePositions = ["left", "right", "center"];
-        if (resizablePositions.includes(position)) {
-          return true;
+    const resizablePositions = ["left", "right", "center"];
+    if (resizablePositions.includes(position)) {
+      return true;
+    } else {
+      console.warn(`Passed invalid position for resize (${ position }), use ${ resizablePositions.join(", ") }`);
+      return false;
+    }
+  });
+
+  const resizerIconType = computed(() => {
+    return props.position === "center" ? "type:resizeBoth" : "type:resizeHorizontal";
+  });
+
+  const internalModifiers = computed(() => ({
+    [props.position]: props.position, 
+    "resize": props.allowResize,
+    "no-resize": !props.allowResize,
+    "no-header": !hasHeader.value,
+    "body-fills": props.bodyFills,
+    "no-backdrop": props.noBackdrop,
+    "no-min-height": props.noMinHeight,
+    "non-modal": props.nonModal,
+    "resizer-active": resizerEnabled.value,
+    "fullscreen-mobile": props.fullscreenMobile,
+  }));
+
+  const { resolvedModifiers } = useModifiers({ 
+    props: props, 
+    baseClass: "modal", 
+    internal: internalModifiers 
+  });
+
+  const resolvedLabelledby = computed(() => {
+    return props.labelledby ? props.labelledby : titleId;
+  });
+
+  const close = () => {
+    emit("update:modelValue", false);
+    emit("close");
+  };
+
+  const handleDialogCloseEvent = () => {
+    if (props.modelValue) {
+      emit("update:modelValue", false);
+      emit("close");
+    }
+  };
+
+  const handleClick = (event) => {
+    if (props.clickOutsideCloses && !isResizing.value) {
+      const { target } = event;
+      if (target === container.value && wasClickOutside(container.value, event)) {
+        close();
+      }
+    }
+  };
+
+  let toggleObserver = null;
+  let restoreScroll = null;
+  let resizerInstance = null;
+  let handleResizerStart = null;
+  let handleResizerEnd = null;
+
+  const setupToggleObserver = () => {
+    if (!props.nonModal && props.preventScroll) {
+      toggleObserver = observeDialogToggle(container.value, (isOpen) => {
+        if (isOpen) {
+          restoreScroll = setupPreventScroll({ preventShift: props.preventScrollShift });
         } else {
-          console.warn(`Passed invalid position for resize (${ position }), use ${ resizablePositions.join(", ") }`);
-          return false;
+          destroyPreventScroll();
         }
       });
+    }
+  };
 
-      const resizerIconType = computed(() => {
-        return props.position === 'center' ? 'type:resizeBoth' : 'type:resizeHorizontal';
-      });
-
-      // Define the internal modifiers object as a computed property (so it can react to changes)
-      const internalModifiers = computed(() => ({
-        [props.position]: props.position, 
-        "resize" : props.allowResize,
-        "no-resize" : !props.allowResize,
-        "no-header" : !hasHeader.value,
-        "body-fills" : props.bodyFills,
-        "no-backdrop" : props.noBackdrop,
-        "no-min-height" : props.noMinHeight,
-        "non-modal" : props.nonModal,
-        "resizer-active" : resizerEnabled.value,
-      }));
+  const destroyToggleObserver = () => {
+    if (toggleObserver) {
+      toggleObserver.destroy();
+      toggleObserver = null;
+    }
+  };
 
-      const { resolvedModifiers } = useModifiers({ 
-        props: props, 
-        baseClass: "modal", 
-        internal: internalModifiers 
-      });
+  const destroyPreventScroll = () => {
+    if (restoreScroll) {
+      restoreScroll();
+      restoreScroll = null;
+    }
+  };
 
-      return { 
-        resolvedModifiers,
-        hasHeader,
-        resizerEnabled,
-        resizerIconType
+  const setupResizer = () => {
+    if (resizerEnabled.value) {
+      const options = props.position === "center" ? 
+        { fromX: "right", fromY: "bottom", multiplier: 2 } : 
+        { fromX: props.position === "right" ? "left" : "right" };
+      resizerInstance = new Resizer(container.value, resizer.value, options);
+      handleResizerStart = () => {
+        isResizing.value = true;
       };
-    },
-    computed: {
-      resolvedLabelledby() {
-        const { labelledby, titleId } = this;
-        return labelledby ? labelledby : titleId;
-      }
-    },
-    watch: {
-      modelValue: {
-        // So that it runs on mount (if modelValue is initially true)
-        immediate: true, 
-        handler(newValue) {
-          // Use nextTick to ensure the dialog element is in the DOM before calling showModal
-          this.$nextTick(() => {
-            const { container } = this.$refs;
-            if (newValue) {
-              container[this.nonModal ? "show" : "showModal"]();
-              this.$emit("open");
-            } else {
-              container.close();
-            }
-          });
-        }
-      },
-      resizerEnabled: {
-        immediate: false, // Don't run on initial mount, as setupResizer is called in mounted
-        handler(newValue) {
-          if (newValue) {
-            this.$nextTick(() => { 
-              this.setupResizer();
-            });
-          } else {
-            this.destroyResizer();
-          }
-        }
-      },
-      position(newValue, oldValue) {
-        if (newValue !== oldValue) {
-          this.destroyResizer(); 
-          this.$nextTick(() => { 
-            this.setupResizer();
-          });
-        }
-      }
-    },
-    methods: {
-      close() {
-        // Emit 'update:modelValue' to inform parent to set modelValue to false
-        // This will trigger the watch handler above to call this.$refs.container.close()
-        this.$emit("update:modelValue", false);
-        this.$emit("close"); // Also emit a generic 'close' event for convenience
-      },
-      handleDialogCloseEvent() {
-        // Ensure modelValue is false, primarily for scenarios where dialog is closed
-        // by user agent (e.g., form submission within dialog) or direct native API call
-        // that bypasses `this.close()` or Escape key.
-        if (this.modelValue) { // Only emit if it was open based on modelValue
-          this.$emit("update:modelValue", false);
-          this.$emit("close");
-        }
-      },
-      handleClick(event) {
-        if (this.clickOutsideCloses && !this.isResizing) {
-          const { target } = event;
-          const { container } = this.$refs;
-          if (target === container && wasClickOutside(container, event)) {
-            this.close();
-          }
-        }
-      },
-      setupPreventScroll() {
-        const { body } = document;
-        this.bodyOverflowValue = body.style.overflow;
-        this.bodyPaddingRightValue = body.style.paddingRight;
-      },
-      destroyPreventScroll() {
-        if (this.restoreScroll) {
-          this.restoreScroll();
-        }
-      },
-      handleToggle(event) {
-        if (!this.nonModal && this.preventScroll) {
-          const { preventScrollShift: preventShift } = this;
-          const isOpen = event.newState === "open";
-          if (isOpen) {
-            this.restoreScroll = setupPreventScroll({ preventShift });
-          } else {
-            this.destroyPreventScroll();
-          }
-        }
-      },
-      setupResizer() {
-        const { position, resizerEnabled } = this;
-        if (resizerEnabled) {
-          const { container, resizer } = this.$refs;
-          const options = position === "center" ? 
-            { fromX: "right", fromY: "bottom", multiplier: 2 } : 
-            { fromX: position === "right" ? "left" : "right" };
-          this.resizerInstance = new Resizer(container, resizer, options);
-          this.handleResizerStart = () => {
-            this.isResizing = true;
-          };
-          this.handleResizerEnd = () => {
-            // After click has ended (next in event loop)
-            setTimeout(() => { this.isResizing = false; }, 0)
-          };
-          container.addEventListener("ulu:resizer:start", this.handleResizerStart);
-          container.addEventListener("ulu:resizer:end", this.handleResizerEnd);
-        } 
-      },
-      destroyResizer() {
-        const { container } = this.$refs;
-        if (this.resizerInstance) {
-          this.resizerInstance.destroy();
-          this.resizerInstance = null;
-        }
-        if (this.handleResizerStart) {
-          container.removeEventListener("ulu:resizer:start", this.handleResizerStart);
-        }
-        if (this.handleResizerEnd) {
-          container.removeEventListener("ulu:resizer:end", this.handleResizerEnd);
+      handleResizerEnd = () => {
+        setTimeout(() => { isResizing.value = false; }, 0);
+      };
+      container.value.addEventListener("ulu:resizer:start", handleResizerStart);
+      container.value.addEventListener("ulu:resizer:end", handleResizerEnd);
+    } 
+  };
+
+  const destroyResizer = () => {
+    if (resizerInstance) {
+      resizerInstance.destroy();
+      resizerInstance = null;
+    }
+    if (handleResizerStart && container.value) {
+      container.value.removeEventListener("ulu:resizer:start", handleResizerStart);
+    }
+    if (handleResizerEnd && container.value) {
+      container.value.removeEventListener("ulu:resizer:end", handleResizerEnd);
+    }
+  };
+
+  watch(() => props.modelValue, (newValue) => {
+    nextTick(() => {
+      if (container.value) {
+        if (newValue) {
+          container.value[props.nonModal ? "show" : "showModal"]();
+          emit("open");
+        } else {
+          container.value.close();
         }
       }
-    },
-    mounted() {
-      if (this.preventScroll) {
-        this.setupPreventScroll();
-      }
-      this.setupResizer();
-    },
-    beforeUnmount() {
-      const { container } = this.$refs;
-      if (container && container.open) {
-        container.close();
-      }
-      this.destroyPreventScroll();
-      this.destroyResizer();
+    });
+  }, { immediate: true });
+
+  watch(resizerEnabled, (newValue) => {
+    if (newValue) {
+      nextTick(() => { 
+        setupResizer();
+      });
+    } else {
+      destroyResizer();
     }
-  };
+  }, { immediate: false });
+
+  watch(() => props.position, (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      destroyResizer(); 
+      nextTick(() => { 
+        setupResizer();
+      });
+    }
+  });
+
+  onMounted(() => {
+    setupToggleObserver();
+    setupResizer();
+  });
+
+  onBeforeUnmount(() => {
+    if (container.value && container.value.open) {
+      container.value.close();
+    }
+    destroyToggleObserver();
+    destroyPreventScroll();
+    destroyResizer();
+  });
 </script>

package/lib/components/collapsible/UluTabGroup.vue

@@ -1,10 +1,18 @@
 <template>
-  <TabGroup v-slot="slotProps" :defaultIndex="defaultIndex" :vertical="vertical">
+  <TabGroup 
+    v-slot="slotProps" 
+    :defaultIndex="defaultIndex" 
+    :vertical="vertical"
+  >
     <div 
+      v-bind="$attrs"
       class="tabs" 
-      :class="{
-       'tabs--vertical' : vertical 
-      }"
+      :class="[
+        resolvedModifiers,
+        {
+         'tabs--vertical' : vertical 
+        }
+      ]"
     >
       <slot v-bind="slotProps"/>
     </div>
@@ -13,12 +21,13 @@
 
 <script setup>
   import { TabGroup } from "@headlessui/vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
 
   defineOptions({ 
     inheritAttrs: false 
   });
 
-  defineProps({ 
+  const props = defineProps({ 
     /**
      * Active tab index by default
      */
@@ -26,6 +35,12 @@
     /**
      * Whether or not to use vertical layout
      */
-    vertical: Boolean
+    vertical: Boolean,
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array]
   });
+
+  const { resolvedModifiers } = useModifiers({ props, baseClass: "tabs" });
 </script>