@onereach/ui-components 7.0.1 → 7.0.2-beta.3544.0

package/dist/bundled/v2/{OrDateTimePickerMonthSelect-0dfe417f.js → OrDateTimePickerMonthSelect-0e7f761d.js}

@@ -21,7 +21,6 @@ const DateTimePickerDateControlPlaceholder = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$2 = defineComponent({
-  name: 'OrDateTimePickerDateControl',
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -122,14 +121,14 @@ const DateTimePickerDateSelectButtonGroup = [
 // Box
 'h-[262px]',
 // Spacing
-'gap-xs'];
+'mx-[-2px]', 'my-[-2px]'];
 const DateTimePickerDateSelectButtonGroupWeekdayItem = [
 // Layout
 'layout-row justify-center',
 // Interactivity
 'interactivity-default',
 // Spacing
-'px-sm', 'py-sm',
+'mx-[2px]', 'my-[2px]', 'px-sm', 'py-sm',
 // Typography
 'typography-caption-regular',
 // Theme
@@ -138,15 +137,21 @@ const DateTimePickerDateSelectButtonGroupDateItem = [
 // Box
 '!min-w-fit',
 // Spacing
-'!px-sm', '!py-sm',
+'mx-[2px]', 'my-[2px]', '!px-sm', '!py-sm',
 // Typography
 'typography-caption-regular'];
 const DateTimePickerDateSelectButtonGroupCurrentDateItem = [
 // Theme
 'theme-foreground-primary', 'dark:theme-foreground-primary-dark', 'theme-outline-1-primary', 'dark:theme-outline-1-primary-dark'];
+const DateTimePickerDateSelectButtonGroupInRangeDateItem = [
+// Spacing
+'!mx-none', '!px-[10px]',
+// Shape
+'!rounded-none',
+// Theme
+'theme-background-primary-translucent-2', 'dark:theme-background-primary-translucent-2-dark'];
 
 var script$1 = defineComponent({
-  name: 'OrDateTimePickerDateSelect',
   components: {
     OrButton: __vue_component__$3
   },
@@ -166,6 +171,14 @@ var script$1 = defineComponent({
     dateFilter: {
       type: Function,
       default: undefined
+    },
+    rangeStart: {
+      type: Date,
+      default: undefined
+    },
+    rangeEnd: {
+      type: Date,
+      default: undefined
     }
   },
   emits: ['update:modelValue'],
@@ -179,13 +192,12 @@ var script$1 = defineComponent({
     const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupWeekdayItem]);
     const buttonGroupDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupDateItem]);
     const buttonGroupCurrentDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupCurrentDateItem]);
+    const buttonGroupInRangeDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupInRangeDateItem]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue')
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const dayOptions = computed(() => {
-      const monthStartDate = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), 1, proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
-      const monthEndDate = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() + 1, 0, proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
+      const monthStartDate = new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth(), 1, props.initialValue.getUTCHours(), props.initialValue.getUTCMinutes()));
+      const monthEndDate = new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth() + 1, 0, props.initialValue.getUTCHours(), props.initialValue.getUTCMinutes()));
       const calendarStartDate = new Date(Date.UTC(monthStartDate.getUTCFullYear(), monthStartDate.getUTCMonth(), 1 - monthStartDate.getUTCDay(), monthStartDate.getUTCHours(), monthStartDate.getUTCMinutes()));
       const calendarEndDate = new Date(Date.UTC(monthEndDate.getUTCFullYear(), monthEndDate.getUTCMonth() + 1, 7 - monthEndDate.getUTCDay(), monthEndDate.getUTCHours(), monthEndDate.getUTCMinutes()));
       return (() => {
@@ -200,10 +212,10 @@ var script$1 = defineComponent({
     });
     const currentDate = computed(() => {
       const value = new Date();
-      value.setUTCHours(proxyModelValue.value.getUTCHours());
-      value.setUTCMinutes(proxyModelValue.value.getUTCMinutes());
-      value.setUTCSeconds(proxyModelValue.value.getUTCSeconds());
-      value.setUTCMilliseconds(proxyModelValue.value.getUTCMilliseconds());
+      value.setUTCHours(props.initialValue.getUTCHours());
+      value.setUTCMinutes(props.initialValue.getUTCMinutes());
+      value.setUTCSeconds(props.initialValue.getUTCSeconds());
+      value.setUTCMilliseconds(props.initialValue.getUTCMilliseconds());
       return value;
     });
     // Methods
@@ -226,6 +238,7 @@ var script$1 = defineComponent({
       buttonGroupWeekdayItemStyles,
       buttonGroupDateItemStyles,
       buttonGroupCurrentDateItemStyles,
+      buttonGroupInRangeDateItemStyles,
       proxyModelValue,
       dayOptions,
       currentDate,
@@ -257,10 +270,10 @@ var __vue_render__$1 = function () {
     var _obj;
     return _c('OrButton', {
       key: Number(value),
-      class: (_obj = {}, _obj[_vm.buttonGroupDateItemStyles.join(' ')] = true, _obj[_vm.buttonGroupCurrentDateItemStyles.join(' ')] = Number(value) === Number(_vm.currentDate) && Number(value) !== Number(_vm.proxyModelValue), _obj['invisible'] = value.getUTCMonth() !== _vm.proxyModelValue.getUTCMonth(), _obj),
+      class: (_obj = {}, _obj[_vm.buttonGroupDateItemStyles.join(' ')] = true, _obj[_vm.buttonGroupCurrentDateItemStyles.join(' ')] = Number(value) === Number(_vm.currentDate) && Number(value) !== Number(_vm.proxyModelValue), _obj[_vm.buttonGroupInRangeDateItemStyles.join(' ')] = _vm.rangeStart && Number(value) > Number(_vm.rangeStart) && _vm.rangeEnd && Number(value) < Number(_vm.rangeEnd), _obj),
       attrs: {
-        "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
-        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
+        "variant": Number(value) === Number(_vm.proxyModelValue) || _vm.rangeStart && Number(value) === Number(_vm.rangeStart) || _vm.rangeEnd && Number(value) === Number(_vm.rangeEnd) ? 'contained' : 'text',
+        "color": Number(value) === Number(_vm.proxyModelValue) || _vm.rangeStart && Number(value) === Number(_vm.rangeStart) || _vm.rangeEnd && Number(value) === Number(_vm.rangeEnd) ? 'primary' : 'inherit',
         "disabled": _vm.dateFilter && !_vm.dateFilter(value)
       },
       on: {
@@ -301,7 +314,6 @@ const DateTimePickerMonthSelect = [
 'px-md', 'py-md', 'gap-md'];
 
 var script = defineComponent({
-  name: 'OrDateTimePickerMonthSelect',
   components: {
     OrButton: __vue_component__$3,
     OrIcon: __vue_component__$4,
@@ -315,10 +327,6 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
-      default: undefined
-    },
-    initialValue: {
       type: Date,
       required: true
     },
@@ -359,9 +367,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue')
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const yearOptions = computed(() => {
       return Array.from({
         length: 11

package/dist/bundled/v2/{OrDateTimePickerPopoverHeader-20b13137.js → OrDateTimePickerPopoverHeader-ce85f482.js}

@@ -6,16 +6,19 @@ import __vue_component__$4 from './components/OrButtonV3/OrButton.js';
 const DateTimePickerMobileControl = [
 // Layout
 'layout-column',
+// Interactivity
+'interactivity-auto',
 // Spacing
-'gap-xs'];
+'gap-xs',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
+// Theme (selected)
+'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark'];
 const DateTimePickerMobileControlContent = [
 // Typography
-'typography-headline-1',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+'typography-headline-1'];
 
 var script$2 = defineComponent({
-  name: 'OrDateTimePickerMobileControl',
   components: {
     OrLabel: __vue_component__$3
   },
@@ -23,6 +26,10 @@ var script$2 = defineComponent({
     label: {
       type: String,
       required: true
+    },
+    selected: {
+      type: Boolean,
+      default: false
     }
   },
   expose: ['root'],
@@ -50,7 +57,10 @@ var __vue_render__$2 = function () {
   var _c = _vm._self._c || _h;
   return _c('div', {
     ref: "root",
-    class: _vm.rootStyles
+    class: _vm.rootStyles,
+    attrs: {
+      "selected": _vm.selected ? '' : null
+    }
   }, [_c('OrLabel', [_vm._v(_vm._s(_vm.label))]), _vm._v(" "), _c('div', {
     class: _vm.contentStyles
   }, [_vm._t("default")], 2)], 1);
@@ -88,7 +98,6 @@ const DateTimePickerPopoverFooter = [
 'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark', 'theme-border-overline'];
 
 var script$1 = defineComponent({
-  name: 'OrDateTimePickerPopoverFooter',
   components: {
     OrButton: __vue_component__$4
   },
@@ -175,7 +184,6 @@ const DateTimePickerPopoverHeader = [
 'px-md', 'py-md', 'gap-xl'];
 
 var script = defineComponent({
-  name: 'OrDateTimePickerPopoverHeader',
   expose: ['root'],
   setup() {
     // Refs

package/dist/bundled/v2/{OrDateTimePickerTimeSelect-02a369fb.js → OrDateTimePickerTimeSelect-3e985657.js}

@@ -18,7 +18,6 @@ const DateTimePickerTimeControlPlaceholder = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$1 = defineComponent({
-  name: 'OrDateTimePickerTimeControl',
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -135,7 +134,6 @@ const DateTimePickerTimeSelectButtonGroupItem = [
 'typography-caption-regular'];
 
 var script = defineComponent({
-  name: 'OrDateTimePickerTimeSelect',
   components: {
     OrButton: __vue_component__$2
   },
@@ -175,9 +173,7 @@ var script = defineComponent({
     const buttonGroupStyles = computed(() => [...DateTimePickerTimeSelectButtonGroup]);
     const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue')
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const proxyTimeFormat = computed(() => {
       if (props.format === DateTimePickerTimeFormat.Auto) {
         const timeSample = new Date(1970, 0);
@@ -188,14 +184,14 @@ var script = defineComponent({
       }
       return props.format;
     });
-    const hoursRange = ref(proxyModelValue.value.getUTCHours() < 12 ? 'am' : 'pm');
+    const hoursRange = ref(props.initialValue.getUTCHours() < 12 ? 'am' : 'pm');
     watch(hoursRange, value => {
       switch (value) {
         case 'am':
-          proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours() - 12, proxyModelValue.value.getUTCMinutes()));
+          proxyModelValue.value = new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth(), props.initialValue.getUTCDate(), props.initialValue.getUTCHours() - 12, props.initialValue.getUTCMinutes()));
           break;
         case 'pm':
-          proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours() + 12, proxyModelValue.value.getUTCMinutes()));
+          proxyModelValue.value = new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth(), props.initialValue.getUTCDate(), props.initialValue.getUTCHours() + 12, props.initialValue.getUTCMinutes()));
           break;
       }
     });
@@ -204,7 +200,7 @@ var script = defineComponent({
         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()));
+        return new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth(), props.initialValue.getUTCDate(), value, props.initialValue.getUTCMinutes()));
       }).filter(value => {
         if (proxyTimeFormat.value === DateTimePickerTimeFormat.H23) {
           return true;
@@ -222,7 +218,7 @@ var script = defineComponent({
         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));
+        return new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth(), props.initialValue.getUTCDate(), props.initialValue.getUTCHours(), value));
       });
     });
     // Methods

package/dist/bundled/v2/components/OrCombinedInputV3/styles.js

@@ -9,7 +9,7 @@ const CombinedInputControlGroup = [
 // Box
 'w-full',
 // Shape (.or-input-box-v3)
-'[&_.or-input-box-v3]:first-child:rounded-r-0', '[&_.or-input-box-v3]:middle-child:rounded-0', '[&_.or-input-box-v3]:last-child:rounded-l-0',
+'[&_.or-input-box-v3]:first-child:rounded-r-none', '[&_.or-input-box-v3]:middle-child:rounded-none', '[&_.or-input-box-v3]:last-child:rounded-l-none',
 // Spacing (.or-input-box-v3)
 '[&_.or-input-box-v3]:first-child:mr-[-1px]', '[&_.or-input-box-v3]:middle-child:border-x-0', '[&_.or-input-box-v3]:last-child:ml-[-1px]'];
 

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,7 +1,7 @@
-import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
+import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
 import { DatePicker, DatePickerPopover } from './styles.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-0dfe417f.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-20b13137.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-0e7f761d.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-ce85f482.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
 import __vue_component__$3 from '../OrIconV3/OrIcon.js';
@@ -17,7 +17,6 @@ import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
-  name: 'OrDatePicker',
   components: {
     OrDateTimePickerDateControl,
     OrDateTimePickerDateSelect,
@@ -94,6 +93,7 @@ var script = defineComponent({
   emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
+    var _a;
     // Refs
     const root = ref();
     const inputBox = ref();
@@ -110,7 +110,10 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-date-picker-v3', ...DatePicker]);
     const popoverStyles = computed(() => [...DatePickerPopover]);
     // State
-    const initialModelValue = getCurrentDate();
+    const initialValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : getCurrentDate());
+    watch(() => props.modelValue, value => {
+      initialValue.value = value !== null && value !== void 0 ? value : getCurrentDate();
+    });
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draftModelValue = ref(proxyModelValue.value);
     watch(proxyModelValue, value => {
@@ -133,20 +136,16 @@ var script = defineComponent({
     // Methods
     function apply() {
       var _a;
-      proxyModelValue.value = (_a = draftModelValue.value) !== null && _a !== void 0 ? _a : initialModelValue;
+      proxyModelValue.value = (_a = draftModelValue.value) !== null && _a !== void 0 ? _a : initialValue.value;
     }
     function reset() {
       draftModelValue.value = proxyModelValue.value;
     }
-    function togglePopover() {
+    function openPopover() {
       if (!props.readonly && !props.disabled) {
         const popoverInstance = popover.value;
         if (popoverInstance) {
-          if (popoverState.value === 'open') {
-            popoverInstance.close();
-          } else {
-            popoverInstance.open();
-          }
+          popoverInstance.open();
         }
       }
     }
@@ -171,13 +170,13 @@ var script = defineComponent({
       popoverState,
       rootStyles,
       popoverStyles,
-      initialModelValue,
+      initialValue,
       proxyModelValue,
       draftModelValue,
       isInvalidDraftModelValue,
       apply,
       reset,
-      togglePopover,
+      openPopover,
       closePopover,
       formatDateAlt
     };
@@ -212,8 +211,8 @@ var __vue_render__ = function () {
     directives: [{
       name: "dropdown-open",
       rawName: "v-dropdown-open",
-      value: _vm.togglePopover,
-      expression: "togglePopover"
+      value: _vm.openPopover,
+      expression: "openPopover"
     }, {
       name: "dropdown-close",
       rawName: "v-dropdown-close",
@@ -256,8 +255,8 @@ var __vue_render__ = function () {
     directives: [{
       name: "dropdown-open",
       rawName: "v-dropdown-open",
-      value: _vm.togglePopover,
-      expression: "togglePopover"
+      value: _vm.openPopover,
+      expression: "openPopover"
     }, {
       name: "dropdown-close",
       rawName: "v-dropdown-close",
@@ -294,24 +293,24 @@ var __vue_render__ = function () {
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": "Date"
+      "label": 'Date',
+      "selected": true
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     attrs: {
-      "initial-value": _vm.initialModelValue,
       "year-filter": _vm.yearFilter,
       "month-filter": _vm.monthFilter
     },
     model: {
-      value: _vm.draftModelValue,
+      value: _vm.initialValue,
       callback: function ($$v) {
-        _vm.draftModelValue = $$v;
+        _vm.initialValue = $$v;
       },
-      expression: "draftModelValue"
+      expression: "initialValue"
     }
   }), _vm._v(" "), _c('OrDateTimePickerDateSelect', {
     attrs: {
-      "initial-value": _vm.initialModelValue,
+      "initial-value": _vm.initialValue,
       "date-filter": _vm.dateFilter
     },
     model: {

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.vue.d.ts

@@ -17,13 +17,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     popoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    initialModelValue: Date;
+    initialValue: import("@vue/composition-api").Ref<Date>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<Date>;
     draftModelValue: import("@vue/composition-api").Ref<Date>;
     isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
-    togglePopover: () => void;
+    openPopover: () => void;
     closePopover: () => void;
     formatDateAlt: (value?: Date) => string;
 }> & import("@vue/composition-api").Data, {}, {}, {
@@ -155,13 +155,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     popoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    initialModelValue: Date;
+    initialValue: import("@vue/composition-api").Ref<Date>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<Date>;
     draftModelValue: import("@vue/composition-api").Ref<Date>;
     isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
-    togglePopover: () => void;
+    openPopover: () => void;
     closePopover: () => void;
     formatDateAlt: (value?: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {