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

package/dist/bundled/v3/components/OrInlineInputV3-fbc7511a.js

@@ -0,0 +1,248 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelDynamic, withModifiers, createCommentVNode, createBlock, createSlots, createTextVNode, toDisplayString, vShow } from 'vue';
+import { s as styleInject } from './OrAvatar-bfa6fd65.js';
+import { s as script$4, I as InlineInputBoxSize } from './OrInlineInputBoxV3-c2d12c4d.js';
+import { defineComponent, ref, computed, reactive, toRef, watch } from 'vue-demi';
+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 { b as useIdAttribute, c as useControlAttributes, e as useValidationAttributes, u as useProxyModelValue } from './OrBottomSheetV3-199292db.js';
+
+var InlineInputType;
+(function (InlineInputType) {
+  InlineInputType["Text"] = "text";
+  InlineInputType["Number"] = "number";
+})(InlineInputType || (InlineInputType = {}));
+
+const InlineInputRoot = [
+// Layout
+'layout-column',
+// Spacing
+'gap-xs'];
+const InlineInputControl = [
+// Box
+'w-full',
+// Typography
+'typography-inherit',
+// Theme (placeholder)
+'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark'];
+const InlineInputAction = [
+// Layout
+'layout-inline-row self-start',
+// Spacing
+'gap-sm+',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+const InlineInputActionSizes = {
+  'm': [
+  // Spacing
+  'px-none', 'py-sm'],
+  's': [
+  // Spacing
+  'px-none', 'py-xs*']
+};
+
+var script = defineComponent({
+  name: 'OrInlineInput',
+  components: {
+    OrError: script$1,
+    OrHint: script$2,
+    OrIconButton: script$3,
+    OrInlineInputBox: script$4
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: undefined
+    },
+    saveOnBlur: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: InlineInputType.Text
+    },
+    size: {
+      type: String,
+      default: InlineInputBoxSize.M
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    },
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
+  expose: ['root', 'focus', 'blur'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const control = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-inline-input-v3', ...InlineInputRoot]);
+    const controlStyles = computed(() => [...InlineInputControl]);
+    const actionStyles = computed(() => [...InlineInputAction, ...InlineInputActionSizes[props.size]]);
+    // State
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes()
+    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value;
+    });
+    const currentLength = computed(() => {
+      var _a, _b;
+      return (_b = (_a = draftModelValue.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
+    });
+    const maxLength = computed(() => controlAttributes.maxlength);
+    const activated = ref(false);
+    // Handlers
+    function onFocus(event) {
+      activated.value = true;
+      context.emit('focus', event);
+    }
+    function onBlur(event) {
+      if (props.saveOnBlur) {
+        apply();
+      }
+      context.emit('blur', event);
+    }
+    // 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 apply() {
+      if (draftModelValue.value !== proxyModelValue.value) {
+        proxyModelValue.value = draftModelValue.value;
+      }
+      activated.value = false;
+    }
+    function reset() {
+      if (draftModelValue.value !== proxyModelValue.value) {
+        draftModelValue.value = proxyModelValue.value;
+      }
+      activated.value = false;
+    }
+    return {
+      root,
+      control,
+      rootStyles,
+      controlStyles,
+      actionStyles,
+      controlAttributes,
+      proxyModelValue,
+      draftModelValue,
+      currentLength,
+      maxLength,
+      activated,
+      onFocus,
+      onBlur,
+      focus,
+      blur,
+      apply,
+      reset
+    };
+  }
+});
+
+const _hoisted_1 = {
+  class: /*#__PURE__*/normalizeClass(['layout-row', 'gap-sm+'])
+};
+const _hoisted_2 = ["type", "placeholder", "activated"];
+const _hoisted_3 = {
+  class: /*#__PURE__*/normalizeClass(['contents'])
+};
+const _hoisted_4 = {
+  class: /*#__PURE__*/normalizeClass(['contents'])
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrInlineInputBox = resolveComponent("OrInlineInputBox");
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  const _component_OrHint = resolveComponent("OrHint");
+  const _component_OrError = resolveComponent("OrError");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createElementVNode("div", _hoisted_1, [createVNode(_component_OrInlineInputBox, {
+    size: _ctx.size,
+    invalid: !!_ctx.error
+  }, {
+    default: withCtx(() => [withDirectives(createElementVNode("input", mergeProps({
+      ref: "control",
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event)
+    }, _ctx.controlAttributes, {
+      class: _ctx.controlStyles,
+      type: _ctx.type,
+      placeholder: _ctx.placeholder,
+      activated: _ctx.activated ? '' : null,
+      onKeydown: _cache[1] || (_cache[1] = $event => _ctx.$emit('keydown', $event)),
+      onKeyup: _cache[2] || (_cache[2] = $event => _ctx.$emit('keyup', $event)),
+      onFocus: _cache[3] || (_cache[3] = function () {
+        return _ctx.onFocus && _ctx.onFocus(...arguments);
+      }),
+      onBlur: _cache[4] || (_cache[4] = function () {
+        return _ctx.onBlur && _ctx.onBlur(...arguments);
+      })
+    }), null, 16 /* FULL_PROPS */, _hoisted_2), [[vModelDynamic, _ctx.draftModelValue]])]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["size", "invalid"]), _ctx.activated && !_ctx.saveOnBlur ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(_ctx.actionStyles)
+  }, [createVNode(_component_OrIconButton, {
+    icon: 'done',
+    color: 'inherit',
+    onClick: withModifiers(_ctx.apply, ["stop"])
+  }, null, 8 /* PROPS */, ["onClick"]), createVNode(_component_OrIconButton, {
+    icon: 'close',
+    color: 'inherit',
+    onClick: withModifiers(_ctx.reset, ["stop"])
+  }, null, 8 /* PROPS */, ["onClick"])], 2 /* CLASS */)) : createCommentVNode("v-if", true)]), withDirectives(createElementVNode("div", _hoisted_3, [_ctx.hint || _ctx.maxLength ? (openBlock(), createBlock(_component_OrHint, {
+    key: 0
+  }, 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]), 1024 /* DYNAMIC_SLOTS */)) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_4, [createVNode(_component_OrError, null, 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]), 1024 /* DYNAMIC_SLOTS */)], 512 /* NEED_PATCH */), [[vShow, typeof _ctx.error === 'string']])], 2 /* CLASS */);
+}
+
+var css_248z = "\ninput[data-v-29d9ad19] {\n  min-width: 0;\n  background: none;\n  outline: none;\n}\ninput[type=\"number\"][data-v-29d9ad19]::-webkit-inner-spin-button {\n  display: none;\n}\ninput[type=\"search\"][data-v-29d9ad19]::-webkit-search-cancel-button {\n  display: none;\n}\n";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-29d9ad19";
+script.__file = "src/components/or-inline-input-v3/OrInlineInput.vue";
+
+export { InlineInputType as I, InlineInputRoot as a, InlineInputControl as b, InlineInputAction as c, InlineInputActionSizes as d, script as s };

package/dist/bundled/v3/components/OrInlineTextEdit/OrInlineTextEdit.js

@@ -0,0 +1 @@
+export { OrInlineTextEdit as default } from './index.js';

package/dist/bundled/v3/components/OrInlineTextEdit/OrInlineTextEdit.vue.d.ts

@@ -0,0 +1,157 @@
+import { PropType } from 'vue-demi';
+import { InlineTextEditTrimmingTypes, InlineTextEditTypes } from './constants';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+    id: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+    type: {
+        type: PropType<InlineTextEditTypes>;
+        default: InlineTextEditTypes;
+        required: false;
+    };
+    trimmingType: {
+        type: PropType<InlineTextEditTrimmingTypes>;
+        default: InlineTextEditTrimmingTypes;
+        required: false;
+    };
+    trimmingCount: {
+        type: PropType<number>;
+        default: number;
+        required: false;
+    };
+    error: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+    isDisabled: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+    isReadonly: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+    isInvalid: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+}, {
+    inputRef: import("vue-demi").Ref<HTMLInputElement | HTMLTextAreaElement | undefined>;
+    localValue: import("vue-demi").Ref<string> | import("vue-demi").WritableComputedRef<string>;
+    previousValue: import("vue-demi").Ref<string>;
+}, {
+    isFocused: boolean;
+    isEditing: boolean;
+    reqAF: null;
+}, {
+    localId(): string;
+    isHeadingType(): boolean;
+    isTextType(): boolean;
+    isTextareaType(): boolean;
+    isInactive(): boolean;
+    isUsingLastSymbolsTrimming(): boolean;
+    valueToShow(): string;
+    textStart(): string;
+    textEnd(): string;
+    inputClasses(): Record<string, boolean>;
+    textClasses(): Record<string, boolean>;
+}, {
+    onEnter(): void;
+    onSave(): void;
+    onClear(): void;
+    calcTextareaHeight(): void;
+    onInput(event: Event): void;
+    onFocus(event: Event): void;
+    onBlur(event: Event): void;
+    focus(): void;
+    beforeEnter(el: HTMLElement): void;
+    enter(el: HTMLElement): void;
+    leave(el: HTMLElement): void;
+    cancelRequestAF(): void;
+}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "input" | "save" | "clear")[], "update:modelValue" | "focus" | "blur" | "input" | "save" | "clear", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+    id: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+    type: {
+        type: PropType<InlineTextEditTypes>;
+        default: InlineTextEditTypes;
+        required: false;
+    };
+    trimmingType: {
+        type: PropType<InlineTextEditTrimmingTypes>;
+        default: InlineTextEditTrimmingTypes;
+        required: false;
+    };
+    trimmingCount: {
+        type: PropType<number>;
+        default: number;
+        required: false;
+    };
+    error: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+    isDisabled: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+    isReadonly: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+    isInvalid: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
+    onSave?: ((...args: any[]) => any) | undefined;
+    onClear?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string;
+    id: string;
+    placeholder: string;
+    type: InlineTextEditTypes;
+    trimmingType: InlineTextEditTrimmingTypes;
+    trimmingCount: number;
+    error: string;
+    isDisabled: boolean;
+    isReadonly: boolean;
+    isInvalid: boolean;
+}>;
+export default _default;

package/dist/bundled/v3/components/OrInlineTextEdit/constants.d.ts

@@ -0,0 +1,9 @@
+export declare enum InlineTextEditTypes {
+    heading = "heading",
+    text = "text",
+    textarea = "textarea"
+}
+export declare enum InlineTextEditTrimmingTypes {
+    trimmed = "trimmed",
+    lastSymbols = "lastSymbols"
+}

package/dist/bundled/v3/components/OrInlineTextEdit/constants.js

@@ -0,0 +1 @@
+export { InlineTextEditTrimmingTypes, InlineTextEditTypes } from './index.js';

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

@@ -0,0 +1,2 @@
+export { default as OrInlineTextEdit } from './OrInlineTextEdit.vue';
+export * from './constants';