@redseed/redseed-ui-vue3 1.3.0 → 1.4.0

package/index.js

@@ -16,6 +16,8 @@ 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'
@@ -61,6 +63,8 @@ export {
     ButtonTertiaryFullRounded,
     ButtonTertiaryRounded,
     Card,
+    DropdownMenu,
+    DropdownOption,
     FormFieldCheckbox,
     FormFieldEmail,
     FormFieldHidden,

package/package.json

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

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/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/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 {