origam 0.3.10 → 2.3.0

package/dist/src/components/NumberField/OrigamNumberField.vue

@@ -1,5 +1,43 @@
 <template>
+	<template v-if="compact">
+		<div
+				:class="compactClasses"
+				:style="numberFieldStyles"
+				role="group"
+				:aria-label="label"
+		>
+			<origam-btn
+					:icon="MDI_ICONS.MINUS"
+					:disabled="!canDecrease"
+					size="small"
+					data-cy="numberfield-compact-decrement"
+					aria-label="Decrement"
+					@click="handleCompactDecrement"
+			/>
+			<input
+					v-model="compactInputText"
+					type="text"
+					inputmode="numeric"
+					class="origam-number-field__compact-input"
+					:aria-label="label"
+					data-cy="numberfield-compact-input"
+					@blur="handleBlur"
+					@focus="handleFocus"
+					@beforeinput="handleBeforeInput"
+					@keydown="handleKeydown"
+			/>
+			<origam-btn
+					:icon="MDI_ICONS.PLUS"
+					:disabled="!canIncrease"
+					size="small"
+					data-cy="numberfield-compact-increment"
+					aria-label="Increment"
+					@click="handleCompactIncrement"
+			/>
+		</div>
+	</template>
 	<origam-text-field
+			v-else
 			ref="origamTextFieldRef"
 			v-model:model-value="inputText"
 			:class="numberFieldClasses"
@@ -49,7 +87,7 @@
 				<template v-if="split">
 					<slot
 							name="increment"
-							v-bind="{canIncrease, onControlClick: () => handleControlClick, onUpControlMousedown: () => handleUpControlMousedown, onControlMouseup: () => handleControlMouseup}"
+							v-bind="{canIncrease, onControlClick: () => handleIncrementClick, onUpControlMousedown: () => handleUpControlMousedown, onControlMouseup: () => handleControlMouseup}"
 					>
 						<origam-btn
 								key="increment-btn"
@@ -59,7 +97,7 @@
 								flat
 								height="100%"
 								tabindex="-1"
-								@click="handleControlClick"
+								@click="handleIncrementClick"
 								@pointerdown="handleUpControlMousedown"
 								@pointerup="handleControlMouseup"
 						/>
@@ -123,7 +161,7 @@
 
 					<slot
 							name="increment"
-							v-bind="{canIncrease, onControlClick: () => handleControlClick, onUpControlMousedown: () => handleUpControlMousedown, onControlMouseup: () => handleControlMouseup}"
+							v-bind="{canIncrease, onControlClick: () => handleIncrementClick, onUpControlMousedown: () => handleUpControlMousedown, onControlMouseup: () => handleControlMouseup}"
 					>
 						<origam-btn
 								key="increment-btn"
@@ -133,7 +171,7 @@
 								flat
 								height="auto"
 								tabindex="-1"
-								@click="handleControlClick"
+								@click="handleIncrementClick"
 								@pointerdown="handleUpControlMousedown"
 								@pointerup="handleControlMouseup"
 						/>
@@ -144,7 +182,7 @@
 
 				<slot
 						name="decrement"
-						v-bind="{canDecrease, onControlClick: () => handleControlClick, onDownControlMousedown: () => handleDownControlMousedown, onControlMouseup: () => handleControlMouseup}"
+						v-bind="{canDecrease, onControlClick: () => handleDecrementClick, onDownControlMousedown: () => handleDownControlMousedown, onControlMouseup: () => handleControlMouseup}"
 				>
 					<origam-btn
 							key="decrement-btn"
@@ -154,7 +192,7 @@
 							flat
 							height="auto"
 							tabindex="-1"
-							@click="handleControlClick"
+							@click="handleDecrementClick"
 							@pointerdown="handleDownControlMousedown"
 							@pointerup="handleControlMouseup"
 					/>
@@ -211,11 +249,11 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, useSlots, watch, watchEffect } from "vue";
+import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
 import { OrigamBtn, OrigamDivider, OrigamTextField } from "../../components";
-import { useAdjacentInner, useFocus, useForm, useHold, useProps, useVModel } from "../../composables";
+import { useAdjacentInner, useFocus, useHold, useProps, useVModel, useStyle } from "../../composables";
 import { DIRECTION, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
-import { clamp, forwardRefs, omit } from "../../utils";
+import { clamp, forwardRefs } from "../../utils";
 const props = defineProps({
   autofocus: { type: Boolean, required: false },
   placeholder: { type: String, required: false },
@@ -235,22 +273,18 @@ const props = defineProps({
   holdRepeat: { type: Number, required: false, default: 50 },
   split: { type: Boolean, required: false, default: false },
   hideControls: { type: Boolean, required: false },
+  compact: { type: Boolean, required: false, default: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
-  active: { type: Boolean, required: false },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   flat: { type: Boolean, required: false },
+  inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
@@ -258,9 +292,10 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -268,18 +303,9 @@ const props = defineProps({
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
-  hideDetails: { type: [Boolean, String], required: false },
-  hideSpinButtons: { type: Boolean, required: false },
-  hint: { type: String, required: false },
-  persistentHint: { type: Boolean, required: false },
-  messages: { type: [Array, String], required: false },
-  padding: { type: [Boolean, Number, String], required: false },
-  paddingTop: { type: [Boolean, Number, String], required: false },
-  paddingLeft: { type: [Boolean, Number, String], required: false },
-  paddingBottom: { type: [Boolean, Number, String], required: false },
-  paddingRight: { type: [Boolean, Number, String], required: false },
-  paddingBlock: { type: [Boolean, Number, String], required: false },
-  paddingInline: { type: [Boolean, Number, String], required: false },
+  text: { type: String, required: false },
+  floating: { type: Boolean, required: false },
+  name: { type: String, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -287,11 +313,13 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true, default: true },
-  roundedTopRight: { type: [Boolean, Number, String], required: false },
-  roundedTopLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -301,7 +329,21 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
   elevation: { type: [Number, String], required: false },
+  size: { type: null, required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  hideSpinButtons: { type: Boolean, required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  messages: { type: [Array, String], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -311,7 +353,6 @@ const props = defineProps({
   direction: { type: null, required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
-  name: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   validateOn: { type: null, required: false },
@@ -321,12 +362,12 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-const emits = defineEmits(["click:control", "mousedown:control", "update:focused", "update:modelValue", "click:prepend", "click:prependInner", "click:append", "click:appendInner", "click:clear"]);
+const emits = defineEmits(["click:control", "mousedown:control", "click:clear", "increment", "decrement", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "update:active", "click:append", "click:prepend"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const origamTextFieldRef = ref();
-const form = useForm(omit(props, ["modelValue"]));
-const controlsDisabled = computed(() => form.isDisabled.value || form.isReadonly.value);
+const controlsDisabled = computed(() => !!(props.disabled || props.readonly));
 const model = useVModel(
   props,
   "modelValue",
@@ -340,18 +381,20 @@ const {
   onClickAppendInner: handleClickAppendInner
 } = useAdjacentInner(props);
 const correctPrecision = (val, precision = props.precision) => {
-  const fixed = precision == null ? String(val) : val.toFixed(precision);
+  const num = typeof val === "number" ? val : Number(val);
+  if (Number.isNaN(num)) return String(val);
+  const fixed = precision == null ? String(num) : num.toFixed(precision);
   return isFocused.value ? Number(fixed).toString() : fixed;
 };
 const _inputText = shallowRef(null);
-watchEffect(() => {
-  if (isFocused.value && !controlsDisabled.value) {
-  } else if (model.value == null) {
+watch(() => props.modelValue, (val) => {
+  if (isFocused.value && !controlsDisabled.value) return;
+  if (val == null) {
     _inputText.value = null;
-  } else if (!isNaN(model.value)) {
-    _inputText.value = correctPrecision(model.value);
+  } else if (!isNaN(val)) {
+    _inputText.value = correctPrecision(val);
   }
-});
+}, { immediate: true });
 const inputText = computed({
   get: () => _inputText.value,
   set(val) {
@@ -391,9 +434,15 @@ const toggleUpDown = (increment = true) => {
   let inferredPrecision = Math.max(inferPrecision(model.value), inferPrecision(props.step));
   if (props.precision != null) inferredPrecision = Math.max(inferredPrecision, props.precision);
   if (increment) {
-    if (canIncrease.value) inputText.value = correctPrecision(model.value + props.step, inferredPrecision);
+    if (canIncrease.value) {
+      inputText.value = correctPrecision(model.value + props.step, inferredPrecision);
+      emits("increment", model.value);
+    }
   } else {
-    if (canDecrease.value) inputText.value = correctPrecision(model.value - props.step, inferredPrecision);
+    if (canDecrease.value) {
+      inputText.value = correctPrecision(model.value - props.step, inferredPrecision);
+      emits("decrement", model.value);
+    }
   }
 };
 const { holdStart, holdStop } = useHold({ toggleUpDown }, props.holdRepeat, props.holdDelay);
@@ -427,7 +476,10 @@ const handleKeydown = async (e) => {
     }
   }
 };
-const handleControlClick = (e) => {
+const handleIncrementClick = (e) => {
+  e.stopPropagation();
+};
+const handleDecrementClick = (e) => {
   e.stopPropagation();
 };
 const handleControlMouseup = (e) => {
@@ -462,29 +514,38 @@ const handleClear = (e) => {
 };
 const clampModel = () => {
   if (controlsDisabled.value) return;
-  if (!origamTextFieldRef.value) return;
-  const actualText = origamTextFieldRef.value.value;
+  const actualText = _inputText.value ?? origamTextFieldRef.value?.value ?? null;
   if (actualText && !isNaN(Number(actualText))) {
-    inputText.value = correctPrecision(clamp(Number(actualText), props.min, props.max));
+    const clamped = clamp(Number(actualText), props.min, props.max);
+    model.value = clamped;
+    _inputText.value = correctPrecision(clamped);
   } else {
-    inputText.value = null;
+    model.value = null;
+    _inputText.value = null;
   }
 };
 const formatInputValue = () => {
   if (controlsDisabled.value) return;
-  if (model.value === null || isNaN(model.value)) {
-    inputText.value = null;
+  if (_inputText.value === null) {
+    _inputText.value = null;
     return;
   }
-  inputText.value = props.precision == null ? String(model.value) : model.value.toFixed(props.precision);
+  const numVal = Number(_inputText.value);
+  if (isNaN(numVal)) {
+    _inputText.value = null;
+    return;
+  }
+  _inputText.value = props.precision == null ? String(numVal) : numVal.toFixed(props.precision);
 };
 const trimDecimalZeros = () => {
   if (controlsDisabled.value) return;
-  if (model.value === null || isNaN(model.value)) {
-    inputText.value = null;
+  if (_inputText.value === null) return;
+  const numVal = Number(_inputText.value);
+  if (isNaN(numVal)) {
+    _inputText.value = null;
     return;
   }
-  inputText.value = model.value.toString();
+  _inputText.value = numVal.toString();
 };
 const handleFocus = () => {
   onFocus();
@@ -518,7 +579,39 @@ const numberFieldStyles = computed(() => {
     props.style
   ];
 });
-defineExpose(forwardRefs({ filterProps }, origamTextFieldRef));
+const compactClasses = computed(() => {
+  return [
+    "origam-number-field",
+    "origam-number-field--compact",
+    props.class
+  ];
+});
+const compactInputText = computed({
+  get: () => model.value != null ? String(model.value) : "",
+  set(val) {
+    if (val === "") {
+      model.value = null;
+    } else if (!isNaN(Number(val))) {
+      const clamped = clamp(Number(val), props.min, props.max);
+      model.value = clamped;
+    }
+  }
+});
+const handleCompactIncrement = () => {
+  toggleUpDown(true);
+};
+const handleCompactDecrement = () => {
+  toggleUpDown(false);
+};
+const { id, css, load, isLoaded, unload } = useStyle(numberFieldStyles);
+defineExpose(forwardRefs({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+}, origamTextFieldRef));
 </script>
 
 <style lang="scss" scoped>
@@ -561,8 +654,8 @@ defineExpose(forwardRefs({ filterProps }, origamTextFieldRef));
 			height: 100%;
 
 			.origam-btn {
-				background-color: transparent;
-				border-radius: 0;
+				background-color: var(--origam-number-field__control---background-color, transparent);
+				border-radius: var(--origam-number-field__control---border-radius, 0);
 			}
 		}
 
@@ -594,5 +687,24 @@ defineExpose(forwardRefs({ filterProps }, origamTextFieldRef));
 				padding-inline: 0;
 			}
 		}
+
+		&--compact {
+			display: inline-flex;
+			align-items: center;
+			gap: var(--origam-number-field--compact---gap, 8px);
+
+			.origam-number-field__compact-input {
+				width: var(--origam-number-field--compact__input---width, 3em);
+				text-align: center;
+				font-variant-numeric: tabular-nums;
+				border: 0;
+				background: transparent;
+				padding: 0;
+				color: inherit;
+				font-size: inherit;
+				font-family: inherit;
+				outline: none;
+			}
+		}
 	}
 </style>

package/dist/src/components/OtpInputField/OrigamOtpInputField.vue

@@ -55,7 +55,7 @@
 					<template #default>
 						<input
 								ref="inputRef"
-								:aria-label="t(label, i + 1)"
+								:aria-label="t('origam.input.otp', i + 1)"
 								:autofocus="i === 0 && autofocus"
 								:disabled="disabled"
 								:inputmode="type === 'number' ? 'numeric' : 'text'"
@@ -113,7 +113,7 @@
 				<template #loader>
 					<slot name="loader">
 						<origam-progress
-								:color="typeof props.loading === 'boolean' ? undefined : loading"
+								:color="typeof loading === 'boolean' ? undefined : loading"
 								:size="24"
 								:type="PROGRESS_TYPE.CIRCULAR"
 								indeterminate
@@ -131,58 +131,57 @@
 <script setup>
 import { computed, nextTick, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import { OrigamField, OrigamOverlay, OrigamProgress } from "../../components";
-import { useDimension, useFocus, useLocale, useProps, useVModel } from "../../composables";
+import { useDimension, useFocus, useLocale, useProps, useVModel, useStyle } from "../../composables";
 import { OTP_INPUT_FIELD_TYPE, PROGRESS_TYPE } from "../../enums";
-import { filterInputAttrs, focusChild } from "../../utils";
+import { filterInputAttrs, focusChild, forwardRefs } from "../../utils";
 const props = defineProps({
   autofocus: { type: Boolean, required: false },
   divider: { type: String, required: false },
   focusAll: { type: Boolean, required: false },
   length: { type: [Number, String], required: false, default: 6 },
-  modelValue: { type: [Number, String], required: false },
+  modelValue: { type: [Number, String, null], required: false },
   placeholder: { type: String, required: false },
+  persistentPlaceholder: { type: Boolean, required: false },
+  role: { type: String, required: false },
   type: { type: null, required: false, default: OTP_INPUT_FIELD_TYPE.NUMBER },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  density: { type: null, required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
   minHeight: { type: [Number, String], required: false },
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
-  focused: { type: Boolean, required: false },
-  active: { type: Boolean, required: false },
   centerAffix: { type: Boolean, required: false },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   flat: { type: Boolean, required: false },
-  label: { type: String, required: false, default: "origam.input.otp" },
+  inline: { type: Boolean, required: false },
+  label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
   persistentClear: { type: Boolean, required: false },
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
   prependInnerIcon: { type: null, required: false },
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
-  density: { type: null, required: false },
+  focused: { type: Boolean, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
+  name: { type: String, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -206,13 +205,35 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomRight: { type: [Boolean, Number, String], required: false }
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
+  elevation: { type: [Number, String], required: false },
+  size: { type: null, required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  hideSpinButtons: { type: Boolean, required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  messages: { type: [Array, String], required: false },
+  direction: { type: null, required: false },
+  errorMessages: { type: [Array, String], required: false },
+  maxErrors: { type: [Number, String], required: false },
+  readonly: { type: Boolean, required: false },
+  rules: { type: Array, required: false },
+  validateOn: { type: null, required: false },
+  validationValue: { type: null, required: false },
+  appendAvatar: { type: String, required: false },
+  appendIcon: { type: null, required: false },
+  prependAvatar: { type: String, required: false },
+  prependIcon: { type: null, required: false }
 });
-const emits = defineEmits(["finish", "update:focused", "update:modelValue"]);
+const emits = defineEmits(["finish", "click:control", "mousedown:control", "click:clear", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "update:active", "click:append", "click:prepend"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const attrs = useAttrs();
@@ -244,7 +265,8 @@ const fieldProps = (index) => {
   return origamFieldRef.value?.[index]?.filterProps(props, ["class", "style", "id", "label"]);
 };
 const handleInput = () => {
-  if (isValidNumber(current.value.value)) {
+  if (!current.value) return;
+  if (isInvalidValue(current.value.value)) {
     current.value.value = "";
     return;
   }
@@ -296,7 +318,7 @@ const handlePaste = (index, e) => {
   e.preventDefault();
   e.stopPropagation();
   const clipboardText = e?.clipboardData?.getData("Text").slice(0, length.value) ?? "";
-  if (isValidNumber(clipboardText)) return;
+  if (isInvalidValue(clipboardText)) return;
   model.value = clipboardText.split("");
   inputRef.value?.[index].blur();
 };
@@ -304,15 +326,15 @@ const reset = () => {
   model.value = [];
 };
 const handleFocus = (_e, index) => {
-  focus();
+  if (!isFocused.value) focus();
   focusIndex.value = index;
 };
 const handleBlur = () => {
   blur();
   focusIndex.value = -1;
 };
-const isValidNumber = (value) => {
-  return props.type === "number" && /[^0-9]/g.test(value);
+const isInvalidValue = (value) => {
+  return props.type === OTP_INPUT_FIELD_TYPE.NUMBER && /[^0-9]/g.test(value);
 };
 watch(model, (val) => {
   if (val.length === length.value) emits("finish", val.join(""));
@@ -337,17 +359,21 @@ const otpInputFieldClasses = computed(() => {
     props.class
   ];
 });
-defineExpose({
+const { id, css, load, isLoaded, unload } = useStyle(otpInputFieldStyles);
+defineExpose(forwardRefs({
   blur: () => {
-    inputRef.value?.some((input) => input.blur());
+    inputRef.value?.some((input) => {
+      input.blur();
+      return true, css, id, load, unload, isLoaded;
+    });
   },
   focus: () => {
-    inputRef.value?.[0].focus();
+    inputRef.value?.[0]?.focus();
   },
   reset,
   isFocused,
   filterProps
-});
+}));
 </script>
 
 <style lang="scss" scoped>
@@ -357,9 +383,9 @@ defineExpose({
 		align-items: center;
 		display: flex;
 		justify-content: center;
-		padding: .5rem 0;
+		padding: var(--origam-otp-input-field---padding-block, .5rem) 0;
 		position: relative;
-		border-radius: 4px;
+		border-radius: var(--origam-otp-input-field---border-radius, 4px);
 
 		.origam-field {
 			height: 100%;
@@ -368,28 +394,30 @@ defineExpose({
 		}
 
 		&__divider {
-			margin: 0 8px;
+			margin: 0 var(--origam-otp-input-field__divider---margin-inline, 8px);
 		}
 
 		&__content {
 			align-items: center;
 			display: flex;
-			gap: .5rem;
-			height: 64px;
-			padding: .5rem;
+			gap: var(--origam-otp-input-field---gap, .5rem);
+			height: var(--origam-otp-input-field__content---height, 64px);
+			padding: var(--origam-otp-input-field__content---padding, .5rem);
 			justify-content: center;
-			max-width: 320px;
+			max-width: var(--origam-otp-input-field__content---max-width, 320px);
 			position: relative;
 			border-radius: inherit;
 		}
 
 		&__field {
-			color: inherit;
-			font-size: 1.25rem;
+			color: var(--origam-otp-input-field__cell---color, inherit);
+			font-size: var(--origam-otp-input-field__cell---font-size, 1.25rem);
 			height: 100%;
-			outline: none;
-			text-align: center;
+			outline: var(--origam-otp-input-field__cell---outline, none);
+			text-align: var(--origam-otp-input-field__cell---text-align, center);
 			width: 100%;
+			border: var(--origam-otp-input-field__cell---border, none);
+			background: var(--origam-otp-input-field__cell---background, transparent);
 
 			&[type=number]::-webkit-outer-spin-button,
 			&[type=number]::-webkit-inner-spin-button {
@@ -416,14 +444,8 @@ defineExpose({
 
 		&--divided {
 			#{$this}__content {
-				max-width: 360px;
+				max-width: var(--origam-otp-input-field__content---max-width-divided, 360px);
 			}
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>