@rotki/ui-library 2.15.0 → 2.16.0

package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,220 @@
+import RuiIcon_default from "../../icons/RuiIcon.js";
+import RuiButton_default from "../../buttons/button/RuiButton.js";
+import { useFormTextDetail } from "../../../utils/form-text-detail.js";
+import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
+import { useTimeoutManager } from "../../../composables/timeout-manager.js";
+import { textFieldStyles } from "./text-field-styles.js";
+import { usePrependAppendWidth } from "../../../composables/forms/use-prepend-append-width.js";
+import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { useFocus } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/forms/text-field/RuiTextField.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"aria-invalid"
+];
+var RuiTextField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiTextField",
+	inheritAttrs: false,
+	__name: "RuiTextField",
+	props: /* @__PURE__ */ mergeModels({
+		label: { default: "" },
+		placeholder: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		variant: { default: "default" },
+		color: { default: () => void 0 },
+		textColor: { default: () => void 0 },
+		dense: {
+			type: Boolean,
+			default: false
+		},
+		hint: { default: "" },
+		errorMessages: { default: () => [] },
+		successMessages: { default: () => [] },
+		hideDetails: {
+			type: Boolean,
+			default: false
+		},
+		prependIcon: { default: () => void 0 },
+		appendIcon: { default: () => void 0 },
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"focus-input",
+		"blur",
+		"remove",
+		"clear"
+	], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const emit = __emit;
+		const isHovered = ref(false);
+		const showClearButton = ref(false);
+		const prepend = useTemplateRef("prepend");
+		const append = useTemplateRef("append");
+		const inputRef = useTemplateRef("inputRef");
+		const { focused } = useFocus(inputRef);
+		const { create: delayClearHide } = useTimeoutManager();
+		const { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);
+		const { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
+		const active = computed(() => get$1(focused) || !!get$1(modelValue));
+		const showClearIcon = computed(() => __props.clearable && !!get$1(modelValue) && !__props.disabled && !__props.readonly);
+		const effectiveTextColor = computed(() => {
+			if (get$1(hasError)) return "error";
+			if (get$1(hasSuccess)) return "success";
+			if (__props.textColor && !get$1(hasMessages)) return __props.textColor;
+		});
+		const effectiveColor = computed(() => get$1(validation) ?? __props.color);
+		const ui = computed(() => textFieldStyles({
+			variant: __props.variant,
+			dense: __props.dense,
+			disabled: __props.disabled,
+			hovered: get$1(isHovered),
+			focused: get$1(focused),
+			active: get$1(active),
+			noLabel: !__props.label,
+			color: get$1(effectiveColor),
+			textColor: get$1(effectiveTextColor),
+			validation: get$1(validation),
+			showLabel: !!__props.label
+		}));
+		const labelStyle = computed(() => ({
+			"--prepend-w": get$1(prependWidth),
+			"--append-w": get$1(appendWidth)
+		}));
+		const legendText = computed(() => {
+			if (!get$1(active) || !__props.label) return "";
+			return __props.required ? `${__props.label} ﹡` : __props.label;
+		});
+		function input(event) {
+			const target = event.target;
+			if (target instanceof HTMLInputElement) set$1(modelValue, target.value);
+		}
+		function clearIconClicked() {
+			set$1(modelValue, "");
+			emit("clear");
+		}
+		watch(focused, (value) => {
+			if (value) set$1(showClearButton, true);
+			else delayClearHide(() => set$1(showClearButton, false), 500);
+		});
+		__expose({
+			setSelectionRange: (start, end) => {
+				get$1(inputRef)?.setSelectionRange(start, end);
+			},
+			focus: () => get$1(inputRef)?.focus(),
+			element: inputRef
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [createElementVNode("div", {
+				class: normalizeClass(unref(ui).wrapper()),
+				"data-id": "wrapper",
+				onMouseenter: _cache[5] || (_cache[5] = ($event) => isHovered.value = true),
+				onMouseleave: _cache[6] || (_cache[6] = ($event) => isHovered.value = false)
+			}, [
+				_ctx.$slots.prepend || __props.prependIcon ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "prepend",
+					ref: prepend,
+					class: normalizeClass(unref(ui).prepend()),
+					"data-id": "prepend"
+				}, [_ctx.$slots.prepend ? renderSlot(_ctx.$slots, "prepend", { key: 0 }) : __props.prependIcon ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(ui).icon())
+				}, [createVNode(RuiIcon_default, { name: __props.prependIcon }, null, 8, ["name"])], 2)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+				createElementVNode("div", {
+					class: normalizeClass(unref(ui).inputWrapper()),
+					onClick: _cache[3] || (_cache[3] = ($event) => emit("focus-input", $event))
+				}, [
+					createElementVNode("input", mergeProps({
+						ref_key: "inputRef",
+						ref: inputRef,
+						value: modelValue.value,
+						placeholder: __props.placeholder || " ",
+						class: unref(ui).input(),
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						"aria-invalid": unref(hasError)
+					}, unref(getNonRootAttrs)(_ctx.$attrs), {
+						onInput: _cache[0] || (_cache[0] = ($event) => input($event)),
+						onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event)),
+						onRemove: _cache[2] || (_cache[2] = ($event) => emit("remove", $event))
+					}), null, 16, _hoisted_1),
+					createElementVNode("label", {
+						class: normalizeClass(unref(ui).label()),
+						style: normalizeStyle(unref(labelStyle))
+					}, [createElementVNode("span", { class: normalizeClass(unref(ui).labelText()) }, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(unref(ui).required())
+					}, " ﹡ ", 2)) : createCommentVNode("", true)], 2)], 6),
+					__props.variant === "outlined" ? (openBlock(), createElementBlock("fieldset", {
+						key: 0,
+						class: normalizeClass(unref(ui).fieldset())
+					}, [createElementVNode("legend", { class: normalizeClass(unref(ui).legend()) }, toDisplayString(unref(legendText)), 3)], 2)) : createCommentVNode("", true)
+				], 2),
+				_ctx.$slots.append || __props.appendIcon || unref(showClearIcon) ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					ref_key: "append",
+					ref: append,
+					class: normalizeClass(unref(ui).append()),
+					"data-id": "append"
+				}, [unref(showClearIcon) ? (openBlock(), createBlock(RuiButton_default, {
+					key: 0,
+					class: normalizeClass([unref(ui).clearButton(), { hidden: !unref(showClearButton) }]),
+					variant: "text",
+					type: "button",
+					icon: "",
+					color: "error",
+					"data-id": "clear-btn",
+					tabindex: "-1",
+					onClick: _cache[4] || (_cache[4] = withModifiers(($event) => clearIconClicked(), ["stop"]))
+				}, {
+					default: withCtx(() => [createVNode(RuiIcon_default, {
+						name: "lu-x",
+						size: "20"
+					})]),
+					_: 1
+				}, 8, ["class"])) : createCommentVNode("", true), _ctx.$slots.append ? renderSlot(_ctx.$slots, "append", { key: 1 }) : __props.appendIcon ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(unref(ui).icon())
+				}, [createVNode(RuiIcon_default, { name: __props.appendIcon }, null, 8, ["name"])], 2)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
+			], 34), !__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
+				key: 0,
+				class: normalizeClass(unref(ui).details()),
+				"error-messages": __props.errorMessages,
+				"success-messages": __props.successMessages,
+				hint: __props.hint
+			}, null, 8, [
+				"class",
+				"error-messages",
+				"success-messages",
+				"hint"
+			])) : createCommentVNode("", true)], 16);
+		};
+	}
+});
+//#endregion
+export { RuiTextField_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiTextField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTextField.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { textFieldStyles, type TextFieldVariant } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: TextFieldVariant;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  variant = 'default',\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n  'focus-input': [event: Event];\n  'blur': [event: Event];\n  'remove': [value: unknown];\n  'clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst { focused } = useFocus(inputRef);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst active = computed<boolean>(() => get(focused) || !!get(modelValue));\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n  variant,\n  dense,\n  disabled,\n  hovered: get(isHovered),\n  focused: get(focused),\n  active: get(active),\n  noLabel: !label,\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n  showLabel: !!label,\n}));\n\nconst labelStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst legendText = computed<string>(() => {\n  if (!get(active) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement) {\n    set(modelValue, target.value);\n  }\n}\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('clear');\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      :class=\"ui.wrapper()\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <label\n          :class=\"ui.label()\"\n          :style=\"labelStyle\"\n        >\n          <span :class=\"ui.labelText()\">\n            {{ label }}\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </fieldset>\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          color=\"error\"\n          data-id=\"clear-btn\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"20\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon :name=\"appendIcon\" />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/text-field/text-field-styles.d.ts

@@ -0,0 +1,299 @@
+import { type TextInputVariant } from '../../../components/forms/text-input-styles.js';
+export type TextFieldVariant = TextInputVariant;
+/**
+ * tv() styles for RuiTextField. Extends textInputBase for shared
+ * fieldset/legend/label/validation core.
+ *
+ * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes
+ * between base and extension. Never put a class in the base slot that a
+ * variant needs to override — put variant-specific classes in the variants.
+ */
+export declare const textFieldStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            wrapper: string;
+            input: string;
+            label: string;
+            prepend: string;
+            append: string;
+        };
+        filled: {
+            input: string;
+            label: string;
+            prepend: string;
+            append: string;
+        };
+        outlined: {
+            inputWrapper: string;
+            input: string;
+            label: string;
+            fieldset: string;
+            prepend: string;
+            append: string;
+        };
+    };
+    dense: {
+        true: {};
+    };
+    hovered: {
+        true: {
+            label: string;
+        };
+    };
+    focused: {
+        true: {};
+    };
+    active: {
+        true: {
+            label: string;
+        };
+    };
+    noLabel: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    textColor: {
+        primary: {
+            prepend: string;
+            append: string;
+            input: string;
+            icon: string;
+        };
+        secondary: {
+            prepend: string;
+            append: string;
+            input: string;
+            icon: string;
+        };
+        error: {
+            prepend: string;
+            append: string;
+            input: string;
+            icon: string;
+        };
+        warning: {
+            prepend: string;
+            append: string;
+            input: string;
+            icon: string;
+        };
+        info: {
+            prepend: string;
+            append: string;
+            input: string;
+            icon: string;
+        };
+        success: {
+            prepend: string;
+            append: string;
+            input: string;
+            icon: string;
+        };
+    };
+    validation: {
+        error: {
+            input: string;
+            label: string;
+        };
+        success: {
+            input: string;
+            label: string;
+        };
+    };
+}, {
+    fieldset: string;
+    legend: string;
+    wrapper: string;
+    input: string;
+    label: string;
+    labelText: string;
+    inputWrapper: string;
+    prepend: string;
+    append: string;
+    icon: string;
+    details: string;
+    required: string;
+    clearButton: string;
+}, undefined, {
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, import("tailwind-variants").TVReturnType<{
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, undefined, {
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, import("tailwind-variants").TVReturnType<{
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, undefined, unknown, unknown, undefined>>>;