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

package/src/components/or-tabs-v3/OrTabs.vue

@@ -47,7 +47,6 @@
 <script lang="ts">
 import { useResizeObserver } from '@vueuse/core';
 import { computed, defineComponent, nextTick, onMounted, PropType, reactive, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
@@ -68,6 +67,11 @@ export default defineComponent({
 
   inheritAttrs: false,
 
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
   props: {
     items: {
       type: Array as PropType<TabsItem[]>,
@@ -79,11 +83,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: [String, Number],
-      default: undefined,
-    },
-
     variant: {
       type: String as PropType<TabsVariant>,
       default: TabsVariant.Default,
@@ -92,8 +91,6 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
-
-    'input',
   ],
 
   expose: [
@@ -111,13 +108,10 @@ export default defineComponent({
     const overflowMenuRoot = computed(() => overflowMenu.value?.root);
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-tabs',
       ...TabsRoot,
       ...TabsRootVariants[props.variant],
-      classAttribute.value,
     ]);
 
     // State
@@ -127,19 +121,16 @@ export default defineComponent({
     });
 
     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 activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);
 
-    // Functions
+    // Methods
     function rearrangeTabs(items: TabsItem[], activeTab: TabsItem, rootElement: Element): typeof tabs {
       const { children } = rootElement;
 

package/src/components/or-tag-v3/OrTag.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :tabindex="!disabled && variant === 'button' ? 0 : null"
     :disabled="disabled ? '' : null"
@@ -26,7 +25,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, unref, watchPostEffect } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { TagColor, TagVariant } from './props';
 import { TagRoot, TagRootColors, TagRootVariants } from './styles';
@@ -38,8 +36,6 @@ export default defineComponent({
     OrIconButton,
   },
 
-  inheritAttrs: false,
-
   props: {
     variant: {
       type: String as PropType<TagVariant>,
@@ -74,14 +70,11 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-tag',
       ...TagRoot,
       ...TagRootVariants[props.variant],
       ...!custom.value ? TagRootColors[props.color as TagColor] : [],
-      classAttribute.value,
     ]);
 
     // State

package/src/components/or-text-v3/OrText.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="mainTextStyles">
@@ -16,14 +15,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { MainText, RestText, TextRoot } from './styles';
 
 export default defineComponent({
   name: 'OrText',
 
-  inheritAttrs: false,
-
   props: {
     text: {
       type: String,
@@ -45,12 +41,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-text',
       ...TextRoot,
-      classAttribute.value,
     ]);
 
     const mainTextStyles = computed(() => [

package/src/components/or-textarea-v3/OrTextarea.stories3.ts

@@ -16,10 +16,6 @@ export default {
       control: { type: 'text' },
     },
 
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
     maxlength: {
       control: { type: 'number' },
     },
@@ -39,10 +35,6 @@ export default {
       control: { type: 'text' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
     size: {
       control: { type: 'select' },
       options: Object.values(TextareaSize),
@@ -68,6 +60,10 @@ export default {
       control: { type: 'boolean' },
     },
 
+    readonly: {
+      control: { type: 'boolean' },
+    },
+
     disabled: {
       control: { type: 'boolean' },
     },
@@ -131,7 +127,6 @@ const Template: StoryFn<typeof OrTextarea> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
       onKeydown: action('keydown'),
       onKeyup: action('keyup'),
       onFocus: action('focus'),
@@ -144,7 +139,6 @@ const Template: StoryFn<typeof OrTextarea> = (args) => ({
       v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
-      @input="onInput"
       @keydown="onKeydown"
       @keyup="onKeyup"
       @focus="onFocus"

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -5,7 +5,7 @@
   >
     <template v-if="label">
       <OrLabel
-        :control-id="controlId"
+        :control-id="controlAttributes.id"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
@@ -25,12 +25,13 @@
       :disabled="disabled"
     >
       <textarea
-        :id="controlId"
+        ref="control"
         v-model="proxyModelValue"
-        v-bind="$attrs"
+        v-bind="controlAttributes"
         :class="controlStyles"
         :placeholder="placeholder"
         :required="required"
+        :readonly="readonly"
         :disabled="disabled"
         @keydown="$emit('keydown', $event)"
         @keyup="$emit('keyup', $event)"
@@ -70,8 +71,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, useValidationAttributes } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
@@ -89,7 +90,10 @@ export default defineComponent({
     OrLabel,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -97,11 +101,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: String,
-      default: undefined,
-    },
-
     size: {
       type: String as PropType<TextareaSize>,
       default: TextareaSize.M,
@@ -132,6 +131,11 @@ export default defineComponent({
       default: false,
     },
 
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+
     disabled: {
       type: Boolean,
       default: false,
@@ -141,7 +145,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'keydown',
     'keyup',
     'focus',
@@ -150,21 +153,20 @@ export default defineComponent({
 
   expose: [
     'root',
+
+    'focus',
+    'blur',
   ],
 
   setup(props, context) {
-    const currentInstance = getCurrentInstance()!;
-
     // Refs
     const root = ref<HTMLElement>();
+    const control = ref<HTMLTextAreaElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-textarea',
       ...TextareaRoot,
-      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -172,35 +174,46 @@ export default defineComponent({
     ]);
 
     // State
-    const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes(),
+    });
 
     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 currentLength = computed(() => proxyModelValue.value?.toString().length ?? 0);
+    const maxLength = computed(() => controlAttributes.maxlength);
+
     const invalid = computed(() => !!props.error);
-    const readonly = computed(() => context.attrs.readonly as boolean);
 
-    const currentLength = computed(() => proxyModelValue.value?.toString().length ?? 0);
-    const maxLength = computed(() => context.attrs.maxlength as number | undefined);
+    // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
 
     return {
       root,
+      control,
       rootStyles,
       controlStyles,
-      controlId,
+      controlAttributes,
       proxyModelValue,
-      invalid,
-      readonly,
       currentLength,
       maxLength,
+      invalid,
+      focus,
+      blur,
     };
   },
 });

package/src/components/or-tooltip-v3/OrTooltip.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <slot />
@@ -27,7 +26,6 @@
 <script lang="ts">
 import { useDebounceFn, useElementHover } from '@vueuse/core';
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { TooltipPlacement } from './props';
 import { TooltipBody, TooltipBodyPlacements, TooltipRoot } from './styles';
@@ -39,8 +37,6 @@ export default defineComponent({
     OrPopover,
   },
 
-  inheritAttrs: false,
-
   props: {
     text: {
       type: String,
@@ -71,12 +67,9 @@ export default defineComponent({
     const popoverRoot = computed(() => popover.value?.root);
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-tooltip',
       ...TooltipRoot,
-      classAttribute.value,
     ]);
 
     const bodyStyles = computed(() => [

package/src/hooks/index.ts

@@ -1,5 +1,7 @@
-export { useClassAttribute } from './useClassAttribute';
+export { useControlAttributes } from './useControlAttributes';
 export { useElevation } from './useElevation';
+export { useIdAttribute } from './useIdAttribute';
 export { useOverflow } from './useOverflow';
 export { useResponsive } from './useResponsive';
 export { default as useToggle } from './useToggle';
+export { useValidationAttributes } from './useValidationAttributes';

package/src/hooks/useControlAttributes.ts

@@ -0,0 +1,19 @@
+import { computed, ComputedRef, useAttrs } from 'vue-demi';
+
+interface ControlAttributes {
+  readonly: ComputedRef<boolean | undefined>;
+  disabled: ComputedRef<boolean | undefined>;
+
+  'force-state': ComputedRef<string | undefined>;
+}
+
+export function useControlAttributes(): ControlAttributes {
+  const attributes = useAttrs();
+
+  return {
+    readonly: computed(() => attributes['readonly'] as boolean | undefined),
+    disabled: computed(() => attributes['disabled'] as boolean | undefined),
+
+    'force-state': computed(() => attributes['force-state'] as string | undefined),
+  };
+}

package/src/hooks/useIdAttribute.ts

@@ -0,0 +1,9 @@
+import { computed, ComputedRef, getCurrentInstance, useAttrs } from 'vue-demi';
+
+export function useIdAttribute(): ComputedRef<string | undefined> {
+  const attributes = useAttrs(), component = getCurrentInstance();
+
+  return computed(() => {
+    return attributes['id'] as string | undefined ?? component?.uid.toString();
+  });
+}

package/src/hooks/useValidationAttributes.ts

@@ -0,0 +1,25 @@
+import { computed, ComputedRef, useAttrs } from 'vue-demi';
+
+interface ValidationAttributes {
+  required: ComputedRef<boolean | undefined>;
+  minlength: ComputedRef<number | undefined>;
+  maxlength: ComputedRef<number | undefined>;
+  pattern: ComputedRef<string | undefined>;
+  min: ComputedRef<number | undefined>;
+  max: ComputedRef<number | undefined>;
+  step: ComputedRef<number | undefined>;
+}
+
+export function useValidationAttributes(): ValidationAttributes {
+  const attributes = useAttrs();
+
+  return {
+    required: computed(() => attributes['required'] as boolean | undefined),
+    minlength: computed(() => attributes['minlength'] as number | undefined),
+    maxlength: computed(() => attributes['maxlength'] as number | undefined),
+    pattern: computed(() => attributes['pattern'] as string | undefined),
+    min: computed(() => attributes['min'] as number | undefined),
+    max: computed(() => attributes['max'] as number | undefined),
+    step: computed(() => attributes['step'] as number | undefined),
+  };
+}

package/dist/bundled/v2/OrNumberInput-face8ccc.js

@@ -1,227 +0,0 @@
-import './index-fa6eb4ca.js';
-import { O as OrInput } from './OrInput-df1a14fa.js';
-import { defineComponent, ref } from '@vue/composition-api/dist/vue-composition-api.mjs';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-
-var script = defineComponent({
-  name: 'OrNumberInput',
-  components: {
-    OrInput
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: Number,
-      default: undefined,
-      required: false
-    },
-    htmlId: {
-      type: String,
-      default: '',
-      required: false
-    },
-    placeholder: {
-      type: String,
-      default: '',
-      required: false
-    },
-    label: {
-      type: String,
-      default: '',
-      required: false
-    },
-    error: {
-      type: String,
-      default: '',
-      required: false
-    },
-    hint: {
-      type: String,
-      default: '',
-      required: false
-    },
-    minValue: {
-      type: Number,
-      default: undefined,
-      required: false
-    },
-    maxValue: {
-      type: Number,
-      default: undefined,
-      required: false
-    },
-    stepValue: {
-      type: Number,
-      default: undefined,
-      required: false
-    },
-    isSmall: Boolean,
-    isRequired: Boolean,
-    isDisabled: Boolean,
-    isReadonly: Boolean,
-    isInvalid: Boolean
-  },
-  emits: ['focus', 'blur', 'update:modelValue', 'input', 'keypress', 'keyup', 'keydown'],
-  setup(props, {
-    emit
-  }) {
-    const inputRef = ref();
-    if (props.modelValue) {
-      if (props.minValue !== undefined && props.modelValue < props.minValue) {
-        emit('update:modelValue', props.minValue);
-      } else if (props.maxValue !== undefined && props.modelValue > props.maxValue) {
-        emit('update:modelValue', props.maxValue);
-      }
-    }
-    return {
-      inputRef
-    };
-  },
-  computed: {
-    htmlInputAttrs() {
-      return {
-        min: this.minValue,
-        max: this.maxValue,
-        step: this.stepValue
-      };
-    },
-    localValue: {
-      get() {
-        var _a;
-        return ((_a = this.modelValue) !== null && _a !== void 0 ? _a : '') + '';
-      },
-      set(val) {
-        if (val === undefined || val === '') {
-          this.$emit('update:modelValue', undefined);
-          return;
-        }
-        const numVal = +val;
-        if (this.minValue !== undefined && numVal < this.minValue) {
-          this.$emit('update:modelValue', this.minValue);
-        } else if (this.maxValue !== undefined && numVal > this.maxValue) {
-          this.$emit('update:modelValue', this.maxValue);
-        } else {
-          this.$emit('update:modelValue', numVal);
-        }
-      }
-    }
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('or-input', {
-    ref: "inputRef",
-    staticClass: "or-password",
-    attrs: {
-      "html-id": _vm.htmlId,
-      "placeholder": _vm.placeholder,
-      "html-type": "number",
-      "html-input-attrs": _vm.htmlInputAttrs,
-      "label": _vm.label,
-      "error": _vm.error,
-      "hint": _vm.hint,
-      "is-small": _vm.isSmall,
-      "is-required": _vm.isRequired,
-      "is-disabled": _vm.isDisabled,
-      "is-readonly": _vm.isReadonly,
-      "is-invalid": _vm.isInvalid
-    },
-    on: {
-      "focus": function ($event) {
-        return _vm.$emit('focus', $event);
-      },
-      "blur": function ($event) {
-        return _vm.$emit('blur', $event);
-      },
-      "input": function ($event) {
-        return _vm.$emit('input', $event);
-      },
-      "keypress": function ($event) {
-        return _vm.$emit('keypress', $event);
-      },
-      "keyup": function ($event) {
-        return _vm.$emit('keyup', $event);
-      },
-      "keydown": function ($event) {
-        return _vm.$emit('keydown', $event);
-      }
-    },
-    scopedSlots: _vm._u([_vm.$slots.prepend ? {
-      key: "prepend",
-      fn: function () {
-        return [_vm._t("prepend")];
-      },
-      proxy: true
-    } : null, _vm.$slots['label-default'] ? {
-      key: "label-default",
-      fn: function () {
-        return [_vm._t("label-default")];
-      },
-      proxy: true
-    } : null, _vm.$slots['label-append'] ? {
-      key: "label-append",
-      fn: function () {
-        return [_vm._t("label-append")];
-      },
-      proxy: true
-    } : null, _vm.$slots['wrapper-end'] ? {
-      key: "wrapper-end",
-      fn: function () {
-        return [_vm._t("wrapper-end")];
-      },
-      proxy: true
-    } : null, _vm.$slots['input-end'] ? {
-      key: "input-end",
-      fn: function () {
-        return [_vm._t("input-end")];
-      },
-      proxy: true
-    } : null, _vm.$slots.append ? {
-      key: "append",
-      fn: function () {
-        return [_vm._t("append")];
-      },
-      proxy: true
-    } : null], null, true),
-    model: {
-      value: _vm.localValue,
-      callback: function ($$v) {
-        _vm.localValue = $$v;
-      },
-      expression: "localValue"
-    }
-  });
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-var __vue_component__$1 = __vue_component__;
-
-export { __vue_component__$1 as _ };