@onereach/ui-components 2.71.1-beta.2232.0 → 2.71.1-beta.2237.0

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

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

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

@@ -72,80 +72,70 @@ 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,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="['layout-row', 'm-[-4px] md:m-[-2px]']">
@@ -16,6 +17,7 @@
 
 <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';
 
@@ -26,6 +28,8 @@ export default defineComponent({
     OrIcon,
   },
 
+  inheritAttrs: false,
+
   expose: [
     'root',
   ],
@@ -35,9 +39,12 @@ 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,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -16,11 +17,14 @@
 
 <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,
@@ -37,9 +41,12 @@ 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,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -33,6 +34,7 @@
 
 <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';
@@ -44,6 +46,8 @@ export default defineComponent({
     OrIcon,
   },
 
+  inheritAttrs: false,
+
   props: {
     label: {
       type: String,
@@ -87,10 +91,13 @@ 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,6 +1,7 @@
 <template>
   <button
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :type="'button'"
     :disabled="disabled"
@@ -25,6 +26,8 @@ export default defineComponent({
     OrIcon,
   },
 
+  inheritAttrs: false,
+
   props: {
     icon: {
       type: String,

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -16,11 +17,14 @@
 
 <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,
@@ -37,9 +41,12 @@ 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.stories3.ts

@@ -24,6 +24,10 @@ export default {
       options: Object.values(IconButtonSize),
     },
 
+    selected: {
+      control: { type: 'boolean' },
+    },
+
     disabled: {
       control: { type: 'boolean' },
     },

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

@@ -5,6 +5,7 @@
       v-bind="$attrs"
       :class="rootStyles"
       :type="'button'"
+      :selected="selected ? '' : null"
       :disabled="disabled"
       @click="$emit('click', $event)"
       @focus="$emit('focus', $event)"
@@ -21,6 +22,7 @@
 
 <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';
@@ -52,6 +54,11 @@ export default defineComponent({
       default: IconButtonSize.M,
     },
 
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+
     disabled: {
       type: Boolean,
       default: false,
@@ -78,10 +85,13 @@ export default defineComponent({
     const root = ref<HTMLButtonElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-icon-button',
       ...IconButtonRoot,
       ...IconButtonRootColors[props.color],
+      classAttribute.value,
     ]);
 
     return {

package/src/components/or-icon-button-v3/styles.ts

@@ -39,13 +39,26 @@ export const IconButtonRootColors: Record<IconButtonColor, string[]> = {
     'hover:outline-primary-opacity-0-08',
     'dark:hover:outline-primary-opacity-0-08-dark',
 
+    'hover:theme-foreground-default',
+    'dark:hover:theme-foreground-default-dark',
+
     // Theme (focus)
     'focus:outline-primary-opacity-0-08',
     'dark:focus:outline-primary-opacity-0-08-dark',
 
+    'focus:theme-foreground-default',
+    'dark:focus:theme-foreground-default-dark',
+
     // Theme (active)
     'active:outline-primary-opacity-0-16',
     'dark:active:outline-primary-opacity-0-16-dark',
+
+    'active:theme-foreground-default',
+    'dark:active:theme-foreground-default-dark',
+
+    // Theme (selected)
+    'selected:theme-foreground-default',
+    'dark:selected:theme-foreground-default-dark',
   ],
 
   'danger': [

package/src/components/or-icon-v3/OrIcon.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     {{ icon }}
@@ -9,12 +10,15 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { IconSize, IconVariant } from './props';
 import { IconRoot, IconRootSizes, IconRootVariants } from './styles';
 
 export default defineComponent({
   name: 'OrIcon',
 
+  inheritAttrs: false,
+
   props: {
     icon: {
       type: String,
@@ -41,11 +45,14 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-icon',
       ...IconRoot,
       ...IconRootVariants[props.variant],
       ...IconRootSizes[props.size],
+      classAttribute.value,
     ]);
 
     return {

package/src/components/or-inline-input-box-v3/OrInlineInputBox.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :invalid="invalid ? '' : null"
   >
@@ -10,12 +11,15 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { InlineInputBoxSize } from './props';
 import { InlineInputBoxRoot, InlineInputBoxRootSizes } from './styles';
 
 export default defineComponent({
   name: 'OrInlineInputBox',
 
+  inheritAttrs: false,
+
   props: {
     size: {
       type: String as PropType<InlineInputBoxSize>,
@@ -37,10 +41,13 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-inline-input-box',
       ...InlineInputBoxRoot,
       ...InlineInputBoxRootSizes[props.size],
+      classAttribute.value,
     ]);
 
     return {

package/src/components/or-inline-input-v3/OrInlineInput.stories3.ts

@@ -24,6 +24,10 @@ export default {
       control: { type: 'text' },
     },
 
+    value: { // TODO: Remove Vue 2 fallback
+      table: { disable: true },
+    },
+
     saveOnBlur: {
       control: { type: 'boolean' },
     },
@@ -108,6 +112,7 @@ const Template: StoryFn<typeof OrInlineInput> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
+      onInput: action('input'),
       onKeydown: action('keydown'),
       onKeyup: action('keyup'),
       onFocus: action('focus'),
@@ -120,6 +125,7 @@ const Template: StoryFn<typeof OrInlineInput> = (args) => ({
       v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
+      @input="onInput"
       @keydown="onKeydown"
       @keyup="onKeyup"
       @focus="onFocus"