@operato/data-grist 2.0.0-alpha.90 → 2.0.0-alpha.92

package/stories/accumulator.stories.ts

@@ -16,6 +16,8 @@ import {
   ValidationCallback
 } from '../src/types.js'
 
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
   var total = 25
   var start = (page! - 1) * limit!
@@ -220,23 +222,8 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
     <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;
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <style>
@@ -244,103 +231,8 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
         height: 600px;
       }
 
-      [slot='headroom'] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: unset;
-        box-shadow: var(--box-shadow);
-
-        --md-icon-size: 24px;
-      }
-      #sorters md-icon,
-      #modes md-icon {
-        --md-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
-
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
-
-      #modes > * {
-        padding: var(--padding-narrow);
-        opacity: 0.5;
-        color: var(--primary-text-color);
-        cursor: pointer;
-      }
-
-      #modes > md-icon[active] {
-        border-radius: 9px;
-        background-color: rgba(var(--primary-color-rgb), 0.05);
-        opacity: 1;
-        color: var(--secondary-text-color);
-        cursor: default;
-      }
-
-      #modes > md-icon:hover {
-        opacity: 1;
-        color: var(--secondary-text-color);
-      }
-
-      #add {
-        margin-left: auto;
-        text-align: right;
-      }
-
-      #add button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        background-color: var(--primary-color);
-        border: 0;
-        border-radius: 50%;
-        padding: 5px;
-        width: 32px;
-        height: 32px;
-        cursor: pointer;
-      }
-
-      #add button:hover {
-        background-color: var(--focus-background-color);
-        box-shadow: var(--box-shadow);
-      }
-
-      #add button md-icon {
-        font-size: 1.5em;
-        color: var(--theme-white-color);
-      }
-
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      #filters * {
-        margin-right: var(--margin-default);
-      }
-
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-
-        #modes {
-          display: none;
-        }
+      ox-filters-form {
+        flex: 1;
       }
     </style>
 
@@ -351,14 +243,13 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       ?url-params-sensitive=${urlParamsSensitive}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="filters">
           <ox-filters-form autofocus></ox-filters-form>
+          <ox-record-creator id="add" light-popup>
+            <button><md-icon>add</md-icon></button>
+          </ox-record-creator>
         </div>
-
-        <ox-record-creator id="add" light-popup>
-          <button><md-icon>add</md-icon></button>
-        </ox-record-creator>
       </div>
     </ox-grist>`
 

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

@@ -8,6 +8,8 @@ import { html, TemplateResult } from 'lit'
 
 import { FetchHandler } from '../src/types.js'
 
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
 const fetchHandler: FetchHandler = async ({ filters, page, limit }) => {
   var total = 120993
   var start = (page! - 1) * limit!
@@ -153,75 +155,8 @@ const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilte
     <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;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: var(--theme-white-color);
-        box-shadow: var(--box-shadow);
-
-        --md-icon-size: 24px;
-      }
-      #sorters md-icon,
-      #modes md-icon {
-        --md-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
-
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
-
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      #filters * {
-        margin-right: var(--margin-default);
-      }
-
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-
-        #modes {
-          display: none;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist
@@ -230,26 +165,26 @@ const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilte
       .fetchHandler=${fetchHandler}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="filters">
           <ox-filters-form></ox-filters-form>
-        </div>
 
-        <div id="sorters">
-          Sort
-          <md-icon
-            @click=${(e: Event) => {
-              const target = e.currentTarget as HTMLElement
-              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-                right: 0,
-                top: target.offsetTop + target.offsetHeight
-              })
-            }}
-            >expand_more</md-icon
-          >
-          <ox-popup id="sorter-control">
-            <ox-sorters-control> </ox-sorters-control>
-          </ox-popup>
+          <div id="sorters">
+            Sort
+            <md-icon
+              @click=${(e: Event) => {
+                const target = e.currentTarget as HTMLElement
+                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</md-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
         </div>
       </div>
     </ox-grist>`

package/stories/default-filters.stories.ts

@@ -8,6 +8,8 @@ import { html, TemplateResult } from 'lit'
 
 import { FetchHandler } from '../src/types.js'
 
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
 const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {
   var total = 120993
   var start = (page! - 1) * limit!
@@ -136,75 +138,8 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
     <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;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: unset;
-        box-shadow: var(--box-shadow);
-
-        --md-icon-size: 24px;
-      }
-      #sorters md-icon,
-      #modes md-icon {
-        --md-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
-
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
-
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      #filters * {
-        margin-right: var(--margin-default);
-      }
-
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-
-        #modes {
-          display: none;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist

package/stories/dynamic-editable.stories.ts

@@ -7,6 +7,7 @@ import '@material/web/icon/icon.js'
 import { html, TemplateResult } from 'lit'
 
 import { FetchHandler } from '../src/types.js'
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
 const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {
   var total = 5
@@ -212,103 +213,8 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
     <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;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: var(--theme-white-color);
-        box-shadow: var(--box-shadow);
-
-        --md-icon-size: 24px;
-      }
-      #sorters md-icon,
-      #modes md-icon {
-        --md-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
-
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
-
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      #filters * {
-        margin-right: var(--margin-default);
-      }
-
-      #add {
-        text-align: right;
-      }
-
-      #add button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        background-color: var(--primary-color);
-        border: 0;
-        border-radius: 50%;
-        padding: 5px;
-        width: 32px;
-        height: 32px;
-        cursor: pointer;
-      }
-
-      #add button:hover {
-        background-color: var(--focus-background-color);
-        box-shadow: var(--box-shadow);
-      }
-
-      #add button md-icon {
-        font-size: 1.5em;
-        color: var(--theme-white-color);
-      }
-
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-
-        #modes {
-          display: none;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist

package/stories/empty-sorters.stories.ts

@@ -7,6 +7,7 @@ import '@material/web/icon/icon.js'
 import { html, TemplateResult } from 'lit'
 
 import { FetchHandler } from '../src/types.js'
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
 const fetchHandler: FetchHandler = async ({ filters, page, limit }) => {
   var total = 120993
@@ -121,75 +122,8 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) =>
     <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;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: var(--theme-white-color);
-        box-shadow: var(--box-shadow);
-
-        --md-icon-size: 24px;
-      }
-      #sorters md-icon,
-      #modes md-icon {
-        --md-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
-
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
-
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      #filters * {
-        margin-right: var(--margin-default);
-      }
-
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-
-        #modes {
-          display: none;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist

package/stories/explicit-fetch.stories.ts

@@ -7,6 +7,7 @@ import '@material/web/icon/icon.js'
 import { html, TemplateResult } from 'lit'
 
 import { FetchHandler } from '../src/types.js'
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
   var total = 120993
@@ -126,75 +127,8 @@ const Template: Story<ArgTypes> = ({ explicitFetch = false }: ArgTypes) =>
     <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;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: var(--theme-white-color);
-        box-shadow: var(--box-shadow);
-
-        --md-icon-size: 24px;
-      }
-      #sorters md-icon,
-      #modes md-icon {
-        --md-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
-
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
-
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      #filters * {
-        margin-right: var(--margin-default);
-      }
-
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-
-        #modes {
-          display: none;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist