@redseed/redseed-ui-vue3 8.3.0 → 8.4.0

package/package.json

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

package/src/components/Card/MetricCard.vue

@@ -1,35 +1,18 @@
 <script setup>
 import Card from './Card.vue'
-
-const emit = defineEmits(['click:icon'])
-
-function handleIconClick() {
-    emit('click:icon')
-}
+import FlexContainer from '../Layouts/FlexContainer.vue'
 </script>
 
 <template>
 <Card class="rsui-metric-card">
-    <div class="rsui-metric-card__container">
-        <div class="rsui-metric-card__header">
-            <div class="rsui-metric-card__avatar">
-                <slot name="avatar"></slot>
-            </div>
-            <div class="rsui-metric-card__icon"
-                @click="handleIconClick"
-            >
-                <slot name="icon"></slot>
-            </div>
+    <FlexContainer flexCol justifyCenter itemsCenter>
+        <div class="rsui-metric-card__number">
+            <slot name="number"></slot>
         </div>
 
-        <div class="rsui-metric-card__content">
-            <div class="rsui-metric-card__title" v-if="$slots.title">
-                <slot name="title"></slot>
-            </div>
-            <div class="rsui-metric-card__value" v-if="$slots.value">
-                <slot name="value"></slot>
-            </div>
+        <div class="rsui-metric-card__label">
+            <slot name="label"></slot>
         </div>
-    </div>
+    </FlexContainer>
 </Card>
 </template>

package/src/components/FormField/FormFieldSelect.vue

@@ -20,6 +20,7 @@ const props = defineProps({
 const emit = defineEmits(['change'])
 
 const isOpen = ref(false)
+const isMobileDevice = ref(false)
 
 function toggleOptions() {
     isOpen.value = !isOpen.value
@@ -40,6 +41,13 @@ function nativeChoose(event) {
     emit('change', event.target.value)
 }
 
+function handleSelectClick(event) {
+    if (!isMobileDevice.value) {
+        event.preventDefault()
+        toggleOptions()
+    }
+}
+
 const formFieldSelectElement = ref(null)
 const selectElement = ref(null)
 const dropdownElement = ref(null)
@@ -100,6 +108,12 @@ function calculateDropdownPosition() {
 }
 
 onMounted(() => {
+    // Check if the device is a mobile device
+    // by checking if the device has a touch screen
+    // or if the device has a max touch points
+    isMobileDevice.value = 'ontouchstart' in window
+        || (navigator.maxTouchPoints && navigator.maxTouchPoints > 0)
+
     window.addEventListener('resize', () => calculateDropdownPosition())
 })
 
@@ -117,7 +131,11 @@ defineExpose({
 <FormFieldSlot
     ref="formFieldSelectElement"
     :id="$attrs.id"
-    :class="[$attrs.class, 'rsui-form-field-select']"
+    :class="[
+        $attrs.class,
+        'rsui-form-field-select',
+        { 'rsui-form-field-select--mobile': isMobileDevice }
+    ]"
     :required="$attrs.required"
     :showAsterisk="$attrs.showAsterisk"
     :compact="$attrs.compact"
@@ -135,7 +153,7 @@ defineExpose({
             :id="$attrs.id"
             :name="$attrs.name"
             :required="$attrs.required"
-            @click.prevent="toggleOptions"
+            @click="handleSelectClick"
             @change.prevent="nativeChoose"
         >
             <option value="" disabled>
@@ -153,7 +171,7 @@ defineExpose({
             </option>
         </select>
 
-        <Teleport to="body">
+        <Teleport to="body" v-if="!isMobileDevice">
             <transition
                 enter-active-class="enter-active-class"
                 enter-from-class="enter-from-class"

package/src/components/Layouts/FlexContainer.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    flexRow: {
+        type: Boolean,
+        default: false,
+    },
+    flexRowReverse: {
+        type: Boolean,
+        default: false,
+    },
+    flexCol: {
+        type: Boolean,
+        default: false,
+    },
+    flexColReverse: {
+        type: Boolean,
+        default: false,
+    },
+    flexNowrap: {
+        type: Boolean,
+        default: false,
+    },
+    flexWrap: {
+        type: Boolean,
+        default: false,
+    },
+    flexWrapReverse: {
+        type: Boolean,
+        default: false,
+    },
+    justifyStart: {
+        type: Boolean,
+        default: false,
+    },
+    justifyCenter: {
+        type: Boolean,
+        default: false,
+    },
+    justifyEnd: {
+        type: Boolean,
+        default: false,
+    },
+    justifyBetween: {
+        type: Boolean,
+        default: false,
+    },
+    justifyAround: {
+        type: Boolean,
+        default: false,
+    },
+    justifyEvenly: {
+        type: Boolean,
+        default: false,
+    },
+    itemsStart: {
+        type: Boolean,
+        default: false,
+    },
+    itemsCenter: {
+        type: Boolean,
+        default: false,
+    },
+    itemsEnd: {
+        type: Boolean,
+        default: false,
+    },
+    itemsBaseline: {
+        type: Boolean,
+        default: false,
+    },
+    itemsBaselineLast: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const attrs = useAttrs()
+
+const containerClasses = computed(() => [
+    'rsui-flex-container',
+])
+
+const contentClasses = computed(() => [
+    'rsui-flex-container__content',
+    {
+        'rsui-flex-container__content--flex-row': props.flexRow,
+        'rsui-flex-container__content--flex-row-reverse': props.flexRowReverse,
+        'rsui-flex-container__content--flex-col': props.flexCol,
+        'rsui-flex-container__content--flex-col-reverse': props.flexColReverse,
+        'rsui-flex-container__content--flex-nowrap': props.flexNowrap,
+        'rsui-flex-container__content--flex-wrap': props.flexWrap,
+        'rsui-flex-container__content--flex-wrap-reverse': props.flexWrapReverse,
+        'rsui-flex-container__content--justify-start': props.justifyStart,
+        'rsui-flex-container__content--justify-center': props.justifyCenter,
+        'rsui-flex-container__content--justify-end': props.justifyEnd,
+        'rsui-flex-container__content--justify-between': props.justifyBetween,
+        'rsui-flex-container__content--justify-around': props.justifyAround,
+        'rsui-flex-container__content--justify-evenly': props.justifyEvenly,
+        'rsui-flex-container__content--items-start': props.itemsStart,
+        'rsui-flex-container__content--items-center': props.itemsCenter,
+        'rsui-flex-container__content--items-end': props.itemsEnd,
+        'rsui-flex-container__content--items-baseline': props.itemsBaseline,
+        'rsui-flex-container__content--items-baseline-last': props.itemsBaselineLast,
+        'rsui-flex-container__content--items-stretch': props.itemsStretch,
+    },
+    attrs.class,
+])
+</script>
+
+<template>
+    <div :class="containerClasses">
+        <div :class="contentClasses">
+            <slot></slot>
+        </div>
+    </div>
+</template>

package/src/components/Layouts/FlexContainerLG.vue

@@ -0,0 +1,11 @@
+<script setup>
+import FlexContainer from './FlexContainer.vue'
+</script>
+
+<template>
+    <FlexContainer
+        class="rsui-flex-container__content--lg"
+    >
+        <slot></slot>
+    </FlexContainer>
+</template>

package/src/components/Layouts/FlexContainerMD.vue

@@ -0,0 +1,11 @@
+<script setup>
+import FlexContainer from './FlexContainer.vue'
+</script>
+
+<template>
+    <FlexContainer
+        class="rsui-flex-container__content--md"
+    >
+        <slot></slot>
+    </FlexContainer>
+</template>

package/src/components/Layouts/FlexContainerSM.vue

@@ -0,0 +1,11 @@
+<script setup>
+import FlexContainer from './FlexContainer.vue'
+</script>
+
+<template>
+    <FlexContainer
+        class="rsui-flex-container__content--sm"
+    >
+        <slot></slot>
+    </FlexContainer>
+</template>

package/src/components/Layouts/FlexContainerXL.vue

@@ -0,0 +1,11 @@
+<script setup>
+import FlexContainer from './FlexContainer.vue'
+</script>
+
+<template>
+    <FlexContainer
+        class="rsui-flex-container__content--xl"
+    >
+        <slot></slot>
+    </FlexContainer>
+</template>

package/src/components/Layouts/GridContainer.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+
+const props = defineProps({
+    smallColumns: {
+        type: [String],
+        default: '1',
+        validator: (value) => ['1', '2', '3', '4', '5', '6'].includes(value),
+    },
+    mediumColumns: {
+        type: [String],
+        default: '2',
+        validator: (value) => ['1', '2', '3', '4', '5', '6'].includes(value),
+    },
+    largeColumns: {
+        type: [String],
+        default: '4',
+        validator: (value) => ['1', '2', '3', '4', '5', '6'].includes(value),
+    },
+    justifyItemsStart: {
+        type: Boolean,
+        default: false,
+    },
+    justifyItemsCenter: {
+        type: Boolean,
+        default: false,
+    },
+    justifyItemsEnd: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const attrs = useAttrs()
+
+const containerClasses = computed(() => [
+    'rsui-grid-container',
+])
+
+const contentClasses = computed(() => [
+    'rsui-grid-container__content',
+    {
+        'rsui-grid-container__content--cols-1-sm': props.smallColumns === '1',
+        'rsui-grid-container__content--cols-2-sm': props.smallColumns === '2',
+        'rsui-grid-container__content--cols-3-sm': props.smallColumns === '3',
+        'rsui-grid-container__content--cols-4-sm': props.smallColumns === '4',
+        'rsui-grid-container__content--cols-5-sm': props.smallColumns === '5',
+        'rsui-grid-container__content--cols-6-sm': props.smallColumns === '6',
+        'rsui-grid-container__content--cols-1-md': props.mediumColumns === '1',
+        'rsui-grid-container__content--cols-2-md': props.mediumColumns === '2',
+        'rsui-grid-container__content--cols-3-md': props.mediumColumns === '3',
+        'rsui-grid-container__content--cols-4-md': props.mediumColumns === '4',
+        'rsui-grid-container__content--cols-5-md': props.mediumColumns === '5',
+        'rsui-grid-container__content--cols-6-md': props.mediumColumns === '6',
+        'rsui-grid-container__content--cols-1-lg': props.largeColumns === '1',
+        'rsui-grid-container__content--cols-2-lg': props.largeColumns === '2',
+        'rsui-grid-container__content--cols-3-lg': props.largeColumns === '3',
+        'rsui-grid-container__content--cols-4-lg': props.largeColumns === '4',
+        'rsui-grid-container__content--cols-5-lg': props.largeColumns === '5',
+        'rsui-grid-container__content--cols-6-lg': props.largeColumns === '6',
+        'rsui-grid-container__content--justify-items-start': props.justifyItemsStart,
+        'rsui-grid-container__content--justify-items-center': props.justifyItemsCenter,
+        'rsui-grid-container__content--justify-items-end': props.justifyItemsEnd,
+    },
+    attrs.class,
+])
+</script>
+
+<template>
+    <div :class="containerClasses">
+        <div :class="contentClasses">
+            <slot></slot>
+        </div>
+    </div>
+</template>

package/src/components/Layouts/GridContainerLG.vue

@@ -0,0 +1,11 @@
+<script setup>
+import GridContainer from './GridContainer.vue'
+</script>
+
+<template>
+    <GridContainer
+        class="rsui-grid-container__content--lg"
+    >
+        <slot></slot>
+    </GridContainer>
+</template>

package/src/components/Layouts/GridContainerMD.vue

@@ -0,0 +1,11 @@
+<script setup>
+import GridContainer from './GridContainer.vue'
+</script>
+
+<template>
+    <GridContainer
+        class="rsui-grid-container__content--md"
+    >
+        <slot></slot>
+    </GridContainer>
+</template>

package/src/components/Layouts/GridContainerSM.vue

@@ -0,0 +1,11 @@
+<script setup>
+import GridContainer from './GridContainer.vue'
+</script>
+
+<template>
+    <GridContainer
+        class="rsui-grid-container__content--sm"
+    >
+        <slot></slot>
+    </GridContainer>
+</template>

package/src/components/Layouts/GridContainerXL.vue

@@ -0,0 +1,11 @@
+<script setup>
+import GridContainer from './GridContainer.vue'
+</script>
+
+<template>
+    <GridContainer
+        class="rsui-grid-container__content--xl"
+    >
+        <slot></slot>
+    </GridContainer>
+</template>

package/src/components/Layouts/index.js

@@ -1,3 +1,13 @@
+import FlexContainer from './FlexContainer.vue'
+import FlexContainerSM from './FlexContainerSM.vue'
+import FlexContainerMD from './FlexContainerMD.vue'
+import FlexContainerLG from './FlexContainerLG.vue'
+import FlexContainerXL from './FlexContainerXL.vue'
+import GridContainer from './GridContainer.vue'
+import GridContainerSM from './GridContainerSM.vue'
+import GridContainerMD from './GridContainerMD.vue'
+import GridContainerLG from './GridContainerLG.vue'
+import GridContainerXL from './GridContainerXL.vue'
 import HeroSection from './HeroSection.vue'
 import PageHeader from './PageHeader.vue'
 import Section from './Section.vue'
@@ -7,6 +17,16 @@ import SingleColumnLayout from './SingleColumnLayout.vue'
 import TwoColumnLayout from './TwoColumnLayout.vue'
 
 export {
+    FlexContainer,
+    FlexContainerSM,
+    FlexContainerMD,
+    FlexContainerLG,
+    FlexContainerXL,
+    GridContainer,
+    GridContainerSM,
+    GridContainerMD,
+    GridContainerLG,
+    GridContainerXL,
     HeroSection,
     PageHeader,
     Section,