@onereach/ui-components 6.4.5-beta.3426.0 → 6.4.5

package/src/components/or-date-range-picker-v3/OrDateRangePicker.vue

@@ -1,421 +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
-      ref="inputBox"
-      v-dropdown-open="togglePopover"
-      v-dropdown-close="closePopover"
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
-      :size="size"
-      :invalid="!!error"
-      :readonly="readonly"
-      :disabled="disabled"
-    >
-      <OrDateTimePickerDateControl
-        v-model="draftModelValueFrom"
-        v-dropdown-open="togglePopover"
-        v-dropdown-close="closePopover"
-        :required="required"
-        :readonly="readonly"
-        :disabled="disabled"
-      />
-
-      -
-
-      <OrDateTimePickerDateControl
-        v-model="draftModelValueTo"
-        v-dropdown-open="togglePopover"
-        v-dropdown-close="closePopover"
-        :required="required"
-        :readonly="readonly"
-        :disabled="disabled"
-      />
-
-      <OrPopover
-        ref="popover"
-        :class="popoverStyles"
-        :variant="'auto'"
-        :bottom-sheet-props="{ variant: 'basic' }"
-        :trigger="inputBoxRoot"
-        :placement="'bottom-start'"
-        @close="reset()"
-      >
-        <OrDateTimePickerPopoverHeader>
-          <OrDateTimePickerMobileControl
-            :label="'Start Date'"
-            :selected="selectedMobileControl === 'from'"
-            @click="selectedMobileControl = 'from'"
-          >
-            {{ formatDateAlt(draftModelValueFrom) }}
-          </OrDateTimePickerMobileControl>
-
-          -
-
-          <OrDateTimePickerMobileControl
-            :label="'End Date'"
-            :selected="selectedMobileControl === 'to'"
-            @click="selectedMobileControl = 'to'"
-          >
-            {{ formatDateAlt(draftModelValueTo) }}
-          </OrDateTimePickerMobileControl>
-        </OrDateTimePickerPopoverHeader>
-
-        <div :class="['layout-row', 'gap-md']">
-          <template v-if="isDesktop || (isMobile && selectedMobileControl === 'from')">
-            <div :class="['layout-column', 'grow']">
-              <OrDateTimePickerMonthSelect
-                v-model="draftModelValueFrom"
-                :initial-value="initialModelValue"
-                :year-filter="filterFrom"
-                :month-filter="filterFrom"
-              />
-
-              <OrDateTimePickerDateSelect
-                v-model="draftModelValueFrom"
-                :initial-value="initialModelValue"
-                :date-filter="filterFrom"
-                :range-start="draftModelValueFrom"
-                :range-end="draftModelValueTo"
-              />
-            </div>
-          </template>
-
-          <template v-if="isDesktop || (isMobile && selectedMobileControl === 'to')">
-            <div :class="['layout-column']">
-              <OrDateTimePickerMonthSelect
-                v-model="draftModelValueTo"
-                :initial-value="initialModelValue"
-                :year-filter="filterTo"
-                :month-filter="filterTo"
-              />
-
-              <OrDateTimePickerDateSelect
-                v-model="draftModelValueTo"
-                :initial-value="initialModelValue"
-                :date-filter="filterTo"
-                :range-start="draftModelValueFrom"
-                :range-end="draftModelValueTo"
-              />
-            </div>
-          </template>
-        </div>
-
-        <OrDateTimePickerPopoverFooter
-          :disabled="isInvalidDraftModelValue"
-          @apply="apply(); popover.close()"
-          @reset="reset(); popover.close()"
-        />
-      </OrPopover>
-
-      <div :class="['grow']" />
-
-      <template v-slot:addon>
-        <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>
-      </template>
-    </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, toRef, watch } from 'vue-demi';
-import { DropdownClose, DropdownOpen } from '../../directives';
-import { useProxyModelValue, useResponsive } from '../../hooks';
-import { FilterFunction, getCurrentDate, OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader } from '../or-date-time-picker-v3';
-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 { DateRangePickerSize } from './props';
-import { DateRangePicker, DateRangePickerPopover } from './styles';
-
-export default defineComponent({
-  components: {
-    OrDateTimePickerDateControl,
-    OrDateTimePickerDateSelect,
-    OrDateTimePickerMobileControl,
-    OrDateTimePickerMonthSelect,
-    OrDateTimePickerPopoverFooter,
-    OrDateTimePickerPopoverHeader,
-    OrError,
-    OrHint,
-    OrIcon,
-    OrIconButton,
-    OrInputBox,
-    OrLabel,
-    OrPopover,
-  },
-
-  directives: {
-    DropdownClose,
-    DropdownOpen,
-  },
-
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
-  props: {
-    modelValue: {
-      type: Object as PropType<[Date, Date]>,
-      default: undefined,
-    },
-
-    size: {
-      type: String as PropType<`${DateRangePickerSize}`>,
-      default: DateRangePickerSize.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 inputBox = ref<InstanceType<typeof OrInputBox>>();
-    const inputBoxRoot = computed(() => inputBox.value?.root);
-
-    const popover = ref<InstanceType<typeof OrPopover>>();
-    const popoverState = computed(() => popover.value?.state);
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-date-range-picker-v3',
-      ...DateRangePicker,
-    ]);
-
-    const popoverStyles = computed(() => [
-      ...DateRangePickerPopover,
-    ]);
-
-    // State
-    const initialModelValue = getCurrentDate();
-
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref<[Date | undefined, Date | undefined]>(proxyModelValue.value ?? [undefined, undefined]);
-
-    watch(proxyModelValue, (value) => {
-      draftModelValue.value = value ?? [undefined, undefined];
-    });
-
-    const draftModelValueFrom = computed({
-      get: () => draftModelValue.value[0],
-
-      set: (value) => {
-        draftModelValue.value = [
-          value,
-          draftModelValue.value[1],
-        ];
-      },
-    });
-
-    const draftModelValueTo = computed({
-      get: () => draftModelValue.value[1],
-
-      set: (value) => {
-        draftModelValue.value = [
-          draftModelValue.value[0],
-          value,
-        ];
-      },
-    });
-
-    const selectedMobileControl = ref<'from' | 'to'>('from');
-
-    const filterFrom: FilterFunction = (value) => {
-      if (draftModelValueTo.value) {
-        return Number(value) <= Number(draftModelValueTo.value);
-      }
-
-      return true;
-    };
-
-    const filterTo: FilterFunction = (value) => {
-      if (draftModelValueFrom.value) {
-        return Number(value) >= Number(draftModelValueFrom.value);
-      }
-
-      return true;
-    };
-
-    const isInvalidDraftModelValue = computed(() => {
-      if (draftModelValueFrom.value) {
-        return !filterFrom(draftModelValueFrom.value);
-      }
-
-      if (draftModelValueTo.value) {
-        return !filterTo(draftModelValueTo.value);
-      }
-
-      return false;
-    });
-
-    // Methods
-    function apply(): void {
-      proxyModelValue.value = [
-        draftModelValue.value[0] ?? initialModelValue,
-        draftModelValue.value[1] ?? initialModelValue,
-      ];
-    }
-
-    function reset(): void {
-      draftModelValue.value = proxyModelValue.value ?? [undefined, undefined];
-    }
-
-    function togglePopover(): void {
-      if (!props.readonly && !props.disabled) {
-        const popoverInstance = popover.value;
-
-        if (popoverInstance) {
-          if (popoverState.value === 'open') {
-            (popoverInstance.close as () => void)();
-          } else {
-            (popoverInstance.open as () => void)();
-          }
-        }
-      }
-    }
-
-    function closePopover(): void {
-      const popoverInstance = popover.value;
-
-      if (popoverInstance) {
-        (popoverInstance.close as () => void)();
-      }
-    }
-
-    function formatDateAlt(value?: Date): string {
-      return value?.toLocaleString(navigator.language, {
-        dateStyle: 'medium',
-        timeZone: 'UTC',
-      }) ?? '--';
-    }
-
-    // Helpers
-    const { isDesktop, isMobile } = useResponsive();
-
-    return {
-      root,
-      inputBox,
-      inputBoxRoot,
-      popover,
-      popoverState,
-      rootStyles,
-      popoverStyles,
-      initialModelValue,
-      proxyModelValue,
-      draftModelValue,
-      draftModelValueFrom,
-      draftModelValueTo,
-      selectedMobileControl,
-      filterFrom,
-      filterTo,
-      isInvalidDraftModelValue,
-      apply,
-      reset,
-      togglePopover,
-      closePopover,
-      formatDateAlt,
-      isDesktop,
-      isMobile,
-    };
-  },
-});
-</script>

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

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

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

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

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

@@ -1,12 +0,0 @@
-export const DateRangePicker: string[] = [
-  // Layout
-  'layout-column',
-
-  // Spacing
-  'gap-xs',
-];
-
-export const DateRangePickerPopover: string[] = [
-  // Box
-  'w-[580px]',
-];