@operato/data-grist 2.0.0-alpha.82 → 2.0.0-alpha.86

package/src/filters/filter-styles.ts

@@ -2,56 +2,68 @@ import { css } from 'lit'
 
 export const FilterStyles = css`
   :host {
-    --ox-input-placeholder-color: var(--primary-color);
-
-    --ox-input-padding: var(--padding-narrow) var(--padding-default);
-    --ox-input-border: 1px solid rgba(0, 0, 0, 0.2);
-    --ox-input-focus-border: 1px solid var(--primary-color);
-    --ox-input-border-radius: var(--border-radius);
-    --ox-input-font: normal 14px var(--theme-font);
-    --ox-input-color: var(--primary-text-color);
-
-    --ox-filters-form-gap: var(--margin-wide);
-    --ox-filters-form-label-font: var(--label-font);
-    --ox-filters-form-label-color: var(--label-color);
-    --ox-select-padding: 0 var(--padding-narrow);
+    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));
+
+    --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
+    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));
+    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
+    --ox-filters-input-color: var(--input-color, var(--primary-text-color));
+    --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));
+    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
+    --ox-filters-label-color: var(--label-color, var(--primary-text-color));
+    --ox-filters-input-background-color: transparent;
+
+    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+    --ox-filters-input-padding: var(--input-padding, 6px 2px);
+
+    --ox-select-padding: var(--ox-filters-input-padding);
+    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
   }
 
   label {
-    font: var(--ox-filters-form-label-font);
-    color: var(--ox-filters-form-label-color);
+    font: var(--ox-filters-label-font);
+    color: var(--ox-filters-label-color);
   }
+
   span {
-    margin-right: var(--margin-narrow);
     text-transform: capitalize;
   }
 
   input::placeholder {
-    color: var(--ox-input-placeholder-color);
+    color: var(--ox-filters-input-placeholder-color);
     opacity: 0.6;
   }
 
+  input {
+    padding: var(--ox-filters-input-padding);
+  }
+
   ox-select,
   input {
-    padding: var(--input-padding);
     border: none;
-    border-bottom: var(--ox-input-border);
-    font: var(--ox-input-font);
-    color: var(--ox-input-color);
+    border-bottom: var(--ox-filters-input-border);
+    font: var(--ox-filters-input-font);
+    color: var(--ox-filters-input-color);
+    background-color: var(--ox-filters-input-background-color, transparent);
   }
 
   ox-select:focus,
   input:focus {
     outline: none;
-    border-bottom: var(--ox-input-focus-border);
-    color: var(--primary-color);
+    border-bottom: var(--ox-filters-input-focus-border);
+    color: var(--ox-filters-input-focus-color);
   }
+
   ox-select {
-    padding: var(--ox-select-padding);
+    min-width: 90px;
+    max-width: 170px;
+  }
+
+  ox-input-search {
+    max-width: 150px;
   }
 
   input[type='number'] {
-    padding-right: var(--padding-narrow);
     max-width: 90px;
   }
 
@@ -59,15 +71,13 @@ export const FilterStyles = css`
   input[type*='time'],
   input[type='week'],
   input[type='month'] {
-    padding: 8px var(--padding-narrow) 8px var(--padding-default);
     max-width: 170px;
   }
 
   @media only screen and (max-width: 460px) {
     :host {
       --ox-filters-form-label-font: bold 13px var(--theme-font);
-      --ox-input-font: normal 16px var(--theme-font);
-      --ox-filters-form-gap: var(--margin-narrow);
+      --ox-filters-input-font: normal 16px var(--theme-font);
     }
 
     input[from],

package/src/filters/filters-form.ts

@@ -42,6 +42,7 @@ export class FiltersForm extends LitElement {
       form > * {
         display: flex;
         align-items: center;
+        gap: var(--input-intra-gap, 7px);
       }
 
       label span {
@@ -189,53 +190,55 @@ export class FiltersForm extends LitElement {
                 return html``
               }
 
-              return type !== 'select' && labelText
-                ? html`<label filter-title ?between=${operator === 'between'}
-                    ><span>${labelText}</span> ${renderer(column, value, this)}
-                  </label> `
-                : type !== 'select' && !labelText
-                  ? renderer(column, value, this)
-                  : operator === 'in'
-                    ? html`
-                        <ox-select
-                          name=${name}
-                          placeholder=${labelText}
-                          .value=${value}
-                          @change=${(e: CustomEvent) =>
-                            e.target?.dispatchEvent(
-                              new CustomEvent('filter-change', {
-                                detail: {
-                                  name,
-                                  operator,
-                                  value: e.detail
-                                }
-                              })
-                            )}
-                        >
-                          <ox-popup-list multiple attr-selected="checked" with-search>
-                            ${renderer(column, value, this)}
-                          </ox-popup-list>
-                        </ox-select>
-                      `
-                    : html`
-                        <ox-select
-                          name=${name}
-                          placeholder=${labelText}
-                          .value=${value}
-                          @change=${(e: CustomEvent) =>
-                            e.target?.dispatchEvent(
-                              new CustomEvent('filter-change', {
-                                detail: {
-                                  name,
-                                  operator,
-                                  value: e.detail
-                                }
-                              })
-                            )}
-                        >
-                          <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
-                        </ox-select>
-                      `
+              return type === 'boolean' || type === 'checkbox'
+                ? renderer(column, value, this)
+                : type !== 'select' && labelText
+                  ? html`<label filter-title ?between=${operator === 'between'}
+                      ><span>${labelText}</span> ${renderer(column, value, this)}
+                    </label> `
+                  : type !== 'select' && !labelText
+                    ? renderer(column, value, this)
+                    : operator === 'in'
+                      ? html`
+                          <ox-select
+                            name=${name}
+                            placeholder=${labelText}
+                            .value=${value}
+                            @change=${(e: CustomEvent) =>
+                              e.target?.dispatchEvent(
+                                new CustomEvent('filter-change', {
+                                  detail: {
+                                    name,
+                                    operator,
+                                    value: e.detail
+                                  }
+                                })
+                              )}
+                          >
+                            <ox-popup-list multiple attr-selected="checked" with-search>
+                              ${renderer(column, value, this)}
+                            </ox-popup-list>
+                          </ox-select>
+                        `
+                      : html`
+                          <ox-select
+                            name=${name}
+                            placeholder=${labelText}
+                            .value=${value}
+                            @change=${(e: CustomEvent) =>
+                              e.target?.dispatchEvent(
+                                new CustomEvent('filter-change', {
+                                  detail: {
+                                    name,
+                                    operator,
+                                    value: e.detail
+                                  }
+                                })
+                              )}
+                          >
+                            <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
+                          </ox-select>
+                        `
             })}
           </form>
         `

package/stories/accumulator.stories.ts

@@ -219,6 +219,26 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
     <link href="/themes/oops-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
+    <style>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
+
+        --ox-filters-input-placeholder-color: var(--primary-color);
+
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
+
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
+
     <style>
       ox-grist {
         height: 600px;
@@ -280,12 +300,16 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       }
 
       #add button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
         background-color: var(--primary-color);
         border: 0;
         border-radius: 50%;
         padding: 5px;
-        width: 36px;
-        height: 36px;
+        width: 32px;
+        height: 32px;
         cursor: pointer;
       }
 
@@ -295,7 +319,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       }
 
       #add button md-icon {
-        font-size: 2em;
+        font-size: 1.5em;
         color: var(--theme-white-color);
       }
 

package/stories/barcode-input-filter.stories.ts

@@ -152,6 +152,26 @@ const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilte
     <link href="/themes/oops-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
+    <style>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
+
+        --ox-filters-input-placeholder-color: var(--primary-color);
+
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
+
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
+
     <style>
       [slot='headroom'] {
         display: flex;

package/stories/default-filters.stories.ts

@@ -135,6 +135,26 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
     <link href="/themes/oops-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
+    <style>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
+
+        --ox-filters-input-placeholder-color: var(--primary-color);
+
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
+
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
+
     <style>
       [slot='headroom'] {
         display: flex;

package/stories/dynamic-editable.stories.ts

@@ -211,6 +211,26 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
     <link href="/themes/oops-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
+    <style>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
+
+        --ox-filters-input-placeholder-color: var(--primary-color);
+
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
+
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
+
     <style>
       [slot='headroom'] {
         display: flex;

package/stories/empty-sorters.stories.ts

@@ -120,6 +120,26 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) =>
     <link href="/themes/oops-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
+    <style>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
+
+        --ox-filters-input-placeholder-color: var(--primary-color);
+
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
+
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
+
     <style>
       [slot='headroom'] {
         display: flex;

package/stories/explicit-fetch.stories.ts

@@ -125,6 +125,26 @@ const Template: Story<ArgTypes> = ({ explicitFetch = false }: ArgTypes) =>
     <link href="/themes/oops-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
+    <style>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
+
+        --ox-filters-input-placeholder-color: var(--primary-color);
+
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
+
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
+
     <style>
       [slot='headroom'] {
         display: flex;

package/stories/fixed-column.stories.ts

@@ -348,6 +348,26 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
     <link href="/themes/oops-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
+    <style>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
+
+        --ox-filters-input-placeholder-color: var(--primary-color);
+
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
+
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
+
     <style>
       [slot='headroom'] {
         display: flex;
@@ -405,12 +425,16 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
       }
 
       #add button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
         background-color: var(--primary-color);
         border: 0;
         border-radius: 50%;
         padding: 5px;
-        width: 36px;
-        height: 36px;
+        width: 32px;
+        height: 32px;
         cursor: pointer;
       }
 
@@ -420,7 +444,7 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
       }
 
       #add button md-icon {
-        font-size: 2em;
+        font-size: 1.5em;
         color: var(--theme-white-color);
       }
 

package/stories/grist-modes.stories.ts

@@ -373,6 +373,26 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
     <link href="/themes/oops-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
+    <style>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
+
+        --ox-filters-input-placeholder-color: var(--primary-color);
+
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
+
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
+
     <style>
       ox-grist {
         width: 100%;
@@ -435,12 +455,16 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       }
 
       #add button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
         background-color: var(--primary-color);
         border: 0;
         border-radius: 50%;
         padding: 5px;
-        width: 36px;
-        height: 36px;
+        width: 32px;
+        height: 32px;
         cursor: pointer;
       }
 
@@ -450,7 +474,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       }
 
       #add button md-icon {
-        font-size: 2em;
+        font-size: 1.5em;
         color: var(--theme-white-color);
       }
 

package/stories/group-header.stories.ts

@@ -378,6 +378,26 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
     <link href="/themes/oops-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
+    <style>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
+
+        --ox-filters-input-placeholder-color: var(--primary-color);
+
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
+
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
+
     <style>
       [slot='headroom'] {
         display: flex;
@@ -435,12 +455,16 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
       }
 
       #add button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
         background-color: var(--primary-color);
         border: 0;
         border-radius: 50%;
         padding: 5px;
-        width: 36px;
-        height: 36px;
+        width: 32px;
+        height: 32px;
         cursor: pointer;
       }
 
@@ -450,7 +474,7 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
       }
 
       #add button md-icon {
-        font-size: 2em;
+        font-size: 1.5em;
         color: var(--theme-white-color);
       }
 

package/stories/textarea.stories.ts

@@ -207,6 +207,26 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
     <link href="/themes/oops-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
+    <style>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
+
+        --ox-filters-input-placeholder-color: var(--primary-color);
+
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
+
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
+
     <style>
       [slot='headroom'] {
         display: flex;
@@ -264,12 +284,16 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       }
 
       #add button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
         background-color: var(--primary-color);
         border: 0;
         border-radius: 50%;
         padding: 5px;
-        width: 36px;
-        height: 36px;
+        width: 32px;
+        height: 32px;
         cursor: pointer;
       }
 
@@ -279,7 +303,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       }
 
       #add button md-icon {
-        font-size: 2em;
+        font-size: 1.5em;
         color: var(--theme-white-color);
       }