feat: Add mobileBreakpoint property in config prop, replace @import with @use in scss (resolves #993)

Author: Jasenkoo

dev/serve.vue

@@ -12,7 +12,7 @@
 </script>
 
 <style lang="scss">
-    @import 'src/VueDatePicker/style/main';
+    @use 'src/VueDatePicker/style/main';
     .wrapper {
         padding: 200px;
     }

src/VueDatePicker/VueDatePicker.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="pickerWrapperRef" :class="wrapperClass" data-datepicker-instance>
+    <div ref="pickerWrapperRef" :class="wrapperClass" data-datepicker-instance :data-dp-mobile="isMobile">
         <DatepickerInput
             ref="inputRef"
             v-model:input-value="inputValue"
@@ -110,6 +110,7 @@
         MaybeElementRef,
     } from '@/interfaces';
     import { useDefaults } from '@/composables/defaults';
+    import { useResponsive } from '@/composables/responsive';
 
     const emit = defineEmits([
         'update:model-value',
@@ -174,6 +175,7 @@
         defaultedMultiDates,
     } = useDefaults(props);
     const { menuTransition, showTransition } = useTransitions(defaultedTransitions);
+    const { isMobile } = useResponsive(defaultedConfig);
 
     onMounted(() => {
         parseExternalModelValue(props.modelValue);

src/VueDatePicker/components/Common/InstanceWrap.vue

@@ -6,6 +6,7 @@
             dp__flex_display: multiCalendars > 0,
             'dp--flex-display-collapsed': collapse,
         }"
+        :data-dp-mobile="isMobile"
     >
         <div v-for="(instance, i) in instances" :key="instance" :class="calendarInstanceClassWrapper">
             <slot :instance="instance" :index="i"></slot>
@@ -16,7 +17,7 @@
 <script lang="ts" setup>
     import { computed } from 'vue';
 
-    const props = defineProps<{ multiCalendars: number; stretch?: boolean; collapse?: boolean }>();
+    const props = defineProps<{ multiCalendars: number; stretch?: boolean; collapse?: boolean; isMobile?: boolean }>();
 
     const instances = computed((): number[] =>
         props.multiCalendars > 0 ? [...Array(props.multiCalendars).keys()] : [0],

src/VueDatePicker/components/DatePicker/DatePicker.vue

@@ -1,5 +1,10 @@
 <template>
-    <InstanceWrap v-slot="{ instance, index }" :multi-calendars="defaultedMultiCalendars.count" :collapse="collapse">
+    <InstanceWrap
+        v-slot="{ instance, index }"
+        :multi-calendars="defaultedMultiCalendars.count"
+        :collapse="collapse"
+        :is-mobile="isMobile"
+    >
         <DpHeader
             v-if="!disableMonthYearSelect"
             :ref="

src/VueDatePicker/components/DatepickerMenu.vue

@@ -25,6 +25,7 @@
                 'dp--menu-content-wrapper-collapsed':
                     collapse && (presetDates?.length || !!$slots['left-sidebar'] || !!$slots['right-sidebar']),
             }"
+            :data-dp-mobile="isMobile"
             :style="{ '--dp-menu-width': `${calendarWidth}px` }"
         >
             <div v-if="$slots['left-sidebar']" class="dp__sidebar_left">
@@ -33,6 +34,7 @@
             <div
                 v-if="presetDates.length"
                 :class="{ 'dp--preset-dates-collapsed': collapse, 'dp--preset-dates': true }"
+                :data-dp-mobile="isMobile"
             >
                 <template v-for="(preset, i) in presetDates" :key="i">
                     <template v-if="preset.slot">
@@ -50,6 +52,7 @@
                             class="dp__btn dp--preset-range"
                             :class="{ 'dp--preset-range-collapsed': collapse }"
                             :data-test-id="preset.testId ?? undefined"
+                            :data-dp-mobile="isMobile"
                             @click.prevent="presetDate(preset.value, preset.noTz)"
                             @keydown="checkKeyDown($event, () => presetDate(preset.value, preset.noTz), true)"
                         >
@@ -134,6 +137,7 @@
     import type { DynamicClass, MenuView, InternalModuleValue, MenuExposedFn, MonthModel } from '@/interfaces';
     import type { PropType } from 'vue';
     import { ArrowDirection, EventKey } from '@/constants';
+    import { useResponsive } from '@/composables/responsive';
 
     defineOptions({
         compatConfig: {
@@ -182,6 +186,7 @@
         const { openOnTop: _, ...initProps } = props;
         return {
             ...initProps,
+            isMobile: isMobile.value,
             flowStep: flowStep.value,
             menuWrapRef: dpMenuRef.value,
         };
@@ -190,6 +195,7 @@
     const { setMenuFocused, setShiftKey, control } = useState();
     const slots = useSlots();
     const { defaultedTextInput, defaultedInline, defaultedConfig, defaultedUI } = useDefaults(props);
+    const { isMobile } = useResponsive(defaultedConfig);
 
     const calendarWrapperRef = ref(null);
     const calendarWidth = ref(0);

src/VueDatePicker/components/MonthPicker/MonthPicker.vue

@@ -1,5 +1,11 @@
 <template>
-    <InstanceWrap v-slot="{ instance }" :multi-calendars="defaultedMultiCalendars.count" :collapse="collapse" stretch>
+    <InstanceWrap
+        v-slot="{ instance }"
+        :multi-calendars="defaultedMultiCalendars.count"
+        :collapse="collapse"
+        stretch
+        :is-mobile="isMobile"
+    >
         <slot v-if="$slots['top-extra']" name="top-extra" :value="internalModelValue" />
         <template v-if="$slots['month-year']">
             <slot

src/VueDatePicker/components/QuarterPicker/QuarterPicker.vue

@@ -1,5 +1,11 @@
 <template>
-    <InstanceWrap v-slot="{ instance }" :multi-calendars="defaultedMultiCalendars.count" :collapse="collapse" stretch>
+    <InstanceWrap
+        v-slot="{ instance }"
+        :multi-calendars="defaultedMultiCalendars.count"
+        :collapse="collapse"
+        stretch
+        :is-mobile="isMobile"
+    >
         <div class="dp-quarter-picker-wrap" :style="{ minHeight: `${defaultedConfig.modeHeight}px` }">
             <slot v-if="$slots['top-extra']" name="top-extra" :value="internalModelValue" />
             <div>

src/VueDatePicker/components/TimePicker/TimePicker.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="dp--tp-wrap">
+    <div class="dp--tp-wrap" :data-dp-mobile="isMobile">
         <button
             v-if="!timePicker && !timePickerInline"
             v-show="!hideNavigationButtons(hideNavigation, 'time')"

src/VueDatePicker/components/TimePicker/TimePickerSolo.vue

@@ -1,5 +1,5 @@
 <template>
-    <InstanceWrap :multi-calendars="0" stretch>
+    <InstanceWrap :multi-calendars="0" stretch :is-mobile="isMobile">
         <TimePicker
             ref="tpRef"
             v-bind="$props"

src/VueDatePicker/composables/responsive.ts

@@ -0,0 +1,25 @@
+import { computed, type ComputedRef, onMounted, onUnmounted, ref } from 'vue';
+import type { Config } from '@/interfaces';
+
+export const useResponsive = (config: ComputedRef<Config>) => {
+    const windowWidth = ref(0);
+
+    onMounted(() => {
+        updateWindowWidth();
+        window.addEventListener('resize', updateWindowWidth, { passive: true });
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', updateWindowWidth);
+    });
+
+    const updateWindowWidth = () => {
+        windowWidth.value = window.document.documentElement.clientWidth;
+    };
+
+    const isMobile = computed(() => (windowWidth.value <= config.value.mobileBreakpoint ? true : undefined));
+
+    return {
+        isMobile,
+    };
+};

src/VueDatePicker/interfaces.ts

@@ -11,7 +11,6 @@ export interface IDefaultSelect<T = number> {
     className?: DynamicClass;
 }
 
- 
 export type VueEmit = (event: any, ...args: any[]) => void;
 
 export enum OpenPosition {
@@ -294,6 +293,7 @@ export interface Config {
     keepViewOnOffsetClick?: boolean;
     timeArrowHoldThreshold: number;
     shadowDom?: boolean;
+    mobileBreakpoint: number;
 }
 
 export interface Highlight {

src/VueDatePicker/props.ts

@@ -167,6 +167,7 @@ export const PickerBaseProps = {
     menuWrapRef: { type: Object as PropType<HTMLElement | null>, default: null },
     getInputRect: { type: Function as PropType<() => DOMRect>, default: () => ({}) },
     isTextInputDate: { type: Boolean as PropType<boolean>, default: false },
+    isMobile: { type: Boolean as PropType<boolean>, default: false },
 };
 
 export type AllPropsType = ExtractPropTypes<typeof AllProps>;

src/VueDatePicker/style/components/_Calendar.scss

@@ -256,10 +256,10 @@
   width: 100%;
 }
 
-@media only screen and (width <= 600px) {
-  .dp__flex_display {
-    flex-direction: column;
-  }
+.dp__flex_display {
+    &[data-dp-mobile] {
+      flex-direction: column;
+    }
 }
 
 .dp--flex-display-collapsed {

src/VueDatePicker/style/components/_DatepickerMenu.scss

@@ -130,7 +130,7 @@
   padding: 5px;
   border-inline-end: 1px solid var(--dp-border-color);
 
-  @media only screen and (width <= 600px) {
+  &[data-dp-mobile] {
     display: flex;
     align-self: center;
     border: none;
@@ -173,7 +173,7 @@
     cursor: pointer;
   }
 
-  @media only screen and (width <= 600px) {
+  &[data-dp-mobile] {
     border: 1px solid var(--dp-border-color);
     margin: 0 3px;
 
@@ -203,7 +203,7 @@
 .dp__menu_content_wrapper {
   display: flex;
 
-  @media only screen and (width <= 600px) {
+  &[data-dp-mobile] {
     flex-direction: column-reverse;
   }
 }

src/VueDatePicker/style/components/_QuarterPicker.scss

@@ -1,3 +1,5 @@
+@use "shared";
+
 .dp-quarter-picker-wrap {
   display: flex;
   flex-direction: column;

src/VueDatePicker/style/components/_TimeInput.scss

@@ -1,7 +1,11 @@
-@import "shared";
+@use "shared";
 
 .dp--tp-wrap {
   max-width: var(--dp-menu-min-width);
+
+  &[data-dp-mobile] {
+   max-width: 100%;
+  }
 }
 
 .dp__time_input {

src/VueDatePicker/style/main.scss

@@ -1,12 +1,12 @@
-@import "components/DatepickerInput";
-@import "components/DatepickerMenu";
-@import "components/Calendar";
-@import "components/MonthYearInput";
-@import "components/SelectionOverlay";
-@import "components/TimeInput";
-@import "components/ActionRow";
-@import "components/QuarterPicker";
-@import "components/shared";
+@use "components/DatepickerInput";
+@use "components/DatepickerMenu";
+@use "components/Calendar";
+@use "components/MonthYearInput";
+@use "components/SelectionOverlay";
+@use "components/TimeInput";
+@use "components/ActionRow";
+@use "components/QuarterPicker";
+@use "components/shared";
 
 :root {
   --dp-common-transition: all 0.1s ease-in;

src/VueDatePicker/utils/defaults.ts

@@ -175,6 +175,7 @@ export const getDefaultConfig = (config?: Partial<Config>): Config => {
         keepViewOnOffsetClick: false,
         timeArrowHoldThreshold: 0,
         shadowDom: false,
+        mobileBreakpoint: 600,
     };
     return { ...defaultConfig, ...(config ?? {}) };
 };