windly-ui 1.0.1 → 1.0.2

package/ui-library/components/Dialog.vue

@@ -1,187 +0,0 @@
-<template>
-  <transition name="fade">
-    <div
-      v-if="isOpen"
-      class="fixed inset-0 z-50 flex bg-black bg-opacity-60"
-      role="dialog"
-      aria-modal="true"
-      @click.self="handleOutsideClick"
-      :class="positionClasses"
-    >
-      <div class="bg-white rounded-lg shadow-lg w-96 p-6">
-        <!-- Header -->
-        <div class="flex justify-between items-center mb-4">
-          <slot name="title">
-            <h3 class="text-lg font-semibold">
-              {{ title }}
-            </h3>
-          </slot>
-
-          <button
-            v-if="showCloseIcon"
-            @click="close"
-            class="text-gray-500 hover:text-gray-700"
-            aria-label="Close modal"
-          >
-            <span class="material-icons">close</span>
-          </button>
-        </div>
-
-        <!-- Message -->
-        <slot name="message">
-          <p class="text-gray-600 mb-6">
-            {{ message }}
-          </p>
-        </slot>
-
-        <!-- Actions -->
-        <div class="flex justify-end">
-          <button
-            @click="close"
-            class="mr-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg transition hover:bg-gray-300"
-          >
-            {{ cancelBtnText }}
-          </button>
-
-          <button
-            v-if="showConfirmBtn"
-            @click="handleConfirm"
-            class="px-4 py-2 bg-blue-500 text-white rounded-lg transition hover:bg-blue-600"
-          >
-            {{ confirmBtnText }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script setup>
-import { computed, watch, onBeforeUnmount } from 'vue';
-import { useRouter } from 'vue-router';
-
-const props = defineProps({
-  isOpen: {
-    type: Boolean,
-    required: true,
-  },
-  title: {
-    type: String,
-    default: 'Modal Title',
-  },
-  message: {
-    type: String,
-    default: '',
-  },
-  confirmBtnText: {
-    type: String,
-    default: 'Confirm',
-  },
-  cancelBtnText: {
-    type: String,
-    default: 'Cancel',
-  },
-  showConfirmBtn: {
-    type: Boolean,
-    default: false,
-  },
-  showCloseIcon: {
-    type: Boolean,
-    default: false,
-  },
-  persistent: {
-    type: Boolean,
-    default: false,
-  },
-  position: {
-    type: String,
-    default: 'center',
-    validator: (val) =>
-      ['center', 'top', 'bottom', 'left', 'right'].includes(val),
-  },
-});
-
-const emit = defineEmits(['update:isOpen', 'confirm']);
-const router = useRouter();
-
-const close = () => emit('update:isOpen', false);
-
-const handleConfirm = () => {
-  emit('confirm');
-  close();
-};
-
-const handleOutsideClick = () => {
-  if (!props.persistent) close();
-};
-
-const handleEscKey = (event) => {
-  if (event.key === 'Escape' && !props.persistent) {
-    close();
-  }
-};
-
-const positionClasses = computed(() => {
-  switch (props.position) {
-    case 'top':
-      return 'items-start justify-center p-6';
-    case 'bottom':
-      return 'items-end justify-center p-6';
-    case 'left':
-      return 'items-center justify-start p-6';
-    case 'right':
-      return 'items-center justify-end p-6';
-    default:
-      return 'items-center justify-center p-6';
-  }
-});
-
-/* Handle ESC key */
-watch(
-  () => props.isOpen,
-  (open) => {
-    if (open) {
-      document.addEventListener('keydown', handleEscKey);
-    } else {
-      document.removeEventListener('keydown', handleEscKey);
-    }
-  }
-);
-
-/* Close modal on route change */
-const removeGuard = router.beforeEach((to, from, next) => {
-  if (props.isOpen && !props.persistent) close();
-  next();
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keydown', handleEscKey);
-  removeGuard?.();
-});
-</script>
-
-<style scoped>
-.fade-enter-active {
-  animation: fadeInScale 0.3s ease forwards;
-}
-
-.fade-leave-active {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-@keyframes fadeInScale {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.fade-leave-to {
-  opacity: 0;
-  transform: scale(0.9);
-}
-</style>

package/ui-library/components/Divider.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-})
-
-import { computed } from 'vue'
-
-const props = defineProps({
-  color: {
-    type: String,
-    default: 'gray-300',
-  },
-
-  type: {
-    type: String,
-    default: 'solid',
-  },
-
-  vertical: {
-    type: Boolean,
-    default: false,
-  },
-
-  inset: {
-    type: Boolean,
-    default: false,
-  },
-
-  thickness: {
-    type: String,
-    default: '1px',
-  },
-})
-
-const isHex = (val: string) => val.startsWith('#')
-
-const dividerStyle = computed(() => {
-  const style: Record<string, string> = {}
-
-  if (isHex(props.color)) {
-    style.borderColor = props.color
-  }
-
-  style.borderWidth = props.thickness
-
-  return style
-})
-
-const dividerClass = computed(() => [
-  props.vertical
-    ? 'h-full border-l'
-    : 'w-full border-t',
-
-  props.type === 'dashed'
-    ? 'border-dashed'
-    : '',
-
-  props.type === 'dotted'
-    ? 'border-dotted'
-    : '',
-
-  props.inset
-    ? 'mx-4'
-    : '',
-
-  !isHex(props.color)
-    ? `border-${props.color}`
-    : '',
-])
-</script>
-
-<template>
-  <div
-    :class="dividerClass"
-    :style="dividerStyle"
-    v-bind="$attrs"
-  />
-</template>

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>