@onereach/ui-components 8.4.0 → 8.4.1-beta.3657.0

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

@@ -1,6 +1,6 @@
 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-c7ea6517.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-7e3ffd97.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-13a1f9e3.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';

package/dist/bundled/v2/components/OrDateRangePickerV3/OrDateRangePicker.js

@@ -8,7 +8,7 @@ import __vue_component__$5 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$6 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$7 from '../OrPopoverV3/OrPopover.js';
 import { getNextMonthDate } from '../OrDateTimePickerV3/utils/getNextMonthDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-c7ea6517.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-7e3ffd97.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-13a1f9e3.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';

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

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-c7ea6517.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-7e3ffd97.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-13a1f9e3.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-7ce1b97d.js';
 import { DateTimePickerTimeFormat } from './props.js';

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

@@ -1,5 +1,5 @@
 export { default as OrDateTimePickerV3 } from './OrDateTimePicker.js';
-export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-c7ea6517.js';
+export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-7e3ffd97.js';
 export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-13a1f9e3.js';
 export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-7ce1b97d.js';
 export { DateTimePickerTimeFormat } from './props.js';

package/dist/bundled/v2/components/OrMenuItemV3/OrMenuItem.js

@@ -49,8 +49,8 @@ var __vue_render__ = function () {
     class: _vm.rootStyles,
     attrs: {
       "tabindex": !_vm.disabled ? 0 : null,
-      "selected": _vm.selected ? '' : null,
-      "disabled": _vm.disabled ? '' : null
+      "selected": _vm.selected,
+      "disabled": _vm.disabled
     },
     on: {
       "click": function ($event) {

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

@@ -11,11 +11,11 @@ const MenuItemRoot = [
 'selected:typography-body-2-semibold selected:md:typography-caption-semibold',
 // Theme
 'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
+// Theme (selected)
+'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark',
 // Theme (hover)
 'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
 // Theme (active)
-'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark',
-// Theme (selected)
-'selected:theme-foreground-default dark:selected:theme-foreground-default-dark'];
+'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark'];
 
 export { MenuItemRoot };

package/dist/bundled/v2/components/OrTabV3/OrTab.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { TabRoot } from './styles.js';
+import { Tab } from './styles.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
@@ -8,6 +8,14 @@ var script = defineComponent({
     selected: {
       type: Boolean,
       default: false
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['click', 'focus', 'blur'],
@@ -16,7 +24,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-tab-v3', ...TabRoot]);
+    const rootStyles = computed(() => ['or-tab-v3', ...Tab]);
     return {
       root,
       rootStyles
@@ -37,7 +45,9 @@ var __vue_render__ = function () {
     class: _vm.rootStyles,
     attrs: {
       "tabindex": 0,
-      "selected": _vm.selected ? '' : null
+      "selected": _vm.selected,
+      "invalid": _vm.invalid,
+      "disabled": _vm.disabled
     },
     on: {
       "click": function ($event) {

package/dist/bundled/v2/components/OrTabV3/OrTab.vue.d.ts

@@ -6,13 +6,31 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     selected: {
         type: BooleanConstructor;
         default: boolean;
     };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     selected: boolean;
+    invalid: boolean;
+    disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -20,9 +38,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     selected: boolean;
+    invalid: boolean;
+    disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     selected: boolean;
+    invalid: boolean;
+    disabled: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrTabV3/styles.d.ts

@@ -1 +1 @@
-export declare const TabRoot: string[];
+export declare const Tab: string[];

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

@@ -1,19 +1,25 @@
-const TabRoot = [
+const Tab = [
 // Layout
 'layout-inline-row justify-center',
 // Spacing
-'py-[6px]',
+'py-[6px]', 'mb-[-1px]',
 // Interactivity
 'interactivity-click',
 // Typography
 'typography-body-2-bold',
 // Theme
 'theme-foreground-secondary', 'dark:theme-foreground-secondary-dark', 'theme-border-underline', 'theme-border-2-transparent', 'dark:theme-border-2-transparent',
+// Theme (selected)
+'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark', 'selected:theme-border-underline', 'selected:theme-border-2-current', 'dark:selected:theme-border-2-current',
+// Theme (invalid)
+'invalid:theme-foreground-error', 'dark:invalid:theme-foreground-error-dark',
 // Theme (hover)
 'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
+// Theme (hover, invalid)
+'hover:invalid:md:theme-foreground-error-hover', 'dark:hover:invalid:md:theme-foreground-error-hover-dark',
 // Theme (active)
 'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark', 'active:theme-border-underline', 'active:theme-border-2-current', 'dark:active:theme-border-2-current',
-// Theme (selected)
-'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark', 'selected:theme-border-underline', 'selected:theme-border-2-current', 'dark:selected:theme-border-2-current'];
+// Theme (active, invalid)
+'active:invalid:theme-foreground-error', 'dark:active:invalid:theme-foreground-error-dark', 'active:invalid:theme-border-underline', 'active:invalid:theme-border-2-current', 'dark:active:invalid:theme-border-2-current'];
 
-export { TabRoot };
+export { Tab };

package/dist/bundled/v2/components/OrTabsV3/OrTabs.js

@@ -1,7 +1,7 @@
 import { f as useResizeObserver } from '../../index-c1efbf6a.js';
 import { defineComponent, ref, computed, reactive, toRef, watch, nextTick, onMounted } from 'vue-demi';
 import { TabsVariant } from './props.js';
-import { TabsRoot, TabsRootVariants, TabsContainer, TabsContent } from './styles.js';
+import { TabsContainer, Tabs, TabsVariants, TabsContent } from './styles.js';
 import __vue_component__$1 from '../OrIconV3/OrIcon.js';
 import __vue_component__$2 from '../OrMenuV3/OrMenu.js';
 import __vue_component__$3 from '../OrMenuItemV3/OrMenuItem.js';
@@ -23,13 +23,21 @@ var script = defineComponent({
     event: 'update:modelValue'
   },
   props: {
+    modelValue: {
+      type: [String, Number],
+      default: undefined
+    },
     items: {
       type: Array,
       required: true
     },
-    modelValue: {
-      type: [String, Number],
-      default: undefined
+    invalidItems: {
+      type: Array,
+      default: () => []
+    },
+    disabledItems: {
+      type: Array,
+      default: () => []
     },
     variant: {
       type: String,
@@ -52,8 +60,8 @@ var script = defineComponent({
       return (_a = overflowMenu.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     // Styles
-    const rootStyles = computed(() => ['or-tabs-v3', ...TabsRoot, ...TabsRootVariants[props.variant]]);
     const containerStyles = computed(() => [...TabsContainer]);
+    const rootStyles = computed(() => ['or-tabs-v3', ...Tabs, ...TabsVariants[props.variant]]);
     const contentStyles = computed(() => [...TabsContent]);
     // State
     const tabs = reactive({
@@ -68,6 +76,11 @@ var script = defineComponent({
       return value === proxyModelValue.value;
     }));
     // Methods
+    function selectTab(tab) {
+      if (!props.disabledItems.includes(tab.value)) {
+        proxyModelValue.value = tab.value;
+      }
+    }
     function rearrangeTabs(items, activeTab, rootElement) {
       const {
         children
@@ -118,12 +131,13 @@ var script = defineComponent({
       overflowTabRoot,
       overflowMenu,
       overflowMenuRoot,
-      rootStyles,
       containerStyles,
+      rootStyles,
       contentStyles,
       tabs,
       proxyModelValue,
-      activeTab
+      activeTab,
+      selectTab
     };
   }
 });
@@ -145,12 +159,14 @@ var __vue_render__ = function () {
     return _c('OrTab', {
       key: tab.value,
       attrs: {
-        "selected": tab.value === _vm.proxyModelValue
+        "selected": tab.value === _vm.proxyModelValue,
+        "invalid": _vm.invalidItems.includes(tab.value),
+        "disabled": _vm.disabledItems.includes(tab.value)
       },
       on: {
         "click": function ($event) {
           $event.stopPropagation();
-          _vm.proxyModelValue = tab.value;
+          return _vm.selectTab(tab);
         }
       }
     }, [_vm._t("tab", function () {
@@ -180,10 +196,13 @@ var __vue_render__ = function () {
   }, _vm._l(_vm.tabs.hidden, function (tab) {
     return _c('OrMenuItem', {
       key: tab.value,
+      attrs: {
+        "disabled": _vm.disabledItems.includes(tab.value)
+      },
       on: {
         "click": function ($event) {
           $event.stopPropagation();
-          _vm.proxyModelValue = tab.value;
+          _vm.selectTab(tab);
           _vm.overflowMenu && _vm.overflowMenu.close();
         }
       }

package/dist/bundled/v2/components/OrTabsV3/OrTabs.vue.d.ts

@@ -15,8 +15,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     overflowMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     tabs: {
         normal: {
@@ -30,27 +30,44 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number>;
     activeTab: import("@vue/composition-api").ComputedRef<TabsItem>;
+    selectTab: (tab: TabsItem) => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     items: {
         type: PropType<TabsItem[]>;
         required: true;
     };
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
+    invalidItems: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
+    };
+    disabledItems: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
     };
     variant: {
         type: PropType<"default" | "fitted">;
         default: TabsVariant;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     items: {
         type: PropType<TabsItem[]>;
         required: true;
     };
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
+    invalidItems: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
+    };
+    disabledItems: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
     };
     variant: {
         type: PropType<"default" | "fitted">;
@@ -59,6 +76,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: string | number;
     items: TabsItem[];
+    invalidItems: (string | number)[];
+    disabledItems: (string | number)[];
     variant: "default" | "fitted";
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -76,8 +95,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     overflowMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     tabs: {
         normal: {
@@ -91,14 +110,19 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number>;
     activeTab: import("@vue/composition-api").ComputedRef<TabsItem>;
+    selectTab: (tab: TabsItem) => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string | number;
     items: TabsItem[];
+    invalidItems: (string | number)[];
+    disabledItems: (string | number)[];
     variant: "default" | "fitted";
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string | number;
+    invalidItems: (string | number)[];
+    disabledItems: (string | number)[];
     variant: "default" | "fitted";
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrTabsV3/styles.d.ts

@@ -1,5 +1,5 @@
 import { TabsVariant } from './props';
-export declare const TabsRoot: string[];
-export declare const TabsRootVariants: Record<TabsVariant, string[]>;
 export declare const TabsContainer: string[];
+export declare const Tabs: string[];
+export declare const TabsVariants: Record<TabsVariant, string[]>;
 export declare const TabsContent: string[];

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

@@ -1,4 +1,11 @@
-const TabsRoot = [
+const TabsContainer = [
+// Layout
+'layout-column',
+// Box
+'h-full',
+// Spacing
+'gap-lg'];
+const Tabs = [
 // Layout
 'grid', 'grid-flow-col', 'items-center',
 // Box
@@ -7,7 +14,7 @@ const TabsRoot = [
 'gap-lg',
 // Theme
 'theme-border-underline', 'theme-border-1-outline', 'dark:theme-border-1-outline'];
-const TabsRootVariants = {
+const TabsVariants = {
   'default': [
   // Layout
   'auto-cols-max'],
@@ -15,17 +22,10 @@ const TabsRootVariants = {
   // Layout
   'auto-cols-auto']
 };
-const TabsContainer = [
-// Layout
-'layout-column',
-// Box
-'h-full',
-// Spacing
-'gap-lg'];
 const TabsContent = [
 // Layout
 'grow',
 // box
 'h-full', 'overflow-auto'];
 
-export { TabsContainer, TabsContent, TabsRoot, TabsRootVariants };
+export { Tabs, TabsContainer, TabsContent, TabsVariants };

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

@@ -52,7 +52,7 @@ export { default as OrDateTimeFormatV3 } from './OrDateTimeFormatV3/OrDateTimeFo
 export { default as OrDateTimePicker } from './OrDateTimePicker/OrDateTimePicker.js';
 export { DEFAULT_TEXT, OrDateTimePickerItemTypes, OrDateTimePickerTypes } from './OrDateTimePicker/constants.js';
 export { default as OrDateTimePickerV3 } from './OrDateTimePickerV3/OrDateTimePicker.js';
-export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../OrDateTimePickerMonthSelect-c7ea6517.js';
+export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../OrDateTimePickerMonthSelect-7e3ffd97.js';
 export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../OrDateTimePickerPopoverHeader-13a1f9e3.js';
 export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../OrDateTimePickerTimeSelect-7ce1b97d.js';
 export { DateTimePickerTimeFormat, DateTimePickerTimeFormat as TimePickerFormat, DateTimePickerTimeFormat as TimeRangePickerFormat } from './OrDateTimePickerV3/props.js';