@onereach/ui-components 8.5.0 → 8.5.1-beta.3662.0

package/dist/bundled/v3/components/OrTagInputV3/OrTagInput.vue.d.ts

@@ -0,0 +1,150 @@
+import { PropType } from 'vue-demi';
+import { TagsOverflow } from '../or-tags-v3';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    hint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    error: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disableDefaultStyles: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflow: {
+        type: PropType<"default" | "wrap" | "hidden" | "scroll">;
+        default: TagsOverflow;
+    };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    control: import("vue-demi").Ref<HTMLInputElement | undefined>;
+    inputBox: import("vue-demi").Ref<any>;
+    tags: import("vue-demi").Ref<any>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    controlStyles: import("vue-demi").ComputedRef<string[]>;
+    itemStyles: import("vue-demi").ComputedRef<string[]>;
+    controlInlineStyles: import("vue-demi").ComputedRef<{
+        width: string;
+    }>;
+    controlAttributes: {
+        required: boolean | undefined;
+        minlength: number | undefined;
+        maxlength: number | undefined;
+        pattern: string | undefined;
+        min: number | undefined;
+        max: number | undefined;
+        step: number | undefined;
+        readonly: boolean | undefined;
+        disabled: boolean | undefined;
+        'force-state': string | undefined;
+        id: string | undefined;
+    };
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string[]>;
+    draftModelValue: import("vue-demi").Ref<string>;
+    currentLength: import("vue-demi").ComputedRef<number>;
+    maxLength: import("vue-demi").ComputedRef<number | undefined>;
+    activated: import("vue-demi").Ref<boolean>;
+    showControl: import("vue-demi").ComputedRef<boolean>;
+    focus: () => void;
+    blur: () => void;
+    add: () => void;
+    activate: () => void;
+    deactivate: () => void;
+    remove: (value: string) => void;
+    reset: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "keydown" | "keyup" | "focus" | "blur" | "reset")[], "update:modelValue" | "keydown" | "keyup" | "focus" | "blur" | "reset", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    hint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    error: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disableDefaultStyles: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflow: {
+        type: PropType<"default" | "wrap" | "hidden" | "scroll">;
+        default: TagsOverflow;
+    };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onKeydown?: ((...args: any[]) => any) | undefined;
+    onKeyup?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onReset?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string[];
+    label: string;
+    placeholder: string;
+    hint: string;
+    error: string | boolean;
+    required: boolean;
+    readonly: boolean;
+    disabled: boolean;
+    disableDefaultStyles: boolean;
+    overflow: "default" | "wrap" | "hidden" | "scroll";
+    enableClear: boolean;
+}>;
+export default _default;

package/dist/bundled/v3/components/OrTagInputV3/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrTagInputV3 } from './OrTagInput.vue';
+export * from './props';

package/dist/bundled/v3/components/OrTagInputV3/index.js

@@ -0,0 +1,2 @@
+export { s as OrTagInputV3 } from '../OrTagInputV3-293d7ddb.js';
+export { I as TagInputSize } from '../OrInputBoxV3-a079251d.js';

package/dist/bundled/v3/components/OrTagInputV3/props.d.ts

@@ -0,0 +1 @@
+export { InputBoxSize as TagInputSize } from '../or-input-box-v3';

package/dist/bundled/v3/components/OrTagInputV3/props.js

@@ -0,0 +1 @@
+export { I as TagInputSize } from '../OrInputBoxV3-a079251d.js';

package/dist/bundled/v3/components/OrTagInputV3/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const TagInput: string[];
+export declare const TagInputControl: string[];
+export declare const TagInputItem: string[];

package/dist/bundled/v3/components/OrTagInputV3/styles.js

@@ -0,0 +1 @@
+export { T as TagInput, a as TagInputControl, b as TagInputItem } from '../OrTagInputV3-293d7ddb.js';

package/dist/bundled/v3/components/OrTagInputV3-293d7ddb.js

@@ -0,0 +1,330 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createSlots, createElementVNode, withDirectives, mergeProps, withKeys, vModelDynamic, vShow } from 'vue';
+import { s as styleInject } from './OrAvatar-bfa6fd65.js';
+import { s as script$4 } from './OrInputBoxV3-a079251d.js';
+import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
+import { b as useIdAttribute, c as useControlAttributes, e as useValidationAttributes, u as useProxyModelValue, o as onClickOutside } from './OrBottomSheetV3-199292db.js';
+import { s as script$1 } from './OrErrorV3-f61387d6.js';
+import { s as script$2 } from './OrHintV3-1fcfaa19.js';
+import { s as script$3 } from './OrIconButtonV3-691e3bcd.js';
+import { s as script$5 } from './OrLabelV3-5fd72248.js';
+import { s as script$6, T as TagsOverflow } from './OrTagsV3-cca93357.js';
+
+const TagInput = [
+// Layout
+'layout-column',
+// Spacing
+'gap-xs'];
+const TagInputControl = [
+// Layout
+// 'flex-auto',
+// Typography
+'typography-inherit',
+// Theme (placeholder)
+'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark'];
+const TagInputItem = [
+// Box
+'!min-h-0'];
+
+var script = defineComponent({
+  components: {
+    OrError: script$1,
+    OrHint: script$2,
+    OrIconButton: script$3,
+    OrInputBox: script$4,
+    OrLabel: script$5,
+    OrTags: script$6
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    label: {
+      type: String,
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    },
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false
+    },
+    overflow: {
+      type: String,
+      default: TagsOverflow.Hidden
+    },
+    // todo: review default state, disabling will breaking
+    enableClear: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur', 'reset'],
+  expose: ['root', 'focus', 'blur'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const control = ref();
+    const inputBox = ref();
+    const tags = ref();
+    // Props
+    const {
+      modelValue,
+      overflow,
+      placeholder,
+      disabled,
+      readonly
+    } = toRefs(props);
+    // Styles
+    const rootStyles = computed(() => ['or-tag-input-v3', ...TagInput]);
+    const controlStyles = computed(() => [...TagInputControl]);
+    const itemStyles = computed(() => [...TagInputItem]);
+    // State
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes()
+    });
+    const activated = ref(false);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
+    const draftModelValue = ref('');
+    const currentLength = computed(() => {
+      var _a, _b;
+      return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    });
+    const maxLength = computed(() => controlAttributes.maxlength);
+    const controlInlineStyles = computed(() => {
+      var _a, _b;
+      const chars = draftModelValue.value.length > 0 ? draftModelValue.value.length : currentLength.value === 0 ? (_b = (_a = placeholder.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 : 0;
+      return {
+        width: `${Math.max(chars + 1 || 0, 3)}ch`
+      };
+    });
+    const showControl = computed(() => {
+      return draftModelValue.value.length > 0 || currentLength.value === 0 || activated.value;
+    });
+    // Methods
+    function focus() {
+      var _a;
+      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function blur() {
+      var _a;
+      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    function deactivate() {
+      activated.value = false;
+      nextTick(() => blur());
+      context.emit('blur');
+    }
+    function activate() {
+      if (disabled.value || readonly.value) return;
+      activated.value = true;
+      nextTick(() => focus());
+      context.emit('focus');
+    }
+    function add() {
+      var _a;
+      const newItem = (_a = draftModelValue.value) === null || _a === void 0 ? void 0 : _a.trim();
+      if (!newItem) return;
+      if (proxyModelValue.value.includes(newItem)) return;
+      if (maxLength.value && currentLength.value >= maxLength.value) return;
+      proxyModelValue.value = [...proxyModelValue.value, newItem];
+      draftModelValue.value = '';
+    }
+    function remove(value) {
+      proxyModelValue.value = proxyModelValue.value.filter(item => item !== value);
+    }
+    function reset() {
+      proxyModelValue.value = [];
+      draftModelValue.value = '';
+      context.emit('reset');
+    }
+    // Effects
+    onClickOutside(inputBox, () => {
+      var _a, _b;
+      if (activated.value === false || ((_b = (_a = tags.value) === null || _a === void 0 ? void 0 : _a.overflowPopover) === null || _b === void 0 ? void 0 : _b.state) === 'open') return;
+      deactivate();
+    });
+    watch(proxyModelValue, (items, prevItems) => {
+      var _a;
+      if (items.length != prevItems.length && overflow.value === TagsOverflow.Scroll) {
+        ((_a = tags.value) === null || _a === void 0 ? void 0 : _a.scrollToEnd)();
+      }
+    });
+    return {
+      root,
+      control,
+      inputBox,
+      tags,
+      rootStyles,
+      controlStyles,
+      itemStyles,
+      controlInlineStyles,
+      controlAttributes,
+      proxyModelValue,
+      draftModelValue,
+      currentLength,
+      maxLength,
+      activated,
+      showControl,
+      focus,
+      blur,
+      add,
+      activate,
+      deactivate,
+      remove,
+      reset
+    };
+  }
+});
+
+const _hoisted_1 = {
+  class: "inline-flex w-fit max-w-full"
+};
+const _hoisted_2 = ["placeholder", "readonly", "disabled"];
+const _hoisted_3 = {
+  class: /*#__PURE__*/normalizeClass(['contents'])
+};
+const _hoisted_4 = {
+  class: /*#__PURE__*/normalizeClass(['contents'])
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrLabel = resolveComponent("OrLabel");
+  const _component_OrTags = resolveComponent("OrTags");
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  const _component_OrInputBox = resolveComponent("OrInputBox");
+  const _component_OrHint = resolveComponent("OrHint");
+  const _component_OrError = resolveComponent("OrError");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.label ? (openBlock(), createBlock(_component_OrLabel, {
+    key: 0,
+    "control-id": _ctx.controlAttributes.id,
+    variant: 'input',
+    required: _ctx.required,
+    disabled: _ctx.disabled
+  }, {
+    addon: withCtx(() => [renderSlot(_ctx.$slots, "addon")]),
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.label) + " ", 1 /* TEXT */)]),
+
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["control-id", "required", "disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrInputBox, {
+    ref: "inputBox",
+    variant: _ctx.disableDefaultStyles ? 'unstyled' : 'styled',
+    "force-state": _ctx.activated ? 'focus-within' : undefined,
+    class: "cursor-text",
+    invalid: !!_ctx.error,
+    readonly: _ctx.readonly,
+    disabled: _ctx.disabled,
+    tabindex: "0",
+    onFocus: _ctx.activate
+  }, createSlots({
+    default: withCtx(() => [createVNode(_component_OrTags, {
+      ref: "tags",
+      items: _ctx.proxyModelValue,
+      class: "grow",
+      disabled: _ctx.disabled,
+      "tag-props": {
+        variant: _ctx.readonly || _ctx.disabled ? 'tag' : 'reset',
+        disabled: _ctx.disabled
+      },
+      overflow: _ctx.overflow,
+      onReset: _cache[5] || (_cache[5] = $event => _ctx.remove($event))
+    }, createSlots({
+      _: 2 /* DYNAMIC */
+    }, [_ctx.showControl ? {
+      name: "tail",
+      fn: withCtx(() => [createElementVNode("div", _hoisted_1, [withDirectives(createElementVNode("input", mergeProps({
+        ref: "control",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event)
+      }, _ctx.controlAttributes, {
+        class: _ctx.controlStyles,
+        style: _ctx.controlInlineStyles,
+        type: 'text',
+        placeholder: _ctx.proxyModelValue.length === 0 ? _ctx.placeholder : undefined,
+        readonly: _ctx.readonly,
+        disabled: _ctx.disabled,
+        autocomplete: 'off',
+        minlength: undefined,
+        maxlength: undefined,
+        onKeydown: [_cache[1] || (_cache[1] = withKeys($event => _ctx.add(), ["enter"])), _cache[2] || (_cache[2] = $event => _ctx.$emit('keydown', $event))],
+        onKeyup: _cache[3] || (_cache[3] = $event => _ctx.$emit('keyup', $event)),
+        onFocus: _cache[4] || (_cache[4] = function () {
+          return _ctx.activate && _ctx.activate(...arguments);
+        })
+      }), null, 16 /* FULL_PROPS */, _hoisted_2), [[vModelDynamic, _ctx.draftModelValue]])])]),
+      key: "0"
+    } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["items", "disabled", "tag-props", "overflow"])]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.enableClear && !_ctx.readonly && !_ctx.disabled ? {
+    name: "addon",
+    fn: withCtx(() => [_ctx.proxyModelValue.length > 0 || _ctx.draftModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
+      key: 0,
+      icon: 'close',
+      color: 'inherit',
+      disabled: _ctx.readonly || _ctx.disabled,
+      onClick: _cache[6] || (_cache[6] = $event => _ctx.reset())
+    }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)]),
+    key: "0"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "force-state", "invalid", "readonly", "disabled", "onFocus"]), withDirectives(createElementVNode("div", _hoisted_3, [_ctx.hint || _ctx.maxLength ? (openBlock(), createBlock(_component_OrHint, {
+    key: 0,
+    disabled: _ctx.disabled
+  }, createSlots({
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.hint) + " ", 1 /* TEXT */)]),
+
+    _: 2 /* DYNAMIC */
+  }, [_ctx.maxLength ? {
+    name: "addon",
+    fn: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentLength) + " / " + toDisplayString(_ctx.maxLength), 1 /* TEXT */)]),
+
+    key: "0"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_4, [createVNode(_component_OrError, {
+    disabled: _ctx.disabled
+  }, createSlots({
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error) + " ", 1 /* TEXT */)]),
+
+    _: 2 /* DYNAMIC */
+  }, [_ctx.maxLength ? {
+    name: "addon",
+    fn: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentLength) + " / " + toDisplayString(_ctx.maxLength), 1 /* TEXT */)]),
+
+    key: "0"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled"])], 512 /* NEED_PATCH */), [[vShow, typeof _ctx.error === 'string']])], 2 /* CLASS */);
+}
+
+var css_248z = "\ninput[data-v-368ea875] {\n  min-width: 0;\n  background: none;\n  outline: none;\n}\n";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-368ea875";
+script.__file = "src/components/or-tag-input-v3/OrTagInput.vue";
+
+export { TagInput as T, TagInputControl as a, TagInputItem as b, script as s };

package/dist/bundled/v3/components/OrTagV3/OrTag.js

@@ -0,0 +1 @@
+export { s as default } from '../OrTagV3-68d3d15e.js';

package/dist/bundled/v3/components/OrTagV3/OrTag.vue.d.ts

@@ -0,0 +1,43 @@
+import { PropType } from 'vue-demi';
+import { TagColor, TagVariant } from './props';
+declare const _default: import("vue-demi").DefineComponent<{
+    variant: {
+        type: PropType<"tag" | "button" | "reset">;
+        default: TagVariant;
+    };
+    color: {
+        type: PropType<string>;
+        default: TagColor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    custom: import("vue-demi").ComputedRef<boolean>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("reset" | "click" | "focus" | "blur")[], "reset" | "click" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    variant: {
+        type: PropType<"tag" | "button" | "reset">;
+        default: TagVariant;
+    };
+    color: {
+        type: PropType<string>;
+        default: TagColor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onReset?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}, {
+    variant: "tag" | "button" | "reset";
+    color: string;
+    disabled: boolean;
+}>;
+export default _default;

package/dist/bundled/v3/components/OrTagV3/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrTagV3 } from './OrTag.vue';
+export * from './props';

package/dist/bundled/v3/components/OrTagV3/index.js

@@ -0,0 +1 @@
+export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTagV3-68d3d15e.js';

package/dist/bundled/v3/components/OrTagV3/props.d.ts

@@ -0,0 +1,9 @@
+export declare enum TagVariant {
+    Tag = "tag",
+    Button = "button",
+    Reset = "reset"
+}
+export declare enum TagColor {
+    Default = "default",
+    Danger = "danger"
+}

package/dist/bundled/v3/components/OrTagV3/props.js

@@ -0,0 +1 @@
+export { a as TagColor, T as TagVariant } from '../OrTagV3-68d3d15e.js';

package/dist/bundled/v3/components/OrTagV3/styles.d.ts

@@ -0,0 +1,4 @@
+import { TagColor, TagVariant } from './props';
+export declare const Tag: string[];
+export declare const TagVariants: Record<TagVariant, string[]>;
+export declare const TagColors: Record<TagColor, string[]>;

package/dist/bundled/v3/components/OrTagV3/styles.js

@@ -0,0 +1 @@
+export { b as Tag, d as TagColors, c as TagVariants } from '../OrTagV3-68d3d15e.js';