@onereach/ui-components 6.6.2-beta.3514.0 → 6.6.2-beta.3522.0

package/dist/bundled/v2/{OrDateTimePickerMonthSelect-06eb6ce3.js → OrDateTimePickerMonthSelect-dbfc9103.js}

@@ -13,7 +13,7 @@ const DateTimePickerDateControl = [
 // Layout
 'layout-inline-row',
 // Interactivity
-'interactivity-click',
+'interactivity-auto',
 // Theme (focus)
 'focus-visible:theme-border-2-inherit', 'dark:focus-visible:theme-border-2-inherit-dark', 'focus-visible:theme-border-underline'];
 const DateTimePickerDateControlPlaceholder = [
@@ -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',
+// Interactivity
+'interactivity-none',
 // 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,6 +192,7 @@ 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')
@@ -226,6 +240,7 @@ var script$1 = defineComponent({
       buttonGroupWeekdayItemStyles,
       buttonGroupDateItemStyles,
       buttonGroupCurrentDateItemStyles,
+      buttonGroupInRangeDateItemStyles,
       proxyModelValue,
       dayOptions,
       currentDate,
@@ -257,7 +272,7 @@ 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['invisible'] = value.getUTCMonth() !== _vm.proxyModelValue.getUTCMonth(), _obj),
       attrs: {
         "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
         "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
@@ -301,7 +316,6 @@ const DateTimePickerMonthSelect = [
 'px-md', 'py-md', 'gap-md'];
 
 var script = defineComponent({
-  name: 'OrDateTimePickerMonthSelect',
   components: {
     OrButton: __vue_component__$3,
     OrIcon: __vue_component__$4,

package/dist/bundled/v2/{OrDateTimePickerPopoverHeader-fceb3125.js → OrDateTimePickerPopoverHeader-da41a651.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-5ebd3f35.js → OrDateTimePickerTimeSelect-5efbeec4.js}

@@ -10,7 +10,7 @@ const DateTimePickerTimeControl = [
 // Layout
 'layout-inline-row',
 // Interactivity
-'interactivity-click',
+'interactivity-auto',
 // Theme (focus)
 'focus-visible:theme-border-2-inherit', 'dark:focus-visible:theme-border-2-inherit-dark', 'focus-visible:theme-border-underline'];
 const DateTimePickerTimeControlPlaceholder = [
@@ -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
   },

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

@@ -6,7 +6,7 @@ const Avatar = [
 // Overflow
 'overflow-hidden',
 // Interactivity
-'interactivity-default',
+'interactivity-none',
 // Shape
 'rounded-full'];
 const AvatarSizes = {

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

@@ -25,7 +25,7 @@ const BottomSheetHandle = [
 // Layout
 'layout-row justify-center',
 // Interactivity
-'interactivity-drag',
+'interactivity-auto !cursor-grab',
 // Box
 'after:w-2xl', 'after:h-xs',
 // Spacing

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

@@ -6,7 +6,7 @@ const Button = [
 // Overflow
 'overflow-hidden',
 // Interactivity
-'interactivity-click',
+'interactivity-auto',
 // Shape
 'rounded-md',
 // Typography

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

@@ -11,7 +11,7 @@ const CheckboxControl = [
 // Shape
 'rounded-sm',
 // Interactivity
-'interactivity-click',
+'interactivity-auto',
 // Iconography
 'iconography-outlined',
 // Theme

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/OrContextMenuV3/props.d.ts

@@ -1,2 +1 @@
-export { MenuPlacement as ContextMenuPlacement } from '../or-menu-v3';
-export type { MenuOffset as ContextMenuOffset } from '../or-menu-v3';
+export { MenuOffset as ContextMenuOffset, MenuPlacement as ContextMenuPlacement } from '../or-menu-v3';

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

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { DatePicker, DatePickerPopover } from './styles.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-06eb6ce3.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-fceb3125.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-dbfc9103.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-da41a651.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,
@@ -138,15 +137,11 @@ var script = defineComponent({
     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();
         }
       }
     }
@@ -177,7 +172,7 @@ var script = defineComponent({
       isInvalidDraftModelValue,
       apply,
       reset,
-      togglePopover,
+      openPopover,
       closePopover,
       formatDateAlt
     };
@@ -212,8 +207,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 +251,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,7 +289,8 @@ 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: {

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

@@ -23,7 +23,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     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, {}, {}, {
@@ -161,7 +161,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     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[], {