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

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -1,381 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-  >
-    <template v-if="label">
-      <OrLabel
-        :variant="'input'"
-        :required="required"
-        :disabled="disabled"
-      >
-        {{ label }}
-
-        <template v-slot:addon>
-          <slot name="addon" />
-        </template>
-      </OrLabel>
-    </template>
-
-    <OrInputBox
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
-      :size="size"
-      :invalid="!!error"
-      :readonly="readonly"
-      :disabled="disabled"
-    >
-      <OrDateTimePickerDateControl
-        ref="dateControl"
-        v-model="draftModelValue"
-        v-dropdown-open="toggleDatePopover"
-        v-dropdown-close="closeDatePopover"
-        :required="required"
-        :readonly="readonly"
-        :disabled="disabled"
-      />
-
-      <OrDateTimePickerTimeControl
-        ref="timeControl"
-        v-model="draftModelValue"
-        v-dropdown-open="toggleTimePopover"
-        v-dropdown-close="closeTimePopover"
-        :required="required"
-        :readonly="readonly"
-        :disabled="disabled"
-      />
-
-      <OrPopover
-        ref="datePopover"
-        :variant="'auto'"
-        :trigger="dateControlRoot"
-        :placement="'bottom'"
-      >
-        <OrDateTimePickerPopoverHeader>
-          <OrDateTimePickerMobileControl label="Date">
-            {{ formatDateAlt(draftModelValue) }}
-          </OrDateTimePickerMobileControl>
-
-          <OrDateTimePickerMobileControl label="Time">
-            {{ formatTimeAlt(draftModelValue) }}
-          </OrDateTimePickerMobileControl>
-        </OrDateTimePickerPopoverHeader>
-
-        <OrDateTimePickerMonthSelect
-          v-model="draftModelValue"
-          :filter="filter"
-        />
-
-        <OrDateTimePickerDaySelect
-          v-model="draftModelValue"
-          :filter="filter"
-        />
-
-        <OrDateTimePickerPopoverFooter
-          @resolve="proxyModelValue = draftModelValue; datePopover.close()"
-          @reject="draftModelValue = proxyModelValue; datePopover.close()"
-        />
-      </OrPopover>
-
-      <OrPopover
-        ref="timePopover"
-        :variant="'auto'"
-        :trigger="timeControlRoot"
-        :placement="'bottom'"
-      >
-        <OrDateTimePickerPopoverHeader>
-          <OrDateTimePickerMobileControl label="Date">
-            {{ formatDateAlt(draftModelValue) }}
-          </OrDateTimePickerMobileControl>
-
-          <OrDateTimePickerMobileControl label="Time">
-            {{ formatTimeAlt(draftModelValue) }}
-          </OrDateTimePickerMobileControl>
-        </OrDateTimePickerPopoverHeader>
-
-        <OrDateTimePickerTimeSelect
-          v-model="draftModelValue"
-          :filter="filter"
-        />
-
-        <OrDateTimePickerPopoverFooter
-          @resolve="proxyModelValue = draftModelValue; timePopover.close()"
-          @reject="draftModelValue = proxyModelValue; timePopover.close()"
-        />
-      </OrPopover>
-
-      <div :class="['grow']" />
-
-      <div :class="['layout-inline-row']">
-        <template v-if="modelValue">
-          <OrIconButton
-            :icon="'close'"
-            :color="'inherit'"
-            :disabled="readonly || disabled"
-            @click.stop="$emit('update:modelValue', undefined)"
-          />
-        </template>
-
-        <template v-else>
-          <OrIcon
-            :icon="'calendar_month'"
-            :variant="'outlined'"
-          />
-        </template>
-      </div>
-    </OrInputBox>
-
-    <template v-if="!error">
-      <template v-if="hint">
-        <OrHint :disabled="disabled">
-          {{ hint }}
-        </OrHint>
-      </template>
-    </template>
-
-    <template v-if="typeof error === 'string'">
-      <OrError :disabled="disabled">
-        {{ error }}
-      </OrError>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { DropdownClose, DropdownOpen } from '../../directives';
-import { OrErrorV3 as OrError } from '../or-error-v3';
-import { OrHintV3 as OrHint } from '../or-hint-v3';
-import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
-import { OrLabelV3 as OrLabel } from '../or-label-v3';
-import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
-import OrDateTimePickerDateControl from './partials/or-date-time-picker-date-control/OrDateTimePickerDateControl.vue';
-import OrDateTimePickerDaySelect from './partials/or-date-time-picker-day-select/OrDateTimePickerDaySelect.vue';
-import OrDateTimePickerMobileControl from './partials/or-date-time-picker-mobile-control/OrDateTimePickerMobileControl.vue';
-import OrDateTimePickerMonthSelect from './partials/or-date-time-picker-month-select/OrDateTimePickerMonthSelect.vue';
-import OrDateTimePickerPopoverFooter from './partials/or-date-time-picker-popover-footer/OrDateTimePickerPopoverFooter.vue';
-import OrDateTimePickerPopoverHeader from './partials/or-date-time-picker-popover-header/OrDateTimePickerPopoverHeader.vue';
-import OrDateTimePickerTimeControl from './partials/or-date-time-picker-time-control/OrDateTimePickerTimeControl.vue';
-import OrDateTimePickerTimeSelect from './partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue';
-import { DateTimePickerSize } from './props';
-import { DateTimePicker } from './styles';
-
-export default defineComponent({
-  name: 'OrDateTimePicker',
-
-  components: {
-    OrDateTimePickerDateControl,
-    OrDateTimePickerDaySelect,
-    OrDateTimePickerMobileControl,
-    OrDateTimePickerMonthSelect,
-    OrDateTimePickerPopoverFooter,
-    OrDateTimePickerPopoverHeader,
-    OrDateTimePickerTimeControl,
-    OrDateTimePickerTimeSelect,
-    OrError,
-    OrHint,
-    OrIcon,
-    OrIconButton,
-    OrInputBox,
-    OrLabel,
-    OrPopover,
-  },
-
-  directives: {
-    DropdownClose,
-    DropdownOpen,
-  },
-
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
-  props: {
-    modelValue: {
-      type: Date,
-      default: undefined,
-    },
-
-    filter: {
-      type: Function as PropType<(value: Date) => boolean>,
-      default: undefined,
-    },
-
-    size: {
-      type: String as PropType<DateTimePickerSize>,
-      default: DateTimePickerSize.M,
-    },
-
-    label: {
-      type: String,
-      default: undefined,
-    },
-
-    hint: {
-      type: String,
-      default: undefined,
-    },
-
-    error: {
-      type: [String, Boolean],
-      default: undefined,
-    },
-
-    required: {
-      type: Boolean,
-      default: false,
-    },
-
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-
-    'keydown',
-    'keyup',
-    'focus',
-    'blur',
-  ],
-
-  expose: [
-    'root',
-
-    'focus',
-    'blur',
-  ],
-
-  setup(props, context) {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    const dateControl = ref<InstanceType<typeof OrDateTimePickerDateControl>>();
-    const timeControl = ref<InstanceType<typeof OrDateTimePickerTimeControl>>();
-
-    const dateControlRoot = computed(() => dateControl.value?.root);
-    const timeControlRoot = computed(() => timeControl.value?.root);
-
-    const datePopover = ref<InstanceType<typeof OrPopover>>();
-    const timePopover = ref<InstanceType<typeof OrPopover>>();
-
-    const datePopoverState = computed(() => datePopover.value?.state);
-    const timePopoverState = computed(() => timePopover.value?.state);
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-date-time-picker',
-      ...DateTimePicker,
-    ]);
-
-    // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    const draftModelValue = ref<Date>();
-
-    watch(proxyModelValue, (value) => {
-      draftModelValue.value = value;
-    }, { immediate: true });
-
-    // Methods
-    function toggleDatePopover(): void {
-      if (!props.readonly && !props.disabled) {
-        const popoverInstance = datePopover.value;
-
-        if (popoverInstance) {
-          if (datePopoverState.value === 'open') {
-            (popoverInstance.close as () => void)();
-          } else {
-            (popoverInstance.open as () => void)();
-          }
-        }
-      }
-    }
-
-    function toggleTimePopover(): void {
-      if (!props.readonly && !props.disabled) {
-        const popoverInstance = timePopover.value;
-
-        if (popoverInstance) {
-          if (timePopoverState.value === 'open') {
-            (popoverInstance.close as () => void)();
-          } else {
-            (popoverInstance.open as () => void)();
-          }
-        }
-      }
-    }
-
-    function closeDatePopover(): void {
-      const popoverInstance = datePopover.value;
-
-      if (popoverInstance) {
-        (popoverInstance.close as () => void)();
-      }
-    }
-
-    function closeTimePopover(): void {
-      const popoverInstance = timePopover.value;
-
-      if (popoverInstance) {
-        (popoverInstance.close as () => void)();
-      }
-    }
-
-    function formatDateAlt(value?: Date): string {
-      return value?.toLocaleString(navigator.language, {
-        dateStyle: 'medium',
-        timeZone: 'UTC',
-      }) ?? '--';
-    }
-
-    function formatTimeAlt(value?: Date): string {
-      return value?.toLocaleString(navigator.language, {
-        timeStyle: 'short',
-        timeZone: 'UTC',
-      }) ?? '--';
-    }
-
-    return {
-      root,
-      dateControl,
-      timeControl,
-      dateControlRoot,
-      timeControlRoot,
-      datePopover,
-      timePopover,
-      datePopoverState,
-      timePopoverState,
-      rootStyles,
-      proxyModelValue,
-      draftModelValue,
-      toggleDatePopover,
-      toggleTimePopover,
-      closeDatePopover,
-      closeTimePopover,
-      formatDateAlt,
-      formatTimeAlt,
-    };
-  },
-});
-</script>

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

@@ -1,11 +0,0 @@
-export function useDatePlaceholder(): string {
-  const sample = new Date(Date.UTC(1111, 1, 3, 4, 5)).toLocaleString(navigator.language, {
-    dateStyle: 'short',
-    timeZone: 'UTC',
-  });
-
-  return sample
-    .replace(/1/g, 'Y')
-    .replace(/02/, 'MM').replace(/2/, 'M')
-    .replace(/03/g, 'DD').replace(/3/, 'D');
-}

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

@@ -1,3 +0,0 @@
-export function useDefaultDate(): number {
-  return new Date().getUTCDate();
-}

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

@@ -1,3 +0,0 @@
-export function useDefaultHours(): number {
-  return 0;
-}

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

@@ -1,3 +0,0 @@
-export function useDefaultMinutes(): number {
-  return 0;
-}

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

@@ -1,3 +0,0 @@
-export function useDefaultMonth(): number {
-  return new Date().getUTCMonth();
-}

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

@@ -1,3 +0,0 @@
-export function useDefaultYear(): number {
-  return new Date().getUTCFullYear();
-}

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

@@ -1,11 +0,0 @@
-export function useTimePlaceholder(): string {
-  const sample = new Date(Date.UTC(1, 1, 3, 4, 5)).toLocaleString(navigator.language, {
-    timeStyle: 'short',
-    timeZone: 'UTC',
-  });
-
-  return sample
-    .replace(/04/, 'HH').replace(/4/, 'H')
-    .replace(/05/, 'MM').replace(/5/, 'M')
-    .replace(/AM|PM/, 'A');
-}

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

@@ -1,2 +0,0 @@
-export { default as OrDateTimePickerV3 } from './OrDateTimePicker.vue';
-export * from './props';

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

@@ -1,102 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-    :contenteditable="''"
-    :required="required ? '' : null"
-    :readonly="readonly ? '' : null"
-    :disabled="disabled ? '' : null"
-  >
-    <template v-if="proxyModelValue">
-      {{ formatModelValue(proxyModelValue) }}
-    </template>
-
-    <template v-else>
-      <span :class="placeholderStyles">{{ placeholder }}</span>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
-import { useDatePlaceholder } from '../../hooks/useDatePlaceholder';
-import { DateTimePickerDateControl, DateTimePickerDateControlPlaceholder } from './styles';
-
-export default defineComponent({
-  name: 'OrDateTimePickerDateControl',
-
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
-  props: {
-    modelValue: {
-      type: Date,
-      default: undefined,
-    },
-
-    required: {
-      type: Boolean,
-      default: false,
-    },
-
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  expose: [
-    'root',
-  ],
-
-  setup(props, context) {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-date-time-picker-date-control',
-      ...DateTimePickerDateControl,
-    ]);
-
-    const placeholderStyles = computed(() => [
-      ...DateTimePickerDateControlPlaceholder,
-    ]);
-
-    // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    const placeholder = useDatePlaceholder();
-
-    // Methods
-    function formatModelValue(value: Date): string {
-      return value.toLocaleString(navigator.language, {
-        dateStyle: 'short',
-        timeZone: 'UTC',
-      });
-    }
-
-    return {
-      root,
-      rootStyles,
-      placeholderStyles,
-      proxyModelValue,
-      placeholder,
-      formatModelValue,
-    };
-  },
-});
-</script>

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

@@ -1,20 +0,0 @@
-export const DateTimePickerDateControl: string[] = [
-  // Layout
-  'layout-inline-row',
-
-  // Interactivity
-  'interactivity-auto',
-
-  // Theme (focus)
-  'focus:theme-border-2-inherit',
-  'dark:focus:theme-border-2-inherit-dark',
-
-  'focus:theme-border-underline',
-  'dark:focus:theme-border-underline',
-];
-
-export const DateTimePickerDateControlPlaceholder: string[] = [
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
-];