@smurfox/proxy-ui 0.1.35 → 0.2.1

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;

package/dist/runtime/components/Select.vue

@@ -1,109 +1,127 @@
 <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>
-
-    <div ref="selectRef" class="relative w-full text-left">
-      <button
-        type="button"
-        class="w-full p-3 text-sm text-left transition-colors flex items-center justify-between gap-3"
+  <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>
+
+    <div
+      ref="selectRef"
+      class="relative w-full text-left"
+    >
+      <button
+        type="button"
+        class="w-full p-3 text-sm text-left transition-colors flex items-center justify-between gap-3"
         :class="[
   roundedVariants[props.rounded],
   props.error ? errorVariants[props.variant] : variants[props.variant],
   props.disabled ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer',
   !selectedOption ? 'text-gray-500 dark:text-white/50' : ''
-]"
-        :disabled="props.disabled"
-        @click.stop="toggle"
-      >
-        <span class="truncate">
-          {{ displayText }}
-        </span>
-        <Icon
-          name="mdi:chevron-down"
-          class="text-gray-400 transition-transform duration-200 shrink-0"
-          :class="{ 'rotate-180': isOpen && !props.disabled }"
-        />
-      </button>
-
-      <Teleport v-if="isOpen && !props.disabled" to="body">
-        <AnimatePresence>
-          <motion.div
-            v-if="isOpen && !props.disabled"
-            :initial="{ scale: 0.96, opacity: 0, y: -6 }"
-            :animate="{ scale: 1, opacity: 1, y: 0 }"
-            :exit="{ scale: 0.96, opacity: 0, y: -6 }"
-            class="fixed p-2 max-h-56 overflow-y-auto origin-top border rounded-xl shadow-xl"
+]"
+        :disabled="props.disabled"
+        @click.stop="toggle"
+      >
+        <span class="truncate">
+          {{ displayText }}
+        </span>
+        <Icon
+          name="mdi:chevron-down"
+          class="text-gray-400 transition-transform duration-200 shrink-0"
+          :class="{ 'rotate-180': isOpen && !props.disabled }"
+        />
+      </button>
+
+      <Teleport
+        v-if="isOpen && !props.disabled"
+        to="body"
+      >
+        <AnimatePresence>
+          <motion.div
+            v-if="isOpen && !props.disabled"
+            :initial="{ scale: 0.96, opacity: 0, y: -6 }"
+            :animate="{ scale: 1, opacity: 1, y: 0 }"
+            :exit="{ scale: 0.96, opacity: 0, y: -6 }"
+            class="fixed p-2 max-h-56 overflow-y-auto origin-top border rounded-xl shadow-xl"
             :class="
   isDarkMode ? 'bg-[#212123] border-white/10 text-white' : 'bg-white border-gray-100'
-"
-            :style="dropdownStyle"
-            @click.stop
-          >
-            <div
-              v-if="props.options.length === 0"
-              class="px-4 py-2 text-sm text-center"
-              :class="isDarkMode ? 'text-white/60' : 'text-black/50'"
-            >
-              No available options
-            </div>
-            <template v-else>
-              <button
-                v-for="option in props.options"
-                :key="String(option.value)"
-                type="button"
-                class="w-full flex items-center justify-between gap-3 px-3 py-2 mb-1 text-left cursor-pointer rounded-lg transition-colors"
+"
+            :style="dropdownStyle"
+            @click.stop
+          >
+            <div
+              v-if="props.options.length === 0"
+              class="px-4 py-2 text-sm text-center"
+              :class="isDarkMode ? 'text-white/60' : 'text-black/50'"
+            >
+              No available options
+            </div>
+            <template v-else>
+              <button
+                v-for="option in props.options"
+                :key="String(option.value)"
+                type="button"
+                class="w-full flex items-center justify-between gap-3 px-3 py-2 mb-1 text-left cursor-pointer rounded-lg transition-colors"
                 :class="[
   isDarkMode ? 'hover:bg-white/10' : 'hover:bg-gray-100',
   option.value === props.modelValue ? selectedOptionClass : ''
-]"
-                @click.stop="selectOption(option)"
-              >
-                <span
-                  class="text-sm truncate"
+]"
+                @click.stop="selectOption(option)"
+              >
+                <span
+                  class="text-sm truncate"
                   :class="
   option.value === props.modelValue ? 'text-primary' : unselectedOptionClass
-"
-                >
-                  {{ option.label }}
-                </span>
-                <Icon
-                  v-if="option.value === props.modelValue"
-                  name="mdi:check"
-                  class="text-primary text-sm shrink-0"
-                />
-              </button>
-            </template>
-          </motion.div>
-        </AnimatePresence>
-      </Teleport>
-    </div>
-
-    <p
-      v-if="description && !props.error"
-      class="text-gray-600 dark:text-white/60 text-xs"
-    >
-      {{ description }}
-    </p>
-    <p v-if="props.error" class="text-danger text-xs mt-1">
-      {{ props.error }}
-    </p>
-  </div>
+"
+                >
+                  {{ option.label }}
+                </span>
+                <Icon
+                  v-if="option.value === props.modelValue"
+                  name="mdi:check"
+                  class="text-primary text-sm shrink-0"
+                />
+              </button>
+            </template>
+          </motion.div>
+        </AnimatePresence>
+      </Teleport>
+    </div>
+
+    <p
+      v-if="description && !props.error"
+      class="text-gray-600 dark:text-white/60 text-xs"
+    >
+      {{ description }}
+    </p>
+    <p
+      v-if="props.error"
+      class="text-danger text-xs mt-1"
+    >
+      {{ props.error }}
+    </p>
+  </div>
 </template>
 
 <script setup>
 import { AnimatePresence, motion } from "motion-v";
 import { computed, nextTick, onMounted, onUnmounted, ref } from "vue";
 const roundedVariants = {
-  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 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/Select.vue.d.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;

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

@@ -0,0 +1,98 @@
+declare const roundedClasses: {
+    readonly none: "rounded-none";
+    readonly xs: "rounded-xs";
+    readonly sm: "rounded-sm";
+    readonly md: "rounded-md";
+    readonly lg: "rounded-lg";
+    readonly xl: "rounded-xl";
+    readonly '2xl': "rounded-2xl";
+    readonly '3xl': "rounded-3xl";
+    readonly full: "rounded-full";
+};
+declare const sizes: {
+    readonly sm: "py-2";
+    readonly md: "py-4";
+    readonly lg: "py-6";
+};
+type __VLS_Props = {
+    items?: Array<{
+        id: string | number;
+        [key: string]: unknown;
+    }>;
+    columns?: {
+        name: string;
+        id: string;
+        width?: string;
+    }[];
+    rounded?: keyof typeof roundedClasses;
+    isBordered?: boolean;
+    isSelectable?: boolean;
+    headerColor?: string;
+    bodyColor?: string;
+    itemsSize?: keyof typeof sizes;
+};
+declare var __VLS_10: `cell-${string}`, __VLS_11: {
+    item: {
+        [key: string]: unknown;
+        id: string | number;
+    };
+    value: unknown;
+}, __VLS_21: {
+    item: {
+        [key: string]: unknown;
+        id: string | number;
+    };
+    columns: {
+        name: string;
+        id: string;
+        width?: string;
+    }[];
+}, __VLS_24: `cell-${string}`, __VLS_25: {
+    item: {
+        [key: string]: unknown;
+        id: string | number;
+    };
+    value: unknown;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
+} & {
+    'mobile-card'?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "row-click": (item: {
+        [key: string]: unknown;
+        id: string | number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onRow-click"?: ((item: {
+        [key: string]: unknown;
+        id: string | number;
+    }) => any) | undefined;
+}>, {
+    rounded: keyof typeof roundedClasses;
+    columns: {
+        name: string;
+        id: string;
+        width?: string;
+    }[];
+    isBordered: boolean;
+    items: Array<{
+        id: string | number;
+        [key: string]: unknown;
+    }>;
+    isSelectable: boolean;
+    headerColor: string;
+    bodyColor: string;
+    itemsSize: keyof typeof sizes;
+}, {}, {}, {}, 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/Table.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="relative w-full">
+    <!-- Vista de tabla para pantallas medianas y grandes -->
+    <div
+      class="hidden md:block overflow-x-clip"
+      :class="[
+  roundedClasses[props.rounded],
+  isBordered ? 'border border-gray-200 dark:border-white/10 ' : ''
+]"
+    >
+      <table class="w-full text-sm text-left rtl:text-right table-fixed">
+        <thead :class="props.headerColor">
+          <tr>
+            <th
+              v-for="(column, index) in props.columns"
+              :key="column.id"
+              scope="col"
+              :style="{ width: column.width || 'auto' }"
+              :class="[
+  'px-4 py-3 font-bold text-xs uppercase',
+  index === 0 ? isBordered ? roundedTopStartClasses[props.rounded] : roundedStartClasses[props.rounded] : '',
+  index === props.columns.length - 1 ? isBordered ? roundedTopEndClasses[props.rounded] : roundedEndClasses[props.rounded] : ''
+]"
+            >
+              {{ column.name }}
+            </th>
+          </tr>
+        </thead>
+
+        <tbody :class="props.bodyColor">
+          <template v-if="items.length > 0">
+            <motion.tr
+              v-for="item in items"
+              :key="item.id"
+              :while-hover="props.isSelectable ? { scale: 1.01 } : {}"
+              :transition="{ type: 'spring', stiffness: 400, damping: 30 }"
+              :class="props.isSelectable ? 'cursor-pointer hover:bg-gray-100 dark:hover:bg-white/5' : ''"
+              @click="props.isSelectable && emit('row-click', item)"
+            >
+              <td
+                v-for="column in columns"
+                :key="column.id"
+                :style="{ width: column.width || 'auto' }"
+                class="px-4 text-gray-900 dark:text-white break-words"
+                :class="sizes[props.itemsSize]"
+              >
+                <slot
+                  :name="`cell-${column.id}`"
+                  :item="item"
+                  :value="item[column.id]"
+                >
+                  {{ item[column.id] }}
+                </slot>
+              </td>
+            </motion.tr>
+          </template>
+
+          <tr v-else>
+            <td
+              :colspan="columns.length"
+              class="text-lg text-center py-20 text-black/50 dark:text-white/50"
+            >
+              No se encontraron resultados
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Vista de tarjetas para dispositivos móviles -->
+    <div class="block md:hidden space-y-4 p-1">
+      <motion.div
+        v-for="item in items"
+        :key="item.id"
+        :while-hover="props.isSelectable ? { y: -3 } : {}"
+        :transition="{ type: 'spring', stiffness: 400, damping: 25 }"
+        class="bg-white dark:bg-[#18181B] border border-gray-200 dark:border-white/10 rounded-lg p-4 shadow-sm"
+        :class="props.isSelectable ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-white/5 hover:shadow-md' : ''"
+        @click="props.isSelectable && emit('row-click', item)"
+      >
+        <slot
+          name="mobile-card"
+          :item="item"
+          :columns="columns"
+        >
+          <!-- Contenido por defecto si no se proporciona slot personalizado -->
+          <div class="space-y-2">
+            <div
+              v-for="column in columns"
+              :key="column.id"
+              class="flex justify-between items-center"
+            >
+              <span
+                class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase"
+              >
+                {{ column.name }}
+              </span>
+              <div class="text-sm">
+                <slot
+                  :name="`cell-${column.id}`"
+                  :item="item"
+                  :value="item[column.id]"
+                >
+                  {{ item[column.id] }}
+                </slot>
+              </div>
+            </div>
+          </div>
+        </slot>
+      </motion.div>
+
+      <!-- Mensaje cuando no hay items -->
+      <div
+        v-if="items.length === 0"
+        class="text-lg text-center py-20 text-black/50 dark:text-white/50"
+      >
+        No se encontraron resultados
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { motion } from "motion-v";
+const roundedClasses = {
+  "none": "rounded-none",
+  "xs": "rounded-xs",
+  "sm": "rounded-sm",
+  "md": "rounded-md",
+  "lg": "rounded-lg",
+  "xl": "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl",
+  "full": "rounded-full"
+};
+const roundedStartClasses = {
+  "none": "rounded-s-none",
+  "xs": "rounded-s-xs",
+  "sm": "rounded-s-sm",
+  "md": "rounded-s-md",
+  "lg": "rounded-s-lg",
+  "xl": "rounded-s-xl",
+  "2xl": "rounded-s-2xl",
+  "3xl": "rounded-s-3xl",
+  "full": "rounded-s-full"
+};
+const roundedEndClasses = {
+  "none": "rounded-e-none",
+  "xs": "rounded-e-xs",
+  "sm": "rounded-e-sm",
+  "md": "rounded-e-md",
+  "lg": "rounded-e-lg",
+  "xl": "rounded-e-xl",
+  "2xl": "rounded-e-2xl",
+  "3xl": "rounded-e-3xl",
+  "full": "rounded-e-full"
+};
+const roundedTopStartClasses = {
+  "none": "rounded-ss-none",
+  "xs": "rounded-ss-xs",
+  "sm": "rounded-ss-sm",
+  "md": "rounded-ss-md",
+  "lg": "rounded-ss-lg",
+  "xl": "rounded-ss-xl",
+  "2xl": "rounded-ss-2xl",
+  "3xl": "rounded-ss-3xl",
+  "full": "rounded-ss-full"
+};
+const roundedTopEndClasses = {
+  "none": "rounded-se-none",
+  "xs": "rounded-se-xs",
+  "sm": "rounded-se-sm",
+  "md": "rounded-se-md",
+  "lg": "rounded-se-lg",
+  "xl": "rounded-se-xl",
+  "2xl": "rounded-se-2xl",
+  "3xl": "rounded-se-3xl",
+  "full": "rounded-se-full"
+};
+const sizes = {
+  sm: "py-2",
+  md: "py-4",
+  lg: "py-6"
+};
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] },
+  columns: { type: Array, required: false, default: () => [] },
+  rounded: { type: null, required: false, default: "lg" },
+  isBordered: { type: Boolean, required: false, default: false },
+  isSelectable: { type: Boolean, required: false, default: false },
+  headerColor: { type: String, required: false, default: "bg-[#F4F4F5] text-[#71717A] dark:bg-[#27272A] dark:text-[#A1A1AA]" },
+  bodyColor: { type: String, required: false, default: "" },
+  itemsSize: { type: null, required: false, default: "md" }
+});
+const emit = defineEmits(["row-click"]);
+</script>