@onereach/ui-components 3.0.4-beta.2487.0 → 3.0.4-beta.2500.0

package/dist/bundled/v2/{OrDateTimePicker-11b6d4dd.js → OrDateTimePicker-5a379f88.js}

@@ -44,7 +44,9 @@ const DateTimePickerDaySelect = [
 'px-md', 'py-md', 'gap-sm'];
 const DateTimePickerDaySelectButtonGroup = [
 // Layout
-'grid', 'grid-cols-7'];
+'grid', 'grid-cols-7',
+// Spacing
+'gap-xs'];
 const DateTimePickerDaySelectButtonGroupItem = [
 // Box
 'min-w-fit',
@@ -66,6 +68,10 @@ var script$6 = defineComponent({
     modelValue: {
       type: Date,
       default: undefined
+    },
+    filter: {
+      type: Function,
+      default: undefined
     }
   },
   emits: ['update:modelValue'],
@@ -140,7 +146,8 @@ var __vue_render__$6 = function () {
       class: _vm.buttonGroupItemStyles,
       attrs: {
         "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
-        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit'
+        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
+        "disabled": _vm.filter && !_vm.filter(value)
       },
       on: {
         "click": function ($event) {
@@ -270,6 +277,10 @@ var script$4 = defineComponent({
     modelValue: {
       type: Date,
       default: undefined
+    },
+    filter: {
+      type: Function,
+      default: undefined
     }
   },
   emits: ['update:modelValue'],
@@ -432,7 +443,8 @@ var __vue_render__$4 = function () {
     return _c('OrMenuItem', {
       key: Number(value),
       attrs: {
-        "selected": Number(value) === Number(_vm.proxyModelValue)
+        "selected": Number(value) === Number(_vm.proxyModelValue),
+        "disabled": _vm.filter && !_vm.filter(value)
       },
       on: {
         "click": function ($event) {
@@ -451,7 +463,8 @@ var __vue_render__$4 = function () {
     return _c('OrMenuItem', {
       key: Number(value),
       attrs: {
-        "selected": Number(value) === Number(_vm.proxyModelValue)
+        "selected": Number(value) === Number(_vm.proxyModelValue),
+        "disabled": _vm.filter && !_vm.filter(value)
       },
       on: {
         "click": function ($event) {
@@ -666,6 +679,10 @@ var script$1 = defineComponent({
     modelValue: {
       type: Date,
       default: undefined
+    },
+    filter: {
+      type: Function,
+      default: undefined
     }
   },
   emits: ['update:modelValue'],
@@ -749,7 +766,8 @@ var __vue_render__$1 = function () {
       class: _vm.buttonGroupItemStyles,
       attrs: {
         "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
-        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit'
+        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
+        "disabled": _vm.filter && !_vm.filter(value)
       },
       on: {
         "click": function ($event) {
@@ -766,7 +784,8 @@ var __vue_render__$1 = function () {
       class: _vm.buttonGroupItemStyles,
       attrs: {
         "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
-        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit'
+        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
+        "disabled": _vm.filter && !_vm.filter(value)
       },
       on: {
         "click": function ($event) {
@@ -805,8 +824,10 @@ const DateTimePicker = [
 // Spacing
 'gap-xs'];
 const DateTimePickerControl = [
+// Layout
+'layout-inline-row justify-center',
 // Theme (focus)
-'focus:theme-border-1-current', 'dark:focus:theme-border-1-current-dark', 'focus:theme-border-underline', 'dark:focus:theme-border-underline'];
+'focus:theme-border-2-current', 'dark:focus:theme-border-2-current-dark', 'focus:theme-border-underline', 'dark:focus:theme-border-underline'];
 
 var script = defineComponent({
   name: 'OrDateTimePicker',
@@ -837,6 +858,10 @@ var script = defineComponent({
       type: Date,
       default: undefined
     },
+    filter: {
+      type: Function,
+      default: undefined
+    },
     size: {
       type: String,
       default: InputBoxSize.M
@@ -945,6 +970,34 @@ var script = defineComponent({
         popoverInstance.close();
       }
     }
+    function formatDate(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        dateStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    function formatTime(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        timeStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    function formatDateAlt(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        dateStyle: 'medium',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    function formatTimeAlt(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        timeStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
     return {
       root,
       dateControl,
@@ -961,12 +1014,16 @@ var script = defineComponent({
       toggleDatePopover,
       toggleTimePopover,
       closeDatePopover,
-      closeTimePopover
+      closeTimePopover,
+      formatDate,
+      formatTime,
+      formatDateAlt,
+      formatTimeAlt
     };
   }
 });
 
-var css_248z = "input[data-v-0bec0f54]{min-width:0;background:0 0;outline:0}input[type=date][data-v-0bec0f54]::-webkit-datetime-edit-day-field,input[type=date][data-v-0bec0f54]::-webkit-datetime-edit-month-field,input[type=date][data-v-0bec0f54]::-webkit-datetime-edit-year-field{display:none}input[type=time][data-v-0bec0f54]::-webkit-datetime-edit-ampm-field,input[type=time][data-v-0bec0f54]::-webkit-datetime-edit-hour-field,input[type=time][data-v-0bec0f54]::-webkit-datetime-edit-minute-field{display:none}input[type=date][data-v-0bec0f54]::-webkit-datetime-edit-text,input[type=time][data-v-0bec0f54]::-webkit-datetime-edit-text{display:none}input[type=date][data-v-0bec0f54]::-webkit-calendar-picker-indicator,input[type=time][data-v-0bec0f54]::-webkit-calendar-picker-indicator{display:none}";
+var css_248z = "input[data-v-4d939067]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -1012,7 +1069,7 @@ var __vue_render__ = function () {
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, [_c('input', _vm._b({
+  }, [_c('div', _vm._b({
     directives: [{
       name: "dropdown-open",
       rawName: "v-dropdown-open",
@@ -1027,12 +1084,12 @@ var __vue_render__ = function () {
     ref: "dateControl",
     class: _vm.controlStyles,
     attrs: {
-      "type": 'date',
+      "contenteditable": true,
       "required": _vm.required,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, 'input', _vm.controlAttributes, false)), _vm._v(" "), _c('input', _vm._b({
+  }, 'div', _vm.controlAttributes, false), [_vm._v("\n      " + _vm._s(_vm.formatDate(_vm.proxyModelValue)) + "\n    ")]), _vm._v(" "), _c('div', _vm._b({
     directives: [{
       name: "dropdown-open",
       rawName: "v-dropdown-open",
@@ -1047,12 +1104,12 @@ var __vue_render__ = function () {
     ref: "timeControl",
     class: _vm.controlStyles,
     attrs: {
-      "type": 'time',
+      "contenteditable": true,
       "required": _vm.required,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, 'input', _vm.controlAttributes, false)), _vm._v(" "), _c('OrPopover', {
+  }, 'div', _vm.controlAttributes, false), [_vm._v("\n      " + _vm._s(_vm.formatTime(_vm.proxyModelValue)) + "\n    ")]), _vm._v(" "), _c('OrPopover', {
     ref: "datePopover",
     attrs: {
       "variant": 'auto',
@@ -1063,11 +1120,14 @@ var __vue_render__ = function () {
     attrs: {
       "label": "Date"
     }
-  }, [_vm._v("\n          Sep 12\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
       "label": "Time"
     }
-  }, [_vm._v("\n          9:07\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
+    attrs: {
+      "filter": _vm.filter
+    },
     model: {
       value: _vm.draftModelValue,
       callback: function ($$v) {
@@ -1076,6 +1136,9 @@ var __vue_render__ = function () {
       expression: "draftModelValue"
     }
   }), _vm._v(" "), _c('OrDateTimePickerDaySelect', {
+    attrs: {
+      "filter": _vm.filter
+    },
     model: {
       value: _vm.draftModelValue,
       callback: function ($$v) {
@@ -1105,11 +1168,14 @@ var __vue_render__ = function () {
     attrs: {
       "label": "Date"
     }
-  }, [_vm._v("\n          Sep 12\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
       "label": "Time"
     }
-  }, [_vm._v("\n          9:07\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
+    attrs: {
+      "filter": _vm.filter
+    },
     model: {
       value: _vm.draftModelValue,
       callback: function ($$v) {
@@ -1159,7 +1225,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-0bec0f54";
+const __vue_scope_id__ = "data-v-4d939067";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/index.js

@@ -21,7 +21,7 @@ export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { _ as OrConfirm } from '../OrConfirm-4d08c38d.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-d548aac0.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-def82ca4.js';
-export { _ as OrDateTimePickerV3 } from '../OrDateTimePicker-11b6d4dd.js';
+export { _ as OrDateTimePickerV3 } from '../OrDateTimePicker-5a379f88.js';
 export { I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, I as SearchSize, I as SelectSize, I as TextareaSize } from '../props-c966ae5f.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-a38727b9.js';
 export { O as OrError } from '../OrError-29f0ce95.js';

package/dist/bundled/v2/components/or-date-time-picker-v3/OrDateTimePicker.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { DateTimePickerSize } from '.';
+import { DateTimePickerSize } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     dateControl: import("@vue/composition-api").Ref<HTMLInputElement | undefined>;
@@ -37,11 +37,19 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggleTimePopover: () => void;
     closeDatePopover: () => void;
     closeTimePopover: () => void;
+    formatDate: (value?: Date) => string;
+    formatTime: (value?: Date) => string;
+    formatDateAlt: (value?: Date) => string;
+    formatTimeAlt: (value?: Date) => string;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: DateConstructor;
         default: undefined;
     };
+    filter: {
+        type: PropType<(value: Date) => boolean>;
+        default: undefined;
+    };
     size: {
         type: PropType<DateTimePickerSize>;
         default: DateTimePickerSize;
@@ -79,6 +87,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: DateConstructor;
         default: undefined;
     };
+    filter: {
+        type: PropType<(value: Date) => boolean>;
+        default: undefined;
+    };
     size: {
         type: PropType<DateTimePickerSize>;
         default: DateTimePickerSize;
@@ -112,6 +124,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: boolean;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    filter: (value: Date) => boolean;
     modelValue: Date;
     size: DateTimePickerSize;
     label: string;
@@ -160,7 +173,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggleTimePopover: () => void;
     closeDatePopover: () => void;
     closeTimePopover: () => void;
+    formatDate: (value?: Date) => string;
+    formatTime: (value?: Date) => string;
+    formatDateAlt: (value?: Date) => string;
+    formatTimeAlt: (value?: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    filter: (value: Date) => boolean;
     modelValue: Date;
     size: DateTimePickerSize;
     label: string;
@@ -173,6 +191,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
+    filter: (value: Date) => boolean;
     modelValue: Date;
     size: DateTimePickerSize;
     label: string;

package/dist/bundled/v2/components/or-date-time-picker-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrDateTimePickerV3 } from '../../OrDateTimePicker-11b6d4dd.js';
+export { _ as OrDateTimePickerV3 } from '../../OrDateTimePicker-5a379f88.js';
 export { I as DateTimePickerSize } from '../../props-c966ae5f.js';
 import '../../index-fa6eb4ca.js';
 import 'vue';

package/dist/bundled/v2/components/or-date-time-picker-v3/partials/or-date-time-picker-day-select/OrDateTimePickerDaySelect.vue.d.ts

@@ -1,3 +1,4 @@
+import { PropType } from 'vue-demi';
 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[]>;
@@ -11,12 +12,21 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: DateConstructor;
         default: undefined;
     };
+    filter: {
+        type: PropType<(value: Date) => boolean>;
+        default: undefined;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: DateConstructor;
         default: undefined;
     };
+    filter: {
+        type: PropType<(value: Date) => boolean>;
+        default: undefined;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    filter: (value: Date) => boolean;
     modelValue: Date;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -29,10 +39,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     dayOptions: import("@vue/composition-api").ComputedRef<Date[]>;
     formatDay: (value: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    filter: (value: Date) => boolean;
     modelValue: Date;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
+    filter: (value: Date) => boolean;
     modelValue: Date;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/or-date-time-picker-v3/partials/or-date-time-picker-month-select/OrDateTimePickerMonthSelect.vue.d.ts

@@ -1,3 +1,4 @@
+import { PropType } from 'vue-demi';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     yearButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
@@ -37,12 +38,21 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: DateConstructor;
         default: undefined;
     };
+    filter: {
+        type: PropType<(value: Date) => boolean>;
+        default: undefined;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: DateConstructor;
         default: undefined;
     };
+    filter: {
+        type: PropType<(value: Date) => boolean>;
+        default: undefined;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    filter: (value: Date) => boolean;
     modelValue: Date;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -81,10 +91,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     formatYear: (value: Date) => string;
     formatMonth: (value: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    filter: (value: Date) => boolean;
     modelValue: Date;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
+    filter: (value: Date) => boolean;
     modelValue: Date;
 }, true>);
 export default _default;

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

@@ -1,3 +1,4 @@
+import { PropType } from 'vue-demi';
 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[]>;
@@ -13,12 +14,21 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: DateConstructor;
         default: undefined;
     };
+    filter: {
+        type: PropType<(value: Date) => boolean>;
+        default: undefined;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: DateConstructor;
         default: undefined;
     };
+    filter: {
+        type: PropType<(value: Date) => boolean>;
+        default: undefined;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    filter: (value: Date) => boolean;
     modelValue: Date;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -33,10 +43,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     formatHours: (value: Date) => string;
     formatMinutes: (value: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    filter: (value: Date) => boolean;
     modelValue: Date;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
+    filter: (value: Date) => boolean;
     modelValue: Date;
 }, true>);
 export default _default;