@onereach/ui-components 19.2.0-beta.5011.0 → 19.2.0-beta.5013.0

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue

@@ -3,7 +3,10 @@
     :ref="'root'"
     :class="rootStyles"
   >
-    <div :class="buttonGroupStyles">
+    <div
+      :ref="'hoursContainer'"
+      :class="buttonGroupStyles"
+    >
       <OrButton
         v-for="value in hoursOptions"
         :ref="'hoursButtons'"
@@ -20,7 +23,10 @@
 
     :
 
-    <div :class="buttonGroupStyles">
+    <div
+      :ref="'minutesContainer'"
+      :class="buttonGroupStyles"
+    >
       <OrButton
         v-for="value in minutesOptions"
         :ref="'minutesButtons'"
@@ -66,6 +72,7 @@ import { FilterFunction, FormatFunction, TimeFormat } from '../../../../types';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { DateTimePickerModelValue } from '../../types';
 import * as Styles from './styles';
+import { scrollToElementWithinContainer } from '../../utils';
 
 export default defineComponent({
   name: 'OrDateTimePickerTimeSelect',
@@ -137,6 +144,8 @@ export default defineComponent({
   setup(props, context) {
     // Refs & Styles
     const root = ref<HTMLElement>();
+    const hoursContainer = ref<HTMLElement>();
+    const minutesContainer = ref<HTMLElement>();
     const hoursButtons = ref<InstanceType<typeof OrButton>[]>([]);
     const minutesButtons = ref<InstanceType<typeof OrButton>[]>([]);
 
@@ -194,14 +203,14 @@ export default defineComponent({
         const activeHourButton = getActiveButton(hoursButtons.value, hoursOptions.value);
         const activeMinuteButton = getActiveButton(minutesButtons.value, minutesOptions.value);
 
-        if (activeHourButton) {
+        if (activeHourButton && hoursContainer.value) {
           // scroll to the active hour button within the hours container.
-          activeHourButton.scrollIntoView({ block: 'center' });
+          scrollToElementWithinContainer(activeHourButton, hoursContainer.value);
         }
 
-        if (activeMinuteButton) {
+        if (activeMinuteButton && minutesContainer.value) {
           // scroll to the active minute button within the minutes container.
-          activeMinuteButton.scrollIntoView({ block: 'center' });
+          scrollToElementWithinContainer(activeMinuteButton, minutesContainer.value);
         }
       });
     }, { immediate: true });
@@ -293,6 +302,9 @@ export default defineComponent({
       root,
       rootStyles,
 
+      hoursContainer,
+      minutesContainer,
+
       hoursButtons,
       minutesButtons,
 

package/src/components/or-date-time-picker-v3/utils/index.ts

@@ -4,3 +4,4 @@ export * from './formatMobileTime';
 export * from './formatTime';
 export * from './getCurrentDate';
 export * from './getNextMonthDate';
+export * from './scrollToElementWithinContainer';

package/src/components/or-date-time-picker-v3/utils/scrollToElementWithinContainer.ts

@@ -0,0 +1,13 @@
+export const scrollToElementWithinContainer = (element: HTMLElement, container: HTMLElement): void => {
+  const elementRect = element.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+
+  // Determine if the element is fully visible within the container by comparing their positions.
+  const isFullyVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+
+  if (!isFullyVisible) {
+    // Calculate the new scrollTop value to center the element within the container.
+    // This involves adjusting for the height of the element and container, ensuring the element is centered.
+    container.scrollTop = element.offsetTop - container.offsetTop - (container.clientHeight / 2) + (element.clientHeight / 2);
+  }
+};

package/src/components/or-input-box-v3/OrInputBox.vue

@@ -7,16 +7,6 @@
     :disabled="disabled"
     @focus="$emit('focus')"
   >
-    <template v-if="$slots.prepend">
-      <OrInputBoxAddon
-        :invalid="invalid"
-        :readonly="readonly"
-        :disabled="disabled"
-      >
-        <slot name="prepend" />
-      </OrInputBoxAddon>
-    </template>
-
     <slot />
 
     <template v-if="$slots.addon">

package/src/components/or-input-v3/OrInput.vue

@@ -20,87 +20,76 @@
       </OrLabel>
     </template>
 
-    <div class="layout-row gap-sm+ md:gap-sm">
-      <slot name="prepend" />
-      <OrInputBox
-        :variant="variant"
-        :size="size"
-        :invalid="!!error"
+    <OrInputBox
+      :variant="variant"
+      :size="size"
+      :invalid="!!error"
+      :readonly="readonly || loading"
+      :disabled="disabled"
+    >
+      <input
+        :ref="'control'"
+        v-bind="attributes"
+        v-model.trim="model"
+        :class="controlStyles"
+        :name="name"
+        :type="type === 'password' && disclosed ? 'text' : type"
+        :inputmode="inputmode"
+        :autocomplete="autocomplete"
+        :placeholder="placeholder"
+        :required="required"
         :readonly="readonly || loading"
         :disabled="disabled"
+        @input="$emit('input', $event)"
+        @keydown="$emit('keydown', $event)"
+        @keyup="$emit('keyup', $event)"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
       >
-        <template
-          v-if="$slots.prependInner"
-          v-slot:prepend
-        >
-          <slot name="prependInner" />
+
+      <template
+        v-if="loading || type === 'password' || type === 'search'"
+        v-slot:addon
+      >
+        <template v-if="loading">
+          <OrLoader
+            :variant="'circular'"
+            :color="error ? 'danger' : 'primary'"
+            :size="isMobile ? 'm' : 's'"
+          />
         </template>
-        <input
-          :ref="'control'"
-          v-bind="attributes"
-          v-model.trim="model"
-          :class="controlStyles"
-          :name="name"
-          :type="type === 'password' && disclosed ? 'text' : type"
-          :inputmode="inputmode"
-          :autocomplete="autocomplete"
-          :placeholder="placeholder"
-          :required="required"
-          :readonly="readonly || loading"
-          :disabled="disabled"
-          @input="$emit('input', $event)"
-          @keydown="$emit('keydown', $event)"
-          @keyup="$emit('keyup', $event)"
-          @focus="$emit('focus', $event)"
-          @blur="$emit('blur', $event)"
-        >
 
-        <template
-          v-if="loading || type === 'password' || type === 'search' || $slots.appendInner"
-          v-slot:addon
-        >
-          <slot name="appendInner">
-            <template v-if="loading">
-              <OrLoader
-                :variant="'circular'"
-                :color="error ? 'danger' : 'primary'"
-                :size="isMobile ? 'm' : 's'"
+        <template v-else>
+          <template v-if="type === 'password'">
+            <OrIconButton
+              :icon="{ icon: disclosed ? 'visibility' : 'visibility_off', variant: 'filled' }"
+              :color="'inherit'"
+              :disabled="disabled"
+              @click.stop="disclosed = !disclosed"
+            />
+          </template>
+
+          <template v-if="type === 'search'">
+            <template v-if="modelValue && !readonly">
+              <OrIconButton
+                :icon="'close'"
+                :color="'inherit'"
+                :disabled="disabled"
+                @click.stop="clear()"
               />
             </template>
 
             <template v-else>
-              <template v-if="type === 'password'">
-                <OrIconButton
-                  :icon="{ icon: disclosed ? 'visibility' : 'visibility_off', variant: 'filled' }"
-                  :color="'inherit'"
-                  :disabled="disabled"
-                  @click.stop="disclosed = !disclosed"
-                />
-              </template>
-
-              <template v-if="type === 'search'">
-                <template v-if="modelValue && !readonly">
-                  <OrIconButton
-                    :icon="'close'"
-                    :color="'inherit'"
-                    :disabled="disabled"
-                    @click.stop="clear()"
-                  />
-                </template>
-
-                <template v-else>
-                  <OrIcon
-                    :icon="'search'"
-                    :variant="'outlined'"
-                  />
-                </template>
-              </template>
+              <OrIcon
+                :icon="'search'"
+                :variant="'outlined'"
+              />
             </template>
-          </slot>
+          </template>
         </template>
-      </OrInputBox>
-      <slot name="append" />
-    </div>
+      </template>
+    </OrInputBox>
+
     <template v-if="$slots.hint || hint || maxLength">
       <OrHint
         v-show="!error"

package/dist/esm/formatTime-a1de80d6.js

@@ -1,24 +0,0 @@
-import { TimeFormat } from './types/index.js';
-
-const formatDate = (value, format, locale) => {
-  if (typeof format === 'function') {
-    return format(value, locale);
-  }
-  return value.toLocaleString(locale, {
-    dateStyle: format,
-    timeZone: 'UTC'
-  });
-};
-
-const formatTime = (value, format, locale) => {
-  if (typeof format === 'function') {
-    return format(value, locale);
-  }
-  return value.toLocaleString(locale, {
-    timeStyle: 'short',
-    hourCycle: format !== TimeFormat.Auto ? format : undefined,
-    timeZone: 'UTC'
-  });
-};
-
-export { formatTime as a, formatDate as f };