@redseed/redseed-ui-vue3 2.3.0 → 2.3.1

package/package.json

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

package/src/components/FormField/FormFieldCheckbox.vue

@@ -1,46 +1,37 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { CheckIcon } from '@heroicons/vue/24/outline'
 
-const emit = defineEmits(['update:checked'])
-
-const props = defineProps({
-    checked: {
-        type: [Array, Boolean],
-        default: false,
-    },
-    value: {
-        type: String,
-        default: null,
-    },
+defineOptions({
+    inheritAttrs: false,
 })
 
-const iconChecked = ref(false)
+const model = defineModel()
 
-const proxyChecked = computed({
-    get() {
-        iconChecked.value = props.checked
-        return props.checked
-    },
+const checked = ref(model.value || false)
 
-    set(val) {
-        iconChecked.value = val
-        emit('update:checked', val)
-    },
-})
+const emit = defineEmits(['input'])
+
+function check(event) {
+    checked.value = !checked.value
+    emit('input', event)
+}
 </script>
 <template>
 <FormFieldSlot class="rsui-form-field-checkbox">
     <template #label>
         <div class="rsui-form-field-checkbox__checkbox">
             <div class="rsui-form-field-checkbox__check">
-                <CheckIcon v-if="iconChecked" class="rsui-form-field-checkbox__icon"></CheckIcon>
+                <CheckIcon v-if="checked"></CheckIcon>
                 <input
-                    v-model="proxyChecked"
-                    v-bind="$attrs"
+                    v-model="model"
+                    :id="$attrs.id"
+                    :name="$attrs.name"
+                    :disabled="$attrs.disabled"
+                    :required="$attrs.required"
+                    @input="check"
                     type="checkbox"
-                    :value="value"
                 >
             </div>
             <div v-if="$slots.label"
@@ -64,13 +55,18 @@ const proxyChecked = computed({
         @apply ml-2;
     }
     &__check {
-        @apply w-6 h-6 shrink-0 relative bg-white rounded-md;
+        @apply size-6 shrink-0 relative bg-white rounded-md;
+        @apply has-[:disabled]:text-rsui-light;
 
         input[type="checkbox"] {
-            @apply appearance-none absolute inset-0 rounded-md transition shadow-sm;
-            @apply w-full h-full border border-gray-300 text-transparent bg-none;
-            @apply focus:border-gray-300 focus:ring focus:ring-offset-0 focus:ring-gray-300 focus:ring-opacity-50;
-            @apply invalid:border-red-500 invalid:ring invalid:ring-red-500 invalid:ring-opacity-20;
+            @apply appearance-none absolute inset-0 z-0 rounded-md transition focus:outline-none;
+            @apply w-full h-full text-rsui-default border border-rsui-grey-200 text-transparent bg-none;
+            @apply focus:ring focus:ring-rsui-light focus:border-rsui-light;
+            @apply invalid:border-danger invalid:ring-0;
+            @apply disabled:text-rsui-light disabled:bg-rsui-grey-200;
+        }
+        svg {
+            @apply size-full relative z-1;
         }
     }
 }

package/src/components/FormField/FormFieldEmail.vue

@@ -1,44 +1,20 @@
 <script setup>
-import { ref } from 'vue'
-import FormFieldSlot from './FormFieldSlot.vue'
-
-// Apply all attributes to the input element, not the wrapper div
-defineOptions({
-    inheritAttrs: false,
-})
-
-const props = defineProps({
-    modelValue: [
-        String,
-        Number
-    ], //vue3 specific v-model pattern
-})
-
-defineEmits(['update:modelValue']) //vue3 specific v-model pattern
-
-const input = ref(null)
+import FormFieldText from './FormFieldText.vue'
 </script>
 <template>
-<FormFieldSlot
-    class="rsui-form-field-email"
-    :id="$attrs.id"
+<FormFieldText class="rsui-form-field-email"
+    type="email"
 >
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
-    <input ref="input"
-        v-bind="$attrs"
-        type="email"
-        :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
-    >
     <template #help v-if="$slots.help">
         <slot name="help"></slot>
     </template>
     <template #error v-if="$slots.error">
         <slot name="error"></slot>
     </template>
-</FormFieldSlot>
+</FormFieldText>
 </template>
 <style lang="scss" scoped>
 </style>

package/src/components/FormField/FormFieldHidden.vue

@@ -1,19 +1,21 @@
 <script setup>
-import { ref } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
 
-// Apply all attributes to the input element, not the wrapper div
 defineOptions({
     inheritAttrs: false,
 })
 
-const input = ref(null)
+const model = defineModel()
 </script>
 <template>
 <FormFieldSlot
     class="rsui-form-field-hidden"
 >
-    <input ref="input"
+    <input
+        v-model="model"
+        :id="$attrs.id"
+        :name="$attrs.name"
+        :required="$attrs.required"
         type="hidden"
     >
     <template #error v-if="$slots.error">

package/src/components/FormField/FormFieldPassword.vue

@@ -1,46 +1,14 @@
 <script setup>
-import { ref } from 'vue'
-import FormFieldSlot from './FormFieldSlot.vue'
-
-// Apply all attributes to the input element, not the wrapper div
-defineOptions({
-    inheritAttrs: false,
-})
-
-const props = defineProps({
-    modelValue: [
-        String,
-        Number
-    ], //vue3 specific v-model pattern
-})
-
-defineEmits(['update:modelValue']) //vue3 specific v-model pattern
-
-const input = ref(null)
+import FormFieldText from './FormFieldText.vue'
 </script>
 <template>
-<FormFieldSlot
-    class="rsui-form-field-password"
-    :id="$attrs.id"
+<FormFieldText class="rsui-form-field-password"
+    type="password"
 >
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
 
-    <div :class="{
-        'rsui-form-field-password__group': true,
-        'rsui-form-field-password__group--toggle': $slots.toggle,
-    }">
-        <input ref="input"
-            type="password"
-            v-bind="$attrs"
-            :value="modelValue"
-            @input="$emit('update:modelValue', $event.target.value)"
-        >
-
-        <slot name="toggle"></slot>
-    </div>
-
     <template #help v-if="$slots.help">
         <slot name="help"></slot>
     </template>
@@ -48,19 +16,7 @@ const input = ref(null)
     <template #error v-if="$slots.error">
         <slot name="error"></slot>
     </template>
-</FormFieldSlot>
+</FormFieldText>
 </template>
 <style lang="scss" scoped>
-.rsui-form-field-password {
-    @apply relative;
-
-    &__group {
-        @apply relative;
-        &--toggle {
-            input {
-                @apply pr-12;
-            }
-        }
-    }
-}
 </style>

package/src/components/FormField/FormFieldPasswordToggle.vue

@@ -1,13 +1,8 @@
 <script setup>
 import { ref } from 'vue'
-import FormFieldPassword from './FormFieldPassword.vue'
+import FormFieldText from './FormFieldText.vue'
 import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/outline'
 
-// Apply all attributes to the input element, not the wrapper div
-defineOptions({
-    inheritAttrs: false,
-})
-
 const show = ref(false)
 
 function togglePassword() {
@@ -15,24 +10,19 @@ function togglePassword() {
 }
 </script>
 <template>
-<FormFieldPassword
-    v-bind="$attrs"
+<FormFieldText class="rsui-form-field-password"
     :type="show ? 'text' : 'password'"
 >
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
 
-    <template #toggle>
-        <div class="rsui-form-field-password__toggle"
-            @click="togglePassword"
+    <template #suffix>
+        <div class="rsui-form-field-password__icon"
+            @click.prevent="togglePassword"
         >
-            <EyeIcon v-if="!show"
-                class="rsui-form-field-password__toggle-icon"
-            ></EyeIcon>
-            <EyeSlashIcon v-if="show"
-                class="rsui-form-field-password__toggle-icon"
-            ></EyeSlashIcon>
+            <EyeIcon v-if="!show"></EyeIcon>
+            <EyeSlashIcon v-if="show"></EyeSlashIcon>
         </div>
     </template>
 
@@ -43,17 +33,15 @@ function togglePassword() {
     <template #error v-if="$slots.error">
         <slot name="error"></slot>
     </template>
-</FormFieldPassword>
+</FormFieldText>
 </template>
 <style lang="scss" scoped>
 .rsui-form-field-password {
-    &__toggle {
-        @apply absolute top-px bottom-px right-px rounded-tr rounded-br;
-        @apply flex items-center justify-center px-3 select-none cursor-pointer;
+    &__icon {
+        @apply size-5 text-rsui-default;
     }
-
-    &__toggle-icon {
-        @apply w-5 h-5;
+    :deep(.rsui-form-field-text__suffix) {
+        @apply pl-0;
     }
 }
 </style>

package/src/components/FormField/FormFieldSearch.vue

@@ -1,26 +1,15 @@
 <script setup>
-import { ref } from 'vue'
 import FormFieldText from './FormFieldText.vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
-
-// Apply all attributes to the input element, not the wrapper div
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<FormFieldText
-    v-bind="$attrs"
-    class="rsui-form-field-search"
->
+<FormFieldText class="rsui-form-field-search">
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
 
-    <template #prefix class="search">
-        <div class="rsui-form-field-search__prefix">
-            <MagnifyingGlassIcon class="rsui-form-field-search__icon"></MagnifyingGlassIcon>
-        </div>
+    <template #prefix>
+        <MagnifyingGlassIcon class="rsui-form-field-search__icon"></MagnifyingGlassIcon>
     </template>
 
     <template #help v-if="$slots.help">
@@ -34,13 +23,11 @@ defineOptions({
 </template>
 <style lang="scss" scoped>
 .rsui-form-field-search {
-    &__prefix {
-        @apply absolute top-px bottom-px left-px rounded-tl rounded-bl;
-        @apply flex items-center justify-center select-none;
-        @apply w-10 pointer-events-none;
-    }
     &__icon {
-        @apply size-5 text-rsui-medium;
+        @apply size-5 text-rsui-light;
+    }
+    :deep(.rsui-form-field-text__prefix) {
+        @apply pr-0;
     }
 }
 </style>

package/src/components/FormField/FormFieldSelect.vue

@@ -4,31 +4,28 @@ import { onClickOutside } from '@vueuse/core'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { ChevronDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
 
-// Apply all attributes to the input element, not the wrapper div
 defineOptions({
     inheritAttrs: false,
 })
 
+const model = defineModel({ default: '' })
+
 const props = defineProps({
-    modelValue: [
-        String,
-        Number
-    ], //vue3 specific v-model pattern
     options: {
         type: Array,
         default: () => []
     },
 })
 
-const emit = defineEmits(['update:modelValue', 'change']) //vue3 specific v-model pattern
+const emit = defineEmits(['change'])
 
-const formFieldSelect = ref(null)
+const formFieldSelectElement = ref(null)
 
-onClickOutside(formFieldSelect, () => close())
+onClickOutside(formFieldSelectElement, () => close())
 
 const isOpen = ref(false)
 
-function toggle() {
+function toggleOptions() {
     isOpen.value = !isOpen.value
 }
 
@@ -36,39 +33,31 @@ function close() {
     isOpen.value = false
 }
 
-
-function onClick() {
-    toggle()
-}
-
-function onChange(event) {
-    emit('change', event)
-    emit('update:modelValue', event.target.value)
-    close()
-}
-
 function choose(option) {
+    model.value = option.value
     emit('change', option.value)
-    emit('update:modelValue', option.value)
     close()
 }
 </script>
 <template>
 <FormFieldSlot
-    ref="formFieldSelect"
+    ref="formFieldSelectElement"
     class="rsui-form-field-select"
     :id="$attrs.id"
+    :compact="$attrs.compact"
 >
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
-    <div :class="{
-        'rsui-form-field-select__group': true,
-    }">
+    <div class="rsui-form-field-select__group">
         <select
-            v-bind="$attrs"
-            @click="onClick"
-            @change="onChange"
+            v-model="model"
+            :id="$attrs.id"
+            :name="$attrs.name"
+            :disabled="$attrs.disabled"
+            :required="$attrs.required"
+            @click.prevent="toggleOptions"
+            @change.prevent
         >
             <option value="">
                 <slot name="default-option">
@@ -102,9 +91,11 @@ function choose(option) {
                 <div class="rsui-form-field-select__option rsui-form-field-select__option--disabled"
                     value=""
                 >
-                    <slot name="default-option">
-                        Select an option
-                    </slot>
+                    <div class="rsui-form-field-select__option-label">
+                        <slot name="default-option">
+                            Select an option
+                        </slot>
+                    </div>
                 </div>
                 <div v-for="option in options"
                     :key="option.value"
@@ -164,10 +155,15 @@ function choose(option) {
 
     &__group {
         @apply relative;
-    }
 
-    select {
-        @apply pr-14 truncate bg-none;
+        select {
+            @apply pl-5 pr-14 truncate;
+            @apply appearance-none rounded-full cursor-pointer;
+            @apply focus:ring focus:ring-rsui-light focus:border-rsui-light;
+            option {
+                @apply hidden;
+            }
+        }
     }
 
     &__options {

package/src/components/FormField/FormFieldSlot.vue

@@ -1,7 +1,13 @@
 <script setup>
 import { computed, useAttrs } from 'vue'
 
-// Apply all attributes to the input element, not the wrapper div
+const props = defineProps({
+    compact: {
+        type: Boolean,
+        required: false,
+    },
+})
+
 defineOptions({
     inheritAttrs: false,
 })
@@ -9,8 +15,11 @@ defineOptions({
 const attrs = useAttrs()
 
 const formFieldSlotClass = computed(() => [
+    attrs.class,
     'rsui-form-field-slot',
-    attrs.class
+    {
+        'rsui-form-field-slot--compact': props.compact,
+    },
 ])
 </script>
 <template>
@@ -24,29 +33,43 @@ const formFieldSlotClass = computed(() => [
             <slot name="label"></slot>
         </label>
     </div>
-    <slot></slot>
-    <div v-if="$slots.help"
-        class="rsui-form-field-slot__help"
-    >
-        <slot name="help"></slot>
-    </div>
-    <div v-if="$slots.error"
-        class="rsui-form-field-slot__error"
-    >
-        <slot name="error"></slot>
+    <div class="rsui-form-field-slot__field">
+        <slot></slot>
+        <div v-if="$slots.help"
+            class="rsui-form-field-slot__help"
+        >
+            <slot name="help"></slot>
+        </div>
+        <div v-if="$slots.error"
+            class="rsui-form-field-slot__error"
+        >
+            <slot name="error"></slot>
+        </div>
     </div>
 </div>
 </template>
 <style lang="scss" scoped>
 .rsui-form-field-slot {
-    @apply flex flex-col space-y-1 border-0 bg-transparent p-0;
+    @apply flex flex-col gap-y-1 border-0 bg-transparent p-0;
+    &--compact {
+        @apply flex-row justify-between gap-x-2;
+        .rsui-form-field-slot {
+            &__label {
+                @apply pt-3 truncate;
+            }
+        }
+    }
 
     &__label {
         label {
-            @apply block font-medium text-base text-gray-700;
+            @apply font-medium text-base text-gray-700;
         }
     }
 
+    &__field {
+        @apply shrink-0 flex flex-col gap-y-1;
+    }
+
     &__help {
         @apply text-xs text-gray-500;
     }
@@ -58,17 +81,21 @@ const formFieldSlotClass = computed(() => [
 </style>
 <style lang="scss">
 .rsui-form-field-slot {
-    input:not([type='checkbox']):not([type='radio']), select {
-        @apply block w-full border rounded-md shadow-sm text-base transition py-2 px-3;
-        @apply bg-white placeholder-gray-300 border-gray-300;
-        @apply focus:ring focus:ring-gray-300 focus:ring-opacity-50 focus:outline-none ring-0 focus:bg-white focus:border-gray-400;
-        @apply invalid:border-red-500 invalid:ring invalid:ring-red-500 invalid:ring-opacity-20;
+    input[type='text'],
+    input[type='email'],
+    input[type='password']
+    {
+        @apply flex-1;
+        @apply text-base text-rsui-default transition py-3 px-4 outline-none focus:outline-none;
+        @apply bg-white placeholder-rsui-light;
+        @apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:ring-0;
     }
     select {
-        @apply appearance-none rounded-full px-5 cursor-pointer;
-        option {
-            @apply hidden;
-        }
+        @apply block w-full border ring-0 bg-none;
+        @apply text-base text-rsui-default transition py-3 px-4 rounded-md outline-none focus:outline-none;
+        @apply bg-white placeholder-rsui-light border-rsui-grey-200;
+        @apply invalid:border-danger invalid:ring-0;
+        @apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:ring-0;
     }
 }
 </style>

package/src/components/FormField/FormFieldText.vue

@@ -2,45 +2,50 @@
 import { ref } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
 
-// Apply all attributes to the input element, not the wrapper div
 defineOptions({
     inheritAttrs: false,
 })
 
-const props = defineProps({
-    modelValue: [
-        String,
-        Number
-    ], //vue3 specific v-model pattern
-})
+defineEmits(['input'])
 
-defineEmits(['update:modelValue']) //vue3 specific v-model pattern
+const model = defineModel()
 
-const input = ref(null)
+const inputElement = ref(null)
 </script>
 <template>
 <FormFieldSlot
-    class="rsui-form-field-text"
     :id="$attrs.id"
+    :class="$attrs.class || 'rsui-form-field-text'"
+    :compact="$attrs.compact"
 >
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
-    <div :class="{
-        'rsui-form-field-text__group': true,
-        'rsui-form-field-text__group--prefix': $slots.prefix,
-        'rsui-form-field-text__group--suffix': $slots.suffix,
-    }">
-        <slot name="prefix"></slot>
-
-        <input ref="input"
-            v-bind="$attrs"
-            type="text"
-            :value="modelValue"
-            @input="$emit('update:modelValue', $event.target.value)"
+    <div class="rsui-form-field-text__group">
+        <div v-if="$slots.prefix"
+            class="rsui-form-field-text__prefix"
+            @click.prevent="$refs.inputElement.focus()"
+        >
+            <slot name="prefix"></slot>
+        </div>
+
+        <input ref="inputElement"
+            v-model="model"
+            :id="$attrs.id"
+            :name="$attrs.name"
+            :type="$attrs.type || 'text'"
+            :placeholder="$attrs.placeholder"
+            :disabled="$attrs.disabled"
+            :required="$attrs.required"
+            @input="$emit('input', $event)"
         >
 
-        <slot name="suffix"></slot>
+        <div v-if="$slots.suffix"
+            class="rsui-form-field-text__suffix"
+            @click.prevent="$refs.inputElement.focus()"
+        >
+            <slot name="suffix"></slot>
+        </div>
     </div>
 
     <template #help v-if="$slots.help">
@@ -57,7 +62,21 @@ const input = ref(null)
     @apply relative;
 
     &__group {
-        @apply relative;
+        @apply relative flex flex-nowrap overflow-hidden;
+        @apply text-base transition;
+        @apply w-full border rounded-md ring-0;
+        @apply bg-white placeholder-rsui-light border-rsui-grey-200;
+        @apply has-[:focus]:ring has-[:focus]:ring-rsui-light has-[:focus]:border-rsui-light;
+        @apply has-[:invalid]:border-danger has-[:invalid]:ring-0;
+        @apply has-[:disabled]:text-rsui-light has-[:disabled]:bg-rsui-grey-200 has-[:disbaled]:ring-0;
+    }
+    &__prefix {
+        @apply flex items-center justify-center px-4 select-none;
+        @apply bg-transparent;
+    }
+    &__suffix {
+        @apply flex items-center justify-center px-4 select-none;
+        @apply bg-transparent;
     }
 }
 </style>

package/src/components/FormField/FormFieldTextSuffix.vue

@@ -1,24 +1,14 @@
 <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"
->
+<FormFieldText class="rsui-form-field-suffix">
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
 
     <template #suffix>
-        <div class="rsui-form-field-text__suffix">
-            <slot name="suffix"></slot>
-        </div>
+        <slot name="suffix"></slot>
     </template>
 
     <template #help v-if="$slots.help">
@@ -31,11 +21,10 @@ defineOptions({
 </FormFieldText>
 </template>
 <style lang="scss" scoped>
-.rsui-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;
+.rsui-form-field-suffix {
+    :deep(.rsui-form-field-text__suffix) {
+        @apply border-l rounded-r-md;
+        @apply bg-rsui-grey-200 border-rsui-light;
     }
 }
 </style>