@onereach/ui-components 3.0.3-beta.2484.0 → 3.0.4-beta.2486.0

package/dist/esm/v3/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-header/OrDateTimePickerPopoverHeader.vue.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+}> & import("@vue/composition-api").Data, {}, {}, {}, import("@vue/composition-api").ExtractPropTypes<{}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {} & {}, {}, true>);
+export default _default;

package/dist/esm/v3/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-header/styles.d.ts

@@ -0,0 +1 @@
+export declare const DateTimePickerPopoverHeader: string[];

package/dist/esm/v3/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue.d.ts

@@ -0,0 +1,54 @@
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
+    hoursValue: import("@vue/composition-api").WritableComputedRef<number>;
+    minutesValue: import("@vue/composition-api").WritableComputedRef<number>;
+    hoursOptions: {
+        value: number;
+        label: string;
+    }[];
+    minutesOptions: {
+        value: number;
+        label: string;
+    }[];
+}> & import("@vue/composition-api").Data, {}, {}, {
+    modelValue: {
+        type: DateConstructor;
+        default: undefined;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    modelValue: {
+        type: DateConstructor;
+        default: undefined;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    modelValue: Date;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
+    hoursValue: import("@vue/composition-api").WritableComputedRef<number>;
+    minutesValue: import("@vue/composition-api").WritableComputedRef<number>;
+    hoursOptions: {
+        value: number;
+        label: string;
+    }[];
+    minutesOptions: {
+        value: number;
+        label: string;
+    }[];
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    modelValue: Date;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: Date;
+}, true>);
+export default _default;

package/dist/esm/v3/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const DateTimePickerTimeSelect: string[];
+export declare const DateTimePickerTimeSelectButtonGroup: string[];
+export declare const DateTimePickerTimeSelectButtonGroupItem: string[];

package/dist/esm/v3/components/or-date-time-picker-v3/props.d.ts

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

package/dist/esm/v3/components/or-date-time-picker-v3/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const DateTimePicker: string[];
+export declare const DateTimePickerControl: string[];

package/dist/esm/v3/components/or-input-box-v3/index.js

@@ -1,3 +1,3 @@
-export { a as InputBoxSize, I as InputBoxVariant, s as OrInputBoxV3 } from '../../OrInputBox-11389afd.js';
+export { I as InputBoxSize, a as InputBoxVariant, s as OrInputBoxV3 } from '../../OrInputBox-901887a1.js';
 import 'vue-demi';
 import 'vue';

package/dist/esm/v3/components/or-input-v3/index.js

@@ -1,5 +1,5 @@
-export { I as InputType, s as OrInputV3 } from '../../OrInput-f0748c95.js';
-export { a as InputSize } from '../../OrInputBox-11389afd.js';
+export { I as InputType, s as OrInputV3 } from '../../OrInput-dae6e478.js';
+export { I as InputSize } from '../../OrInputBox-901887a1.js';
 import 'vue-demi';
 import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';

package/dist/esm/v3/components/or-search-v3/index.js

@@ -1,8 +1,8 @@
-export { s as OrSearchV3 } from '../../OrSearch-81b75244.js';
-export { a as SearchSize } from '../../OrInputBox-11389afd.js';
+export { s as OrSearchV3 } from '../../OrSearch-9989bb31.js';
+export { I as SearchSize } from '../../OrInputBox-901887a1.js';
 import '@vueuse/core';
 import 'vue-demi';
-import '../../OrInput-f0748c95.js';
+import '../../OrInput-dae6e478.js';
 import '../../useIdAttribute-859439f0.js';
 import '../../useResponsive-a02e95b7.js';
 import '../../useValidationAttributes-d1abbe34.js';

package/dist/esm/v3/components/or-select-v3/index.js

@@ -1,7 +1,7 @@
-export { s as OrSelectV3 } from '../../OrSelect-b9d45ab4.js';
-export { a as SelectSize } from '../../OrInputBox-11389afd.js';
+export { s as OrSelectV3 } from '../../OrSelect-bb3c30ec.js';
+export { I as SelectSize } from '../../OrInputBox-901887a1.js';
 import 'vue-demi';
-import '../../dropdown-open-0d314aa4.js';
+import '../../dropdown-open-e1f90e0a.js';
 import '../../useOverflow-af6161c8.js';
 import '@vueuse/core';
 import '../../OrCheckbox-56f849f7.js';
@@ -13,7 +13,7 @@ import '../../OrError-c01d0c29.js';
 import '../../OrExpansionPanel-99ca7ed7.js';
 import '../../OrIcon-62793572.js';
 import '../../OrHint-06ab89d7.js';
-import '../../OrInput-f0748c95.js';
+import '../../OrInput-dae6e478.js';
 import '../../useResponsive-a02e95b7.js';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrIconButton-e3f4d060.js';

package/dist/esm/v3/components/or-textarea-v3/index.js

@@ -1,5 +1,5 @@
-export { s as OrTextareaV3 } from '../../OrTextarea-08b22d36.js';
-export { a as TextareaSize } from '../../OrInputBox-11389afd.js';
+export { s as OrTextareaV3 } from '../../OrTextarea-2002e190.js';
+export { I as TextareaSize } from '../../OrInputBox-901887a1.js';
 import 'vue-demi';
 import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';

package/dist/esm/v3/directives/index.js

@@ -1,2 +1,2 @@
-export { D as DropdownClose, a as DropdownOpen } from '../dropdown-open-0d314aa4.js';
+export { D as DropdownClose, a as DropdownOpen } from '../dropdown-open-e1f90e0a.js';
 import 'vue-demi';

package/dist/esm/v3/{dropdown-open-0d314aa4.js → dropdown-open-e1f90e0a.js}

@@ -3,6 +3,7 @@ import { isVue3 } from 'vue-demi';
 const created$1 = (element, binding) => {
   element.addEventListener('keydown', event => {
     event.preventDefault();
+    event.stopPropagation();
     if (['Escape'].includes(event.key)) {
       binding.value(event);
     }
@@ -15,11 +16,16 @@ const DropdownClose = {
 const created = (element, binding) => {
   element.addEventListener('keydown', event => {
     event.preventDefault();
+    event.stopPropagation();
     if (['Enter', ' '].includes(event.key)) {
       binding.value(event);
     }
   });
-  element.addEventListener('click', binding.value);
+  element.addEventListener('click', event => {
+    event.preventDefault();
+    event.stopPropagation();
+    binding.value(event);
+  });
 };
 const DropdownOpen = {
   [isVue3 ? 'created' : 'bind']: created

package/dist/esm/v3/index.js

@@ -6,7 +6,7 @@ export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-5a850657.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-70131a12.js';
-export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-62d1d8d5.js';
+export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-aa7f0c81.js';
 export { s as OrCardV3 } from './OrCard-cc82902c.js';
 export { a as OrCarousel, s as OrCarouselItem } from './OrCarouselItem-a3a855e8.js';
 export { s as OrCheckbox } from './OrCheckbox-8d8887ea.js';
@@ -16,12 +16,14 @@ export { s as OrCode, O as OrCodeLanguages } from './OrCode-b5822f4e.js';
 export { s as OrCollapse } from './OrCollapse-37a52e8f.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-9a149e6b.js';
 export { s as OrConfirm } from './OrConfirm-f408faf5.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-b74191d6.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-ecb8c576.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-30749526.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-3e2dc067.js';
+export { I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TextareaSize } from './OrInputBox-901887a1.js';
+export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-ade9192b.js';
 export { s as OrErrorV3 } from './OrError-c01d0c29.js';
-export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-99ca7ed7.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-fb3ecb60.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-291c7653.js';
@@ -34,9 +36,8 @@ export { I as InlineInputBoxSize, I as InlineInputSize, s as OrInlineInputBoxV3
 export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-c0e61e6b.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-328c89ca.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-6d5e7ceb.js';
-export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, s as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from './OrInputBox-11389afd.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-f0748c95.js';
 export { s as OrInput } from './OrInput-0dbd5a01.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-dae6e478.js';
 export { s as OrLabel } from './OrLabel-876f8729.js';
 export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-4da56db0.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-7c4eedf0.js';
@@ -55,18 +56,18 @@ export { s as OrNumberInput } from './OrNumberInput-dca5e850.js';
 export { s as OrOverflowMenu } from './OrOverflowMenu-08626d66.js';
 export { s as OrOverlay } from './OrOverlay-451dce49.js';
 export { s as OrOverlayV3 } from './OrOverlay-7cf03aea.js';
-export { s as OrPassword } from './OrPassword-4a37f3ac.js';
 export { s as OrPaginationV3 } from './OrPagination-f2d104d9.js';
+export { s as OrPassword } from './OrPassword-4a37f3ac.js';
 export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-d0d52c86.js';
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-33cf7445.js';
 export { s as OrRadio } from './OrRadio-c3ab11f2.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from './OrRadio-a890ee7c.js';
 export { s as OrSearch } from './OrSearch-1f80760e.js';
-export { s as OrSearchV3 } from './OrSearch-81b75244.js';
+export { s as OrSearchV3 } from './OrSearch-9989bb31.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-4587c7a9.js';
 export { s as OrSelect } from './OrSelect-88e5dfaf.js';
-export { s as OrSelectV3 } from './OrSelect-b9d45ab4.js';
+export { s as OrSelectV3 } from './OrSelect-bb3c30ec.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { s as OrSidebarV3 } from './OrSidebar-c4dfb35c.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-e4b2eedb.js';
@@ -88,7 +89,7 @@ export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-de6b2fe2.js';
 export { s as OrTextarea } from './OrTextarea-de1ecb0f.js';
-export { s as OrTextareaV3 } from './OrTextarea-08b22d36.js';
+export { s as OrTextareaV3 } from './OrTextarea-2002e190.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-b025d6e4.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-70cd8d1d.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
@@ -96,7 +97,7 @@ export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-a
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 export { s as OrTooltip, a as OrTooltipContent } from './OrTooltip-8d7385bc.js';
 export { s as OrTooltipV3 } from './OrTooltip-d91128f4.js';
-export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
+export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-92fce12c.js';
 export { u as useOverflow } from './useOverflow-af6161c8.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "3.0.3-beta.2484.0",
+  "version": "3.0.4-beta.2486.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -38,7 +38,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.37.3",
+    "@onereach/styles": "^2.37.4-beta.2486.0",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",

package/src/components/index.ts

@@ -18,10 +18,11 @@ export * from './or-color-picker';
 export * from './or-confirm';
 export * from './or-confirm-v3';
 export * from './or-date-time-picker';
+export * from './or-date-time-picker-v3';
+export * from './or-empty-state-v3';
 export * from './or-error';
 export * from './or-error-tag-v3';
 export * from './or-error-v3';
-export * from './or-empty-state-v3';
 export * from './or-expansion-panel-v3';
 export * from './or-fab-v3';
 export * from './or-floating';
@@ -34,9 +35,9 @@ export * from './or-inline-input-box-v3';
 export * from './or-inline-input-v3';
 export * from './or-inline-text-edit';
 export * from './or-inline-textarea-v3';
+export * from './or-input';
 export * from './or-input-box-v3';
 export * from './or-input-v3';
-export * from './or-input';
 export * from './or-label';
 export * from './or-label-v3';
 export * from './or-link-v3';
@@ -54,8 +55,8 @@ export * from './or-number-input';
 export * from './or-overflow-menu';
 export * from './or-overlay';
 export * from './or-overlay-v3';
-export * from './or-password';
 export * from './or-pagination-v3';
+export * from './or-password';
 export * from './or-popover-v3';
 export * from './or-progress';
 export * from './or-progress-v3';

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

@@ -0,0 +1,7 @@
+import { DocsPage } from '@storybook/addon-docs';
+
+```ts
+import { OrDateTimePickerV3 as OrDateTimePicker } from '@onereach/ui-components';
+```
+
+<DocsPage />

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

@@ -0,0 +1,156 @@
+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 OrDateTimePickerDocs from './OrDateTimePicker.docs.mdx';
+import OrDateTimePicker from './OrDateTimePicker.vue';
+import { DateTimePickerSize } from './props';
+
+export default {
+  title: 'Components/Forms/Date & Time Picker',
+  component: OrDateTimePicker,
+
+  argTypes: {
+    // Slots
+    addon: {
+      type: {
+        name: 'string',
+        required: false,
+      },
+
+      control: { type: 'text' },
+    },
+
+    // Props
+    modelValue: {
+      control: { type: 'text' },
+    },
+
+    size: {
+      control: { type: 'select' },
+      options: Object.values(DateTimePickerSize),
+    },
+
+    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: OrDateTimePickerDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=4063%3A40967&t=H1iGW8hg2dduEfyc-4',
+    },
+  },
+} as Meta<typeof OrDateTimePicker>;
+
+const Template: StoryFn<typeof OrDateTimePicker> = (args) => ({
+  components: {
+    OrIcon,
+    OrDateTimePicker,
+  },
+
+  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: `
+    <OrDateTimePicker
+      v-model="model"
+      v-bind="args"
+      @update:modelValue="onUpdateModelValue"
+      @keydown="onKeydown"
+      @keyup="onKeyup"
+      @focus="onFocus"
+      @blur="onBlur"
+    >
+      <template #addon>
+        ${args.addon}
+      </template>
+    </OrDateTimePicker>
+  `,
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  // Slots
+  addon: '<OrIcon icon="info" />',
+
+  // Props
+  label: 'Label',
+  placeholder: 'Placeholder',
+  hint: Faker.lorem.sentence(20),
+};