@smurfox/proxy-ui 0.4.2 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +2 -2
  2. package/dist/module.json +1 -1
  3. package/dist/runtime/components/Table.d.vue.ts +57 -108
  4. package/dist/runtime/components/Table.vue +19 -6
  5. package/dist/runtime/components/Table.vue.d.ts +57 -108
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -758,7 +758,7 @@ A responsive data table that renders as a normal `<table>` on `md+` viewports an
758
758
 
759
759
  | Prop | Type | Default | Description |
760
760
  | ---------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
761
- | `items` | `Array<{ id: string \| number, [key: string]: unknown }>` | `[]` | Row data. Each item must have an `id` used as the Vue key. |
761
+ | `items` | `TItem[]` where `TItem extends { id: string \| number }` | `[]` | Row data. `PUTable` is generic in `TItem`, so passing `SaleOrder[]`, `User[]`, etc. is type-safe — `row-click` and the `cell-{id}` slot scope infer your interface. |
762
762
  | `columns` | `{ name: string, id: string, width?: string }[]` | `[]` | Column definitions. `id` is the row key to read, `width` is CSS width. |
763
763
  | `rounded` | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` | `'lg'` | Border radius of the outer container. |
764
764
  | `isBordered` | `boolean` | `false` | Adds an outer border around the table. |
@@ -778,7 +778,7 @@ A responsive data table that renders as a normal `<table>` on `md+` viewports an
778
778
 
779
779
  | Event | Payload | Description |
780
780
  | ----------- | -------------------------------------------------------- | ------------------------------------------------------------------------ |
781
- | `row-click` | `item: { id: string \| number, [key: string]: unknown }` | Emitted when a row is clicked (only when `isSelectable` is `true`). |
781
+ | `row-click` | `item: TItem` | Emitted when a row is clicked (only when `isSelectable` is `true`). `TItem` is inferred from `items`. |
782
782
 
783
783
  **Slots**
784
784
 
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "proxy-ui",
3
3
  "configKey": "proxyUI",
4
- "version": "0.4.2",
4
+ "version": "0.4.4",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "3.6.1"
package/dist/runtime/components/Table.d.vue.ts CHANGED
@@ -1,112 +1,61 @@
1
- declare const roundedClasses: {
2
- readonly none: "rounded-none";
3
- readonly xs: "rounded-xs";
4
- readonly sm: "rounded-sm";
5
- readonly md: "rounded-md";
6
- readonly lg: "rounded-lg";
7
- readonly xl: "rounded-xl";
8
- readonly '2xl': "rounded-2xl";
9
- readonly '3xl': "rounded-3xl";
10
- readonly full: "rounded-full";
11
- };
12
- declare const sizes: {
13
- readonly sm: "py-2";
14
- readonly md: "py-4";
15
- readonly lg: "py-6";
16
- };
17
- type __VLS_Props = {
18
- items?: Array<{
19
- id: string | number;
20
- [key: string]: unknown;
21
- }>;
22
- columns?: {
23
- name: string;
24
- id: string;
25
- width?: string;
26
- }[];
27
- rounded?: keyof typeof roundedClasses;
28
- isBordered?: boolean;
29
- isSelectable?: boolean;
30
- headerColor?: string;
31
- isBodyColored?: boolean;
32
- bodyColor?: string;
33
- itemsSize?: keyof typeof sizes;
34
- hasShadow?: boolean;
35
- emptyStateTitle?: string;
36
- emptyStateDescription?: string;
37
- showEmptyAnimation?: boolean;
38
- emptyAnimationData?: object;
39
- emptyAnimationSize?: number;
40
- };
41
- declare var __VLS_10: `cell-${string}`, __VLS_11: {
42
- item: {
43
- [key: string]: unknown;
44
- id: string | number;
45
- };
46
- value: unknown;
47
- }, __VLS_26: {
48
- item: {
49
- [key: string]: unknown;
50
- id: string | number;
1
+ declare const __VLS_export: <TItem extends {
2
+ id: string | number;
3
+ }>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
4
+ props: import("vue").PublicProps & __VLS_PrettifyLocal<{
5
+ items?: TItem[];
6
+ columns?: {
7
+ name: string;
8
+ id: string;
9
+ width?: string;
10
+ }[];
11
+ rounded?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
12
+ isBordered?: boolean;
13
+ isSelectable?: boolean;
14
+ headerColor?: string;
15
+ isBodyColored?: boolean;
16
+ bodyColor?: string;
17
+ itemsSize?: "sm" | "md" | "lg";
18
+ hasShadow?: boolean;
19
+ emptyStateTitle?: string;
20
+ emptyStateDescription?: string;
21
+ showEmptyAnimation?: boolean;
22
+ emptyAnimationData?: object;
23
+ emptyAnimationSize?: number;
24
+ } & {
25
+ "onRow-click"?: ((item: TItem) => any) | undefined;
26
+ }> & (typeof globalThis extends {
27
+ __VLS_PROPS_FALLBACK: infer P;
28
+ } ? P : {});
29
+ expose: (exposed: {}) => void;
30
+ attrs: any;
31
+ slots: {
32
+ [x: `cell-${string}`]: ((props: {
33
+ item: TItem;
34
+ value: unknown;
35
+ }) => any) | undefined;
36
+ } & {
37
+ [x: `cell-${string}`]: ((props: {
38
+ item: TItem;
39
+ value: unknown;
40
+ }) => any) | undefined;
41
+ } & {
42
+ 'mobile-card'?: (props: {
43
+ item: TItem;
44
+ columns: {
45
+ name: string;
46
+ id: string;
47
+ width?: string;
48
+ }[];
49
+ }) => any;
51
50
  };
52
- columns: {
53
- name: string;
54
- id: string;
55
- width?: string;
56
- }[];
57
- }, __VLS_29: `cell-${string}`, __VLS_30: {
58
- item: {
59
- [key: string]: unknown;
60
- id: string | number;
61
- };
62
- value: unknown;
63
- };
64
- type __VLS_Slots = {} & {
65
- [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
66
- } & {
67
- [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => any;
68
- } & {
69
- 'mobile-card'?: (props: typeof __VLS_26) => any;
51
+ emit: (evt: "row-click", item: TItem) => void;
52
+ }>) => import("vue").VNode & {
53
+ __ctx?: Awaited<typeof __VLS_setup>;
70
54
  };
71
- declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
72
- "row-click": (item: {
73
- [key: string]: unknown;
74
- id: string | number;
75
- }) => any;
76
- }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
77
- "onRow-click"?: ((item: {
78
- [key: string]: unknown;
79
- id: string | number;
80
- }) => any) | undefined;
81
- }>, {
82
- rounded: keyof typeof roundedClasses;
83
- columns: {
84
- name: string;
85
- id: string;
86
- width?: string;
87
- }[];
88
- isBordered: boolean;
89
- hasShadow: boolean;
90
- items: Array<{
91
- id: string | number;
92
- [key: string]: unknown;
93
- }>;
94
- isSelectable: boolean;
95
- headerColor: string;
96
- isBodyColored: boolean;
97
- bodyColor: string;
98
- itemsSize: keyof typeof sizes;
99
- emptyStateTitle: string;
100
- emptyStateDescription: string;
101
- showEmptyAnimation: boolean;
102
- emptyAnimationData: object;
103
- emptyAnimationSize: number;
104
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
105
- declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
106
55
  declare const _default: typeof __VLS_export;
107
56
  export default _default;
108
- type __VLS_WithSlots<T, S> = T & {
109
- new (): {
110
- $slots: S;
111
- };
112
- };
57
+ type __VLS_PrettifyLocal<T> = (T extends any ? {
58
+ [K in keyof T]: T[K];
59
+ } : {
60
+ [K in keyof T as K]: T[K];
61
+ }) & {};
package/dist/runtime/components/Table.vue CHANGED
@@ -33,12 +33,13 @@
33
33
  <motion.tr
34
34
  v-for="item in items"
35
35
  :key="item.id"
36
+ :data-row-id="item.id"
36
37
  :while-hover="props.isSelectable ? { scale: 1.01 } : {}"
37
38
  :transition="{ type: 'spring', stiffness: 400, damping: 30 }"
38
39
  :class="
39
40
  props.isSelectable ? 'cursor-pointer hover:bg-gray-100 dark:hover:bg-[#1C2026]' : ''
40
41
  "
41
- @click="props.isSelectable && emit('row-click', item)"
42
+ @click="onRowClick"
42
43
  >
43
44
  <td
44
45
  v-for="column in columns"
@@ -50,9 +51,9 @@
50
51
  <slot
51
52
  :name="`cell-${column.id}`"
52
53
  :item="item"
53
- :value="item[column.id]"
54
+ :value="getCellValue(item, column.id)"
54
55
  >
55
- {{ item[column.id] }}
56
+ {{ getCellValue(item, column.id) }}
56
57
  </slot>
57
58
  </td>
58
59
  </motion.tr>
@@ -93,13 +94,14 @@
93
94
  <motion.div
94
95
  v-for="item in items"
95
96
  :key="item.id"
97
+ :data-row-id="item.id"
96
98
  :while-hover="props.isSelectable ? { y: -3 } : {}"
97
99
  :transition="{ type: 'spring', stiffness: 400, damping: 25 }"
98
100
  class="bg-white dark:bg-[#18181B] border border-gray-200 dark:border-white/10 rounded-lg p-4 shadow-sm"
99
101
  :class="
100
102
  props.isSelectable ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-white/5 hover:shadow-md' : ''
101
103
  "
102
- @click="props.isSelectable && emit('row-click', item)"
104
+ @click="onRowClick"
103
105
  >
104
106
  <slot
105
107
  name="mobile-card"
@@ -122,9 +124,9 @@
122
124
  <slot
123
125
  :name="`cell-${column.id}`"
124
126
  :item="item"
125
- :value="item[column.id]"
127
+ :value="getCellValue(item, column.id)"
126
128
  >
127
- {{ item[column.id] }}
129
+ {{ getCellValue(item, column.id) }}
128
130
  </slot>
129
131
  </div>
130
132
  </div>
@@ -239,6 +241,17 @@ const props = defineProps({
239
241
  emptyAnimationSize: { type: Number, required: false, default: 220 }
240
242
  });
241
243
  const emit = defineEmits(["row-click"]);
244
+ function getCellValue(item, key) {
245
+ return item[key];
246
+ }
247
+ function onRowClick(event) {
248
+ if (!props.isSelectable) return;
249
+ const el = event.currentTarget;
250
+ const id = el?.dataset.rowId;
251
+ if (id == null) return;
252
+ const item = props.items.find((i) => String(i.id) === id);
253
+ if (item) emit("row-click", item);
254
+ }
242
255
  </script>
243
256
 
244
257
  <style scoped>
package/dist/runtime/components/Table.vue.d.ts CHANGED
@@ -1,112 +1,61 @@
1
- declare const roundedClasses: {
2
- readonly none: "rounded-none";
3
- readonly xs: "rounded-xs";
4
- readonly sm: "rounded-sm";
5
- readonly md: "rounded-md";
6
- readonly lg: "rounded-lg";
7
- readonly xl: "rounded-xl";
8
- readonly '2xl': "rounded-2xl";
9
- readonly '3xl': "rounded-3xl";
10
- readonly full: "rounded-full";
11
- };
12
- declare const sizes: {
13
- readonly sm: "py-2";
14
- readonly md: "py-4";
15
- readonly lg: "py-6";
16
- };
17
- type __VLS_Props = {
18
- items?: Array<{
19
- id: string | number;
20
- [key: string]: unknown;
21
- }>;
22
- columns?: {
23
- name: string;
24
- id: string;
25
- width?: string;
26
- }[];
27
- rounded?: keyof typeof roundedClasses;
28
- isBordered?: boolean;
29
- isSelectable?: boolean;
30
- headerColor?: string;
31
- isBodyColored?: boolean;
32
- bodyColor?: string;
33
- itemsSize?: keyof typeof sizes;
34
- hasShadow?: boolean;
35
- emptyStateTitle?: string;
36
- emptyStateDescription?: string;
37
- showEmptyAnimation?: boolean;
38
- emptyAnimationData?: object;
39
- emptyAnimationSize?: number;
40
- };
41
- declare var __VLS_10: `cell-${string}`, __VLS_11: {
42
- item: {
43
- [key: string]: unknown;
44
- id: string | number;
45
- };
46
- value: unknown;
47
- }, __VLS_26: {
48
- item: {
49
- [key: string]: unknown;
50
- id: string | number;
1
+ declare const __VLS_export: <TItem extends {
2
+ id: string | number;
3
+ }>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
4
+ props: import("vue").PublicProps & __VLS_PrettifyLocal<{
5
+ items?: TItem[];
6
+ columns?: {
7
+ name: string;
8
+ id: string;
9
+ width?: string;
10
+ }[];
11
+ rounded?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
12
+ isBordered?: boolean;
13
+ isSelectable?: boolean;
14
+ headerColor?: string;
15
+ isBodyColored?: boolean;
16
+ bodyColor?: string;
17
+ itemsSize?: "sm" | "md" | "lg";
18
+ hasShadow?: boolean;
19
+ emptyStateTitle?: string;
20
+ emptyStateDescription?: string;
21
+ showEmptyAnimation?: boolean;
22
+ emptyAnimationData?: object;
23
+ emptyAnimationSize?: number;
24
+ } & {
25
+ "onRow-click"?: ((item: TItem) => any) | undefined;
26
+ }> & (typeof globalThis extends {
27
+ __VLS_PROPS_FALLBACK: infer P;
28
+ } ? P : {});
29
+ expose: (exposed: {}) => void;
30
+ attrs: any;
31
+ slots: {
32
+ [x: `cell-${string}`]: ((props: {
33
+ item: TItem;
34
+ value: unknown;
35
+ }) => any) | undefined;
36
+ } & {
37
+ [x: `cell-${string}`]: ((props: {
38
+ item: TItem;
39
+ value: unknown;
40
+ }) => any) | undefined;
41
+ } & {
42
+ 'mobile-card'?: (props: {
43
+ item: TItem;
44
+ columns: {
45
+ name: string;
46
+ id: string;
47
+ width?: string;
48
+ }[];
49
+ }) => any;
51
50
  };
52
- columns: {
53
- name: string;
54
- id: string;
55
- width?: string;
56
- }[];
57
- }, __VLS_29: `cell-${string}`, __VLS_30: {
58
- item: {
59
- [key: string]: unknown;
60
- id: string | number;
61
- };
62
- value: unknown;
63
- };
64
- type __VLS_Slots = {} & {
65
- [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
66
- } & {
67
- [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => any;
68
- } & {
69
- 'mobile-card'?: (props: typeof __VLS_26) => any;
51
+ emit: (evt: "row-click", item: TItem) => void;
52
+ }>) => import("vue").VNode & {
53
+ __ctx?: Awaited<typeof __VLS_setup>;
70
54
  };
71
- declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
72
- "row-click": (item: {
73
- [key: string]: unknown;
74
- id: string | number;
75
- }) => any;
76
- }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
77
- "onRow-click"?: ((item: {
78
- [key: string]: unknown;
79
- id: string | number;
80
- }) => any) | undefined;
81
- }>, {
82
- rounded: keyof typeof roundedClasses;
83
- columns: {
84
- name: string;
85
- id: string;
86
- width?: string;
87
- }[];
88
- isBordered: boolean;
89
- hasShadow: boolean;
90
- items: Array<{
91
- id: string | number;
92
- [key: string]: unknown;
93
- }>;
94
- isSelectable: boolean;
95
- headerColor: string;
96
- isBodyColored: boolean;
97
- bodyColor: string;
98
- itemsSize: keyof typeof sizes;
99
- emptyStateTitle: string;
100
- emptyStateDescription: string;
101
- showEmptyAnimation: boolean;
102
- emptyAnimationData: object;
103
- emptyAnimationSize: number;
104
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
105
- declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
106
55
  declare const _default: typeof __VLS_export;
107
56
  export default _default;
108
- type __VLS_WithSlots<T, S> = T & {
109
- new (): {
110
- $slots: S;
111
- };
112
- };
57
+ type __VLS_PrettifyLocal<T> = (T extends any ? {
58
+ [K in keyof T]: T[K];
59
+ } : {
60
+ [K in keyof T as K]: T[K];
61
+ }) & {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@smurfox/proxy-ui",
3
- "version": "0.4.2",
3
+ "version": "0.4.4",
4
4
  "description": "A UI component library built for Nuxt 4",
5
5
  "repository": {
6
6
  "type": "git",