windly-ui 1.0.1 → 1.0.3

package/dist/runtime/components/FileUploader.vue

@@ -0,0 +1,202 @@
+<script setup>
+import { computed, ref } from "vue";
+defineOptions({
+  name: "UIFileUploader"
+});
+const props = defineProps({
+  modelValue: { type: Array, required: false, default: () => [] },
+  header: { type: String, required: false, default: "Upload Files" },
+  subHeader: { type: String, required: false, default: "Supports document uploads" },
+  fileType: { type: String, required: false, default: "*" },
+  multiple: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false, default: false },
+  bordered: { type: Boolean, required: false, default: true },
+  flat: { type: Boolean, required: false, default: false },
+  rounded: { type: String, required: false, default: "xl" },
+  borderColor: { type: String, required: false, default: "gray-300" },
+  bgColor: { type: String, required: false, default: "white" },
+  separator: { type: String, required: false, default: "dashed" },
+  dense: { type: Boolean, required: false, default: false },
+  fileRemoverIcon: { type: String, required: false, default: "delete" },
+  fileSizeLimitKb: { type: Number, required: false, default: 2048 }
+});
+const emit = defineEmits(["update:modelValue"]);
+const fileInput = ref(
+  null
+);
+const errorMessage = ref("");
+const files = computed({
+  get: () => props.modelValue,
+  set: (value) => emit(
+    "update:modelValue",
+    value
+  )
+});
+const isHex = (val) => val.startsWith("#");
+const roundedClasses = computed(
+  () => {
+    const map = {
+      none: "",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl"
+    };
+    return map[props.rounded];
+  }
+);
+const separatorClasses = computed(
+  () => {
+    switch (props.separator) {
+      case "solid":
+        return "border-solid";
+      case "dotted":
+        return "border-dotted";
+      case "dashed":
+      default:
+        return "border-dashed";
+    }
+  }
+);
+const uploaderClasses = computed(
+  () => [
+    "border-2 transition-all duration-300 flex flex-col items-center justify-center cursor-pointer",
+    roundedClasses.value,
+    separatorClasses.value,
+    props.bordered ? !isHex(props.borderColor) ? `border-${props.borderColor}` : "" : "border-transparent",
+    props.flat ? "shadow-none" : "shadow-md",
+    !isHex(props.bgColor) ? `bg-${props.bgColor}` : "",
+    props.dense ? "p-4" : "p-8",
+    props.disabled ? "opacity-50 pointer-events-none" : "hover:shadow-lg"
+  ]
+);
+const uploaderStyle = computed(
+  () => {
+    const style = {};
+    if (isHex(props.borderColor)) {
+      style.borderColor = props.borderColor;
+    }
+    if (isHex(props.bgColor)) {
+      style.backgroundColor = props.bgColor;
+    }
+    return style;
+  }
+);
+const triggerFileInput = () => {
+  fileInput.value?.click();
+};
+const createFileObject = (file) => ({
+  file,
+  name: file.name,
+  size: file.size,
+  type: file.type
+});
+const handleFiles = (event) => {
+  const selectedFiles = "dataTransfer" in event && event.dataTransfer ? Array.from(
+    event.dataTransfer.files
+  ) : Array.from(
+    event.target.files || []
+  );
+  const validFiles = selectedFiles.filter((file) => {
+    const fileSizeInKb = file.size / 1024;
+    if (fileSizeInKb > props.fileSizeLimitKb) {
+      errorMessage.value = `File "${file.name}" exceeds ${props.fileSizeLimitKb} KB`;
+      return false;
+    }
+    return true;
+  });
+  const mapped = validFiles.map(
+    createFileObject
+  );
+  files.value = props.multiple ? [
+    ...files.value,
+    ...mapped
+  ] : mapped;
+  if (mapped.length > 0) {
+    errorMessage.value = "";
+  }
+};
+const removeFile = (index) => {
+  files.value = files.value.filter(
+    (_, i) => i !== index
+  );
+};
+</script>
+
+<template>
+  <div class="max-w-lg mx-auto">
+    <!-- Header -->
+    <div class="mb-6 text-center">
+      <h2 class="text-2xl font-bold text-gray-800 dark:text-white">
+        {{ header }}
+      </h2>
+
+      <p class="text-sm text-gray-500">
+        {{ subHeader }}
+      </p>
+    </div>
+
+    <!-- Hidden Input -->
+    <input ref="fileInput" type="file" class="hidden" :accept="fileType" :multiple="multiple" @change="handleFiles">
+
+    <!-- Dropzone -->
+    <div :class="uploaderClasses" :style="uploaderStyle" @click="triggerFileInput" @dragover.prevent @drop.prevent="
+  handleFiles($event)
+">
+      <slot name="content">
+        <p class="text-gray-600 mb-4">
+          {{
+            multiple ? "Drag & drop files here" : "Drag & drop file here"
+          }}
+        </p>
+
+        <button type="button" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+          {{
+            multiple ? "Browse Files" : "Browse File"
+          }}
+        </button>
+      </slot>
+    </div>
+
+    <!-- Uploaded Files -->
+    <div v-if="files.length" class="mt-6">
+      <h3 class="text-lg font-semibold mb-4">
+        Uploaded Files
+      </h3>
+
+      <ul class="space-y-2">
+        <li v-for="(file, index) in files" :key="index"
+          class="flex items-center justify-between p-4 rounded-lg border border-gray-200 bg-gray-50">
+          <div class="flex items-center gap-3">
+            <span class="material-icons text-blue-500">
+              description
+            </span>
+
+            <span>
+              {{ file.name }}
+            </span>
+          </div>
+
+          <button type="button" class="text-red-500 hover:text-red-700" @click.stop="
+  removeFile(index)
+">
+            <span class="material-icons">
+              {{
+                fileRemoverIcon
+              }}
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Error -->
+    <div v-if="errorMessage" class="mt-4 text-sm text-red-500">
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.material-icons{font-size:20px}
+</style>

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

@@ -0,0 +1,58 @@
+interface UploadedFile {
+    file: File;
+    name: string;
+    size: number;
+    type: string;
+}
+type Separator = 'solid' | 'dashed' | 'dotted';
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type __VLS_Props = {
+    modelValue?: UploadedFile[];
+    header?: string;
+    subHeader?: string;
+    fileType?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    bordered?: boolean;
+    flat?: boolean;
+    rounded?: Rounded;
+    borderColor?: string;
+    bgColor?: string;
+    separator?: Separator;
+    dense?: boolean;
+    fileRemoverIcon?: string;
+    fileSizeLimitKb?: number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: UploadedFile[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: UploadedFile[]) => any) | undefined;
+}>, {
+    modelValue: UploadedFile[];
+    disabled: boolean;
+    dense: boolean;
+    header: string;
+    rounded: Rounded;
+    borderColor: string;
+    separator: Separator;
+    flat: boolean;
+    bordered: boolean;
+    subHeader: string;
+    fileType: string;
+    multiple: boolean;
+    bgColor: string;
+    fileRemoverIcon: string;
+    fileSizeLimitKb: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,41 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    library: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    library: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    color: string;
+    size: string;
+    library: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Icon.vue

@@ -0,0 +1,66 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+});
+import { computed } from "vue";
+const props = defineProps({
+  name: { type: String, required: true },
+  library: {
+    type: String,
+    default: "material"
+  },
+  color: {
+    type: String,
+    default: ""
+  },
+  size: {
+    type: String,
+    default: "md"
+  }
+});
+const isHex = (val) => val.startsWith("#");
+const sizeMap = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-xl",
+  xl: "text-3xl"
+};
+const iconStyle = computed(() => {
+  const style = {};
+  if (isHex(props.color)) {
+    style.color = props.color;
+  }
+  return style;
+});
+const iconClass = computed(() => {
+  const classes = [
+    sizeMap[props.size]
+  ];
+  if (!isHex(props.color) && props.color) {
+    classes.push(`text-${props.color}`);
+  }
+  switch (props.library) {
+    case "material":
+      classes.push("material-icons");
+      break;
+    case "material-symbols":
+      classes.push("material-symbols-outlined");
+      break;
+    case "fontawesome":
+      classes.push(props.name);
+      break;
+  }
+  return classes;
+});
+</script>
+
+<template>
+  <i
+    :class="iconClass"
+    :style="iconStyle"
+    v-bind="$attrs"
+  >
+    {{ library.includes("material") ? name : "" }}
+  </i>
+</template>

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

@@ -0,0 +1,41 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    library: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    library: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    color: string;
+    size: string;
+    library: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Image.d.vue.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/Image.vue

@@ -0,0 +1,61 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+});
+import { computed, ref } from "vue";
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, default: "" },
+  placeholder: {
+    type: String,
+    default: "/images/placeholder.png"
+  },
+  width: { type: String, default: "100%" },
+  height: { type: String, default: "auto" },
+  fit: {
+    type: String,
+    default: "cover"
+  },
+  borderColor: {
+    type: String,
+    default: ""
+  },
+  borderType: {
+    type: String,
+    default: "none"
+  }
+});
+const imageSrc = ref(props.src);
+const isHex = (val) => val.startsWith("#");
+const imageStyle = computed(() => {
+  const style = {
+    width: props.width,
+    height: props.height,
+    objectFit: props.fit
+  };
+  if (isHex(props.borderColor)) {
+    style.borderColor = props.borderColor;
+  }
+  return style;
+});
+const imageClass = computed(() => [
+  props.borderType !== "none" ? "border" : "",
+  props.borderType === "dashed" ? "border-dashed" : "",
+  props.borderType === "dotted" ? "border-dotted" : "",
+  !isHex(props.borderColor) ? `border-${props.borderColor}` : ""
+]);
+function onError() {
+  imageSrc.value = props.placeholder;
+}
+</script>
+
+<template>
+  <img
+    :src="imageSrc"
+    :alt="alt"
+    :class="imageClass"
+    :style="imageStyle"
+    @error="onError"
+    v-bind="$attrs"
+  >
+</template>

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,66 @@
+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;
+    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;
+    color: string;
+    rounded: string;
+    size: string;
+    required: boolean;
+    flat: boolean;
+    placeholder: string;
+    readonly: boolean;
+    hint: string;
+    case: "upper" | "lower" | "capitalize" | "normal" | null;
+    outlined: boolean;
+    borderless: boolean;
+    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;