ar-design 0.2.32 → 0.2.34

package/dist/assets/css/components/data-display/table/styles.css

@@ -157,4 +157,24 @@
   text-wrap: nowrap;
 }
 
+.ar-table > .content > table > tbody > tr > td > span.subitem-open-button {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  border: solid 2px transparent;
+  border-top-color: var(--primary);
+  border-right-color: var(--primary);
+  transform: rotate(45deg);
+  cursor: pointer;
+  transition: transform 100ms ease-in-out;
+}
+.ar-table > .content > table > tbody > tr > td > span.subitem-open-button.opened {
+  transform: rotate(135deg);
+}
+.ar-table > .content > table > tbody > tr > td > span.subitem-open-button.passive {
+  border-top-color: var(--gray-300);
+  border-right-color: var(--gray-300);
+  cursor: no-drop;
+}
+
 @import url("./scroll.css");

package/dist/assets/css/components/form/switch/core/border.css

@@ -1,88 +1,88 @@
 /* #region Border Color -> PRIMARY */
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary {
   box-shadow: 0 0 0 2.5px rgba(var(--primary-rgb), .1);
 }
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary > .handle {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary > .handle {
   box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .5);
 }
 /* #endregion */
 /* Border Color -> PRIMARY */
 
 /* #region Border Color -> PRIMARY-LIGHT */
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary-light {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary-light {
   box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), .1);
 }
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary-light > .handle {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary-light > .handle {
   box-shadow: 0 0 0 2px rgba(var(--primary-light-rgb), .5);
 }
 /* #endregion */
 /* Border Color -> PRIMARY-LIGHT */
 
 /* #region Border Color -> SECONDARY */
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.secondary {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.secondary {
   box-shadow: 0 0 0 2.5px rgba(var(--secondary-rgb), .1);
 }
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.secondary > .handle {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.secondary > .handle {
   box-shadow: 0 0 0 2px rgba(var(--secondary-rgb), .5);
 }
 /* #endregion */
 /* Border Color -> SECONDARY */
 
 /* #region Border Color -> SUCCESS */
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.success {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.success {
   box-shadow: 0 0 0 2.5px rgba(var(--success-rgb), .1);
 }
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.success > .handle {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.success > .handle {
   box-shadow: 0 0 0 2px rgba(var(--success-rgb), .5);
 }
 /* #endregion */
 /* Border Color -> SUCCESS */
 
 /* #region Border Color -> WARNING */
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.warning {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.warning {
   box-shadow: 0 0 0 2.5px rgba(var(--warning-rgb), .1);
 }
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.warning > .handle {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.warning > .handle {
   box-shadow: 0 0 0 2px rgba(var(--warning-rgb), .5);
 }
 /* #endregion */
 /* Border Color -> WARNING */
 
 /* #region Border Color -> DANGER */
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.danger {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.danger {
   box-shadow: 0 0 0 2.5px rgba(var(--danger-rgb), .1);
 }
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.danger > .handle {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.danger > .handle {
   box-shadow: 0 0 0 2px rgba(var(--danger-rgb), .5);
 }
 /* #endregion */
 /* Border Color -> DANGER */
 
 /* #region Border Color -> INFORMATION */
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.information {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.information {
   box-shadow: 0 0 0 2.5px rgba(var(--information-rgb), .1);
 }
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.information > .handle {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.information > .handle {
   box-shadow: 0 0 0 2px rgba(var(--information-rgb), .5);
 }
 /* #endregion */
 /* Border Color -> INFORMATION */
 
 /* #region Border Color -> DARK */
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.dark {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.dark {
   box-shadow: 0 0 0 2.5px rgba(var(--dark-rgb), .1);
 }
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.dark > .handle {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.dark > .handle {
   box-shadow: 0 0 0 2px rgba(var(--dark-rgb), .5);
 }
 /* #endregion */
 /* Border Color -> DARK */
 
 /* #region Border Color -> LIGHT */
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.light {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.light {
   box-shadow: 0 0 0 2.5px rgba(var(--light-rgb), .1);
 }
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.light > .handle {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.light > .handle {
   box-shadow: 0 0 0 2px rgba(var(--light-rgb), .5);
 }
 /* #endregion */

package/dist/assets/css/components/form/switch/styles.css

@@ -14,7 +14,7 @@
   /* width: 100%; */
   user-select: none;
 }
-.ar-switch-wrapper > label > :is(input[type="checkbox"]) {
+.ar-switch-wrapper > label > input[type="checkbox"] {
   display: none;
 }
 
@@ -26,7 +26,7 @@
   transition: box-shadow 250ms ease-in-out;
 }
 
-.ar-switch-wrapper > label > :is(input[type="checkbox"]) + .ar-switch > .handle {
+.ar-switch-wrapper > label > input[type="checkbox"] + .ar-switch > .handle {
   position: absolute;
   top: 50%;
   left: 0.15rem;
@@ -38,7 +38,7 @@
   height: 0.75rem;
   transition: left 150ms, width 150ms 150ms, height 150ms 150ms, box-shadow 150ms 150ms ease-in-out;
 }
-.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch > .handle {
+.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch > .handle {
   left: calc(2.25rem - 0.9rem);
   width: 1rem;
   height: 1rem;

package/dist/components/data-display/table/IProps.d.ts

@@ -36,6 +36,7 @@ interface IProps<T> extends IChildren {
         scroll?: {
             maxHeight: number;
         };
+        subrowSelector?: string;
     };
 }
 export default IProps;

package/dist/components/data-display/table/index.js

@@ -9,7 +9,7 @@ import Input from "../../form/input";
 import Popover from "../../feedback/popover";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import Upload from "../../form/upload";
-const Table = forwardRef(({ children, title, description, data, columns, actions, selections, previousSelections, searchedParams, pagination, config = { isSearchable: false }, }, ref) => {
+const Table = forwardRef(({ children, title, description, data, columns, actions, selections, previousSelections, searchedParams, pagination, config = { isSearchable: false, subrowSelector: "subitems" }, }, ref) => {
     // refs
     const _tableWrapper = useRef(null);
     const _tableContent = useRef(null);
@@ -23,6 +23,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     // states
     const [selectAll, setSelectAll] = useState(false);
     const [selectionItems, setSelectionItems] = useState([]);
+    const [showSubitems, setShowSubitems] = useState({});
     // states -> File
     const [files, setFiles] = useState([]);
     const [formData, setFormData] = useState(undefined);
@@ -140,7 +141,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             };
         });
     }, []);
-    // Derinlemesine arama yapmak için özyinelemeli bir fonksiyon tanımlayalım.
+    // Derinlemesine arama yapmak için özyinelemeli bir fonksiyon olarak kullanılmaktadır.
     const deepSearch = (item, searchedText) => {
         if (!searchedText || Object.keys(searchedText).length === 0)
             return true;
@@ -190,6 +191,69 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
         setTimeout(() => handleScroll(), 0);
         return _data;
     }, [data, searchedText, currentPage]);
+    const renderCell = (item, c, cIndex, index) => {
+        let render;
+        // `c.key` bir string ise
+        if (typeof c.key !== "object") {
+            render = c.render ? c.render(item) : item[c.key];
+        }
+        // `c.key` bir nesne ise ve `nestedKey` mevcutsa
+        else if (typeof c.key === "object") {
+            const _item = item[c.key.field];
+            if (_item && typeof _item === "object") {
+                render = c.render ? c.render(item) : _item[c.key.nestedKey];
+            }
+        }
+        // Diğer durumlarda `null` döndür
+        else {
+            render = null;
+        }
+        const _className = [];
+        if (c.config?.sticky)
+            _className.push(`sticky-${c.config.sticky}`);
+        if (c.config?.alignContent)
+            _className.push(`align-content-${c.config.alignContent}`);
+        if (c.config?.textWrap)
+            _className.push(`text-${c.config.textWrap}`);
+        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, className: _className.join(" "), style: c.config?.width ? { minWidth: c.config.width, maxWidth: c.config.width } : {}, "data-sticky-position": c.config?.sticky }, React.isValidElement(render) ? render : String(render)));
+    };
+    const renderRow = (item, index) => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("tr", { key: `row-${index}` },
+                selections && (React.createElement("td", { className: "sticky-left", "data-sticky-position": "left" },
+                    React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), status: "primary", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
+                            if (event.target.checked)
+                                setSelectionItems((prev) => [...prev, item]);
+                            else
+                                setSelectionItems((prev) => prev.filter((_item) => _item !== item));
+                        } }))),
+                data.some((item) => config.subrowSelector ?? "subitems" in item) && (React.createElement("td", { style: { width: 1 } }, item[config.subrowSelector] && (React.createElement("span", { className: `subitem-open-button ${showSubitems[index] && "opened"}`, onClick: () => {
+                        setShowSubitems((prev) => ({
+                            ...prev,
+                            [`${index}`]: !prev[`${index}`],
+                        }));
+                    } })))),
+                columns.map((c, cIndex) => renderCell(item, c, cIndex, index))),
+            showSubitems[index] && item[config.subrowSelector] && (React.createElement(SubitemList, { items: item[config.subrowSelector], columns: columns, index: index, depth: 1.5 }))));
+    };
+    const SubitemList = ({ items, columns, index, depth }) => {
+        return items.map((subitem, subindex) => {
+            const x = subitem[config.subrowSelector];
+            return (React.createElement(React.Fragment, null,
+                React.createElement("tr", { key: `subitem-${index}-${subindex}` },
+                    data.some((item) => config.subrowSelector ?? "subitems" in item) && (React.createElement("td", { style: { paddingLeft: `${depth * 1.5}rem` } },
+                        React.createElement("span", { className: `subitem-open-button ${showSubitems[`${index}.${subindex}`] && "opened"} ${!x && "passive"}`, onClick: () => {
+                                if (!x)
+                                    return;
+                                setShowSubitems((prev) => ({
+                                    ...prev,
+                                    [`${index}.${subindex}`]: !prev[`${index}.${subindex}`],
+                                }));
+                            } }))),
+                    columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex))),
+                showSubitems[`${index}.${subindex}`] && x && (React.createElement(SubitemList, { items: x, columns: columns, index: subindex, depth: depth * 1.5 }))));
+        });
+    };
     // useEffects
     useEffect(() => {
         // Eğer `previousSelections` özelliğinden değer geliyorsa bu daha önce seçim yapılmış öğeleri gönderiyorum
@@ -252,6 +316,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             React.createElement("table", { ref: ref },
                 React.createElement("thead", null,
                     React.createElement("tr", { key: "selection" },
+                        data.some((item) => config.subrowSelector ?? "subitems" in item) && React.createElement("td", { style: { width: 1 } }),
                         selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
                             React.createElement(Checkbox, { variant: "filled", status: "primary", checked: selectAll, onChange: (event) => {
                                     if (_checkboxItems.current.length > 0) {
@@ -306,53 +371,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                     })), windowBlur: true },
                                     React.createElement(Button, { variant: "borderless", icon: { element: React.createElement(ARIcon, { icon: "Filter", stroke: "var(--primary)", size: 16 }) } })))))));
                         })))),
-                React.createElement("tbody", null, getData.map((item, index) => (React.createElement("tr", { key: `row-${index}-${Math.random()}` },
-                    selections && (React.createElement("td", { key: `selection-${index}`, className: "sticky-left", "data-sticky-position": "left" },
-                        React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), status: "primary", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
-                                if (event.target.checked)
-                                    setSelectionItems((prev) => [...prev, item]);
-                                else
-                                    setSelectionItems((prev) => prev.filter((_item) => _item !== item));
-                            } }))),
-                    columns.map((c, cIndex) => {
-                        let _className = [];
-                        let render; // TODO: Generic yapmak için çalışma yap. (Daha Sonra)
-                        // `c.key` bir string ise
-                        if (typeof c.key !== "object") {
-                            render = c.render ? c.render(item) : item[c.key];
-                        }
-                        // `c.key` bir nesne ise ve `nestedKey` mevcutsa
-                        else if (typeof c.key === "object") {
-                            const _item = item[c.key.field];
-                            if (_item && typeof _item === "object") {
-                                render = c.render ? c.render(item) : _item[c.key.nestedKey];
-                            }
-                        }
-                        // Diğer durumlarda `null` döndür
-                        else {
-                            render = null;
-                        }
-                        if (c.config?.sticky)
-                            _className.push(`sticky-${c.config.sticky}`);
-                        if (c.config?.alignContent)
-                            _className.push(`align-content-${c.config.alignContent}`);
-                        if (c.config?.textWrap)
-                            _className.push(`text-${c.config.textWrap}`);
-                        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, ...(_className.length > 0 && {
-                                className: `${_className.map((c) => c).join(" ")}`,
-                            }), ...(c.config?.width
-                                ? {
-                                    style: { minWidth: c.config.width, maxWidth: c.config.width },
-                                }
-                                : // : {
-                                    //     style: { maxWidth: thWidths[cIndex], minWidth: thWidths[cIndex] },
-                                    //   })}
-                                    {
-                                        style: {},
-                                    }), ...(c.config?.sticky && {
-                                "data-sticky-position": c.config.sticky,
-                            }) }, React.isValidElement(render) ? render : String(render)));
-                    }))))))),
+                React.createElement("tbody", null, getData.map((item, index) => (React.createElement(React.Fragment, { key: index }, renderRow(item, index))))))),
         pagination && pagination.totalRecords > pagination.perPage && (React.createElement("div", { className: "footer" },
             React.createElement("span", null,
                 React.createElement("strong", null,

package/dist/components/form/switch/index.js

@@ -5,9 +5,11 @@ import Utils from "../../../libs/infrastructure/shared/Utils";
 const Switch = ({ label, status = "primary", border = { radius: "pill" }, ...attributes }) => {
     // refs
     let _switch = useRef(null);
+    const _inputClassName = [];
     const _switchClassName = ["ar-switch"];
     // states
     const [checked, setChecked] = useState(attributes.checked ?? false);
+    _inputClassName.push(attributes.checked ? "checked" : "unchecked");
     _switchClassName.push(...Utils.GetClassName("filled", attributes.checked ? status : "light", border, undefined, undefined, attributes.className));
     // useEffects
     useEffect(() => {
@@ -15,7 +17,7 @@ const Switch = ({ label, status = "primary", border = { radius: "pill" }, ...att
     }, [attributes.checked]);
     return (React.createElement("div", { className: "ar-switch-wrapper" },
         React.createElement("label", null,
-            React.createElement("input", { type: "checkbox", ...attributes, checked: checked, size: 0, onChange: (event) => {
+            React.createElement("input", { type: "checkbox", ...attributes, className: _inputClassName.map((c) => c).join(" "), checked: checked, size: 0, onChange: (event) => {
                     event.stopPropagation();
                     (() => {
                         setChecked(event.target.checked);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.32",
+  "version": "0.2.34",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",