@redseed/redseed-ui-vue3 8.29.0 → 8.29.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.29.0",
+    "version": "8.29.2",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/FormField/FormFieldCheckbox.vue

@@ -30,6 +30,7 @@ function check(event) {
 <FormFieldSlot
     :id="$attrs.id"
     :required="$attrs.required"
+    :showAsterisk="false"
     class="rsui-form-field-checkbox"
 >
     <template #label>
@@ -51,12 +52,14 @@ function check(event) {
                 >
             </div>
             <div v-if="$slots.label"
-                :class="[
-                    'rsui-form-field-checkbox__label',
-                    { 'rsui-form-field-checkbox__label--required': $attrs.required !== undefined },
-                ]"
+                class="rsui-form-field-checkbox__label"
             >
                 <slot name="label"></slot>
+                <span
+                    v-if="$attrs.required !== undefined && $attrs.required !== false"
+                    aria-hidden="true"
+                    class="rsui-form-field-slot__asterisk"
+                >*</span>
             </div>
         </div>
     </template>

package/src/components/FormField/FormFieldSelect.vue

@@ -142,24 +142,17 @@ const anchorBounding = useElementBounding(anchorElement)
 function calculateDropdownPosition() {
     if (!dropdownElement.value) return
 
-    /**
-     * Get the viewport height
-     */
-    const viewportHeight = window.innerHeight
+    // Reset inline positioning before measuring so a previously-applied
+    // max-height (from an earlier constrained open) doesn't pollute the
+    // offsetHeight read below. Without this, a subsequent re-open after
+    // window resize would see the *capped* height and pick the wrong branch.
+    dropdownElement.value.style.maxHeight = ''
+    dropdownElement.value.style.top = ''
+    dropdownElement.value.style.bottom = ''
 
-    /**
-     * Get the dropdown element height
-     */
     const dropdownElementHeight = dropdownElement.value.offsetHeight
-
-    /**
-     * Get space above the anchor element
-     */
+    const viewportHeight = window.innerHeight
     const spaceAbove = anchorBounding.top.value
-
-    /**
-     * Get space below the anchor element
-     */
     const spaceBelow = viewportHeight - anchorBounding.bottom.value
 
     dropdownElement.value.style.minWidth = `${anchorBounding.width.value}px`
@@ -186,18 +179,24 @@ function calculateDropdownPosition() {
         dropdownElement.value.style.left = `${clampedLeft}px`
     }
 
-    if (spaceAbove <= dropdownElementHeight
-        && spaceBelow <= dropdownElementHeight) {
-        dropdownElement.value.style.top = '0'
-        dropdownElement.value.style.bottom = 'auto'
-        return
-    } else if (spaceBelow > dropdownElementHeight) {
+    // The dropdown has `mt-2` (8px) in CSS, so 8px gets consumed by the
+    // visual gap to the trigger; subtract another 8px for breathing room
+    // from the viewport edge (sub-pixel rounding + box-shadow ink).
+    const verticalOffset = 16
+
+    if (spaceBelow > dropdownElementHeight) {
         dropdownElement.value.style.top = `${anchorBounding.bottom.value + window.scrollY}px`
         dropdownElement.value.style.bottom = 'auto'
         return
-    } else if (spaceAbove > dropdownElementHeight) {
+    } else if (spaceAbove > spaceBelow) {
         dropdownElement.value.style.top = 'auto'
         dropdownElement.value.style.bottom = `${spaceBelow + anchorBounding.height.value + 8 - window.scrollY}px`
+        dropdownElement.value.style.maxHeight = `${spaceAbove - verticalOffset}px`
+        return
+    } else {
+        dropdownElement.value.style.top = `${anchorBounding.bottom.value + window.scrollY}px`
+        dropdownElement.value.style.bottom = 'auto'
+        dropdownElement.value.style.maxHeight = `${spaceBelow - verticalOffset}px`
         return
     }
 }