@smurfox/proxy-ui 0.1.35 → 0.2.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "proxy-ui",
   "configKey": "proxyUI",
-  "version": "0.1.35",
+  "version": "0.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -11,8 +11,9 @@ const module$1 = defineNuxtModule({
     const resolver = createResolver(import.meta.url);
     if (nuxt.options.fonts !== false) {
       nuxt.options.fonts = nuxt.options.fonts ?? {};
-      nuxt.options.fonts.families = [
-        ...nuxt.options.fonts.families ?? [],
+      const fonts = nuxt.options.fonts;
+      fonts.families = [
+        ...fonts.families ?? [],
         {
           name: "Inter",
           provider: "google",

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

@@ -1,4 +1,4 @@
-import type { AvatarSize, AvatarRounded } from "../types/index.js";
+import type { AvatarSize, AvatarRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     icon?: string;

package/dist/runtime/components/Avatar.vue

@@ -4,18 +4,23 @@
     :class="[
   !hasText ? 'text-black dark:text-white' : '',
   sizes[props.size],
-  rounded[props.rounded]
+  roundedClasses[props.rounded]
 ]"
   >
-    <h1 v-if="props.label">{{ props.label }}</h1>
-    <Icon v-else-if="props.icon" :name="props.icon" />
+    <h1 v-if="props.label">
+      {{ props.label }}
+    </h1>
+    <Icon
+      v-else-if="props.icon"
+      :name="props.icon"
+    />
     <img
       v-else-if="props.image"
       :src="props.image"
       alt="Avatar"
       class="object-cover w-full h-full"
-      :class="rounded[props.rounded]"
-    />
+      :class="roundedClasses[props.rounded]"
+    >
   </div>
 </template>
 
@@ -28,14 +33,14 @@ const sizes = {
   lg: "w-15 h-15",
   full: "w-full h-full"
 };
-const rounded = {
-  none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
+const roundedClasses = {
+  "none": "rounded-none",
+  "sm": "rounded-sm",
+  "md": "rounded-md",
+  "lg": "rounded-lg",
+  "xl": "rounded-xl",
   "2xl": "rounded-2xl",
-  full: "rounded-full"
+  "full": "rounded-full"
 };
 const props = defineProps({
   label: { type: String, required: false },
@@ -44,7 +49,7 @@ const props = defineProps({
   size: { type: String, required: false, default: "md" },
   rounded: { type: String, required: false, default: "full" }
 });
-const textSizes = /(?:^|:)text-(xs|sm|base|lg|xl|\d*xl|wrap|nowrap|pretty|balance)$/;
+const textSizes = /(?:^|:)text-(?:xs|sm|base|lg|\d*xl|wrap|nowrap|pretty|balance)$/;
 const hasText = computed(() => {
   const cls = typeof attrs.class === "string" ? attrs.class : "";
   return cls.split(" ").some((c) => /(?:^|:)text-/.test(c) && !textSizes.test(c));

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

@@ -1,4 +1,4 @@
-import type { AvatarSize, AvatarRounded } from "../types/index.js";
+import type { AvatarSize, AvatarRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     icon?: string;

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

@@ -1,4 +1,4 @@
-import type { ButtonSize, ButtonVariant, ButtonColor, ButtonRounded } from "../types/index.js";
+import type { ButtonSize, ButtonVariant, ButtonColor, ButtonRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: ButtonSize;

package/dist/runtime/components/Button.vue

@@ -16,7 +16,10 @@
     @click="emit('click', $event)"
   >
     <template v-if="isIconOnly">
-      <Icon v-if="loading" name="svg-spinners:ring-resize" />
+      <Icon
+        v-if="loading"
+        name="svg-spinners:ring-resize"
+      />
       <Icon
         v-else-if="icon"
         :name="icon"
@@ -25,11 +28,26 @@
       />
     </template>
     <template v-else>
-      <Icon v-if="loading" name="svg-spinners:ring-resize" class="mr-2" />
-      <Icon v-if="startIcon" :name="startIcon" class="mr-2" />
+      <Icon
+        v-if="loading"
+        name="svg-spinners:ring-resize"
+        class="mr-2"
+      />
+      <Icon
+        v-if="startIcon"
+        :name="startIcon"
+        class="mr-2"
+      />
       <slot v-if="!label" />
-      <span v-else class="font-medium">{{ label }}</span>
-      <Icon v-if="endIcon" :name="endIcon" class="ml-2" />
+      <span
+        v-else
+        class="font-medium"
+      >{{ label }}</span>
+      <Icon
+        v-if="endIcon"
+        :name="endIcon"
+        class="ml-2"
+      />
     </template>
   </motion.button>
 </template>
@@ -54,14 +72,14 @@ const variantClasses = {
   flat: ""
 };
 const roundedClasses = {
-  none: "rounded-none",
-  xs: "rounded-xs",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
+  "none": "rounded-none",
+  "xs": "rounded-xs",
+  "sm": "rounded-sm",
+  "md": "rounded-md",
+  "lg": "rounded-lg",
+  "xl": "rounded-xl",
   "2xl": "rounded-2xl",
-  full: "rounded-full"
+  "full": "rounded-full"
 };
 const emit = defineEmits(["click"]);
 const props = defineProps({

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

@@ -1,4 +1,4 @@
-import type { ButtonSize, ButtonVariant, ButtonColor, ButtonRounded } from "../types/index.js";
+import type { ButtonSize, ButtonVariant, ButtonColor, ButtonRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: ButtonSize;

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

@@ -1,4 +1,4 @@
-import type { CardVariant } from "../types/index.js";
+import type { CardVariant } from '../types/index.js';
 type __VLS_Props = {
     variant?: CardVariant;
     customClass?: string;

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

@@ -1,4 +1,4 @@
-import type { CardVariant } from "../types/index.js";
+import type { CardVariant } from '../types/index.js';
 type __VLS_Props = {
     variant?: CardVariant;
     customClass?: string;

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

@@ -1,4 +1,4 @@
-import type { ChipSize, ChipVariant, ChipColor, ChipRounded } from "../types/index.js";
+import type { ChipSize, ChipVariant, ChipColor, ChipRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: ChipSize;

package/dist/runtime/components/Chip.vue

@@ -8,15 +8,27 @@
 ]"
     class="flex items-center justify-center"
   >
-    <Icon v-if="startIcon" :name="startIcon" :size="iconSize" class="mr-1" />
+    <Icon
+      v-if="startIcon"
+      :name="startIcon"
+      :size="iconSize"
+      class="mr-1"
+    />
     <slot v-if="!label" />
-    <span v-else class="font-medium">{{ label }}</span>
-    <Icon v-if="endIcon" :name="endIcon" :size="iconSize" class="ml-1" />
+    <span
+      v-else
+      class="font-medium"
+    >{{ label }}</span>
+    <Icon
+      v-if="endIcon"
+      :name="endIcon"
+      :size="iconSize"
+      class="ml-1"
+    />
   </div>
 </template>
 
 <script setup>
-import { motion } from "motion-v";
 const sizes = {
   sm: "text-xs min-w-18 py-1 px-2",
   md: "text-xs min-w-20 py-1.5 px-2",
@@ -30,13 +42,13 @@ const variantClasses = {
   flat: ""
 };
 const roundedClasses = {
-  none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
+  "none": "rounded-none",
+  "sm": "rounded-sm",
+  "md": "rounded-md",
+  "lg": "rounded-lg",
+  "xl": "rounded-xl",
   "2xl": "rounded-2xl",
-  full: "rounded-full"
+  "full": "rounded-full"
 };
 const props = defineProps({
   label: { type: String, required: false },

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

@@ -1,4 +1,4 @@
-import type { ChipSize, ChipVariant, ChipColor, ChipRounded } from "../types/index.js";
+import type { ChipSize, ChipVariant, ChipColor, ChipRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: ChipSize;

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

@@ -0,0 +1,12 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    activator?: ((props: {}) => any) | undefined;
+} & {
+    content?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Dropdown.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    ref="dropdownRef"
+    class="relative inline-block text-left"
+  >
+    <div @click="toggle">
+      <slot name="activator" />
+    </div>
+
+    <AnimatePresence>
+      <motion.div
+        v-if="isOpen"
+        :initial="{ scale: 0.9, opacity: 0, y: -10 }"
+        :exit="{ opacity: 0 }"
+        :animate="{ scale: 1, opacity: 1, y: 0 }"
+        class="absolute right-0 z-50 mt-2 min-w-52 origin-top-right bg-white border border-gray-100 rounded-xl shadow-xl dark:bg-[#18181B] dark:border-black/40"
+        @click="handleContentClick"
+      >
+        <slot name="content" />
+      </motion.div>
+    </AnimatePresence>
+  </div>
+</template>
+
+<script setup>
+import { AnimatePresence, motion } from "motion-v";
+import { ref, onMounted, onUnmounted, provide } from "vue";
+const isOpen = ref(false);
+const dropdownRef = ref(null);
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+};
+const close = () => {
+  isOpen.value = false;
+};
+provide("closeDropdown", close);
+const onClickOutside = (event) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+    setTimeout(() => close(), 10);
+  }
+};
+const handleContentClick = (event) => {
+  event.stopPropagation();
+};
+onMounted(() => {
+  document.addEventListener("click", onClickOutside);
+});
+onUnmounted(() => {
+  document.removeEventListener("click", onClickOutside);
+});
+</script>

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

@@ -0,0 +1,12 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    activator?: ((props: {}) => any) | undefined;
+} & {
+    content?: ((props: {}) => any) | undefined;
+};

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

@@ -1,4 +1,4 @@
-import type { InputVariant, InputRounded } from "../types/index.js";
+import type { InputVariant, InputRounded } from '../types/index.js';
 type __VLS_Props = {
     modelValue?: string | number;
     type?: string;
@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     type: string;
     variant: InputVariant;
     disabled: boolean;
-    labelClass: string;
     required: boolean;
+    labelClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Input.vue

@@ -1,8 +1,17 @@
 <template>
   <div class="flex flex-col gap-1">
-    <div v-if="label" class="flex items-start gap-1">
-      <label class="dark:text-white" :class="[labelClass]">{{ label }} </label>
-      <span v-if="props.required" class="text-danger">*</span>
+    <div
+      v-if="label"
+      class="flex items-start gap-1"
+    >
+      <label
+        class="dark:text-white"
+        :class="[labelClass]"
+      >{{ label }} </label>
+      <span
+        v-if="props.required"
+        class="text-danger"
+      >*</span>
     </div>
     <div class="relative w-full">
       <!-- startContent -->
@@ -20,7 +29,7 @@
         :class="[
   $slots.startContent ? 'pl-9' : '',
   $slots.endContent ? 'pr-9' : '',
-  rounded[props.rounded],
+  roundedClasses[props.rounded],
   props.error ? errorVariants[props.variant] : variants[props.variant],
   props.disabled ? 'opacity-70' : ''
 ]"
@@ -29,7 +38,7 @@
         @input="
   emit('update:modelValue', $event.target.value)
 "
-      />
+      >
       <!-- endContent -->
       <div
         v-if="$slots.endContent"
@@ -45,21 +54,24 @@
       {{ description }}
     </p>
     <!-- error message fuera de contenedor relativo -->
-    <p v-if="props.error" class="text-danger text-xs mt-1">
+    <p
+      v-if="props.error"
+      class="text-danger text-xs mt-1"
+    >
       {{ props.error }}
     </p>
   </div>
 </template>
 
 <script setup>
-const rounded = {
-  none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
+const roundedClasses = {
+  "none": "rounded-none",
+  "sm": "rounded-sm",
+  "md": "rounded-md",
+  "lg": "rounded-lg",
+  "xl": "rounded-xl",
   "2xl": "rounded-2xl",
-  full: "rounded-full"
+  "full": "rounded-full"
 };
 const variants = {
   default: "border border-gray-200 dark:border-white/10 bg-white dark:bg-white/10 enabled:hover:bg-gray-100 dark:enabled:hover:bg-white/20 dark:text-white focus:bg-white dark:focus:bg-white/10 focus:ring-2 focus:ring-primary focus:outline-none",

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

@@ -1,4 +1,4 @@
-import type { InputVariant, InputRounded } from "../types/index.js";
+import type { InputVariant, InputRounded } from '../types/index.js';
 type __VLS_Props = {
     modelValue?: string | number;
     type?: string;
@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     type: string;
     variant: InputVariant;
     disabled: boolean;
-    labelClass: string;
     required: boolean;
+    labelClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,4 +1,4 @@
-import type { InputRounded, InputVariant } from "../types/index.js";
+import type { InputRounded, InputVariant } from '../types/index.js';
 interface SelectOption {
     label: string;
     value: string | number;
@@ -28,9 +28,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     variant: InputVariant;
     disabled: boolean;
     placeholder: string;
+    required: boolean;
     modelValue: string | number | null;
     labelClass: string;
-    required: boolean;
     options: SelectOption[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;