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

package/src/components/index.ts

@@ -36,7 +36,7 @@ export * from './or-inline-text-edit';
 export * from './or-inline-textarea-v3';
 export * from './or-input-box-v3';
 export * from './or-input-v3';
-export * from './or-input';
+export * from './or-inputs';
 export * from './or-label';
 export * from './or-label-v3';
 export * from './or-link-v3';
@@ -50,11 +50,9 @@ export * from './or-modal';
 export * from './or-modal-v3';
 export * from './or-notification';
 export * from './or-notification-v3';
-export * from './or-number-input';
 export * from './or-overflow-menu';
 export * from './or-overlay';
 export * from './or-overlay-v3';
-export * from './or-password';
 export * from './or-pagination-v3';
 export * from './or-popover-v3';
 export * from './or-progress';
@@ -62,7 +60,6 @@ export * from './or-progress-v3';
 export * from './or-radio';
 export * from './or-radio-group';
 export * from './or-radio-v3';
-export * from './or-search';
 export * from './or-search-v3';
 export * from './or-segmented-control-v3';
 export * from './or-select';
@@ -86,7 +83,6 @@ export * from './or-tag-v3';
 export * from './or-teleport';
 export * from './or-teleport-v3';
 export * from './or-text-v3';
-export * from './or-textarea';
 export * from './or-textarea-v3';
 export * from './or-textbox';
 export * from './or-toast';

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-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-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)"
@@ -53,6 +54,11 @@ export default defineComponent({
       default: IconButtonSize.M,
     },
 
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+
     disabled: {
       type: Boolean,
       default: false,

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-number-input → or-inputs}/OrNumberInput.vue

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

package/src/components/{or-password → or-inputs}/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-search → or-inputs}/OrSearch.vue

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

package/src/components/{or-textarea → or-inputs}/OrTextarea.vue

@@ -114,7 +114,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, getCurrentInstance } from 'vue-demi';
+import {
+  defineComponent,
+  ref,
+  getCurrentInstance,
+} from 'vue-demi';
 import { pxToRem } from '../../utils/functions/px-to-rem';
 import {
   cancelAF,
@@ -315,228 +319,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use "~@onereach/styles/src/global" as *;
-
-.or-textbox {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-
-  &.is-show-info.has-label {
-    align-items: center;
-  }
-
-  &.has-label {
-    align-items: flex-end;
-  }
-
-  .or-label {
-    margin-bottom: $s-1;
-  }
-
-  &--append,
-  &--prepend {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: px-to-rem(36);
-  }
-
-  &--append {
-    margin-left: px-to-rem(10);
-  }
-
-  &--prepend {
-    margin-right: px-to-rem(10);
-  }
-
-  &--wrapper {
-    width: 100%;
-  }
-
-  &--input {
-    width: 100%;
-    min-width: px-to-rem(114);
-    height: px-to-rem(36);
-    padding: px-to-rem(10);
-    font-family: inherit;
-    font-size: $fs-1;
-    background-color: $c-neutral-1;
-    border: 1px solid $c-neutral-2;
-    border-radius: $s-2;
-    outline: none;
-
-    @include transition(border-color, background-color, -webkit-box-shadow);
-
-    &-textarea {
-      /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
-      @extend .or-textbox--input;
-
-      min-height: px-to-rem(79);
-      max-height: px-to-rem(142);
-      overflow-x: hidden;
-      overflow-y: auto;
-      resize: none;
-    }
-
-    &-wrapper {
-      position: relative;
-      width: 100%;
-    }
-
-    &::placeholder {
-      color: $c-neutral-4;
-
-      @include transition(opacity);
-    }
-
-    &:-webkit-autofill {
-      -webkit-box-shadow: inset 0 0 0 50px $c-neutral-1;
-
-      @include focus {
-        -webkit-box-shadow: inset 0 0 0 50px $c-white;
-      }
-    }
-
-    @include hover {
-      background-color: $c-white;
-      border-color: $c-neutral-2-darken-3;
-      -webkit-box-shadow: inset 0 0 0 50px $c-white;
-    }
-
-    @include active {
-      &:not(:focus) {
-        border-color: $c-neutral-2-darken-5;
-      }
-    }
-
-    @include focus {
-      background-color: $c-white;
-      border-color: $c-primary;
-
-      &::placeholder {
-        opacity: 0;
-      }
-    }
-
-    @include disabled {
-      background-color: $c-neutral-2;
-      border-color: $c-neutral-2;
-    }
-
-    @include has-error {
-      border-color: $c-error;
-
-      @include hover {
-        border-color: $c-error-darken-3;
-      }
-
-      @include focus {
-        border-color: $c-error-darken-5;
-      }
-
-      @include disabled {
-        border-color: $c-error-lighten-20;
-      }
-    }
-  }
-
-  &--textarea {
-    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
-    @extend .or-textbox--input;
-
-    min-height: px-to-rem(79);
-    max-height: px-to-rem(142);
-    overflow-x: hidden;
-    overflow-y: auto;
-    resize: none;
-  }
-
-  &--info {
-    width: 100%;
-    margin: 0;
-
-    @include transition(height, opacity);
-  }
-
-  &--counter {
-    flex-shrink: 0;
-    margin-left: auto;
-    font-size: $fs-0;
-    line-height: px-to-rem(14);
-    color: $c-neutral-4;
-  }
-
-  &--hint,
-  &-error {
-    flex-shrink: 1;
-
-    @include transition(height, opacity);
-  }
-
-  &.is-small {
-    .or-textbox {
-      &--input {
-        height: px-to-rem(30);
-        padding: px-to-rem(8) px-to-rem(10);
-        font-size: $fs-0;
-
-        &-toggle-btn {
-          .material-icons {
-            font-size: $fs-1;
-          }
-        }
-      }
-    }
-  }
-
-  &.has-counter {
-    .or-textbox {
-      &--hint,
-      &--error {
-        padding-right: px-to-rem(15);
-      }
-    }
-  }
-
-  &.is-show-info {
-    .or-textbox {
-      &--info {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        padding-top: px-to-rem(4);
-      }
-    }
-  }
-
-  @include disabled {
-    .or-textbox {
-      &--input-toggle-btn {
-        pointer-events: none;
-      }
-    }
-  }
-
-  @include has-error {
-    .or-textbox {
-      &--input {
-        border-color: $c-error;
-
-        @include hover {
-          border-color: $c-error-darken-3;
-        }
-
-        @include focus {
-          border-color: $c-error-darken-5;
-        }
-
-        @include disabled {
-          border-color: $c-error;
-        }
-      }
-    }
-  }
-}
+@import "./styles.scss";
 </style>

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

@@ -0,0 +1,5 @@
+export { default as OrTextarea } from './OrTextarea.vue';
+export { default as OrInput } from './OrInput.vue';
+export { default as OrNumberInput } from './OrNumberInput.vue';
+export { default as OrPassword } from './OrPassword.vue';
+export { default as OrSearch } from './OrSearch.vue';

package/src/components/or-list/OrList.stories.ts

@@ -1,7 +1,7 @@
 import OrList from './OrList.vue';
 import { OrIcon } from '../or-icon';
 import { OrButtonV2 as OrButton } from '../or-button-v2';
-import { OrInput } from '../or-input';
+import { OrInput } from '../or-inputs';
 
 import { ArgTypes, Story } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';

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-input';
+import { OrInput } from '../or-inputs';
 import { OrIcon } from '../or-icon';
 import { OrIconButton } from '../or-button-v2';
 

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-input';
+import { OrInput } from '../or-inputs';
 import { getTestOption } from '../or-select/stories.helpers';
 import _ from 'lodash';
 

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 _ };