@onereach/ui-components 2.71.1-beta.2235.0 → 2.71.1

package/src/components/or-button-v3/OrButton.vue

@@ -1,7 +1,6 @@
 <template>
   <button
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :type="type"
     :activated="activated ? '' : null"
@@ -34,7 +33,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { ButtonColor, ButtonType, ButtonVariant } from './props';
 import { ButtonRoot, ButtonRootColors, ButtonRootVariants } from './styles';
@@ -46,8 +44,6 @@ export default defineComponent({
     OrLoader,
   },
 
-  inheritAttrs: false,
-
   props: {
     type: {
       type: String as PropType<ButtonType>,
@@ -100,15 +96,12 @@ export default defineComponent({
     const root = ref<HTMLButtonElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-button',
       ...ButtonRoot,
       ...ButtonRootVariants[props.variant],
       ...ButtonRootColors[`${props.color}-${props.variant}`],
       props.loading && 'interactivity-none',
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-card-collection/OrCardCollection.vue

@@ -73,7 +73,7 @@ import { defineComponent, PropType, ref } from 'vue-demi';
 import { CARD_COLLECTION_LAYOUT } from './constants';
 import { OrCard } from '../or-card';
 import { OrIcon } from '../or-icon';
-import { OrSearch } from '../or-search';
+import { OrSearch } from '../or-inputs';
 import { OrIconButton } from '../or-button-v2';
 import { LayoutOption, SortableColumn } from './types';
 
@@ -177,9 +177,9 @@ export default defineComponent({
 .or-card-collection {
   .or-card-collection-toolbar {
     display: flex;
-    column-gap: $s-4;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
+    column-gap: $s-4;
     margin: 0 $s-4;
 
     .or-card-collection-sorting {
@@ -189,21 +189,21 @@ export default defineComponent({
       .or-card-collection-sorting-column {
         display: inline-flex;
         margin: $s-2 $s-6;
+        text-transform: capitalize;
+        color: $c-neutral-4;
         font-size: $fs-0;
         font-weight: $fw-0;
-        line-height: $lh-0;
-        color: $c-neutral-4;
-        text-transform: capitalize;
         letter-spacing: 0;
+        line-height: $lh-0;
         user-select: none;
 
         &.sorting-selected {
-          font-weight: bold;
           color: $c-neutral-6;
+          font-weight: bold;
 
           .or-card-collection-sort-direction {
-            width: 14px;
             height: 14px;
+            width: 14px;
             margin-left: $s-1;
           }
         }

package/src/components/or-card-collection-v3/OrCardCollection.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="toolbarStyles">
@@ -57,6 +56,7 @@
         </div>
       </div>
     </div>
+
     <slot
       name="header"
       v-bind="{
@@ -64,6 +64,7 @@
         mode: proxyView,
       }"
     />
+
     <slot
       v-if="items.length"
       :name="proxyView"
@@ -81,6 +82,7 @@
         </template>
       </OrCardCollectionView>
     </slot>
+
     <slot
       v-else-if="items.length === 0 && proxySearch.length > 0"
       name="noSearchResults"
@@ -93,21 +95,16 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
+import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrMenuV3 as OrMenu } from '../or-menu-v3';
-import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import {
-  CardCollectionRoot,
-  CardCollectionToolbar,
-  CardCollectionToolbarPanel,
-} from './styles';
-import { CardCollectionItem, SortOption, ViewMode } from './types';
-import OrCardCollectionView from './OrCardCollectionView.vue3.vue';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
+import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
+import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrSearchV3 as OrSearch } from '../or-search-v3';
+import OrCardCollectionView from './OrCardCollectionView.vue3.vue';
 import { defaultViewModes, gridView } from './props';
+import { CardCollectionRoot, CardCollectionToolbar, CardCollectionToolbarPanel } from './styles';
+import { CardCollectionItem, SortOption, ViewMode } from './types';
 
 export default defineComponent({
   name: 'OrCardCollection',
@@ -122,8 +119,6 @@ export default defineComponent({
     OrSearch,
   },
 
-  inheritAttrs: false,
-
   props: {
     items: {
       type: Array as PropType<CardCollectionItem[]>,
@@ -183,12 +178,9 @@ export default defineComponent({
     const sortButton = ref<typeof OrButton>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-card-collection',
       ...CardCollectionRoot,
-      classAttribute.value,
     ]);
 
     const toolbarStyles = computed(() => [

package/src/components/or-card-v3/OrCard.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <slot />
@@ -10,14 +9,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { CardRoot } from './styles';
 
 export default defineComponent({
   name: 'OrCard',
 
-  inheritAttrs: false,
-
   expose: [
     'root',
   ],
@@ -27,12 +23,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-card',
       ...CardRoot,
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-checkbox-v3/OrCheckbox.stories3.ts

@@ -26,11 +26,7 @@ export default {
       control: { type: 'object' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+    value: {
       control: { type: 'text' },
     },
 
@@ -116,7 +112,6 @@ const Template: StoryFn<typeof OrCheckbox> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
       onFocus: action('focus'),
       onBlur: action('blur'),
     };
@@ -128,7 +123,6 @@ const Template: StoryFn<typeof OrCheckbox> = (args) => ({
         v-model="model"
         v-bind="args"
         @update:modelValue="onUpdateModelValue"
-        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       >
@@ -139,10 +133,9 @@ const Template: StoryFn<typeof OrCheckbox> = (args) => ({
 
       <OrCheckbox
         v-model="model"
-        input-value="checkbox-2"
+        value="checkbox-2"
         label="Checkbox 2"
         @update:modelValue="onUpdateModelValue"
-        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -157,6 +150,6 @@ Checkbox.args = {
   addon: '<OrIcon icon="info" />',
 
   // Props
-  inputValue: 'checkbox-1',
+  value: 'checkbox-1',
   label: 'Checkbox 1',
 };

package/src/components/or-checkbox-v3/OrCheckbox.vue

@@ -4,12 +4,12 @@
     :class="rootStyles"
   >
     <input
-      v-bind="$attrs"
-      :id="controlId"
+      ref="control"
       v-model="proxyModelValue"
+      v-bind="controlAttributes"
       :class="controlStyles"
-      type="checkbox"
-      :value="inputValue"
+      :type="'checkbox'"
+      :value="value"
       :indeterminate="indeterminate"
       :required="required"
       :disabled="disabled"
@@ -19,7 +19,7 @@
 
     <template v-if="$slots.default || label">
       <OrLabel
-        :control-id="controlId"
+        :control-id="controlAttributes.id"
         :variant="labelVariant"
         :required="required"
         :disabled="disabled"
@@ -35,8 +35,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
+import { useControlAttributes, useIdAttribute } from '../../hooks';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
 import { CheckboxControl, CheckboxControlHandle, CheckboxRoot } from './styles';
 
@@ -47,7 +47,10 @@ export default defineComponent({
     OrLabel,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -55,12 +58,7 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: [Boolean, Array] as PropType<boolean | string[]>,
-      default: undefined,
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+    value: {
       type: String,
       default: undefined,
     },
@@ -94,28 +92,26 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'focus',
     'blur',
   ],
 
   expose: [
     'root',
+
+    'focus',
+    'blur',
   ],
 
   setup(props, context) {
-    const currentInstance = getCurrentInstance()!;
-
     // Refs
     const root = ref<HTMLElement>();
+    const control = ref<HTMLInputElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-checkbox',
       ...CheckboxRoot,
-      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -124,25 +120,37 @@ export default defineComponent({
     ]);
 
     // State
-    const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+    });
 
     const proxyModelValue = computed({
-      get: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
+      get: () => props.modelValue,
 
       set: (value) => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });
 
+    // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
+
     return {
       root,
+      control,
       rootStyles,
       controlStyles,
-      controlId,
+      controlAttributes,
       proxyModelValue,
+      focus,
+      blur,
     };
   },
 });

package/src/components/or-confirm/OrConfirm.vue

@@ -53,7 +53,7 @@
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrButtonV2 as OrButton, BUTTON_COLOR } from '../or-button-v2';
 import { OrModal, OrModalSizes } from '../or-modal';
-import { OrInput } from '../or-input';
+import { OrInput } from '../or-inputs';
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';
 

package/src/components/or-confirm-v3/OrConfirm.vue

@@ -72,70 +72,80 @@ import { ButtonColor, OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrInputV3 as OrInput } from '../or-input-v3';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
 import { ConfirmType } from './props';
-import {
-ConfirmFooter, ConfirmFooterButtons, ConfirmFooterTypes, ConfirmHeader,
-ConfirmInput,
-ConfirmRoot
-} from './styles';
+import { ConfirmFooter, ConfirmFooterButtons, ConfirmFooterTypes, ConfirmHeader, ConfirmInput, ConfirmRoot } from './styles';
 
 export default defineComponent({
   name: 'OrConfirm',
+
   components: {
     OrOverlay,
     OrButton,
     OrInput,
   },
+
+  inheritAttrs: false,
+
   props: {
     titleText: {
       type: String,
       required: false,
       default: null,
     },
+
     confirmButtonText: {
       type: String,
       required: false,
       default: 'Confirm',
     },
+
     cancelButtonText: {
       type: String,
       required: false,
       default: 'Cancel',
     },
+
     confirmType: {
       type: String as PropType<ConfirmType>,
       required: false,
       default: ConfirmType.C,
     },
+
     loading: {
       type: Boolean,
       required: false,
       default: false,
     },
+
     disabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+
     confirmationText: {
       type: String,
       required: false,
       default: null,
     },
+
     textConfirmationLabel: {
       type: String,
       required: false,
       default: null,
     },
+
     textConfirmationPlaceholder: {
       type: String,
       required: false,
       default: null,
     },
+
     textConfirmationError: {
       type: String,
       required: false,
       default: null,
     },
+
     isOpen: {
       type: Boolean,
       default: false,

package/src/components/or-error-tag-v3/OrErrorTag.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="['layout-row', 'm-[-4px] md:m-[-2px]']">
@@ -17,7 +16,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { ErrorTagRoot } from './styles';
 
@@ -28,8 +26,6 @@ export default defineComponent({
     OrIcon,
   },
 
-  inheritAttrs: false,
-
   expose: [
     'root',
   ],
@@ -39,12 +35,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-error-tag',
       ...ErrorTagRoot,
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-error-v3/OrError.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -17,14 +16,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { ErrorAddon, ErrorRoot, ErrorText } from './styles';
 
 export default defineComponent({
   name: 'OrError',
 
-  inheritAttrs: false,
-
   props: {
     disabled: {
       type: Boolean,
@@ -41,12 +37,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-error',
       ...ErrorRoot,
-      classAttribute.value,
     ]);
 
     const textStyles = computed(() => [

package/src/components/or-expansion-panel-v3/OrExpansionPanel.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -34,7 +33,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
 import { ExpansionPanelAddon, ExpansionPanelHeader, ExpansionPanelHeaderColors, ExpansionPanelRoot, ExpansionPanelRootVariants } from './styles';
@@ -46,8 +44,6 @@ export default defineComponent({
     OrIcon,
   },
 
-  inheritAttrs: false,
-
   props: {
     label: {
       type: String,
@@ -91,13 +87,10 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-expansion-panel',
       ...ExpansionPanelRoot,
       ...ExpansionPanelRootVariants[props.variant],
-      classAttribute.value,
     ]);
 
     const headerStyles = computed(() => [

package/src/components/or-fab-v3/OrFab.vue

@@ -1,7 +1,6 @@
 <template>
   <button
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :type="'button'"
     :disabled="disabled"
@@ -26,8 +25,6 @@ export default defineComponent({
     OrIcon,
   },
 
-  inheritAttrs: false,
-
   props: {
     icon: {
       type: String,

package/src/components/or-hint-v3/OrHint.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -17,14 +16,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { HintAddon, HintRoot, HintText } from './styles';
 
 export default defineComponent({
   name: 'OrHint',
 
-  inheritAttrs: false,
-
   props: {
     disabled: {
       type: Boolean,
@@ -41,12 +37,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-hint',
       ...HintRoot,
-      classAttribute.value,
     ]);
 
     const textStyles = computed(() => [

package/src/components/or-icon-button-v3/OrIconButton.vue

@@ -21,7 +21,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
 import { IconButtonColor, IconButtonSize } from './props';
@@ -79,13 +78,10 @@ export default defineComponent({
     const root = ref<HTMLButtonElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-icon-button',
       ...IconButtonRoot,
       ...IconButtonRootColors[props.color],
-      classAttribute.value,
     ]);
 
     return {