@ironsource/shared-ui 2.0.0-rc.1 → 2.0.0-rc.3

package/components/input/v4/TextField.vue.js

@@ -0,0 +1,240 @@
+import { defineComponent, computed, ref, openBlock, createElementBlock, mergeProps, unref, createBlock, createCommentVNode, createElementVNode, normalizeClass, renderSlot, withCtx, createTextVNode, toDisplayString, withKeys, withModifiers, createVNode, pushScopeId, popScopeId } from 'vue';
+import Icon from '../../icon/v3/Icon.vue.js';
+import _sfc_main$1 from '../../tooltip/Tooltip.vue.js';
+import Typography from '../../typography/v4/Typography.vue.js';
+import { InputTestIdModifiers } from '../../../testids/index.vue.js';
+import { inputCommon } from '../common/Input.common.vue.js';
+import FieldLabel from '../../shared/FieldLabel.vue.js';
+import FieldHelpText from '../../shared/FieldHelpText.vue.js';
+import { useTestIdAttrs } from '../../../utils/testIds.vue.js';
+/* empty css                                                           */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../../TextField.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _withScopeId = (n) => (pushScopeId("data-v-05d29f1a"), n = n(), popScopeId(), n);
+const _hoisted_1 = {
+  key: 0,
+  class: "icon-container icon-before"
+};
+const _hoisted_2 = ["value", "placeholder", "disabled", "type", "step", "maxlength"];
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = {
+  key: 3,
+  class: "inline-error"
+};
+const _hoisted_5 = {
+  key: 6,
+  class: "icon-container icon-after"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "footer"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "max-length"
+};
+const _hoisted_8 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", { class: "max-length__divider" }, "/", -1));
+const __default__ = {
+  inheritAttrs: false
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TextField",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: false },
+    viewOnly: { type: Boolean, default: false },
+    size: { default: "small" },
+    label: { default: "" },
+    labelDirection: { default: "top" },
+    mandatory: { type: Boolean, default: false },
+    feedbackVariant: { default: null },
+    feedbackText: { default: "" },
+    autoFocus: { type: Boolean, default: false },
+    type: { default: "text" },
+    hideNumberArrows: { type: Boolean, default: false },
+    step: { default: 1 },
+    hoverHelpText: { default: "" },
+    hoverHelpTextPlacement: { default: "top" },
+    onlyDigits: { type: Boolean, default: false },
+    testId: { default: "" },
+    prefix: { default: "" },
+    suffix: { default: "" },
+    maxLength: { default: null },
+    showApply: { type: Boolean, default: false },
+    inlineError: { type: Boolean, default: false },
+    inlineErrorText: { default: "" }
+  },
+  emits: ["update:modelValue", "update:showApply"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const testIdAttrs = useTestIdAttrs(props.testId, InputTestIdModifiers);
+    const handleApplyClick = () => {
+      if (props.showApply) {
+        emit("update:showApply", false);
+      } else if (api?.confirmable) {
+        onConfirm();
+      }
+    };
+    const {
+      onConfirm,
+      onEnter,
+      inputRef,
+      isFocused,
+      showLabelInside,
+      api,
+      labelText,
+      sizeClass,
+      handleInput,
+      handleKeypress
+    } = inputCommon(props, emit);
+    const inputValue = computed(() => api.value?.value ?? props.modelValue);
+    const inputValueLength = computed(() => {
+      const valueString = inputValue.value || "";
+      return valueString.length;
+    });
+    const showPassword = ref(false);
+    const inputType = computed(() => {
+      if (showPassword.value && props.type === "password")
+        return "text";
+      return props.type;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        class: {
+          "input-with-label-container": true,
+          "label-direction-left": __props.labelDirection === "left",
+          disabled: __props.disabled,
+          [`variant-${__props.feedbackVariant}`]: true
+        }
+      }, unref(testIdAttrs)[unref(InputTestIdModifiers).WRAPPER]), [
+        __props.label && __props.labelDirection !== "inside" ? (openBlock(), createBlock(FieldLabel, {
+          key: 0,
+          label: __props.label,
+          mandatory: __props.mandatory,
+          "hover-help-text": __props.hoverHelpText,
+          "hover-help-text-placement": __props.hoverHelpTextPlacement,
+          disabled: __props.disabled,
+          "test-id": __props.testId
+        }, null, 8, ["label", "mandatory", "hover-help-text", "hover-help-text-placement", "disabled", "test-id"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass({
+            "input-container": true,
+            "label-inside": unref(showLabelInside),
+            focused: unref(isFocused)
+          })
+        }, [
+          _ctx.$slots["iconBefore"] ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            renderSlot(_ctx.$slots, "iconBefore", {}, void 0, true)
+          ])) : createCommentVNode("", true),
+          __props.prefix ? (openBlock(), createBlock(unref(Typography), {
+            key: 1,
+            class: "prefix-text",
+            variant: "body1"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.prefix), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          createElementVNode("input", mergeProps({ ..._ctx.$attrs, ...unref(testIdAttrs)[unref(InputTestIdModifiers).FIELD] }, {
+            ref_key: "inputRef",
+            ref: inputRef,
+            value: unref(inputValue),
+            placeholder: unref(labelText),
+            disabled: __props.disabled || __props.viewOnly,
+            type: unref(inputType),
+            class: ["input", {
+              [unref(sizeClass)]: true,
+              "view-only": __props.viewOnly,
+              "label-inside": unref(showLabelInside),
+              "hide-arrows": __props.hideNumberArrows,
+              "input-type": __props.type
+            }],
+            step: __props.step,
+            maxlength: __props.maxLength,
+            onInput: _cache[0] || (_cache[0] = (...args) => unref(handleInput) && unref(handleInput)(...args)),
+            onFocus: _cache[1] || (_cache[1] = ($event) => isFocused.value = true),
+            onBlur: _cache[2] || (_cache[2] = ($event) => isFocused.value = false),
+            onKeyup: _cache[3] || (_cache[3] = withKeys(withModifiers(
+              (...args) => unref(onEnter) && unref(onEnter)(...args),
+              ["prevent"]
+            ), ["enter"])),
+            onKeypress: _cache[4] || (_cache[4] = (...args) => unref(handleKeypress) && unref(handleKeypress)(...args))
+          }), null, 16, _hoisted_2),
+          __props.showApply || unref(api)?.confirmable && !unref(api)?.error?.value ? (openBlock(), createElementBlock("div", {
+            key: 2,
+            class: "apply-button",
+            onClick: withModifiers(handleApplyClick, ["stop", "prevent"])
+          }, [
+            createVNode(unref(Icon), {
+              name: "check-v4",
+              "font-size": "md"
+            })
+          ], 8, _hoisted_3)) : createCommentVNode("", true),
+          __props.inlineError || unref(api)?.error?.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            createVNode(unref(_sfc_main$1), mergeProps({
+              disabled: !__props.inlineErrorText && !unref(api)?.error?.value,
+              text: __props.inlineErrorText || unref(api)?.error?.value,
+              "test-id": __props.testId
+            }, unref(testIdAttrs)[unref(InputTestIdModifiers).TOOLTIP]), {
+              default: withCtx(() => [
+                createVNode(unref(Icon), {
+                  name: "warning-circle",
+                  "font-size": "sm"
+                })
+              ]),
+              _: 1
+            }, 16, ["disabled", "text", "test-id"])
+          ])) : createCommentVNode("", true),
+          __props.suffix ? (openBlock(), createBlock(unref(Typography), {
+            key: 4,
+            class: "suffix-text",
+            variant: "body1"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.suffix), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          __props.type === "password" ? (openBlock(), createElementBlock("div", mergeProps({
+            key: 5,
+            class: "password-visibility-toggle"
+          }, unref(testIdAttrs)[unref(InputTestIdModifiers).TOGGLE_PASSWORD], {
+            onClick: _cache[5] || (_cache[5] = ($event) => showPassword.value = !showPassword.value)
+          }), [
+            createVNode(unref(Icon), {
+              name: showPassword.value ? "eye-v4" : "eye-slash",
+              "font-size": "sm"
+            }, null, 8, ["name"])
+          ], 16)) : createCommentVNode("", true),
+          _ctx.$slots["iconAfter"] ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            renderSlot(_ctx.$slots, "iconAfter", {}, void 0, true)
+          ])) : createCommentVNode("", true)
+        ], 2),
+        __props.feedbackText || __props.maxLength ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          __props.feedbackText ? (openBlock(), createBlock(FieldHelpText, {
+            key: 0,
+            text: __props.feedbackText,
+            variant: __props.feedbackVariant,
+            "test-id": __props.testId
+          }, null, 8, ["text", "variant", "test-id"])) : createCommentVNode("", true),
+          __props.maxLength ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            createVNode(unref(Typography), { variant: "caption" }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(inputValueLength)) + " ", 1),
+                _hoisted_8,
+                createTextVNode(" " + toDisplayString(__props.maxLength), 1)
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+var TextField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-05d29f1a"]]);
+
+export { TextField as default };

package/components/input/v4/index.d.ts

@@ -0,0 +1,277 @@
+import TextField from './TextField.vue';
+declare const TextFieldTypes: () => import("vue").DefineComponent<{
+    type: {
+        type: import("vue").PropType<"number" | "text" | "password">;
+    } & {
+        default: string;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "medium" | "large">;
+    } & {
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    modelValue: {
+        type: import("vue").PropType<string | number>;
+    } & {
+        default: string;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    mandatory: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    autoFocus: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    prefix: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    viewOnly: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    labelDirection: {
+        type: import("vue").PropType<"top" | "inside">;
+    } & {
+        default: string;
+    };
+    hideNumberArrows: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    step: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    hoverHelpText: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    hoverHelpTextPlacement: {
+        type: import("vue").PropType<"auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end">;
+    } & {
+        default: string;
+    };
+    onlyDigits: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    suffix: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    maxLength: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: any;
+    };
+    showApply: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    inlineError: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    inlineErrorText: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    feedbackText: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    feedbackVariant: {
+        type: import("vue").PropType<"error" | "success" | "warning">;
+    } & {
+        default: any;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => void;
+} & {
+    "update:showApply": (value: boolean) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: import("vue").PropType<"number" | "text" | "password">;
+    } & {
+        default: string;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "medium" | "large">;
+    } & {
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    modelValue: {
+        type: import("vue").PropType<string | number>;
+    } & {
+        default: string;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    mandatory: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    autoFocus: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    prefix: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    viewOnly: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    labelDirection: {
+        type: import("vue").PropType<"top" | "inside">;
+    } & {
+        default: string;
+    };
+    hideNumberArrows: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    step: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    hoverHelpText: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    hoverHelpTextPlacement: {
+        type: import("vue").PropType<"auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end">;
+    } & {
+        default: string;
+    };
+    onlyDigits: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    suffix: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    maxLength: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: any;
+    };
+    showApply: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    inlineError: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    inlineErrorText: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    feedbackText: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    feedbackVariant: {
+        type: import("vue").PropType<"error" | "success" | "warning">;
+    } & {
+        default: any;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (value: string | number) => any;
+    "onUpdate:showApply"?: (value: boolean) => any;
+}, {
+    type: "number" | "text" | "password";
+    label: string;
+    size: "small" | "medium" | "large";
+    testId: string;
+    disabled: boolean;
+    modelValue: string | number;
+    placeholder: string;
+    mandatory: boolean;
+    autoFocus: boolean;
+    prefix: string;
+    viewOnly: boolean;
+    labelDirection: "top" | "inside";
+    hideNumberArrows: boolean;
+    step: number;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+    onlyDigits: boolean;
+    suffix: string;
+    maxLength: number;
+    showApply: boolean;
+    inlineError: boolean;
+    inlineErrorText: string;
+    feedbackText: string;
+    feedbackVariant: "error" | "success" | "warning";
+}>[];
+export { TextField, TextFieldTypes };

package/components/input/v4/index.vue.js

@@ -0,0 +1,6 @@
+import TextField from './TextField.vue.js';
+export { default as TextField } from './TextField.vue.js';
+
+const TextFieldTypes = () => [TextField];
+
+export { TextFieldTypes };

package/components/loader/v4/Loader.vue.d.ts

@@ -0,0 +1,41 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    strokeWidth?: number;
+    paddingOffsetPx?: number;
+    paddingOffsetPercentage?: number;
+    maxWidth?: number | null;
+}>, {
+    strokeWidth: number;
+    paddingOffsetPx: number;
+    paddingOffsetPercentage: number;
+    maxWidth: any;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    strokeWidth?: number;
+    paddingOffsetPx?: number;
+    paddingOffsetPercentage?: number;
+    maxWidth?: number | null;
+}>, {
+    strokeWidth: number;
+    paddingOffsetPx: number;
+    paddingOffsetPercentage: number;
+    maxWidth: any;
+}>>>, {
+    strokeWidth: number;
+    paddingOffsetPx: number;
+    paddingOffsetPercentage: number;
+    maxWidth: number | null;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/loader/v4/Loader.vue.js

@@ -0,0 +1,79 @@
+import { defineComponent, ref, onMounted, openBlock, createElementBlock, createElementVNode, renderSlot, normalizeStyle } from 'vue';
+/* empty css                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../../Loader.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = { style: { "visibility": "hidden" } };
+const _hoisted_2 = ["width", "height"];
+const _hoisted_3 = ["r"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Loader",
+  props: {
+    strokeWidth: { default: 2 },
+    paddingOffsetPx: { default: 0 },
+    paddingOffsetPercentage: { default: 0 },
+    maxWidth: { default: null }
+  },
+  setup(__props) {
+    const props = __props;
+    const loaderContainer = ref(null);
+    const loaderSize = ref(0);
+    const radius = ref("50%");
+    const paddingOffset = ref(0);
+    onMounted(() => {
+      const containerWidth = loaderContainer?.value?.clientWidth;
+      const containerHeight = loaderContainer?.value?.clientHeight;
+      let rootSize = containerWidth && containerHeight && containerHeight < containerWidth ? containerHeight : containerWidth;
+      let paddingOffsetAdjusted = 0;
+      if (typeof rootSize === "number") {
+        if (props.paddingOffsetPercentage) {
+          if (props.paddingOffsetPercentage > 49) {
+            paddingOffsetAdjusted = 0;
+          } else {
+            paddingOffsetAdjusted = rootSize * props.paddingOffsetPercentage / 100;
+          }
+        } else if (props.paddingOffsetPx && props.paddingOffsetPx < rootSize - props.strokeWidth) {
+          paddingOffsetAdjusted = props.paddingOffsetPx;
+        } else {
+          paddingOffsetAdjusted = 0;
+        }
+      }
+      if (props.maxWidth && props.maxWidth < rootSize - paddingOffsetAdjusted) {
+        const maxRootSize = props.maxWidth < rootSize ? props.maxWidth : rootSize;
+        paddingOffsetAdjusted = (rootSize - maxRootSize) / 2;
+        rootSize = maxRootSize + paddingOffsetAdjusted * 2;
+      }
+      paddingOffset.value = paddingOffsetAdjusted || 0;
+      loaderSize.value = rootSize - paddingOffsetAdjusted * 2;
+      radius.value = loaderSize.value ? `${(loaderSize.value / 2 - props.strokeWidth / 2) / loaderSize.value * 100}%` : "50%";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "loaderContainer",
+        ref: loaderContainer,
+        class: "loader-container"
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        (openBlock(), createElementBlock("svg", {
+          class: "circle-svg",
+          width: loaderSize.value,
+          height: loaderSize.value,
+          style: normalizeStyle({
+            padding: paddingOffset.value
+          })
+        }, [
+          createElementVNode("circle", {
+            cx: "50%",
+            cy: "50%",
+            r: radius.value,
+            style: normalizeStyle({ strokeWidth: __props.strokeWidth })
+          }, null, 12, _hoisted_3)
+        ], 12, _hoisted_2))
+      ], 512);
+    };
+  }
+});
+var Loader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-20d0ff1b"]]);
+
+export { Loader as default };

package/components/loader/v4/index.d.ts

@@ -0,0 +1,50 @@
+import Loader from './Loader.vue';
+declare const LoaderTypes: () => import("vue").DefineComponent<{
+    strokeWidth: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    paddingOffsetPx: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    paddingOffsetPercentage: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    maxWidth: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: any;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    strokeWidth: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    paddingOffsetPx: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    paddingOffsetPercentage: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    maxWidth: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: any;
+    };
+}>>, {
+    strokeWidth: number;
+    paddingOffsetPx: number;
+    paddingOffsetPercentage: number;
+    maxWidth: number;
+}>[];
+export { Loader, LoaderTypes };