@redseed/redseed-ui-vue3 1.2.0 → 1.4.0

package/index.js

@@ -1,13 +1,23 @@
+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 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'
@@ -35,16 +45,26 @@ 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,
+    DropdownMenu,
+    DropdownOption,
     FormFieldCheckbox,
     FormFieldEmail,
     FormFieldHidden,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "1.2.0",
+  "version": "1.4.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,23 +6,13 @@ 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">
@@ -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,7 +8,7 @@ defineOptions({
 </script>
 <template>
 <ButtonPrimary
-    light
+    full
     v-bind="$attrs"
 >
     <template #icon v-if="$slots.icon">

package/src/components/Button/{ButtonPrimaryLightRounded.vue → ButtonPrimaryFullRounded.vue}

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

package/src/components/Button/ButtonSecondary.vue

@@ -6,23 +6,13 @@ 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">
@@ -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,7 +8,7 @@ defineOptions({
 </script>
 <template>
 <ButtonSecondary
-    light
+    full
     v-bind="$attrs"
 >
     <template #icon v-if="$slots.icon">

package/src/components/Button/{ButtonSecondaryLightRounded.vue → ButtonSecondaryFullRounded.vue}

@@ -8,7 +8,7 @@ defineOptions({
 </script>
 <template>
 <ButtonSecondary
-    light
+    full
     rounded
     v-bind="$attrs"
 >

package/src/components/Button/ButtonSlot.vue

@@ -150,15 +150,18 @@ const buttonSlotIconClass = computed(() => [
             @apply px-1.5;
         }
         .button-slot__icon {
-            @apply w-3 h-3;
+            @apply w-4 h-4;
         }
     }
     // modifier sm size
     &--sm {
         @apply text-sm;
-        @apply px-3 py-1.5;
+        @apply px-3 py-2;
         &--icon {
-            @apply px-1.5;
+            @apply px-2;
+        }
+        .button-slot__icon {
+            @apply w-5 h-5;
         }
     }
     // modifier md size
@@ -168,6 +171,12 @@ const buttonSlotIconClass = computed(() => [
         &--icon {
             @apply px-2;
         }
+        .button-slot__icon {
+            @apply w-5 h-5;
+            &--only {
+                @apply w-6 h-6;
+            }
+        }
     }
     // modifier lg size
     &--lg {
@@ -178,6 +187,9 @@ const buttonSlotIconClass = computed(() => [
         }
         .button-slot__icon {
             @apply w-5 h-5;
+            &--only {
+                @apply w-7 h-7;
+            }
         }
     }
     // modifier icon at the end

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

@@ -0,0 +1,123 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import ButtonTertiary from '../Button/ButtonTertiary.vue'
+
+const props = defineProps({
+    right: {
+        type: Boolean,
+        default: false,
+    },
+    left: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const isOpen = ref(false)
+
+const defaultAlignment = computed(() => !props.right && !props.left)
+
+const containerClass = computed(() => [
+    'dropdown-menu__container',
+    {
+        'dropdown-menu__container--open': isOpen.value,
+        'dropdown-menu__container--left': props.left || defaultAlignment.value,
+        'dropdown-menu__container--right': props.right,
+    },
+])
+
+function open() {
+    isOpen.value = true
+}
+
+function close() {
+    isOpen.value = false
+}
+
+function closeOnEscape(e) {
+    if (isOpen.value && e.key === 'Escape') {
+        isOpen.value = false
+    }
+}
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape))
+onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
+</script>
+<template>
+<div class="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>
+        </ButtonTertiary>
+    </slot>
+
+    <!-- Full Screen Dropdown Overlay -->
+    <div v-show="isOpen"
+        class="dropdown-menu__overlay"
+        @click="close"
+    ></div>
+
+    <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="containerClass"
+            @click="close"
+        >
+            <slot></slot>
+        </div>
+    </transition>
+</div>
+</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;
+}
+
+.dropdown-menu {
+    @apply w-fit relative;
+    &__overlay {
+        @apply fixed inset-0 z-40;
+    }
+    &__container {
+        @apply hidden absolute z-50 mt-2 p-2 w-76 origin-top;
+        @apply rounded-md shadow-full-light bg-white;
+        @apply flex flex-col space-y-2;
+        &--open {
+            @apply block;
+        }
+        &--left {
+            @apply origin-top-left left-0;
+        }
+        &--right {
+            @apply origin-top-right right-0;
+        }
+    }
+}
+</style>

package/src/components/DropdownMenu/DropdownOption.vue

@@ -0,0 +1,16 @@
+<script setup>
+const emit = defineEmits(['click'])
+</script>
+<template>
+<div class="dropdown-option"
+    @click="$emit('click')"
+>
+    <slot></slot>
+</div>
+</template>
+<style lang="scss" scoped>
+.dropdown-option {
+    @apply cursor-pointer p-4 bg-white rounded-md text-base transition;
+    @apply hover:bg-gray-200;
+}
+</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,11 +67,11 @@ const formRef = ref(props.form)
 <slot name="submit"
     :formRef="formRef"
 >
-    <ButtonPrimary full lg submit :disabled="form.processing">
+    <ButtonPrimaryFull lg submit :disabled="form.processing">
         <slot name="submit-label">
             Log in
         </slot>
-    </ButtonPrimary>
+    </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,11 +99,11 @@ const formRef = ref(props.form)
 <slot name="submit"
     :formRef="formRef"
 >
-    <ButtonPrimary full lg submit :disabled="form.processing">
+    <ButtonPrimaryFull lg submit :disabled="form.processing">
         <slot name="submit-label">
             Register
         </slot>
-    </ButtonPrimary>
+    </ButtonPrimaryFull>
 </slot>
 
 <div v-if="$slots.signin" class="form-register__signin">

package/src/components/Modal/Modal.vue

@@ -77,13 +77,13 @@ watch(() => props.show, () => {
     }
 })
 
-const close = () => {
+function close() {
     if (props.closeable) {
         emit('close')
     }
 }
 
-const closeOnEscape = (e) => {
+function closeOnEscape(e) {
     if (e.key === 'Escape' && props.show) {
         close()
     }
@@ -115,12 +115,12 @@ onUnmounted(() => {
             </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"
+                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-if="show"
                     :class="modalContentClass"
@@ -150,6 +150,25 @@ onUnmounted(() => {
 </teleport>
 </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;
+}
+
 .modal {
     @apply fixed inset-0 overflow-y-auto px-4 py-6 md:px-0 z-50;
     &__background-wrapper {

package/src/components/PageHeading/PageHeading.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import Modal from '../Modal/Modal.vue'
-import ButtonSecondaryLight from '../Button/ButtonSecondaryLight.vue'
+import ButtonTertiary from '../Button/ButtonTertiary.vue'
 
 const showMetaModal = ref(false)
 </script>
@@ -29,9 +29,9 @@ const showMetaModal = ref(false)
                 <div v-if="$slots['meta-action-label'] && $slots['meta']"
                     class="page-heading__meta-action"
                 >
-                    <ButtonSecondaryLight @click="showMetaModal = true">
+                    <ButtonTertiary @click="showMetaModal = true">
                         <slot name="meta-action-label"></slot>
-                    </ButtonSecondaryLight>
+                    </ButtonTertiary>
 
                     <Modal v-if="$slots['meta']"
                         class="page-heading__meta-modal"
@@ -55,9 +55,9 @@ const showMetaModal = ref(false)
                                 <slot name="meta-modal-footer"></slot>
                             </div>
 
-                            <ButtonSecondaryLight @click="showMetaModal = false">
+                            <ButtonTertiary @click="showMetaModal = false">
                                 <slot name="meta-modal-close-label"></slot>
-                            </ButtonSecondaryLight>
+                            </ButtonTertiary>
                         </template>
                     </Modal>
                 </div>