@operato/data-grist 2.0.0-alpha.8 → 2.0.0-alpha.80

package/stories/tree-column-with-checkbox.stories.ts

@@ -3,7 +3,7 @@ import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
 import '../src/record-view/record-creator.js'
 import '@operato/popup/ox-popup-list.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -214,149 +214,159 @@ interface ArgTypes {
   config: object
 }
 
-const Template: Story<ArgTypes> = ({ config }: ArgTypes) => html` <link
-    href="https://fonts.googleapis.com/css?family=Material+Icons"
-    rel="stylesheet"
-  />
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/oops-theme.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
+  html` <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
 
-  <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);
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-      --mdc-icon-size: 24px;
-    }
-    #sorters mwc-icon,
-    #modes mwc-icon {
-      --mdc-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;
-    }
+    <style>
+      ox-grist {
+        width: 100%;
+        height: 600px;
+      }
 
-    #sorters > * {
-      padding: var(--padding-narrow);
-      vertical-align: middle;
-    }
+      [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);
 
-    #modes > * {
-      padding: var(--padding-narrow);
-      opacity: 0.5;
-      color: var(--primary-text-color);
-      cursor: pointer;
-    }
+        --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;
+      }
 
-    #modes > mwc-icon[active] {
-      border-radius: 9px;
-      background-color: rgba(var(--primary-color-rgb), 0.05);
-      opacity: 1;
-      color: var(--secondary-text-color);
-      cursor: default;
-    }
+      #sorters > * {
+        padding: var(--padding-narrow);
+        vertical-align: middle;
+      }
 
-    #modes > mwc-icon:hover {
-      opacity: 1;
-      color: var(--secondary-text-color);
-    }
+      #modes > * {
+        padding: var(--padding-narrow);
+        opacity: 0.5;
+        color: var(--primary-text-color);
+        cursor: pointer;
+      }
 
-    #add {
-      width: 50px;
-      text-align: right;
-    }
+      #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;
+      }
 
-    #add button {
-      background-color: var(--primary-color);
-      border: 0;
-      border-radius: 50%;
-      padding: 5px;
-      width: 36px;
-      height: 36px;
-      cursor: pointer;
-    }
+      #modes > md-icon:hover {
+        opacity: 1;
+        color: var(--secondary-text-color);
+      }
 
-    #add button:hover {
-      background-color: var(--focus-background-color);
-      box-shadow: var(--box-shadow);
-    }
+      #add {
+        width: 50px;
+        text-align: right;
+      }
 
-    #add button mwc-icon {
-      font-size: 2em;
-      color: var(--theme-white-color);
-    }
+      #add button {
+        background-color: var(--primary-color);
+        border: 0;
+        border-radius: 50%;
+        padding: 5px;
+        width: 36px;
+        height: 36px;
+        cursor: pointer;
+      }
 
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+      #add button:hover {
+        background-color: var(--focus-background-color);
+        box-shadow: var(--box-shadow);
+      }
 
-    #filters * {
-      margin-right: var(--margin-default);
-    }
+      #add button md-icon {
+        font-size: 2em;
+        color: var(--theme-white-color);
+      }
 
-    @media only screen and (max-width: 460px) {
       #filters {
-        flex-direction: column;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      #modes {
-        display: none;
+      #filters * {
+        margin-right: var(--margin-default);
       }
-    }
-  </style>
 
-  <ox-grist
-    mode="GRID"
-    .config=${config}
-    .fetchHandler=${fetchHandler}
-    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
-  >
-    <div slot="headroom">
-      <div id="filters">
-        <ox-filters-form autofocus></ox-filters-form>
-      </div>
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
 
-      <div id="sorters">
-        Sort
-        <mwc-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</mwc-icon
-        >
-        <ox-popup id="sorter-control">
-          <ox-sorters-control> </ox-sorters-control>
-        </ox-popup>
-      </div>
+        #modes {
+          display: none;
+        }
+      }
+    </style>
+
+    <ox-grist
+      mode="GRID"
+      .config=${config}
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form autofocus></ox-filters-form>
+        </div>
 
-      <ox-record-creator id="add" light-popup>
-        <button><mwc-icon>add</mwc-icon></button>
-      </ox-record-creator>
-    </div>
-  </ox-grist>`
+        <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>
+
+        <ox-record-creator id="add" light-popup>
+          <button><md-icon>add</md-icon></button>
+        </ox-record-creator>
+      </div>
+    </ox-grist>`
 
 export const Regular = Template.bind({})
 Regular.args = {

package/stories/tree-column.stories.ts

@@ -3,7 +3,7 @@ import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
 import '../src/record-view/record-creator.js'
 import '@operato/popup/ox-popup-list.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -213,149 +213,159 @@ interface ArgTypes {
   config: object
 }
 
-const Template: Story<ArgTypes> = ({ config }: ArgTypes) => html` <link
-    href="https://fonts.googleapis.com/css?family=Material+Icons"
-    rel="stylesheet"
-  />
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/oops-theme.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
+  html` <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
 
-  <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);
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-      --mdc-icon-size: 24px;
-    }
-    #sorters mwc-icon,
-    #modes mwc-icon {
-      --mdc-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;
-    }
+    <style>
+      ox-grist {
+        width: 100%;
+        height: 600px;
+      }
 
-    #sorters > * {
-      padding: var(--padding-narrow);
-      vertical-align: middle;
-    }
+      [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);
 
-    #modes > * {
-      padding: var(--padding-narrow);
-      opacity: 0.5;
-      color: var(--primary-text-color);
-      cursor: pointer;
-    }
+        --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;
+      }
 
-    #modes > mwc-icon[active] {
-      border-radius: 9px;
-      background-color: rgba(var(--primary-color-rgb), 0.05);
-      opacity: 1;
-      color: var(--secondary-text-color);
-      cursor: default;
-    }
+      #sorters > * {
+        padding: var(--padding-narrow);
+        vertical-align: middle;
+      }
 
-    #modes > mwc-icon:hover {
-      opacity: 1;
-      color: var(--secondary-text-color);
-    }
+      #modes > * {
+        padding: var(--padding-narrow);
+        opacity: 0.5;
+        color: var(--primary-text-color);
+        cursor: pointer;
+      }
 
-    #add {
-      width: 50px;
-      text-align: right;
-    }
+      #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;
+      }
 
-    #add button {
-      background-color: var(--primary-color);
-      border: 0;
-      border-radius: 50%;
-      padding: 5px;
-      width: 36px;
-      height: 36px;
-      cursor: pointer;
-    }
+      #modes > md-icon:hover {
+        opacity: 1;
+        color: var(--secondary-text-color);
+      }
 
-    #add button:hover {
-      background-color: var(--focus-background-color);
-      box-shadow: var(--box-shadow);
-    }
+      #add {
+        width: 50px;
+        text-align: right;
+      }
 
-    #add button mwc-icon {
-      font-size: 2em;
-      color: var(--theme-white-color);
-    }
+      #add button {
+        background-color: var(--primary-color);
+        border: 0;
+        border-radius: 50%;
+        padding: 5px;
+        width: 36px;
+        height: 36px;
+        cursor: pointer;
+      }
 
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+      #add button:hover {
+        background-color: var(--focus-background-color);
+        box-shadow: var(--box-shadow);
+      }
 
-    #filters * {
-      margin-right: var(--margin-default);
-    }
+      #add button md-icon {
+        font-size: 2em;
+        color: var(--theme-white-color);
+      }
 
-    @media only screen and (max-width: 460px) {
       #filters {
-        flex-direction: column;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      #modes {
-        display: none;
+      #filters * {
+        margin-right: var(--margin-default);
       }
-    }
-  </style>
 
-  <ox-grist
-    mode="GRID"
-    .config=${config}
-    .fetchHandler=${fetchHandler}
-    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
-  >
-    <div slot="headroom">
-      <div id="filters">
-        <ox-filters-form autofocus></ox-filters-form>
-      </div>
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
 
-      <div id="sorters">
-        Sort
-        <mwc-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</mwc-icon
-        >
-        <ox-popup id="sorter-control">
-          <ox-sorters-control> </ox-sorters-control>
-        </ox-popup>
-      </div>
+        #modes {
+          display: none;
+        }
+      }
+    </style>
+
+    <ox-grist
+      mode="GRID"
+      .config=${config}
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form autofocus></ox-filters-form>
+        </div>
 
-      <ox-record-creator id="add" light-popup>
-        <button><mwc-icon>add</mwc-icon></button>
-      </ox-record-creator>
-    </div>
-  </ox-grist>`
+        <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>
+
+        <ox-record-creator id="add" light-popup>
+          <button><md-icon>add</md-icon></button>
+        </ox-record-creator>
+      </div>
+    </ox-grist>`
 
 export const Regular = Template.bind({})
 Regular.args = {

package/themes/grist-theme.css

@@ -41,7 +41,7 @@ body {
 
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: #f9f7f5;
-  --grid-record-padding: 0 0 0 var(--padding-default);
+  --grid-record-padding: 0 5px 0 5px;
   --grid-record-color: var(--secondary-color);
   --grid-record-color-hover: var(--primary-color);
   --grid-record-wide-fontsize: var(--fontsize-small);

package/dist/src/value-generator/date-generator.d.ts

@@ -1,6 +0,0 @@
-export type RelativeDateParams = {
-    relativeDate?: number;
-    timeZone?: string;
-    format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions;
-};
-export declare const getRelativeDate: (params?: RelativeDateParams) => Date | number | string;

package/dist/src/value-generator/date-generator.js

@@ -1,30 +0,0 @@
-export const getRelativeDate = (params = {}) => {
-    const { relativeDate = 0, timeZone, format } = params;
-    const relativeSeconds = relativeDate * 24 * 60 * 60;
-    const now = new Date();
-    let currentDate;
-    if (timeZone) {
-        const options = { timeZone };
-        const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0];
-        currentDate = new Date(currentDateISOString);
-    }
-    else {
-        currentDate = now;
-    }
-    const startOfDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
-    const targetTime = startOfDay.getTime() + relativeSeconds * 1000;
-    if (format === 'date') {
-        return new Date(targetTime);
-    }
-    else if (format === 'timestamp') {
-        return targetTime;
-    }
-    else if (format) {
-        const formatter = new Intl.DateTimeFormat(undefined, format);
-        return formatter.format(new Date(targetTime));
-    }
-    else {
-        return new Date(targetTime);
-    }
-};
-//# sourceMappingURL=date-generator.js.map

package/dist/src/value-generator/date-generator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-generator.js","sourceRoot":"","sources":["../../../src/value-generator/date-generator.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAA6B,EAAE,EAA0B,EAAE;IACzF,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;IACrD,MAAM,eAAe,GAAG,YAAY,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;IAEnD,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAA;IACtB,IAAI,WAAiB,CAAA;IAErB,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,OAAO,GAA+B,EAAE,QAAQ,EAAE,CAAA;QACxD,MAAM,oBAAoB,GAAG,GAAG,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;QAC/E,WAAW,GAAG,IAAI,IAAI,CAAC,oBAAoB,CAAC,CAAA;IAC9C,CAAC;SAAM,CAAC;QACN,WAAW,GAAG,GAAG,CAAA;IACnB,CAAC;IAED,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE,WAAW,CAAC,QAAQ,EAAE,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC,CAAA;IACrG,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,EAAE,GAAG,eAAe,GAAG,IAAI,CAAA;IAEhE,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,CAAA;IAC7B,CAAC;SAAM,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,UAAU,CAAA;IACnB,CAAC;SAAM,IAAI,MAAM,EAAE,CAAC;QAClB,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;QAC5D,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAA;IAC/C,CAAC;SAAM,CAAC;QACN,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,CAAA;IAC7B,CAAC;AACH,CAAC,CAAA","sourcesContent":["export type RelativeDateParams = {\n  relativeDate?: number\n  timeZone?: string\n  format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions\n}\n\nexport const getRelativeDate = (params: RelativeDateParams = {}): Date | number | string => {\n  const { relativeDate = 0, timeZone, format } = params\n  const relativeSeconds = relativeDate * 24 * 60 * 60\n\n  const now = new Date()\n  let currentDate: Date\n\n  if (timeZone) {\n    const options: Intl.DateTimeFormatOptions = { timeZone }\n    const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0]\n    currentDate = new Date(currentDateISOString)\n  } else {\n    currentDate = now\n  }\n\n  const startOfDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())\n  const targetTime = startOfDay.getTime() + relativeSeconds * 1000\n\n  if (format === 'date') {\n    return new Date(targetTime)\n  } else if (format === 'timestamp') {\n    return targetTime\n  } else if (format) {\n    const formatter = new Intl.DateTimeFormat(undefined, format)\n    return formatter.format(new Date(targetTime))\n  } else {\n    return new Date(targetTime)\n  }\n}\n"]}

package/dist/src/value-generator/hour-time-generator.d.ts

@@ -1,7 +0,0 @@
-export type RelativeHourTimeParams = {
-    timeZone?: string;
-    format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions;
-    relativeHour?: number;
-    relativeSeconds?: number;
-};
-export declare const getRelativeHourTime: (params?: RelativeHourTimeParams) => Date | number | string;