feat 0.18.0 (#505)

## Fix:
* fix(select): avoid overflowing container
  * whitespace no-wrap caused select to grow beyond its parent
* fix(select): fixed shrinking padlock icon
* fix(select): position dropdown on scroll

## Performance:
* perf(select): removed unnecessary cloning
* perf(select): debounce event listeners

## Chore:
* chore: small demo board style change
* chore: increment version
* chore(deps-dev): updated dependencies

## Refactor:
* refactor!: change plugin install strategy

## Feature:
* feat(transitions): added FadeSlideTransition
* feat: (internal) added colour converter
  * Convert hex colours to tailwind vars

## Documentation:
* docs(select): added more select options

Author: nandi95

jest.config.ts

@@ -29,12 +29,7 @@ export default {
     reporters: ['default', 'github-actions'],
     transform: {
         '^.+\\.vue$': '@vue/vue3-jest',
-        '^.+\\ts$': 'ts-jest'
+        '^.+\\ts$': ['ts-jest', { tsconfig: 'tsconfig.node.json' }]
     },
-    testMatch: ['<rootDir>/src/**/*.test.ts'],
-    globals: {
-        'ts-jest': {
-            tsconfig: 'tsconfig.node.json'
-        }
-    }
+    testMatch: ['<rootDir>/src/**/*.test.ts']
 } as InitialOptionsTsJest;

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@karnama/vueish",
-    "version": "0.17.5",
+    "version": "0.18.0",
     "files": [
         "dist",
         "types"
@@ -27,6 +27,7 @@
         "lint": "eslint . --fix --ext .ts,.vue,.tsx",
         "prepare": "husky install",
         "generate:web-types": "ts-node-cwd -P ./tsconfig.node.json utils/web-types/generateWebTypes.ts",
+        "generate:css-vars": "ts-node-cwd -P ./tsconfig.node.json utils/convertHexObjToVars.ts",
         "commit": "commit"
     },
     "peerDependencies": {
@@ -38,8 +39,8 @@
         "@commitlint/prompt-cli": "^17.0.0",
         "@commitlint/types": "^17.0.0",
         "@types/eslint": "^8.4.1",
-        "@types/glob": "^7.1.3",
-        "@types/jest": "^28.1.1",
+        "@types/glob": "^8.0.0",
+        "@types/jest": "^29.0.0",
         "@types/lodash-es": "^4.17.4",
         "@types/minimist": "^1.2.1",
         "@types/requestidlecallback": "^0.3.1",
@@ -49,19 +50,19 @@
         "@vue/compiler-sfc": "^3.2.11",
         "@vue/eslint-config-typescript": "^11.0.0",
         "@vue/test-utils": "2.0.0-rc.16",
-        "@vue/vue3-jest": "^28.0.0",
+        "@vue/vue3-jest": "^29.0.0",
         "autoprefixer": "^10.4.0",
-        "babel-jest": "^28.1.1",
+        "babel-jest": "^29.0.2",
         "babel-loader": "^8.2.2",
         "commitlint": "^17.0.2",
-        "eslint": "^8.2.0",
+        "eslint": "~8.22.0",
         "eslint-plugin-import": "^2.22.1",
-        "eslint-plugin-jest": "^26.1.1",
+        "eslint-plugin-jest": "^27.0.1",
         "eslint-plugin-vue": "^9.1.1",
         "glob": "^8.0.1",
         "husky": "^8.0.1",
-        "jest": "^28.1.1",
-        "jest-environment-jsdom": "^28.1.1",
+        "jest": "^29.0.2",
+        "jest-environment-jsdom": "^29.0.2",
         "jest-junit": "^14.0.0",
         "jest-serializer-vue": "^2.0.2",
         "lint-staged": "^13.0.1",
@@ -70,12 +71,12 @@
         "postcss": "^8.4.4",
         "sass": "^1.32.12",
         "tailwindcss": "^3.0.0",
-        "ts-jest": "^28.0.5",
+        "ts-jest": "^29.0.0-next.1",
         "ts-node": "^10.0.0",
         "typescript": "^4.3.4",
         "vite": "^3.0.0",
         "vue": "^3.2.25",
-        "vue-docgen-api": "4.47.0",
+        "vue-docgen-api": "^4.52.0",
         "vue-router": "^4.0.6",
         "vue-template-compiler": "^2.6.12"
     },

package.json

@@ -5,18 +5,20 @@
             <div class="menu px-12 shadow-xl dark:bg-gray-600 dark:text-gray-300 z-30 bg-white"
                  :class="[ isOpen ? 'open' : 'closed' ]">
                 <div class="sticky top-0">
-                    <div class="flex items-center justify-between">
+                    <div class="flex items-center justify-between space-x-2">
                         <div class="mt-4 mb-6">
                             <h1 class="text-2xl whitespace-nowrap">
                                 Vueish UI
                             </h1>
                             <small>v{{ version }}</small>
                         </div>
 
-                        <UIButton minimal
-                                  class="dark:text-gray-200 dark:hover:text-gray-700"
+                        <UIButton outline
+                                  theme="gray"
+                                  class="!rounded-full w-8 h-8 relative"
                                   @click="isOpen = false">
-                            <span v-html="clearIcon" />
+                            <span class="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]"
+                                  v-html="clearIcon" />
                         </UIButton>
                     </div>
                     <div class="flex-col flex">
@@ -151,6 +153,7 @@ export default defineComponent({
         transition: margin-left 300ms ease, opacity 300ms ease-out;
         opacity: 0;
     }
+
     &.open {
         transition: margin-left 300ms ease, opacity 300ms ease-out;
         opacity: 1;

src/DemoBoard.vue

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils';
 import UIButtonToggle from './UIButtonToggle.vue';
 import type { Option } from 'types';
-import { ref, watch } from 'vue';
 
 const options: Record<string, any>[] = [
     { label: 'Places', value: 'places' },
@@ -58,25 +57,25 @@ describe('UIButtonToggle', () => {
     });
 
     it('should be able to select multiple options given the prop', async () => {
-        const wrapper = mount({
-            template: '<UIButtonToggle :options="options" multi v-model="model" />',
-            components: { UIButtonToggle },
-            setup: () => {
-                return {
-                    model: ref(null),
-                    options
-                };
+        const wrapper = mount(UIButtonToggle, {
+            props: {
+                options,
+                multi: true,
+                modelValue: null
             }
         });
+        await wrapper.setProps({
+            'onUpdate:modelValue': async (modelValue: any) => await wrapper.setProps({ modelValue })
+        });
 
         const buttons = wrapper.findAll('button');
 
         await buttons[0]!.trigger('click');
-        expect(wrapper.vm.model).toStrictEqual([options[0]]);
+        expect(wrapper.lastEventValue()).toStrictEqual([[options[0]]]);
         await buttons[1]!.trigger('click');
-        expect(wrapper.vm.model).toStrictEqual([options[0], options[1]]);
+        expect(wrapper.lastEventValue()).toStrictEqual([[options[0], options[1]]]);
         await buttons[1]!.trigger('click');
-        expect(wrapper.vm.model).toStrictEqual([options[0]]);
+        expect(wrapper.lastEventValue()).toStrictEqual([[options[0]]]);
     });
 
     it('should be disabled given the prop', async () => {
@@ -96,10 +95,12 @@ describe('UIButtonToggle', () => {
         const wrapper = mount(UIButtonToggle, {
             props: {
                 options,
-                modelValue: null,
-                'onUpdate:modelValue': async (modelValue: any) => await wrapper.setProps({ modelValue })
+                modelValue: null
             }
         });
+        await wrapper.setProps({
+            'onUpdate:modelValue': async (modelValue: any) => await wrapper.setProps({ modelValue })
+        });
 
         const button = wrapper.get('button');
 
@@ -114,29 +115,27 @@ describe('UIButtonToggle', () => {
     });
 
     it('should clear up to a single value on multi select', async () => {
-        const wrapper = mount({
-            template: '<UIButtonToggle :options="options" multi v-model="model" />',
-            components: { UIButtonToggle },
-            setup: (_props, ctx) => {
-                const model = ref(null);
-                watch(() => model.value, () => ctx.emit('update:modelValue'));
-
-                return {
-                    model,
-                    options
-                };
+        const wrapper = mount(UIButtonToggle, {
+            props: {
+                options,
+                modelValue: null,
+                multi: true
             }
         });
+        await wrapper.setProps({
+            'onUpdate:modelValue': async (modelValue: any) => await wrapper.setProps({ modelValue })
+        });
 
         const buttons = wrapper.findAll('button');
 
         await buttons[0]!.trigger('click');
+        expect(wrapper.lastEventValue()).toStrictEqual([[options[0]]]);
         await buttons[1]!.trigger('click');
 
-        expect(wrapper.vm.model).toStrictEqual([options[0], options[1]]);
+        expect(wrapper.lastEventValue()).toStrictEqual([[options[0], options[1]]]);
 
         await buttons[0]!.trigger('click');
-        expect(wrapper.vm.model).toStrictEqual([options[1]]);
+        expect(wrapper.lastEventValue()).toStrictEqual([[options[1]]]);
         await buttons[1]!.trigger('click');
         expect(wrapper.emitted('update:modelValue')).toHaveLength(4);
     });
@@ -146,10 +145,12 @@ describe('UIButtonToggle', () => {
             props: {
                 options,
                 modelValue: null,
-                'onUpdate:modelValue': async (modelValue: any) => await wrapper.setProps({ modelValue }),
                 clearable: true
             }
         });
+        await wrapper.setProps({
+            'onUpdate:modelValue': async (modelValue: any) => await wrapper.setProps({ modelValue })
+        });
 
         const buttons = wrapper.findAll('button');
         await buttons[0]!.trigger('click');

src/components/button-toggle/UIButtonToggle.test.ts

@@ -118,6 +118,18 @@ const options = [
     {
         id: 7,
         name: 'Bruce Baxter'
+    },
+    {
+        id: 8,
+        name: 'Bruce The Bear'
+    },
+    {
+        id: 9,
+        name: 'Bruce Ismay'
+    },
+    {
+        id: 10,
+        name: 'Bruce Campbell'
     }
 ];
 

src/components/select/Demo.vue

@@ -37,9 +37,7 @@
              @click="open ? closeList() : openList()">
             <template v-if="selectionCount > 0">
                 <slot name="selected" :selected="selected">
-                    <span :class="{ 'truncate': multi }">
-                        {{ selectionDisplay }}
-                    </span>
+                    {{ selectionDisplay }}
                 </slot>
             </template>
             <template v-else>
@@ -52,7 +50,7 @@
 
             <UIFadeTransition duration-out="duration-100" duration-in="duration-100">
                 <span v-if="disabled"
-                      class="h-5 w-5 text-color-muted"
+                      class="h-5 w-5 text-color-muted shrink-0"
                       :class="{ '-mr-3.5': large }"
                       v-html="lockIcon" />
 
@@ -165,7 +163,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref, onUnmounted, nextTick, onBeforeUpdate } from 'vue';
-import { isEqual as _isEqual, cloneDeep } from 'lodash-es';
+import { isEqual as _isEqual, cloneDeep, debounce } from 'lodash-es';
 import type { PropType } from 'vue';
 import {
     placeholder,
@@ -309,7 +307,7 @@ export default defineComponent({
                 return '';
             }
 
-            const options = wrap<Option | string>(cloneDeep(selected.value));
+            const options = wrap<Option | string>(selected.value);
 
             return options.map(option => typeof option === 'string' ? option : option[props.optionLabel]).join(', ');
         });
@@ -355,7 +353,8 @@ export default defineComponent({
             await nextTick();
             open.value = false;
             search.value = '';
-            globalThis?.window.removeEventListener('resize', setPosition);
+            globalThis?.window.removeEventListener('resize', debounce(setPosition, 15));
+            globalThis?.window.removeEventListener('scroll', debounce(setPosition, 15));
         };
         const openList = async () => {
             if (props.disabled) return;
@@ -364,7 +363,8 @@ export default defineComponent({
             await nextTick();
             setPosition();
             searchInput.value?.focus({ preventScroll: true });
-            globalThis?.window.addEventListener('resize', setPosition);
+            globalThis?.window.addEventListener('resize', debounce(setPosition, 15));
+            globalThis?.window.addEventListener('scroll', debounce(setPosition, 15));
         };
         const clearSelection = (option?: Option) => {
             if (
@@ -465,7 +465,8 @@ export default defineComponent({
 
         onUnmounted(() => {
             // in case it's unmounted while open
-            globalThis?.window.removeEventListener('resize', setPosition);
+            globalThis?.window.removeEventListener('resize', debounce(setPosition, 15));
+            globalThis?.window.removeEventListener('scroll', debounce(setPosition, 15));
         });
 
         return {

src/components/select/UISelect.vue

@@ -9,14 +9,15 @@
         <div class="flex flex-col justify-center"
              :style="[ component.name !== 'UIExpandTransition' ? 'min-height: 10rem;' : '' ]">
             <component :is="component.name">
-                <div v-if="singleElement" class="content" />
+                <div v-show="singleElement" class="content" />
             </component>
         </div>
 
         <slot name="footer">
             <div class="flex justify-end">
                 <UIButton :label="`${singleElement ? 'Not' : ''} Visible`"
                           outline
+                          class="min-w-[106px]"
                           @click="singleElement = !singleElement" />
             </div>
         </slot>
@@ -76,7 +77,8 @@ export default defineComponent({
         const components = [
             { name: 'UIFadeTransition' },
             { name: 'UIFadeScaleTransition' },
-            { name: 'UIExpandTransition' }
+            { name: 'UIExpandTransition' },
+            { name: 'UIFadeSlideTransition' }
         ];
 
         const component = ref<{ name: string }>({ name: 'UIFadeTransition' });