@onereach/ui-components 3.0.3 → 3.0.4-beta.2487.0

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

@@ -0,0 +1,162 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <div :class="buttonGroupStyles">
+      <OrButton
+        v-for="value in hoursOptions"
+        :key="Number(value)"
+        :class="buttonGroupItemStyles"
+        :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
+        :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
+        @click.stop="proxyModelValue = value"
+      >
+        {{ formatHours(value) }}
+      </OrButton>
+    </div>
+
+    :
+
+    <div :class="buttonGroupStyles">
+      <OrButton
+        v-for="value in minutesOptions"
+        :key="Number(value)"
+        :class="buttonGroupItemStyles"
+        :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
+        :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
+        @click.stop="proxyModelValue = value"
+      >
+        {{ formatMinutes(value) }}
+      </OrButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import { OrButtonV3 as OrButton } from '../../../or-button-v3';
+import { useDefaultDate } from '../../hooks/useDefaultDate';
+import { useDefaultHours } from '../../hooks/useDefaultHours';
+import { useDefaultMinutes } from '../../hooks/useDefaultMinutes';
+import { useDefaultMonth } from '../../hooks/useDefaultMonth';
+import { useDefaultYear } from '../../hooks/useDefaultYear';
+import { DateTimePickerTimeSelect, DateTimePickerTimeSelectButtonGroup, DateTimePickerTimeSelectButtonGroupItem } from './styles';
+
+export default defineComponent({
+  name: 'OrDateTimePickerTimeSelect',
+
+  components: {
+    OrButton,
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: Date,
+      default: undefined,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+  ],
+
+  expose: [
+    'root',
+  ],
+
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-date-time-picker-time-select',
+      ...DateTimePickerTimeSelect,
+    ]);
+
+    const buttonGroupStyles = computed(() => [
+      ...DateTimePickerTimeSelectButtonGroup,
+    ]);
+
+    const buttonGroupItemStyles = computed(() => [
+      ...DateTimePickerTimeSelectButtonGroupItem,
+    ]);
+
+    // State
+    const proxyModelValue = computed({
+      get: () => props.modelValue ?? new Date(Date.UTC(
+        useDefaultYear(),
+        useDefaultMonth(),
+        useDefaultDate(),
+        useDefaultHours(),
+        useDefaultMinutes(),
+      )),
+
+      set: (value) => {
+        context.emit('update:modelValue', value);
+      },
+    });
+
+    const hoursOptions = computed(() => {
+      return Array.from({ length: 24 }, (_value, index) => {
+        const value = index;
+
+        return new Date(Date.UTC(
+          proxyModelValue.value.getUTCFullYear(),
+          proxyModelValue.value.getUTCMonth(),
+          proxyModelValue.value.getUTCDate(),
+          value,
+          proxyModelValue.value.getUTCMinutes(),
+        ));
+      });
+    });
+
+    const minutesOptions = computed(() => {
+      return Array.from({ length: 60 }, (_value, index) => {
+        const value = index;
+
+        return new Date(Date.UTC(
+          proxyModelValue.value.getUTCFullYear(),
+          proxyModelValue.value.getUTCMonth(),
+          proxyModelValue.value.getUTCDate(),
+          proxyModelValue.value.getUTCHours(),
+          value,
+        ));
+      });
+    });
+
+    // Methods
+    function formatHours(value: Date): string {
+      return value.toLocaleString('default', {
+        hour: '2-digit',
+        timeZone: 'UTC',
+      });
+    }
+
+    function formatMinutes(value: Date): string {
+      return value.toLocaleString('default', {
+        minute: '2-digit',
+        timeZone: 'UTC',
+      });
+    }
+
+    return {
+      root,
+      rootStyles,
+      buttonGroupStyles,
+      buttonGroupItemStyles,
+      proxyModelValue,
+      hoursOptions,
+      minutesOptions,
+      formatHours,
+      formatMinutes,
+    };
+  },
+});
+</script>

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/styles.ts

@@ -0,0 +1,34 @@
+export const DateTimePickerTimeSelect: string[] = [
+  // Layout
+  'layout-row justify-center',
+
+  // Spacing
+  'px-md',
+  'py-md',
+
+  'gap-sm',
+
+  // Typography
+  'typography-body-2-regular',
+
+  // Theme
+  'theme-foreground-default',
+  'dark:theme-foreground-default-dark',
+];
+
+export const DateTimePickerTimeSelectButtonGroup: string[] = [
+  // Layout
+  'layout-column',
+
+  // Box
+  'max-h-[224px]',
+
+  // Overflow
+  'overflow-x-hidden',
+  'overflow-y-auto',
+];
+
+export const DateTimePickerTimeSelectButtonGroupItem: string[] = [
+  // Typography
+  'typography-caption-regular',
+];

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

@@ -0,0 +1 @@
+export { InputBoxSize as DateTimePickerSize } from '../or-input-box-v3';

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

@@ -0,0 +1,16 @@
+export const DateTimePicker: string[] = [
+  // Layout
+  'layout-column',
+
+  // Spacing
+  'gap-xs',
+];
+
+export const DateTimePickerControl: string[] = [
+  // Theme (focus)
+  'focus:theme-border-1-current',
+  'dark:focus:theme-border-1-current-dark',
+
+  'focus:theme-border-underline',
+  'dark:focus:theme-border-underline',
+];

package/src/components/or-menu-v3/OrMenu.vue

@@ -52,6 +52,7 @@ export default defineComponent({
 
   expose: [
     'root',
+    'state',
     'isOpen',
     'open',
     'close',
@@ -64,6 +65,7 @@ export default defineComponent({
 
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverRoot = computed(() => popover.value?.root);
+    const popoverState = computed(() => popover.value?.state);
 
     // Styles
     const rootStyles = computed(() => [
@@ -112,6 +114,7 @@ export default defineComponent({
       root,
       popover,
       popoverRoot,
+      state: popoverState,
       rootStyles,
       isOpen,
       open,

package/src/directives/dropdown-close.ts

@@ -3,6 +3,7 @@ import { DirectiveBinding, DirectiveHook, isVue3 } from 'vue-demi';
 const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
   element.addEventListener('keydown', (event) => {
     event.preventDefault();
+    event.stopPropagation();
 
     if (['Escape'].includes(event.key)) {
       binding.value(event);

package/src/directives/dropdown-open.ts

@@ -3,13 +3,19 @@ import { DirectiveBinding, DirectiveHook, isVue3 } from 'vue-demi';
 const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
   element.addEventListener('keydown', (event) => {
     event.preventDefault();
+    event.stopPropagation();
 
     if (['Enter', ' '].includes(event.key)) {
       binding.value(event);
     }
   });
 
-  element.addEventListener('click', binding.value);
+  element.addEventListener('click', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    binding.value(event);
+  });
 };
 
 export const DropdownOpen = {