ar-design 0.3.2 → 0.3.4

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

@@ -15,6 +15,7 @@ import Select from "../../form/select";
 import Grid from "../grid-system";
 import THeadCell from "./THeadCell";
 import Tooltip from "../../feedback/tooltip";
+import Editable from "./Editable";
 const filterOption = [
     { value: FilterOperator.Contains, text: "İçerir" },
     { value: FilterOperator.DoesNotContains, text: "İçermez" },
@@ -26,7 +27,7 @@ const filterOption = [
     { value: FilterOperator.NotBlank, text: "Boş değil" },
 ];
 const { Row, Column } = Grid;
-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, onEditable, pagination, config = { isSearchable: false }, }, ref) => {
     // refs
     const _tableWrapper = useRef(null);
     const _tableContent = useRef(null);
@@ -398,7 +399,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                             return (React.createElement("div", { key: `last-before-${i}`, style: { left: `${i + 0.65}rem` }, className: "last-before" }));
                         }),
                     React.createElement("div", { className: "before" }))),
-                React.isValidElement(render) ? render : String(render),
+                React.isValidElement(render) ? (render) : c.editable && onEditable ? (React.createElement(Editable, { c: c, item: item, onEditable: onEditable })) : (render),
                 config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
                     React.createElement("div", { className: "circle" }))))));
     };
@@ -581,7 +582,11 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                             element: (React.createElement(ARIcon, { viewBox: "0 0 16 16", size: 24, icon: "Filter", fill: "var(--dark)", strokeWidth: 0 })),
                                         } }))))));
                         })))),
-                React.createElement("tbody", null, getData.map((item, index) => (React.createElement(React.Fragment, { key: index }, renderRow(item, index, 1))))))),
+                React.createElement("tbody", null, getData.length > 0 ? (getData.map((item, index) => React.createElement(React.Fragment, { key: index }, renderRow(item, index, 1)))) : (React.createElement("tr", null,
+                    React.createElement("td", { colSpan: columns.length },
+                        React.createElement("div", { className: "no-item" },
+                            React.createElement(ARIcon, { icon: "Inbox-Fill", fill: "var(--gray-300)", size: 64, style: { position: "relative", zIndex: 1 } }),
+                            React.createElement("span", null, "No Data")))))))),
         React.createElement(FilterPopup, { tableContent: _tableContent, coordinate: filterButtonCoordinate, buttons: _filterButton }, filterPopupContent),
         pagination && pagination.totalRecords > pagination.perPage && (React.createElement("div", { className: "footer" },
             React.createElement("span", null,

package/dist/components/feedback/popup/index.js

@@ -34,11 +34,11 @@ const Popup = ({ title, message, status, isOpen, buttons }) => {
             case "success":
                 return React.createElement(ARIcon, { icon: "CheckAll", fill: "var(--white)", size: 64 });
             case "warning":
-                return React.createElement(ARIcon, { variant: "fill", icon: "ExclamationDiamond", fill: "var(--white)", size: 48 });
+                return React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white)", size: 48 });
             case "information":
                 return "information";
             case "error":
-                return React.createElement(ARIcon, { variant: "fill", icon: "XCircle", fill: "var(--white)", size: 48 });
+                return React.createElement(ARIcon, { icon: "XCircle-Fill", fill: "var(--white)", size: 48 });
             default:
                 return "light";
         }

package/dist/components/form/date-picker/Props.d.ts

@@ -1,4 +1,4 @@
-import { IBorder, ISize, IStatus, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+import { IBorder, IColors, ISize, IStatus, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 type Props = {
     /**
      * Bileşenin başlığı veya etiket metnidir.
@@ -37,5 +37,5 @@ type Props = {
      * ```
      */
     onChange: (value: string) => void;
-} & IVariant & IStatus & IBorder & ISize & IValidation & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "size" | "color">;
+} & IVariant & IColors & IStatus & IBorder & ISize & IValidation & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "size" | "color">;
 export default Props;

package/dist/components/form/date-picker/index.js

@@ -21,7 +21,7 @@ const months = [
     { value: 10, text: "Kasım" },
     { value: 11, text: "Aralık" },
 ];
-const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
+const DatePicker = ({ variant, color, onChange, isClock, validation, ...attributes }) => {
     // refs
     const _arCalendar = useRef(null);
     const _arClock = useRef(null);
@@ -249,7 +249,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
         attributes.placeholder && attributes.placeholder.length > 0 && (React.createElement("label", null,
             validation ? "* " : "",
             attributes.placeholder)),
-        React.createElement(Input, { ref: _beginDate, ...attributes, value: DATE.ParseValue(String(attributes.value), isClock), type: isClock ? "datetime-local" : "date", onKeyDown: (event) => {
+        React.createElement(Input, { ref: _beginDate, variant: variant, color: color, ...attributes, value: DATE.ParseValue(String(attributes.value), isClock), type: isClock ? "datetime-local" : "date", onKeyDown: (event) => {
                 if (event.code === "Space")
                     event.preventDefault();
                 else if (event.code === "Enter")

package/dist/components/form/input-number/index.js

@@ -3,6 +3,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import Input from "../input";
 const InputNumber = ({ ...attributes }) => {
     // refs
+    const _firstLoad = useRef(false);
     const _input = useRef(null);
     const _caretPosition = useRef(null);
     const _isInputTouch = useRef(false);
@@ -61,10 +62,16 @@ const InputNumber = ({ ...attributes }) => {
     }, []);
     // useEffects
     useEffect(() => {
-        if (attributes.value !== undefined)
-            setValue(attributes.value ?? "");
+        if (_firstLoad.current)
+            return;
+        if (attributes.value !== undefined && attributes.value !== "") {
+            const isDecimals = String(attributes.value).includes(",");
+            let formatted = formatter(isDecimals).format(parseFloat(String(attributes.value)));
+            setValue(formatted == "NaN" ? "" : formatted);
+            _firstLoad.current = true;
+        }
     }, [attributes.value]);
-    return (React.createElement(Input, { ref: _input, ...attributes, value: value ?? attributes.value, onChange: (event) => {
+    return (React.createElement(Input, { ref: _input, ...attributes, value: value ?? attributes.value ?? "", onChange: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...
             if (attributes.disabled)
                 return;

package/dist/components/form/upload/Buttons.js

@@ -13,13 +13,13 @@ const Buttons = ({ selectedFile, handleFileToBase64, handleFileRemove }) => {
                     a.click();
                     window.URL.revokeObjectURL(url);
                 } }),
-            selectedFile.type.includes("image") && (React.createElement(Button, { variant: "borderless", color: "blue", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Eye", fill: "currentColor" }) }, onClick: async (e) => {
+            selectedFile.type.includes("image") && (React.createElement(Button, { variant: "borderless", color: "blue", type: "button", icon: { element: React.createElement(ARIcon, { icon: "Eye-Fill", fill: "currentColor" }) }, onClick: async (e) => {
                     e.stopPropagation();
                     const base64 = await handleFileToBase64(selectedFile);
                     const newTab = window.open();
                     newTab?.document.write(`<img src="${base64}" title="${selectedFile.name}" alt="${selectedFile.name}" />`);
                 } })),
-            React.createElement(Button, { variant: "borderless", color: "red", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Trash", fill: "currentColor" }) }, onClick: (e) => {
+            React.createElement(Button, { variant: "borderless", color: "red", type: "button", icon: { element: React.createElement(ARIcon, { icon: "Trash-Fill", fill: "currentColor" }) }, onClick: (e) => {
                     e.stopPropagation();
                     handleFileRemove(selectedFile);
                 } }))));

package/dist/components/form/upload/Dropzone.js

@@ -21,7 +21,7 @@ const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, ha
                 handleSelectFile(file);
             } },
             message && (React.createElement("div", { className: "error" },
-                React.createElement(ARIcon, { variant: "fill", icon: "ExclamationDiamond", fill: "var(--white)" }),
+                React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white)" }),
                 React.createElement("span", null, message))),
             React.createElement(Buttons, { selectedFile: file, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
             file.type.includes("image") ? (React.createElement("img", { src: base64 })) : (React.createElement(ARIcon, { icon: fileInfo.icon ?? "Document", fill: "var(--white)", size: 32 }))));

package/dist/components/form/upload/List.js

@@ -8,7 +8,7 @@ const List = ({ selectedFiles, validationErrors = [], handleFileToBase64, handle
             const message = validationErrors.find((v) => v.fileName === selectedFile.name)?.message;
             return (React.createElement("li", null,
                 message && (React.createElement("div", { className: "error" },
-                    React.createElement(ARIcon, { variant: "fill", icon: "ExclamationDiamond", fill: "var(--white)" }),
+                    React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white)" }),
                     React.createElement("span", null, message))),
                 React.createElement(Buttons, { selectedFile: selectedFile, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
                 React.createElement("span", { className: "file-name" }, selectedFile.name),

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

@@ -197,7 +197,7 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", mu
         case "list":
             return renderUploadFile({
                 children: (React.createElement(React.Fragment, null,
-                    React.createElement(Button, { variant: "outlined", color: "gray", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "CloudUpload" }) }, onClick: () => {
+                    React.createElement(Button, { variant: "outlined", color: "gray", icon: { element: React.createElement(ARIcon, { icon: "CloudUpload-Fill" }) }, onClick: () => {
                             if (_input.current)
                                 _input.current.click();
                         } }, text && React.createElement("span", null, text)),
@@ -213,7 +213,7 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", mu
                         React.createElement(Dropzone, { selectedFiles: selectedFiles.length === 0 && selectedFile ? [selectedFile] : selectedFiles, validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
                         !selectedFile && selectedFiles.length === 0 && (React.createElement(React.Fragment, null,
                             React.createElement("div", { className: "upload" },
-                                React.createElement(ARIcon, { variant: "fill", icon: "CloudUpload", size: 32 }),
+                                React.createElement(ARIcon, { icon: "CloudUpload-Fill", size: 32 }),
                                 React.createElement("div", { className: "properies" },
                                     allowedTypes && (React.createElement("div", { className: "allow-types" }, allowedTypes?.map((allowedType) => allowedType.split("/")[1].toLocaleUpperCase()).join(", "))),
                                     maxSize && React.createElement("div", { className: "max-size" },

package/dist/components/icons/Compiler.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { Icons, IconVariants } from "../../libs/types";
+import { Icons } from "../../libs/types";
 declare class Icon {
     private _stroke?;
     private _strokeWidth?;
     constructor(stroke?: string, strokeWidth?: number);
-    Compiler: (variant: IconVariants, icon: Icons) => React.JSX.Element | null;
+    Compiler: (icon: Icons) => React.JSX.Element | null;
 }
 export default Icon;