@redseed/redseed-ui-vue3 2.9.2 → 2.10.0

package/package.json

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

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

@@ -155,15 +155,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 +194,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

@@ -80,24 +80,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,7 @@ const inputElement = ref(null)
 <template>
 <FormFieldSlot
     :id="$attrs.id"
-    :class="$attrs.class || 'rsui-form-field-text'"
+    :class="[$attrs.class, 'rsui-form-field-text']"
     :compact="$attrs.compact"
 >
     <template #label v-if="$slots.label">
@@ -60,7 +60,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 +77,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,

package/src/components/Loader/Loader.vue

@@ -1,56 +1,47 @@
-<script>
-import { ref, computed, defineComponent } from 'vue'
-import { useLottie } from '../../helpers/Lottie'
+<script setup>
+import { ref, computed } from 'vue'
 import LottieCubes from './LottieCubes.json'
+import { useLottie } from '../../helpers/Lottie'
 
-export default defineComponent({
-    props:{
-        primary: {
-            type: Boolean,
-            default: false,
-        },
-        secondary: {
-            type: Boolean,
-            default: false,
-        },
-        tertiary: {
-            type: Boolean,
-            default: false,
-        },
-        danger: {
-            type: Boolean,
-            default: false,
-        },
-        white: {
-            type: Boolean,
-            default: false,
-        },
+const props = defineProps({
+    primary: {
+        type: Boolean,
+        default: false,
     },
+    secondary: {
+        type: Boolean,
+        default: false,
+    },
+    tertiary: {
+        type: Boolean,
+        default: false,
+    },
+    danger: {
+        type: Boolean,
+        default: false,
+    },
+    white: {
+        type: Boolean,
+        default: false,
+    },
+})
 
-    setup(props) {
-        const defaultColor = computed(() => !props.secondary && !props.tertiary && !props.danger && !props.white)
-
-        const loaderClass = computed(() => [
-            'rsui-loader',
-            {
-                'rsui-loader--primary': props.primary || defaultColor.value,
-                'rsui-loader--secondary': props.secondary,
-                'rsui-loader--tertiary': props.tertiary,
-                'rsui-loader--danger': props.danger,
-                'rsui-loader--white': props.white,
-            }
-        ])
+const defaultColor = computed(() => !props.secondary && !props.tertiary && !props.danger && !props.white)
 
-        const loaderElement = ref(null)
+const loaderClass = computed(() => [
+    'rsui-loader',
+    {
+        'rsui-loader--primary': props.primary || defaultColor.value,
+        'rsui-loader--secondary': props.secondary,
+        'rsui-loader--tertiary': props.tertiary,
+        'rsui-loader--danger': props.danger,
+        'rsui-loader--white': props.white,
+    }
+])
 
-        useLottie(loaderElement, LottieCubes)
+const loaderElement = ref(null)
 
-        return {
-            loaderClass,
-            loaderElement,
-        }
-    }
-})
+useLottie(loaderElement, LottieCubes)
 </script>
 <template>
 <div ref="loaderElement"

package/src/helpers/Lottie.js

@@ -1,5 +1,4 @@
 import { ref, watchEffect } from 'vue'
-import Lottie from 'lottie-web'
 
 export function useLottie(elementRef, animationData = null) {
 
@@ -15,13 +14,14 @@ export function useLottie(elementRef, animationData = null) {
     function loadLottie() {
         if (!elementRef.value) return
         if (!animationData) return
+        if (!window.lottie) return
 
         if (lottieAnimation.value) {
             lottieAnimation.value.destroy()
             lottieAnimation.value = null
         }
 
-        lottieAnimation.value = Lottie.loadAnimation({
+        lottieAnimation.value = window.lottie.loadAnimation({
             container: elementRef.value,
             renderer: 'svg',
             loop: true,