zuii 1.4.18 → 1.4.19

package/dist/components/Tab/react/index.js

@@ -1,34 +1,34 @@
 import { jsx as t, jsxs as L } from "react/jsx-runtime";
 import i, { useState as R } from "react";
-import { TabContainer as N, TabContent as T, TabPane as g, Tabs as V, Tab as x, Nav as q } from "react-bootstrap";
+import { TabContainer as _, TabContent as N, TabPane as T, Tabs as V, Tab as g, Nav as q } from "react-bootstrap";
 import '../style/index.css';/* empty css                  */
-import { Group as _ } from "../../Group/react/index.js";
+import { Group as K } from "../../Group/react/index.js";
 import { Button as w } from "../../Button/react/index.js";
 const s = ({
   items: n = [],
-  children: P,
+  children: x,
   className: $ = "",
   vertical: d = !1,
-  variant: v = "",
-  border: S = !1,
-  color: b = "primary",
-  defaultActiveKey: j,
-  activeKey: m,
+  variant: m = "",
+  border: P = !1,
+  color: v = "primary",
+  defaultActiveKey: S,
+  activeKey: b,
   onSelect: h,
-  contentClassName: p = "tabs__content",
-  ...f
+  contentClassName: j = "tabs__content",
+  ...p
 }) => {
-  const [A, B] = R(j || (n.length > 0 ? n[0].eventKey : void 0)), o = m !== void 0 ? m : A, c = (e, r) => {
+  const [A, B] = R(S || (n.length > 0 ? n[0].eventKey : void 0)), o = b !== void 0 ? b : A, c = (e, r) => {
     e && B(e), h && h(e, r);
-  }, a = "tabs", C = d ? `${a}--vertical` : "", u = v ? `${a}--${v}` : "", E = S ? `${a}--border` : "", y = `${a}--${b}`, K = `${a}__item btn btn-${b}`;
+  }, a = "tabs", C = d ? `${a}--vertical` : "", f = m ? `${a}--${m}` : "", E = P ? `${a}--border` : "", u = `${a}--${v}`, y = `${a}__item btn btn-${v}`;
   return n.length > 0 && d ? /* @__PURE__ */ t(
-    N,
+    _,
     {
-      ...f,
+      ...p,
       activeKey: o,
       onSelect: c,
-      children: /* @__PURE__ */ L(_, { className: `${a} ${C} ${u} ${y} ${$}`.trim(), children: [
-        /* @__PURE__ */ t(_, { vertical: !0, className: "tabs__nav", children: n.map((e, r) => /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+      children: /* @__PURE__ */ L(K, { className: `${a} ${C} ${f} ${u} ${$}`.trim(), children: [
+        /* @__PURE__ */ t(K, { vertical: !0, className: "tabs__nav", children: n.map((e, r) => /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
           w,
           {
             variant: "transparent",
@@ -37,41 +37,40 @@ const s = ({
             children: e.header
           }
         ) }, r)) }),
-        /* @__PURE__ */ t(T, { className: p, children: n.map((e, r) => /* @__PURE__ */ t(g, { eventKey: e.eventKey, children: e.body }, r)) })
+        /* @__PURE__ */ t(N, { className: j, children: n.map((e, r) => /* @__PURE__ */ t(T, { eventKey: e.eventKey, children: e.body }, r)) })
       ] })
     }
-  ) : /* @__PURE__ */ t("div", { className: `${a} ${C} ${u} ${E} ${y} ${$}`.trim(), children: /* @__PURE__ */ t(
+  ) : /* @__PURE__ */ t("div", { className: `${a} ${C} ${f} ${E} ${u} ${$}`.trim(), children: /* @__PURE__ */ t(
     V,
     {
       activeKey: o,
       onSelect: c,
-      contentClassName: p,
-      ...f,
+      ...p,
       children: n.length > 0 ? n.map((e, r) => {
         const { header: l, body: G, ...I } = e;
         return /* @__PURE__ */ t(
-          x,
+          g,
           {
             title: l,
             ...I,
-            tabClassName: K,
+            tabClassName: y,
             children: /* @__PURE__ */ t("div", { className: `${a}__content`, children: G })
           },
           r
         );
       }) : (
         // Mode composé : injecter tabClassName sur chaque Tabs.Item enfant
-        i.Children.map(P, (e) => i.isValidElement(e) ? i.cloneElement(e, {
-          tabClassName: `${K} ${e.props.tabClassName || ""}`.trim()
+        i.Children.map(x, (e) => i.isValidElement(e) ? i.cloneElement(e, {
+          tabClassName: `${y} ${e.props.tabClassName || ""}`.trim()
         }) : e)
       )
     }
   ) });
 };
-s.Item = x;
-s.Container = N;
-s.Content = T;
-s.Pane = g;
+s.Item = g;
+s.Container = _;
+s.Content = N;
+s.Pane = T;
 s.Nav = q;
 export {
   s as Tabs

package/dist/components/Table/js/table.d.ts

@@ -41,6 +41,10 @@ export interface TableOptions {
      * Active la sélection de lignes.
      */
     selectable?: boolean;
+    /**
+     * Fonction pour déterminer si une ligne est sélectionnable.
+     */
+    isRowSelectable?: (node: any) => boolean;
     /**
      * Active la pagination.
      */

package/dist/components/Table/react/index.d.ts

@@ -10,5 +10,5 @@ interface Props extends TableOptions {
  * @param {Props} props - Les propriétés du composant.
  * @returns {JSX.Element} Le rendu du composant.
  */
-export declare const Table: ({ rowData, columnDefs, theme, className, selectable, pagination, paginationPageSize, pageSizeOptions, resizable, locale, selectionColumnDef, rowClassRules, rowModelType, datasource, cacheBlockSize, maxBlocksInCache, onGridReady, sortable, icons, emptyRowsHeight, rowHeight, getRowHeight }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ rowData, columnDefs, theme, className, selectable, pagination, paginationPageSize, pageSizeOptions, resizable, locale, selectionColumnDef, rowClassRules, rowModelType, datasource, cacheBlockSize, maxBlocksInCache, onGridReady, sortable, icons, emptyRowsHeight, rowHeight, getRowHeight, isRowSelectable }: Props) => import("react/jsx-runtime").JSX.Element;
 export type { RowData, ColumnDef, TableOptions };

package/dist/components/Table/react/index.js

@@ -1,12 +1,12 @@
-import { jsxs as K, jsx as r } from "react/jsx-runtime";
-import { useRef as O, useState as z, useMemo as x, useCallback as n, useEffect as U } from "react";
-import { AgGridReact as J } from "ag-grid-react";
-import { ModuleRegistry as Q, AllCommunityModule as V } from "ag-grid-community";
-import { processColumnDefs as X, getLocaleText as Y } from "../js/table.js";
-import { TablePagination as Z } from "./TablePagination.js";
+import { jsxs as O, jsx as r } from "react/jsx-runtime";
+import { useRef as U, useState as z, useMemo as x, useCallback as n, useEffect as J } from "react";
+import { AgGridReact as Q } from "ag-grid-react";
+import { ModuleRegistry as V, AllCommunityModule as X } from "ag-grid-community";
+import { processColumnDefs as Y, getLocaleText as Z } from "../js/table.js";
+import { TablePagination as v } from "./TablePagination.js";
 import '../style/index.css';/* empty css                  */
-Q.registerModules([V]);
-const le = ({
+V.registerModules([X]);
+const re = ({
   rowData: c,
   columnDefs: g = [],
   theme: G = "ag-theme-alpine",
@@ -28,54 +28,55 @@ const le = ({
   icons: S,
   emptyRowsHeight: h = "2rem",
   rowHeight: L = 25,
-  getRowHeight: W
+  getRowHeight: W,
+  isRowSelectable: j
 }) => {
-  const j = `datagrid ${G} ${T}`.trim(), l = O(null), [a, E] = z(null), [t, N] = z({
+  const E = `datagrid ${G} ${T}`.trim(), l = U(null), [a, N] = z(null), [t, _] = z({
     currentPage: 0,
     totalPages: 0,
     pageSize: M,
     totalRows: 0
-  }), _ = x(() => X(g), [g]), C = x(() => Y(f), [f]), q = n((e) => {
-    E(e.api), s && s(e);
-  }, [s]), B = n((e) => {
+  }), q = x(() => Y(g), [g]), C = x(() => Z(f), [f]), B = n((e) => {
+    N(e.api), s && s(e);
+  }, [s]), F = n((e) => {
     if (e.api) {
       const i = e.api.paginationGetCurrentPage(), w = e.api.paginationGetTotalPages(), R = e.api.paginationGetPageSize(), b = e.api.paginationGetRowCount();
-      N((o) => o.currentPage === i && o.totalPages === w && o.pageSize === R && o.totalRows === b ? o : {
+      _((o) => o.currentPage === i && o.totalPages === w && o.pageSize === R && o.totalRows === b ? o : {
         currentPage: i,
         totalPages: w,
         pageSize: R,
         totalRows: b
       });
     }
-  }, []), F = n((e) => {
+  }, []), I = n((e) => {
     a?.paginationGoToPage(e);
-  }, [a]), I = n((e) => {
+  }, [a]), K = n((e) => {
     a?.setGridOption("paginationPageSize", e);
   }, [a]);
-  return U(() => {
+  return J(() => {
     if (!l.current) return;
     const e = l.current.querySelector(".ag-floating-bottom");
     if (e instanceof HTMLElement) {
       const i = t.totalRows > 0;
       e.style.minHeight = i ? "0" : `${h}`;
     }
-  }, [h, a, c, d, t.totalRows]), /* @__PURE__ */ K("div", { className: j, style: { width: "100%" }, ref: l, children: [
+  }, [h, a, c, d, t.totalRows]), /* @__PURE__ */ O("div", { className: E, style: { width: "100%" }, ref: l, children: [
     /* @__PURE__ */ r("div", { className: "datagrid__container", children: /* @__PURE__ */ r(
-      J,
+      Q,
       {
         theme: "legacy",
         rowData: m === "infinite" ? void 0 : c || [],
-        columnDefs: _,
+        columnDefs: q,
         domLayout: "autoHeight",
         pagination: p,
         paginationPageSize: t.pageSize,
         suppressPaginationPanel: !0,
-        onPaginationChanged: B,
+        onPaginationChanged: F,
         rowModelType: m,
         datasource: d,
         cacheBlockSize: A,
         maxBlocksInCache: $,
-        onGridReady: q,
+        onGridReady: B,
         localeText: C,
         rowClassRules: k,
         icons: S || {
@@ -86,7 +87,8 @@ const le = ({
           headerCheckbox: !0,
           checkboxes: !0,
           enableSelectionWithoutKeys: !0,
-          enableClickSelection: !1
+          enableClickSelection: !1,
+          isRowSelectable: j
         } : void 0,
         selectionColumnDef: u ? {
           pinned: "left",
@@ -113,20 +115,20 @@ const le = ({
       }
     ) }),
     p && /* @__PURE__ */ r(
-      Z,
+      v,
       {
         currentPage: t.currentPage,
         totalPages: t.totalPages,
         pageSize: t.pageSize,
         totalRows: t.totalRows,
         pageSizeOptions: y,
-        onPageChange: F,
-        onPageSizeChange: I,
+        onPageChange: I,
+        onPageSizeChange: K,
         localeText: C
       }
     )
   ] });
 };
 export {
-  le as Table
+  re as Table
 };

package/dist/templates/Forms/Forms-elements.tsx

@@ -92,7 +92,11 @@ export const FormsElements = () => {
 				]} />
 				<Form.Date />
 				<Form.Color />
-
+				<Form.Group className="mb-3">
+					<Form.Label>Label</Form.Label>
+					<Form.Control as="textarea" rows={3} placeholder="Placeholder" />
+				</Form.Group>
+				<Form.Tel name='tel-test' nameFormat='tel-test-format' />
 				<Form.Control type="submit" value="Submit" />
 			</form>
 

package/dist/templates/Forms/Forms.tsx

@@ -150,10 +150,10 @@ export const Forms = () => {
 					maxNumberOfFiles={5}
 					maxFileSize={5 * 1024 * 1024} // 5 MB
 					allowedFileTypes={['image/*', 'application/pdf']}
-					onComplete={(result) => {
+					onComplete={(result: any) => {
 						console.log('Téléchargement terminé:', result);
 					}}
-					onError={(error) => {
+					onError={(error: any) => {
 						console.error('Erreur de téléchargement:', error);
 					}}
 				/>

package/dist/templates/Groups/Groups.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Template de démonstration pour le composant Group.
+ * @returns {JSX.Element} La page de démo des groupes.
+ */
+export declare const Groups: () => import("react/jsx-runtime").JSX.Element;

package/dist/templates/Groups/Groups.tsx

@@ -0,0 +1,85 @@
+import { Group } from '../../index';
+import { Button } from '../../index';
+
+const BOX_STYLE: React.CSSProperties = {
+	width: 200,
+	height: 120,
+	background: 'var(--color-neutral-100, #f1f5f9)',
+	border: '1px dashed var(--color-neutral-300, #cbd5e1)',
+	borderRadius: 8,
+};
+
+/**
+ * Template de démonstration pour le composant Group.
+ * @returns {JSX.Element} La page de démo des groupes.
+ */
+export const Groups = () => {
+	const positions = [
+		'top-left', 'top-center', 'top-right',
+		'center-left', 'center', 'center-right',
+		'bottom-left', 'bottom-center', 'bottom-right',
+	] as const;
+
+
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
+
+			{/* Direction */}
+			<section>
+				<h3>Direction</h3>
+				<Group gap="lg">
+					<div>
+						<p style={{ marginBottom: '0.5rem', fontWeight: 600 }}>Horizontal (défaut)</p>
+						<Group>
+							<Button>•</Button>
+							<Button>•</Button>
+							<Button>•</Button>
+						</Group>
+					</div>
+					<div>
+						<p style={{ marginBottom: '0.5rem', fontWeight: 600 }}>Vertical</p>
+						<Group vertical>
+							<Button>•</Button>
+							<Button>•</Button>
+							<Button>•</Button>
+						</Group>
+					</div>
+				</Group>
+			</section>
+
+
+			{/* Align (axe principal) */}
+			<section>
+				<h3>Alignement (align)</h3>
+				<Group vertical gap="md">
+					{(['start', 'center', 'end', 'between'] as const).map((a) => (
+						<div key={a} style={{ width: '100%' }}>
+							<p style={{ marginBottom: '0.25rem', fontSize: '0.8rem', opacity: 0.6 }}>align="{a}"</p>
+							<Group align={a} style={{ width: '100%', border: '1px dashed var(--color-neutral-300, #cbd5e1)', padding: '0.5rem', borderRadius: 6 }}>
+								<Button size="sm">•</Button>
+								<Button size="sm">•</Button>
+								<Button size="sm">•</Button>
+							</Group>
+						</div>
+					))}
+				</Group>
+			</section>
+
+			{/* Position */}
+			<section>
+				<h3>Position (flexbox)</h3>
+				<Group gap="md" style={{ flexWrap: 'wrap' }}>
+					{positions.map((pos) => (
+						<div key={pos} style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+							<p style={{ fontSize: '0.75rem', opacity: 0.6, textAlign: 'center' }}>{pos}</p>
+							<Group align={pos} style={BOX_STYLE}>
+								<Button size="sm">•</Button>
+							</Group>
+						</div>
+					))}
+				</Group>
+			</section>
+
+		</div>
+	);
+};

package/dist/templates/Sliders/Sliders.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Slider, SliderItem, Card, Button } from '../../index';
 
 /**

package/dist/templates/Tables/Tables.tsx

@@ -92,6 +92,15 @@ export const Tables = () => {
 				<h5 className='mt-5'>Sélection Multi-lignes</h5>
 				<Table rowData={dataSimple} columnDefs={columnsSimple} selectable={true} />
 
+				<h5 className='mt-5'>Sélection Désactivée (isRowSelectable)</h5>
+				<p className="text-muted mb-4">Exemple avec des lignes spécifiques non sélectionnables (ici, seuls les ID impairs sont sélectionnables).</p>
+				<Table 
+					rowData={dataSimple} 
+					columnDefs={columnsSimple} 
+					selectable={true} 
+					isRowSelectable={(node) => node.data ? node.data.id % 2 !== 0 : false} 
+				/>
+
 				<h5 className='mt-5'>Avancé : Actions, Pagination et Redimensionnement</h5>
 				<Table rowData={dataAdvanced} columnDefs={columnsAdvanced} selectable={true} resizable={true} pagination />
 

package/dist/templates/index.d.ts

@@ -27,3 +27,4 @@ export * from './Loaders/Loaders';
 export * from './Grids/Grids';
 export * from './Sliders/Sliders';
 export * from './Cards/Cards';
+export * from './Groups/Groups';

package/dist/templates/index.ts

@@ -27,3 +27,4 @@ export * from './Loaders/Loaders';
 export * from './Grids/Grids';
 export * from './Sliders/Sliders';
 export * from './Cards/Cards';
+export * from './Groups/Groups';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "zuii",
-	"version": "1.4.18",
+	"version": "1.4.19",
 	"description": "Bibliothèque de composants UI légère, intuitive et modulaire pour les interfaces web modernes.",
 	"type": "module",
 	"repository": {