Add "persistent" prop to ipl-sidebar and ipl-dialog which disables closing the dialogs when clicking outside of them

Author: inkfarer

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 3.6.0
+
+- Add `persistent` prop to ipl-sidebar and ipl-dialog which disables closing the dialogs when clicking outside of them
+
 # 3.5.1
 
 - Fix ipl-input with the large theme growing too wide in some cases

docs/examples/DialogExample.vue

@@ -7,6 +7,7 @@
         <ipl-dialog
             v-model:is-open="dialogOpen"
             style="width: 500px"
+            :persistent="persistent"
         >
             <div class="width-capped-content">
                 <ipl-space
@@ -31,13 +32,20 @@
         />
         <!-- #endregion example -->
     </div>
+    <div class="horizontal-layout">
+        <ipl-checkbox
+            v-model="persistent"
+            label="Persistent"
+        />
+    </div>
 </template>
 
 <script setup lang="ts">
-import { IplButton, IplSpace, IplDialog } from '../../src';
+import { IplButton, IplSpace, IplDialog, IplCheckbox } from '../../src';
 import { ref } from 'vue';
 
 const dialogOpen = ref(false);
+const persistent = ref(false);
 </script>
 
 <style lang="scss">

docs/examples/SidebarExample.vue

@@ -4,7 +4,10 @@
         class="sidebar-example-layout"
     >
         <!-- #region example -->
-        <ipl-sidebar v-model:is-open="sidebarOpen">
+        <ipl-sidebar
+            v-model:is-open="sidebarOpen"
+            :persistent="persistent"
+        >
             <div class="width-capped-content">
                 <ipl-space
                     color="light"
@@ -28,13 +31,20 @@
         />
         <!-- #endregion example -->
     </div>
+    <div class="horizontal-layout">
+        <ipl-checkbox
+            v-model="persistent"
+            label="Persistent"
+        />
+    </div>
 </template>
 
 <script setup lang="ts">
-import { IplSidebar, IplButton, IplSpace } from '../../src';
+import { IplSidebar, IplButton, IplSpace, IplCheckbox } from '../../src';
 import { ref } from 'vue';
 
 const sidebarOpen = ref(false);
+const persistent = ref(false);
 </script>
 
 <style lang="scss">

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@iplsplatoon/vue-components",
-    "version": "3.5.1",
+    "version": "3.6.0",
     "description": "Vue components for internal Inkling Performance Labs utilities.",
     "homepage": "https://github.com/IPLSplatoon/vue-components",
     "repository": "https://github.com/IPLSplatoon/vue-components",

src/components/__tests__/iplSidebar.test.ts

@@ -44,6 +44,19 @@ describe('IplSidebar', () => {
         expect(dialog.element.hasAttribute('inert')).toEqual(true);
     });
 
+    it('does not close the dialog when directly clicked and persistent', async () => {
+        const wrapper = mount(IplSidebar, { props: { isOpen: true, persistent: true } });
+
+        const dialog = wrapper.get('dialog');
+        const event = new Event('click');
+        Object.defineProperty(event, 'target', { value: dialog.element });
+        dialog.element.dispatchEvent(event);
+        await flushPromises();
+
+        expect(dialog.element.close).not.toHaveBeenCalled();
+        expect(dialog.element.hasAttribute('inert')).toEqual(false);
+    });
+
     it('does not close the dialog when clicking on a child of the dialog', async () => {
         const wrapper = mount(IplSidebar, { props: { isOpen: true } });
 

src/components/iplDialog.vue

@@ -22,6 +22,10 @@ export default defineComponent({
         isOpen: {
             type: Boolean,
             required: true
+        },
+        persistent: {
+            type: Boolean,
+            default: false
         }
     },
 
@@ -63,7 +67,9 @@ export default defineComponent({
                 onClose();
             },
             onClick() {
-                onClose();
+                if (!props.persistent) {
+                    onClose();
+                }
             }
         };
     }

src/components/iplSidebar.vue

@@ -22,6 +22,10 @@ export default defineComponent({
         isOpen: {
             type: Boolean,
             required: true
+        },
+        persistent: {
+            type: Boolean,
+            default: false
         }
     },
 
@@ -63,7 +67,9 @@ export default defineComponent({
                 onClose();
             },
             onClick() {
-                onClose();
+                if (!props.persistent) {
+                    onClose();
+                }
             }
         };
     }