@onereach/ui-components 2.70.3-beta.2213.0 → 2.70.3-beta.2224.0

package/dist/bundled/v3/OrNumberInput.vue_vue_type_script_lang-f061d829.js

@@ -0,0 +1,113 @@
+import { defineComponent, ref } from 'vue';
+import './OrInput-704e72ba.js';
+import { s as script$1 } from './OrInput.vue_vue_type_script_lang-409235cc.js';
+
+var script = defineComponent({
+  name: 'OrNumberInput',
+  components: {
+    OrInput: script$1
+  },
+  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);
+        }
+      }
+    }
+  }
+});
+
+export { script as s };

package/dist/bundled/v3/OrPassword.vue_vue_type_script_lang-b75f6543.js

@@ -0,0 +1,99 @@
+import { defineComponent, ref } from 'vue';
+import { useVModel } from '@vueuse/core';
+import './OrInput-704e72ba.js';
+import './OrIconButton-e637158e.js';
+import { u as useToggle } from './useToggle-09b6cb90.js';
+import { b as BUTTON_SIZE } from './constants-c5d1139f.js';
+import { s as script$1 } from './OrInput.vue_vue_type_script_lang-409235cc.js';
+import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-40547ab0.js';
+
+var script = defineComponent({
+  name: 'OrPassword',
+  components: {
+    OrInput: script$1,
+    OrIconButton: script$2
+  },
+  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(props, {
+    emit
+  }) {
+    const inputRef = ref();
+    const localValue = useVModel(props, 'modelValue', emit);
+    const {
+      isActiveToggle,
+      toggle
+    } = useToggle();
+    return {
+      inputRef,
+      localValue,
+      isActiveToggle,
+      toggle
+    };
+  },
+  computed: {
+    currentButtonIcon() {
+      return this.isActiveToggle ? 'visibility' : 'visibility_off';
+    },
+    type() {
+      return this.isActiveToggle ? 'text' : 'password';
+    },
+    size() {
+      return this.isSmall ? BUTTON_SIZE.SMALL : BUTTON_SIZE.DEFAULT;
+    }
+  },
+  methods: {
+    onClick() {
+      var _a;
+      this.toggle();
+      (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
+});
+
+export { script as s };

package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-16fbccc0.js → OrSearch.vue_vue_type_script_lang-5356fa79.js}

@@ -1,6 +1,7 @@
 import { defineComponent, ref } from 'vue';
-import { s as script$1 } from './OrInput-7d4b571a.js';
 import { debouncedWatch } from '@vueuse/core';
+import './OrInput-704e72ba.js';
+import { s as script$1 } from './OrInput.vue_vue_type_script_lang-409235cc.js';
 import './OrIconButton-e637158e.js';
 import { b as BUTTON_SIZE } from './constants-c5d1139f.js';
 import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-40547ab0.js';

package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-ce0b152c.js

@@ -0,0 +1,181 @@
+import { useDraggable, useElementBounding } from '@vueuse/core';
+import _ from 'lodash';
+import { defineComponent, ref, computed, watch } from 'vue';
+
+var OrSidebarPlacement;
+(function (OrSidebarPlacement) {
+  OrSidebarPlacement["left"] = "left";
+  OrSidebarPlacement["right"] = "right";
+})(OrSidebarPlacement || (OrSidebarPlacement = {}));
+
+const SidebarRoot = [
+// Position
+'relative',
+// Layout
+'flex', 'flex-col', 'shrink-0',
+// Box
+'min-h-0', 'p-0'];
+const SidebarRootSides = {
+  [OrSidebarPlacement.left]: [
+  // Borders
+  'border-r-[1px]', 'border-r-solid', 'border-r-secondary dark:border-r-secondary-dark'],
+  [OrSidebarPlacement.right]: [
+  // Borders
+  'border-l-[1px]', 'border-l-solid', 'border-l-secondary dark:border-l-secondary-dark']
+};
+const SidebarResize = [
+// Position
+'absolute', 'inset-y-none', 'z-[1]',
+// Box
+'w-[12px]', 'h-[100%]',
+// Cursor
+'cursor-ew-resize'];
+const SidebarResizeSides = {
+  [OrSidebarPlacement.left]: [
+  // Position
+  '-right-[1px]',
+  // Borders
+  'hover:border-r-2', 'hover:border-r-primary hover:dark:border-r-primary-dark',
+  // Transition
+  'transition-[border-right]'],
+  [OrSidebarPlacement.right]: [
+  // Position
+  '-left-[1px]',
+  // Borders
+  'hover:border-l-2', 'hover:border-l-primary hover:dark:border-l-primary-dark',
+  // Transition
+  'transition-[border-left]']
+};
+const SidebarResizingSides = {
+  [OrSidebarPlacement.left]: [
+  // Borders
+  'border-r-2', 'border-r-primary dark:border-r-primary-dark'],
+  [OrSidebarPlacement.right]: [
+  // Borders
+  'border-l-2', 'border-l-primary dark:border-l-primary-dark']
+};
+const SidebarMain = [
+// Layout
+'flex', 'flex-col', 'grow',
+// Box
+'min-h-0'];
+const SidebarHeader = [
+// Sizing
+'p-md'];
+const SidebarContent = [
+// Layout
+'grow', 'overflow-auto',
+// Sizing
+'p-md'];
+const SidebarFooter = [
+// Sizing
+'p-md',
+// Borders
+'border-t-[1px]', 'border-t-solid', 'border-t-secondary dark:border-t-secondary-dark'];
+
+var script = defineComponent({
+  name: 'OrSidebar',
+  props: {
+    width: {
+      type: Number,
+      required: false,
+      default: 0,
+      validator: value => _.isNumber(value) && value >= 0
+    },
+    minimumWidth: {
+      type: Number,
+      required: false,
+      default: 350,
+      validator: value => _.isNumber(value) && value >= 0
+    },
+    /**
+     * User may put the component on the right or the left side of a container.
+     * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
+     *
+     * Note: the property doesn't reposition the component in the parent container.
+     * @values left, right
+     */
+    side: {
+      type: String,
+      default: OrSidebarPlacement.right,
+      validator: value => _.includes(_.values(OrSidebarPlacement), value)
+    }
+  },
+  emits: ['change:width'],
+  setup(props, {
+    emit
+  }) {
+    // Refs
+    const root = ref();
+    const resizeBar = ref(null);
+    const parentContainer = computed(() => {
+      var _a;
+      return (_a = root.value) === null || _a === void 0 ? void 0 : _a.parentElement;
+    });
+    // State
+    const startPositionX = ref(0);
+    const isResizing = ref(false);
+    const localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
+    // Styles
+    const sidebarStyle = computed(() => ({
+      width: localWidth.value + 'px'
+    }));
+    const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot, ...SidebarRootSides[props.side]]);
+    const resizeStyles = computed(() => [...SidebarResize, ...SidebarResizeSides[props.side], ...(isResizing.value ? SidebarResizingSides[props.side] : [])]);
+    const mainStyles = computed(() => [...SidebarMain]);
+    const headerStyles = computed(() => [...SidebarHeader]);
+    const contentStyles = computed(() => [...SidebarContent]);
+    const footerStyles = computed(() => [...SidebarFooter]);
+    // Effects
+    useDraggable(resizeBar, {
+      preventDefault: true,
+      onStart: (position, event) => {
+        document.body.style.cursor = 'ew-resize';
+        document.body.style.userSelect = 'none';
+        startPositionX.value = event.x;
+        isResizing.value = true;
+      },
+      onMove: position => {
+        const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
+        const newWidth = localWidth.value - delta;
+        localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value : newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
+        startPositionX.value = position.x;
+      },
+      onEnd: () => {
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        isResizing.value = false;
+      }
+    });
+    const {
+      width: maximumWidth
+    } = useElementBounding(parentContainer);
+    watch(() => props.width, newValue => {
+      if (newValue !== localWidth.value) {
+        localWidth.value = newValue > maximumWidth.value ? maximumWidth.value : newValue < props.minimumWidth ? props.minimumWidth : newValue;
+      }
+    });
+    watch(() => props.minimumWidth, newMinimum => {
+      if (newMinimum > localWidth.value) localWidth.value = newMinimum;
+    });
+    watch(maximumWidth, newMaximum => {
+      if (newMaximum < localWidth.value) localWidth.value = newMaximum;
+    });
+    watch(localWidth, val => emit('change:width', val));
+    return {
+      root,
+      resizeBar,
+      isResizing,
+      localWidth,
+      sidebarStyle,
+      rootStyles,
+      resizeStyles,
+      mainStyles,
+      headerStyles,
+      contentStyles,
+      footerStyles
+    };
+  }
+});
+
+export { OrSidebarPlacement as O, script as s };

package/dist/bundled/v3/OrTextarea.vue_vue_type_script_lang-69ea22e9.js

@@ -0,0 +1,187 @@
+import { defineComponent, ref, getCurrentInstance } from 'vue';
+import { p as pxToRem } from './px-to-rem-0b26b83e.js';
+import { s as setStyle, r as requestAF, g as getCS, a as reflow, c as cancelAF } from './dom-d21d0a92.js';
+import './OrLabel-e412c532.js';
+import './OrHint-c9114268.js';
+import './OrError-b43ebad8.js';
+import './OrCollapse-63e83681.js';
+import { s as script$1 } from './OrLabel.vue_vue_type_script_lang-27f8b12d.js';
+import { s as script$2 } from './OrHint.vue_vue_type_script_lang-78598c8e.js';
+import { s as script$3 } from './OrError.vue_vue_type_script_lang-7c39e012.js';
+import { s as script$4 } from './OrCollapse.vue_vue_type_script_lang-65cbb754.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/components/index.d.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-inputs';
+export * from './or-input';
 export * from './or-label';
 export * from './or-label-v3';
 export * from './or-link-v3';
@@ -50,9 +50,11 @@ 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';
@@ -60,6 +62,7 @@ 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';
@@ -83,6 +86,7 @@ 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';