feat(dropdown): added open and close events (#386)

## Feat * feat: added events when closing and opening ## Chore * chore: project configuration changes * chore(deps-dev): updated dependencies * chore: bumped version ## Style * style: fixed lint issues ## Fix * fix(button): centered spinner loader ## CI * ci: moved semantic commit checking to app
karnama · Jan 14, 2022 · b27cd6f · b27cd6f
1 parent b818b0e
commit b27cd6f
Show file tree

Hide file tree

Showing 12 changed files with 1,610 additions and 1,909 deletions.
diff --git a/.github/semantic.yml b/.github/semantic.yml
@@ -0,0 +1,44 @@
+# https://github.com/zeke/semantic-pull-requests#configuration
+
+# Always validate the PR title AND all the commits
+titleAndCommits: true
+
+# Allow use of Merge commits (eg on github: "Merge branch 'master' into feature/ride-unicorns")
+# this is only relevant when using commitsOnly: true (or titleAndCommits: true)
+allowMergeCommits: true
+
+# Allow use of Revert commits (eg on github: "Revert "feat: ride unicorns"")
+# this is only relevant when using commitsOnly: true (or titleAndCommits: true)
+allowRevertCommits: true
+
+# Scopes matching the ones defined in .commitlintrc.js file
+scopes:
+  - 'avatar'
+  - 'badge'
+  - 'button'
+  - 'button-group'
+  - 'button-toggle'
+  - 'checkbox'
+  - 'dropdown'
+  - 'file-input'
+  - 'file-uploader'
+  - 'input'
+  - 'loader-linear'
+  - 'loader-spinner'
+  - 'modal'
+  - 'panel'
+  - 'pill'
+  - 'radio'
+  - 'range-slider'
+  - 'select'
+  - 'table'
+  - 'textarea'
+  - 'toggle'
+  - 'pagination'
+  - 'transitions'
+  - 'tooltip'
+  - 'outer-html'
+  - 'click-away'
+  - 'intersect'
+  - 'deps'
+  - 'deps-dev'
diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml
diff --git a/index.html b/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
 </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@karnama/vueish",
-    "version": "0.8.3",
+    "version": "0.9.0",
     "files": [
         "dist",
         "types"
@@ -31,15 +31,15 @@
     },
     "devDependencies": {
         "@babel/core": "^7.13.16",
-        "@commitlint/config-conventional": "^15.0.0",
-        "@commitlint/prompt-cli": "^15.0.0",
-        "@commitlint/types": "^15.0.0",
+        "@commitlint/config-conventional": "^16.0.0",
+        "@commitlint/prompt-cli": "^16.0.0",
+        "@commitlint/types": "^16.0.0",
         "@types/glob": "^7.1.3",
         "@types/jest": "^27.0.2",
         "@types/lodash-es": "^4.17.4",
         "@types/minimist": "^1.2.1",
         "@types/requestidlecallback": "^0.3.1",
-        "@types/tailwindcss": "^2.0.6",
+        "@types/tailwindcss": "^3.0.2",
         "@typescript-eslint/eslint-plugin": "^5.4.0",
         "@typescript-eslint/parser": "^5.4.0",
         "@vitejs/plugin-vue": "^2.0.1",
@@ -50,7 +50,7 @@
         "autoprefixer": "^10.4.0",
         "babel-jest": "^27.3.1",
         "babel-loader": "^8.2.2",
-        "commitlint": "^15.0.0",
+        "commitlint": "^16.0.2",
         "eslint": "^8.2.0",
         "eslint-plugin-import": "^2.22.1",
         "eslint-plugin-jest": "^25.2.4",

diff --git a/src/components/button/UIButton.vue b/src/components/button/UIButton.vue
@@ -8,7 +8,7 @@
                 <slot name="loader">
                     <UISpinnerLoader v-if="loading"
                                      inherit-color
-                                     class="px-4"
+                                     class="px-4 mx-auto"
                                      :class="loaderColor"
                                      :stroke="2"
                                      :diameter="25" />

diff --git a/src/components/button/__snapshots__/UIButton.test.ts.snap b/src/components/button/__snapshots__/UIButton.test.ts.snap
@@ -13,7 +13,7 @@ exports[`UIButton should display the loading correctly 1`] = `
       
       <transition-stub>
         <div
-          class="ui-spinner-loader indeterminate px-4"
+          class="ui-spinner-loader indeterminate px-4 mx-auto"
           role="progressbar"
         >
           <svg

diff --git a/src/components/dropdown/UIDropdown.test.ts b/src/components/dropdown/UIDropdown.test.ts
@@ -33,4 +33,25 @@ describe('UIDropdown', () => {
         expect(wrapper.find('#content').exists()).toBe(true);
         expect(wrapper.find('#trigger').exists()).toBe(true);
     });
+
+    it('should emit the open and close event at appropriate times', () => {
+        const wrapper = mount(UIDropdown, {
+            slots: {
+                default: h('div', { id: 'content' }),
+                trigger: h('div', { id: 'trigger' })
+            }
+        });
+
+        expect(wrapper.emitted()).not.toHaveProperty('open');
+        expect(wrapper.emitted()).not.toHaveProperty('close');
+
+        // @ts-expect-error - ts reckons this has the type never
+        wrapper.vm.toggle();
+        expect(wrapper.emitted('open')).toHaveLength(1);
+        expect(wrapper.emitted()).not.toHaveProperty('close');
+
+        // @ts-expect-error - ts reckons this has the type never
+        wrapper.vm.toggle();
+        expect(wrapper.emitted('close')).toHaveLength(1);
+    });
 });
diff --git a/src/components/dropdown/UIDropdown.vue b/src/components/dropdown/UIDropdown.vue
@@ -81,7 +81,9 @@ export default defineComponent({
         }
     },
 
-    setup(props) {
+    emits: ['open', 'close'],
+
+    setup(props, ctx) {
         const isOpen = ref(false);
         const uiDropdown = ref<HTMLDivElement>();
         const dropdown = ref<HTMLDivElement>();
@@ -144,12 +146,15 @@ export default defineComponent({
             if (event && props.atMousePosition) {
                 mousePos.x = event.offsetX;
                 mousePos.y = event.offsetY;
+            } else {
+                ctx.emit('open');
             }
 
             isOpen.value = true;
         };
         const hide = () => {
             isOpen.value = false;
+            ctx.emit('close');
         };
         const toggle = (event?: MouseEvent) => {
             // If the dropdown is showing via contextmenu event, and the user has triggered

diff --git a/src/demo.ts b/src/demo.ts
@@ -1,4 +1,4 @@
-import { createApp, defineAsyncComponent } from 'vue';
+import { createApp } from 'vue';
 import DemoBoard from './DemoBoard.vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import './assets/styles/main.scss';
@@ -23,7 +23,7 @@ const routes = Object.keys(demos)
 
         return {
             path: '/' + getPath(path),
-            component: defineAsyncComponent(async () => demos[path]()),
+            component: async () => demos[path](),
             meta: {
                 label: getPath(path).replace('-', ' '),
                 type: isDirective ? 'Directives' : 'Components'

diff --git a/src/helpers/cache/LocalCache.ts b/src/helpers/cache/LocalCache.ts
@@ -30,7 +30,7 @@ export default class LocalCache {
      *
      * @return {*}
      */
-    public get<T>(key: string, defaultValue?: T): T
+    public get<T>(key: string, defaultValue?: T): T;
     public get(key: string, defaultValue?: unknown): undefined {
         try {
             let value = JSON.parse(localStorage.getItem(this.prefix + key) as string);

diff --git a/src/setupTests.ts b/src/setupTests.ts
@@ -4,10 +4,6 @@ import defaultSettings from '@/defaultSettings';
 import type { ComponentPublicInstance } from 'vue';
 
 beforeAll(() => {
-    if (process.env.IS_CI) {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        config.global.config.warnHandler = () => {};
-    }
     config.global.config.globalProperties = {
         // eslint-disable-next-line @typescript-eslint/naming-convention
         Vueish: defaultSettings