windly-ui 1.0.2 → 1.0.4

package/dist/runtime/components/Image.vue.d.ts

@@ -0,0 +1,77 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderType: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderType: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    borderColor: string;
+    alt: string;
+    placeholder: string;
+    width: string;
+    height: string;
+    fit: string;
+    borderType: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Input.d.vue.ts

@@ -0,0 +1,68 @@
+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";
+type __VLS_Props = {
+    modelValue: string | number;
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    case?: "upper" | "lower" | "capitalize" | "normal" | null;
+    size?: string;
+    color?: string;
+    rounded?: string;
+    dense?: boolean;
+    width?: string;
+    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;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+    invalid: (error: string) => any;
+    valid: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onInvalid?: ((error: string) => any) | undefined;
+    onValid?: (() => any) | undefined;
+}>, {
+    modelValue: string | number;
+    disabled: boolean;
+    dense: boolean;
+    type: SupportedInputType;
+    required: boolean;
+    color: string;
+    rounded: string;
+    size: string;
+    flat: boolean;
+    placeholder: string;
+    width: string;
+    readonly: boolean;
+    hint: string;
+    outlined: boolean;
+    borderless: boolean;
+    case: "upper" | "lower" | "capitalize" | "normal" | null;
+    allow: ValidationRule[];
+    deny: ValidationRule[];
+    supportedValues: Array<string | number>;
+    unsupportedValues: Array<string | number>;
+    regex: string | RegExp;
+    minLength: number;
+    maxLength: number;
+    autocomplete: string;
+    validateOn: ValidateOn;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Input.vue

@@ -0,0 +1,241 @@
+<script setup>
+import { computed, ref } from "vue";
+const props = defineProps({
+  modelValue: { type: [String, Number], required: true, default: "" },
+  label: { type: String, required: false },
+  hint: { type: String, required: false, default: "" },
+  placeholder: { type: String, required: false, default: "" },
+  case: { type: [String, null], required: false, default: null },
+  size: { type: String, required: false, default: "md" },
+  color: { type: String, required: false, default: "" },
+  rounded: { type: String, required: false, default: "md" },
+  dense: { type: Boolean, required: false, default: false },
+  width: { type: String, required: false, default: "" },
+  outlined: { type: Boolean, required: false, default: false },
+  borderless: { type: Boolean, required: false, default: false },
+  flat: { type: Boolean, required: false, default: false },
+  type: { type: String, required: false, default: "text" },
+  allow: { type: Array, required: false, default: () => [] },
+  deny: { type: Array, required: false, default: () => [] },
+  supportedValues: { type: Array, required: false, default: () => [] },
+  unsupportedValues: { type: Array, required: false, default: () => [] },
+  required: { type: Boolean, required: false, default: false },
+  regex: { type: null, required: false, default: "" },
+  minLength: { type: Number, required: false, default: void 0 },
+  maxLength: { type: Number, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  autocomplete: { type: String, required: false, default: "off" },
+  validateOn: { type: String, required: false, default: "input" }
+});
+const emit = defineEmits(["update:modelValue", "valid", "invalid"]);
+const validationError = ref("");
+const NATIVE_PATTERNS = {
+  email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  url: /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/\S*)?$/i,
+  tel: /^\+?[1-9]\d{6,14}$/
+};
+const RULE_PATTERNS = {
+  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) {
+  validationError.value = "";
+  if (props.required && !value.trim()) {
+    validationError.value = "This field is required.";
+    return false;
+  }
+  if (props.minLength !== void 0 && value.length < props.minLength) {
+    validationError.value = `Minimum ${props.minLength} characters required.`;
+    return false;
+  }
+  if (props.maxLength !== void 0 && 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) {
+  const isValid = validate(value);
+  if (isValid) {
+    emit("valid");
+  } else {
+    emit("invalid", validationError.value);
+  }
+  return isValid;
+}
+function handleInput(event) {
+  const target = event.target;
+  let value = target.value;
+  if (props.maxLength !== void 0 && value.length > props.maxLength) {
+    value = value.slice(0, props.maxLength);
+  }
+  emit("update:modelValue", value);
+  if (props.validateOn === "input") {
+    runValidation(value);
+  }
+}
+function handleBlur(event) {
+  if (props.validateOn !== "blur") return;
+  const target = event.target;
+  runValidation(target.value);
+}
+const isHex = (val) => 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 transition-all duration-300";
+  if (props.borderless) {
+    classes += " border-none bg-transparent";
+  } else if (props.outlined) {
+    classes += " border";
+  } else {
+    classes += " border-0 border-b";
+  }
+  classes += ` ${roundedMap[props.rounded] ?? roundedMap.md}`;
+  if (!props.flat) {
+    classes += " shadow-sm";
+  }
+  if (props.disabled) {
+    classes += " opacity-50 cursor-not-allowed";
+  }
+  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";
+  }
+  if (validationError.value) {
+    classes += " border-red-500";
+  } else {
+    classes += ` ${props.color && !isHex(props.color) ? `border-${props.color} focus:ring-${props.color} ` : ""}`;
+  }
+  if (props.width && !CSS.supports("width", props.width)) {
+    classes += `w-${props.width} `;
+  }
+  if (!props.width) classes += "w-full ";
+  if (props.modelValue !== null && props.modelValue !== "" && props.modelValue !== void 0)
+    classes += " has-value";
+  return classes;
+});
+const computedStyle = computed(() => {
+  let styles = {};
+  if (props.width && CSS.supports("width", props.width)) {
+    styles["width"] = props.width;
+  }
+  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 inputAttrs2 = {};
+  if (props.type) inputAttrs2 = { ...inputAttrs2, type: props.type === "password" ? inputType.value : props.type };
+  if (props.placeholder) inputAttrs2 = { ...inputAttrs2, placeholder: props.placeholder };
+  if (props.disabled) inputAttrs2 = { ...inputAttrs2, disabled: props.disabled };
+  if (props.readonly) inputAttrs2 = { ...inputAttrs2, readonly: props.readonly };
+  if (props.autocomplete) inputAttrs2 = { ...inputAttrs2, autocomplete: props.autocomplete };
+  if (props.required) inputAttrs2 = { ...inputAttrs2, required: props.required };
+  if (props.maxLength) inputAttrs2 = { ...inputAttrs2, maxlength: props.maxLength };
+  return inputAttrs2;
+});
+</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="color && !isHex(color) ? `text-${color}` : ''" :style="color ? { color: isHex(color) ? color : '' } : { color: '#9ca3af' }">
+      {{ 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{margin:20px 0 10px;position:relative}.input-container.dense{margin:10px 0}.input-container .input{padding:10px}.input-container.dense .input{padding:6px 10px}.input:focus{outline:none}.label{left:10px;padding:0 5px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:top .2s ease,font-size .2s ease,color .2s ease,transform .2s ease}.input-container:has(input[type=date]) .label,.input-container:has(input[type=datetime-local]) .label,.input-container:has(input[type=month]) .label,.input-container:has(input[type=time]) .label,.input-container:has(input[type=week]) .label{left:5px;top:-20%;transform:none;z-index:1}.input-container.input-lg.dense .input:-moz-placeholder+.label,.input:-moz-placeholder+.label{left:5px;top:-20px;transform:none;z-index:1}.input-container.input-lg.dense .input.has-value+.label,.input-container.input-lg.dense .input:focus+.label,.input-container.input-lg.dense .input:placeholder-shown+.label,.input.has-value+.label,.input:focus+.label,.input:placeholder-shown+.label{left:5px;top:-20px;transform:none;z-index:1}.input-container.dense .input:-moz-placeholder+.label{top:-10px}.input-container.dense .input.has-value+.label,.input-container.dense .input:focus+.label,.input-container.dense .input:placeholder-shown+.label{top:-10px}.input-container.input-lg .input:-moz-placeholder+.label{top:-24px}.input-container.input-lg .input.has-value+.label,.input-container.input-lg .input:focus+.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:-moz-placeholder+.label{font-size:12px}.input-container.input-sm .input.has-value+.label,.input-container.input-sm .input:focus+.label,.input-container.input-sm .input:placeholder-shown+.label{font-size:12px}.input-container.input-md .input:-moz-placeholder+.label{font-size:14px}.input-container.input-md .input.has-value+.label,.input-container.input-md .input:focus+.label,.input-container.input-md .input:placeholder-shown+.label{font-size:14px}.input-container.input-lg .input:-moz-placeholder+.label{font-size:16px}.input-container.input-lg .input.has-value+.label,.input-container.input-lg .input:focus+.label,.input-container.input-lg .input:placeholder-shown+.label{font-size:16px}.hint-text{color:#6b7280;font-size:12px;margin-left:5px}.char-count{color:#6b7280}.char-count,.error-text{font-size:.875rem;margin-top:4px}.error-text{color:#ef4444}
+</style>

package/dist/runtime/components/Input.vue.d.ts

@@ -0,0 +1,68 @@
+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";
+type __VLS_Props = {
+    modelValue: string | number;
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    case?: "upper" | "lower" | "capitalize" | "normal" | null;
+    size?: string;
+    color?: string;
+    rounded?: string;
+    dense?: boolean;
+    width?: string;
+    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;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+    invalid: (error: string) => any;
+    valid: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onInvalid?: ((error: string) => any) | undefined;
+    onValid?: (() => any) | undefined;
+}>, {
+    modelValue: string | number;
+    disabled: boolean;
+    dense: boolean;
+    type: SupportedInputType;
+    required: boolean;
+    color: string;
+    rounded: string;
+    size: string;
+    flat: boolean;
+    placeholder: string;
+    width: string;
+    readonly: boolean;
+    hint: string;
+    outlined: boolean;
+    borderless: boolean;
+    case: "upper" | "lower" | "capitalize" | "normal" | null;
+    allow: ValidationRule[];
+    deny: ValidationRule[];
+    supportedValues: Array<string | number>;
+    unsupportedValues: Array<string | number>;
+    regex: string | RegExp;
+    minLength: number;
+    maxLength: number;
+    autocomplete: string;
+    validateOn: ValidateOn;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Radio.d.vue.ts

@@ -0,0 +1,41 @@
+type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
+type RadioSize = 'sm' | 'md' | 'lg';
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type __VLS_Props = {
+    modelValue?: string | number | boolean;
+    value: string | number | boolean;
+    label: string;
+    id?: string;
+    name?: string;
+    hint?: string;
+    icon?: string;
+    disable?: boolean;
+    color?: string;
+    size?: RadioSize;
+    rounded?: Rounded;
+    flat?: boolean;
+    bordered?: boolean;
+    borderColor?: string;
+    labelPosition?: LabelPosition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+}>, {
+    modelValue: string | number | boolean;
+    name: string;
+    disable: boolean;
+    color: string;
+    rounded: Rounded;
+    size: RadioSize;
+    borderColor: string;
+    icon: string;
+    flat: boolean;
+    id: string;
+    bordered: boolean;
+    hint: string;
+    labelPosition: LabelPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;