@smurfox/proxy-ui 0.2.0 → 0.2.2

package/README.md

@@ -204,6 +204,122 @@ A flexible input component with validation and state management.
 
 ---
 
+### PUTextArea
+
+A multi-line text input. Shares the look and feel of `PUInput`, with extra props for `rows` and resize behavior.
+
+```vue
+<PUTextArea v-model="message" label="Message" placeholder="Write your message" />
+```
+
+**Props**
+
+| Prop          | Type                                                        | Default                   | Description                                          |
+| ------------- | ----------------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
+| `modelValue`  | `string \| number`                                          | —                         | Bound value (v-model).                               |
+| `label`       | `string`                                                    | —                         | Label displayed above the textarea.                  |
+| `labelClass`  | `string`                                                    | `'text-sm font-semibold'` | Custom classes for the label.                        |
+| `placeholder` | `string`                                                    | —                         | Placeholder text.                                    |
+| `description` | `string`                                                    | —                         | Helper text displayed below.                         |
+| `rounded`     | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | `'xl'`                    | Border radius.                                       |
+| `variant`     | `'default' \| 'secondary'`                                  | `'default'`               | Visual style.                                        |
+| `rows`        | `number \| string`                                          | `4`                       | Initial number of visible rows.                      |
+| `resize`      | `'none' \| 'both' \| 'horizontal' \| 'vertical'`            | `'vertical'`              | Resize behavior.                                     |
+| `required`    | `boolean`                                                   | `false`                   | Shows a red asterisk on the label.                   |
+| `error`       | `string`                                                    | —                         | Error message to display. Changes styling to danger. |
+| `disabled`    | `boolean`                                                   | `false`                   | Disables the textarea.                               |
+
+**Slots**
+
+| Slot           | Description                   |
+| -------------- | ----------------------------- |
+| `startContent` | Icon or content at the start. |
+| `endContent`   | Icon or content at the end.   |
+
+**Examples**
+
+```vue
+<!-- Basic -->
+<PUTextArea v-model="message" label="Message" placeholder="Write your message" />
+
+<!-- Fixed size, no resize -->
+<PUTextArea label="Comment" :rows="6" resize="none" />
+
+<!-- With error -->
+<PUTextArea label="Bio" error="Bio is required" required />
+
+<!-- With icon -->
+<PUTextArea label="Notes">
+  <template #startContent>
+    <Icon name="lucide:notebook-pen" />
+  </template>
+</PUTextArea>
+```
+
+---
+
+### PUSelect
+
+A custom select with an animated dropdown panel teleported to `body`. Dark-mode aware, supports `v-model`, and emits both `update:modelValue` and `change`.
+
+```vue
+<PUSelect
+  v-model="role"
+  label="Role"
+  :options="[
+    { label: 'Admin', value: 'admin' },
+    { label: 'Editor', value: 'editor' },
+    { label: 'Viewer', value: 'viewer' },
+  ]"
+/>
+```
+
+**Props**
+
+| Prop          | Type                                                        | Default                   | Description                                          |
+| ------------- | ----------------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
+| `modelValue`  | `string \| number \| null`                                  | `null`                    | Selected value (v-model).                            |
+| `options`     | `{ label: string, value: string \| number }[]`              | `[]`                      | Items shown in the dropdown.                         |
+| `label`       | `string`                                                    | —                         | Label displayed above the select.                    |
+| `labelClass`  | `string`                                                    | `'text-sm font-semibold'` | Custom classes for the label.                        |
+| `placeholder` | `string`                                                    | `'Seleccionar'`           | Text shown when nothing is selected.                 |
+| `description` | `string`                                                    | —                         | Helper text displayed below.                         |
+| `rounded`     | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | `'xl'`                    | Border radius.                                       |
+| `variant`     | `'default' \| 'secondary'`                                  | `'default'`               | Visual style.                                        |
+| `required`    | `boolean`                                                   | `false`                   | Shows a red asterisk on the label.                   |
+| `error`       | `string`                                                    | `''`                      | Error message to display. Changes styling to danger. |
+| `disabled`    | `boolean`                                                   | `false`                   | Disables the select.                                 |
+
+**Events**
+
+| Event               | Payload            | Description                            |
+| ------------------- | ------------------ | -------------------------------------- |
+| `update:modelValue` | `string \| number` | Emitted when an option is picked.      |
+| `change`            | `string \| number` | Emitted alongside `update:modelValue`. |
+
+**Examples**
+
+```vue
+<!-- Basic -->
+<PUSelect v-model="country" :options="countries" label="Country" />
+
+<!-- With description -->
+<PUSelect
+  v-model="plan"
+  :options="plans"
+  label="Plan"
+  description="You can change this later"
+/>
+
+<!-- With error -->
+<PUSelect v-model="status" :options="statuses" error="Pick a status" required />
+
+<!-- Disabled -->
+<PUSelect :options="statuses" disabled label="Locked" />
+```
+
+---
+
 ### PUCard
 
 A flexible card component with customizable styling and borders.
@@ -451,17 +567,152 @@ const activeTab = ref("dashboard");
 
 ---
 
+### PUDropdown
+
+A floating panel anchored to an activator element. Opens on click and closes on outside click. Provides a `closeDropdown` function (via `inject`) so child items can close the panel after acting.
+
+```vue
+<PUDropdown>
+  <template #activator>
+    <PUButton label="Options" end-icon="lucide:chevron-down" />
+  </template>
+  <template #content>
+    <ul class="p-2">
+      <li class="px-3 py-2 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg cursor-pointer">
+        Profile
+      </li>
+      <li class="px-3 py-2 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg cursor-pointer">
+        Settings
+      </li>
+    </ul>
+  </template>
+</PUDropdown>
+```
+
+**Slots**
+
+| Slot        | Description                                              |
+| ----------- | -------------------------------------------------------- |
+| `activator` | The element the user clicks to open the dropdown.        |
+| `content`   | The floating panel contents (rendered when open).        |
+
+**Provides**
+
+| Key             | Type         | Description                                                              |
+| --------------- | ------------ | ------------------------------------------------------------------------ |
+| `closeDropdown` | `() => void` | Call from inside `content` to close the dropdown (e.g. after an action). |
+
+```vue
+<!-- Closing the dropdown from a child item -->
+<script setup>
+import { inject } from "vue";
+const closeDropdown = inject("closeDropdown");
+</script>
+
+<template>
+  <button @click="handleAction(); closeDropdown?.()">Action</button>
+</template>
+```
+
+---
+
+### PUTable
+
+A responsive data table that renders as a normal `<table>` on `md+` viewports and switches to a stack of cards on mobile. Cells are rendered through per-column scoped slots so you can fully customize their content.
+
+```vue
+<PUTable :columns="columns" :items="items" />
+```
+
+**Props**
+
+| Prop          | Type                                                                        | Default                                  | Description                                                              |
+| ------------- | --------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------ |
+| `items`       | `Array<{ id: string \| number, [key: string]: unknown }>`                    | `[]`                                                                | Row data. Each item must have an `id` used as the Vue key.                              |
+| `columns`     | `{ name: string, id: string, width?: string }[]`                             | `[]`                                                                | Column definitions. `id` is the row key to read, `width` is CSS width.                  |
+| `rounded`     | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` | `'lg'`                                                              | Border radius of the outer container.                                                   |
+| `isBordered`   | `boolean`                                                                    | `false`                                                             | Adds an outer border around the table.                                                  |
+| `isSelectable` | `boolean`                                                                    | `false`                                                             | Enables row click + hover effects (cursor, bg highlight, motion-v lift). Emits `row-click`. |
+| `itemsSize`    | `'sm' \| 'md' \| 'lg'`                                                       | `'md'`                                                              | Vertical padding of body rows. `sm` → `py-2`, `md` → `py-4`, `lg` → `py-6`.             |
+| `headerColor`  | `string`                                                                     | `bg-[#F4F4F5] text-[#71717A] dark:bg-[#27272A] dark:text-[#A1A1AA]` | Tailwind classes applied to `<thead>`.                                                  |
+| `bodyColor`    | `string`                                                                     | `''`                                                                | Tailwind classes applied to `<tbody>`.                                                  |
+
+**Events**
+
+| Event       | Payload                                                  | Description                                                              |
+| ----------- | -------------------------------------------------------- | ------------------------------------------------------------------------ |
+| `row-click` | `item: { id: string \| number, [key: string]: unknown }` | Emitted when a row is clicked (only when `isSelectable` is `true`).      |
+
+**Slots**
+
+| Slot            | Scope                                  | Description                                                                  |
+| --------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
+| `cell-{id}`     | `{ item, value }`                      | Customize the cell for the column with `id` = `{id}`. Falls back to `value`. |
+| `mobile-card`   | `{ item, columns }`                    | Replace the default mobile card layout for an entire row.                    |
+
+**Examples**
+
+```vue
+<template>
+  <!-- Basic table -->
+  <PUTable :columns="columns" :items="items" />
+
+  <!-- Custom cell rendering -->
+  <PUTable :columns="columns" :items="items" rounded="2xl" is-bordered>
+    <template #cell-status="{ value }">
+      <PUChip :label="value" :color="value === 'Active' ? 'success' : 'danger'" variant="flat" size="sm" />
+    </template>
+    <template #cell-actions="{ item }">
+      <div class="flex gap-2 justify-end">
+        <PUButton is-icon-only icon="lucide:pencil" variant="ghost" size="sm" @click.stop="edit(item)" />
+        <PUButton is-icon-only icon="lucide:trash-2" variant="ghost" color="danger" size="sm" @click.stop="remove(item)" />
+      </div>
+    </template>
+  </PUTable>
+
+  <!-- Selectable rows with row-click -->
+  <PUTable
+    :columns="columns"
+    :items="items"
+    is-selectable
+    @row-click="onRowClick"
+  />
+</template>
+
+<script setup>
+const columns = [
+  { name: "Name", id: "name", width: "40%" },
+  { name: "Status", id: "status", width: "30%" },
+  { name: "", id: "actions", width: "30%" },
+];
+const items = [
+  { id: 1, name: "Ada Lovelace", status: "Active" },
+  { id: 2, name: "Alan Turing", status: "Inactive" },
+];
+
+function onRowClick(item) {
+  console.log("clicked row:", item);
+}
+</script>
+
+> When `isSelectable` is enabled, clicks on interactive children (buttons, links) propagate to the row. Use `@click.stop` on those children if you don't want them to fire `row-click`.
+```
+
+---
+
 ## TypeScript
 
 ProxyUI exports all component types:
 
 ```ts
 import type {
+  GlobalRounded,
   ButtonProps,
   ButtonColor,
   ButtonVariant,
   ButtonSize,
   ButtonRounded,
+  InputProps,
   InputVariant,
   InputRounded,
   ChipProps,
@@ -479,6 +730,8 @@ import type {
 } from "proxy-ui";
 ```
 
+> `PUTextArea`, `PUSelect`, `PUDropdown`, and `PUTable` define their props inline and do not export dedicated `Props` types. They reuse `InputVariant` and `InputRounded` from the same package.
+
 ---
 
 ## License

package/dist/module.json

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

package/dist/runtime/components/Chip.vue

@@ -30,9 +30,9 @@
 
 <script setup>
 const sizes = {
-  sm: "text-xs min-w-18 py-1 px-2",
-  md: "text-xs min-w-20 py-1.5 px-2",
-  lg: "text-sm min-w-24 py-2 px-4"
+  sm: "text-xs min-w-8 py-1 px-2",
+  md: "text-xs min-w-12 py-1.5 px-2",
+  lg: "text-sm min-w-14 py-2 px-4"
 };
 const variantClasses = {
   default: "",

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

@@ -9,6 +9,11 @@ declare const roundedClasses: {
     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;
@@ -21,16 +26,18 @@ type __VLS_Props = {
     }[];
     rounded?: keyof typeof roundedClasses;
     isBordered?: boolean;
+    isSelectable?: boolean;
     headerColor?: string;
     bodyColor?: string;
+    itemsSize?: keyof typeof sizes;
 };
-declare var __VLS_2: `cell-${string}`, __VLS_3: {
+declare var __VLS_10: `cell-${string}`, __VLS_11: {
     item: {
         [key: string]: unknown;
         id: string | number;
     };
     value: unknown;
-}, __VLS_5: {
+}, __VLS_21: {
     item: {
         [key: string]: unknown;
         id: string | number;
@@ -40,7 +47,7 @@ declare var __VLS_2: `cell-${string}`, __VLS_3: {
         id: string;
         width?: string;
     }[];
-}, __VLS_8: `cell-${string}`, __VLS_9: {
+}, __VLS_24: `cell-${string}`, __VLS_25: {
     item: {
         [key: string]: unknown;
         id: string | number;
@@ -48,13 +55,23 @@ declare var __VLS_2: `cell-${string}`, __VLS_3: {
     value: unknown;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 } & {
-    [K in NonNullable<typeof __VLS_8>]?: (props: typeof __VLS_9) => any;
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
 } & {
-    'mobile-card'?: (props: typeof __VLS_5) => any;
+    'mobile-card'?: (props: typeof __VLS_21) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+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;
@@ -66,8 +83,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         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;

package/dist/runtime/components/Table.vue

@@ -2,7 +2,7 @@
   <div class="relative w-full">
     <!-- Vista de tabla para pantallas medianas y grandes -->
     <div
-      class="hidden md:block overflow-x-auto"
+      class="hidden md:block overflow-clip"
       :class="[
   roundedClasses[props.rounded],
   isBordered ? 'border border-gray-200 dark:border-white/10 ' : ''
@@ -29,15 +29,20 @@
 
         <tbody :class="props.bodyColor">
           <template v-if="items.length > 0">
-            <tr
+            <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 py-2 text-gray-900 dark:text-white break-words"
+                class="px-4 text-gray-900 dark:text-white break-words"
+                :class="sizes[props.itemsSize]"
               >
                 <slot
                   :name="`cell-${column.id}`"
@@ -47,7 +52,7 @@
                   {{ item[column.id] }}
                 </slot>
               </td>
-            </tr>
+            </motion.tr>
           </template>
 
           <tr v-else>
@@ -64,10 +69,14 @@
 
     <!-- Vista de tarjetas para dispositivos móviles -->
     <div class="block md:hidden space-y-4 p-1">
-      <div
+      <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"
@@ -98,7 +107,7 @@
             </div>
           </div>
         </slot>
-      </div>
+      </motion.div>
 
       <!-- Mensaje cuando no hay items -->
       <div
@@ -112,6 +121,7 @@
 </template>
 
 <script setup>
+import { motion } from "motion-v";
 const roundedClasses = {
   "none": "rounded-none",
   "xs": "rounded-xs",
@@ -167,12 +177,20 @@ const roundedTopEndClasses = {
   "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: "" }
+  bodyColor: { type: String, required: false, default: "" },
+  itemsSize: { type: null, required: false, default: "md" }
 });
+const emit = defineEmits(["row-click"]);
 </script>

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

@@ -9,6 +9,11 @@ declare const roundedClasses: {
     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;
@@ -21,16 +26,18 @@ type __VLS_Props = {
     }[];
     rounded?: keyof typeof roundedClasses;
     isBordered?: boolean;
+    isSelectable?: boolean;
     headerColor?: string;
     bodyColor?: string;
+    itemsSize?: keyof typeof sizes;
 };
-declare var __VLS_2: `cell-${string}`, __VLS_3: {
+declare var __VLS_10: `cell-${string}`, __VLS_11: {
     item: {
         [key: string]: unknown;
         id: string | number;
     };
     value: unknown;
-}, __VLS_5: {
+}, __VLS_21: {
     item: {
         [key: string]: unknown;
         id: string | number;
@@ -40,7 +47,7 @@ declare var __VLS_2: `cell-${string}`, __VLS_3: {
         id: string;
         width?: string;
     }[];
-}, __VLS_8: `cell-${string}`, __VLS_9: {
+}, __VLS_24: `cell-${string}`, __VLS_25: {
     item: {
         [key: string]: unknown;
         id: string | number;
@@ -48,13 +55,23 @@ declare var __VLS_2: `cell-${string}`, __VLS_3: {
     value: unknown;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 } & {
-    [K in NonNullable<typeof __VLS_8>]?: (props: typeof __VLS_9) => any;
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
 } & {
-    'mobile-card'?: (props: typeof __VLS_5) => any;
+    'mobile-card'?: (props: typeof __VLS_21) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+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;
@@ -66,8 +83,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smurfox/proxy-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A UI component library built for Nuxt 4",
   "repository": {
     "type": "git",