@pequity/squirrel 5.4.1 → 5.4.2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.4.1",
-  "packageManager": "pnpm@9.11.0",
+  "version": "5.4.2",
+  "packageManager": "pnpm@9.12.1",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -53,33 +53,33 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@pequity/eslint-config": "^0.0.13",
-    "@playwright/test": "^1.47.2",
+    "@playwright/test": "^1.48.0",
     "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.3.3",
-    "@storybook/addon-actions": "^8.3.3",
-    "@storybook/addon-essentials": "^8.3.3",
-    "@storybook/addon-interactions": "^8.3.3",
-    "@storybook/addon-links": "^8.3.3",
-    "@storybook/blocks": "^8.3.3",
-    "@storybook/manager-api": "^8.3.3",
-    "@storybook/test": "^8.3.3",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-actions": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/manager-api": "^8.3.5",
+    "@storybook/test": "^8.3.5",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.3.3",
-    "@storybook/vue3": "^8.3.3",
-    "@storybook/vue3-vite": "^8.3.3",
+    "@storybook/theming": "^8.3.5",
+    "@storybook/vue3": "^8.3.5",
+    "@storybook/vue3-vite": "^8.3.5",
     "@tanstack/vue-virtual": "3.10.8",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.7.3",
+    "@types/node": "^22.7.5",
     "@vitejs/plugin-vue": "^5.1.4",
-    "@vitest/coverage-v8": "^2.1.1",
-    "@vue/compiler-sfc": "3.4.38",
+    "@vitest/coverage-v8": "^2.1.3",
+    "@vue/compiler-sfc": "3.5.12",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-storybook": "^0.9.0",
     "floating-vue": "5.2.2",
     "glob": "^11.0.0",
@@ -94,16 +94,16 @@
     "prettier-plugin-tailwindcss": "^0.6.8",
     "resolve-tspaths": "^0.8.22",
     "rimraf": "^6.0.1",
-    "sass": "^1.79.3",
+    "sass": "^1.79.5",
     "semantic-release": "^24.1.2",
-    "storybook": "^8.3.3",
+    "storybook": "^8.3.5",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.13",
-    "typescript": "5.6.2",
+    "typescript": "5.6.3",
     "v-calendar": "3.1.2",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.1",
-    "vue": "3.4.38",
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3",
+    "vue": "3.5.12",
     "vue-currency-input": "3.1.0",
     "vue-router": "4.4.5",
     "vue-toastification": "2.0.0-rc.5",

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

@@ -14,6 +14,18 @@ const ELEMENTS_MAP = {
   section: { name: 'home', params: { id: 1 } },
 };
 
+const DEFAULT_CLASSES_ARRAY = [
+  'relative',
+  'inline-block',
+  'outline-none',
+  'disabled:opacity-50',
+  'disabled:cursor-default',
+  'disabled:pointer-events-none',
+  'aria-disabled:opacity-50',
+  'aria-disabled:cursor-default',
+  'aria-disabled:pointer-events-none',
+];
+
 describe('PBtn.vue', () => {
   Object.keys(ELEMENTS_MAP).forEach((el) => {
     const to = ELEMENTS_MAP[el];
@@ -66,6 +78,7 @@ describe('PBtn.vue', () => {
       const element = await wrapper.find(el);
 
       expect(classes.every((c) => element.classes().includes(c))).toBe(true);
+      expect(DEFAULT_CLASSES_ARRAY.every((c) => element.classes().includes(c))).toBe(true);
     });
   });
 
@@ -81,26 +94,42 @@ describe('PBtn.vue', () => {
     expect(button.text()).toContain(`This is a button`);
   });
 
-  it('gets disabled when the disabled attr is set to true', async () => {
+  it.each([
+    ['button', undefined],
+    ['a', 'https://pequity.com/'],
+    ['a', { name: 'home', params: { id: 1 } }],
+  ])('gets disabled when the element is a %s and points to %s', async (el, to) => {
     const wrapper = createWrapperFor(PBtn, {
+      props: {
+        to,
+      },
       attrs: {
         disabled: true,
       },
+      global: {
+        stubs: { RouterLink: { template: '<a class="router-link-stub"><slot /></a>' } },
+      },
     });
 
-    const button = await wrapper.find('button');
+    const button = await wrapper.find(el);
 
     await button.trigger('click');
 
-    expect(wrapper.emitted().click).toBeFalsy();
+    if (el === 'button') {
+      expect(wrapper.emitted().click).toBeFalsy();
+    }
     expect(button.attributes()).toHaveProperty('disabled');
+    expect(button.attributes()['aria-disabled']).toBe('true');
 
     await wrapper.setProps({ disabled: false });
 
     await button.trigger('click');
 
-    expect(wrapper.emitted().click[0][0] instanceof MouseEvent).toBe(true);
+    if (el === 'button') {
+      expect(wrapper.emitted().click[0][0] instanceof MouseEvent).toBe(true);
+    }
     expect(button.attributes()).not.toHaveProperty('disabled');
+    expect(button.attributes()['aria-disabled']).toBe('false');
   });
 
   it('has a loading state', async () => {

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

@@ -5,6 +5,8 @@
     :href="sanitizeUrl(to)"
     target="_blank"
     :class="classes"
+    :disabled="!!$attrs.disabled ? true : null"
+    :aria-disabled="!!$attrs.disabled"
   >
     <slot></slot>
   </a>
@@ -16,7 +18,8 @@
     :aria-selected="selected"
     :class="classes"
     v-bind="$attrs"
-    :disabled="($attrs.disabled as boolean) || loading"
+    :disabled="!!$attrs.disabled || loading ? true : null"
+    :aria-disabled="$attrs.disabled"
   >
     <div :class="{ invisible: loading }"><slot></slot></div>
     <PRingLoader
@@ -57,7 +60,7 @@ type ButtonNativeType = (typeof BUTTON_NATIVE_TYPES)[number];
 type ButtonTypeKeys = keyof typeof BUTTON_TYPES;
 type ButtonType = (typeof BUTTON_TYPES)[ButtonTypeKeys];
 
-const DEFAULT_CLASSES = `relative inline-block outline-none disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none`;
+const DEFAULT_CLASSES = `relative inline-block outline-none disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-default aria-disabled:pointer-events-none`;
 
 type ButtonClass = {
   [key in ButtonType]: string;

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

@@ -15,10 +15,9 @@
       :timezone="timezone"
     >
       <template #default="{ inputValue, inputEvents }">
-        <input
-          :class="[inputClasses, { 'cursor-pointer': !attrs.disabled }]"
+        <PInput
           :value="inputValue"
-          v-bind="attrs"
+          v-bind="attrsWithoutClassAndStyle"
           :placeholder="displayPlaceholder"
           v-on="inputEvents"
         />
@@ -28,12 +27,18 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import PInput from '@squirrel/components/p-input/p-input.vue';
 import dayjs from 'dayjs';
-import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
 import { DatePicker } from 'v-calendar';
-import { type PropType, type StyleValue, defineComponent } from 'vue';
+import { type StyleValue, computed, nextTick, ref, useAttrs, watch } from 'vue';
 import { isDate, isString } from 'lodash-es';
+import { useInputClasses } from '@squirrel/composables/useInputClasses';
+
+defineOptions({
+  name: 'PDatePicker',
+  inheritAttrs: false,
+});
 
 // The type of the select attribute is defined in node_modules/v-calendar/dist/types/src/utils/attribute.d.ts
 // but there was no way to import it, so as a workaround we cast the selectAttribute as `any`.
@@ -47,87 +52,75 @@ const DEFAULT_MASKS = {
   data: 'YYYY-MM-DD',
 };
 
-export default defineComponent({
-  name: 'PDatePicker',
-  components: {
-    DatePicker,
-  },
-  mixins: [inputClassesMixin],
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: String as PropType<string | null | undefined>,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    errorMsg: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    minDate: {
-      type: Date,
-      default: null,
-    },
-    maxDate: {
-      type: Date,
-      default: null,
-    },
-    timezone: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      // innerValue is a Date object
-      innerValue: null as Date | null,
-      stopWatch: false,
-      selectAttribute,
-    };
-  },
-  computed: {
-    displayPlaceholder(): string {
-      return isString(this.$attrs.placeholder) ? this.$attrs.placeholder : this.masks.input;
-    },
-    masks() {
-      return Object.assign(DEFAULT_MASKS, this.$attrs.masks);
-    },
-    attrs() {
-      const { class: classes, style, ...rest } = this.$attrs;
+type Props = {
+  modelValue?: string | null;
+  label?: string;
+  errorMsg?: string;
+  required?: boolean;
+  minDate?: Date | null;
+  maxDate?: Date | null;
+  timezone?: string;
+};
 
-      return rest;
-    },
-    style() {
-      return this.$attrs.style as StyleValue;
-    },
-  },
-  watch: {
-    modelValue: {
-      handler(nV) {
-        if (!this.stopWatch) {
-          this.innerValue = nV ? dayjs(nV, this.masks.data).toDate() : null;
-        }
-      },
-      immediate: true,
-    },
-    innerValue(nV) {
-      // We're emitting back a formatted String (value) or null in case we have an invalid date
-      const toEmit = isDate(nV) && nV.toString() !== 'Invalid Date' ? dayjs(nV).format(this.masks.data) : null;
-      // Stop watching when updating the value by clicking in the datepicker, in order to prevent double-emit.
-      this.stopWatch = true;
-      this.$emit('update:modelValue', toEmit);
-      this.$nextTick(() => {
-        this.stopWatch = false;
-      });
-    },
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  label: '',
+  errorMsg: '',
+  required: false,
+  minDate: null,
+  maxDate: null,
+  timezone: '',
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null];
+}>();
+
+// Data
+const { labelClasses, errorMsgClasses } = useInputClasses(props);
+const attrs = useAttrs();
+// innerValue is a Date object
+const innerValue = ref<Date | null>(null);
+const stopWatch = ref(false);
+
+// Computed
+const masks = computed(() => {
+  return Object.assign(DEFAULT_MASKS, attrs.masks);
+});
+
+const displayPlaceholder = computed(() => {
+  return isString(attrs.placeholder) ? attrs.placeholder : masks.value.input;
+});
+
+const attrsWithoutClassAndStyle = computed(() => {
+  const { class: classes, style, ...rest } = attrs;
+
+  return rest;
+});
+
+const style = computed(() => {
+  return attrs.style as StyleValue;
+});
+
+// Watch
+watch(
+  () => props.modelValue,
+  (nV) => {
+    if (!stopWatch.value) {
+      innerValue.value = nV ? dayjs(nV, masks.value.data).toDate() : null;
+    }
   },
+  { immediate: true }
+);
+
+watch(innerValue, (nV) => {
+  // We're emitting back a formatted String (value) or null in case we have an invalid date
+  const toEmit = isDate(nV) && nV.toString() !== 'Invalid Date' ? dayjs(nV).format(masks.value.data) : null;
+  // Stop watching when updating the value by clicking in the datepicker, in order to prevent double-emit.
+  stopWatch.value = true;
+  emit('update:modelValue', toEmit);
+  nextTick(() => {
+    stopWatch.value = false;
+  });
 });
 </script>

package/squirrel/components/p-inline-date-picker/p-inline-date-picker.spec.js

@@ -1,4 +1,5 @@
 import PInlineDatePicker from '@squirrel/components/p-inline-date-picker/p-inline-date-picker.vue';
+import { DatePicker } from 'v-calendar';
 import { createWrapperFor } from '@tests/vitest.helpers';
 
 const createWrapper = (props) => {
@@ -20,17 +21,17 @@ describe('PInlineDatePicker.vue', () => {
   it('renders a datepicker', () => {
     const wrapper = createWrapper();
 
-    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+    const datePicker = wrapper.findComponent(DatePicker);
 
-    expect(datePicker.props()).toEqual({
+    expect(datePicker.props()).toMatchObject({
       modelValue: null,
       selectAttribute: { highlight: { class: 'bg-primary', contentClass: 'text-white' } },
       minDate: null,
       maxDate: null,
       masks: { input: 'DD-MMM-YYYY', data: 'YYYY-MM-DD' },
-      style: {},
       timezone: '',
     });
+
     expect(wrapper.find('label').exists()).toBe(false);
     expect(wrapper.find('div.text-xs.text-on-error.mt-1').isVisible()).toBe(false);
   });
@@ -43,7 +44,7 @@ describe('PInlineDatePicker.vue', () => {
       timezone: 'UTC',
     });
 
-    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+    const datePicker = wrapper.findComponent(DatePicker);
 
     expect(datePicker.props().modelValue).toEqual(new Date('2024-05-19'));
     expect(datePicker.props().minDate).toEqual(new Date('2024-05-01'));
@@ -77,7 +78,6 @@ describe('PInlineDatePicker.vue', () => {
 
     expect(wrapper.props().required).toBe(true);
   });
-
   it('passes listeners to the datepicker', () => {
     // Since DatePicker emits are not defined on PInlineDatePicker we need to Spy on console.warn and mock the implementation to suppress the warning:
     // [Vue warn]: Component emitted event "update:view" but it is neither declared in the emits option nor as an "onUpdate:view" prop.
@@ -100,7 +100,7 @@ describe('PInlineDatePicker.vue', () => {
       },
     });
 
-    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+    const datePicker = wrapper.findComponent(DatePicker);
 
     datePicker.vm.$emit('update:view');
 
@@ -112,9 +112,9 @@ describe('PInlineDatePicker.vue', () => {
   it('sets the disabled state correctly', () => {
     const wrapper = createWrapper({ label: 'test datepicker', disabled: true });
 
-    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+    const datePickerDiv = wrapper.find('.vc-container');
 
-    expect(['pointer-events-none', 'opacity-70'].every((c) => datePicker.classes().includes(c))).toBe(true);
+    expect(['pointer-events-none', 'opacity-70'].every((c) => datePickerDiv.classes().includes(c))).toBe(true);
   });
 
   it(`updates the value when a day is clicked`, async () => {
@@ -128,7 +128,7 @@ describe('PInlineDatePicker.vue', () => {
       },
     });
 
-    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+    const datePicker = wrapper.findComponent(DatePicker);
 
     datePicker.vm.$emit('dayclick', { id: '2024-09-02' });
 
@@ -138,7 +138,7 @@ describe('PInlineDatePicker.vue', () => {
   it(`updates the datepicker value when modelValue is changed`, async () => {
     const wrapper = createWrapper({ modelValue: '2024-09-01' });
 
-    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+    const datePicker = wrapper.findComponent(DatePicker);
     datePicker.vm.move = vi.fn();
 
     expect(datePicker.props().modelValue).toEqual(new Date('2024-09-01'));
@@ -156,11 +156,9 @@ describe('PInlineDatePicker.vue', () => {
     });
 
     expect(wrapper.attributes()['data-has-error']).toBeDefined();
-    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+    const datePickerDiv = wrapper.find('.vc-container');
 
-    expect(datePicker.props().style).toEqual({
-      border: '1px solid var(--color-on-error)',
-    });
+    expect(datePickerDiv.element.style.border).toBe('1px solid #f0453c');
     const errorDiv = wrapper.find('div.text-xs.text-on-error.mt-1');
     expect(errorDiv.isVisible()).toBe(true);
     expect(errorDiv.text()).toBe('datepicker has error');

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

@@ -6,7 +6,7 @@
       </label>
     </slot>
     <DatePicker
-      ref="datepicker"
+      ref="datepickerRef"
       :class="{ 'pointer-events-none opacity-70': $attrs.disabled }"
       :model-value="innerValue"
       :select-attribute="selectAttribute"
@@ -22,12 +22,17 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import dayjs from 'dayjs';
-import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
 import { type AttributeConfig } from 'v-calendar/dist/types/src/utils/attribute.d';
 import { DatePicker } from 'v-calendar';
-import { type PropType, type StyleValue, defineComponent } from 'vue';
+import { type StyleValue, computed, ref, useAttrs, watch } from 'vue';
+import { useInputClasses } from '@squirrel/composables/useInputClasses';
+
+defineOptions({
+  name: 'PInlineDatePicker',
+  inheritAttrs: false,
+});
 
 const selectAttribute: AttributeConfig = {
   highlight: { class: 'bg-primary', contentClass: 'text-white' },
@@ -40,100 +45,83 @@ const DEFAULT_MASKS = {
   data: 'YYYY-MM-DD',
 };
 
-export default defineComponent({
-  name: 'PInlineDatePicker',
-  components: {
-    DatePicker,
-  },
-  mixins: [inputClassesMixin],
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: String as PropType<string | null | undefined>,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    errorMsg: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    minDate: {
-      type: Date,
-      default: null,
-    },
-    maxDate: {
-      type: Date,
-      default: null,
-    },
-    timezone: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      // innerValue is a Date object
-      innerValue: null as Date | null,
-      selectAttribute,
-    };
-  },
-  computed: {
-    masks() {
-      return Object.assign(DEFAULT_MASKS, this.$attrs.masks);
-    },
-    attrs() {
-      const { class: classes, style, ...rest } = this.$attrs;
-
-      return rest;
-    },
-    listeners() {
-      return Object.keys(this.$attrs).reduce((acc, curr) => {
-        if (curr.startsWith('on')) {
-          return { ...acc, [curr]: this.$attrs[curr] };
-        } else {
-          return acc;
-        }
-      }, {});
-    },
-    style() {
-      return this.$attrs.style as StyleValue;
-    },
-    styleDatepicker() {
-      return this.errorMsg ? { border: '1px solid var(--color-on-error)' } : {};
-    },
-  },
-  watch: {
-    modelValue: {
-      async handler(nV) {
-        const date = dayjs(nV, this.masks.data).toDate();
-
-        if (nV && date.toString() === 'Invalid Date') {
-          this.$emit('update:modelValue', null);
-          return;
-        }
-
-        this.innerValue = nV ? dayjs(nV, this.masks.data).toDate() : null;
-        const datepicker = this.$refs.datepicker as { move: (val: unknown) => void };
-
-        if (datepicker && typeof datepicker.move === 'function' && this.innerValue) {
-          await datepicker.move(this.innerValue);
-        }
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    dayclick(e: { id: string }) {
-      this.$emit('update:modelValue', e.id);
-    },
-  },
+type Props = {
+  modelValue?: string | null;
+  label?: string;
+  errorMsg?: string;
+  required?: boolean;
+  minDate?: Date | null;
+  maxDate?: Date | null;
+  timezone?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  label: '',
+  errorMsg: '',
+  required: false,
+  minDate: null,
+  maxDate: null,
+  timezone: '',
 });
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null];
+}>();
+
+// Data
+const { labelClasses, errorMsgClasses } = useInputClasses(props);
+const attrs = useAttrs();
+// innerValue is a Date object
+const innerValue = ref<Date | null>(null);
+const datepickerRef = ref<InstanceType<typeof DatePicker> | null>(null);
+
+// Computed
+const masks = computed(() => {
+  return Object.assign(DEFAULT_MASKS, attrs.masks);
+});
+
+const listeners = computed(() => {
+  return Object.keys(attrs).reduce((acc, curr) => {
+    if (curr.startsWith('on')) {
+      return { ...acc, [curr]: attrs[curr] };
+    } else {
+      return acc;
+    }
+  }, {});
+});
+
+const style = computed(() => {
+  return attrs.style as StyleValue;
+});
+
+const styleDatepicker = computed(() => {
+  return props.errorMsg ? { border: '1px solid #f0453c' } : {};
+});
+
+// Methods
+const dayclick = (e: { id: string }) => {
+  emit('update:modelValue', e.id);
+};
+
+// Watch
+watch(
+  () => props.modelValue,
+  async (nV) => {
+    const date = dayjs(nV, masks.value.data).toDate();
+
+    if (nV && date.toString() === 'Invalid Date') {
+      emit('update:modelValue', null);
+      return;
+    }
+
+    innerValue.value = nV ? dayjs(nV, masks.value.data).toDate() : null;
+    const datepicker = datepickerRef.value as { move: (val: unknown) => void };
+
+    if (datepicker && typeof datepicker.move === 'function' && innerValue.value) {
+      await datepicker.move(innerValue.value);
+    }
+  },
+  { immediate: true }
+);
 </script>