@onereach/ui-components 2.72.0-beta.2234.0 → 2.72.0

package/src/components/or-list-of-inputs/OrListOfInputs.vue

@@ -76,7 +76,7 @@ import { defineComponent, PropType } from 'vue-demi';
 import _ from 'lodash';
 
 import { OrList } from '../or-list';
-import { OrInput } from '../or-inputs';
+import { OrInput } from '../or-input';
 import { OrIcon } from '../or-icon';
 import { OrIconButton } from '../or-button-v2';
 

package/src/components/or-loader-v3/OrLoader.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="title">
@@ -81,15 +80,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { LoaderColor, LoaderSize, LoaderVariant } from './props';
-import { LoaderRoot, LoaderRootColors, LoaderTitle, LoaderDescription, LoaderContainer } from './styles';
+import { LoaderContainer, LoaderDescription, LoaderRoot, LoaderRootColors, LoaderTitle } from './styles';
 
 export default defineComponent({
   name: 'OrLoader',
 
-  inheritAttrs: false,
-
   props: {
     variant: {
       type: String as PropType<LoaderVariant>,
@@ -126,13 +122,10 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-loader',
       ...LoaderRoot,
       ...LoaderRootColors[props.color],
-      classAttribute.value,
     ]);
 
     const titleStyles = computed(() => [

package/src/components/or-menu-item-v3/OrMenuItem.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :tabindex="!disabled ? 0 : null"
     :selected="selected ? '' : null"
@@ -22,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 { MenuItemRoot } from './styles';
 
@@ -33,8 +31,6 @@ export default defineComponent({
     OrIcon,
   },
 
-  inheritAttrs: false,
-
   props: {
     icon: {
       type: [String, Object] as PropType<string | InstanceType<typeof OrIcon>['$props']>,
@@ -67,12 +63,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-menu-item',
       ...MenuItemRoot,
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-menu-v3/OrMenu.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <OrPopover
@@ -25,7 +24,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { MenuPlacement } from './props';
 import { MenuBody, MenuRoot } from './styles';
@@ -37,8 +35,6 @@ export default defineComponent({
     OrPopover,
   },
 
-  inheritAttrs: false,
-
   props: {
     trigger: {
       type: HTMLElement,
@@ -72,12 +68,9 @@ export default defineComponent({
     const isOpen = computed(() => popover.value?.isOpen);
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-menu',
       ...MenuRoot,
-      classAttribute.value,
     ]);
 
     const bodyStyles = computed(() => [

package/src/components/or-modal/OrModal.stories.ts

@@ -7,7 +7,7 @@ import { OrOverflowMenu } from '../or-overflow-menu';
 import { OrModalSizes } from './constants';
 import { OrCollapse } from '../or-collapse';
 import { OrSelect } from '../or-select';
-import { OrInput } from '../or-inputs';
+import { OrInput } from '../or-input';
 import { getTestOption } from '../or-select/stories.helpers';
 import _ from 'lodash';
 

package/src/components/or-modal-v3/OrModal.vue

@@ -31,7 +31,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
 import { ModalSize } from './props';
@@ -75,13 +74,10 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-modal',
       ...ModalRoot,
       ...ModalRootSizes[props.size],
-      classAttribute.value,
     ]);
 
     const headerStyles = computed(() => [

package/src/components/or-notification/OrNotification.vue

@@ -115,6 +115,7 @@ export default defineComponent({
     warning: ($c-warning, $c-warning-lighten-45),
     success: ($c-success, $c-success-lighten-45),
   );
+
   /** TODO: Override when mobile design is ready to guarantee alignment of icons with first text row */
   --alignment-height: #{$lh-1};
 
@@ -177,30 +178,4 @@ export default defineComponent({
     }
   }
 }
-
-[data-theme="dark"] {
-  .or-notification {
-    $notification-types: (
-      info: ($c-neutral-6, $c-primary-darken-45),
-      error: ($c-neutral-6, $c-error-darken-45),
-      warning: ($c-neutral-6, $c-warning-darken-45),
-      success: ($c-neutral-6, $c-success-darken-45),
-    );
-
-    .or-icon {
-      color: $c-neutral-1;
-    }
-
-    @each $type, $colors in $notification-types {
-      &.is-type-#{$type} {
-        background-color: list.nth($colors, 2);
-        color: list.nth($colors, 1);
-
-        a {
-          color: list.nth($colors, 1);
-        }
-      }
-    }
-  }
-}
 </style>

package/src/components/or-notification-v3/OrNotification.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="iconStyles">
@@ -25,7 +24,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { NotificationVariant } from './props';
@@ -39,8 +37,6 @@ export default defineComponent({
     OrIconButton,
   },
 
-  inheritAttrs: false,
-
   props: {
     variant: {
       type: String as PropType<NotificationVariant>,
@@ -57,13 +53,10 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-notification',
       ...NotificationRoot,
       ...NotificationRootVariants[props.variant],
-      classAttribute.value,
     ]);
 
     const iconStyles = computed(() => [

package/src/components/{or-inputs → or-number-input}/OrNumberInput.vue

@@ -62,7 +62,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi';
-import OrInput from './OrInput.vue';
+import { OrInput } from '../or-input';
 
 export default defineComponent({
   name: 'OrNumberInput',

package/src/components/or-number-input/index.ts

@@ -0,0 +1 @@
+export { default as OrNumberInput } from './OrNumberInput.vue';

package/src/components/or-overlay-v3/OrOverlay.vue

@@ -13,7 +13,7 @@
 <script lang="ts">
 import { useScrollLock } from '@vueuse/core';
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute, useElevation } from '../../hooks';
+import { useElevation } from '../../hooks';
 import { OrTeleportV3 as OrTeleport } from '../or-teleport-v3';
 import { OverlayRoot } from './styles';
 
@@ -42,12 +42,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-overlay',
       ...OverlayRoot,
-      classAttribute.value,
     ]);
 
     // Effects

package/src/components/or-pagination-v3/OrPagination.stories3.ts

@@ -15,10 +15,6 @@ export default {
       control: { type: 'text' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
     length: {
       control: { type: 'number' },
     },
@@ -65,7 +61,6 @@ const Template: StoryFn<typeof OrPagination> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
     };
   },
 
@@ -74,7 +69,6 @@ const Template: StoryFn<typeof OrPagination> = (args) => ({
       v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
-      @input="onInput"
     />
   `,
 });

package/src/components/or-pagination-v3/OrPagination.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="offsetControlStyles">
@@ -71,7 +70,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
@@ -89,7 +87,10 @@ export default defineComponent({
     OrMenuItem,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -97,11 +98,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: Object as PropType<PaginationModel>,
-      default: undefined,
-    },
-
     length: {
       type: Number,
       required: true,
@@ -115,8 +111,6 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
-
-    'input',
   ],
 
   expose: [
@@ -134,12 +128,9 @@ export default defineComponent({
     const limitMenuRoot = computed(() => limitMenu.value?.root);
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-pagination',
       ...PaginationRoot,
-      classAttribute.value,
     ]);
 
     const offsetControlStyles = computed(() => [
@@ -156,20 +147,15 @@ export default defineComponent({
 
     // State
     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);
       },
     });
 
     const currentLimit = computed<number>({
-      get: () => {
-        return proxyModelValue.value?.limit ?? props.pageSizeOptions[0];
-      },
+      get: () => proxyModelValue.value?.limit ?? props.pageSizeOptions[0],
 
       set: (value) => {
         proxyModelValue.value = {
@@ -180,9 +166,7 @@ export default defineComponent({
     });
 
     const currentOffset = computed<number>({
-      get: () => {
-        return proxyModelValue.value?.offset ?? 0;
-      },
+      get: () => proxyModelValue.value?.offset ?? 0,
 
       set: (value) => {
         proxyModelValue.value = {
@@ -193,9 +177,7 @@ export default defineComponent({
     });
 
     const currentPage = computed<number>({
-      get: () => {
-        return Math.floor(currentOffset.value / currentLimit.value) + 1;
-      },
+      get: () => Math.floor(currentOffset.value / currentLimit.value) + 1,
 
       set: (value) => {
         currentOffset.value = (value - 1) * currentLimit.value;
@@ -231,7 +213,7 @@ export default defineComponent({
         }, [] as (number | string)[]);
     });
 
-    // Functions
+    // Methods
     function toPreviousPage(): void {
       currentPage.value = currentPage.value - 1;
     }

package/src/components/{or-inputs → or-password}/OrPassword.vue

@@ -64,8 +64,8 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi';
-import OrInput from './OrInput.vue';
 import { useVModel } from '@vueuse/core';
+import { OrInput } from '../or-input';
 import { useToggle } from '../../hooks';
 import { BUTTON_SIZE, OrIconButton } from '../or-button-v2';
 

package/src/components/or-password/index.ts

@@ -0,0 +1 @@
+export { default as OrPassword } from './OrPassword.vue';

package/src/components/or-popover-v3/OrPopover.vue

@@ -33,7 +33,7 @@
 import { autoUpdate, computePosition, flip, hide, shift } from '@floating-ui/dom';
 import { onClickOutside } from '@vueuse/core';
 import { computed, defineComponent, nextTick, PropType, ref, toRef, unref, watch, watchPostEffect } from 'vue-demi';
-import { useClassAttribute, useElevation, useResponsive } from '../../hooks';
+import { useElevation, useResponsive } from '../../hooks';
 import { OrBottomSheetV3 as OrBottomSheet } from '../or-bottom-sheet-v3';
 import { OrTeleportV3 as OrTeleport } from '../or-teleport-v3';
 import { PopoverPlacement, PopoverVariant } from './props';
@@ -98,12 +98,9 @@ export default defineComponent({
     const bottomSheetRoot = computed(() => bottomSheet.value?.root);
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-popover',
       ...PopoverRoot,
-      classAttribute.value,
     ]);
 
     const bodyStyles = computed(() => [

package/src/components/or-progress-v3/OrProgress.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="isLinearType">
@@ -98,29 +97,16 @@
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
 import { useElementBounding } from '@vueuse/core';
+import _ from 'lodash';
 import { computed, defineComponent, PropType, ref, useSlots } from 'vue-demi';
+import { useResponsive } from '../../hooks';
 import { ProgressColor, ProgressType } from './props';
-import { useClassAttribute, useResponsive } from '../../hooks';
-import {
-  ProgressBarAnimationTypes,
-  ProgressBarBackground,
-  ProgressBarColors,
-  ProgressBarMain,
-  ProgressFooter,
-  ProgressHeader,
-  ProgressHeaderLabel,
-  ProgressHeaderPercent,
-  ProgressRoot,
-  ProgressRootTypes,
-} from './styles';
+import { ProgressBarAnimationTypes, ProgressBarBackground, ProgressBarColors, ProgressBarMain, ProgressFooter, ProgressHeader, ProgressHeaderLabel, ProgressHeaderPercent, ProgressRoot, ProgressRootTypes } from './styles';
 
 export default defineComponent({
   name: 'OrProgress',
 
-  inheritAttrs: false,
-
   props: {
     maxValue: {
       type: Number,
@@ -216,13 +202,10 @@ export default defineComponent({
     const computedSize = computed(() => isMobile.value ? 20 : 16);
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-progress',
       ...ProgressRoot,
       ...ProgressRootTypes[props.type],
-      classAttribute.value,
     ]);
 
     const headerStyles = computed(() => [

package/src/components/or-radio-v3/OrRadio.stories3.ts

@@ -26,11 +26,7 @@ export default {
       control: { type: 'text' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+    value: {
       control: { type: 'text' },
     },
 
@@ -112,7 +108,6 @@ const Template: StoryFn<typeof OrRadio> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
       onFocus: action('focus'),
       onBlur: action('blur'),
     };
@@ -124,7 +119,6 @@ const Template: StoryFn<typeof OrRadio> = (args) => ({
         v-model="model"
         v-bind="args"
         @update:modelValue="onUpdateModelValue"
-        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       >
@@ -135,10 +129,9 @@ const Template: StoryFn<typeof OrRadio> = (args) => ({
 
       <OrRadio
         v-model="model"
-        input-value="radio-2"
+        value="radio-2"
         label="Radio 2"
         @update:modelValue="onUpdateModelValue"
-        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -153,6 +146,6 @@ Radio.args = {
   addon: '<OrIcon icon="info" />',
 
   // Props
-  inputValue: 'radio-1',
+  value: 'radio-1',
   label: 'Radio 1',
 };

package/src/components/or-radio-v3/OrRadio.vue

@@ -4,12 +4,12 @@
     :class="rootStyles"
   >
     <input
-      v-bind="$attrs"
-      :id="controlId"
+      ref="control"
       v-model="proxyModelValue"
+      v-bind="controlAttributes"
       :class="controlStyles"
       type="radio"
-      :value="inputValue"
+      :value="value"
       :required="required"
       :disabled="disabled"
       @focus="$emit('focus', $event)"
@@ -18,7 +18,7 @@
 
     <template v-if="$slots.default || label">
       <OrLabel
-        :control-id="controlId"
+        :control-id="controlAttributes.id"
         :variant="labelVariant"
         :required="required"
         :disabled="disabled"
@@ -34,8 +34,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 { RadioControl, RadioControlHandle, RadioRoot } from './styles';
 
@@ -46,7 +46,10 @@ export default defineComponent({
     OrLabel,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -54,12 +57,7 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: String,
-      default: undefined,
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+    value: {
       type: String,
       required: true,
     },
@@ -88,28 +86,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-radio',
       ...RadioRoot,
-      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -118,25 +114,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,
     };
   },
 });