windly-ui 1.0.2 → 1.0.4

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

@@ -0,0 +1,30 @@
+type DrawerDirection = 'left' | 'right';
+interface Props {
+    isOpen: boolean;
+    direction?: DrawerDirection;
+    background?: string;
+    width?: string;
+    padding?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    width: string;
+    background: string;
+    direction: DrawerDirection;
+    padding: string;
+}, {}, {}, {}, 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/Drawer.vue

@@ -0,0 +1,43 @@
+<script setup>
+defineOptions({
+  name: "UIDrawer"
+});
+defineProps({
+  isOpen: { type: Boolean, required: true },
+  direction: { type: String, required: false, default: "right" },
+  background: { type: String, required: false, default: "bg-white dark:bg-gray-900" },
+  width: { type: String, required: false, default: "w-80" },
+  padding: { type: String, required: false, default: "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/dist/runtime/components/Drawer.vue.d.ts

@@ -0,0 +1,30 @@
+type DrawerDirection = 'left' | 'right';
+interface Props {
+    isOpen: boolean;
+    direction?: DrawerDirection;
+    background?: string;
+    width?: string;
+    padding?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    width: string;
+    background: string;
+    direction: DrawerDirection;
+    padding: string;
+}, {}, {}, {}, 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/Dropdown.d.vue.ts

@@ -0,0 +1,34 @@
+type DropdownAlign = 'left' | 'right';
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type __VLS_Props = {
+    align?: DropdownAlign;
+    width?: string;
+    menuBgClass?: string;
+    rounded?: Rounded;
+    bordered?: boolean;
+    borderColor?: string;
+    flat?: boolean;
+};
+declare var __VLS_1: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_1) => any;
+} & {
+    menu?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    rounded: Rounded;
+    borderColor: string;
+    align: DropdownAlign;
+    flat: boolean;
+    bordered: boolean;
+    width: string;
+    menuBgClass: string;
+}, {}, {}, {}, 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/Dropdown.vue

@@ -0,0 +1,127 @@
+<script setup>
+defineOptions({
+  name: "UIDropdown"
+});
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref
+} from "vue";
+const props = defineProps({
+  align: { type: String, required: false, default: "left" },
+  width: { type: String, required: false, default: "w-48" },
+  menuBgClass: { type: String, required: false, default: "bg-white dark:bg-gray-800" },
+  rounded: { type: String, required: false, default: "xl" },
+  bordered: { type: Boolean, required: false, default: false },
+  borderColor: { type: String, required: false, default: "gray-200" },
+  flat: { type: Boolean, required: false, default: false }
+});
+const isOpen = ref(false);
+const dropdownRef = ref(null);
+const isHex = (val) => {
+  return val.startsWith("#") || val.startsWith("rgb") || val.startsWith("hsl");
+};
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+};
+const close = () => {
+  isOpen.value = false;
+};
+const handleClickOutside = (event) => {
+  const target = event.target;
+  if (dropdownRef.value && !dropdownRef.value.contains(
+    target
+  )) {
+    close();
+  }
+};
+onMounted(() => {
+  document.addEventListener(
+    "click",
+    handleClickOutside
+  );
+});
+onBeforeUnmount(() => {
+  document.removeEventListener(
+    "click",
+    handleClickOutside
+  );
+});
+const roundedClass = computed(
+  () => {
+    const map = {
+      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 = {};
+    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 .2s ease}.fade-slide-enter-from{opacity:0;transform:translateY(-8px)}.fade-slide-enter-to,.fade-slide-leave-from{opacity:1;transform:translateY(0)}.fade-slide-leave-to{opacity:0;transform:translateY(-8px)}
+</style>

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

@@ -0,0 +1,34 @@
+type DropdownAlign = 'left' | 'right';
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type __VLS_Props = {
+    align?: DropdownAlign;
+    width?: string;
+    menuBgClass?: string;
+    rounded?: Rounded;
+    bordered?: boolean;
+    borderColor?: string;
+    flat?: boolean;
+};
+declare var __VLS_1: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_1) => any;
+} & {
+    menu?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    rounded: Rounded;
+    borderColor: string;
+    align: DropdownAlign;
+    flat: boolean;
+    bordered: boolean;
+    width: string;
+    menuBgClass: string;
+}, {}, {}, {}, 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/FileUploader.d.vue.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;
+    };
+};