@redseed/redseed-ui-vue3 1.1.2 → 1.3.0

package/index.js

@@ -1,18 +1,27 @@
+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 ButtonPrimaryLight from './src/components/Button/ButtonPrimaryLight.vue'
-import ButtonPrimaryLightRounded from './src/components/Button/ButtonPrimaryLightRounded.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 ButtonSecondaryLight from './src/components/Button/ButtonSecondaryLight.vue'
-import ButtonSecondaryLightRounded from './src/components/Button/ButtonSecondaryLightRounded.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 Card from './src/components/Card/Card.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'
@@ -26,26 +35,38 @@ 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'
 
 export {
+    ButtonDanger,
+    ButtonDangerFull,
+    ButtonDangerFullRounded,
+    ButtonDangerRounded,
     ButtonPrimary,
-    ButtonPrimaryLight,
-    ButtonPrimaryLightRounded,
+    ButtonPrimaryFull,
+    ButtonPrimaryFullRounded,
     ButtonPrimaryRounded,
     ButtonSecondary,
-    ButtonSecondaryLight,
-    ButtonSecondaryLightRounded,
+    ButtonSecondaryFull,
+    ButtonSecondaryFullRounded,
     ButtonSecondaryRounded,
     ButtonSlot,
+    ButtonTertiary,
+    ButtonTertiaryFull,
+    ButtonTertiaryFullRounded,
+    ButtonTertiaryRounded,
     Card,
     FormFieldCheckbox,
     FormFieldEmail,
     FormFieldHidden,
     FormFieldPassword,
     FormFieldPasswordToggle,
+    FormFieldSearch,
     FormFieldsLogin,
     FormFieldSlot,
     FormFieldsRegister,
@@ -59,6 +80,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.3.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/Button/ButtonDanger.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonSlot from './ButtonSlot.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const buttonClass = computed(() => [
+    'button-danger',
+])
+</script>
+<template>
+<ButtonSlot
+    :class="buttonClass"
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonSlot>
+</template>
+<style lang="scss" scoped>
+.button-danger {
+    // default colors
+    @apply bg-white text-danger ring-danger/20 border-danger;
+    // default hover state
+    @apply hover:bg-white hover:text-danger-dark hover:border-danger-dark;
+    // default focus state
+    @apply focus-visible:border-transparent focus-visible:text-danger;
+    // default active state
+    @apply active:ring-0 active:text-danger active:border-danger;
+    // default disabled state
+    @apply disabled:text-danger/30 disabled:border-danger/30 disabled:bg-white;
+    @apply disabled:active:ring-0 disabled:focus:ring-0;
+}
+</style>

package/src/components/Button/ButtonDangerFull.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonDanger from './ButtonDanger.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonDanger
+    full
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonDanger>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonDangerFullRounded.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonDanger from './ButtonDanger.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonDanger
+    full
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonDanger>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonDangerRounded.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonDanger from './ButtonDanger.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonDanger
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonDanger>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonPrimary.vue

@@ -6,30 +6,20 @@ defineOptions({
     inheritAttrs: false,
 })
 
-const props = defineProps({
-    light: {
-        type: Boolean,
-        default: false,
-    },
-})
-
-const buttonPrimaryClass = computed(() => [
+const buttonClass = computed(() => [
     'button-primary',
-    {
-        'button-primary--light': props.light,
-    },
 ])
 </script>
 <template>
 <ButtonSlot
-    :class="buttonPrimaryClass"
+    :class="buttonClass"
     v-bind="$attrs"
 >
     <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>
@@ -44,14 +34,5 @@ const buttonPrimaryClass = computed(() => [
     // default disabled state
     @apply disabled:bg-primary/20 disabled:border-transparent;
     @apply disabled:active:ring-0 disabled:focus:ring-0;
-
-    &--light {
-        @apply bg-white text-primary;
-        @apply hover:bg-white hover:text-primary-dark;
-        @apply focus-visible:border-transparent;
-        @apply active:ring-0 active:text-primary;
-        @apply disabled:text-primary/30 disabled:border-primary/30 disabled:bg-white;
-        @apply disabled:active:ring-0 disabled:focus:ring-0;
-    }
 }
 </style>

package/src/components/Button/{ButtonPrimaryLight.vue → ButtonPrimaryFull.vue}

@@ -8,15 +8,17 @@ defineOptions({
 </script>
 <template>
 <ButtonPrimary
-    light
+    full
     v-bind="$attrs"
 >
     <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 → ButtonPrimaryFullRounded.vue}

@@ -8,16 +8,18 @@ defineOptions({
 </script>
 <template>
 <ButtonPrimary
-    light
+    full
     rounded
     v-bind="$attrs"
 >
     <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

@@ -6,30 +6,20 @@ defineOptions({
     inheritAttrs: false,
 })
 
-const props = defineProps({
-    light: {
-        type: Boolean,
-        default: false,
-    },
-})
-
-const buttonSecondaryClass = computed(() => [
+const buttonClass = computed(() => [
     'button-secondary',
-    {
-        'button-secondary--light': props.light,
-    },
 ])
 </script>
 <template>
 <ButtonSlot
-    :class="buttonSecondaryClass"
+    :class="buttonClass"
     v-bind="$attrs"
 >
     <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>
@@ -44,14 +34,5 @@ const buttonSecondaryClass = computed(() => [
     // default disabled state
     @apply disabled:bg-secondary/20 disabled:border-transparent;
     @apply disabled:active:ring-0 disabled:focus:ring-0;
-
-    &--light {
-        @apply bg-white text-secondary;
-        @apply hover:bg-white hover:text-secondary-dark;
-        @apply focus-visible:border-transparent;
-        @apply active:ring-0 active:text-secondary;
-        @apply disabled:text-secondary/30 disabled:border-secondary/30 disabled:bg-white;
-        @apply disabled:active:ring-0 disabled:focus:ring-0;
-    }
 }
 </style>

package/src/components/Button/{ButtonSecondaryLight.vue → ButtonSecondaryFull.vue}

@@ -8,15 +8,17 @@ defineOptions({
 </script>
 <template>
 <ButtonSecondary
-    light
+    full
     v-bind="$attrs"
 >
     <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 → ButtonSecondaryFullRounded.vue}

@@ -8,16 +8,18 @@ defineOptions({
 </script>
 <template>
 <ButtonSecondary
-    light
+    full
     rounded
     v-bind="$attrs"
 >
     <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/Button/ButtonTertiary.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonSlot from './ButtonSlot.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const buttonClass = computed(() => [
+    'button-tertiary',
+])
+</script>
+<template>
+<ButtonSlot
+    :class="buttonClass"
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonSlot>
+</template>
+<style lang="scss" scoped>
+.button-tertiary {
+    // default colors
+    @apply bg-white text-tertiary-dark ring-tertiary-dark/20 border-tertiary-dark;
+    // default hover state
+    @apply hover:bg-white hover:text-tertiary hover:border-tertiary;
+    // default focus state
+    @apply focus-visible:border-transparent focus-visible:text-tertiary;
+    // default active state
+    @apply active:ring-0 active:text-tertiary-dark active:border-tertiary-dark;
+    // default disabled state
+    @apply disabled:text-tertiary-dark/30 disabled:border-tertiary-dark/30 disabled:bg-white;
+    @apply disabled:active:ring-0 disabled:focus:ring-0;
+}
+</style>

package/src/components/Button/ButtonTertiaryFull.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonTertiary from './ButtonTertiary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonTertiary
+    full
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonTertiary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonTertiaryFullRounded.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonTertiary from './ButtonTertiary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonTertiary
+    full
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonTertiary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonTertiaryRounded.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonTertiary from './ButtonTertiary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonTertiary
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonTertiary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Form/FormFieldsLogin.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import ButtonPrimary from '../Button/ButtonPrimary.vue'
+import ButtonPrimaryFull from '../Button/ButtonPrimaryFull.vue'
 import FormFieldEmail from '../FormField/FormFieldEmail.vue'
 import FormFieldPassword from '../FormField/FormFieldPassword.vue'
 import FormFieldSlot from '../FormField/FormFieldSlot.vue'
@@ -67,13 +67,11 @@ const formRef = ref(props.form)
 <slot name="submit"
     :formRef="formRef"
 >
-    <ButtonPrimary full lg submit :disabled="form.processing">
-        <template #label>
-            <slot name="submit-label">
-                Log in
-            </slot>
-        </template>
-    </ButtonPrimary>
+    <ButtonPrimaryFull lg submit :disabled="form.processing">
+        <slot name="submit-label">
+            Log in
+        </slot>
+    </ButtonPrimaryFull>
 </slot>
 
 <div v-if="$slots.signup" class="form-login__signup">

package/src/components/Form/FormFieldsRegister.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import ButtonPrimary from '../Button/ButtonPrimary.vue'
+import ButtonPrimaryFull from '../Button/ButtonPrimaryFull.vue'
 import FormFieldCheckbox from '../FormField/FormFieldCheckbox.vue'
 import FormFieldEmail from '../FormField/FormFieldEmail.vue'
 import FormFieldPasswordToggle from '../FormField/FormFieldPasswordToggle.vue'
@@ -99,13 +99,11 @@ const formRef = ref(props.form)
 <slot name="submit"
     :formRef="formRef"
 >
-    <ButtonPrimary full lg submit :disabled="form.processing">
-        <template #label>
-            <slot name="submit-label">
-                Register
-            </slot>
-        </template>
-    </ButtonPrimary>
+    <ButtonPrimaryFull lg submit :disabled="form.processing">
+        <slot name="submit-label">
+            Register
+        </slot>
+    </ButtonPrimaryFull>
 </slot>
 
 <div v-if="$slots.signin" class="form-register__signin">

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 ButtonTertiary from '../Button/ButtonTertiary.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"
+                >
+                    <ButtonTertiary @click="showMetaModal = true">
+                        <slot name="meta-action-label"></slot>
+                    </ButtonTertiary>
+
+                    <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>
+
+                            <ButtonTertiary @click="showMetaModal = false">
+                                <slot name="meta-modal-close-label"></slot>
+                            </ButtonTertiary>
+                        </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>