ar-design 0.3.13 → 0.3.15

package/dist/assets/css/components/form/upload/list.css

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  gap: 1rem;
+  gap: 0.75rem;
   width: 100%;
   height: 100%;
 
@@ -13,9 +13,16 @@
 
   > ul {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: 0.75rem;
 
+    &.list {
+      flex-direction: column;
+    }
+    &.grid {
+      flex-direction: row;
+    }
+
     > li {
       position: relative;
       display: flex;
@@ -39,7 +46,7 @@
         border: solid 1px transparent;
       }
       &:hover::before {
-        background-color: rgba(var(--black-rgb), 0.75);
+        background-color: rgba(var(--black-rgb), 0.25);
       }
 
       &:has(> .error) {
@@ -116,6 +123,7 @@
           color: var(--white);
           font-size: 0.65rem;
           font-weight: 700;
+          text-wrap: nowrap;
 
           > .size-type {
             background-color: rgba(var(--black-rgb), 0.5);
@@ -126,6 +134,7 @@
             color: var(--primary);
             font-size: 0.65rem;
             font-weight: 700;
+            text-wrap: nowrap;
           }
         }
 
@@ -136,6 +145,7 @@
           color: var(--black);
           font-size: 0.65rem;
           font-weight: 700;
+          text-wrap: nowrap;
         }
       }
     }

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

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import Input from "../../form/input";
 import DatePicker from "../../form/date-picker";
 import Select from "../../form/select";
+import InputNumber from "../../form/input-number";
 const Editable = function ({ c, item, index, onEditable }) {
     const key = c.key;
     const itemValue = item[c.key];
@@ -20,6 +21,12 @@ const Editable = function ({ c, item, index, onEditable }) {
                     setValue(value);
                     onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, index);
                 } }));
+        case "input-number":
+            return (React.createElement(InputNumber, { variant: "borderless", name: c.key, value: value, onChange: (event) => {
+                    const { value } = event.target;
+                    setValue(value);
+                    onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, index);
+                } }));
         case "date-picker":
             return (React.createElement(DatePicker, { variant: "borderless", value: value, onChange: (value) => {
                     setValue(value);

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

@@ -1,7 +1,7 @@
 "use client";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import Input from "../input";
-const InputNumber = ({ name, value, onChange, digits, placeholder, disabled }) => {
+const InputNumber = ({ variant, color, name, value, onChange, digits, placeholder, validation, disabled, }) => {
     // refs
     const _firstLoad = useRef(false);
     const _input = useRef(null);
@@ -77,11 +77,11 @@ const InputNumber = ({ name, value, onChange, digits, placeholder, disabled }) =
             _firstLoad.current = true;
         }
     }, [value]);
-    return (React.createElement(Input, { ref: _input, name: name, value: _value ?? "", type: "text", inputMode: "decimal", onChange: (event) => {
+    return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, value: _value ?? "", type: "text", inputMode: "decimal", onChange: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...
             if (disabled)
                 return;
             handleChange(event);
-        }, onClick: handleClick, onKeyUp: handleKeyUp, placeholder: placeholder }));
+        }, onClick: handleClick, onKeyUp: handleKeyUp, placeholder: placeholder, validation: validation }));
 };
 export default InputNumber;

package/dist/components/form/upload/List.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 import { ValidationError } from ".";
 interface IProps {
+    type: "list" | "grid";
     selectedFiles: File[];
     validationErrors?: ValidationError[];
     handleFileToBase64: (file: File) => Promise<string>;
     handleFileRemove: (fileToRemove: File) => void;
 }
-declare const _default: React.MemoExoticComponent<({ selectedFiles, validationErrors, handleFileToBase64, handleFileRemove }: IProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ type, selectedFiles, validationErrors, handleFileToBase64, handleFileRemove }: IProps) => React.JSX.Element>;
 export default _default;

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

@@ -2,21 +2,20 @@ import React, { memo } from "react";
 import { ARIcon } from "../../icons";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import Buttons from "./Buttons";
-const List = ({ selectedFiles, validationErrors = [], handleFileToBase64, handleFileRemove }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("ul", null, selectedFiles.map((selectedFile) => {
-            const message = validationErrors.find((v) => v.fileName === selectedFile.name)?.message;
-            return (React.createElement("li", null,
-                message && (React.createElement("div", { className: "error" },
-                    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),
-                React.createElement("div", null,
-                    React.createElement("span", { className: "file-size" },
-                        (selectedFile.size / 1024).toFixed(3),
-                        React.createElement("span", { className: "size-type" }, "KB")),
-                    React.createElement("span", { className: "file-type" }, Utils.GetFileTypeInformation(selectedFile.type).readableType))));
-        }))));
+const List = ({ type, selectedFiles, validationErrors = [], handleFileToBase64, handleFileRemove }) => {
+    return (React.createElement("ul", { className: type }, selectedFiles.map((selectedFile) => {
+        const message = validationErrors.find((v) => v.fileName === selectedFile.name)?.message;
+        return (React.createElement("li", null,
+            message && (React.createElement("div", { className: "error" },
+                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),
+            React.createElement("div", null,
+                React.createElement("span", { className: "file-size" },
+                    (selectedFile.size / 1024).toFixed(3),
+                    React.createElement("span", { className: "size-type" }, "KB")),
+                React.createElement("span", { className: "file-type" }, Utils.GetFileTypeInformation(selectedFile.type).readableType))));
+    })));
 };
 export default memo(List);

package/dist/components/form/upload/Props.d.ts

@@ -64,7 +64,7 @@ type Props = {
      * ```
      */
     maxSize?: number;
-    type?: "list" | "dropzone";
+    type?: "list" | "grid" | "dropzone";
     multiple?: boolean;
 } & IMultiple & IValidation & IDisabled;
 export default Props;

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

@@ -147,13 +147,14 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", m
     }, []);
     switch (type) {
         case "list":
+        case "grid":
             return renderUploadFile({
                 children: (React.createElement(React.Fragment, null,
-                    React.createElement(Button, { variant: "outlined", color: "gray", icon: { element: React.createElement(ARIcon, { icon: "CloudUpload-Fill" }) }, onClick: () => {
+                    React.createElement(Button, { type: "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)),
-                    React.createElement(List, { selectedFiles: selectedFiles ?? [], validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }))),
+                    React.createElement(List, { type: type, selectedFiles: selectedFiles ?? [], validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }))),
             });
         case "dropzone":
             return renderUploadFile({
@@ -174,6 +175,8 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", m
                                         "MB"))),
                             text && React.createElement("span", null, text)))))),
             });
+        default:
+            return null;
     }
 };
 export default Upload;

package/dist/libs/core/service/Api.js

@@ -8,6 +8,7 @@ class Api {
         this._host = values.host || (typeof window !== "undefined" ? window.location.origin : "");
         this._core = values.core || "";
         this._init = values.init;
+        this._token = values.token;
         // Url
         this._url = `${this._host}/${this._core ? this._core + "/" : ""}`;
     }

package/dist/libs/types/index.d.ts

@@ -33,7 +33,7 @@ export type TableColumnType<T> = {
     filters?: Option[];
     render?: (item: T) => React.ReactNode;
     editable?: {
-        type: "string" | "number" | "date-picker" | "single-select" | "multiple-select";
+        type: "string" | "number" | "input-number" | "date-picker" | "single-select" | "multiple-select";
         options?: Option[];
         method?: () => void | Promise<void>;
     };

package/package.json

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