@pequity/squirrel 10.0.3 → 11.0.0

package/squirrel/components/p-date-picker/p-date-picker.vue

@@ -1,5 +1,15 @@
 <template>
-  <VueDatePicker v-model="model" :class="[{ hidden: $attrs.hidden }, $attrs.class]" v-bind="datePickerProps">
+  <VueDatePicker
+    v-model="model"
+    :class="[
+      { hidden: $attrs.hidden },
+      $attrs.class,
+      { 'has-label': !!label },
+      { 'has-error': !!errorMsg },
+      `size-${$attrs.size || 'md'}`,
+    ]"
+    v-bind="datePickerProps"
+  >
     <template #dp-input="{ value, onInput, onEnter, onTab, onFocus, onBlur, onClear }">
       <PInput
         :model-value="value"
@@ -16,8 +26,10 @@
 
 <script setup lang="ts">
 import PInput from '@squirrel/components/p-input/p-input.vue';
-import VueDatePicker, { type VueDatePickerProps } from '@vuepic/vue-datepicker';
+import { getDateFnsLocale } from '@squirrel/utils/dateLocale';
+import { type RootProps, VueDatePicker } from '@vuepic/vue-datepicker';
 import { computed, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 /**
  * A date picker component that displays a dropdown calendar for date selection.
@@ -31,7 +43,14 @@ defineOptions({
   inheritAttrs: false,
 });
 
-type Props = {
+// Extend RootProps to inherit all VueDatePicker props and add our custom ones
+// Exclude modelValue since we use defineModel() for v-model handling
+type Props = Omit<RootProps, 'modelValue'> & {
+  /**
+   * The name of the date picker field.
+   * Passed to the underlying PInput component.
+   */
+  name?: string;
   /**
    * Text label for the date picker field.
    * Passed to the underlying PInput component.
@@ -47,36 +66,45 @@ type Props = {
    * Passed to the underlying PInput component and adds visual indicator.
    */
   required?: boolean;
-} & VueDatePickerProps;
+};
 
 const props = withDefaults(defineProps<Props>(), {
+  // Custom component defaults
+  name: '',
   label: '',
   errorMsg: '',
   required: false,
-  inline: false,
+  // VueDatePicker props with intentional defaults
+  placeholder: '',
   autoApply: true,
-  enableTimePicker: false,
+  timeConfig: () => ({ enableTimePicker: false }),
   modelType: 'yyyy-MM-dd',
   hideOffsetDates: true,
   weekStart: 0,
   textInput: true,
-  format: 'dd-MMM-yyyy',
+  formats: () => ({ input: 'dd-MMM-yyyy' }),
 });
 
 /**
  * The selected date value (v-model).
- * Supports two-way binding for form inputs.
+ * Supports all VueDatePicker model types: Date, Date[], string, TimeModel, etc.
  */
-const model = defineModel<Date | string | null>({ default: '' });
+const model = defineModel<RootProps['modelValue']>();
 
 // Data
+const { locale } = useI18n();
 const attrs = useAttrs();
 
 // Computed
 const datePickerProps = computed(() => {
-  const { modelValue: _, ...propsWithoutModelValue } = props;
+  const { name, label, errorMsg, required, ...vueDatePickerProps } = props;
+  const { class: classes, style, ...attrsWithoutClassAndStyle } = attrs;
 
-  return propsWithoutModelValue;
+  return {
+    ...vueDatePickerProps,
+    ...attrsWithoutClassAndStyle,
+    locale: getDateFnsLocale(locale.value),
+  };
 });
 
 const inputPropsAndAttrs = computed(() => {
@@ -86,7 +114,11 @@ const inputPropsAndAttrs = computed(() => {
   res.errorMsg = props.errorMsg;
   res.required = props.required;
   res.disabled = props.disabled;
-  res.placeholder = props.placeholder ? props.placeholder : props.format;
+  res.placeholder = props.placeholder
+    ? props.placeholder
+    : typeof props.formats?.input === 'string'
+      ? props.formats.input
+      : 'dd-MMM-yyyy';
   res.name = props.name;
   res.readonly = props.readonly;
 
@@ -103,3 +135,44 @@ const handleInput = (e: Event, onInputFn: (e: Event) => void, onClearFn: (e: Eve
   return onInputFn(e);
 };
 </script>
+
+<style scoped>
+/* Fix clear button positioning when label is present */
+.has-label.size-sm :deep(.dp--clear-btn) {
+  margin-top: 11px;
+}
+
+.has-label.size-md :deep(.dp--clear-btn) {
+  margin-top: 12px;
+}
+
+.has-label.size-lg :deep(.dp--clear-btn) {
+  margin-top: 14px;
+}
+
+/* Fix clear button positioning when error is present */
+.has-error.size-sm :deep(.dp--clear-btn) {
+  margin-top: -11px;
+}
+
+.has-error.size-md :deep(.dp--clear-btn) {
+  margin-top: -11px;
+}
+
+.has-error.size-lg :deep(.dp--clear-btn) {
+  margin-top: -11px;
+}
+
+/* Fix clear button positioning when label and error are present */
+.has-label.has-error.size-sm :deep(.dp--clear-btn) {
+  margin-top: 0px;
+}
+
+.has-label.has-error.size-md :deep(.dp--clear-btn) {
+  margin-top: 1px;
+}
+
+.has-label.has-error.size-lg :deep(.dp--clear-btn) {
+  margin-top: 3px;
+}
+</style>

package/squirrel/components/p-drawer/p-drawer.spec.js

@@ -0,0 +1,364 @@
+import PDrawer from '@squirrel/components/p-drawer/p-drawer.vue';
+import { I18nPlugin } from '@tests/i18n.plugin';
+import { sleep, waitRAF } from '@tests/vitest.helpers';
+import { mount } from '@vue/test-utils';
+import FloatingVue from 'floating-vue';
+
+const createWrapperContainer = (componentArgs) => {
+  const args = componentArgs || {};
+
+  args.appendTo = '#drawer-host';
+  const wrapperContainer = {
+    components: {
+      PDrawer,
+    },
+    data() {
+      return {
+        showDrawer: false,
+        args,
+      };
+    },
+    template: `
+      <div id="drawer-host"></div>
+      <PDrawer v-model="showDrawer" v-bind="args"><p>Drawer content goes here...</p></PDrawer>
+    `,
+  };
+
+  return mount(wrapperContainer, {
+    attachTo: document.body,
+    global: {
+      plugins: [FloatingVue, I18nPlugin],
+      stubs: {
+        transition: false,
+      },
+    },
+  });
+};
+
+describe('PDrawer basic functionality', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('shows the drawer', async () => {
+    const wrapper = createWrapperContainer();
+
+    expect(wrapper.find('[data-drawer-id]').exists()).toBe(false);
+
+    await wrapper.setData({ showDrawer: true });
+
+    expect(wrapper.find('[data-drawer-id]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('hides the drawer', async () => {
+    const wrapper = createWrapperContainer();
+
+    await wrapper.setData({ showDrawer: true });
+    await waitRAF();
+    await wrapper.setData({ showDrawer: false });
+    await waitRAF();
+    // Wait a bit longer for the transition to complete and element to unmount
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(wrapper.find('[data-drawer-id]').exists()).toBe(false);
+
+    wrapper.unmount();
+  });
+
+  it('renders with correct title', async () => {
+    const wrapper = createWrapperContainer({
+      title: 'Test Drawer Title',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawer = wrapper.find('[data-drawer-id]');
+    const titleElement = wrapper.find('h3');
+
+    expect(drawer.attributes('aria-label')).toBe('Test Drawer Title');
+    expect(titleElement.text()).toBe('Test Drawer Title');
+
+    wrapper.unmount();
+  });
+
+  it.each([
+    ['right', 'drawer-right', 'drawer-left'],
+    ['left', 'drawer-left', 'drawer-right'],
+  ])('renders on the %s when position is %s', async (position, expectedClass, unexpectedClass) => {
+    const wrapper = createWrapperContainer({
+      position: position === 'right' ? undefined : position,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawer = wrapper.find('[data-drawer-id]');
+
+    expect(drawer.classes()).toContain(expectedClass);
+    expect(drawer.classes()).not.toContain(unexpectedClass);
+
+    wrapper.unmount();
+  });
+
+  it('applies correct z-index', async () => {
+    const wrapper = createWrapperContainer({
+      zIndex: 950,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawer = wrapper.find('[data-drawer-id]');
+
+    expect(drawer.element.style.zIndex).toBe('950');
+
+    wrapper.unmount();
+  });
+
+  it.each([
+    [true, 'renders', true],
+    [false, 'does not render', false],
+  ])('%s close button when enableClose is %s', async (enableClose, description, shouldExist) => {
+    const wrapper = createWrapperContainer({ enableClose });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const closeBtn = wrapper.findComponent({ name: 'PCloseBtn' });
+
+    expect(closeBtn.exists()).toBe(shouldExist);
+
+    wrapper.unmount();
+  });
+
+  it('applies custom drawer class', async () => {
+    const wrapper = createWrapperContainer({
+      drawerClass: 'custom-drawer-class',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawer = wrapper.find('[data-drawer-id]');
+
+    expect(drawer.classes()).toContain('custom-drawer-class');
+
+    wrapper.unmount();
+  });
+
+  it('shows error message when provided', async () => {
+    const wrapper = createWrapperContainer({
+      errorMsg: 'This is an error message',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const errorAlert = wrapper.findComponent({ name: 'PAlert' });
+
+    expect(errorAlert.exists()).toBe(true);
+    expect(errorAlert.text()).toContain('This is an error message');
+
+    wrapper.unmount();
+  });
+
+  it('applies disabled state correctly', async () => {
+    const wrapper = createWrapperContainer({
+      disabled: true,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const contentWrapper = wrapper.find('.relative.grow.overflow-y-auto');
+
+    expect(contentWrapper.classes()).toContain('pointer-events-none');
+    expect(contentWrapper.classes()).toContain('opacity-50');
+
+    wrapper.unmount();
+  });
+
+  it.each([
+    [true, 'renders', true, 'bg-black/20'],
+    [false, 'does not render', false, null],
+  ])('%s backdrop when showBackdrop is %s', async (showBackdrop, description, shouldExist, expectedClass) => {
+    const wrapper = createWrapperContainer({ showBackdrop });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const backdrop = wrapper.find('.fixed.bottom-0.left-0.right-0.top-0');
+
+    if (shouldExist) {
+      expect(backdrop.exists()).toBe(true);
+      expect(backdrop.classes()).toContain(expectedClass);
+    } else {
+      expect(backdrop.isVisible()).toBe(false);
+    }
+
+    wrapper.unmount();
+  });
+
+  it('sets correct ARIA attributes', async () => {
+    const wrapper = createWrapperContainer({
+      title: 'Test Drawer',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawer = wrapper.find('[data-drawer-id]');
+    const drawerComponent = wrapper.findComponent(PDrawer);
+    const drawerId = drawerComponent.vm.id;
+
+    expect(drawer.attributes('role')).toBe('dialog');
+    expect(drawer.attributes('aria-modal')).toBe('false');
+    expect(drawer.attributes('aria-label')).toBe('Test Drawer');
+    expect(drawer.attributes('aria-describedby')).toBe(`${drawerId}-content`);
+    expect(drawer.attributes('aria-labelledby')).toBe(`${drawerId}-title`);
+
+    wrapper.unmount();
+  });
+
+  it.each([
+    [true, 'closes', false],
+    [false, 'does not close', true],
+  ])('%s when backdrop is clicked and enableClose is %s', async (enableClose, description, shouldStayOpen) => {
+    const wrapper = createWrapperContainer({
+      showBackdrop: true,
+      enableClose,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+    await waitRAF();
+
+    const backdrop = wrapper.find('.fixed.bottom-0.left-0.right-0.top-0');
+    await backdrop.trigger('click');
+    await waitRAF();
+
+    if (!shouldStayOpen) {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    }
+
+    expect(wrapper.find('[data-drawer-id]').exists()).toBe(shouldStayOpen);
+
+    wrapper.unmount();
+  });
+
+  it('stays mounted in DOM when live prop is true', async () => {
+    const wrapper = createWrapperContainer({
+      live: true,
+    });
+
+    // Should be in DOM even before showing
+    expect(wrapper.find('#drawer-host').exists()).toBe(true);
+
+    // Should stay in DOM after closing
+    await wrapper.setData({ showDrawer: true });
+    await wrapper.setData({ showDrawer: false });
+
+    expect(wrapper.find('#drawer-host').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('calls close method when close button is clicked', async () => {
+    const wrapper = createWrapperContainer({
+      enableClose: true,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawerComponent = wrapper.findComponent(PDrawer);
+
+    const closeBtn = wrapper.findComponent({ name: 'PCloseBtn' });
+    await closeBtn.trigger('click');
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Check that the drawer was closed (emits update:modelValue)
+    expect(drawerComponent.emitted()['update:modelValue']).toBeTruthy();
+    expect(drawerComponent.emitted()['update:modelValue'][0]).toEqual([false]);
+
+    wrapper.unmount();
+  });
+
+  it('uses custom transition classes when provided', async () => {
+    const wrapper = createWrapperContainer({
+      inClass: 'custom-slide-in',
+      outClass: 'custom-slide-out',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawerComponent = wrapper.findComponent(PDrawer);
+
+    // Test that the custom classes are passed as props
+    expect(drawerComponent.props('inClass')).toBe('custom-slide-in');
+    expect(drawerComponent.props('outClass')).toBe('custom-slide-out');
+
+    wrapper.unmount();
+  });
+
+  it('uses position-based transition classes by default', async () => {
+    const wrapperRight = createWrapperContainer({ position: 'right' });
+    await wrapperRight.setData({ showDrawer: true });
+
+    expect(wrapperRight.findComponent(PDrawer).vm.transitionInClass).toBe('slideInRight');
+    expect(wrapperRight.findComponent(PDrawer).vm.transitionOutClass).toBe('slideOutRight');
+
+    wrapperRight.unmount();
+
+    const wrapperLeft = createWrapperContainer({ position: 'left' });
+    await wrapperLeft.setData({ showDrawer: true });
+
+    expect(wrapperLeft.findComponent(PDrawer).vm.transitionInClass).toBe('slideInLeft');
+    expect(wrapperLeft.findComponent(PDrawer).vm.transitionOutClass).toBe('slideOutLeft');
+
+    wrapperLeft.unmount();
+  });
+
+  it('emits all lifecycle events', async () => {
+    const wrapper = createWrapperContainer();
+    const drawerComponent = wrapper.findComponent(PDrawer);
+
+    // Test opening events
+    await wrapper.setData({ showDrawer: true });
+    await sleep(100);
+
+    expect(drawerComponent.emitted()['before-open']).toBeTruthy();
+    expect(drawerComponent.emitted().opening).toBeTruthy();
+    expect(drawerComponent.emitted().opened).toBeTruthy();
+
+    // Test closing events
+    await wrapper.setData({ showDrawer: false });
+    await sleep(100);
+
+    expect(drawerComponent.emitted()['before-close']).toBeTruthy();
+    expect(drawerComponent.emitted().closing).toBeTruthy();
+    expect(drawerComponent.emitted().closed).toBeTruthy();
+
+    wrapper.unmount();
+  });
+
+  it('applies backdrop cursor style based on enableClose', async () => {
+    const wrapper = createWrapperContainer({
+      showBackdrop: true,
+      enableClose: true,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const backdrop = wrapper.find('.fixed.bottom-0.left-0.right-0.top-0');
+
+    expect(backdrop.classes()).toContain('cursor-pointer');
+
+    wrapper.unmount();
+  });
+
+  it('validates width prop format', async () => {
+    const wrapper = createWrapperContainer({
+      width: '600px',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    // Component should render successfully with valid width
+    expect(wrapper.find('[data-drawer-id]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+});

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

@@ -39,7 +39,13 @@
               { 'flex-row-reverse': position === 'right' },
             ]"
           >
-            <PCloseBtn v-if="enableClose" :aria-label="closeLabel" class="flex-0" :disabled="disabled" @click="close" />
+            <PCloseBtn
+              v-if="enableClose"
+              :aria-label="closeLabel || $t('squirrel.close')"
+              class="flex-0"
+              :disabled="disabled"
+              @click="close"
+            />
             <slot name="title">
               <h3
                 v-if="title"
@@ -201,7 +207,7 @@ export default defineComponent({
      */
     closeLabel: {
       type: String,
-      default: 'Close',
+      default: '',
     },
     /**
      * Whether to show the backdrop behind the drawer.