@onereach/ui-components 2.71.2-beta.2241.0 → 2.71.2

package/dist/esm/v3/OrPassword-b0cbb578.js

@@ -0,0 +1,162 @@
+import { defineComponent, ref } from 'vue-demi';
+import { useVModel } from '@vueuse/core';
+import { s as script$1 } from './OrInput-81125804.js';
+import { u as useToggle } from './useToggle-29e4d7c7.js';
+import { a as script$2, c as BUTTON_SIZE } from './OrIconButton-8be9c89f.js';
+import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, renderSlot } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.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();
+    }
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon_button = resolveComponent("or-icon-button");
+  const _component_or_input = resolveComponent("or-input");
+  return openBlock(), createBlock(_component_or_input, {
+    ref: "inputRef",
+    modelValue: _ctx.localValue,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.localValue = $event),
+    class: "or-password",
+    "html-id": _ctx.htmlId,
+    placeholder: _ctx.placeholder,
+    "html-type": _ctx.type,
+    label: _ctx.label,
+    error: _ctx.error,
+    hint: _ctx.hint,
+    "max-length": _ctx.maxLength,
+    "is-small": _ctx.isSmall,
+    "is-required": _ctx.isRequired,
+    "is-disabled": _ctx.isDisabled,
+    "is-readonly": _ctx.isReadonly,
+    "is-invalid": _ctx.isInvalid,
+    onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
+    onBlur: _cache[2] || (_cache[2] = $event => _ctx.$emit('blur', $event)),
+    onInput: _cache[3] || (_cache[3] = $event => _ctx.$emit('input', $event)),
+    onKeypress: _cache[4] || (_cache[4] = $event => _ctx.$emit('keypress', $event)),
+    onKeyup: _cache[5] || (_cache[5] = $event => _ctx.$emit('keyup', $event)),
+    onKeydown: _cache[6] || (_cache[6] = $event => _ctx.$emit('keydown', $event))
+  }, createSlots({
+    "wrapper-end": withCtx(() => [createVNode(_component_or_icon_button, {
+      icon: _ctx.currentButtonIcon,
+      "icon-color": "neutral-4",
+      size: _ctx.size,
+      onClick: _ctx.onClick
+    }, null, 8 /* PROPS */, ["icon", "size", "onClick"])]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.$slots.prepend ? {
+    name: "prepend",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
+    key: "0"
+  } : undefined, _ctx.$slots['label-default'] ? {
+    name: "label-default",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "label-default")]),
+    key: "1"
+  } : undefined, _ctx.$slots['label-append'] ? {
+    name: "label-append",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "label-append")]),
+    key: "2"
+  } : undefined, _ctx.$slots['input-end'] ? {
+    name: "input-end",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "input-end")]),
+    key: "3"
+  } : undefined, _ctx.$slots.append ? {
+    name: "append",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
+    key: "4"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "html-id", "placeholder", "html-type", "label", "error", "hint", "max-length", "is-small", "is-required", "is-disabled", "is-readonly", "is-invalid"]);
+}
+
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-4b6cde50 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-4b6cde50 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-password .or-icon-button-root[data-v-4b6cde50] {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  z-index: 1;\n  transform: translate(-0.625rem, -50%);\n}\n.or-password[data-v-4b6cde50] .or-textbox--input {\n  padding-right: calc(0.625rem + 1.625rem);\n}\n.or-password.is-small[data-v-4b6cde50] .or-textbox--input {\n  padding-right: calc(0.625rem + 1.5rem);\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-4b6cde50";
+script.__file = "src/components/or-password/OrPassword.vue";
+
+export { script as s };

package/dist/esm/v3/OrSearch-11fdf667.js

@@ -0,0 +1,188 @@
+import { defineComponent, ref } from 'vue-demi';
+import { s as script$1 } from './OrInput-81125804.js';
+import { debouncedWatch } from '@vueuse/core';
+import { a as script$2, c as BUTTON_SIZE } from './OrIconButton-8be9c89f.js';
+import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, normalizeStyle, renderSlot } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+
+var script = defineComponent({
+  name: 'OrSearch',
+  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
+    },
+    debounce: {
+      type: Number,
+      default: 500,
+      required: false
+    },
+    isUsingTrim: {
+      type: Boolean,
+      default: true,
+      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', 'search', 'clear', 'keypress', 'keyup', 'keydown'],
+  setup(props, {
+    emit
+  }) {
+    var _a;
+    const inputRef = ref();
+    const localValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : '');
+    debouncedWatch(localValue, () => {
+      emit('search', props.isUsingTrim ? localValue.value.trim() : localValue.value);
+    }, {
+      debounce: +props.debounce
+    });
+    return {
+      inputRef,
+      localValue
+    };
+  },
+  computed: {
+    hasValue() {
+      var _a;
+      return !!((_a = this.localValue) === null || _a === void 0 ? void 0 : _a.length);
+    },
+    currentButtonIcon() {
+      return this.hasValue ? 'close' : 'search';
+    },
+    size() {
+      return this.isSmall ? BUTTON_SIZE.SMALL : BUTTON_SIZE.DEFAULT;
+    }
+  },
+  watch: {
+    modelValue(val) {
+      if (this.localValue !== val) this.localValue = val;
+    }
+  },
+  methods: {
+    onClick() {
+      var _a;
+      if (this.hasValue) {
+        this.localValue = '';
+        this.$emit('update:modelValue', '');
+        this.$emit('clear');
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+    },
+    onModelValueUpdate(value) {
+      this.localValue = value;
+      this.$emit('update:modelValue', value);
+    }
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon_button = resolveComponent("or-icon-button");
+  const _component_or_input = resolveComponent("or-input");
+  return openBlock(), createBlock(_component_or_input, {
+    ref: "inputRef",
+    class: "or-search",
+    "model-value": _ctx.localValue,
+    "html-id": _ctx.htmlId,
+    placeholder: _ctx.placeholder,
+    "html-type": "search",
+    label: _ctx.label,
+    error: _ctx.error,
+    hint: _ctx.hint,
+    "max-length": _ctx.maxLength,
+    "is-small": _ctx.isSmall,
+    "is-required": _ctx.isRequired,
+    "is-disabled": _ctx.isDisabled,
+    "is-readonly": _ctx.isReadonly,
+    "is-invalid": _ctx.isInvalid,
+    onFocus: _cache[0] || (_cache[0] = $event => _ctx.$emit('focus', $event)),
+    onBlur: _cache[1] || (_cache[1] = $event => _ctx.$emit('blur', $event)),
+    "onUpdate:modelValue": _ctx.onModelValueUpdate,
+    onInput: _cache[2] || (_cache[2] = $event => _ctx.$emit('input', $event)),
+    onKeypress: _cache[3] || (_cache[3] = $event => _ctx.$emit('keypress', $event)),
+    onKeyup: _cache[4] || (_cache[4] = $event => _ctx.$emit('keyup', $event)),
+    onKeydown: _cache[5] || (_cache[5] = $event => _ctx.$emit('keydown', $event))
+  }, createSlots({
+    "wrapper-end": withCtx(() => [createVNode(_component_or_icon_button, {
+      icon: _ctx.currentButtonIcon,
+      style: normalizeStyle(!_ctx.hasValue ? {
+        pointerEvents: 'none'
+      } : null),
+      "icon-color": "neutral-4",
+      size: _ctx.size,
+      onClick: _ctx.onClick
+    }, null, 8 /* PROPS */, ["icon", "style", "size", "onClick"])]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.$slots.prepend ? {
+    name: "prepend",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
+    key: "0"
+  } : undefined, _ctx.$slots['label-default'] ? {
+    name: "label-default",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "label-default")]),
+    key: "1"
+  } : undefined, _ctx.$slots['label-append'] ? {
+    name: "label-append",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "label-append")]),
+    key: "2"
+  } : undefined, _ctx.$slots['input-end'] ? {
+    name: "input-end",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "input-end")]),
+    key: "3"
+  } : undefined, _ctx.$slots.append ? {
+    name: "append",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
+    key: "4"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["model-value", "html-id", "placeholder", "label", "error", "hint", "max-length", "is-small", "is-required", "is-disabled", "is-readonly", "is-invalid", "onUpdate:modelValue"]);
+}
+
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-056f5f90 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-056f5f90 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-search .or-icon-button-root[data-v-056f5f90] {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  z-index: 1;\n  transform: translate(-0.625rem, -50%);\n}\n.or-search[data-v-056f5f90] .or-textbox--input {\n  padding-right: calc(0.625rem + 1.625rem);\n}\n.or-search.is-small[data-v-056f5f90] .or-textbox--input {\n  padding-right: calc(0.625rem + 1.5rem);\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-056f5f90";
+script.__file = "src/components/or-search/OrSearch.vue";
+
+export { script as s };

package/dist/esm/v3/{OrSearch-10d09806.js → OrSearch-e15955a7.js}

@@ -1,6 +1,6 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { s as script$1 } from './OrInput-8a4573cd.js';
+import { s as script$1 } from './OrInput-6fb81556.js';
 import { a as InputBoxSize } from './OrInputBox-e16ade90.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
 

package/dist/esm/v3/{OrSelect-1e4c6062.js → OrSelect-027b5e8f.js}

@@ -8,7 +8,7 @@ import { s as script$3 } from './OrExpansionPanel-3a4282da.js';
 import { s as script$4 } from './OrHint-6863124f.js';
 import { s as script$5 } from './OrIcon-34f59f73.js';
 import { s as script$7, a as InputBoxSize } from './OrInputBox-e16ade90.js';
-import { s as script$6 } from './OrInput-8a4573cd.js';
+import { s as script$6 } from './OrInput-6fb81556.js';
 import { s as script$8 } from './OrLabel-f700f9fb.js';
 import { s as script$9 } from './OrMenuItem-58707d47.js';
 import { s as script$a } from './OrPopover-40217b49.js';