@redseed/redseed-ui-vue3 1.9.2 → 2.0.0

package/src/components/Button/ButtonTertiaryFull.vue

@@ -11,13 +11,7 @@ defineOptions({
     full
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
+    <slot></slot>
 </ButtonTertiary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonTertiaryFullRounded.vue

@@ -12,13 +12,7 @@ defineOptions({
     rounded
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
+    <slot></slot>
 </ButtonTertiary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonTertiaryRounded.vue

@@ -11,13 +11,7 @@ defineOptions({
     rounded
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
+    <slot></slot>
 </ButtonTertiary>
 </template>
 <style lang="scss" scoped>

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/ButtonGroup.vue

@@ -1,10 +1,6 @@
 <script setup>
 import { computed } from 'vue'
 
-defineOptions({
-    inheritAttrs: false,
-})
-
 const props = defineProps({
     sm: {
         type: Boolean,
@@ -12,7 +8,7 @@ const props = defineProps({
     },
 })
 
-const buttonClass = computed(() => [
+const buttonGroupClass = computed(() => [
     'rsui-button-group',
     {
         'rsui-button-group--sm' : props.sm,
@@ -21,17 +17,12 @@ const buttonClass = computed(() => [
 
 </script>
 <template>
-<div :class="buttonClass">
+<div :class="buttonGroupClass">
     <slot></slot>
 </div>
 </template>
 <style lang="scss">
 .rsui-button-group {
     @apply whitespace-nowrap;
-    &--sm {
-        .rsui-button-group-item {
-            @apply text-xs px-2.5 py-1.5;
-        }
-    }
 }
 </style>

package/src/components/ButtonGroup/ButtonGroupItem.vue

@@ -26,47 +26,39 @@ const buttonClass = computed(() => [
     v-bind="$attrs"
     @click="$emit('click', $event)"
 >
-    <span v-if="$slots.icon" class="rsui-button-group-item__icon">
-        <slot name="icon"></slot>
-    </span>
-    <span v-else class="rsui-button-group-item__label">
+    <span class="rsui-button-group-item__label">
         <slot></slot>
     </span>
 </button>
 </template>
 <style lang="scss" scoped>
 .rsui-button-group-item {
-    // default shape and control
-    @apply inline-flex justify-center items-center select-none outline-none p-2 font-semibold text-sm transition first:rounded-l first:border-l last:rounded-r last:border-r;
+    // default control
+    @apply inline-flex justify-center items-center select-none outline-none p-2 font-semibold text-sm transition;
+    // default shape
+    @apply first:rounded-l-md last:rounded-r-md first:border-l border-r border-y ring-0;
     // default colors
-    @apply bg-white border-r text-default-dark ring-tertiary border-y border-tertiary ;
+    @apply bg-white text-segment-content border-segment-content/30;
     // default hover state
-    @apply hover:border-tertiary hover:bg-tertiary/10 hover:text-default-dark;
-    // default focus state unapplied
-    // @apply focus-visible:border-tertiary focus-visible:text-tertiary focus-visible:ring-4 focus-visible:outline-none focus-visible:ring-gray-100 focus-visible:z-10 relative;
+    @apply hover:bg-segment-content/10;
     // default active/pressed state
-    @apply active:ring-0  active:bg-tertiary-dark/10 active:text-default-dark;
+    @apply active:ring-0  active:bg-white;
     // default disabled state
-    @apply disabled:text-tertiary-dark/10;
-    :deep(svg) {
-        @apply size-5;
-    }
-    &__icon {
-        @apply size-6 inline-flex justify-center items-center;
-        :deep(svg) {
-            @apply size-6;
-        }
+    @apply disabled:text-segment-content/20 disabled:bg-white;
+    &--selected {
+        @apply bg-segment-content/10 active:bg-segment-content/10 cursor-default;
     }
     &__label {
-        @apply gap-x-2 px-1 inline-flex;
+        @apply gap-x-2 px-1 inline-flex items-center;
     }
-    &--selected {
-        @apply bg-tertiary-dark/20 hover:bg-tertiary-dark/20 cursor-default;
+    // child svg icon
+    :deep(svg) {
+        @apply size-5;
     }
 }
 .rsui-button-group--sm {
-    .rsui-button-group-item--icon {
-        @apply p-1 ;
+    .rsui-button-group-item {
+        @apply text-xs;
         :deep(svg) {
             @apply size-4;
         }

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/DropdownMenu.vue

@@ -47,12 +47,7 @@ onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
 <div class="rsui-dropdown-menu">
     <slot name="trigger" :open="open">
         <ButtonTertiary @click="open">
-            <template #icon v-if="$slots['trigger-icon']">
-                <slot name=trigger-icon></slot>
-            </template>
-            <template #default v-if="$slots['trigger-label']">
-                <slot name="trigger-label"></slot>
-            </template>
+            <slot name="trigger-label"></slot>
         </ButtonTertiary>
     </slot>
 

package/src/components/DropdownMenu/DropdownOption.vue

@@ -10,7 +10,7 @@ const emit = defineEmits(['click'])
 </template>
 <style lang="scss" scoped>
 .rsui-dropdown-option {
-    @apply cursor-pointer p-4 bg-white rounded-md text-base text-default-dark transition;
+    @apply cursor-pointer p-4 bg-white rounded-md text-base text-rsui-default transition;
     @apply hover:bg-gray-200;
 }
 </style>

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-rsui-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-rsui-default 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>