@onereach/ui-components 4.1.0 → 4.1.1-beta.2531.0

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

@@ -0,0 +1,169 @@
+<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('default', {
+        hour: 'numeric',
+        timeZone: 'UTC',
+      });
+    }
+
+    function formatMinutes(value: Date): string {
+      return value.toLocaleString('default', {
+        minute: 'numeric',
+        timeZone: 'UTC',
+      });
+    }
+
+    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

@@ -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,19 @@
+export const DateTimePicker: string[] = [
+  // Layout
+  'layout-column',
+
+  // Spacing
+  'gap-xs',
+];
+
+export const DateTimePickerControl: string[] = [
+  // Layout
+  'layout-inline-row justify-center',
+
+  // Theme (focus)
+  'focus:theme-border-2-current',
+  'dark:focus:theme-border-2-current-dark',
+
+  'focus:theme-border-underline',
+  'dark:focus:theme-border-underline',
+];

package/src/components/or-inline-input-v3/OrInlineInput.stories3.ts

@@ -6,7 +6,7 @@ import OrInlineInput from './OrInlineInput.vue';
 import { InlineInputSize, InlineInputType } from './props';
 
 export default {
-  title: 'Components/Forms/Inline Input',
+  title: 'Components/Inline Input',
   component: OrInlineInput,
 
   argTypes: {

package/src/components/or-inline-textarea-v3/OrInlineTextarea.stories3.ts

@@ -5,7 +5,7 @@ import OrInlineTextareaDocs from './OrInlineTextarea.docs.mdx';
 import OrInlineTextarea from './OrInlineTextarea.vue';
 
 export default {
-  title: 'Components/Forms/Inline Textarea',
+  title: 'Components/Inline Textarea',
   component: OrInlineTextarea,
 
   argTypes: {

package/src/components/or-input-v3/OrInput.stories3.ts

@@ -1,14 +1,14 @@
 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 OrInputDocs from './OrInput.docs.mdx';
 import OrInput from './OrInput.vue';
 import { InputSize, InputType } from './props';
-import * as Faker from 'faker';
 
 export default {
-  title: 'Components/Forms/Input',
+  title: 'Components/Input',
   component: OrInput,
 
   argTypes: {

package/src/components/or-menu-v3/OrMenu.vue

@@ -52,6 +52,7 @@ export default defineComponent({
 
   expose: [
     'root',
+    'state',
     'isOpen',
     'open',
     'close',
@@ -64,6 +65,7 @@ export default defineComponent({
 
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverRoot = computed(() => popover.value?.root);
+    const popoverState = computed(() => popover.value?.state);
 
     // Styles
     const rootStyles = computed(() => [
@@ -112,6 +114,7 @@ export default defineComponent({
       root,
       popover,
       popoverRoot,
+      state: popoverState,
       rootStyles,
       isOpen,
       open,

package/src/components/or-radio-v3/OrRadio.stories3.ts

@@ -7,7 +7,7 @@ import OrRadioDocs from './OrRadio.docs.mdx';
 import OrRadio from './OrRadio.vue';
 
 export default {
-  title: 'Components/Forms/Radio',
+  title: 'Components/Radio',
   component: OrRadio,
 
   argTypes: {

package/src/components/or-segmented-control-v3/OrSegmentedControl.stories3.ts

@@ -7,7 +7,7 @@ import { SegmentedControlSize } from './props';
 import { SegmentedControlOption } from './types';
 
 export default {
-  title: 'Components/Forms/Segmented Control',
+  title: 'Components/Segmented Control',
   component: OrSegmentedControl,
 
   argTypes: {

package/src/components/or-select-v3/OrSelect.stories3.ts

@@ -8,7 +8,7 @@ import { SelectSize } from './props';
 import { SelectOption, SelectSearchFunction } from './types';
 
 export default {
-  title: 'Components/Forms/Select',
+  title: 'Components/Select',
   component: OrSelect,
 
   argTypes: {

package/src/components/or-switch-v3/OrSwitch.stories3.ts

@@ -7,7 +7,7 @@ import OrSwitchDocs from './OrSwitch.docs.mdx';
 import OrSwitch from './OrSwitch.vue';
 
 export default {
-  title: 'Components/Forms/Switch',
+  title: 'Components/Switch',
   component: OrSwitch,
 
   argTypes: {

package/src/components/or-textarea-v3/OrTextarea.stories3.ts

@@ -7,7 +7,7 @@ import OrTextarea from './OrTextarea.vue';
 import { TextareaSize } from './props';
 
 export default {
-  title: 'Components/Forms/Textarea',
+  title: 'Components/Textarea',
   component: OrTextarea,
 
   argTypes: {

package/src/components/{or-hint-v3/OrHint.docs.mdx → or-time-picker-v3/OrTimePicker.docs.mdx}

@@ -1,7 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
 ```ts
-import { OrHintV3 as OrHint } from '@onereach/ui-components';
+import { OrTimePickerV3 as OrTimePicker } from '@onereach/ui-components';
 ```
 
 <DocsPage />

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

@@ -0,0 +1,159 @@
+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),
+};