v-uixy 1.5.0 → 1.7.0

package/templates/components/Table/Table.types.ts

@@ -0,0 +1,98 @@
+export type UixyTableAlign = "left" | "center" | "right";
+export type UixyTableDensity = "compact" | "comfortable";
+export type UixyTableSortDirection = "asc" | "desc";
+
+export type UixyTableColumnKey<TRow> =
+  | Extract<keyof TRow, string>
+  | (string & {});
+
+export interface UixyTableColumn<TRow = Record<string, unknown>> {
+  key: UixyTableColumnKey<TRow>;
+  header: string;
+  accessor?: (row: TRow) => unknown;
+  sortable?: boolean;
+  align?: UixyTableAlign;
+  width?: string;
+  minWidth?: string;
+}
+
+export interface UixyTableSort<TRow = Record<string, unknown>> {
+  key: UixyTableColumnKey<TRow>;
+  direction: UixyTableSortDirection;
+}
+
+export interface UixyTablePagination {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface UixyTableFilter {
+  key: string;
+  type: string;
+  label?: string;
+  active?: boolean;
+  [key: string]: unknown;
+}
+
+export type UixyTableRowKey<TRow> =
+  | UixyTableColumnKey<TRow>
+  | ((row: TRow) => string | number);
+
+export interface UixyTableProps<TRow = Record<string, unknown>> {
+  columns: UixyTableColumn<TRow>[];
+  rows: TRow[];
+  rowKey?: UixyTableRowKey<TRow>;
+  sort?: UixyTableSort<TRow> | null;
+  pagination?: UixyTablePagination;
+  filters?: UixyTableFilter[];
+  selectable?: boolean;
+  selectedRowKeys?: Array<string | number>;
+  summary?: Partial<Record<UixyTableColumnKey<TRow>, unknown>>;
+  loading?: boolean;
+  density?: UixyTableDensity;
+  stickyHeader?: boolean;
+  maxHeight?: string;
+  caption?: string;
+  emptyText?: string;
+}
+
+export interface UixyTableEmits<TRow = Record<string, unknown>> {
+  (event: "sortChange", sort: UixyTableSort<TRow> | null): void;
+  (event: "pageChange", page: number): void;
+  (event: "selectionChange", keys: Array<string | number>): void;
+}
+
+export interface UixyTableCellSlotProps<TRow = Record<string, unknown>> {
+  row: TRow;
+  value: unknown;
+  column: UixyTableColumn<TRow>;
+  index: number;
+}
+
+export interface UixyTableSummarySlotProps<TRow = Record<string, unknown>> {
+  column: UixyTableColumn<TRow>;
+  value: unknown;
+}
+
+export interface UixyTableFilterSlotProps<TRow = Record<string, unknown>> {
+  column: UixyTableColumn<TRow>;
+  filter?: UixyTableFilter;
+  close: () => void;
+}
+
+export interface UixyTablePaginationSlotProps {
+  pagination: UixyTablePagination;
+  pageCount: number;
+  goToPage: (page: number) => void;
+}
+
+export interface UixyTableSlots<TRow = Record<string, unknown>> {
+  empty?: (props: Record<string, never>) => unknown;
+  pagination?: (props: UixyTablePaginationSlotProps) => unknown;
+  [key: `cell-${string}`]: (props: UixyTableCellSlotProps<TRow>) => unknown;
+  [key: `summary-${string}`]: (
+    props: UixyTableSummarySlotProps<TRow>,
+  ) => unknown;
+  [key: `filter-${string}`]: (props: UixyTableFilterSlotProps<TRow>) => unknown;
+}

package/templates/components/Table/index.ts

@@ -0,0 +1,39 @@
+import UixyTable from "./Table.component.vue";
+import {
+  type UixyTableProps,
+  type UixyTableEmits,
+  type UixyTableSlots,
+  type UixyTableColumn,
+  type UixyTableColumnKey,
+  type UixyTableSort,
+  type UixyTableSortDirection,
+  type UixyTablePagination,
+  type UixyTableFilter,
+  type UixyTableRowKey,
+  type UixyTableAlign,
+  type UixyTableDensity,
+  type UixyTableCellSlotProps,
+  type UixyTableSummarySlotProps,
+  type UixyTableFilterSlotProps,
+  type UixyTablePaginationSlotProps,
+} from "./Table.types";
+
+export {
+  UixyTable,
+  type UixyTableProps,
+  type UixyTableEmits,
+  type UixyTableSlots,
+  type UixyTableColumn,
+  type UixyTableColumnKey,
+  type UixyTableSort,
+  type UixyTableSortDirection,
+  type UixyTablePagination,
+  type UixyTableFilter,
+  type UixyTableRowKey,
+  type UixyTableAlign,
+  type UixyTableDensity,
+  type UixyTableCellSlotProps,
+  type UixyTableSummarySlotProps,
+  type UixyTableFilterSlotProps,
+  type UixyTablePaginationSlotProps,
+};

package/templates/components/Textarea/Textarea.component.vue

@@ -21,23 +21,29 @@
         {{ props.label }}
       </label>
     </div>
-    <div v-if="!props.hideHelper" class="h-4">
-      <animate-presence mode="wait" :initial="false">
-        <motion.div
-          :initial="{ opacity: 0, y: '-4px' }"
-          :animate="{ opacity: 1, y: 0 }"
-          :exit="{ opacity: 0, y: '-4px' }"
-          :transition="{ duration: 0.125 }"
-          :key="status"
-        >
-          <p
+    <animate-presence mode="wait" :initial="false">
+      <motion.div
+        v-if="!!text"
+        class="overflow-hidden"
+        :initial="{ height: 0 }"
+        :animate="{ height: 'auto' }"
+        :exit="{ height: 0 }"
+        :transition="{ duration: 0.1, ease: 'easeInOut' }"
+      >
+        <animate-presence mode="wait" :initial="false">
+          <motion.p
+            :key="status + text"
             :class="helperStyles({ status, align: props.alignText ?? 'left' })"
+            :initial="{ opacity: 0, y: -4 }"
+            :animate="{ opacity: 1, y: 0 }"
+            :exit="{ opacity: 0, y: 4 }"
+            :transition="{ duration: 0.12, ease: 'easeInOut', delay: 0.1 }"
           >
             {{ text }}
-          </p>
-        </motion.div>
-      </animate-presence>
-    </div>
+          </motion.p>
+        </animate-presence>
+      </motion.div>
+    </animate-presence>
   </div>
 </template>
 

package/templates/components/Textarea/Textarea.types.ts

@@ -10,5 +10,4 @@ export interface UixyTextareaProps {
   noResize?: boolean;
   rows?: number;
   maxLength?: number;
-  hideHelper?: boolean;
 }

package/templates/components.json

@@ -198,6 +198,12 @@
       "packages": ["motion-v"],
       "composables": []
     },
+    {
+      "name": "Table",
+      "related-components": ["Card", "Checkbox", "Icon", "Skeleton", "Popover"],
+      "packages": [],
+      "composables": []
+    },
     {
       "name": "TableOfContents",
       "related-components": [],

package/templates/composables/usePosition.ts

@@ -6,6 +6,8 @@ interface UsePositionOptions {
   direction?: Direction;
 }
 
+const GAP = 6;
+
 function hasFixedParent(el: HTMLElement | null): boolean {
   while (el) {
     const style = window.getComputedStyle(el);
@@ -46,8 +48,8 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
 
     const spaceBelow = winH - targetRect.bottom;
     const spaceAbove = targetRect.top;
-    const fitsBelow = spaceBelow >= tooltipRect.height + 6;
-    const fitsAbove = spaceAbove >= tooltipRect.height + 6;
+    const fitsBelow = spaceBelow >= tooltipRect.height + GAP;
+    const fitsAbove = spaceAbove >= tooltipRect.height + GAP;
 
     const effectiveDirection =
       direction === "top"
@@ -60,8 +62,8 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
 
     top =
       effectiveDirection === "top"
-        ? targetRect.top - tooltipRect.height - 6 + scrollY
-        : targetRect.bottom + 6 + scrollY;
+        ? targetRect.top - tooltipRect.height - GAP + scrollY
+        : targetRect.bottom + GAP + scrollY;
 
     let left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
     const newStyles: Record<string, string | number> = {