@redseed/redseed-ui-vue3 2.9.3 → 2.10.1

package/package.json

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

package/src/components/FormField/FormFieldCheckbox.vue

@@ -35,7 +35,10 @@ function check(event) {
                 >
             </div>
             <div v-if="$slots.label"
-                class="rsui-form-field-checkbox__label"
+                :class="[
+                    'rsui-form-field-checkbox__label',
+                    { 'rsui-form-field-checkbox__label--required': $attrs.required !== undefined },
+                ]"
             >
                 <slot name="label"></slot>
             </div>
@@ -53,6 +56,9 @@ function check(event) {
     }
     &__label {
         @apply ml-2 font-normal;
+        &--required {
+            @apply after:content-['*'] after:text-danger;
+        }
     }
     &__check {
         @apply size-6 shrink-0 relative bg-white rounded-md cursor-pointer;
@@ -69,5 +75,9 @@ function check(event) {
             @apply size-full relative z-1;
         }
     }
+
+    :deep(.rsui-form-field-slot__label) {
+        @apply after:hidden;
+    }
 }
 </style>

package/src/components/FormField/FormFieldNumber.vue

@@ -0,0 +1,20 @@
+<script setup>
+import FormFieldText from './FormFieldText.vue'
+</script>
+<template>
+<FormFieldText class="rsui-form-field-number"
+    type="number"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </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>
+</style>

package/src/components/FormField/FormFieldSelect.vue

@@ -42,8 +42,9 @@ function choose(option) {
 <template>
 <FormFieldSlot
     ref="formFieldSelectElement"
-    class="rsui-form-field-select"
     :id="$attrs.id"
+    :class="[$attrs.class, 'rsui-form-field-select']"
+    :required="$attrs.required"
     :compact="$attrs.compact"
 >
     <template #label v-if="$slots.label">
@@ -155,15 +156,6 @@ function choose(option) {
 
     &__group {
         @apply relative;
-
-        select {
-            @apply pl-5 pr-14 truncate;
-            @apply appearance-none rounded-full;
-            @apply focus:ring focus:ring-highlight focus:border-highlight;
-            option {
-                @apply hidden;
-            }
-        }
     }
 
     &__options {
@@ -203,5 +195,19 @@ function choose(option) {
             @apply size-6 transform transition-transform;
         }
     }
+
+    select {
+        @apply block w-full border ring-0 bg-none cursor-pointer appearance-none transition;
+        @apply py-3 pl-5 pr-14 truncate;
+        @apply text-base rounded-full outline-none focus:outline-none;
+        @apply bg-white text-rsui-default placeholder-rsui-light border-rsui-grey-200;
+        @apply focus:ring focus:ring-highlight focus:border-highlight;
+        @apply invalid:border-danger invalid:ring-0;
+        @apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:ring-0 disabled:cursor-default;
+
+        option {
+            @apply hidden;
+        }
+    }
 }
 </style>

package/src/components/FormField/FormFieldSlot.vue

@@ -21,11 +21,18 @@ const formFieldSlotClass = computed(() => [
         'rsui-form-field-slot--compact': props.compact,
     },
 ])
+
+const formFieldSlotLabelClass = computed(() => [
+    'rsui-form-field-slot__label',
+    {
+        'rsui-form-field-slot__label--required': attrs.required !== undefined,
+    },
+])
 </script>
 <template>
 <div :class="formFieldSlotClass">
     <div v-if="$slots.label"
-        class="rsui-form-field-slot__label"
+        :class="formFieldSlotLabelClass"
     >
         <label
             :for="$attrs.id"
@@ -57,12 +64,15 @@ const formFieldSlotClass = computed(() => [
         @apply flex-row justify-between gap-x-2;
         .rsui-form-field-slot {
             &__label {
-                @apply pt-3 truncate;
+                @apply pt-3 whitespace-nowrap;
             }
         }
     }
 
     &__label {
+        &--required {
+            @apply after:content-['*'] after:text-danger after:ml-1;
+        }
         label {
             @apply font-semibold text-base text-rsui-default;
         }
@@ -80,24 +90,4 @@ const formFieldSlotClass = computed(() => [
         @apply text-sm text-danger;
     }
 }
-</style>
-<style lang="scss">
-.rsui-form-field-slot {
-    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 block w-full border ring-0 bg-none cursor-pointer;
-        @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 disabled:cursor-default;
-    }
-}
 </style>

package/src/components/FormField/FormFieldText.vue

@@ -15,7 +15,8 @@ const inputElement = ref(null)
 <template>
 <FormFieldSlot
     :id="$attrs.id"
-    :class="$attrs.class || 'rsui-form-field-text'"
+    :class="[$attrs.class, 'rsui-form-field-text']"
+    :required="$attrs.required"
     :compact="$attrs.compact"
 >
     <template #label v-if="$slots.label">
@@ -60,7 +61,6 @@ const inputElement = ref(null)
 <style lang="scss" scoped>
 .rsui-form-field-text {
     @apply relative;
-
     &__group {
         @apply relative flex flex-nowrap overflow-hidden;
         @apply text-base transition;
@@ -78,5 +78,24 @@ const inputElement = ref(null)
         @apply flex items-center justify-center px-4 select-none;
         @apply bg-transparent;
     }
+
+    input[type='date'],
+    input[type='datetime-local'],
+    input[type='email'],
+    input[type='month'],
+    input[type='number'],
+    input[type='password'],
+    input[type='search'],
+    input[type='tel'],
+    input[type='text'],
+    input[type='time'],
+    input[type='url'],
+    input[type='week']
+    {
+        @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;
+    }
 }
 </style>

package/src/components/FormField/index.js

@@ -1,6 +1,7 @@
 import FormFieldCheckbox from './FormFieldCheckbox.vue'
 import FormFieldEmail from './FormFieldEmail.vue'
 import FormFieldHidden from './FormFieldHidden.vue'
+import FormFieldNumber from './FormFieldNumber.vue'
 import FormFieldPassword from './FormFieldPassword.vue'
 import FormFieldPasswordToggle from './FormFieldPasswordToggle.vue'
 import FormFieldSearch from './FormFieldSearch.vue'
@@ -13,6 +14,7 @@ export {
     FormFieldCheckbox,
     FormFieldEmail,
     FormFieldHidden,
+    FormFieldNumber,
     FormFieldPassword,
     FormFieldPasswordToggle,
     FormFieldSearch,