windly-ui 1.0.1 → 1.0.3

package/ui-library/components/Drawer.vue

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'UIDrawer',
-})
-
-type DrawerDirection = 'left' | 'right'
-
-interface Props {
-  isOpen: boolean
-  direction?: DrawerDirection
-  background?: string
-  width?: string
-  padding?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  direction: 'right',
-  background: 'bg-white dark:bg-gray-900',
-  width: 'w-80',
-  padding: 'p-6',
-})
-
-const emit = defineEmits<{
-  close: []
-}>()
-</script>
-
-<template>
-  <div
-    class="fixed inset-0 z-40 bg-black/40 transition-opacity duration-300"
-    :class="[
-      isOpen
-        ? 'opacity-100 visible'
-        : 'opacity-0 invisible',
-    ]"
-    @click="emit('close')"
-  />
-
-  <div
-    class="fixed top-0 bottom-0 z-50 shadow-2xl transition-transform duration-500 ease-in-out"
-    :class="[
-      width,
-      padding,
-      background,
-      direction === 'left'
-        ? 'left-0'
-        : 'right-0',
-
-      direction === 'left'
-        ? isOpen
-          ? 'translate-x-0'
-          : '-translate-x-full'
-        : isOpen
-          ? 'translate-x-0'
-          : 'translate-x-full',
-    ]"
-  >
-    <button
-      class="absolute top-4 right-4 text-xl font-bold"
-      @click="emit('close')"
-    >
-      ✕
-    </button>
-
-    <slot />
-  </div>
-</template>

package/ui-library/components/Dropdown.vue

@@ -1,248 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'UIDropdown',
-})
-
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-} from 'vue'
-
-type DropdownAlign =
-  | 'left'
-  | 'right'
-
-type Rounded =
-  | 'none'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | 'full'
-
-const props = withDefaults(
-  defineProps<{
-    align?: DropdownAlign
-
-    width?: string
-
-    menuBgClass?: string
-
-    rounded?: Rounded
-
-    bordered?: boolean
-
-    borderColor?: string
-
-    flat?: boolean
-  }>(),
-  {
-    align: 'left',
-
-    width: 'w-48',
-
-    menuBgClass:
-      'bg-white dark:bg-gray-800',
-
-    rounded: 'xl',
-
-    bordered: false,
-
-    borderColor: 'gray-200',
-
-    flat: false,
-  },
-)
-
-const isOpen = ref(false)
-
-const dropdownRef =
-  ref<HTMLElement | null>(null)
-
-const isHex = (
-  val: string,
-): boolean => {
-  return (
-    val.startsWith('#') ||
-    val.startsWith('rgb') ||
-    val.startsWith('hsl')
-  )
-}
-
-const toggle = (): void => {
-  isOpen.value = !isOpen.value
-}
-
-const close = (): void => {
-  isOpen.value = false
-}
-
-const handleClickOutside = (
-  event: MouseEvent,
-): void => {
-  const target =
-    event.target as Node
-
-  if (
-    dropdownRef.value &&
-    !dropdownRef.value.contains(
-      target,
-    )
-  ) {
-    close()
-  }
-}
-
-onMounted(() => {
-  document.addEventListener(
-    'click',
-    handleClickOutside,
-  )
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener(
-    'click',
-    handleClickOutside,
-  )
-})
-
-const roundedClass = computed(
-  () => {
-    const map: Record<
-      Rounded,
-      string
-    > = {
-      none: 'rounded-none',
-
-      sm: 'rounded-sm',
-
-      md: 'rounded-md',
-
-      lg: 'rounded-lg',
-
-      xl: 'rounded-xl',
-
-      full: 'rounded-full',
-    }
-
-    return map[props.rounded]
-  },
-)
-
-const dropdownClasses =
-  computed(() => [
-    'absolute mt-2 z-50 transition-all overflow-hidden',
-
-    props.align === 'right'
-      ? 'right-0'
-      : 'left-0',
-
-    props.width,
-
-    roundedClass.value,
-
-    props.bordered &&
-    !isHex(props.borderColor)
-      ? `border border-${props.borderColor}`
-      : '',
-
-    props.flat
-      ? 'shadow-none'
-      : 'shadow-lg',
-  ])
-
-const dropdownStyle = computed(
-  () => {
-    const style: Record<
-      string,
-      string
-    > = {}
-
-    if (
-      props.bordered &&
-      isHex(props.borderColor)
-    ) {
-      style.border =
-        `1px solid ${props.borderColor}`
-    }
-
-    return style
-  },
-)
-
-const menuClasses = computed(
-  () => [
-    'p-2',
-
-    roundedClass.value,
-
-    props.menuBgClass,
-  ],
-)
-</script>
-
-<template>
-  <div
-    ref="dropdownRef"
-    class="relative inline-block"
-  >
-    <!-- Trigger -->
-    <div @click="toggle">
-      <slot name="trigger" />
-    </div>
-
-    <!-- Dropdown -->
-    <transition
-      name="fade-slide"
-    >
-      <div
-        v-if="isOpen"
-        :class="
-          dropdownClasses
-        "
-        :style="
-          dropdownStyle
-        "
-      >
-        <div
-          :class="
-            menuClasses
-          "
-        >
-          <slot name="menu" />
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped>
-.fade-slide-enter-active,
-.fade-slide-leave-active {
-  transition:
-    all 200ms ease;
-}
-
-.fade-slide-enter-from {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-
-.fade-slide-enter-to {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.fade-slide-leave-from {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-</style>

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>