@onereach/ui-components 6.5.1-beta.3475.0 → 6.5.1-beta.3482.0

package/dist/bundled/v2/{OrDateTimePickerMonthSelect-3f6ce0c2.js → OrDateTimePickerMonthSelect-2bd81295.js}

@@ -21,6 +21,7 @@ const DateTimePickerDateControlPlaceholder = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$2 = defineComponent({
+  name: 'OrDateTimePickerDateControl',
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -121,12 +122,12 @@ const DateTimePickerDateSelectButtonGroup = [
 // Box
 'h-[262px]',
 // Spacing
-'mx-[-2px]', 'my-[-2px]'];
+'gap-xs'];
 const DateTimePickerDateSelectButtonGroupWeekdayItem = [
 // Layout
 'layout-row justify-center',
 // Spacing
-'mx-[2px]', 'my-[2px]', 'px-sm', 'py-sm',
+'px-sm', 'py-sm',
 // Interactivity
 'interactivity-none',
 // Typography
@@ -137,21 +138,15 @@ const DateTimePickerDateSelectButtonGroupDateItem = [
 // Box
 '!min-w-fit',
 // Spacing
-'mx-[2px]', 'my-[2px]', '!px-sm', '!py-sm',
+'!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
   },
@@ -171,14 +166,6 @@ var script$1 = defineComponent({
     dateFilter: {
       type: Function,
       default: undefined
-    },
-    rangeStart: {
-      type: Date,
-      default: undefined
-    },
-    rangeEnd: {
-      type: Date,
-      default: undefined
     }
   },
   emits: ['update:modelValue'],
@@ -192,7 +179,6 @@ 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')
@@ -240,7 +226,6 @@ var script$1 = defineComponent({
       buttonGroupWeekdayItemStyles,
       buttonGroupDateItemStyles,
       buttonGroupCurrentDateItemStyles,
-      buttonGroupInRangeDateItemStyles,
       proxyModelValue,
       dayOptions,
       currentDate,
@@ -272,7 +257,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[_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),
+      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),
       attrs: {
         "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
         "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
@@ -316,6 +301,7 @@ 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-da41a651.js → OrDateTimePickerPopoverHeader-26ec0633.js}

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

package/dist/bundled/v2/{OrDateTimePickerTimeSelect-5efbeec4.js → OrDateTimePickerTimeSelect-3555e247.js}

@@ -18,6 +18,7 @@ const DateTimePickerTimeControlPlaceholder = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$1 = defineComponent({
+  name: 'OrDateTimePickerTimeControl',
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -134,6 +135,7 @@ const DateTimePickerTimeSelectButtonGroupItem = [
 'typography-caption-regular'];
 
 var script = defineComponent({
+  name: 'OrDateTimePickerTimeSelect',
   components: {
     OrButton: __vue_component__$2
   },

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

@@ -41,15 +41,20 @@ var script = defineComponent({
   },
   emits: ['click', 'focus', 'blur'],
   expose: ['root'],
-  setup(props) {
+  setup(props, context) {
     // Refs
     const root = ref();
     // Styles
     const rootStyles = computed(() => ['or-button-v3', ...Button, ...ButtonVariants[props.variant], ...ButtonColors[`${props.color}-${props.variant}`], props.loading && 'interactivity-none']);
+    // Methods
+    function handleClick(e) {
+      context.emit('click', e);
+    }
     return {
       root,
       rootStyles,
-      isVue3
+      isVue3,
+      handleClick
     };
   }
 });
@@ -71,9 +76,7 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   }, Object.assign({}, _vm.isVue3 ? {} : _vm.$listeners, {
-    click: function (e) {
-      return _vm.$emit('click', e);
-    },
+    click: _vm.handleClick,
     focus: function (e) {
       return _vm.$emit('focus', e);
     },

package/dist/bundled/v2/components/OrButtonV3/OrButton.vue.d.ts

@@ -4,6 +4,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     root: import("@vue/composition-api").Ref<HTMLButtonElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | false)[]>;
     isVue3: boolean;
+    handleClick: (e: MouseEvent) => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     type: {
         type: PropType<"button" | "submit" | "reset">;
@@ -76,6 +77,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     root: import("@vue/composition-api").Ref<HTMLButtonElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | false)[]>;
     isVue3: boolean;
+    handleClick: (e: MouseEvent) => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     activated: boolean;
     type: "button" | "submit" | "reset";

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-none', '[&_.or-input-box-v3]:middle-child:rounded-none', '[&_.or-input-box-v3]:last-child:rounded-l-none',
+'[&_.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',
 // 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 { DatePicker, DatePickerPopover } from './styles.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-3f6ce0c2.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-da41a651.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-2bd81295.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-26ec0633.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,6 +17,7 @@ import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
+  name: 'OrDatePicker',
   components: {
     OrDateTimePickerDateControl,
     OrDateTimePickerDateSelect,
@@ -293,8 +294,7 @@ var __vue_render__ = function () {
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Date',
-      "selected": true
+      "label": "Date"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     attrs: {

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-3f6ce0c2.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-da41a651.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-5efbeec4.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-2bd81295.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-26ec0633.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-3555e247.js';
 import { DateTimePickerTimeFormat } from './props.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
@@ -19,6 +19,7 @@ import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
+  name: 'OrDateTimePicker',
   components: {
     OrDateTimePickerDateControl,
     OrDateTimePickerDateSelect,
@@ -380,11 +381,11 @@ var __vue_render__ = function () {
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Date'
+      "label": "Date"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Time'
+      "label": "Time"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     attrs: {
@@ -443,11 +444,11 @@ var __vue_render__ = function () {
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Date'
+      "label": "Date"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Time'
+      "label": "Time"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
     attrs: {

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

@@ -1,7 +1,7 @@
 export { default as OrDateTimePickerV3 } from './OrDateTimePicker.js';
-export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-3f6ce0c2.js';
-export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-da41a651.js';
-export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-5efbeec4.js';
+export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-2bd81295.js';
+export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-26ec0633.js';
+export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-3555e247.js';
 export { DateTimePickerTimeFormat } from './props.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 export { formatDate } from './utils/formatDate.js';

package/dist/bundled/v2/components/OrInputBoxV3/OrInputBox.js

@@ -104,6 +104,7 @@ var script = defineComponent({
     }
   },
   expose: ['root'],
+  emits: ['focus'],
   setup(props) {
     // Refs
     const root = ref();
@@ -131,6 +132,11 @@ var __vue_render__ = function () {
       "invalid": _vm.invalid ? '' : null,
       "readonly": _vm.readonly ? '' : null,
       "disabled": _vm.disabled ? '' : null
+    },
+    on: {
+      "focus": function ($event) {
+        return _vm.$emit('focus');
+      }
     }
   }, [_vm._t("default"), _vm._v(" "), _vm.$slots.addon ? [_c('OrInputBoxAddon', {
     attrs: {

package/dist/bundled/v2/components/OrInputBoxV3/OrInputBox.vue.d.ts

@@ -51,16 +51,20 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     invalid: boolean;
     readonly: boolean;
     disabled: boolean;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+} & {} & {
+    [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[]>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     variant: "styled" | "unstyled";
     size: "m" | "s";
     invalid: boolean;
     readonly: boolean;
     disabled: boolean;
-} & {}, {
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
     variant: "styled" | "unstyled";
     size: "m" | "s";
     invalid: boolean;

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

@@ -16,13 +16,13 @@ const InputBoxVariants = {
   // Theme
   'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark', 'theme-outline-2-transparent', 'dark:theme-outline-2-transparent',
   // Theme (focus)
-  'focus-within:theme-background-primary-translucent-1', 'dark:focus-within:theme-background-primary-translucent-1-dark', 'focus-within:theme-border-1-primary', 'dark:focus-within:theme-border-1-primary-dark', 'focus-within:theme-outline-2-primary', 'dark:focus-within:theme-outline-2-primary-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-2-primary', 'dark:focus-within:theme-outline-2-primary-dark',
   // Theme (read-only)
-  'read-only:theme-background-primary-translucent-1', 'dark:read-only:theme-background-primary-translucent-1-dark', 'read-only:!border-transparent', 'dark:read-only:!border-transparent',
+  'read-only:theme-background-primary-translucent', 'dark:read-only:theme-background-primary-translucent-dark', 'read-only:!border-transparent', 'dark:read-only:!border-transparent',
   // Theme (invalid)
-  'invalid:theme-preset-3-error', 'dark:invalid:theme-preset-3-error-dark', 'invalid:theme-background-error-translucent-1', 'dark:invalid:theme-background-error-translucent-1-dark', 'invalid:theme-foreground-default', 'dark:invalid:theme-foreground-default-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:theme-outline-2-transparent', 'dark:invalid:theme-outline-2-transparent',
+  'invalid:theme-preset-3-error', 'dark:invalid:theme-preset-3-error-dark', 'invalid:theme-background-error-translucent', 'dark:invalid:theme-background-error-translucent-dark', 'invalid:theme-foreground-default', 'dark:invalid:theme-foreground-default-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:theme-outline-2-transparent', 'dark:invalid:theme-outline-2-transparent',
   // Theme (invalid, focus)
-  'invalid:focus-within:theme-background-error-translucent-1', 'dark:invalid:focus-within:theme-background-error-translucent-1-dark', 'invalid:focus-within:theme-border-1-error', 'dark:invalid:focus-within:theme-border-1-error-dark', 'invalid:focus-within:theme-outline-2-error', 'dark:invalid:focus-within:theme-outline-2-error-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-2-error', 'dark:invalid:focus-within:theme-outline-2-error-dark',
   // Theme (invalid, read-only)
   'invalid:read-only:bg-error-opacity-0-08', 'dark:invalid:read-only:bg-error-opacity-0-08-dark', 'invalid:read-only:!border-transparent', 'dark:invalid:read-only:!border-transparent'],
   [InputBoxVariant.Unstyled]: [

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

@@ -1,6 +1,6 @@
 const EditorContainer = [
 // Colors
-'border-outline', 'focus-within:theme-background-primary-translucent-1', 'focus-within:theme-border-1-primary', 'focus-within:theme-outline-2-primary',
+'border-outline', 'focus-within:theme-background-primary-translucent', 'focus-within:theme-border-1-primary', 'focus-within:theme-outline-2-primary',
 // Sizing
 'border-1', 'rounded-md', 'w-full'];
 const ToolbarContainer = [

package/dist/bundled/v2/components/OrSelectV3/OrSelect.js

@@ -401,7 +401,7 @@ var __vue_render__ = function () {
       expression: "close"
     }],
     ref: "inputBox",
-    class: [_vm.popoverState === 'open' && (_vm.popover.isFlipped ? 'rounded-t-none' : 'rounded-b-none')],
+    class: [_vm.popoverState === 'open' && (_vm.popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')],
     attrs: {
       "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
       "size": _vm.size,