@umbra.ui/core 0.1.0

package/src/components/inputs/InputNumber/InputNumber.vue

@@ -0,0 +1,300 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import "../theme.css";
+import { RippleAnimOutlineIcon, LockIcon } from "@umbra-ui/icons";
+
+export interface Props {
+  value?: number;
+  placeholder?: string;
+  min?: number;
+  max?: number;
+  label?: string;
+  state?: "normal" | "active" | "disabled" | "readonly" | "error";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: undefined,
+  placeholder: "0",
+  min: undefined,
+  max: undefined,
+  state: "normal",
+  label: undefined,
+});
+
+const emit = defineEmits<{
+  "update:value": [value: number];
+}>();
+
+const internalValue = ref(props.value);
+const isOutOfRange = ref(false);
+const rangeErrorMessage = ref("");
+
+// Computed property to determine the actual state
+const actualState = computed(() => {
+  if (isOutOfRange.value) return "error";
+  return props.state;
+});
+
+// Get the appropriate text color for icons based on state
+const getIconColor = () => {
+  return "var(--input-text-filled)";
+};
+
+// Watch for changes to value prop
+watch(
+  () => props.value,
+  (newValue) => {
+    internalValue.value = newValue;
+    checkRange(newValue);
+  }
+);
+
+const checkRange = (value: number | undefined) => {
+  if (value === undefined) {
+    isOutOfRange.value = false;
+    rangeErrorMessage.value = "";
+    return;
+  }
+
+  if (props.min !== undefined && value < props.min) {
+    isOutOfRange.value = true;
+    rangeErrorMessage.value = `Value must be at least ${props.min}`;
+  } else if (props.max !== undefined && value > props.max) {
+    isOutOfRange.value = true;
+    rangeErrorMessage.value = `Value must be no more than ${props.max}`;
+  } else {
+    isOutOfRange.value = false;
+    rangeErrorMessage.value = "";
+  }
+};
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const numValue = target.value === "" ? undefined : Number(target.value);
+  internalValue.value = numValue;
+  checkRange(numValue);
+  emit("update:value", numValue || 0);
+};
+
+const getPlaceholder = computed(() => {
+  if (props.state === "readonly") {
+    return "Field Cannot Be Edited";
+  }
+  return props.placeholder;
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="[$style.input_container, $style[actualState]]">
+      <input
+        class="body"
+        type="number"
+        :placeholder="getPlaceholder"
+        :value="internalValue"
+        :min="min"
+        :max="max"
+        @input="handleInput"
+        :disabled="state === 'disabled'"
+        :readonly="state === 'readonly'"
+      />
+      <RippleAnimOutlineIcon
+        v-if="state === 'active' && !isOutOfRange"
+        :class="$style.icon"
+        :size="16"
+        :color="getIconColor()"
+      />
+      <LockIcon
+        v-if="state === 'readonly'"
+        :class="$style.icon"
+        :size="16"
+        :color="getIconColor()"
+      />
+      <span v-if="label" :class="$style.units"
+        ><p class="footnote">{{ label }}</p></span
+      >
+    </div>
+    <p
+      v-if="actualState === 'error'"
+      :class="[$style.error_message, 'footnote']"
+    >
+      {{ rangeErrorMessage || "Information About The Error" }}
+    </p>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.588rem;
+}
+
+.input_container {
+  width: 100%;
+  padding-left: 0.882rem;
+  padding-right: 0.882rem;
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  border: var(--input-border);
+  border-radius: var(--input-border-radius);
+  transition: background-color 0.3s ease, border 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.input_container:focus-within {
+  border: 1px solid var(--input-focus-border);
+}
+
+.input_container input {
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+}
+
+/* State-based styling using CSS variables */
+.input_container.normal:has(input:placeholder-shown),
+.input_container.active:has(input:placeholder-shown) {
+  background-color: var(--input-background-normal);
+  color: var(--input-text-empty);
+}
+
+.input_container.normal:has(input:not(:placeholder-shown)),
+.input_container.active:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-background-filled);
+  color: var(--input-text-filled);
+  border-color: var(--input-border-filled);
+}
+
+.input_container.normal input:placeholder-shown,
+.input_container.active input:placeholder-shown {
+  color: var(--input-text-empty);
+}
+
+.input_container.normal input:not(:placeholder-shown),
+.input_container.active input:not(:placeholder-shown) {
+  color: var(--input-text-filled);
+}
+
+.input_container.disabled:has(input:placeholder-shown),
+.input_container.disabled:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-disabled-bg);
+  color: var(--input-disabled-text);
+  border-color: var(--input-disabled-border);
+  cursor: not-allowed;
+}
+
+.input_container.disabled input:placeholder-shown,
+.input_container.disabled input:not(:placeholder-shown) {
+  color: var(--input-disabled-text);
+  cursor: not-allowed;
+}
+
+.input_container.readonly:has(input:placeholder-shown),
+.input_container.readonly:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-readonly-bg);
+  color: var(--input-readonly-text);
+  border-color: var(--input-readonly-border);
+  cursor: not-allowed;
+}
+
+.input_container.readonly input:placeholder-shown,
+.input_container.readonly input:not(:placeholder-shown) {
+  color: var(--input-readonly-text);
+  cursor: not-allowed;
+}
+
+.input_container.error:has(input:placeholder-shown),
+.input_container.error:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-error-bg);
+  color: var(--input-error-text);
+  border-color: var(--input-error-border);
+}
+
+.input_container.error input:placeholder-shown,
+.input_container.error input:not(:placeholder-shown) {
+  color: var(--input-error-text);
+}
+
+.input_container.active {
+  pointer-events: none;
+}
+
+.error_message {
+  color: var(--input-text-error);
+}
+
+/* Hide increment/decrement controls in most modern browsers */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield; /* For Firefox */
+  appearance: textfield; /* Standard property */
+}
+
+.input_container input::placeholder {
+  color: var(--input-placeholder);
+}
+
+.input_container:has(input:not(:placeholder-shown)) input::placeholder {
+  color: var(--input-placeholder-filled);
+}
+
+.input_container.readonly input::placeholder {
+  color: var(--input-readonly-placeholder);
+}
+
+.input_container.disabled input::placeholder {
+  color: var(--input-disabled-placeholder);
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .input_container input {
+    font-size: 16px; /* Prevents zoom on iOS */
+  }
+}
+.units {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 0.588rem;
+  padding: 0.235rem 0.588rem;
+  color: var(--input-text-empty);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Update units styling when input has text */
+.input_container:has(input:not(:placeholder-shown)) .units {
+  background-color: rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+.input_container:has(input:not(:placeholder-shown)) .units p {
+  color: var(--input-text-filled);
+}
+
+/* Keep units styling when input is empty */
+.input_container:has(input:placeholder-shown) .units {
+  background-color: var(--input-background-normal);
+}
+
+.input_container:has(input:placeholder-shown) .units p {
+  color: var(--input-text-empty);
+}
+
+/* Error state styling for units when input has text */
+.input_container.error:has(input:not(:placeholder-shown)) .units {
+  background-color: rgba(var(--error-rgb), 0.1);
+  border-color: rgba(var(--error-rgb), 0.25);
+}
+.input_container.error:has(input:not(:placeholder-shown)) .units p {
+  color: var(--input-error-text);
+}
+</style>