@redseed/redseed-ui-vue3 8.55.0 → 8.57.0

package/package.json

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

package/src/components/Button/ButtonAI.vue

@@ -0,0 +1,8 @@
+<script setup>
+import ButtonSlot from './ButtonSlot.vue'
+</script>
+<template>
+<ButtonSlot class="rsui-button-ai">
+    <slot></slot>
+</ButtonSlot>
+</template>

package/src/components/Button/index.js

@@ -6,6 +6,7 @@ import ButtonTertiary from './ButtonTertiary.vue'
 import ButtonTertiaryFull from './ButtonTertiaryFull.vue'
 import ButtonDanger from './ButtonDanger.vue'
 import ButtonDangerFull from './ButtonDangerFull.vue'
+import ButtonAI from './ButtonAI.vue'
 import ButtonSlot from './ButtonSlot.vue'
 
 export {
@@ -17,5 +18,6 @@ export {
     ButtonTertiaryFull,
     ButtonDanger,
     ButtonDangerFull,
+    ButtonAI,
     ButtonSlot,
 }

package/src/components/FormField/FormFieldRadioGroup.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, useSlots } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
 
@@ -18,6 +18,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    likert: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const emit = defineEmits(['input'])
@@ -32,6 +36,27 @@ function setValue(value) {
     emit('input', value)
 }
 
+// Each anchor rides inside the scale point it labels, so the pair travels as one flex
+// child and justify-between can spread the row without prising the anchor off its end.
+const slots = useSlots()
+
+function showAnchorStartAt(index) {
+    return props.likert && index === 0 && Boolean(slots['anchor-start'])
+}
+
+function showAnchorEndAt(index) {
+    return props.likert && index === props.options.length - 1 && Boolean(slots['anchor-end'])
+}
+
+// likert lays the scale out as a single row between two anchors, so it overrides stacked
+const itemsClass = computed(() => [
+    'rsui-form-field-radio-group__items',
+    {
+        'rsui-form-field-radio-group__items--stacked': props.stacked && !props.likert,
+        'rsui-form-field-radio-group__items--likert': props.likert,
+    },
+])
+
 </script>
 <template>
 <FormFieldSlot
@@ -47,7 +72,7 @@ function setValue(value) {
             <slot name="label"></slot>
         </span>
     </template>
-    <div :class="['rsui-form-field-radio-group__items', { 'rsui-form-field-radio-group__items--stacked': stacked }]"
+    <div :class="itemsClass"
         role="radiogroup"
         :aria-labelledby="$slots.label ? `${effectiveId}-label` : undefined"
         :aria-describedby="ariaDescribedby"
@@ -58,6 +83,10 @@ function setValue(value) {
             :key="option.value"
             :class="['rsui-form-field-radio-group__item', {'rsui-form-field-radio-group__item--disabled': option.disabled}]"
         >
+            <span v-if="showAnchorStartAt(index)" class="rsui-form-field-radio-group__anchor">
+                <slot name="anchor-start"></slot>
+            </span>
+
             <div class="rsui-form-field-radio-group__control" v-if="model !== option.value" aria-hidden="true"></div>
             <div class="rsui-form-field-radio-group__control rsui-form-field-radio-group__control--active"
                 v-if="model == option.value" aria-hidden="true">
@@ -79,6 +108,10 @@ function setValue(value) {
             >
                 {{ option.label }}
             </label>
+
+            <span v-if="showAnchorEndAt(index)" class="rsui-form-field-radio-group__anchor">
+                <slot name="anchor-end"></slot>
+            </span>
         </div>
     </div>
     <template #help v-if="$slots.help">