@onereach/ui-components 3.0.3-beta.2484.0 → 3.0.4-beta.2486.0

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

@@ -0,0 +1,210 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <OrIconButton
+      :icon="'chevron_left'"
+      @click.stop="monthValue = monthValue - 1"
+    />
+
+    <div :class="['layout-row', 'gap-md']">
+      <OrButton
+        ref="monthButton"
+        :variant="'link'"
+        :color="'inherit'"
+        @click.stop="monthMenu.open()"
+      >
+        {{ monthLabel }} <OrIcon :icon="'arrow_drop_down'" />
+      </OrButton>
+
+      <OrButton
+        ref="yearButton"
+        :variant="'link'"
+        :color="'inherit'"
+        @click.stop="yearMenu.open()"
+      >
+        {{ yearLabel }} <OrIcon :icon="'arrow_drop_down'" />
+      </OrButton>
+
+      <OrMenu
+        ref="monthMenu"
+        :trigger="monthButtonRoot"
+      >
+        <OrMenuItem
+          v-for="option in monthOptions"
+          :key="option.value"
+          @click.stop="monthValue = option.value; monthMenu.close()"
+        >
+          {{ option.label }}
+        </OrMenuItem>
+      </OrMenu>
+
+      <OrMenu
+        ref="yearMenu"
+        :trigger="yearButtonRoot"
+      >
+        <OrMenuItem
+          v-for="option in yearOptions"
+          :key="option.value"
+          @click.stop="yearValue = option.value; yearMenu.close()"
+        >
+          {{ option.label }}
+        </OrMenuItem>
+      </OrMenu>
+    </div>
+
+    <OrIconButton
+      :icon="'chevron_right'"
+      @click.stop="monthValue = monthValue + 1"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import { OrButtonV3 as OrButton } from '../../../or-button-v3';
+import { OrIconButtonV3 as OrIconButton } from '../../../or-icon-button-v3';
+import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
+import { OrMenuItemV3 as OrMenuItem } from '../../../or-menu-item-v3';
+import { OrMenuV3 as OrMenu } from '../../../or-menu-v3';
+import { DateTimePickerMonthSelect } from './styles';
+
+export default defineComponent({
+  name: 'OrDateTimePickerMonthSelect',
+
+  components: {
+    OrButton,
+    OrIcon,
+    OrIconButton,
+    OrMenu,
+    OrMenuItem,
+  },
+
+  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>();
+
+    const monthButton = ref<InstanceType<typeof OrButton>>();
+    const yearButton = ref<InstanceType<typeof OrButton>>();
+
+    const monthButtonRoot = computed(() => monthButton.value?.root);
+    const yearButtonRoot = computed(() => yearButton.value?.root);
+
+    const monthMenu = ref<InstanceType<typeof OrMenu>>();
+    const yearMenu = ref<InstanceType<typeof OrMenu>>();
+
+    // const monthMenuState = computed(() => monthMenu.value?.state);
+    // const yearMenuState = computed(() => yearMenu.value?.state);
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-date-time-picker-month-select',
+      ...DateTimePickerMonthSelect,
+    ]);
+
+    // State
+    const proxyModelValue = computed({
+      get: () => props.modelValue,
+
+      set: (value) => {
+        context.emit('update:modelValue', value);
+      },
+    });
+
+    const yearValue = computed({
+      get: () => proxyModelValue.value?.getUTCFullYear() ?? new Date().getUTCFullYear(),
+
+      set: (value) => {
+        proxyModelValue.value = new Date(Date.UTC(
+          value,
+          proxyModelValue.value?.getUTCMonth() ?? monthValue.value,
+          proxyModelValue.value?.getUTCDate() ?? 1,
+          proxyModelValue.value?.getUTCHours() ?? 0,
+          proxyModelValue.value?.getUTCMinutes() ?? 0,
+        ));
+      },
+    });
+
+    const monthValue = computed({
+      get: () => proxyModelValue.value?.getUTCMonth() ?? new Date().getUTCMonth(),
+
+      set: (value) => {
+        proxyModelValue.value = new Date(Date.UTC(
+          proxyModelValue.value?.getUTCFullYear() ?? yearValue.value,
+          value,
+          proxyModelValue.value?.getUTCDate() ?? 1,
+          proxyModelValue.value?.getUTCHours() ?? 0,
+          proxyModelValue.value?.getUTCMinutes() ?? 0,
+        ));
+      },
+    });
+
+    const yearLabel = computed(() => {
+      return yearOptions.find(({ value }) => value === yearValue.value)?.label;
+    });
+
+    const monthLabel = computed(() => {
+      return monthOptions.find(({ value }) => value === monthValue.value)?.label;
+    });
+
+    const yearOptions = Array.from({ length: 100 }, (_value, index) => {
+      const year = new Date().getUTCFullYear() - index;
+
+      return {
+        value: year,
+        label: new Date(year, monthValue.value).toLocaleString([], { year: 'numeric' }),
+      };
+    });
+
+    const monthOptions = Array.from({ length: 12 }, (_value, index) => {
+      const month = index;
+
+      return {
+        value: month,
+        label: new Date(yearValue.value, month).toLocaleString([], { month: 'long' }),
+      };
+    });
+
+    return {
+      root,
+      monthButton,
+      yearButton,
+      monthButtonRoot,
+      yearButtonRoot,
+      monthMenu,
+      yearMenu,
+      // monthMenuState,
+      // yearMenuState,
+      rootStyles,
+      proxyModelValue,
+      yearValue,
+      monthValue,
+      yearLabel,
+      monthLabel,
+      yearOptions,
+      monthOptions,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,10 @@
+export const DateTimePickerMonthSelect: string[] = [
+  // Layout
+  'layout-row justify-between',
+
+  // Spacing
+  'px-md',
+  'py-md',
+
+  'gap-md',
+];

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-footer/OrDateTimePickerPopoverFooter.vue

@@ -0,0 +1,59 @@
+<template>
+  <footer
+    ref="root"
+    :class="rootStyles"
+  >
+    <OrButton
+      :variant="'outlined'"
+      @click.stop="$emit('resolve')"
+    >
+      Done
+    </OrButton>
+
+    <OrButton
+      :variant="'text'"
+      @click.stop="$emit('reject')"
+    >
+      Cancel
+    </OrButton>
+  </footer>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import { OrButtonV3 as OrButton } from '../../../or-button-v3';
+import { DateTimePickerPopoverFooter } from './styles';
+
+export default defineComponent({
+  name: 'OrDateTimePickerPopoverFooter',
+
+  components: {
+    OrButton,
+  },
+
+  emits: [
+    'resolve',
+    'reject',
+  ],
+
+  expose: [
+    'root',
+  ],
+
+  setup() {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-date-time-picker-popover-footer',
+      ...DateTimePickerPopoverFooter,
+    ]);
+
+    return {
+      root,
+      rootStyles,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,13 @@
+export const DateTimePickerPopoverFooter: string[] = [
+  // Layout
+  'layout-row-reverse',
+
+  // Layout (children)
+  'children:grow',
+
+  // Spacing
+  'px-md md:px-sm',
+  'py-md md:py-sm',
+
+  'gap-md md:gap-sm',
+];

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-header/OrDateTimePickerPopoverHeader.vue

@@ -0,0 +1,37 @@
+<template>
+  <header
+    ref="root"
+    :class="rootStyles"
+  >
+    <slot />
+  </header>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import { DateTimePickerPopoverHeader } from './styles';
+
+export default defineComponent({
+  name: 'OrDateTimePickerPopoverHeader',
+
+  expose: [
+    'root',
+  ],
+
+  setup() {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-date-time-picker-popover-header',
+      ...DateTimePickerPopoverHeader,
+    ]);
+
+    return {
+      root,
+      rootStyles,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,10 @@
+export const DateTimePickerPopoverHeader: string[] = [
+  // Layout
+  'layout-row md:hidden',
+
+  // Spacing
+  'px-md',
+  'py-md',
+
+  'gap-xl',
+];

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

@@ -0,0 +1,146 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <div :class="buttonGroupStyles">
+      <OrButton
+        v-for="option in hoursOptions"
+        :key="option.value"
+        :class="buttonGroupItemStyles"
+        :variant="hoursValue === option.value ? 'contained' : 'text'"
+        :color="hoursValue === option.value ? 'primary' : 'inherit'"
+        @click.stop="hoursValue = option.value"
+      >
+        {{ option.label }}
+      </OrButton>
+    </div>
+
+    :
+
+    <div :class="buttonGroupStyles">
+      <OrButton
+        v-for="option in minutesOptions"
+        :key="option.value"
+        :class="buttonGroupItemStyles"
+        :variant="minutesValue === option.value ? 'contained' : 'text'"
+        :color="minutesValue === option.value ? 'primary' : 'inherit'"
+        @click.stop="minutesValue = option.value"
+      >
+        {{ option.label }}
+      </OrButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import { OrButtonV3 as OrButton } from '../../../or-button-v3';
+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,
+
+      set: (value) => {
+        context.emit('update:modelValue', value);
+      },
+    });
+
+    const hoursValue = computed({
+      get: () => proxyModelValue.value?.getUTCHours() ?? 0,
+
+      set: (value) => {
+        proxyModelValue.value = new Date(Date.UTC(
+          proxyModelValue.value?.getUTCFullYear() ?? 1970,
+          proxyModelValue.value?.getUTCMonth() ?? 0,
+          proxyModelValue.value?.getUTCDate() ?? 1,
+          value,
+          proxyModelValue.value?.getUTCMinutes() ?? minutesValue.value,
+        ));
+      },
+    });
+
+    const minutesValue = computed({
+      get: () => proxyModelValue.value?.getUTCMinutes() ?? 0,
+
+      set: (value) => {
+        proxyModelValue.value = new Date(Date.UTC(
+          proxyModelValue.value?.getUTCFullYear() ?? 1970,
+          proxyModelValue.value?.getUTCMonth() ?? 0,
+          proxyModelValue.value?.getUTCDate() ?? 1,
+          proxyModelValue.value?.getUTCHours() ?? hoursValue.value,
+          value,
+        ));
+      },
+    });
+
+    const hoursOptions = Array.from({ length: 24 }, (_value, index) => ({
+      value: index,
+      label: String(index).padStart(2, '0'),
+    }));
+
+    const minutesOptions = Array.from({ length: 60 }, (_value, index) => ({
+      value: index,
+      label: String(index).padStart(2, '0'),
+    }));
+
+    return {
+      root,
+      rootStyles,
+      buttonGroupStyles,
+      buttonGroupItemStyles,
+      proxyModelValue,
+      hoursValue,
+      minutesValue,
+      hoursOptions,
+      minutesOptions,
+    };
+  },
+});
+</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/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 = {