fix: Inline time-picker with is-24="false" overflowing the contai…

…ner (fixes #990)
Vuepic · Oct 17, 2024 · 916eb31 · 916eb31
1 parent c22287b
commit 916eb31
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/src/VueDatePicker/components/TimePicker/TimeInput.vue b/src/VueDatePicker/components/TimePicker/TimeInput.vue
@@ -1,6 +1,12 @@
 <template>
     <div v-if="!disabled" class="dp__time_input">
-        <div v-for="(timeInput, i) in timeInputs" :key="i" :class="timeColClass">
+        <div
+            v-for="(timeInput, i) in timeInputs"
+            :key="i"
+            :class="timeColClass"
+            :data-compact="isCompact && !enableSeconds"
+            :data-collapsed="isCompact && enableSeconds"
+        >
             <template v-if="timeInput.separator"> <template v-if="!timeOverlayOpen">:</template> </template>
             <template v-else>
                 <button
@@ -115,6 +121,7 @@
                 role="button"
                 :aria-label="defaultedAriaLabels?.amPmButton"
                 tabindex="0"
+                :data-compact="isCompact"
                 @click="setAmPm"
                 @keydown="checkKeyDown($event, () => setAmPm(), true)"
             >
@@ -212,8 +219,14 @@
     });
 
     const { setTimePickerElements, setTimePickerBackRef } = useArrowNavigation();
-    const { defaultedAriaLabels, defaultedTransitions, defaultedFilters, defaultedConfig, defaultedRange } =
-        useDefaults(props);
+    const {
+        defaultedAriaLabels,
+        defaultedTransitions,
+        defaultedFilters,
+        defaultedConfig,
+        defaultedRange,
+        defaultedMultiCalendars,
+    } = useDefaults(props);
 
     const { transitionName, showTransition } = useTransitions(defaultedTransitions);
 
@@ -287,6 +300,10 @@
         }),
     );
 
+    const isCompact = computed(
+        () => props.timePickerInline && defaultedRange.value.enabled && !defaultedMultiCalendars.value.count,
+    );
+
     const timeInputs = computed((): TimeInput[] => {
         const inputs = [{ type: 'hours' }];
         if (props.enableMinutes) {

diff --git a/src/VueDatePicker/style/components/_SelectionOverlay.scss b/src/VueDatePicker/style/components/_SelectionOverlay.scss
@@ -61,7 +61,7 @@
   padding: 0;
   box-sizing: border-box;
   display: flex;
-  margin-inline: auto auto;
+  margin-inline: auto;
   flex-wrap: wrap;
   max-width: 100%;
   width: 100%;

diff --git a/src/VueDatePicker/style/components/_TimeInput.scss b/src/VueDatePicker/style/components/_TimeInput.scss
@@ -24,6 +24,10 @@
 
 .dp__time_col_reg_with_button {
   padding: 0 15px;
+
+  &[data-compact~="true"] {
+    padding: 0 5px;
+  }
 }
 
 .dp__time_col_sec {
@@ -32,6 +36,10 @@
 
 .dp__time_col_sec_with_button {
   padding: 0 5px;
+
+  &[data-collapsed~="true"] {
+    padding: 0;
+  }
 }
 
 .dp__time_col {
@@ -133,6 +141,10 @@
   padding: var(--dp-common-padding);
   border-radius: var(--dp-border-radius);
   cursor: pointer;
+
+  &[data-compact~="true"] {
+    padding: 7px;
+  }
 }
 
 .dp__tp_inline_btn_bar {