@umbra.ui/core 0.1.0

package/src/components/inputs/InputText/InputText.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { RippleAnimOutlineIcon, LockIcon } from "@umbra-ui/icons";
+import "../theme.css";
+
+export interface Props {
+  value?: string;
+  placeholder?: string;
+  state?: "normal" | "active" | "disabled" | "readonly" | "error";
+  size?: "compact" | "normal";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: "",
+  placeholder: "Enter text",
+  state: "normal",
+  size: "normal",
+});
+
+const emit = defineEmits<{
+  "update:value": [value: string];
+}>();
+
+// Get the appropriate text color for icons based on state
+const getIconColor = () => {
+  switch (props.state) {
+    case "readonly":
+      return "var(--input-readonly-text)";
+    case "disabled":
+      return "var(--input-disabled-text)";
+    case "error":
+      return "var(--input-error-text)";
+    default:
+      return "var(--input-text-filled)";
+  }
+};
+
+const internalValue = ref(props.value);
+
+// Watch for changes to value prop
+watch(
+  () => props.value,
+  (newValue) => {
+    internalValue.value = newValue;
+  }
+);
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  internalValue.value = target.value;
+  emit("update:value", target.value);
+};
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="[$style.input_container, $style[state], $style[size]]">
+      <input
+        class="body"
+        type="text"
+        :placeholder="placeholder"
+        :value="internalValue"
+        @input="handleInput"
+        :disabled="state === 'disabled'"
+        :readonly="state === 'readonly'"
+      />
+      <RippleAnimOutlineIcon
+        v-if="state === 'active'"
+        :class="$style.icon"
+        :size="16"
+        :color="getIconColor()"
+      />
+      <LockIcon
+        v-if="state === 'readonly'"
+        :class="$style.icon"
+        :size="16"
+        :color="getIconColor()"
+      />
+    </div>
+    <p v-if="state === 'error'" :class="[$style.error_message, 'footnote']">
+      Information About The Error
+    </p>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.588rem;
+}
+
+.input_container {
+  width: 100%;
+  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.normal {
+  padding-left: 0.882rem;
+  padding-right: 0.882rem;
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+}
+
+.input_container.compact {
+  padding-top: 0.294rem;
+  padding-bottom: 0.294rem;
+  padding-left: 0.471rem;
+  padding-right: 0.471rem;
+}
+
+.input_container:focus-within {
+  border: 1px solid var(--input-focus-border);
+}
+
+.input_container input {
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+}
+
+.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-error-text);
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+.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 */
+  }
+}
+</style>