@onereach/ui-components 4.2.5 → 4.2.6-beta.2604.0

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

@@ -0,0 +1,10 @@
+export const DateTimePickerPopoverHeader: string[] = [
+  // Layout
+  'layout-row md:hidden',
+
+  // Spacing
+  'px-md',
+  'py-md',
+
+  'gap-xl',
+];

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

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

@@ -0,0 +1,19 @@
+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',
+];
+
+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

@@ -0,0 +1,166 @@
+<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="hoursFilter && !hoursFilter(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="minutesFilter && !minutesFilter(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 { FilterFunction } from '../../types';
+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,
+    },
+
+    initialValue: {
+      type: Date,
+      required: true,
+    },
+
+    hoursFilter: {
+      type: Function as PropType<FilterFunction>,
+      default: undefined,
+    },
+
+    minutesFilter: {
+      type: Function as PropType<FilterFunction>,
+      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 ?? props.initialValue,
+
+      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

@@ -0,0 +1,37 @@
+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
+  'h-[294px] md:h-[238px]',
+
+  // Overflow
+  'overflow-x-hidden',
+  'overflow-y-auto',
+];
+
+export const DateTimePickerTimeSelectButtonGroupItem: string[] = [
+  // Box
+  '!min-w-fit',
+
+  // 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,17 @@
+export const DateTimePicker: string[] = [
+  // Layout
+  'layout-column',
+
+  // Spacing
+  'gap-xs',
+];
+
+export const DateTimePickerDatePopover: string[] = [
+  // Box
+  'w-[298px]',
+];
+
+export const DateTimePickerTimePopover: string[] = [
+  // Box
+  'w-[224px]',
+];

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

@@ -0,0 +1,3 @@
+export interface FilterFunction {
+  (value: Date): boolean;
+}

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-box-v3/styles.ts

@@ -26,22 +26,22 @@ export const InputBoxRootVariants: Record<InputBoxVariant, string[]> = {
     'theme-border-1-outline',
     'dark:theme-border-1-outline-dark',
 
-    'theme-outline-transparent',
-    'dark:theme-outline-transparent',
+    'theme-outline-2-transparent',
+    'dark:theme-outline-2-transparent',
 
     // Theme (focus)
-    'focus-within:theme-background-primary-opacity',
-    'dark:focus-within:theme-background-primary-opacity-dark',
+    'focus-within:theme-background-primary-translucent',
+    'dark:focus-within:theme-background-primary-translucent-dark',
 
     'focus-within:theme-border-1-primary',
     'dark:focus-within:theme-border-1-primary-dark',
 
-    'focus-within:theme-outline-primary',
-    'dark:focus-within:theme-outline-primary-dark',
+    'focus-within:theme-outline-2-primary',
+    'dark:focus-within:theme-outline-2-primary-dark',
 
     // Theme (read-only)
-    'read-only:bg-primary-opacity-0-08',
-    'dark:read-only:bg-primary-opacity-0-08-dark',
+    'read-only:theme-background-primary-translucent',
+    'dark:read-only:theme-background-primary-translucent-dark',
 
     'read-only:!border-transparent',
     'dark:read-only:!border-transparent',
@@ -50,8 +50,8 @@ export const InputBoxRootVariants: Record<InputBoxVariant, string[]> = {
     'invalid:theme-preset-3-error',
     'dark:invalid:theme-preset-3-error-dark',
 
-    'invalid:theme-background-error-opacity',
-    'dark:invalid:theme-background-error-opacity-dark',
+    'invalid:theme-background-error-translucent',
+    'dark:invalid:theme-background-error-translucent-dark',
 
     'invalid:theme-foreground-default',
     'dark:invalid:theme-foreground-default-dark',
@@ -59,18 +59,18 @@ export const InputBoxRootVariants: Record<InputBoxVariant, string[]> = {
     'invalid:theme-border-1-error',
     'dark:invalid:theme-border-1-error-dark',
 
-    'invalid:theme-outline-transparent',
-    'dark:invalid:theme-outline-transparent',
+    'invalid:theme-outline-2-transparent',
+    'dark:invalid:theme-outline-2-transparent',
 
     // Theme (invalid, focus)
-    'invalid:focus-within:theme-background-error-opacity',
-    'dark:invalid:focus-within:theme-background-error-opacity-dark',
+    'invalid:focus-within:theme-background-error-translucent',
+    'dark:invalid:focus-within:theme-background-error-translucent-dark',
 
     'invalid:focus-within:theme-border-1-error',
     'dark:invalid:focus-within:theme-border-1-error-dark',
 
-    'invalid:focus-within:theme-outline-error',
-    'dark:invalid:focus-within:theme-outline-error-dark',
+    'invalid:focus-within:theme-outline-2-error',
+    'dark:invalid:focus-within:theme-outline-2-error-dark',
 
     // Theme (invalid, read-only)
     'invalid:read-only:bg-error-opacity-0-08',
@@ -93,8 +93,8 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     'children:min-h-[46px] children:md:min-h-[34px]',
 
     // Spacing
-    'first-child:pl-md first-child:md:pl-sm+',
-    'last-child:pr-md last-child:md:pr-sm+',
+    'first-child:ml-md first-child:md:ml-sm+',
+    'last-child:mr-md last-child:md:mr-sm+',
 
     'gap-sm+ md:gap-sm',
 
@@ -107,8 +107,8 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     'children:min-h-[30px]',
 
     // Spacing
-    'first-child:pl-md first-child:md:pl-sm+',
-    'last-child:pr-md last-child:md:pr-sm+',
+    'first-child:ml-md first-child:md:ml-sm+',
+    'last-child:mr-md last-child:md:mr-sm+',
 
     'gap-[6px]',
 

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-popover-v3/OrPopover.vue

@@ -25,7 +25,8 @@
       <template v-if="isMobile && variant === 'auto' || variant === 'bottom-sheet'">
         <OrBottomSheet
           ref="bottomSheet"
-          @update:state="handleBottomSheetState"
+          @update:state="state = $event"
+          @update:state:closed-automatically="$emit('update:state:closed-automatically')"
         >
           <slot />
         </OrBottomSheet>
@@ -37,7 +38,7 @@
 <script lang="ts">
 import { autoUpdate, computePosition, flip, hide, shift } from '@floating-ui/dom';
 import { onClickOutside } from '@vueuse/core';
-import { computed, defineComponent, nextTick, PropType, ref, toRef, unref, watch, watchPostEffect } from 'vue-demi';
+import { PropType, computed, defineComponent, nextTick, ref, toRef, unref, watch, watchPostEffect } from 'vue-demi';
 import { useElevation, useResponsive } from '../../hooks';
 import { OrBottomSheetV3 as OrBottomSheet } from '../or-bottom-sheet-v3';
 import { OrTeleportV3 as OrTeleport } from '../or-teleport-v3';
@@ -56,7 +57,7 @@ export default defineComponent({
 
   props: {
     variant: {
-      type: String as PropType<PopoverVariant>,
+      type: String as PropType<`${PopoverVariant}`>,
       default: PopoverVariant.Auto,
     },
 
@@ -66,7 +67,7 @@ export default defineComponent({
     },
 
     placement: {
-      type: String as PropType<PopoverPlacement>,
+      type: String as PropType<`${PopoverPlacement}`>,
       default: PopoverPlacement.Bottom,
     },
 
@@ -88,12 +89,18 @@ export default defineComponent({
 
   emits: [
     'update:state',
+    'update:state:open',
+    'update:state:fullscreen',
+    'update:state:closed',
+    'update:state:closed-automatically',
   ],
 
   expose: [
     'root',
     'state',
     'isOpen',
+    'isFullscreen',
+    'isClosed',
     'open',
     'close',
   ],
@@ -120,12 +127,29 @@ export default defineComponent({
     ]);
 
     // State
-    const state = ref<'open' | 'closed'>('closed');
+    const state = ref<'open' | 'fullscreen' | 'closed'>('closed');
+
     const isOpen = computed(() => state.value === 'open');
+    const isFullscreen = computed(() => state.value === 'fullscreen');
+    const isClosed = computed(() => state.value === 'closed');
 
     // Events
     watch(state, (value) => {
       context.emit('update:state', value);
+
+      switch (value) {
+        case 'open':
+          context.emit('update:state:open');
+          break;
+
+        case 'fullscreen':
+          context.emit('update:state:fullscreen');
+          break;
+
+        case 'closed':
+          context.emit('update:state:closed');
+          break;
+      }
     });
 
     // Methods
@@ -162,7 +186,7 @@ export default defineComponent({
       }
     }
 
-    function close(): void {
+    function close(auto: boolean = false): void {
       state.value = 'closed';
 
       switch (props.variant) {
@@ -193,6 +217,10 @@ export default defineComponent({
 
           break;
       }
+
+      if (auto) {
+        context.emit('update:state:closed-automatically');
+      }
     }
 
     // Handlers
@@ -241,7 +269,7 @@ export default defineComponent({
       const path = event.composedPath() as Element[];
 
       if (!path.some(({ classList }) => classList?.contains('or-popover-v3') || classList?.contains('or-bottom-sheet-v3'))) {
-        close();
+        close(true);
       }
     }, {
       ignore: [trigger],
@@ -263,6 +291,8 @@ export default defineComponent({
       bodyStyles,
       state,
       isOpen,
+      isFullscreen,
+      isClosed,
       open,
       close,
     };

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/Radio',
+  title: 'Components/Radio',
   component: OrRadio,
 
   argTypes: {

package/src/components/or-radio-v3/styles.ts

@@ -31,8 +31,8 @@ export const RadioControl: string[] = [
   'dark:theme-border-1-outline-dark',
 
   // Theme (focus)
-  'focus:theme-outline-primary',
-  'dark:focus:theme-outline-primary-dark',
+  'focus:theme-outline-2-primary',
+  'dark:focus:theme-outline-2-primary-dark',
 
   // Theme (checked)
   'checked:theme-preset-1-primary',

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

@@ -10,7 +10,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: {