@pequity/squirrel 5.4.1 → 5.4.3

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-select-list/p-select-list.spec.js

@@ -89,6 +89,32 @@ describe('PSelectList.vue', () => {
     cleanup(wrapper);
   });
 
+  it('focuses on the search input on mount', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const wrapper = createWrapper({ selected: 17 }, { searchable: true, focusSearchOnMount: true });
+
+    const inputSearch = wrapper.findComponent({ name: 'PInputSearch' });
+
+    expect(inputSearch.exists()).toBe(true);
+    expect(inputSearch.element.querySelector('input')).toBe(document.activeElement);
+
+    cleanup(wrapper);
+  });
+
+  it('does not focus on the search input on mount', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const wrapper = createWrapper({ selected: 17 }, { searchable: true, focusSearchOnMount: false });
+
+    const inputSearch = wrapper.findComponent({ name: 'PInputSearch' });
+
+    expect(inputSearch.exists()).toBe(true);
+    expect(inputSearch.element.querySelector('input')).not.toBe(document.activeElement);
+
+    cleanup(wrapper);
+  });
+
   it('emits the selected value when clicked (v-model)', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
 

package/squirrel/components/p-select-list/p-select-list.vue

@@ -251,6 +251,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  /**
+   * Focus the search input on mount
+   */
+  focusSearchOnMount: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 // Data
@@ -298,7 +305,7 @@ onMounted(async () => {
   putSelectedItemsOnTop();
 
   if (props.searchable) {
-    inputSearch.value?.$el.querySelector('input').focus();
+    props.focusSearchOnMount && inputSearch.value?.$el.querySelector('input').focus();
   } else {
     setupNavigationSvc();
   }

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;