@design.estate/dees-catalog 1.0.246 → 1.0.248

package/ts_web/elements/dees-table.ts

@@ -218,6 +218,12 @@ export class DeesTable<T> extends DeesElement {
         margin-right: 8px;
       }
 
+      .searchGrid {
+        display: grid;
+        grid-gap: 16px;
+        grid-template-columns: 1fr 200px;
+      }
+
       table,
       .noDataSet {
         margin-top: 16px;
@@ -237,7 +243,6 @@ export class DeesTable<T> extends DeesElement {
         text-align: left;
       }
       tr:hover {
-        
       }
       tr:hover td {
         background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
@@ -308,16 +313,17 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .action {
-        margin: -6px 0px;
+        margin: -4px 0px;
         padding: 10px;
-        line-height: 36px;
-        height: 36px;
+        line-height: 34px;
+        height: 34px;
+        size: 16px;
         display: inline-block;
         border-radius: 8px;
       }
 
       .action:first-child {
-        margin-left: -8px;
+        margin-left: -6px;
         width: min-content;
       }
 
@@ -369,7 +375,6 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .footerActions .footerAction:hover dees-icon {
-        
       }
     `,
   ];
@@ -410,8 +415,30 @@ export class DeesTable<T> extends DeesElement {
           </div>
         </div>
         <div class="headingSeparation"></div>
-
-        <dees-input-text></dees-input-text>
+        <div class="searchGrid">
+          <dees-input-text
+            .label=${'lucene syntax search'}
+            .description=${`
+              You can use the lucene syntax to search for data, e.g.:
+              
+              \`\`\`
+              name: "john" AND age: 18
+              \`\`\`
+              
+            `}></dees-input-text>
+          <dees-input-multitoggle
+            .label=${'search mode'}
+            .options=${['table', 'data', 'server']}
+            .description=${`
+              There are three basic modes:
+              
+              * table: only searches data already in the table
+              * data: searches original data, ignoring table transforms
+              * server: searches data on the server
+              
+            `}
+          ></dees-input-multitoggle>
+        </div>
 
         <!-- the actual table -->
         <style></style>

package/ts_web/elements/index.ts

@@ -18,6 +18,7 @@ export * from './dees-progressbar.js';
 export * from './dees-input-quantityselector.js';
 export * from './dees-input-radio.js';
 export * from './dees-input-text.js';
+export * from './dees-label.js';
 export * from './dees-mobilenavigation.js';
 export * from './dees-modal.js';
 export * from './dees-input-multitoggle.js';