feat: overlay improvements (#530)

lob · Jul 15, 2024 · 048a990 · 048a990
1 parent c116341
commit 048a990
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v2.0.85
+
+- Improve `Overlay` interface
+- Add `Minus` icon
+- Add `Integrations` icon
+
 ## v2.0.84
 
 - Improve `Overlay` flexibility

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.84",
+  "version": "2.0.85",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

diff --git a/src/components/Icon/svgs/Integrations.svg b/src/components/Icon/svgs/Integrations.svg
diff --git a/src/components/Icon/svgs/Minus.svg b/src/components/Icon/svgs/Minus.svg
diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
@@ -68,12 +68,14 @@ export const IconName = {
   FUTURE: 'Future',
   GEAR: 'Gear',
   GIFT: 'Gift',
+  INTEGRATIONS: 'Integrations',
   IMAGE_SEARCH: 'ImageSearch',
   LAYER_GROUP: 'LayerGroup',
   LAYERS: 'Layers',
   LIGHTNING: 'Lightning',
   LOCATION_PIN: 'LocationPin',
   MONEY_BILL: 'MoneyBill',
+  MINUS: 'Minus',
   NAV_ARROW_LEFT: 'NavArrowLeft',
   NEXT: 'Next',
   NOTES: 'Notes',

diff --git a/src/components/Overlay/Overlay.vue b/src/components/Overlay/Overlay.vue
@@ -10,6 +10,8 @@
         leaveToClass: 'opacity-0 scale-[.98]'
       }
     }"
+    @show="$emit('show')"
+    @hide="$emit('hide')"
   >
     <div v-bind="contentProps">
       <slot />
@@ -21,7 +23,7 @@
 import OverlayPanel from 'primevue/overlaypanel';
 import { HTMLAttributes, ref } from 'vue';
 
-const overlay = ref();
+const overlay = ref<InstanceType<typeof OverlayPanel>>();
 
 withDefaults(
   defineProps<{
@@ -32,8 +34,15 @@ withDefaults(
   }
 );
 
+defineEmits<{
+  (e: 'hide'): void; // eslint-disable-line no-unused-vars
+  (e: 'show'): void; // eslint-disable-line no-unused-vars
+}>();
+
 defineExpose({
-  toggle: (e: Event) => overlay.value.toggle(e)
+  hide: () => overlay.value?.hide(),
+  show: (e: Event) => overlay.value?.show(e),
+  toggle: (e: Event) => overlay.value?.toggle(e)
 });
 </script>