@redseed/redseed-ui-vue3 1.9.2 → 1.10.0

package/index.js

@@ -1,111 +1,20 @@
-import BadgeSlot from './src/components/Badge/BadgeSlot.vue'
-import BadgeSuccess from './src/components/Badge/BadgeSuccess.vue'
-import ButtonDanger from './src/components/Button/ButtonDanger.vue'
-import ButtonDangerFull from './src/components/Button/ButtonDangerFull.vue'
-import ButtonDangerFullRounded from './src/components/Button/ButtonDangerFullRounded.vue'
-import ButtonDangerRounded from './src/components/Button/ButtonDangerRounded.vue'
-import ButtonPrimary from './src/components/Button/ButtonPrimary.vue'
-import ButtonPrimaryFull from './src/components/Button/ButtonPrimaryFull.vue'
-import ButtonPrimaryFullRounded from './src/components/Button/ButtonPrimaryFullRounded.vue'
-import ButtonPrimaryRounded from './src/components/Button/ButtonPrimaryRounded.vue'
-import ButtonSecondary from './src/components/Button/ButtonSecondary.vue'
-import ButtonSecondaryFull from './src/components/Button/ButtonSecondaryFull.vue'
-import ButtonSecondaryFullRounded from './src/components/Button/ButtonSecondaryFullRounded.vue'
-import ButtonSecondaryRounded from './src/components/Button/ButtonSecondaryRounded.vue'
-import ButtonSlot from './src/components/Button/ButtonSlot.vue'
-import ButtonTertiary from './src/components/Button/ButtonTertiary.vue'
-import ButtonTertiaryFull from './src/components/Button/ButtonTertiaryFull.vue'
-import ButtonTertiaryFullRounded from './src/components/Button/ButtonTertiaryFullRounded.vue'
-import ButtonTertiaryRounded from './src/components/Button/ButtonTertiaryRounded.vue'
-import ButtonGroup from './src/components/ButtonGroup/ButtonGroup.vue'
-import ButtonGroupItem from './src/components/ButtonGroup/ButtonGroupItem.vue'
-import Card from './src/components/Card/Card.vue'
-import DropdownMenu from './src/components/DropdownMenu/DropdownMenu.vue'
-import DropdownOption from './src/components/DropdownMenu/DropdownOption.vue'
-import FormFieldCheckbox from './src/components/FormField/FormFieldCheckbox.vue'
-import FormFieldEmail from './src/components/FormField/FormFieldEmail.vue'
-import FormFieldHidden from './src/components/FormField/FormFieldHidden.vue'
-import FormFieldPassword from './src/components/FormField/FormFieldPassword.vue'
-import FormFieldPasswordToggle from './src/components/FormField/FormFieldPasswordToggle.vue'
-import FormFieldSearch from './src/components/FormField/FormFieldSearch.vue'
-import FormFieldsLogin from './src/components/Form/FormFieldsLogin.vue'
-import FormFieldSlot from './src/components/FormField/FormFieldSlot.vue'
-import FormFieldsRegister from './src/components/Form/FormFieldsRegister.vue'
-import FormFieldText from './src/components/FormField/FormFieldText.vue'
-import FormFieldTextSuffix from './src/components/FormField/FormFieldTextSuffix.vue'
-import FormWrapperBuild from './src/components/Form/FormWrapperBuild.vue'
-import FormWrapperLMS from './src/components/Form/FormWrapperLMS.vue'
-import Image from './src/components/Image/Image.vue'
-import Image3By1 from './src/components/Image/Image3By1.vue'
-import Image9By16 from './src/components/Image/Image9By16.vue'
-import Image16By9 from './src/components/Image/Image16By9.vue'
-import ImageCircle from './src/components/Image/ImageCircle.vue'
-import LogoRedSeedBuild from './src/components/Logo/LogoRedSeedBuild.vue'
-import LogoRedSeedCoach from './src/components/Logo/LogoRedSeedCoach.vue'
-import LogoRedSeedCourses from './src/components/Logo/LogoRedSeedCourses.vue'
-import LogoRedSeedLMS from './src/components/Logo/LogoRedSeedLMS.vue'
-import MessageBox from './src/components/MessageBox/MessageBox.vue'
-import MetaInfo from './src/components/MetaInfo/MetaInfo.vue'
-import Modal from './src/components/Modal/Modal.vue'
-import PageHeading from './src/components/PageHeading/PageHeading.vue'
-import ProgressCircle from './src/components/Progress/ProgressCircle.vue'
-import SignInWithGoogle from './src/components/Social/SignInWithGoogle.vue'
-import SignUpWithGoogle from './src/components/Social/SignUpWithGoogle.vue'
-import TwoColumnLayout from './src/components/TwoColumnLayout/TwoColumnLayout.vue'
-
-export {
-    BadgeSlot,
-    BadgeSuccess,
-    ButtonDanger,
-    ButtonDangerFull,
-    ButtonDangerFullRounded,
-    ButtonDangerRounded,
-    ButtonGroup,
-    ButtonGroupItem,
-    ButtonPrimary,
-    ButtonPrimaryFull,
-    ButtonPrimaryFullRounded,
-    ButtonPrimaryRounded,
-    ButtonSecondary,
-    ButtonSecondaryFull,
-    ButtonSecondaryFullRounded,
-    ButtonSecondaryRounded,
-    ButtonSlot,
-    ButtonTertiary,
-    ButtonTertiaryFull,
-    ButtonTertiaryFullRounded,
-    ButtonTertiaryRounded,
-    Card,
-    DropdownMenu,
-    DropdownOption,
-    FormFieldCheckbox,
-    FormFieldEmail,
-    FormFieldHidden,
-    FormFieldPassword,
-    FormFieldPasswordToggle,
-    FormFieldSearch,
-    FormFieldsLogin,
-    FormFieldSlot,
-    FormFieldsRegister,
-    FormFieldText,
-    FormFieldTextSuffix,
-    FormWrapperBuild,
-    FormWrapperLMS,
-    Image,
-    Image3By1,
-    Image9By16,
-    Image16By9,
-    ImageCircle,
-    LogoRedSeedBuild,
-    LogoRedSeedCoach,
-    LogoRedSeedCourses,
-    LogoRedSeedLMS,
-    MessageBox,
-    MetaInfo,
-    Modal,
-    PageHeading,
-    ProgressCircle,
-    SignInWithGoogle,
-    SignUpWithGoogle,
-    TwoColumnLayout,
-}
+export * from './src/components/Badge'
+export * from './src/components/Button'
+export * from './src/components/ButtonGroup'
+export * from './src/components/Card'
+export * from './src/components/DropdownMenu'
+export * from './src/components/Form'
+export * from './src/components/FormField'
+export * from './src/components/Image'
+export * from './src/components/Link'
+export * from './src/components/List'
+export * from './src/components/Logo'
+export * from './src/components/MessageBox'
+export * from './src/components/MetaInfo'
+export * from './src/components/Modal'
+export * from './src/components/PageHeading'
+export * from './src/components/Pagination'
+export * from './src/components/Progress'
+export * from './src/components/Social'
+export * from './src/components/Sorting'
+export * from './src/components/TwoColumnLayout'

package/package.json

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

package/src/components/Badge/index.js

@@ -0,0 +1,7 @@
+import BadgeSlot from './BadgeSlot.vue'
+import BadgeSuccess from './BadgeSuccess.vue'
+
+export {
+    BadgeSlot,
+    BadgeSuccess,
+}

package/src/components/Button/index.js

@@ -0,0 +1,37 @@
+import ButtonDanger from './ButtonDanger.vue'
+import ButtonDangerFull from './ButtonDangerFull.vue'
+import ButtonDangerFullRounded from './ButtonDangerFullRounded.vue'
+import ButtonDangerRounded from './ButtonDangerRounded.vue'
+import ButtonPrimary from './ButtonPrimary.vue'
+import ButtonPrimaryFull from './ButtonPrimaryFull.vue'
+import ButtonPrimaryFullRounded from './ButtonPrimaryFullRounded.vue'
+import ButtonPrimaryRounded from './ButtonPrimaryRounded.vue'
+import ButtonSecondary from './ButtonSecondary.vue'
+import ButtonSecondaryFull from './ButtonSecondaryFull.vue'
+import ButtonSecondaryFullRounded from './ButtonSecondaryFullRounded.vue'
+import ButtonSecondaryRounded from './ButtonSecondaryRounded.vue'
+import ButtonSlot from './ButtonSlot.vue'
+import ButtonTertiary from './ButtonTertiary.vue'
+import ButtonTertiaryFull from './ButtonTertiaryFull.vue'
+import ButtonTertiaryFullRounded from './ButtonTertiaryFullRounded.vue'
+import ButtonTertiaryRounded from './ButtonTertiaryRounded.vue'
+
+export {
+    ButtonDanger,
+    ButtonDangerFull,
+    ButtonDangerFullRounded,
+    ButtonDangerRounded,
+    ButtonPrimary,
+    ButtonPrimaryFull,
+    ButtonPrimaryFullRounded,
+    ButtonPrimaryRounded,
+    ButtonSecondary,
+    ButtonSecondaryFull,
+    ButtonSecondaryFullRounded,
+    ButtonSecondaryRounded,
+    ButtonSlot,
+    ButtonTertiary,
+    ButtonTertiaryFull,
+    ButtonTertiaryFullRounded,
+    ButtonTertiaryRounded,
+}

package/src/components/ButtonGroup/index.js

@@ -0,0 +1,7 @@
+import ButtonGroup from './ButtonGroup.vue'
+import ButtonGroupItem from './ButtonGroupItem.vue'
+
+export {
+    ButtonGroup,
+    ButtonGroupItem,
+}

package/src/components/Card/Card.vue

@@ -39,18 +39,28 @@ function clicked() {
     </div>
     <div class="rsui-card__content">
         <div v-if="$slots.title || $slots.status"
-            class="rsui-card__content-top"
+            :class="[
+                'rsui-card__content-top',
+                {
+                    'rsui-card__content-top--action': $slots['title-action'],
+                }
+            ]"
         >
             <div v-if="$slots.title"
-                class="rsui-card__content-title"
+                class="rsui-card__title"
             >
                 <slot name="title"></slot>
             </div>
             <div v-if="$slots.status"
-                class="rsui-card__content-status"
+                class="rsui-card__title-status"
             >
                 <slot name="status"></slot>
             </div>
+            <div v-if="$slots['title-action']"
+                class="rsui-card__title-action"
+            >
+                <slot name="title-action"></slot>
+            </div>
         </div>
         <slot></slot>
         <div v-if="$slots.meta"
@@ -69,7 +79,7 @@ function clicked() {
 <style lang="scss" scoped>
 .rsui-card {
     @apply flex flex-col;
-    @apply select-none overflow-hidden transition duration-200;
+    @apply select-none transition duration-200;
     @apply border border-gray-100 rounded-lg bg-white shadow-full-light;
     &--hoverable {
         @apply hover:shadow-md;
@@ -78,16 +88,19 @@ function clicked() {
         @apply cursor-pointer;
     }
     &__image {
-        // @apply aspect-video overflow-hidden;
+        @apply rounded-t-lg overflow-hidden;
     }
     &__content {
         @apply min-h-14 p-3 flex-1;
         &-top {
             @apply flex justify-between space-x-2 pb-2;
+            &--action {
+                @apply items-center;
+            }
         }
-        &-title {
-            @apply h-12 text-lg font-semibold leading-6 line-clamp-2;
-        }
+    }
+    &__title {
+        @apply max-h-12 text-lg font-semibold leading-6 line-clamp-2;
     }
     &__meta {
         @apply grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 mt-4;

package/src/components/Card/CardResource.vue

@@ -0,0 +1,26 @@
+<script setup>
+import Card from '../Card/Card.vue'
+</script>
+<template>
+<Card class="rsui-card-resource"
+    :clickable="false"
+    :hoverable="false"
+>
+    <template #title>
+        <slot name="card-title"></slot>
+    </template>
+    <template #title-action>
+        <slot name="card-action"></slot>
+    </template>
+    <div class="rsui-card-resource__content">
+        <slot></slot>
+    </div>
+</Card>
+</template>
+<style lang="scss" scoped>
+.rsui-card-resource {
+    &__content {
+        @apply mt-4;
+    }
+}
+</style>

package/src/components/Card/index.js

@@ -0,0 +1,7 @@
+import Card from './Card.vue'
+import CardResource from './CardResource.vue'
+
+export {
+    Card,
+    CardResource,
+}

package/src/components/DropdownMenu/index.js

@@ -0,0 +1,7 @@
+import DropdownMenu from './DropdownMenu.vue'
+import DropdownOption from './DropdownOption.vue'
+
+export {
+    DropdownMenu,
+    DropdownOption,
+}

package/src/components/Form/index.js

@@ -0,0 +1,13 @@
+import FormFieldsLogin from './FormFieldsLogin.vue'
+import FormFieldsRegister from './FormFieldsRegister.vue'
+import FormSlot from './FormSlot.vue'
+import FormWrapperBuild from './FormWrapperBuild.vue'
+import FormWrapperLMS from './FormWrapperLMS.vue'
+
+export {
+    FormFieldsLogin,
+    FormFieldsRegister,
+    FormSlot,
+    FormWrapperBuild,
+    FormWrapperLMS,
+}

package/src/components/FormField/FormFieldCheckbox.vue

@@ -67,7 +67,7 @@ const proxyChecked = computed({
         @apply w-6 h-6 shrink-0 relative bg-white;
 
         input[type="checkbox"] {
-            @apply appearance-none absolute inset-0 rounded transition shadow-sm;
+            @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;

package/src/components/FormField/FormFieldSearch.vue

@@ -40,7 +40,7 @@ defineOptions({
         @apply w-10 pointer-events-none;
     }
     &__icon {
-        @apply w-5 h-5;
+        @apply size-5 text-medium;
     }
 }
 </style>

package/src/components/FormField/FormFieldSelect.vue

@@ -0,0 +1,209 @@
+<script setup>
+import { ref } from 'vue'
+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 props = defineProps({
+    modelValue: [
+        String,
+        Number
+    ], //vue3 specific v-model pattern
+    options: {
+        type: Array,
+        default: () => []
+    },
+})
+
+const emit = defineEmits(['update:modelValue']) //vue3 specific v-model pattern
+
+const formFieldSelect = ref(null)
+
+onClickOutside(formFieldSelect, () => close())
+
+const isOpen = ref(false)
+
+function toggle() {
+    isOpen.value = !isOpen.value
+}
+
+function close() {
+    isOpen.value = false
+}
+
+
+function onClick() {
+    toggle()
+}
+
+function onChange(event) {
+    emit('update:modelValue', event.target.value)
+    close()
+}
+
+function choose(option) {
+    emit('update:modelValue', option.value)
+    close()
+}
+</script>
+<template>
+<FormFieldSlot
+    ref="formFieldSelect"
+    class="rsui-form-field-select"
+    :id="$attrs.id"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+    <div :class="{
+        'rsui-form-field-select__group': true,
+    }">
+        <select
+            v-bind="$attrs"
+            @click="onClick"
+            @change="onChange"
+        >
+            <option value="">
+                <slot name="default-option">
+                    Select an option
+                </slot>
+            </option>
+            <option
+                v-for="option in options"
+                :key="option.value"
+                :value="option.value"
+                :selected="option.value === modelValue"
+            >
+                {{ option.label }}
+            </option>
+        </select>
+
+        <transition
+            enter-active-class="enter-active-class"
+            enter-from-class="enter-from-class"
+            enter-to-class="enter-to-class"
+            leave-active-class="leave-active-class"
+            leave-from-class="leave-from-class"
+            leave-to-class="leave-to-class"
+        >
+            <div v-show="isOpen"
+                :class="[
+                    'rsui-form-field-select__options',
+                    { 'rsui-form-field-select__options--open': isOpen }
+                ]"
+            >
+                <div class="rsui-form-field-select__option rsui-form-field-select__option--disabled"
+                    value=""
+                >
+                    <slot name="default-option">
+                        Select an option
+                    </slot>
+                </div>
+                <div v-for="option in options"
+                    :key="option.value"
+                    class="rsui-form-field-select__option"
+                    @click="choose(option)"
+                >
+                    <div class="rsui-form-field-select__option-label"
+                        :title="option.label"
+                    >
+                        {{ option.label }}
+                    </div>
+                    <div class="rsui-form-field-select__option-icon">
+                        <CheckIcon v-if="option.value === modelValue"></CheckIcon>
+                    </div>
+                </div>
+            </div>
+        </transition>
+        <div :class="[
+            'rsui-form-field-select__icon',
+            { 'rsui-form-field-select__icon--open': isOpen }
+        ]">
+            <ChevronDownIcon></ChevronDownIcon>
+        </div>
+    </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>
+.enter-active-class {
+    @apply transition ease-out duration-200;
+}
+.enter-from-class {
+    @apply transform opacity-0 scale-95;
+}
+.enter-to-class {
+    @apply transform opacity-100 scale-100;
+}
+.leave-active-class {
+    @apply transition ease-in duration-75;
+}
+.leave-from-class {
+    @apply transform opacity-100 scale-100;
+}
+.leave-to-class {
+    @apply transform opacity-0 scale-95;
+}
+
+.rsui-form-field-select {
+    @apply relative;
+
+    &__group {
+        @apply relative;
+    }
+
+    select {
+        @apply pr-14 truncate;
+    }
+
+    &__options {
+        @apply hidden absolute origin-top w-full z-50;
+        @apply bg-white p-2 mt-2 rounded-md shadow-full-light;
+        &--open {
+            @apply block;
+        }
+    }
+
+    &__option {
+        @apply flex flex-nowrap items-center justify-between cursor-pointer px-4 py-3 rounded-md;
+        @apply bg-white hover:bg-gray-200 text-default-dark transition;
+        &--disabled {
+            @apply opacity-50 hover:bg-white cursor-auto;
+        }
+        &-label {
+            @apply text-base truncate;
+        }
+        &-icon {
+            @apply size-5;
+        }
+        svg {
+            @apply size-5;
+        }
+    }
+
+    &__icon {
+        @apply absolute top-0 right-5 bottom-0 flex items-center justify-center;
+        @apply text-secondary h-full w-8 pointer-events-none;
+        &--open {
+            svg {
+                @apply -rotate-180;
+            }
+        }
+        svg {
+            @apply size-6 transform transition-transform;
+        }
+    }
+}
+</style>

package/src/components/FormField/FormFieldSlot.vue

@@ -58,11 +58,17 @@ const formFieldSlotClass = computed(() => [
 </style>
 <style lang="scss">
 .rsui-form-field-slot {
-    input:not([type='checkbox']):not([type='radio']) {
-        @apply block w-full border rounded shadow-sm text-base transition py-2 px-3;
+    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;
     }
+    select {
+        @apply appearance-none rounded-full px-5 cursor-pointer;
+        option {
+            @apply hidden;
+        }
+    }
 }
 </style>

package/src/components/FormField/index.js

@@ -0,0 +1,23 @@
+import FormFieldCheckbox from './FormFieldCheckbox.vue'
+import FormFieldEmail from './FormFieldEmail.vue'
+import FormFieldHidden from './FormFieldHidden.vue'
+import FormFieldPassword from './FormFieldPassword.vue'
+import FormFieldPasswordToggle from './FormFieldPasswordToggle.vue'
+import FormFieldSearch from './FormFieldSearch.vue'
+import FormFieldSelect from './FormFieldSelect.vue'
+import FormFieldSlot from './FormFieldSlot.vue'
+import FormFieldText from './FormFieldText.vue'
+import FormFieldTextSuffix from './FormFieldTextSuffix.vue'
+
+export {
+    FormFieldCheckbox,
+    FormFieldEmail,
+    FormFieldHidden,
+    FormFieldPassword,
+    FormFieldPasswordToggle,
+    FormFieldSearch,
+    FormFieldSelect,
+    FormFieldSlot,
+    FormFieldText,
+    FormFieldTextSuffix,
+}

package/src/components/Image/Image16By9.vue

@@ -7,7 +7,13 @@ defineOptions({
 </script>
 <template>
 <div class="rsui-image-16/9">
-    <Image v-bind="$attrs"></Image>
+    <Image v-bind="$attrs">
+        <template v-for="(_, name) in $slots"
+            v-slot:[name]="slotProps"
+        >
+            <slot :name="name" v-bind="slotProps"></slot>
+        </template>
+    </Image>
 </div>
 </template>
 <style lang="scss" scoped>

package/src/components/Image/Image3By1.vue

@@ -7,7 +7,13 @@ defineOptions({
 </script>
 <template>
 <div class="rsui-image-3/1">
-    <Image v-bind="$attrs"></Image>
+    <Image v-bind="$attrs">
+        <template v-for="(_, name) in $slots"
+            v-slot:[name]="slotProps"
+        >
+            <slot :name="name" v-bind="slotProps"></slot>
+        </template>
+    </Image>
 </div>
 </template>
 <style lang="scss" scoped>

package/src/components/Image/Image9By16.vue

@@ -7,7 +7,13 @@ defineOptions({
 </script>
 <template>
 <div class="rsui-image-9/16">
-    <Image v-bind="$attrs"></Image>
+    <Image v-bind="$attrs">
+        <template v-for="(_, name) in $slots"
+            v-slot:[name]="slotProps"
+        >
+            <slot :name="name" v-bind="slotProps"></slot>
+        </template>
+    </Image>
 </div>
 </template>
 <style lang="scss" scoped>

package/src/components/Image/ImageCircle.vue

@@ -7,7 +7,13 @@ defineOptions({
 </script>
 <template>
 <div class="rsui-image-circle">
-    <Image v-bind="$attrs"></Image>
+    <Image v-bind="$attrs">
+        <template v-for="(_, name) in $slots"
+            v-slot:[name]="slotProps"
+        >
+            <slot :name="name" v-bind="slotProps"></slot>
+        </template>
+    </Image>
 </div>
 </template>
 <style lang="scss" scoped>