windly-ui 1.0.1 → 1.0.2

package/ui-library/components/Input.vue

@@ -1,531 +0,0 @@
-<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>