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

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-control/OrDateTimePickerTimeControl.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 { useTimePlaceholder } from '../../hooks/useTimePlaceholder';
-import { DateTimePickerTimeControl, DateTimePickerTimeControlPlaceholder } from './styles';
-
-export default defineComponent({
-  name: 'OrDateTimePickerTimeControl',
-
-  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-time-control',
-      ...DateTimePickerTimeControl,
-    ]);
-
-    const placeholderStyles = computed(() => [
-      ...DateTimePickerTimeControlPlaceholder,
-    ]);
-
-    // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    const placeholder = useTimePlaceholder();
-
-    // Methods
-    function formatModelValue(value: Date): string {
-      return value.toLocaleString(navigator.language, {
-        timeStyle: 'short',
-        timeZone: 'UTC',
-      });
-    }
-
-    return {
-      root,
-      rootStyles,
-      placeholderStyles,
-      proxyModelValue,
-      placeholder,
-      formatModelValue,
-    };
-  },
-});
-</script>

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

@@ -1,20 +0,0 @@
-export const DateTimePickerTimeControl: 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 DateTimePickerTimeControlPlaceholder: string[] = [
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
-];

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

@@ -1,166 +0,0 @@
-<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'"
-        :disabled="filter && !filter(value)"
-        @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'"
-        :disabled="filter && !filter(value)"
-        @click.stop="proxyModelValue = value"
-      >
-        {{ formatMinutes(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 { DateTimePickerTimeSelect, DateTimePickerTimeSelectButtonGroup, DateTimePickerTimeSelectButtonGroupItem } from './styles';
-
-export default defineComponent({
-  name: 'OrDateTimePickerTimeSelect',
-
-  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-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(navigator.language, {
-        hour: 'numeric',
-        timeZone: 'UTC',
-      });
-    }
-
-    function formatMinutes(value: Date): string {
-      return String(value.getUTCMinutes()).padStart(2, '0');
-    }
-
-    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

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

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

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

@@ -1,7 +0,0 @@
-export const DateTimePicker: string[] = [
-  // Layout
-  'layout-column',
-
-  // Spacing
-  'gap-xs',
-];

package/src/components/or-time-picker-v3/OrTimePicker.stories3.ts

@@ -1,168 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import * as Faker from 'faker';
-import { ref, watch } from 'vue-demi';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import OrTimePickerDocs from './OrTimePicker.docs.mdx';
-import OrTimePicker from './OrTimePicker.vue';
-import { TimePickerSize } from './props';
-
-export default {
-  title: 'Components/Time Picker',
-  component: OrTimePicker,
-
-  argTypes: {
-    // Slots
-    addon: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    modelValue: {
-      control: { type: 'text' },
-    },
-
-    filter: {
-      table: { disable: true },
-    },
-
-    size: {
-      control: { type: 'select' },
-      options: Object.values(TimePickerSize),
-    },
-
-    label: {
-      control: { type: 'text' },
-    },
-
-    hint: {
-      control: { type: 'text' },
-    },
-
-    error: {
-      control: { type: 'text' },
-    },
-
-    required: {
-      control: { type: 'boolean' },
-    },
-
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-
-    disableDefaultStyles: {
-      control: { type: 'boolean' },
-    },
-
-    // Events
-    'update:modelValue': {
-      table: { disable: true },
-    },
-
-    input: {
-      table: { disable: true },
-    },
-
-    keydown: {
-      table: { disable: true },
-    },
-
-    keyup: {
-      table: { disable: true },
-    },
-
-    focus: {
-      table: { disable: true },
-    },
-
-    blur: {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrTimePickerDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=3161-14394&t=fEpVdGUcSv9iaRfM-0',
-    },
-  },
-} as Meta<typeof OrTimePicker>;
-
-const Template: StoryFn<typeof OrTimePicker> = (args) => ({
-  components: {
-    OrIcon,
-    OrTimePicker,
-  },
-
-  setup() {
-    // State
-    const model = ref<Date>();
-
-    // Effects
-    watch(model, (value) => {
-      console.debug(value);
-    });
-
-    return {
-      args,
-      model,
-      onUpdateModelValue: action('update:modelValue'),
-      onKeydown: action('keydown'),
-      onKeyup: action('keyup'),
-      onFocus: action('focus'),
-      onBlur: action('blur'),
-    };
-  },
-
-  template: `
-    <OrTimePicker
-      v-model="model"
-      v-bind="args"
-      @update:modelValue="onUpdateModelValue"
-      @keydown="onKeydown"
-      @keyup="onKeyup"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <template #addon>
-        ${args.addon}
-      </template>
-    </OrTimePicker>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Slots
-  addon: '<OrIcon icon="info" />',
-
-  // Props
-  label: 'Label',
-  hint: Faker.lorem.sentence(20),
-};
-
-export const WithFilter = Template.bind({});
-
-WithFilter.args = {
-  ...Default.args,
-
-  // Props
-  filter: (value) => Number(value) >= Date.now(),
-};