@smurfox/proxy-ui 0.1.34 → 0.2.0

package/dist/runtime/components/Select.vue

@@ -0,0 +1,224 @@
+<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"
+        :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"
+            :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"
+                :class="[
+  isDarkMode ? 'hover:bg-white/10' : 'hover:bg-gray-100',
+  option.value === props.modelValue ? selectedOptionClass : ''
+]"
+                @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>
+</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",
+  "2xl": "rounded-2xl",
+  "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",
+  secondary: "border border-gray-200 dark:border-white/10 bg-[#EBEBEC] dark:bg-white/20 dark:text-white enabled:hover:bg-[#E0E0E1] dark:enabled:hover:bg-white/30 focus:bg-[#EBEBEC] dark:focus:bg-white/20 focus:ring-2 focus:ring-primary focus:outline-none"
+};
+const errorVariants = {
+  default: "border border-danger bg-danger/10 dark:bg-danger/20 text-black dark:text-white enabled:hover:bg-white/20 dark:enabled:hover:bg-white/20 focus:bg-white dark:focus:bg-white/10 focus:ring-2 focus:ring-danger focus:outline-none",
+  secondary: "border border-danger bg-danger/22 dark:bg-danger/10 text-black dark:text-white enabled:hover:bg-[#E0E0E1] dark:enabled:hover:bg-white/30 focus:bg-[#EBEBEC] dark:focus:bg-white/20 focus:ring-2 focus:ring-danger focus:outline-none"
+};
+const props = defineProps({
+  modelValue: { type: [String, Number, null], required: false, default: null },
+  options: { type: Array, required: false, default: () => [] },
+  label: { type: String, required: false },
+  labelClass: { type: String, required: false, default: "text-sm font-semibold" },
+  placeholder: { type: String, required: false, default: "Seleccionar" },
+  description: { type: String, required: false },
+  rounded: { type: String, required: false, default: "xl" },
+  variant: { type: String, required: false, default: "default" },
+  required: { type: Boolean, required: false, default: false },
+  error: { type: String, required: false, default: "" },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+const selectRef = ref(null);
+const isOpen = ref(false);
+const isDarkMode = ref(false);
+const dropdownPosition = ref({ top: 0, left: 0, width: 0 });
+const selectedOption = computed(() => {
+  return props.options.find((option) => option.value === props.modelValue);
+});
+const displayText = computed(() => {
+  return selectedOption.value?.label || props.placeholder;
+});
+const dropdownStyle = computed(() => ({
+  top: `${dropdownPosition.value.top}px`,
+  left: `${dropdownPosition.value.left}px`,
+  width: `${dropdownPosition.value.width}px`,
+  zIndex: 9999
+}));
+const selectedOptionClass = computed(() => {
+  return isDarkMode.value ? "bg-white/10" : "bg-primary/10";
+});
+const unselectedOptionClass = computed(() => {
+  return isDarkMode.value ? "text-white" : "text-black";
+});
+function syncDarkMode() {
+  isDarkMode.value = Boolean(selectRef.value?.closest(".dark"));
+}
+function calculateDropdownPosition() {
+  if (!selectRef.value) {
+    return;
+  }
+  syncDarkMode();
+  const rect = selectRef.value.getBoundingClientRect();
+  dropdownPosition.value = {
+    top: rect.bottom + window.scrollY + 8,
+    left: rect.left + window.scrollX,
+    width: rect.width
+  };
+}
+async function toggle() {
+  if (props.disabled) {
+    return;
+  }
+  if (!isOpen.value) {
+    await nextTick();
+    calculateDropdownPosition();
+  }
+  isOpen.value = !isOpen.value;
+}
+function close() {
+  isOpen.value = false;
+}
+function selectOption(option) {
+  emit("update:modelValue", option.value);
+  emit("change", option.value);
+  close();
+}
+function onClickOutside(event) {
+  if (selectRef.value && !selectRef.value.contains(event.target)) {
+    close();
+  }
+}
+function onScroll() {
+  if (isOpen.value) {
+    calculateDropdownPosition();
+  }
+}
+onMounted(() => {
+  syncDarkMode();
+  document.addEventListener("click", onClickOutside);
+  window.addEventListener("scroll", onScroll, true);
+  window.addEventListener("resize", onScroll);
+});
+onUnmounted(() => {
+  document.removeEventListener("click", onClickOutside);
+  window.removeEventListener("scroll", onScroll, true);
+  window.removeEventListener("resize", onScroll);
+});
+</script>

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

@@ -0,0 +1,37 @@
+import type { InputRounded, InputVariant } from '../types/index.js';
+interface SelectOption {
+    label: string;
+    value: string | number;
+}
+type __VLS_Props = {
+    modelValue?: string | number | null;
+    options?: SelectOption[];
+    label?: string;
+    labelClass?: string;
+    placeholder?: string;
+    description?: string;
+    rounded?: InputRounded;
+    variant?: InputVariant;
+    required?: boolean;
+    error?: string;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string | number) => any;
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: string | number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {
+    rounded: InputRounded;
+    error: string;
+    variant: InputVariant;
+    disabled: boolean;
+    placeholder: string;
+    required: boolean;
+    modelValue: string | number | null;
+    labelClass: string;
+    options: SelectOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,79 @@
+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";
+};
+type __VLS_Props = {
+    items?: Array<{
+        id: string | number;
+        [key: string]: unknown;
+    }>;
+    columns?: {
+        name: string;
+        id: string;
+        width?: string;
+    }[];
+    rounded?: keyof typeof roundedClasses;
+    isBordered?: boolean;
+    headerColor?: string;
+    bodyColor?: string;
+};
+declare var __VLS_2: `cell-${string}`, __VLS_3: {
+    item: {
+        [key: string]: unknown;
+        id: string | number;
+    };
+    value: unknown;
+}, __VLS_5: {
+    item: {
+        [key: string]: unknown;
+        id: string | number;
+    };
+    columns: {
+        name: string;
+        id: string;
+        width?: string;
+    }[];
+}, __VLS_8: `cell-${string}`, __VLS_9: {
+    item: {
+        [key: string]: unknown;
+        id: string | number;
+    };
+    value: unknown;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+} & {
+    [K in NonNullable<typeof __VLS_8>]?: (props: typeof __VLS_9) => any;
+} & {
+    'mobile-card'?: (props: typeof __VLS_5) => 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: keyof typeof roundedClasses;
+    columns: {
+        name: string;
+        id: string;
+        width?: string;
+    }[];
+    isBordered: boolean;
+    items: Array<{
+        id: string | number;
+        [key: string]: unknown;
+    }>;
+    headerColor: string;
+    bodyColor: 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/Table.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="relative w-full">
+    <!-- Vista de tabla para pantallas medianas y grandes -->
+    <div
+      class="hidden md:block overflow-x-auto"
+      :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">
+            <tr
+              v-for="item in items"
+              :key="item.id"
+            >
+              <td
+                v-for="column in columns"
+                :key="column.id"
+                :style="{ width: column.width || 'auto' }"
+                class="px-4 py-2 text-gray-900 dark:text-white break-words"
+              >
+                <slot
+                  :name="`cell-${column.id}`"
+                  :item="item"
+                  :value="item[column.id]"
+                >
+                  {{ item[column.id] }}
+                </slot>
+              </td>
+            </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">
+      <div
+        v-for="item in items"
+        :key="item.id"
+        class="bg-white dark:bg-[#18181B] border border-gray-200 dark:border-white/10 rounded-lg p-4 shadow-sm"
+      >
+        <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>
+      </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>
+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 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 },
+  headerColor: { type: String, required: false, default: "bg-[#F4F4F5] text-[#71717A] dark:bg-[#27272A] dark:text-[#A1A1AA]" },
+  bodyColor: { type: String, required: false, default: "" }
+});
+</script>

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

@@ -0,0 +1,79 @@
+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";
+};
+type __VLS_Props = {
+    items?: Array<{
+        id: string | number;
+        [key: string]: unknown;
+    }>;
+    columns?: {
+        name: string;
+        id: string;
+        width?: string;
+    }[];
+    rounded?: keyof typeof roundedClasses;
+    isBordered?: boolean;
+    headerColor?: string;
+    bodyColor?: string;
+};
+declare var __VLS_2: `cell-${string}`, __VLS_3: {
+    item: {
+        [key: string]: unknown;
+        id: string | number;
+    };
+    value: unknown;
+}, __VLS_5: {
+    item: {
+        [key: string]: unknown;
+        id: string | number;
+    };
+    columns: {
+        name: string;
+        id: string;
+        width?: string;
+    }[];
+}, __VLS_8: `cell-${string}`, __VLS_9: {
+    item: {
+        [key: string]: unknown;
+        id: string | number;
+    };
+    value: unknown;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+} & {
+    [K in NonNullable<typeof __VLS_8>]?: (props: typeof __VLS_9) => any;
+} & {
+    'mobile-card'?: (props: typeof __VLS_5) => 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: keyof typeof roundedClasses;
+    columns: {
+        name: string;
+        id: string;
+        width?: string;
+    }[];
+    isBordered: boolean;
+    items: Array<{
+        id: string | number;
+        [key: string]: unknown;
+    }>;
+    headerColor: string;
+    bodyColor: 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/Tabs.d.vue.ts

@@ -1,10 +1,10 @@
-import type { TabsRounded, TabsProps } from "../types/index.js";
+import type { TabsProps } from '../types/index.js';
 declare const __VLS_export: import("vue").DefineComponent<TabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<TabsProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    rounded: TabsRounded;
+    rounded: import("../types/index.js").TabsRounded;
     iconSize: number;
     modelValue: string;
     bgColor: string;

package/dist/runtime/components/Tabs.vue

@@ -42,16 +42,16 @@
 <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",
+  "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 props = defineProps({
+defineProps({
   modelValue: { type: String, required: true, default: "" },
   tabs: { type: Array, required: true },
   iconSize: { type: Number, required: false, default: 15 },

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

@@ -1,10 +1,10 @@
-import type { TabsRounded, TabsProps } from "../types/index.js";
+import type { TabsProps } from '../types/index.js';
 declare const __VLS_export: import("vue").DefineComponent<TabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<TabsProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    rounded: TabsRounded;
+    rounded: import("../types/index.js").TabsRounded;
     iconSize: number;
     modelValue: string;
     bgColor: string;