windly-ui 1.0.0

package/ui-library/components/Input.vue

@@ -0,0 +1,531 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+type SupportedInputType =
+  | 'text'
+  | 'email'
+  | 'password'
+  | 'number'
+  | 'tel'
+  | 'url'
+  | 'search'
+  | 'date'
+  | 'datetime-local'
+  | 'month'
+  | 'week'
+  | 'time';
+
+type ValidationRule =
+  | "alphabets"
+  | "numbers"
+  | "spaces"
+  | "name"
+  | "punctuation"
+  | "integer"
+  | "positive"
+  | "negative"
+  | "decimal"
+  | "scientific"
+  | "uppercase"
+  | "lowercase";
+
+type ValidateOn = "input" | "blur";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | number;
+
+    label: string;
+    hint?: string;
+    placeholder?: string;
+
+    case?: "upper" | "lower" | "capitalize" | "normal" | null;
+
+    size?: string;
+    color?: string;
+    rounded?: string;
+    dense?: boolean;
+
+    outlined?: boolean;
+    borderless?: boolean;
+    flat?: boolean;
+
+    type?: SupportedInputType;
+
+    allow?: ValidationRule[];
+    deny?: ValidationRule[];
+
+    supportedValues?: Array<string | number>;
+    unsupportedValues?: Array<string | number>;
+
+    required?: boolean;
+
+    regex?: string | RegExp;
+
+    minLength?: number;
+    maxLength?: number;
+
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: string;
+
+    validateOn?: ValidateOn;
+  }>(),
+  {
+    modelValue: "",
+
+    hint: "",
+    placeholder: "",
+
+    case: null,
+
+    size: "md",
+    color: "primary",
+    rounded: "md",
+    dense: false,
+
+    outlined: false,
+    borderless: false,
+    flat: false,
+
+    type: "text",
+
+    allow: () => [],
+    deny: () => [],
+
+    supportedValues: () => [],
+    unsupportedValues: () => [],
+
+    required: false,
+
+    regex: "",
+
+    minLength: undefined,
+    maxLength: undefined,
+
+    disabled: false,
+    readonly: false,
+    autocomplete: "off",
+
+    validateOn: "input",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+  (e: "valid"): void;
+  (e: "invalid", error: string): void;
+}>();
+
+const validationError = ref("");
+
+const NATIVE_PATTERNS: Record<string, RegExp> = {
+  email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  url: /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/\S*)?$/i,
+  tel: /^\+?[1-9]\d{6,14}$/,
+};
+
+const RULE_PATTERNS: Record<ValidationRule, RegExp> = {
+  alphabets: /^[A-Za-z]+$/,
+  numbers: /^[0-9]+$/,
+  spaces: /\s/,
+  name: /^[A-Za-z.'-\s]+$/,
+  punctuation: /[.,!?;:'"()-]/,
+  integer: /^-?\d+$/,
+  positive: /^\d+$/,
+  negative: /^-\d+$/,
+  decimal: /^-?\d*\.?\d+$/,
+  scientific: /^-?\d+(\.\d+)?e[-+]?\d+$/i,
+  uppercase: /^[A-Z]+$/,
+  lowercase: /^[a-z]+$/,
+};
+
+function validate(value: string): boolean {
+  validationError.value = "";
+
+  if (props.required && !value.trim()) {
+    validationError.value = "This field is required.";
+    return false;
+  }
+
+  if (
+    props.minLength !== undefined &&
+    value.length < props.minLength
+  ) {
+    validationError.value =
+      `Minimum ${props.minLength} characters required.`;
+    return false;
+  }
+
+  if (
+    props.maxLength !== undefined &&
+    value.length > props.maxLength
+  ) {
+    validationError.value =
+      `Maximum ${props.maxLength} characters allowed.`;
+    return false;
+  }
+
+  if (
+    props.supportedValues.length &&
+    !props.supportedValues.includes(value)
+  ) {
+    validationError.value = "Value is not allowed.";
+    return false;
+  }
+
+  if (
+    props.unsupportedValues.includes(value)
+  ) {
+    validationError.value = "Value is not permitted.";
+    return false;
+  }
+
+  const nativePattern = NATIVE_PATTERNS[props.type];
+
+  if (
+    nativePattern &&
+    value &&
+    !nativePattern.test(value)
+  ) {
+    validationError.value =
+      `Invalid ${props.type} format.`;
+    return false;
+  }
+
+  for (const rule of props.allow) {
+    const regex = RULE_PATTERNS[rule];
+
+    if (
+      regex &&
+      value &&
+      !regex.test(value)
+    ) {
+      validationError.value =
+        `Failed validation: ${rule}`;
+      return false;
+    }
+  }
+
+  for (const rule of props.deny) {
+    const regex = RULE_PATTERNS[rule];
+
+    if (
+      regex &&
+      regex.test(value)
+    ) {
+      validationError.value =
+        `Contains unsupported value: ${rule}`;
+      return false;
+    }
+  }
+
+  if (props.regex) {
+    const regex =
+      props.regex instanceof RegExp
+        ? props.regex
+        : new RegExp(props.regex);
+
+    if (!regex.test(value)) {
+      validationError.value =
+        "Custom validation failed.";
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function runValidation(value: string) {
+  const isValid = validate(value);
+
+  if (isValid) {
+    emit("valid");
+  } else {
+    emit("invalid", validationError.value);
+  }
+
+  return isValid;
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  let value = target.value;
+
+  if (
+    props.maxLength !== undefined &&
+    value.length > props.maxLength
+  ) {
+    value = value.slice(0, props.maxLength);
+  }
+
+  emit("update:modelValue", value);
+
+  if (props.validateOn === "input") {
+    runValidation(value);
+  }
+}
+
+function handleBlur(event: Event) {
+  if (props.validateOn !== "blur") return;
+
+  const target = event.target as HTMLInputElement;
+
+  runValidation(target.value);
+}
+
+const isHex = (val: string) => val.startsWith('#')
+
+const roundedMap = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-full",
+};
+
+const computedClass = computed(() => {
+  let classes =
+    "input block w-full transition-all duration-300";
+
+  // style mode
+  if (props.borderless) {
+    classes += " border-none bg-transparent";
+  } else if (props.outlined) {
+    classes += " border";
+  } else {
+    classes += " border-0 border-b";
+  }
+
+  // rounded
+  classes += ` ${
+    roundedMap[props.rounded as keyof typeof roundedMap] ?? roundedMap.md
+  }`;
+
+  // flat
+  if (!props.flat) {
+    classes += " shadow-sm";
+  }
+
+  // disabled
+  if (props.disabled) {
+    classes += " opacity-50 cursor-not-allowed";
+  }
+
+  // size
+  if (props.size === "sm") {
+    classes += " text-sm";
+  } else if (props.size === "lg") {
+    classes += " text-lg";
+  } else {
+    classes += " text-base";
+  }
+
+  if (props.case === "upper") {
+    classes += " uppercase";
+  } else if (props.case === "lower") {
+    classes += " lowercase";
+  } else if (props.case === "capitalize") {
+    classes += " capitalize";
+  }
+
+  // color / error
+  if (validationError.value) {
+    classes += " border-red-500";
+  } else {
+    classes += ` ${
+      props.color && !isHex(props.color)
+        ? `border-${props.color} focus:ring-${props.color} text-${props.color}  `
+        : ""
+    }`;
+  }
+  
+  if (props.modelValue !== null && props.modelValue !== '' && props.modelValue !== undefined)
+    classes += " has-value";
+
+  return classes;
+});
+
+const computedStyle = computed(() => {
+  let styles: Record<string, string> = {};
+
+  if (props.color && isHex(props.color)) {
+    styles["--tw-ring-color"] = props.color;
+    styles["border-color"] = props.color;
+  }
+
+  return styles;
+});
+
+const visibility = ref(false);
+
+const inputType = computed(() => props.type === "password" ? visibility.value ? "text" : "password" : props.type);
+
+const inputAttrs = computed(() => {
+  let inputAttrs = {}
+  if (props.type)  inputAttrs = { ...inputAttrs, type: props.type === "password" ? inputType.value : props.type }
+  if (props.placeholder)  inputAttrs = { ...inputAttrs, placeholder: props.placeholder }
+  if (props.disabled)  inputAttrs = { ...inputAttrs, disabled: props.disabled }
+  if (props.readonly)  inputAttrs = { ...inputAttrs, readonly: props.readonly }
+  if (props.autocomplete)  inputAttrs = { ...inputAttrs, autocomplete: props.autocomplete }
+  if (props.required)  inputAttrs = { ...inputAttrs, required: props.required }
+  if (props.maxLength)  inputAttrs = { ...inputAttrs, maxlength: props.maxLength }
+  return inputAttrs
+});
+</script>
+
+<template>
+  <div class="input-container" :class="{ dense: !outlined || dense, [`input-${size}`]: size }">
+    <input
+      :value="modelValue"
+      :class="computedClass"
+      :style="computedStyle"
+      @input="handleInput"
+      @blur="handleBlur"
+      v-bind="inputAttrs"
+    />
+
+    <label class="label" :class="!isHex(color) ? `text-${color}` : ''" :style="isHex(color) ? { color: color } : {}">
+      {{ label }}
+    </label>
+
+    <div class="absolute right-0 top-1/2 transform -translate-y-1/2">
+      <UIButton v-if="type==='password'" :icon="visibility ? 'visibility_off' : 'visibility'" flat dense color="gray-400"  @click="visibility = !visibility" />
+    </div>
+    <p
+      v-if="hint && !validationError"
+      class="hint-text"
+    >
+      {{ hint }}
+    </p>
+
+    <p
+      v-if="validationError"
+      class="error-text"
+    >
+      {{ validationError }}
+    </p>
+  </div>
+</template>
+<style scoped>
+.input-container {
+  position: relative;
+  margin: 20px 0px 10px 0px;
+}
+
+.input-container.dense {
+  margin: 10px 0;
+}
+
+.input-container .input {
+  padding: 10px;
+}
+
+.input-container.dense .input {
+  padding: 6px 10px;
+}
+
+.input:focus {
+  outline: none;
+}
+
+.label {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #9ca3af;
+  padding: 0 5px;
+  pointer-events: none;
+  transition:
+    top 0.2s ease,
+    font-size 0.2s ease,
+    color 0.2s ease,
+    transform 0.2s ease;
+}
+
+
+.input-container:has(input[type="date"]) .label,
+.input-container:has(input[type="datetime-local"]) .label,
+.input-container:has(input[type="time"]) .label,
+.input-container:has(input[type="month"]) .label,
+.input-container:has(input[type="week"]) .label {
+  top: -20%;
+  left: 5px;
+  transform: none;
+  color: gray;
+  z-index: 1;
+}
+
+.input:focus + .label,
+.input.has-value + .label,
+.input:placeholder-shown + .label,
+.input-container.input-lg.dense .input:focus + .label,
+.input-container.input-lg.dense .input.has-value + .label,
+.input-container.input-lg.dense .input:placeholder-shown + .label {
+  top: -20px;
+  left: 5px;
+  transform: none;
+  color: gray;
+  z-index: 1;
+}
+
+.input-container.dense .input:focus + .label,
+.input-container.dense .input.has-value + .label,
+.input-container.dense .input:placeholder-shown + .label {
+  top: -10px;
+}
+
+.input-container.input-lg .input:focus + .label,
+.input-container.input-lg .input.has-value + .label,
+.input-container.input-lg .input:placeholder-shown + .label {
+  top: -24px;
+}
+
+.input-container.input-sm .label {
+  font-size: 14px;
+}
+.input-container.input-md .label {
+  font-size: 16px;
+}
+.input-container.input-lg .label {
+  font-size: 18px;
+}
+
+.input-container.input-sm .input:focus + .label,
+.input-container.input-sm .input.has-value + .label,
+.input-container.input-sm .input:placeholder-shown + .label {
+  font-size: 12px;
+}
+
+.input-container.input-md .input:focus + .label,
+.input-container.input-md .input.has-value + .label,
+.input-container.input-md .input:placeholder-shown + .label {
+  font-size: 14px;
+}
+
+.input-container.input-lg .input:focus + .label,
+.input-container.input-lg .input.has-value + .label,
+.input-container.input-lg .input:placeholder-shown + .label {
+  font-size: 16px;
+}
+
+.hint-text {
+  font-size: 12px;
+  color: #6b7280;
+  margin-left: 5px;
+}
+
+.char-count {
+  margin-top: 4px;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.error-text {
+  margin-top: 4px;
+  font-size: 0.875rem;
+  color: #ef4444;
+}
+</style>