windly-ui 1.0.2 → 1.0.4

package/dist/runtime/components/FileUploader.vue

@@ -0,0 +1,358 @@
+<script setup>
+defineOptions({
+  name: "UIFileUploader"
+});
+import { computed, ref } from "vue";
+const props = defineProps({
+  modelValue: { type: Array, required: false, default: () => [] },
+  label: { type: String, required: false, default: "" },
+  hint: { type: String, required: false, default: "" },
+  fileType: { type: String, required: false, default: "*" },
+  multiple: { type: Boolean, required: false, default: true },
+  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: true },
+  borderless: { type: Boolean, required: false, default: false },
+  flat: { type: Boolean, required: false, default: false },
+  separator: { type: String, required: false, default: "dashed" },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  fileRemoverIcon: { type: String, required: false, default: "close" },
+  fileSizeLimitKb: { type: Number, required: false, default: 2048 }
+});
+const emit = defineEmits(["update:modelValue"]);
+const fileInput = ref(null);
+const errorMessage = ref("");
+const isDragging = ref(false);
+const files = computed({
+  get: () => props.modelValue,
+  set: (value) => emit(
+    "update:modelValue",
+    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 separatorClass = computed(() => {
+  switch (props.separator) {
+    case "solid":
+      return "border-solid";
+    case "dotted":
+      return "border-dotted";
+    default:
+      return "border-dashed";
+  }
+});
+const computedClass = computed(() => {
+  let classes = "input block transition-all duration-300 border ";
+  if (props.borderless) {
+    classes += " border-none bg-transparent";
+  } else if (props.outlined) {
+    classes += " border";
+  } else {
+    classes += " border-0 border-b";
+  }
+  if (!props.borderless) {
+    classes += ` ${separatorClass.value}`;
+  }
+  classes += ` ${roundedMap[props.rounded] ?? roundedMap.md}`;
+  if (!props.flat) {
+    classes += " shadow-sm";
+  }
+  if (props.disabled) {
+    classes += " opacity-50 cursor-not-allowed";
+  } else {
+    classes += " cursor-pointer";
+  }
+  if (props.readonly) {
+    classes += " pointer-events-none";
+  }
+  switch (props.size) {
+    case "sm":
+      classes += " text-sm";
+      break;
+    case "lg":
+      classes += " text-lg";
+      break;
+    default:
+      classes += " text-base";
+  }
+  if (props.color && !isHex(props.color)) {
+    classes += ` 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 (isDragging.value) {
+    classes += " scale-[1.01]";
+  }
+  return classes;
+});
+const computedStyle = computed(() => {
+  const styles = {};
+  if (props.width && CSS.supports(
+    "width",
+    props.width
+  )) {
+    styles.width = props.width;
+  }
+  if (props.color && isHex(props.color)) {
+    styles.borderColor = props.color;
+    styles["--tw-ring-color"] = props.color;
+  }
+  return styles;
+});
+const triggerFileInput = () => {
+  if (props.disabled || props.readonly) {
+    return;
+  }
+  fileInput.value?.click();
+};
+const createFileObject = (file) => ({
+  file,
+  name: file.name,
+  size: file.size,
+  type: file.type
+});
+const validateFile = (file) => {
+  errorMessage.value = "";
+  const sizeKb = file.size / 1024;
+  if (sizeKb > props.fileSizeLimitKb) {
+    errorMessage.value = `"${file.name}" exceeds ${props.fileSizeLimitKb} KB.`;
+    return false;
+  }
+  if (props.fileType && props.fileType !== "*") {
+    const accepted = props.fileType.split(",").map((t) => t.trim());
+    const valid = accepted.some(
+      (type) => {
+        if (type.endsWith("/*")) {
+          return file.type.startsWith(
+            type.replace(
+              "/*",
+              "/"
+            )
+          );
+        }
+        if (type.startsWith(".")) {
+          return file.name.toLowerCase().endsWith(
+            type.toLowerCase()
+          );
+        }
+        return file.type === type;
+      }
+    );
+    if (!valid) {
+      errorMessage.value = `"${file.name}" is not a supported file type.`;
+      return false;
+    }
+  }
+  return true;
+};
+const addFiles = (selectedFiles) => {
+  const validFiles = selectedFiles.filter(validateFile).map(createFileObject);
+  if (!validFiles.length)
+    return;
+  files.value = props.multiple ? [
+    ...files.value,
+    ...validFiles
+  ] : validFiles;
+  errorMessage.value = "";
+};
+const handleFiles = (event) => {
+  const target = event.target;
+  if (!target.files)
+    return;
+  addFiles(
+    Array.from(target.files)
+  );
+  target.value = "";
+};
+const handleDrop = (event) => {
+  isDragging.value = false;
+  if (props.disabled || props.readonly) {
+    return;
+  }
+  if (!event.dataTransfer) {
+    return;
+  }
+  addFiles(
+    Array.from(
+      event.dataTransfer.files
+    )
+  );
+};
+const handleDragOver = (event) => {
+  event.preventDefault();
+  if (props.disabled || props.readonly) {
+    return;
+  }
+  isDragging.value = true;
+};
+const handleDragLeave = () => {
+  isDragging.value = false;
+};
+const removeFile = (index) => {
+  files.value = files.value.filter(
+    (_, i) => i !== index
+  );
+};
+const formattedFiles = computed(
+  () => files.value.map(
+    (file) => ({
+      ...file,
+      formattedSize: file.size >= 1024 * 1024 ? `${(file.size / 1024 / 1024).toFixed(
+        2
+      )} MB` : `${(file.size / 1024).toFixed(
+        1
+      )} KB`
+    })
+  )
+);
+</script>
+
+<template>
+  <div
+    :class="[
+  'relative',
+  dense ? 'my-2.5' : 'mt-5 mb-2.5',
+  size && `input-${size}`
+]"
+  >
+    <!-- Hidden Input -->
+    <input
+      ref="fileInput"
+      type="file"
+      class="hidden"
+      :accept="fileType"
+      :multiple="multiple"
+      @change="handleFiles"
+    />
+
+    <!-- Floating Label -->
+    <label
+      class="absolute -top-6 px-1 pointer-events-none transition-all duration-200
+             dark:text-gray-300"
+      :class="color && !isHex(color) ? `text-${color}` : 'text-gray-400 input-' + size"
+      :style="
+  color && isHex(color) ? { color } : void 0
+"
+    >
+      {{ label }}
+    </label>
+
+    <!-- Hint -->
+    <p
+      v-if="hint"
+      class="ml-1 text-[10px] text-gray-500 dark:text-gray-400"
+    >
+      {{ hint }}
+    </p>
+
+    <!-- Dropzone -->
+    <div
+      :class="computedClass"
+      :style="computedStyle"
+      class="mt-1 p-1 flex flex-col items-center justify-center
+             select-none text-center text-xs
+             transition-all duration-200
+             hover:bg-black/5
+             dark:hover:bg-white/5"
+      @click="triggerFileInput"
+      @dragover.prevent="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop.prevent="handleDrop"
+    >
+      <slot name="content">
+        <p class="text-xs text-gray-500">
+          {{
+            multiple ? "Drop files here or click to browse" : "Drop file here or click to browse"
+          }}
+        </p>
+        <p
+          v-if="fileType && fileType !== '*'"
+          class="text-[10px] text-gray-500"
+        >
+          Accepted: {{ fileType }}
+        </p>
+        <p class="text-[10px] text-gray-500">
+          Maximum size: {{ fileSizeLimitKb }} KB
+        </p>
+      </slot>
+    </div>
+    <!-- Uploaded Files -->
+    <div
+      v-if="formattedFiles.length"
+      class="mt-3 overflow-hidden rounded-lg border border-gray-200
+             dark:border-gray-700"
+    >
+      <div
+        v-for="(file, index) in formattedFiles"
+        :key="file.name"
+        class="flex items-start justify-between
+               border-b border-gray-100 p-1
+               last:border-b-0
+               dark:border-gray-700"
+      >
+        <div class="flex min-w-0 items-start gap-3">
+          <span class="material-icons text-base text-gray-500">
+            insert_drive_file
+          </span>
+
+          <div class="min-w-0">
+            <div
+              class="truncate text-xs font-medium dark:text-gray-50"
+            >
+              {{ file.name }}
+            </div>
+
+            <div class="text-[10px] text-gray-400">
+              {{ file.formattedSize }}
+            </div>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="flex h-5 w-5 items-center justify-center rounded-full
+                 text-gray-400 transition-colors
+                 hover:bg-red-500/10
+                 hover:text-red-500
+                 dark:hover:bg-red-500/20"
+          @click.stop="removeFile(index)"
+        >
+          <span class="material-icons text-xs">
+            {{ fileRemoverIcon }}
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Error -->
+    <p
+      v-if="errorMessage"
+      class="ml-1 mt-1 text-xs text-red-500"
+    >
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.input-sm label{font-size:12px}.input-md label{font-size:14px}.input-lg label{font-size:16px}
+</style>

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

@@ -0,0 +1,65 @@
+interface UploadedFile {
+    file: File;
+    name: string;
+    size: number;
+    type: string;
+}
+type Rounded = "none" | "sm" | "md" | "lg" | "xl" | "full";
+type Separator = "solid" | "dashed" | "dotted";
+type Size = "sm" | "md" | "lg";
+type __VLS_Props = {
+    modelValue?: UploadedFile[];
+    label?: string;
+    hint?: string;
+    fileType?: string;
+    multiple?: boolean;
+    size?: Size;
+    color?: string;
+    rounded?: Rounded;
+    dense?: boolean;
+    width?: string;
+    outlined?: boolean;
+    borderless?: boolean;
+    flat?: boolean;
+    separator?: Separator;
+    disabled?: boolean;
+    readonly?: 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;
+    label: string;
+    color: string;
+    rounded: Rounded;
+    size: Size;
+    separator: Separator;
+    flat: boolean;
+    width: string;
+    readonly: boolean;
+    hint: string;
+    fileType: string;
+    multiple: boolean;
+    outlined: boolean;
+    borderless: boolean;
+    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>