mdkcontroller 1.2.2 → 1.2.3

package/Cores/file/DKGrid.css

@@ -1,3 +1,14 @@
+.dk-table textarea {
+  resize: none;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.dk-table textarea::-webkit-scrollbar {
+  display: none;
+  /* Chrome & Safari */
+}
+
 .dk-table {
   font-family: Arial, Helvetica, sans-serif;
   border-collapse: collapse;
@@ -7,6 +18,7 @@
 
 .dk-table td {
   border: 1px solid #ddd;
+  overflow: hidden;
 }
 
 .dk-table th {
@@ -55,7 +67,7 @@
 .dk-table .RowNavigator td {
   background: white;
   border-bottom: 1px solid #ff2828d6;
-  border-radius: 7px;
+  /* border-radius: 7px; */
 }
 
 .dk-table .edit {
@@ -67,6 +79,7 @@
 }
 
 .dk-table .RowNavigator td>input,
+.dk-table .RowNavigator td>textarea,
 .dk-table .RowNavigator td>select {
   height: 23px;
   font-size: 18px;
@@ -80,51 +93,28 @@
   background-color: #f1f1f1;
 }
 
-.dk-table .edit input[type="checkbox"] {
+/* .dk-table .edit input[type="checkbox"] {
   min-height: 22px;
   width: 30px;
   margin: auto;
   display: block;
-}
+} */
 
-.dk-table .edit input[type="checkbox"]:disabled {
+/* .dk-table .edit input[type="checkbox"]:disabled {
   cursor: not-allowed;
 }
 
 .dk-table .edit input:not([type="checkbox"]) :focus {
   outline: 1px solid rgba(65, 185, 65, 0.705);
-}
+} */
 
-.dk-table .edit input:not(:disabled),
-.dk-table .edit select {
+.dk-table .edit td * {
   display: block;
-  color: #495057;
-  background-color: #fff;
-  background-image: none;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0.25rem;
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
   width: -webkit-fill-available;
   padding: 0;
+  border: 0px;
   outline: none;
-}
-
-.dk-actionsBar {
-  padding: 5px 10px;
-  width: max-content;
-}
-
-.dk-actionsBar button {
-  border: 2px solid #0e9966b6;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: all 1s;
-}
-
-.dk-actionsBar button:active,
-.dk-actionsBar button:hover {
-  border-color: #0fbd7db6;
+  font-family: sans-serif;
 }
 
 .active {

package/Cores/file/DKGrid.js

@@ -65,12 +65,13 @@ class DKGrid {
         let totalWidth = 0;
         const colWidths = this.config.column.map(f => {
             let width = f.width || (f.dataType === "string" ? 200 : f.dataType === "date" ? 140 : f.dataType === "number" ? 100 : 80);
+            f.width = width;
             totalWidth += width;
             return `<col style="width: ${width}px;">`;
         }).join("");
         this.editorDefault = '<tr>' + this.config.column.map(f => {
             switch (f.dataType) {
-                case "string": return `<td><input type='text'name='${f.fieldName}'/></td>`;
+                case "string": return `<td><textarea name='${f.fieldName}'></textarea></td>`;
                 case "bool": return `<td><input type="checkbox" name='${f.fieldName}'></td>`;
                 case "date": return `<td><input type="date" name='${f.fieldName}'></td>`;
                 case "number": return `<td><input type="number" name='${f.fieldName}'></td>`;
@@ -142,8 +143,9 @@ class DKGrid {
         const dkgrid = this;
         this.tableEditor.addEventListener('keydown', function (event) {
             const keyCode = event.keyCode || event.which;
-
-            dkgrid.#keyDownOnTable(keyCode);
+            if (!event.shiftKey) {
+                dkgrid.#keyDownOnTable(keyCode);
+            }
         });
 
         this.tableRaw.addEventListener('click', function (event) {
@@ -245,8 +247,9 @@ class DKGrid {
         tbEditor.querySelector('tbody').querySelectorAll('td').forEachExt(
             child => {
                 const input = child.firstChild;
+                input.style.height = (trTag.clientHeight) + 'px';
                 try {
-                    if (input.tagName == "INPUT" || input.tagName == "SELECT") {
+                    if (input.tagName == "INPUT" || input.tagName == "SELECT" || input.tagName == "TEXTAREA") {
                         if (input.tagName == "SELECT") {
                             let itemSelector = tableConfig.column.find(f => f.fieldName == input.name).items;
                             this.fireEvent('onSelectorSelecting', (rs) => {
@@ -289,7 +292,7 @@ class DKGrid {
             tbEditor.querySelector('tbody').querySelectorAll('td').forEachExt(
                 child => {
                     const input = child.firstChild;
-                    if (input.tagName == "INPUT" || input.tagName == "SELECT") {
+                    if (input.tagName == "INPUT" || input.tagName == "SELECT" || input.tagName == "TEXTAREA") {
                         objectEditing[input.name] = input.value;
                         if (input.type == 'checkbox') {
                             objectEditing[input.name] = input.checked;
@@ -476,7 +479,7 @@ class DKGrid {
             this.fireEvent('onAddNewRow', null, newOb);
         }
         if (!newOb[primaryKey]) {
-            newOb[primaryKey] = DKGrid.generateRandomString(32);
+            newOb[primaryKey] = Date.now() + '_' + DKGrid.generateRandomString(12);
         }
         newTR.dataset.primaryValue = newOb[primaryKey];
         const cache = this.#cache;

package/package.json

@@ -5,11 +5,12 @@
     "express": "^4.18.2",
     "fluent-ffmpeg": "^2.1.2",
     "handlebars": "^4.7.8",
+    "js-yaml": "^4.1.0",
     "lowdb": "^7.0.1",
     "socket.io": "^4.7.2"
   },
   "name": "mdkcontroller",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "keywords": [],
   "author": "KHANHNBD <khanh272421@gmail.com>",
   "license": "ISC",
@@ -27,4 +28,4 @@
     "Cores/",
     "dk_modules/"
   ]
-}
+}