windly-ui 1.0.1 → 1.0.2

package/ui-library/components/FileUploader.vue

@@ -1,330 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-defineOptions({
-  name: 'UIFileUploader',
-})
-
-interface UploadedFile {
-  file: File
-  name: string
-  size: number
-  type: string
-}
-
-type Separator =
-  | 'solid'
-  | 'dashed'
-  | 'dotted'
-
-type Rounded =
-  | 'none'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-
-const props = withDefaults(
-  defineProps<{
-    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
-  }>(),
-  {
-    modelValue: () => [],
-    header: 'Upload Files',
-    subHeader:
-      'Supports document uploads',
-    fileType: '*',
-    multiple: true,
-    disabled: false,
-    bordered: true,
-    flat: false,
-    rounded: 'xl',
-    borderColor: 'gray-300',
-    bgColor: 'white',
-    separator: 'dashed',
-    dense: false,
-    fileRemoverIcon: 'delete',
-    fileSizeLimitKb: 2048,
-  },
-)
-
-const emit = defineEmits<{
-  (
-    e: 'update:modelValue',
-    value: UploadedFile[],
-  ): void
-}>()
-
-const fileInput =
-  ref<HTMLInputElement | null>(
-    null,
-  )
-
-const errorMessage = ref('')
-
-const files = computed({
-  get: () => props.modelValue,
-
-  set: (
-    value: UploadedFile[],
-  ) =>
-    emit(
-      'update:modelValue',
-      value,
-    ),
-})
-
-const isHex = (val: string) =>
-  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: Record<
-      string,
-      string
-    > = {}
-
-    if (isHex(props.borderColor)) {
-      style.borderColor =
-        props.borderColor
-    }
-
-    if (isHex(props.bgColor)) {
-      style.backgroundColor =
-        props.bgColor
-    }
-
-    return style
-  },
-)
-
-const triggerFileInput =
-  (): void => {
-    fileInput.value?.click()
-  }
-
-const createFileObject = (
-  file: File,
-): UploadedFile => ({
-  file,
-  name: file.name,
-  size: file.size,
-  type: file.type,
-})
-
-const handleFiles = (
-  event: Event | DragEvent,
-): void => {
-  const selectedFiles =
-    'dataTransfer' in event &&
-      event.dataTransfer
-      ? Array.from(
-        event.dataTransfer.files,
-      )
-      : Array.from(
-        (
-          event.target as HTMLInputElement
-        ).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: number,
-): void => {
-  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/ui-library/components/Icon.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-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: string) => val.startsWith('#')
-
-const sizeMap = {
-  xs: 'text-xs',
-  sm: 'text-sm',
-  md: 'text-base',
-  lg: 'text-xl',
-  xl: 'text-3xl',
-}
-
-const iconStyle = computed(() => {
-  const style: Record<string, string> = {}
-
-  if (isHex(props.color)) {
-    style.color = props.color
-  }
-
-  return style
-})
-
-const iconClass = computed(() => {
-  const classes = [
-    sizeMap[props.size as keyof typeof sizeMap],
-  ]
-
-  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/ui-library/components/Image.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-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: string) => val.startsWith('#')
-
-const imageStyle = computed(() => {
-  const style: Record<string, string> = {
-    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>