@pequity/squirrel 5.5.0 → 6.0.1

package/squirrel/components/p-dropdown/p-dropdown.vue

@@ -1,9 +1,9 @@
 <template>
-  <VDropdown ref="vPopper" v-bind="{ ...defaultAttrs, ...$attrs }" @show="onShow" @hide="destroy">
+  <Dropdown ref="vPopper" v-bind="{ ...defaultAttrs, ...$attrs }" @show="onShow" @hide="destroy">
     <template v-for="(_, slot) in $slots" #[slot]="scope">
       <slot :name="slot" v-bind="scope || {}" />
     </template>
-  </VDropdown>
+  </Dropdown>
 </template>
 
 <script lang="ts">
@@ -88,7 +88,10 @@ import {
   type ListKeyboardNavigationInstance,
   setupListKeyboardNavigation,
 } from '@squirrel/utils/listKeyboardNavigation';
-import { defineComponent, type PropType } from 'vue';
+import { Dropdown } from 'floating-vue';
+import { defineComponent } from 'vue';
+
+type DropdownProps = InstanceType<typeof Dropdown>['$props'];
 
 type VPopper = {
   $refs: {
@@ -98,19 +101,33 @@ type VPopper = {
     reference: HTMLElement;
     popper: {
       shown: boolean;
+      isShown: boolean;
       hide: (options?: { skipDelay: boolean }) => void;
+      show: () => void;
       $_detachPopperNode: () => void;
       $_referenceNode: HTMLElement;
       $_computePosition: () => void;
       $el: HTMLElement;
+      $emit: (event: string, ...args: unknown[]) => void;
     };
   };
 };
 
 const ESCAPE_KEY = 'Escape';
 
+const nextFrame = () => {
+  return new Promise((resolve) =>
+    requestAnimationFrame(() => {
+      requestAnimationFrame(resolve);
+    })
+  );
+};
+
 export default defineComponent({
   name: 'PDropdown',
+  components: {
+    Dropdown,
+  },
   inheritAttrs: false,
   props: {
     /**
@@ -138,49 +155,23 @@ export default defineComponent({
         display: 'inline-block',
       }),
     },
-    /**
-     * Custom reference element that is used to position the popper.
-     * Can be changed at runtime to create a dynamically positioned dropdown.
-     */
-    reference: {
-      type: HTMLElement as PropType<HTMLElement | null | undefined>,
-      default: null,
-    },
   },
   data() {
     return {
       defaultAttrs: {
         triggers: ['click'],
-        'auto-hide': true,
+        autoHide: true,
         theme: 'p-dropdown-theme',
-        'popper-class': 'dropdown',
+        popperClass: 'dropdown',
         placement: 'bottom-start',
         distance: 4,
         delay: 0,
         handleResize: true,
-      },
+      } satisfies DropdownProps,
       navigationSvc: null as ListKeyboardNavigationInstance | null,
+      prevReference: null as HTMLElement | null,
     };
   },
-  watch: {
-    reference: {
-      async handler(nV, oV) {
-        if (nV && oV !== nV) {
-          const popper = (this.$refs.vPopper as VPopper).$refs.popper;
-
-          if (popper) {
-            popper.$_detachPopperNode();
-            if (popper.shown) {
-              popper.hide({ skipDelay: true });
-            }
-            if (this.reference) {
-              popper.$_referenceNode = this.reference;
-            }
-          }
-        }
-      },
-    },
-  },
   mounted() {
     Object.assign((this.$refs.vPopper as VPopper).$refs.popper.$el.style, this.triggerStyle);
   },
@@ -208,6 +199,37 @@ export default defineComponent({
       this.navigationSvc?.destroy();
       document.removeEventListener('keydown', this.popoverEscKeydown);
     },
+    async updateReference(newReference: HTMLElement) {
+      if (!newReference) {
+        throw Error('Reference element is required');
+      }
+
+      const popper = (this.$refs.vPopper as VPopper).$refs.popper;
+
+      if (popper) {
+        // Fixes popper flicker issue when changing reference
+        popper.$_detachPopperNode();
+
+        if (popper.isShown) {
+          popper.$emit('update:shown', false);
+
+          if (newReference === this.prevReference) {
+            return;
+          }
+        }
+
+        // Wait for the popper to hide
+        await nextFrame();
+
+        popper.$_referenceNode = newReference;
+        this.prevReference = newReference;
+
+        // Wait for the popper to update the reference
+        await nextFrame();
+
+        popper.$emit('update:shown', true);
+      }
+    },
   },
 });
 </script>

package/squirrel/tailwind/config.ts

@@ -1,6 +1,6 @@
 import type { Config } from 'tailwindcss';
 
-export const config = {
+export const squirrelTailwindConfig = {
   content: ['./index.html', './squirrel/**/*.{vue,js,ts,jsx,tsx,mdx}', './src/**/*.{vue,js,ts,jsx,tsx,mdx}'],
   theme: {
     colors: {
@@ -103,4 +103,4 @@ export const config = {
   },
 } as const satisfies Config;
 
-export type SquirrelTailwindConfig = typeof config;
+export type SquirrelTailwindConfig = typeof squirrelTailwindConfig;

package/squirrel/utils/tailwind.spec.js

@@ -1,5 +1,5 @@
+import { getScreen } from '@squirrel/utils/tailwind';
 import { cloneDeep } from 'lodash-es';
-import { getScreen } from './tailwind';
 
 const screens = { sm: '640px', md: '768px' };
 

package/squirrel/utils/tailwind.ts

@@ -1,6 +1,4 @@
-import { config as squirrelTailwindConfig } from '@squirrel/tailwind/config';
-// Relative import is used here because of
-// "Module source URI is not allowed in this document: “http://tailwind.config/”" error
+import { squirrelTailwindConfig } from '@squirrel/tailwind/config';
 import { get } from 'lodash-es';
 import type { Config } from 'tailwindcss';
 import resolveConfig from 'tailwindcss/resolveConfig';

package/dist/tailwind/config.js

@@ -1,105 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.config = void 0;
-exports.config = {
-    content: ['./index.html', './squirrel/**/*.{vue,js,ts,jsx,tsx,mdx}', './src/**/*.{vue,js,ts,jsx,tsx,mdx}'],
-    theme: {
-        colors: {
-            transparent: 'transparent',
-            current: 'currentColor',
-            /* Design system colors */
-            white: 'rgb(var(--color-white))',
-            black: 'rgb(var(--color-black))',
-            night: 'rgb(var(--color-night))',
-            'barley-white': 'rgb(var(--color-barley-white))',
-            'horses-neck': 'rgb(var(--color-horses-neck))',
-            'active-blue': 'rgb(var(--color-active-blue))',
-            /* Pequity colors */
-            'p-gray': {
-                10: 'rgb(var(--color-p-gray-10))',
-                20: 'rgb(var(--color-p-gray-20))',
-                30: 'rgb(var(--color-p-gray-30))',
-                40: 'rgb(var(--color-p-gray-40))',
-                50: 'rgb(var(--color-p-gray-50))',
-                60: 'rgb(var(--color-p-gray-60))',
-                70: 'rgb(var(--color-p-gray-70))',
-                80: 'rgb(var(--color-p-gray-80))',
-                90: 'rgb(var(--color-p-gray-90))',
-                100: 'rgb(var(--color-p-gray-100))',
-            },
-            'p-blue': {
-                10: 'rgb(var(--color-p-blue-10))',
-                15: 'rgb(var(--color-p-blue-15))',
-                20: 'rgb(var(--color-p-blue-20))',
-                30: 'rgb(var(--color-p-blue-30))',
-                40: 'rgb(var(--color-p-blue-40))',
-                50: 'rgb(var(--color-p-blue-50))',
-                60: 'rgb(var(--color-p-blue-60))',
-                70: 'rgb(var(--color-p-blue-70))',
-                80: 'rgb(var(--color-p-blue-80))',
-            },
-            'p-purple': {
-                10: 'rgb(var(--color-p-purple-10))',
-                20: 'rgb(var(--color-p-purple-20))',
-                30: 'rgb(var(--color-p-purple-30))',
-                40: 'rgb(var(--color-p-purple-40))',
-                50: 'rgb(var(--color-p-purple-50))',
-                60: 'rgb(var(--color-p-purple-60))',
-            },
-            'p-green': {
-                10: 'rgb(var(--color-p-green-10))',
-                20: 'rgb(var(--color-p-green-20))',
-                30: 'rgb(var(--color-p-green-30))',
-                40: 'rgb(var(--color-p-green-40))',
-                50: 'rgb(var(--color-p-green-50))',
-            },
-            'p-red': {
-                10: 'rgb(var(--color-p-red-10))',
-                20: 'rgb(var(--color-p-red-20))',
-                30: 'rgb(var(--color-p-red-30))',
-                40: 'rgb(var(--color-p-red-40))',
-                50: 'rgb(var(--color-p-red-50))',
-            },
-            /* Aliases */
-            primary: 'rgb(var(--color-primary))',
-            accent: 'rgb(var(--color-accent))',
-            surface: 'rgb(var(--color-surface))',
-            'on-surface': 'rgb(var(--color-on-surface))',
-            error: 'rgb(var(--color-error))',
-            'on-error': 'rgb(var(--color-on-error))',
-            info: 'rgb(var(--color-info))',
-            'on-info': 'rgb(var(--color-on-info))',
-            success: 'rgb(var(--color-success))',
-            'on-success': 'rgb(var(--color-on-success))',
-            warning: 'rgb(var(--color-warning))',
-            'on-warning': 'rgb(var(--color-on-warning))',
-        },
-        fontFamily: {
-            sans: ['Inter', 'Helvetica', 'Arial', 'sans-serif'],
-        },
-        fontSize: {
-            xs: '0.75rem',
-            sm: '0.875rem',
-            base: '1rem',
-            lg: '1.125rem',
-            xl: '1.25rem',
-            '2xl': '1.5rem',
-            '3xl': '1.875rem',
-            '4xl': '2.25rem',
-            '5xl': '3rem',
-            '6xl': '4rem',
-        },
-        extend: {
-            borderColor: {
-                DEFAULT: 'rgb(var(--color-p-gray-30))',
-            },
-            spacing: {
-                7.5: '1.875rem',
-            },
-            zIndex: {
-                110: '110',
-            },
-            screens: {},
-        },
-    },
-};