@redseed/redseed-ui-vue3 1.1.2 → 1.2.0

package/index.js

@@ -13,6 +13,7 @@ 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'
@@ -26,6 +27,9 @@ 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 MetaItem from './src/components/PageHeading/MetaItem.vue'
+import Modal from './src/components/Modal/Modal.vue'
+import PageHeading from './src/components/PageHeading/PageHeading.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'
@@ -46,6 +50,7 @@ export {
     FormFieldHidden,
     FormFieldPassword,
     FormFieldPasswordToggle,
+    FormFieldSearch,
     FormFieldsLogin,
     FormFieldSlot,
     FormFieldsRegister,
@@ -59,6 +64,9 @@ export {
     LogoRedSeedCourses,
     LogoRedSeedLMS,
     MessageBox,
+    MetaItem,
+    Modal,
+    PageHeading,
     SignInWithGoogle,
     SignUpWithGoogle,
     TwoColumnLayout,

package/package.json

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

package/src/components/Button/ButtonPrimary.vue

@@ -28,8 +28,8 @@ const buttonPrimaryClass = computed(() => [
     <template #icon v-if="$slots.icon">
         <slot name="icon"></slot>
     </template>
-    <template #label v-if="$slots.label">
-        <slot name="label"></slot>
+    <template #label v-if="$slots.default">
+        <slot></slot>
     </template>
 </ButtonSlot>
 </template>

package/src/components/Button/ButtonPrimaryLight.vue

@@ -14,9 +14,11 @@ defineOptions({
     <template #icon v-if="$slots.icon">
         <slot name="icon"></slot>
     </template>
-    <template #label v-if="$slots.label">
-        <slot name="label"></slot>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
     </template>
+
 </ButtonPrimary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonPrimaryLightRounded.vue

@@ -15,9 +15,11 @@ defineOptions({
     <template #icon v-if="$slots.icon">
         <slot name="icon"></slot>
     </template>
-    <template #label v-if="$slots.label">
-        <slot name="label"></slot>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
     </template>
+
 </ButtonPrimary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonPrimaryRounded.vue

@@ -14,9 +14,11 @@ defineOptions({
     <template #icon v-if="$slots.icon">
         <slot name="icon"></slot>
     </template>
-    <template #label v-if="$slots.label">
-        <slot name="label"></slot>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
     </template>
+
 </ButtonPrimary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonSecondary.vue

@@ -28,8 +28,8 @@ const buttonSecondaryClass = computed(() => [
     <template #icon v-if="$slots.icon">
         <slot name="icon"></slot>
     </template>
-    <template #label v-if="$slots.label">
-        <slot name="label"></slot>
+    <template #label v-if="$slots.default">
+        <slot></slot>
     </template>
 </ButtonSlot>
 </template>

package/src/components/Button/ButtonSecondaryLight.vue

@@ -14,9 +14,11 @@ defineOptions({
     <template #icon v-if="$slots.icon">
         <slot name="icon"></slot>
     </template>
-    <template #label v-if="$slots.label">
-        <slot name="label"></slot>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
     </template>
+
 </ButtonSecondary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonSecondaryLightRounded.vue

@@ -15,9 +15,11 @@ defineOptions({
     <template #icon v-if="$slots.icon">
         <slot name="icon"></slot>
     </template>
-    <template #label v-if="$slots.label">
-        <slot name="label"></slot>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
     </template>
+
 </ButtonSecondary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonSecondaryRounded.vue

@@ -14,9 +14,11 @@ defineOptions({
     <template #icon v-if="$slots.icon">
         <slot name="icon"></slot>
     </template>
-    <template #label v-if="$slots.label">
-        <slot name="label"></slot>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
     </template>
+
 </ButtonSecondary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonSlot.vue

@@ -46,6 +46,8 @@ const props = defineProps({
     },
 })
 
+defineEmits(['click'])
+
 const defaultSize = computed(() => !props.xs && !props.sm && !props.md && !props.lg)
 
 const type = computed(() => props.submit ? 'submit' : 'button')
@@ -95,6 +97,7 @@ const buttonSlotIconClass = computed(() => [
     :class="buttonSlotClass"
     :type="type"
     v-bind="$attrs"
+    @click="$emit('click', $event)"
 >
     <span v-if="$slots.icon"
         :class="buttonSlotIconClass"

package/src/components/Form/FormFieldsLogin.vue

@@ -68,11 +68,9 @@ const formRef = ref(props.form)
     :formRef="formRef"
 >
     <ButtonPrimary full lg submit :disabled="form.processing">
-        <template #label>
-            <slot name="submit-label">
-                Log in
-            </slot>
-        </template>
+        <slot name="submit-label">
+            Log in
+        </slot>
     </ButtonPrimary>
 </slot>
 

package/src/components/Form/FormFieldsRegister.vue

@@ -100,11 +100,9 @@ const formRef = ref(props.form)
     :formRef="formRef"
 >
     <ButtonPrimary full lg submit :disabled="form.processing">
-        <template #label>
-            <slot name="submit-label">
-                Register
-            </slot>
-        </template>
+        <slot name="submit-label">
+            Register
+        </slot>
     </ButtonPrimary>
 </slot>
 

package/src/components/FormField/FormFieldSearch.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { ref } from 'vue'
+import FormFieldText from './FormFieldText.vue'
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
+
+// Apply all attributes to the input element, not the wrapper div
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<FormFieldText
+    v-bind="$attrs"
+    class="search-input"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+
+    <template #prefix class="search">
+        <div class="form-field-text__prefix">
+            <MagnifyingGlassIcon class="form-field-text__search-icon"></MagnifyingGlassIcon>
+        </div>
+    </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>
+.form-field-text {
+    &__prefix {
+        @apply absolute top-px bottom-px left-px rounded-tl rounded-bl;
+        @apply flex items-center justify-center select-none;
+        @apply w-10 pointer-events-none;
+    }
+    &__search-icon {
+        @apply w-5 h-5;
+    }
+}
+</style>
+<style lang="scss">
+.form-field-text__group--prefix {
+    input.search-input:not([type='checkbox']):not([type='radio']) {
+        @apply pl-10;
+    }
+}
+</style>

package/src/components/FormField/FormFieldText.vue

@@ -26,11 +26,13 @@ const input = ref(null)
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
-
     <div :class="{
         'form-field-text__group': true,
+        'form-field-text__group--prefix': $slots.prefix,
         'form-field-text__group--suffix': $slots.suffix,
     }">
+        <slot name="prefix"></slot>
+
         <input ref="input"
             v-bind="$attrs"
             type="text"

package/src/components/Modal/Modal.vue

@@ -0,0 +1,200 @@
+<script setup>
+import { computed, onMounted, onUnmounted, watch } from 'vue'
+
+// Apply all attributes to the input element, not the wrapper div
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    // modal states
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    closeable: {
+        type: Boolean,
+        default: true,
+    },
+    // modal sizes
+    sm: {
+        type: Boolean,
+        default: false,
+    },
+    md: {
+        type: Boolean,
+        default: false,
+    },
+    lg: {
+        type: Boolean,
+        default: false,
+    },
+    // modal alignment
+    top: {
+        type: Boolean,
+        default: false,
+    },
+    center: {
+        type: Boolean,
+        default: false,
+    },
+    bottom: {
+        type: Boolean,
+        default: false,
+    },
+    // modal variants
+    footerEnd: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const defaultMaxWidth = computed(() => !props.sm && !props.md && !props.lg)
+const defaultAlignment = computed(() => !props.top && !props.center && !props.bottom)
+
+const modalContentClass = computed(() => {
+    return [
+        'modal__content',
+        {
+            'modal__content--sm': props.sm,
+            'modal__content--md': props.md,
+            'modal__content--lg': props.lg || defaultMaxWidth.value,
+
+            'modal__content--top': props.top,
+            'modal__content--center': props.center || defaultAlignment.value,
+            'modal__content--bottom': props.bottom,
+        }
+    ]
+})
+
+const emit = defineEmits(['close'])
+
+watch(() => props.show, () => {
+    if (props.show) {
+        document.body.style.overflow = 'hidden'
+    } else {
+        document.body.style.overflow = null
+    }
+})
+
+const close = () => {
+    if (props.closeable) {
+        emit('close')
+    }
+}
+
+const closeOnEscape = (e) => {
+    if (e.key === 'Escape' && props.show) {
+        close()
+    }
+}
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape))
+
+onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEscape)
+    document.body.style.overflow = null
+})
+</script>
+
+<template>
+<teleport to="body">
+    <transition leave-active-class="duration-200">
+        <div v-show="show" class="modal" v-bind="$attrs" scroll-region>
+            <transition
+                enter-active-class="ease-out duration-300"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="ease-in duration-200"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+            >
+                <div v-show="show" class="modal__background-wrapper" @click="close">
+                    <div class="modal__background" />
+                </div>
+            </transition>
+
+            <transition
+                enter-active-class="ease-out duration-200"
+                enter-from-class="opacity-0 xs:scale-80"
+                enter-to-class="opacity-100 xs:scale-100"
+                leave-active-class="ease-in duration-100"
+                leave-from-class="opacity-100 xs:scale-100"
+                leave-to-class="opacity-0 xs:scale-80"
+            >
+                <div v-if="show"
+                    :class="modalContentClass"
+                >
+                    <div v-if="$slots.header && show"
+                        class="modal__header"
+                    >
+                        <slot name="header"></slot>
+                    </div>
+                    <div v-if="show"
+                        class="modal__body"
+                    >
+                        <slot></slot>
+                    </div>
+                    <div v-if="$slots.footer && show"
+                        :class="{
+                            'modal__footer': true,
+                            'modal__footer--end': footerEnd,
+                        }"
+                    >
+                        <slot name="footer"></slot>
+                    </div>
+                </div>
+            </transition>
+        </div>
+    </transition>
+</teleport>
+</template>
+<style lang="scss" scoped>
+.modal {
+    @apply fixed inset-0 overflow-y-auto px-4 py-6 md:px-0 z-50;
+    &__background-wrapper {
+        @apply fixed inset-0 transform transition-all backdrop-blur-sm;
+    }
+    &__background {
+        @apply absolute inset-0 bg-transparent opacity-100;
+    }
+    &__content {
+        @apply absolute max-h-full inset-x-0 overflow-auto overscroll-contain transform transition-all;
+        @apply border rounded-lg shadow-full md:w-full md:mx-auto mx-4;
+        @apply bg-gray-100 border-gray-200;
+        &--sm {
+            @apply sm:max-w-sm xs:mx-4 sm:mx-auto;
+        }
+        &--md {
+            @apply sm:max-w-lg sm:mx-auto;
+        }
+        &--lg {
+            @apply sm:max-w-2xl;
+        }
+        &--top {
+            @apply top-0;
+        }
+        &--center {
+            @apply top-1/2 -translate-y-1/2;
+        }
+        &--bottom {
+            @apply bottom-0;
+        }
+    }
+
+    &__header {
+        @apply sticky top-0 z-1;
+        @apply p-4 bg-gray-100 shrink-0 text-lg font-semibold;
+    }
+    &__body{
+        @apply p-4 bg-white;
+    }
+    &__footer {
+        @apply sticky bottom-0 z-1;
+        @apply p-4 bg-gray-100 shrink-0;
+        &--end {
+            @apply flex justify-end items-center space-x-2;
+        }
+    }
+}
+</style>

package/src/components/PageHeading/MetaItem.vue

@@ -0,0 +1,22 @@
+<script setup>
+</script>
+<template>
+<div class="meta-item">
+    <div class="meta-item__label">
+        <slot name="label"></slot>
+    </div>
+    <div class="meta-item__value">
+        <slot name="value"></slot>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.meta-item {
+    &__label {
+        @apply text-xs text-gray-400;
+    }
+    &__value {
+        @apply text-base;
+    }
+}
+</style>

package/src/components/PageHeading/PageHeading.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { ref, computed } from 'vue'
+import Modal from '../Modal/Modal.vue'
+import ButtonSecondaryLight from '../Button/ButtonSecondaryLight.vue'
+
+const showMetaModal = ref(false)
+</script>
+<template>
+<div class="page-heading">
+    <div class="page-heading__top">
+        <div v-if="$slots.title"
+            class="page-heading__title"
+        >
+            <h1>
+                <slot name="title"></slot>
+            </h1>
+        </div>
+
+        <div v-if="$slots.status || $slots.actions"
+            class="page-heading__status-actions"
+        >
+            <div v-if="$slots.status"
+                class="page-heading__status"
+            >
+                <slot name="status"></slot>
+            </div>
+
+            <div class="page-heading__actions">
+                <div v-if="$slots['meta-action-label'] && $slots['meta']"
+                    class="page-heading__meta-action"
+                >
+                    <ButtonSecondaryLight @click="showMetaModal = true">
+                        <slot name="meta-action-label"></slot>
+                    </ButtonSecondaryLight>
+
+                    <Modal v-if="$slots['meta']"
+                        class="page-heading__meta-modal"
+                        :show="showMetaModal"
+                        @close="showMetaModal = false"
+                        sm
+                        footerEnd
+                    >
+                        <template #header v-if="$slots['meta-modal-header']">
+                            <slot name="meta-modal-header"></slot>
+                        </template>
+
+                        <div v-if="$slots.meta"
+                            class="page-heading__meta-modal__body"
+                        >
+                            <slot name="meta"></slot>
+                        </div>
+
+                        <template #footer v-if="$slots['meta-modal-footer'] || $slots['meta-modal-close-label']">
+                            <div v-if="$slots['meta-modal-footer']">
+                                <slot name="meta-modal-footer"></slot>
+                            </div>
+
+                            <ButtonSecondaryLight @click="showMetaModal = false">
+                                <slot name="meta-modal-close-label"></slot>
+                            </ButtonSecondaryLight>
+                        </template>
+                    </Modal>
+                </div>
+
+                <slot name="actions"></slot>
+            </div>
+        </div>
+
+        <div v-if="$slots.search"
+            class="page-heading__search"
+        >
+            <slot name="search"></slot>
+        </div>
+    </div>
+
+    <div v-if="$slots['meta']"
+        class="page-heading__meta"
+    >
+        <slot name="meta"></slot>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.page-heading {
+    @apply w-full flex justify-between space-y-4;
+    @apply lg:flex-col;
+    &__top {
+        @apply w-full flex flex-col items-start space-y-2 flex-wrap;
+        @apply lg:flex-row lg:space-y-0 lg:items-center;
+    }
+    &__title {
+        @apply pr-2;
+        h1 {
+            @apply text-2xl font-bold;
+            @apply lg:mr-4;
+        }
+    }
+    &__status-actions {
+        @apply flex-1 flex space-x-2 items-center justify-between lg:pr-2;
+    }
+    &__actions {
+        @apply flex-1 flex space-x-2 items-center justify-end;
+    }
+    &__meta-action {
+        @apply flex lg:hidden;
+    }
+    &__search {
+        @apply w-full pt-2 lg:pt-0 lg:w-auto;
+    }
+    &__meta-modal {
+        @apply lg:hidden;
+        &__body {
+            @apply flex flex-col space-y-4;
+        }
+    }
+    &__meta {
+        @apply hidden;
+        @apply lg:flex space-x-4;
+    }
+}
+</style>