@onereach/ui-components 2.70.0-beta.2159.0 → 2.70.0-beta.2160.0

package/dist/bundled/v3/OrTextarea.vue_vue_type_script_lang-4d16fddd.js

@@ -0,0 +1,187 @@
+import { defineComponent, ref, getCurrentInstance } from 'vue-demi';
+import { p as pxToRem } from './px-to-rem-0b26b83e.js';
+import { s as setStyle, r as requestAF, a as getCS, b as reflow, c as cancelAF } from './dom-28f5f62a.js';
+import './components/OrLabel/OrLabel.js';
+import { s as script$1 } from './OrLabel.vue_vue_type_script_lang-95601b40.js';
+import './components/OrHint/OrHint.js';
+import { s as script$2 } from './OrHint.vue_vue_type_script_lang-5d628c6c.js';
+import './components/OrError/OrError.js';
+import { s as script$3 } from './OrError.vue_vue_type_script_lang-450321b8.js';
+import './components/OrCollapse/OrCollapse.js';
+import { s as script$4 } from './OrCollapse.vue_vue_type_script_lang-76f0f586.js';
+
+var script = defineComponent({
+  name: 'OrTextarea',
+  components: {
+    OrLabel: script$1,
+    OrHint: script$2,
+    OrError: script$3,
+    OrCollapse: script$4
+  },
+  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
+    },
+    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();
+    return {
+      inputRef
+    };
+  },
+  data() {
+    return {
+      reqAF: null,
+      isFocused: false
+    };
+  },
+  computed: {
+    localValue() {
+      if (this.maxLength && this.modelValue.length > this.maxLength) {
+        return this.modelValue.slice(0, -(this.modelValue.length - this.maxLength));
+      }
+      return this.modelValue;
+    },
+    localId() {
+      var _a;
+      return this.htmlId || `input-${(_a = getCurrentInstance()) === null || _a === void 0 ? void 0 : _a.uid}`;
+    },
+    hasValue() {
+      return !!this.localValue.length;
+    },
+    counterString() {
+      return this.maxLength && this.maxLength > 0 ? `${this.localValue.length} / ${this.maxLength}` : '';
+    },
+    isInactive() {
+      return this.isDisabled || this.isReadonly;
+    },
+    isShowError() {
+      return !!this.error && this.isInvalid;
+    },
+    isShowHint() {
+      return !!this.hint && !this.isShowError;
+    },
+    isShowInfo() {
+      return this.isShowError || this.isShowHint || !!this.maxLength;
+    },
+    rootClasses() {
+      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() {
+      return ['or-textbox--input-textarea', {
+        'is-disabled': this.isDisabled,
+        'is-readonly': this.isReadonly,
+        'is-focused': this.isFocused,
+        'is-required': this.isRequired,
+        'has-error': this.isInvalid
+      }];
+    }
+  },
+  methods: {
+    focus() {
+      var _a;
+      (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    calcTextareaHeight() {
+      var _a;
+      if (this.inputRef) {
+        setStyle(this.inputRef, 'height', 0);
+        setStyle(this.inputRef, 'height', pxToRem((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.scrollHeight));
+      }
+    },
+    onInput(event) {
+      if (this.isInactive) return;
+      this.calcTextareaHeight();
+      this.$emit('update:modelValue', event.target.value);
+      this.$emit('input', event.target.value);
+    },
+    onFocus(event) {
+      var _a;
+      this.isFocused = true;
+      (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+      this.$emit('focus', event);
+    },
+    onBlur(event) {
+      var _a;
+      this.isFocused = false;
+      (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.blur();
+      this.$emit('blur', event);
+    },
+    beforeEnter(el) {
+      setStyle(el, 'opacity', 0);
+    },
+    enter(el) {
+      const {
+        scrollHeight,
+        parentElement
+      } = el;
+      this.reqAF = requestAF(() => {
+        const pt = parseFloat(getCS(parentElement).paddingTop);
+        const pb = parseFloat(getCS(parentElement).paddingBottom);
+        const height = scrollHeight + pt + pb;
+        if (parentElement) {
+          reflow(parentElement);
+          setStyle(parentElement, 'height', pxToRem(height));
+        }
+        setStyle(el, 'opacity', 1);
+      });
+    },
+    leave(el) {
+      this.reqAF = requestAF(() => {
+        el.style.opacity = '0';
+      });
+    },
+    cancelRequestAF() {
+      cancelAF(this.reqAF);
+    }
+  }
+});
+
+export { script as s };

package/dist/bundled/v3/OrTextarea.vue_vue_type_script_lang-ee596578.js

@@ -0,0 +1,117 @@
+import { defineComponent, getCurrentInstance, ref, computed } from 'vue-demi';
+import './components/OrErrorV3/OrErrorV3.js';
+import './components/OrHintV3/OrHintV3.js';
+import './components/OrInputBoxV3/OrInputBoxV3.js';
+import './components/OrLabelV3/OrLabelV3.js';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import { s as script$1 } from './OrError.vue_vue_type_script_lang-6954e9de.js';
+import { s as script$2 } from './OrHint.vue_vue_type_script_lang-7dc58eba.js';
+import { s as script$3, I as InputBoxSize } from './OrInputBox.vue_vue_type_script_lang-d3b211c2.js';
+import { s as script$4 } from './OrLabel.vue_vue_type_script_lang-55e01b7a.js';
+
+const TextareaRoot = [
+// Layout
+'layout-column',
+// Spacing
+'gap-xs'];
+const TextareaControl = [
+// Layout
+'grow',
+// Typography
+'typography-inherit',
+// Theme
+'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark'];
+
+var script = defineComponent({
+  name: 'OrTextarea',
+  components: {
+    OrError: script$1,
+    OrHint: script$2,
+    OrInputBox: script$3,
+    OrLabel: script$4
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    },
+    value: {
+      type: String,
+      default: undefined
+    },
+    size: {
+      type: String,
+      default: InputBoxSize.M
+    },
+    label: {
+      type: String,
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    },
+    error: {
+      type: String,
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
+  expose: ['root'],
+  setup(props, context) {
+    var _a;
+    const currentInstance = getCurrentInstance();
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-textarea', ...TextareaRoot, classAttribute.value]);
+    const controlStyles = computed(() => [...TextareaControl]);
+    // State
+    const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
+      set: value => {
+        context.emit('input', value);
+        context.emit('update:modelValue', value);
+      }
+    });
+    const invalid = computed(() => !!props.error);
+    const readonly = computed(() => context.attrs.readonly);
+    const currentLength = computed(() => {
+      var _a, _b;
+      return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
+    });
+    const maxLength = computed(() => context.attrs.maxlength);
+    return {
+      root,
+      rootStyles,
+      controlStyles,
+      controlId,
+      proxyModelValue,
+      invalid,
+      readonly,
+      currentLength,
+      maxLength
+    };
+  }
+});
+
+export { script as s };

package/dist/bundled/v3/OrTextbox.vue_vue_type_script_lang-a93cabf9.js

@@ -0,0 +1,363 @@
+import { defineComponent, ref, computed, getCurrentInstance } from 'vue-demi';
+import { p as pxToRem } from './px-to-rem-0b26b83e.js';
+import { s as setStyle, r as requestAF, a as getCS, b as reflow, c as cancelAF } from './dom-28f5f62a.js';
+import _ from 'lodash';
+import './components/OrLabel/OrLabel.js';
+import './components/OrIconButtonV2/OrIconButtonV2.js';
+import './components/OrHint/OrHint.js';
+import './components/OrError/OrError.js';
+import './components/OrCollapse/OrCollapse.js';
+import { u as useToggle } from './useToggle-29e4d7c7.js';
+import { s as script$1 } from './OrLabel.vue_vue_type_script_lang-95601b40.js';
+import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-1d09db94.js';
+import { s as script$3 } from './OrHint.vue_vue_type_script_lang-5d628c6c.js';
+import { s as script$4 } from './OrError.vue_vue_type_script_lang-450321b8.js';
+import { s as script$5 } from './OrCollapse.vue_vue_type_script_lang-76f0f586.js';
+
+var TextboxTypes;
+(function (TextboxTypes) {
+  TextboxTypes["text"] = "text";
+  TextboxTypes["number"] = "number";
+  TextboxTypes["password"] = "password";
+  TextboxTypes["search"] = "search";
+  TextboxTypes["textarea"] = "textarea";
+  TextboxTypes["url"] = "url";
+})(TextboxTypes || (TextboxTypes = {}));
+
+var script = defineComponent({
+  name: 'OrTextbox',
+  components: {
+    OrLabel: script$1,
+    OrIconButton: script$2,
+    OrHint: script$3,
+    OrError: script$4,
+    OrCollapse: script$5
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+      required: false,
+      validator: _.isString
+    },
+    id: {
+      type: String,
+      default: '',
+      required: false,
+      validator: _.isString
+    },
+    placeholder: {
+      type: String,
+      default: '',
+      required: false,
+      validator: _.isString
+    },
+    type: {
+      type: String,
+      default: TextboxTypes.text,
+      required: false,
+      validator: _.isString
+    },
+    label: {
+      type: String,
+      default: '',
+      required: false,
+      validator: _.isString
+    },
+    error: {
+      type: String,
+      default: '',
+      required: false,
+      validator: _.isString
+    },
+    hint: {
+      type: String,
+      default: '',
+      required: false,
+      validator: _.isString
+    },
+    minValue: {
+      type: [Number, undefined],
+      default: undefined,
+      required: false,
+      validator: _.isNumber
+    },
+    maxValue: {
+      type: [Number, undefined],
+      default: undefined,
+      required: false,
+      validator: _.isNumber
+    },
+    stepValue: {
+      type: [Number, undefined],
+      default: undefined,
+      required: false,
+      validator: _.isNumber
+    },
+    maxLength: {
+      type: [Number, undefined],
+      default: undefined,
+      required: false,
+      validator: _.isNumber
+    },
+    height: {
+      type: [Number, String, undefined],
+      default: undefined,
+      required: false,
+      validator: value => _.isNumber(value) || _.isString(value) || _.isUndefined(value)
+    },
+    maxWidth: {
+      type: [Number, String, undefined],
+      default: undefined,
+      required: false,
+      validator: value => _.isNumber(value) || _.isString(value) || _.isUndefined(value)
+    },
+    isSmall: {
+      type: Boolean,
+      default: false,
+      required: false,
+      validator: _.isBoolean
+    },
+    isRequired: {
+      type: Boolean,
+      default: false,
+      required: false,
+      validator: _.isBoolean
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+      validator: _.isBoolean
+    },
+    isReadonly: {
+      type: Boolean,
+      default: false,
+      required: false,
+      validator: _.isBoolean
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+      required: false,
+      validator: _.isBoolean
+    }
+  },
+  emits: ['focus', 'blur', 'update:modelValue', 'input', 'clear'],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    console.warn('OrTextbox is being deprecated, consider using OrTextboxV2.');
+    const {
+      isActiveToggle,
+      toggle
+    } = useToggle();
+    // refs
+    const isFocused = ref(false);
+    const reqAF = ref(null);
+    const inputRef = ref(null);
+    const localValue = computed(() => {
+      if (props.minValue !== undefined && +props.modelValue < props.minValue) {
+        return props.minValue.toString();
+      }
+      if (props.maxValue !== undefined && +props.modelValue > props.maxValue) {
+        return props.maxValue.toString();
+      }
+      if (props.maxLength && props.modelValue.length > props.maxLength) {
+        return props.modelValue.slice(0, -(props.modelValue.length - props.maxLength));
+      }
+      return props.modelValue;
+    });
+    const localType = computed(() => isActiveToggle.value ? TextboxTypes.text : props.type);
+    const localId = computed(() => {
+      var _a;
+      return props.id || `input-${(_a = getCurrentInstance()) === null || _a === void 0 ? void 0 : _a.uid}`;
+    });
+    const hasValue = computed(() => !!localValue.value.length);
+    const counterString = computed(() => props.maxLength && props.maxLength > 0 ? `${localValue.value.length} / ${props.maxLength}` : '');
+    const isInactive = computed(() => props.isDisabled || props.isReadonly);
+    const isPasswordType = computed(() => props.type === TextboxTypes.password);
+    const isTextareaType = computed(() => props.type === TextboxTypes.textarea);
+    const isSearchType = computed(() => props.type === TextboxTypes.search);
+    const isShowError = computed(() => !!props.error && props.isInvalid);
+    const isShowInfo = computed(() => isShowError.value || !!props.hint || !!props.maxLength);
+    const isShowHint = computed(() => !!props.hint && !isShowError.value);
+    const currentButtonIcon = computed(() => {
+      if (isPasswordType.value) {
+        return isActiveToggle.value ? 'visibility' : 'visibility_off';
+      }
+      if (isSearchType.value) {
+        return hasValue.value ? 'close' : 'search';
+      }
+      return '';
+    });
+    const rootClasses = computed(() => ['or-textbox', {
+      'is-show-info': isShowInfo.value,
+      'is-small': props.isSmall,
+      'has-counter': !!props.maxLength,
+      'has-label': !!props.label || !!slots['label-default']
+    }]);
+    const inputClasses = computed(() => ({
+      'or-textbox--input': !isTextareaType.value,
+      'or-textbox--input-textarea': isTextareaType.value,
+      'is-disabled': props.isDisabled,
+      'is-readonly': props.isReadonly,
+      'is-focused': isFocused.value,
+      'is-required': props.isRequired,
+      'has-error': props.isInvalid
+    }));
+    function onClickButton() {
+      // pw logic
+      if (isPasswordType.value) return toggle();
+      // search type logic
+      if (isSearchType.value && localValue.value.length) return clearable();
+    }
+    function calcTextareaHeight() {
+      var _a;
+      if (isTextareaType.value && inputRef.value) {
+        setStyle(inputRef.value, 'height', 0);
+        setStyle(inputRef.value, 'height', pxToRem((_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.scrollHeight));
+      }
+    }
+    function onInput(event) {
+      if (isInactive.value) return;
+      if (isTextareaType.value) calcTextareaHeight();
+      emit('update:modelValue', event.target.value);
+      emit('input', event.target.value);
+    }
+    function onFocus(event) {
+      var _a;
+      isFocused.value = true;
+      (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+      emit('focus', event);
+    }
+    function onBlur(event) {
+      var _a;
+      isFocused.value = false;
+      (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.blur();
+      emit('blur', event);
+    }
+    function clearable() {
+      var _a;
+      emit('update:modelValue', '');
+      emit('clear');
+      (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    return {
+      // refs
+      inputRef,
+      reqAF,
+      // computed
+      rootClasses,
+      inputClasses,
+      localValue,
+      localType,
+      localId,
+      hasValue,
+      counterString,
+      isShowError,
+      isShowInfo,
+      isShowHint,
+      isInactive,
+      isTextareaType,
+      isSearchType,
+      isPasswordType,
+      currentButtonIcon,
+      // methods
+      onClickButton,
+      onInput,
+      onFocus,
+      onBlur
+    };
+  },
+  computed: {
+    maxWidthStyle() {
+      if (!this.maxWidth) return {};
+      const permittedUnits = ['px', '%', 'em', 'rem', 'vw'];
+      if (_.isString(this.maxWidth) && this.maxWidth !== '') {
+        const unit = this.maxWidth.replace(/[^a-z,%]/gi, '');
+        const isIncludedUnit = permittedUnits.includes(unit);
+        if (!isIncludedUnit && typeof this.maxWidth !== 'number') {
+          console.warn('The max-width unit doesn\'t include in the permitted unit list', permittedUnits);
+        }
+        return isIncludedUnit ? {
+          maxWidth: this.maxWidth
+        } : {
+          maxWidth: pxToRem(parseInt(this.maxWidth))
+        };
+      }
+      return _.isNumber(this.maxWidth) && this.maxWidth > 0 ? {
+        maxWidth: pxToRem(this.maxWidth)
+      } : {};
+    },
+    heightStyle() {
+      if (!this.height) return {};
+      const permittedUnits = ['px', 'em', 'rem', 'vh'];
+      if (_.isString(this.height) && this.height !== '') {
+        const unit = this.height.replace(/[^a-z]/gi, '');
+        const isIncludedUnit = permittedUnits.includes(unit);
+        if (!isIncludedUnit && typeof this.height !== 'number') {
+          console.warn('The height unit doesn\'t include in the permitted unit list', permittedUnits);
+        }
+        return isIncludedUnit ? {
+          height: this.height
+        } : {
+          height: pxToRem(parseInt(this.height))
+        };
+      }
+      return _.isNumber(this.height) && this.height > 0 ? {
+        height: pxToRem(this.height)
+      } : {};
+    },
+    rootStyle() {
+      return {
+        ...this.maxWidthStyle
+      };
+    },
+    inputStyle() {
+      return {
+        ...this.heightStyle
+      };
+    }
+  },
+  methods: {
+    focus() {
+      var _a;
+      (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    beforeEnter(el) {
+      setStyle(el, 'opacity', 0);
+    },
+    enter(el) {
+      const {
+        scrollHeight,
+        parentElement
+      } = el;
+      this.reqAF = requestAF(() => {
+        const pt = parseFloat(getCS(parentElement).paddingTop);
+        const pb = parseFloat(getCS(parentElement).paddingBottom);
+        const height = scrollHeight + pt + pb;
+        if (parentElement) {
+          reflow(parentElement);
+          setStyle(parentElement, 'height', pxToRem(height));
+        }
+        setStyle(el, 'opacity', 1);
+      });
+    },
+    leave(el) {
+      this.reqAF = requestAF(() => {
+        el.style.opacity = '0';
+      });
+    },
+    cancelRequestAF() {
+      cancelAF(this.reqAF);
+    }
+  }
+});
+
+export { TextboxTypes as T, script as s };