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

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/OrSidebar-a62972f5.js

@@ -0,0 +1,206 @@
+import { useDraggable, useElementBounding } from '@vueuse/core';
+import _ from 'lodash';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode } 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
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("aside", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
+    style: normalizeStyle(_ctx.sidebarStyle)
+  }, [createElementVNode("div", {
+    ref: "resizeBar",
+    class: normalizeClass(_ctx.resizeStyles)
+  }, null, 2 /* CLASS */), createElementVNode("div", {
+    class: normalizeClass(_ctx.mainStyles)
+  }, [_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(_ctx.headerStyles)
+  }, [renderSlot(_ctx.$slots, "header")], 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
+    class: normalizeClass(_ctx.contentStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 2 /* CLASS */), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(_ctx.footerStyles)
+  }, [renderSlot(_ctx.$slots, "footer")], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
+}
+
+script.render = render;
+script.__file = "src/components/or-sidebar-v3/OrSidebar.vue";
+
+export { OrSidebarPlacement as O, script as s };