windly-ui 1.0.0

package/ui-library/components/Dialog.vue

@@ -0,0 +1,187 @@
+<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

@@ -0,0 +1,78 @@
+<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

@@ -0,0 +1,67 @@
+<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

@@ -0,0 +1,248 @@
+<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>