@pequity/squirrel 5.4.0 → 5.4.2

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>

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

@@ -119,7 +119,7 @@ const props = defineProps({
   },
   bgClass: {
     type: [String, Object, Array] as PropType<StyleValue>,
-    default: 'fixed bottom-0 left-0 right-0 top-0 bg-black bg-opacity-20',
+    default: 'fixed bottom-0 left-0 right-0 top-0 bg-black/20',
   },
   wrapperClass: {
     type: [String, Object, Array] as PropType<StyleValue>,

package/squirrel/tailwind/config.ts

@@ -7,71 +7,71 @@ export const config = {
       transparent: 'transparent',
       current: 'currentColor',
       /* Design system colors */
-      white: '#fff',
-      black: '#000',
-      night: 'var(--color-night)',
-      'barley-white': 'var(--color-barley-white)',
-      'horses-neck': 'var(--color-horses-neck)',
-      'active-blue': 'var(--color-active-blue)',
+      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: 'var(--color-p-gray-10)',
-        20: 'var(--color-p-gray-20)',
-        30: 'var(--color-p-gray-30)',
-        40: 'var(--color-p-gray-40)',
-        50: 'var(--color-p-gray-50)',
-        60: 'var(--color-p-gray-60)',
-        70: 'var(--color-p-gray-70)',
-        80: 'var(--color-p-gray-80)',
-        90: 'var(--color-p-gray-90)',
-        100: 'var(--color-p-gray-100)',
+        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: 'var(--color-p-blue-10)',
-        15: 'var(--color-p-blue-15)',
-        20: 'var(--color-p-blue-20)',
-        30: 'var(--color-p-blue-30)',
-        40: 'var(--color-p-blue-40)',
-        50: 'var(--color-p-blue-50)',
-        60: 'var(--color-p-blue-60)',
-        70: 'var(--color-p-blue-70)',
-        80: 'var(--color-p-blue-80)',
+        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: 'var(--color-p-purple-10)',
-        20: 'var(--color-p-purple-20)',
-        30: 'var(--color-p-purple-30)',
-        40: 'var(--color-p-purple-40)',
-        50: 'var(--color-p-purple-50)',
-        60: 'var(--color-p-purple-60)',
+        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: 'var(--color-p-green-10)',
-        20: 'var(--color-p-green-20)',
-        30: 'var(--color-p-green-30)',
-        40: 'var(--color-p-green-40)',
-        50: 'var(--color-p-green-50)',
+        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: 'var(--color-p-red-10)',
-        20: 'var(--color-p-red-20)',
-        30: 'var(--color-p-red-30)',
-        40: 'var(--color-p-red-40)',
-        50: 'var(--color-p-red-50)',
+        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: 'var(--color-primary)',
-      accent: 'var(--color-accent)',
-      surface: 'var(--color-surface)',
-      'on-surface': 'var(--color-on-surface)',
-      error: 'var(--color-error)',
-      'on-error': 'var(--color-on-error)',
-      info: 'var(--color-info)',
-      'on-info': 'var(--color-on-info)',
-      success: 'var(--color-success)',
-      'on-success': 'var(--color-on-success)',
-      warning: 'var(--color-warning)',
-      'on-warning': 'var(--color-on-warning)',
+      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'],
@@ -90,7 +90,7 @@ export const config = {
     },
     extend: {
       borderColor: {
-        DEFAULT: 'var(--color-p-gray-30)',
+        DEFAULT: 'rgb(var(--color-p-gray-30))',
       },
       spacing: {
         7.5: '1.875rem',

package/dist/squirrel/components/p-inline-date-picker/p-inline-date-picker.vue.d.ts

@@ -1,154 +0,0 @@
-import { type PropType, type StyleValue } from 'vue';
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: PropType<string | null | undefined>;
-        default: string;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    errorMsg: {
-        type: StringConstructor;
-        default: string;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    minDate: {
-        type: DateConstructor;
-        default: null;
-    };
-    maxDate: {
-        type: DateConstructor;
-        default: null;
-    };
-    timezone: {
-        type: StringConstructor;
-        default: string;
-    };
-}, unknown, {
-    innerValue: Date | null;
-    selectAttribute: Partial<{
-        key: string | number;
-        hashcode: string;
-        content: import("v-calendar/dist/types/src/utils/glyph.js").ContentConfig;
-        highlight: import("v-calendar/dist/types/src/utils/glyph.js").HighlightConfig;
-        dot: import("v-calendar/dist/types/src/utils/glyph.js").DotConfig;
-        bar: import("v-calendar/dist/types/src/utils/glyph.js").BarConfig;
-        popover: import("v-calendar/dist/types/src/utils/attribute.js").PopoverConfig;
-        event: import("v-calendar/dist/types/src/utils/attribute.js").EventConfig;
-        dates: import("v-calendar/dist/types/src/utils/date/range.js").DateRangeSource[];
-        customData: any;
-        order: number;
-        pinPage: boolean;
-    }>;
-}, {
-    masks(): {
-        input: string;
-        data: string;
-    };
-    attrs(): {
-        [x: string]: unknown;
-    };
-    listeners(): {};
-    style(): StyleValue;
-    styleDatepicker(): {
-        border: string;
-    } | {
-        border?: undefined;
-    };
-}, {
-    dayclick(e: {
-        id: string;
-    }): void;
-}, import("vue").DefineComponent<{
-    size: {
-        type: PropType<import("../../index.js").InputSize>;
-        default: string;
-        validator(value: import("../../index.js").InputSize): boolean;
-    };
-    errorMsg: {
-        type: StringConstructor;
-        default: string;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    rounded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, unknown, {
-    errorMsgClasses: string;
-}, {
-    inputClasses(): string;
-    labelClasses(): string;
-    selectClasses(): string;
-    textareaClasses(): string;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: PropType<import("../../index.js").InputSize>;
-        default: string;
-        validator(value: import("../../index.js").InputSize): boolean;
-    };
-    errorMsg: {
-        type: StringConstructor;
-        default: string;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    rounded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {
-    size: "sm" | "lg" | "md";
-    rounded: boolean;
-    required: boolean;
-    errorMsg: string;
-}, {}>, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<string | null | undefined>;
-        default: string;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    errorMsg: {
-        type: StringConstructor;
-        default: string;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    minDate: {
-        type: DateConstructor;
-        default: null;
-    };
-    maxDate: {
-        type: DateConstructor;
-        default: null;
-    };
-    timezone: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
-    label: string;
-    required: boolean;
-    modelValue: string | null | undefined;
-    errorMsg: string;
-    timezone: string;
-    minDate: Date;
-    maxDate: Date;
-}, {}>;
-export default _default;