jb-grid 0.2.4 → 0.3.1

package/README.md

@@ -1,6 +1,6 @@
 # jb-grid
 
-> currently this component only available in react in full mode and web-component is only support parts of the data grid like pagination.
+> currently this component only available in react in full mode and web-component is only support parts of the data grid like pagination adn Row, Cell.
 
 ## using with JS frameworks
 
@@ -21,5 +21,50 @@ document.querySelector(`jb-pagination`).pageIndex = 5;
 document.querySelector(`jb-pagination`).max = 10;
 //min page number default is 1
 document.querySelector(`jb-pagination`).min = 0;
+```
+
+## Row & Cells
+`jb-row` is a row web-component that imply a grid template base on given config to below cells. it also accept expand row that you can open and close it.
+
+here is a code overview:
+```html
+<jb-row>
+  <jb-cell name="id">123<jb-cell>
+  <jb-cell name="name">Joe<jb-cell>
+  <jb-cell name="age">10<jb-cell>
+  <jb-cell name="operation"><jb-expand-toggle><button>toggle</button></jb-expand-toggle><jb-cell>
+  <div slot="expand">expand window content</div>
+</jb-row>
+```
+### Set Column Size
 
+to set column size of the row you can pass a config that tell each column size. remember size is optional(default is `1fr`) but name is mandatory.
+```js
+document.querySelector(""jb-row).rowTemplate = [
+  {name:"id",size:"1fr"},
+  {name:"name",size:"400px"},
+  {name:"age",size:200},
+  {name:"operation",size:20%},
+]
+```
+
+### expand row
+
+each row can contain a expand panel that open by user choice to show more data about that row.
+you must set `slot="expand"`in a div to make it as a expand div and set `isOpen` of row to open and close it or use `jb-expand-toggle` to do it automatically for you.
+
+```html
+<jb-row>
+  <jb-cell name="id">123<jb-cell>
+  <jb-cell name="operation"><jb-expand-toggle><button>toggle</button></jb-expand-toggle><jb-cell>
+  <div slot="expand">expand window content</div>
+</jb-row>
 ```
+> `<jb-expand-toggle>`has a arrow icon designed to be put in first cell by default but you can customize it by passing children to it as you wish
+if you want to close and open by js you can use js mode:
+```js
+//to open it
+document.querySelector(`jb-row`).isOpen = true;
+// to close it
+document.querySelector(`jb-row`).isOpen = false;
+```

package/package.json

@@ -10,10 +10,11 @@
     "jb",
     "jb-grid",
     "table",
+    "pagination",
     "web component",
     "react component"
   ],
-  "version": "0.2.4",
+  "version": "0.3.1",
   "bugs": "https://github.com/javadbat/jb-grid/issues",
   "license": "MIT",
   "files": [
@@ -31,9 +32,9 @@
 		"url": "git@github.com:javadbat/jb-grid.git"
   },
   "dependencies": {
-    "jb-core":">=0.24.0",
+    "jb-core":">=0.27.2",
     "mobx":">=6.0.0",
     "mobx-react":">=7.0.0",
-    "jb-searchbar":">=2.6.0"
+    "jb-searchbar":">=3.0.2"
   }
 }

package/react/dist/Components/Cell.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
-type CellProps = {
-    children?: React.ReactNode | React.ReactNode[];
+import React, { type ForwardedRef } from 'react';
+import type { JBCellAttributes } from './module-declaration.js';
+import type { JBCellWebComponent } from 'jb-grid';
+type RowProps = JBCellAttributes & {
+    ref?: ForwardedRef<JBCellWebComponent | null>;
+    name: string;
     label?: string;
-    className?: string;
-    flex?: boolean;
 };
-declare function Cell(props: CellProps): React.JSX.Element;
-export { Cell };
+export declare function JBCell(props: RowProps): React.JSX.Element;
+export {};

package/react/dist/Components/ExpandRow.d.ts

@@ -1,6 +1,4 @@
-import React, { type PropsWithChildren } from 'react';
-declare function ExpandRow(props: Props): React.JSX.Element;
-type Props = PropsWithChildren<{
-    show: boolean;
-}>;
-export { ExpandRow };
+import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
+export declare function ExpandRow(props: Props): React.JSX.Element;
+type Props = PropsWithChildren<React.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export {};

package/react/dist/Components/ExpandToggle.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { JBExpandToggleAttributes } from './module-declaration.js';
+type ToggleProps = JBExpandToggleAttributes;
+export declare function JBExpandToggle(props: ToggleProps): React.JSX.Element;
+export {};

package/react/dist/Components/Pagination.d.ts

@@ -1,22 +1,8 @@
-import React, { type DetailedHTMLProps, type FormEventHandler, type HTMLAttributes } from 'react';
+import React from 'react';
 import 'jb-grid';
 import type { JBPaginationWebComponent } from 'jb-grid';
 import type { JBElementStandardProps } from 'jb-core/react';
+import type { JBPaginationDirectAttributeProps } from './types';
+import './module-declaration.js';
 export declare function JBPagination(props: Props): React.JSX.Element;
-type JBPaginationAttributes = DetailedHTMLProps<HTMLAttributes<JBPaginationWebComponent>, JBPaginationWebComponent> & DirectAttributeProps;
-declare module "react" {
-    namespace JSX {
-        interface IntrinsicElements {
-            'jb-pagination': JBPaginationAttributes;
-        }
-    }
-}
-type DirectAttributeProps = {
-    pageIndex?: number;
-    max?: number;
-    min?: number;
-    onChange?: FormEventHandler<JBPaginationWebComponent>;
-    showPersianNumber?: boolean;
-};
-export type Props = JBElementStandardProps<JBPaginationWebComponent, keyof DirectAttributeProps> & DirectAttributeProps;
-export {};
+export type Props = JBElementStandardProps<JBPaginationWebComponent, keyof JBPaginationDirectAttributeProps> & JBPaginationDirectAttributeProps;

package/react/dist/Components/Row.d.ts

@@ -1,4 +1,10 @@
-import React from 'react';
-type RowProps = Omit<React.ComponentPropsWithoutRef<'div'>, "style">;
-declare function Row(props: RowProps): React.JSX.Element;
-export { Row };
+import React, { type ForwardedRef } from 'react';
+import type { JBRowAttributes } from './module-declaration.js';
+import type { JBCellWebComponent, RowTemplate } from 'jb-grid';
+type RowProps = JBRowAttributes & {
+    ref?: ForwardedRef<JBCellWebComponent | null>;
+    rowTemplate: RowTemplate;
+    isOpen?: boolean;
+};
+export declare function JBRow(props: RowProps): React.JSX.Element;
+export {};

package/react/dist/Components/module-declaration.d.ts

@@ -0,0 +1,19 @@
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+import type { JBPaginationWebComponent } from "jb-grid";
+import type { JBPaginationDirectAttributeProps } from "./types";
+import type { JBCellWebComponent, JBRowWebComponent, JBExpandToggleWebComponent } from 'jb-grid';
+type JBPaginationAttributes = DetailedHTMLProps<HTMLAttributes<JBPaginationWebComponent>, JBPaginationWebComponent> & JBPaginationDirectAttributeProps;
+export type JBRowAttributes = DetailedHTMLProps<HTMLAttributes<JBRowWebComponent>, JBRowWebComponent>;
+export type JBCellAttributes = DetailedHTMLProps<HTMLAttributes<JBCellWebComponent>, JBCellWebComponent>;
+export type JBExpandToggleAttributes = DetailedHTMLProps<HTMLAttributes<JBExpandToggleWebComponent>, JBExpandToggleWebComponent>;
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-pagination': JBPaginationAttributes;
+            'jb-row': JBRowAttributes;
+            'jb-cell': JBCellAttributes;
+            'jb-expand-toggle': JBExpandToggleAttributes;
+        }
+    }
+}
+export {};

package/react/dist/Components/types.d.ts

@@ -0,0 +1,9 @@
+import type { JBPaginationWebComponent } from "jb-grid";
+import type { FormEventHandler } from "react";
+export type JBPaginationDirectAttributeProps = {
+    pageIndex?: number;
+    max?: number;
+    min?: number;
+    onChange?: FormEventHandler<JBPaginationWebComponent>;
+    showPersianNumber?: boolean;
+};