@redseed/redseed-ui-vue3 1.0.14 → 1.0.15

package/index.js

@@ -15,6 +15,7 @@ import FormFieldPassword from './src/components/FormField/FormFieldPassword.vue'
 import FormFieldPasswordToggle from './src/components/FormField/FormFieldPasswordToggle.vue'
 import FormFieldSlot from './src/components/FormField/FormFieldSlot.vue'
 import FormFieldText from './src/components/FormField/FormFieldText.vue'
+import FormFieldTextSuffix from './src/components/FormField/FormFieldTextSuffix.vue'
 import FormRegister from './src/components/Form/FormRegister.vue'
 import Image from './src/components/Image/Image.vue'
 import LogoRedSeedLMS from './src/components/Logo/LogoRedSeedLMS.vue'
@@ -40,6 +41,7 @@ export {
     FormFieldPasswordToggle,
     FormFieldSlot,
     FormFieldText,
+    FormFieldTextSuffix,
     FormRegister,
     Image,
     LogoRedSeedLMS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/FormField/FormFieldText.vue

@@ -26,19 +26,36 @@ const input = ref(null)
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
-    <input ref="input"
-        v-bind="$attrs"
-        type="text"
-        :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
-    >
+
+    <div :class="{
+        'form-field-text__group': true,
+        'form-field-text__group--suffix': $slots.suffix,
+    }">
+        <input ref="input"
+            v-bind="$attrs"
+            type="text"
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+        >
+
+        <slot name="suffix"></slot>
+    </div>
+
     <template #help v-if="$slots.help">
         <slot name="help"></slot>
     </template>
+
     <template #error v-if="$slots.error">
         <slot name="error"></slot>
     </template>
 </FormFieldSlot>
 </template>
 <style lang="scss" scoped>
+.form-field-text {
+    @apply relative;
+
+    &__group {
+        @apply relative;
+    }
+}
 </style>

package/src/components/FormField/FormFieldTextSuffix.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { ref } from 'vue'
+import FormFieldText from './FormFieldText.vue'
+
+// Apply all attributes to the input element, not the wrapper div
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<FormFieldText
+    v-bind="$attrs"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+
+    <template #suffix>
+        <div class="form-field-text__suffix">
+            <slot name="suffix"></slot>
+        </div>
+    </template>
+
+    <template #help v-if="$slots.help">
+        <slot name="help"></slot>
+    </template>
+
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+</FormFieldText>
+</template>
+<style lang="scss" scoped>
+.form-field-text {
+    &__suffix {
+        @apply absolute top-px bottom-px right-px rounded-tr rounded-br;
+        @apply flex items-center justify-center px-3 select-none;
+        @apply bg-gray-100 border-l border-gray-300;
+    }
+}
+</style>