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

package/stories/fixed-column.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 = 120993
   var start = (page! - 1) * limit!
@@ -349,123 +351,8 @@ const Template: Story<ArgTypes> = ({ config }: 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;
-      }
-
-      #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 {
-        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;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist

package/stories/grid-setting.stories.ts

@@ -7,6 +7,8 @@ import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
 import {
   ColumnConfig,
   FetchHandler,
@@ -375,141 +377,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;
-      }
-    </style>
-
-    <style>
-      ox-grist {
-        width: 100%;
-        height: 600px;
-      }
-
-      [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;
-      }
-
-      #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 {
-        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);
-      }
-
-      [slot='setting'] {
-        --md-icon-size: 18px;
-        position: absolute;
-        right: 0;
-        top: 2px;
-        color: rgba(var(--secondary-color-rgb), 0.8);
-        cursor: pointer;
-      }
-
-      [slot='setting']:hover {
-        color: var(--primary-color);
-      }
-
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-
-        #modes {
-          display: none;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist

package/stories/grist-modes.stories.ts

@@ -7,6 +7,8 @@ import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
 import {
   ColumnConfig,
   FetchHandler,
@@ -374,128 +376,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;
-      }
-    </style>
-
-    <style>
-      ox-grist {
-        width: 100%;
-        height: 600px;
-      }
-
-      [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;
-      }
-
-      #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 {
-        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;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist

package/stories/group-header.stories.ts

@@ -7,6 +7,8 @@ import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
 import {
   ColumnConfig,
   FetchHandler,
@@ -379,123 +381,8 @@ const Template: Story<ArgTypes> = ({ config }: 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;
-      }
-
-      #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 {
-        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;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist

package/stories/textarea.stories.ts

@@ -7,6 +7,8 @@ import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
 import {
   ColumnConfig,
   FetchHandler,
@@ -208,124 +210,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;
-      }
-    </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;
-      }
-
-      #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;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist