@onereach/ui-components 19.3.0-beta.5046.0 → 19.3.0-beta.5083.0

package/src/components/or-inline-textarea-v3/OrInlineTextarea.vue

@@ -1,270 +0,0 @@
-<template>
-  <div
-    :ref="'root'"
-    :class="rootStyles"
-  >
-    <div :class="['layout-row', 'gap-sm']">
-      <OrInlineInputBox
-        :invalid="!!error"
-        :activated="activated"
-      >
-        <textarea
-          :ref="'control'"
-          v-bind="attributes"
-          v-model="draft"
-          :class="controlStyles"
-          :placeholder="placeholder"
-          :activated="activated"
-          @input="$emit('input', $event)"
-          @keydown="$emit('keydown', $event)"
-          @keyup="$emit('keyup', $event)"
-          @focus="$emit('focus', $event); onFocus()"
-          @blur="$emit('blur', $event); onBlur()"
-        />
-      </OrInlineInputBox>
-
-      <template v-if="activated && !saveOnBlur">
-        <div :class="actionStyles">
-          <OrIconButton
-            :icon="'done'"
-            :color="'inherit'"
-            @click.stop="apply"
-          />
-
-          <OrIconButton
-            :icon="'close'"
-            :color="'inherit'"
-            @click.stop="reset"
-          />
-        </div>
-      </template>
-    </div>
-
-    <template v-if="$slots.hint || hint || maxLength">
-      <OrHint v-show="!error">
-        <slot name="hint">
-          {{ hint }}
-        </slot>
-
-        <template
-          v-if="maxLength"
-          v-slot:addon
-        >
-          {{ length }} / {{ maxLength }}
-        </template>
-      </OrHint>
-    </template>
-
-    <OrError v-show="typeof error === 'string' && error.length > 0">
-      {{ error }}
-
-      <template
-        v-if="maxLength"
-        v-slot:addon
-      >
-        {{ length }} / {{ maxLength }}
-      </template>
-    </OrError>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, computed, defineComponent, reactive, ref, toRef, watch, nextTick } from 'vue';
-import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
-import { OrErrorV3 as OrError } from '../or-error-v3';
-import { OrHintV3 as OrHint } from '../or-hint-v3';
-import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrInlineInputBoxV3 as OrInlineInputBox } from '../or-inline-input-box-v3';
-import { InlineTextarea, InlineTextareaAction, InlineTextareaControl } from './styles';
-import { InlineTextareaModelValue } from './types';
-import { useTextareaAutosize } from '@vueuse/core';
-
-export default defineComponent({
-  name: 'OrInlineTextarea',
-
-  components: {
-    OrError,
-    OrHint,
-    OrIconButton,
-    OrInlineInputBox,
-  },
-
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
-  props: {
-    modelValue: {
-      type: undefined as unknown as PropType<InlineTextareaModelValue>,
-      default: undefined,
-    },
-
-    placeholder: {
-      type: String,
-      default: undefined,
-    },
-
-    hint: {
-      type: String,
-      default: undefined,
-    },
-
-    error: {
-      type: [String, Boolean],
-      default: undefined,
-    },
-
-    saveOnBlur: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-
-    'input',
-    'keydown',
-    'keyup',
-    'focus',
-    'blur',
-    'apply',
-    'reset',
-  ],
-
-  expose: [
-    'root',
-
-    'apply',
-    'reset',
-
-    'focus',
-    'blur',
-  ],
-
-  setup(props, context) {
-    const attributes = reactive({
-      id: useIdAttribute(),
-      ...useControlAttributes(),
-      ...useValidationAttributes(),
-    });
-
-    // Refs & Styles
-    const root = ref<HTMLElement>();
-
-    const rootStyles = computed(() => [
-      'or-inline-textarea-v3',
-      ...InlineTextarea,
-    ]);
-
-    const control = ref<HTMLTextAreaElement>();
-
-    const controlStyles = computed(() => [
-      ...InlineTextareaControl,
-    ]);
-
-    const actionStyles = computed(() => [
-      ...InlineTextareaAction,
-    ]);
-
-    // State
-    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit, { defaultValue: ref('') });
-    const draft = ref(model.value);
-
-    watch(model, (value) => {
-      draft.value = value;
-    });
-
-    const activated = ref(false);
-
-    const length = computed(() => {
-      return draft.value?.toString().length ?? 0;
-    });
-
-    const maxLength = computed(() => {
-      return attributes.maxlength;
-    });
-
-    // Handlers
-    function onFocus(): void {
-      activated.value = true;
-    }
-
-    function onBlur(): void {
-      if (props.saveOnBlur) {
-        apply();
-      }
-    }
-
-    // Methods
-    function apply(): void {
-      if (draft.value !== model.value) {
-        model.value = draft.value;
-      }
-
-      activated.value = false;
-      nextTick(() => context.emit('apply', model.value));
-    }
-
-    function reset(): void {
-      if (draft.value !== model.value) {
-        draft.value = model.value;
-      }
-
-      activated.value = false;
-      nextTick(() => context.emit('reset', model.value));
-    }
-
-    function focus(): void {
-      control.value?.focus();
-    }
-
-    function blur(): void {
-      control.value?.blur();
-    }
-
-    useTextareaAutosize({
-      element: control,
-      input: draft,
-    });
-
-    return {
-      attributes,
-
-      root,
-      rootStyles,
-
-      control,
-      controlStyles,
-
-      actionStyles,
-
-      model,
-      draft,
-
-      activated,
-
-      length,
-      maxLength,
-
-      onFocus,
-      onBlur,
-
-      apply,
-      reset,
-
-      focus,
-      blur,
-    };
-  },
-});
-</script>
-
-<style scoped>
-textarea {
-  min-width: 0;
-  background: none;
-  outline: none;
-}
-</style>

package/src/components/or-inline-textarea-v3/index.ts

@@ -1,2 +0,0 @@
-export { default as OrInlineTextareaV3 } from './OrInlineTextarea.vue';
-export * from './types';

package/src/components/or-inline-textarea-v3/styles.ts

@@ -1,37 +0,0 @@
-export const InlineTextarea: string[] = [
-  // Layout
-  'layout-column',
-
-  // Spacing
-  'gap-xs',
-];
-
-export const InlineTextareaControl: string[] = [
-  // Box
-  'w-full',
-
-  // Typography
-  'typography-inherit',
-
-  // Theme (placeholder)
-  'placeholder:theme-foreground-outline',
-  'dark:placeholder:theme-foreground-outline-dark',
-
-  // Behavior
-  'resize-none',
-];
-
-export const InlineTextareaAction: string[] = [
-  // Layout
-  'layout-inline-row self-start',
-
-  // Spacing
-  'px-0',
-  'py-sm*',
-
-  'gap-sm',
-
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
-];

package/src/components/or-inline-textarea-v3/types.ts

@@ -1,3 +0,0 @@
-import { ModelValue } from '../../types';
-
-export type InlineTextareaModelValue = ModelValue<string>;

package/src/components/or-input/OrInput.vue

@@ -1,335 +0,0 @@
-<template>
-  <div :class="rootClasses">
-    <!-- Prepend Slot -->
-    <div
-      v-if="$slots.prepend"
-      ref="prependRef"
-      class="or-textbox--prepend"
-    >
-      <slot name="prepend" />
-    </div>
-
-    <!-- Input -->
-    <div class="or-textbox--wrapper">
-      <!--  Label  -->
-      <or-label
-        v-if="$slots['label-default'] || label"
-        :is-required="isRequired"
-        :for="localId"
-      >
-        <template v-slot:default>
-          <slot name="label-default">
-            {{ label }}
-          </slot>
-        </template>
-        <template v-slot:append>
-          <slot name="label-append" />
-        </template>
-      </or-label>
-
-      <div class="or-textbox--input-wrapper">
-        <input
-          :id="localId"
-          ref="inputRef"
-          :value="localValue"
-          v-bind="htmlInputAttrs"
-          :type="htmlType"
-          :disabled="isDisabled"
-          :maxlength="maxLength"
-          :readonly="isReadonly"
-          :class="inputClasses"
-          :placeholder="placeholder"
-          @input="onInput"
-          @focus="onFocus"
-          @blur="onBlur"
-          @keypress="$emit('keypress', $event)"
-          @keyup="$emit('keyup', $event)"
-          @keydown="$emit('keydown', $event)"
-        >
-
-        <slot name="wrapper-end" />
-
-        <div
-          v-if="$slots['input-end']"
-          class="or-textbox--input-end"
-        >
-          <slot name="input-end" />
-        </div>
-      </div>
-
-      <!-- Info -->
-      <or-collapse :is-visible="isShowInfo">
-        <div
-          ref="infoRef"
-          class="or-textbox--info"
-        >
-          <transition
-            mode="out-in"
-            @before-enter="beforeEnter"
-            @enter="enter"
-            @after-enter="cancelRequestAF"
-            @leave="leave"
-            @after-leave="cancelRequestAF"
-          >
-            <or-hint
-              v-if="isShowHint"
-              :key="hint"
-              :hint="hint"
-              class="or-textbox--hint"
-            />
-          </transition>
-          <transition
-            mode="out-in"
-            @before-enter="beforeEnter"
-            @enter="enter"
-            @after-enter="cancelRequestAF"
-            @leave="leave"
-            @after-leave="cancelRequestAF"
-          >
-            <or-error
-              v-if="isShowError"
-              :key="error"
-              :error="error"
-              class="or-textbox--error"
-            />
-          </transition>
-
-          <!-- Counter -->
-          <div
-            v-if="counterString"
-            class="or-textbox--counter"
-            v-text="counterString"
-          />
-        </div>
-      </or-collapse>
-    </div>
-
-    <!--  Append Slot  -->
-    <div
-      v-if="$slots.append"
-      ref="appendRef"
-      class="or-textbox--append"
-    >
-      <slot name="append" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  getCurrentInstance, PropType,
-} from 'vue';
-import { pxToRem } from '../../utils/functions/px-to-rem';
-import {
-  cancelAF,
-  getCS,
-  reflow,
-  requestAF,
-  setStyle,
-} from '../../utils/functions/dom';
-import { OrLabel } from '../or-label';
-import { OrHint } from '../or-hint';
-import { OrError } from '../or-error';
-import { OrCollapse } from '../or-collapse';
-
-export default defineComponent({
-  name: 'OrInput',
-  components: {
-    OrLabel,
-    OrHint,
-    OrError,
-    OrCollapse,
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    htmlId: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    htmlType: {
-      type: String,
-      default: 'text',
-      required: false,
-    },
-    htmlInputAttrs: {
-      type: Object as PropType<Record<string, any>>,
-      default: undefined,
-      required: false,
-    },
-    label: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    error: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    hint: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    maxLength: {
-      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() {
-    const inputRef = ref<HTMLInputElement>();
-
-    return {
-      inputRef,
-    };
-  },
-  data() {
-    return {
-      reqAF: null as any,
-      isFocused: false,
-    };
-  },
-  computed: {
-    localValue(): string {
-      if (this.maxLength && this.modelValue.length > this.maxLength) {
-        return this.modelValue.slice(0, -(this.modelValue.length - this.maxLength));
-      }
-
-      return this.modelValue;
-    },
-    localId(): string {
-      return this.htmlId || `input-${getCurrentInstance()?.uid}`;
-    },
-    hasValue(): boolean {
-      return !!this.localValue?.length;
-    },
-    counterString(): string {
-      return this.maxLength && this.maxLength > 0
-        ? `${this.localValue.length} / ${this.maxLength}`
-        : '';
-    },
-    isInactive(): boolean {
-      return this.isDisabled || this.isReadonly;
-    },
-    isShowError(): boolean {
-      return !!this.error && this.isInvalid;
-    },
-    isShowHint(): boolean {
-      return !!this.hint && !this.isShowError;
-    },
-    isShowInfo(): boolean {
-      return this.isShowError || this.isShowHint || !!this.maxLength;
-    },
-    rootClasses(): (string | Record<string, boolean>)[] {
-      return [
-        'or-textbox',
-        {
-          'is-show-info': this.isShowInfo,
-          'is-small': this.isSmall,
-
-          'has-counter': !!this.maxLength,
-          'has-label': !!this.label || !!this.$slots['label-default'],
-        },
-      ];
-    },
-    inputClasses(): (string | Record<string, boolean>)[] {
-      return [
-        'or-textbox--input',
-        {
-          'is-disabled': this.isDisabled,
-          'is-readonly': this.isReadonly,
-          'is-focused': this.isFocused,
-          'is-required': this.isRequired,
-
-          'has-error': this.isInvalid,
-        },
-      ];
-    },
-  },
-  methods: {
-    focus(): void {
-      this.inputRef?.focus();
-    },
-    onInput(event: Event): void {
-      if (this.isInactive) return;
-
-      this.$emit('update:modelValue', (event.target as HTMLInputElement).value);
-      this.$emit('input', (event.target as HTMLInputElement).value);
-    },
-    onFocus(event: Event): void {
-      this.isFocused = true;
-      this.inputRef?.focus();
-
-      this.$emit('focus', event);
-    },
-    onBlur(event: Event): void {
-      this.isFocused = false;
-      this.inputRef?.blur();
-
-      this.$emit('blur', event);
-    },
-    beforeEnter(el: HTMLElement): void {
-      setStyle(el, 'opacity', 0);
-    },
-    enter(el: HTMLElement): void {
-      const { scrollHeight, parentElement } = el;
-
-      this.reqAF = requestAF((): void => {
-        const pt = parseFloat(getCS(parentElement as HTMLElement).paddingTop);
-        const pb = parseFloat(getCS(parentElement as HTMLElement).paddingBottom);
-
-        const height = scrollHeight + pt + pb;
-
-        if (parentElement) {
-          reflow(parentElement);
-          setStyle(parentElement, 'height', pxToRem(height));
-        }
-
-        setStyle(el, 'opacity', 1);
-      });
-    },
-    leave(el: HTMLElement): void {
-      this.reqAF = requestAF((): void => {
-        el.style.opacity = '0';
-      });
-    },
-    cancelRequestAF() {
-      cancelAF(this.reqAF);
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import "./styles";
-
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-</style>

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

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