@onereach/ui-components 4.1.1-beta.2541.0 → 4.1.1

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

@@ -1,209 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-  >
-    <div :class="buttonGroupStyles">
-      <div
-        v-for="weekday in 7"
-        :key="weekday"
-        :class="buttonGroupWeekdayItemStyles"
-      >
-        {{ formatWeekday(dayOptions[weekday - 1]) }}
-      </div>
-
-      <OrButton
-        v-for="value in dayOptions"
-        :key="Number(value)"
-        :class="{
-          [buttonGroupDayItemStyles.join(' ')]: true,
-          [buttonGroupTodayItemStyles.join(' ')]: Number(value) === Number(currentDate) && Number(value) !== Number(proxyModelValue),
-        }"
-        :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
-        :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
-        :disabled="filter && !filter(value) || value.getUTCMonth() !== proxyModelValue.getUTCMonth()"
-        @click.stop="proxyModelValue = value"
-      >
-        {{ formatDay(value) }}
-      </OrButton>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, 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 { DateTimePickerDaySelect, DateTimePickerDaySelectButtonGroup, DateTimePickerDaySelectButtonGroupDayItem, DateTimePickerDaySelectButtonGroupTodayItem, DateTimePickerDaySelectButtonGroupWeekdayItem } from './styles';
-
-export default defineComponent({
-  name: 'OrDateTimePickerDaySelect',
-
-  components: {
-    OrButton,
-  },
-
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
-  props: {
-    modelValue: {
-      type: Date,
-      default: undefined,
-    },
-
-    filter: {
-      type: Function as PropType<(value: Date) => boolean>,
-      default: undefined,
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-  ],
-
-  expose: [
-    'root',
-  ],
-
-  setup(props, context) {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-date-time-picker-day-select',
-      ...DateTimePickerDaySelect,
-    ]);
-
-    const buttonGroupStyles = computed(() => [
-      ...DateTimePickerDaySelectButtonGroup,
-    ]);
-
-    const buttonGroupWeekdayItemStyles = computed(() => [
-      ...DateTimePickerDaySelectButtonGroupWeekdayItem,
-    ]);
-
-    const buttonGroupDayItemStyles = computed(() => [
-      ...DateTimePickerDaySelectButtonGroupDayItem,
-    ]);
-
-    const buttonGroupTodayItemStyles = computed(() => [
-      ...DateTimePickerDaySelectButtonGroupTodayItem,
-    ]);
-
-    // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue ?? new Date(Date.UTC(
-        useDefaultYear(),
-        useDefaultMonth(),
-        useDefaultDate(),
-        useDefaultHours(),
-        useDefaultMinutes(),
-      )),
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    const dayOptions = computed(() => {
-      const monthStartDate = new Date(Date.UTC(
-        proxyModelValue.value.getUTCFullYear(),
-        proxyModelValue.value.getUTCMonth(),
-        1,
-        proxyModelValue.value.getUTCHours(),
-        proxyModelValue.value.getUTCMinutes(),
-      ));
-
-      const monthEndDate = new Date(Date.UTC(
-        proxyModelValue.value.getUTCFullYear(),
-        proxyModelValue.value.getUTCMonth() + 1,
-        0,
-        proxyModelValue.value.getUTCHours(),
-        proxyModelValue.value.getUTCMinutes(),
-      ));
-
-      const calendarStartDate = new Date(Date.UTC(
-        monthStartDate.getUTCFullYear(),
-        monthStartDate.getUTCMonth(),
-        1 - monthStartDate.getUTCDay(),
-        monthStartDate.getUTCHours(),
-        monthStartDate.getUTCMinutes(),
-      ));
-
-      const calendarEndDate = new Date(Date.UTC(
-        monthEndDate.getUTCFullYear(),
-        monthEndDate.getUTCMonth() + 1,
-        7 - monthEndDate.getUTCDay(),
-        monthEndDate.getUTCHours(),
-        monthEndDate.getUTCMinutes(),
-      ));
-
-      return (() => {
-        let options = [] as Date[], value = calendarStartDate;
-
-        while (Number(value) !== Number(calendarEndDate)) {
-          options = [...options, value];
-
-          value = new Date(Date.UTC(
-            value.getUTCFullYear(),
-            value.getUTCMonth(),
-            value.getUTCDate() + 1,
-            value.getUTCHours(),
-            value.getUTCMinutes(),
-          ));
-        }
-
-        return options;
-      })();
-    });
-
-    const currentDate = computed(() => {
-      const value = new Date();
-
-      value.setUTCHours(proxyModelValue.value.getUTCHours());
-      value.setUTCMinutes(proxyModelValue.value.getUTCMinutes());
-      value.setUTCSeconds(proxyModelValue.value.getUTCSeconds());
-      value.setUTCMilliseconds(proxyModelValue.value.getUTCMilliseconds());
-
-      return value;
-    });
-
-    // Methods
-    function formatWeekday(value: Date): string {
-      return value.toLocaleString(navigator.language, {
-        weekday: 'short',
-        timeZone: 'UTC',
-      });
-    }
-
-    function formatDay(value: Date): string {
-      return value.toLocaleString(navigator.language, {
-        day: 'numeric',
-        timeZone: 'UTC',
-      });
-    }
-
-    return {
-      root,
-      rootStyles,
-      buttonGroupStyles,
-      buttonGroupWeekdayItemStyles,
-      buttonGroupDayItemStyles,
-      buttonGroupTodayItemStyles,
-      proxyModelValue,
-      dayOptions,
-      currentDate,
-      formatWeekday,
-      formatDay,
-    };
-  },
-});
-</script>

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

@@ -1,59 +0,0 @@
-export const DateTimePickerDaySelect: string[] = [
-  // Layout
-  'layout-column',
-
-  // Spacing
-  'px-md',
-  'py-md',
-
-  'gap-sm',
-];
-
-export const DateTimePickerDaySelectButtonGroup: string[] = [
-  // Layout
-  'grid',
-  'grid-cols-7',
-
-  // Spacing
-  'gap-xs',
-];
-
-export const DateTimePickerDaySelectButtonGroupWeekdayItem: string[] = [
-  // Layout
-  'layout-row justify-center',
-
-  // Spacing
-  'px-sm',
-  'py-sm',
-
-  // Interactivity
-  'interactivity-none',
-
-  // Typography
-  'typography-caption-regular',
-
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
-];
-
-export const DateTimePickerDaySelectButtonGroupDayItem: string[] = [
-  // Box
-  'min-w-fit',
-
-  // Spacing
-  '!px-sm',
-  '!py-sm',
-
-  // Typography
-  'typography-caption-regular',
-];
-
-export const DateTimePickerDaySelectButtonGroupTodayItem: string[] = [
-  // Theme
-  'theme-foreground-primary',
-  'dark:theme-foreground-primary-dark',
-
-  'theme-outline-1-primary',
-  'dark:theme-outline-1-primary-dark',
-];

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-mobile-control/OrDateTimePickerMobileControl.vue

@@ -1,58 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-  >
-    <OrLabel>{{ label }}</OrLabel>
-
-    <div :class="contentStyles">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
-import { OrLabelV3 as OrLabel } from '../../../or-label-v3';
-import { DateTimePickerMobileControl, DateTimePickerMobileControlContent } from './styles';
-
-export default defineComponent({
-  name: 'OrDateTimePickerMobileControl',
-
-  components: {
-    OrLabel,
-  },
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-  },
-
-  expose: [
-    'root',
-  ],
-
-  setup() {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-date-time-picker-mobile-control',
-      ...DateTimePickerMobileControl,
-    ]);
-
-    const contentStyles = computed(() => [
-      ...DateTimePickerMobileControlContent,
-    ]);
-
-    return {
-      root,
-      rootStyles,
-      contentStyles,
-    };
-  },
-});
-</script>

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

@@ -1,16 +0,0 @@
-export const DateTimePickerMobileControl: string[] = [
-  // Layout
-  'layout-column',
-
-  // Spacing
-  'gap-xs',
-];
-
-export const DateTimePickerMobileControlContent: string[] = [
-  // Typography
-  'typography-headline-1',
-
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
-];

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

@@ -1,239 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-  >
-    <OrIconButton
-      :icon="'chevron_left'"
-      @click.stop="goToPreviousMonth()"
-    />
-
-    <div :class="['layout-row-reverse', 'gap-md']">
-      <OrButton
-        ref="yearButton"
-        :variant="'link'"
-        :color="'inherit'"
-        @click.stop="yearMenu.open()"
-      >
-        {{ formatYear(proxyModelValue) }} <OrIcon :icon="yearMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
-      </OrButton>
-
-      <OrButton
-        ref="monthButton"
-        :variant="'link'"
-        :color="'inherit'"
-        @click.stop="monthMenu.open()"
-      >
-        {{ formatMonth(proxyModelValue) }} <OrIcon :icon="monthMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
-      </OrButton>
-
-      <OrMenu
-        ref="yearMenu"
-        :trigger="yearButtonRoot"
-      >
-        <OrMenuItem
-          v-for="value in yearOptions"
-          :key="Number(value)"
-          :selected="Number(value) === Number(proxyModelValue)"
-          :disabled="filter && !filter(value)"
-          @click.stop="proxyModelValue = value; yearMenu.close()"
-        >
-          {{ formatYear(value) }}
-        </OrMenuItem>
-      </OrMenu>
-
-      <OrMenu
-        ref="monthMenu"
-        :trigger="monthButtonRoot"
-      >
-        <OrMenuItem
-          v-for="value in monthOptions"
-          :key="Number(value)"
-          :selected="Number(value) === Number(proxyModelValue)"
-          :disabled="filter && !filter(value)"
-          @click.stop="proxyModelValue = value; monthMenu.close()"
-        >
-          {{ formatMonth(value) }}
-        </OrMenuItem>
-      </OrMenu>
-    </div>
-
-    <OrIconButton
-      :icon="'chevron_right'"
-      @click.stop="goToNextMonth()"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, 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 { 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 { 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,
-    },
-
-    filter: {
-      type: Function as PropType<(value: Date) => boolean>,
-      default: undefined,
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-  ],
-
-  expose: [
-    'root',
-  ],
-
-  setup(props, context) {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    const yearButton = ref<InstanceType<typeof OrButton>>();
-    const monthButton = ref<InstanceType<typeof OrButton>>();
-
-    const yearButtonRoot = computed(() => yearButton.value?.root);
-    const monthButtonRoot = computed(() => monthButton.value?.root);
-
-    const yearMenu = ref<InstanceType<typeof OrMenu>>();
-    const monthMenu = ref<InstanceType<typeof OrMenu>>();
-
-    const yearMenuState = computed(() => yearMenu.value?.state);
-    const monthMenuState = computed(() => monthMenu.value?.state);
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-date-time-picker-month-select',
-      ...DateTimePickerMonthSelect,
-    ]);
-
-    // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue ?? new Date(Date.UTC(
-        useDefaultYear(),
-        useDefaultMonth(),
-        useDefaultDate(),
-        useDefaultHours(),
-        useDefaultMinutes(),
-      )),
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    const yearOptions = computed(() => {
-      return Array.from({ length: 11 }).map((_value, index, { length }) => {
-        const value = proxyModelValue.value.getUTCFullYear() - Math.floor(length / 2) + index;
-
-        return new Date(Date.UTC(
-          value,
-          proxyModelValue.value.getUTCMonth(),
-          proxyModelValue.value.getUTCDate(),
-          proxyModelValue.value.getUTCHours(),
-          proxyModelValue.value.getUTCMinutes(),
-        ));
-      });
-    });
-
-    const monthOptions = computed(() => {
-      return Array.from({ length: 12 }, (_value, index) => {
-        const value = index;
-
-        return new Date(Date.UTC(
-          proxyModelValue.value.getUTCFullYear(),
-          value,
-          proxyModelValue.value.getUTCDate(),
-          proxyModelValue.value.getUTCHours(),
-          proxyModelValue.value.getUTCMinutes(),
-        ));
-      });
-    });
-
-    // Methods
-    function goToNextMonth(): void {
-      proxyModelValue.value = new Date(Date.UTC(
-        proxyModelValue.value.getUTCFullYear(),
-        proxyModelValue.value.getUTCMonth() + 1,
-        proxyModelValue.value.getUTCDate(),
-        proxyModelValue.value.getUTCHours(),
-        proxyModelValue.value.getUTCMinutes(),
-      ));
-    }
-
-    function goToPreviousMonth(): void {
-      proxyModelValue.value = new Date(Date.UTC(
-        proxyModelValue.value.getUTCFullYear(),
-        proxyModelValue.value.getUTCMonth() - 1,
-        proxyModelValue.value.getUTCDate(),
-        proxyModelValue.value.getUTCHours(),
-        proxyModelValue.value.getUTCMinutes(),
-      ));
-    }
-
-    function formatYear(value: Date): string {
-      return value.toLocaleString(navigator.language, {
-        year: 'numeric',
-        timeZone: 'UTC',
-      });
-    }
-
-    function formatMonth(value: Date): string {
-      return value.toLocaleString(navigator.language, {
-        month: 'long',
-        timeZone: 'UTC',
-      });
-    }
-
-    return {
-      root,
-      yearButton,
-      monthButton,
-      yearButtonRoot,
-      monthButtonRoot,
-      yearMenu,
-      monthMenu,
-      yearMenuState,
-      monthMenuState,
-      rootStyles,
-      proxyModelValue,
-      yearOptions,
-      monthOptions,
-      goToNextMonth,
-      goToPreviousMonth,
-      formatYear,
-      formatMonth,
-    };
-  },
-});
-</script>

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

@@ -1,10 +0,0 @@
-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

@@ -1,59 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-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

@@ -1,37 +0,0 @@
-<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>