@operato/data-grist 0.2.41 → 0.2.45

package/src/filters/filter-range-date.ts

@@ -0,0 +1,13 @@
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from '../types'
+
+export const FilterRangeDate: FilterSelectRenderer = (column, owner) => {
+  const filter = column.filter
+  var type = typeof filter === 'boolean' ? column.type : filter?.type || column.type
+  if (type === 'datetime') {
+    type = 'datetime-local'
+  }
+
+  return html` <input name="from" type=${type} /> ~ <input name="to" type=${type} /> `
+}

package/src/filters/filter-range-number.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from '../types'
+
+export const FilterRangeNumber: FilterSelectRenderer = (column, owner) => {
+  const filter = column.filter
+  const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type
+
+  return html`
+    <input name="from" type="number" placeholder="minimum" /> ~ <input name="to" type="number" placeholder="maximum" />
+  `
+}

package/src/filters/filter-select.ts

@@ -0,0 +1,11 @@
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from '../types'
+
+export const FilterSelect: FilterSelectRenderer = (column, owner) => {
+  const options = (typeof column.filter !== 'boolean' && column.filter?.options) || []
+
+  return html`
+    ${options?.map((option: string) => html` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}
+  `
+}

package/src/filters/filter-styles.ts

@@ -0,0 +1,40 @@
+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-border-radius: var(--border-radius);
+    --ox-input-font: normal 14px var(--theme-font);
+    --ox-input-color: var(--primary-text-color);
+  }
+
+  [filter] input::placeholder {
+    color: var(--ox-input-placeholder-color);
+    opacity: 0.7;
+  }
+  [filter] input {
+    margin: 0 10px 5px 10px;
+    padding: var(--ox-input-padding);
+    border: var(--ox-input-border);
+    border-radius: var(--ox-input-border-radius);
+    font: var(--ox-input-font);
+    color: var(--ox-input-color, #3a5877);
+  }
+  [filter] input[type='number'] {
+    padding-right: var(--padding-narrow);
+    max-width: 100px;
+  }
+  [filter] input[type='datetime-local'] {
+    padding-right: var(--padding-narrow);
+    max-width: 170px;
+  }
+  [filter] input[name='from'] {
+    margin: 0 0 5px 10px;
+  }
+  [filter] input[name='to'] {
+    margin: 0 10px 5px 0;
+  }
+`

package/src/filters/index.ts

@@ -1,3 +1,7 @@
 export * from './registry'
 
-export * from './list-select'
+export * from './filter-select'
+export * from './filter-input'
+export * from './filter-checkbox'
+export * from './filter-range-date'
+export * from './filter-range-number'

package/src/filters/registry.ts

@@ -1,30 +1,33 @@
 import { FilterSelectRenderer } from '../types'
-import { ListSelect } from './list-select'
+import { FilterCheckbox } from './filter-checkbox'
+import { FilterInput } from './filter-input'
+import { FilterRangeDate } from './filter-range-date'
+import { FilterRangeNumber } from './filter-range-number'
+import { FilterSelect } from './filter-select'
 
 var RENDERERS: {
   [name: string]: FilterSelectRenderer
 } = {
-  string: ListSelect,
-  text: ListSelect,
-  email: ListSelect,
-  tel: ListSelect,
-  password: ListSelect,
-  integer: ListSelect,
-  float: ListSelect,
-  number: ListSelect,
-  select: ListSelect,
-  boolean: ListSelect,
-  checkbox: ListSelect,
-  month: ListSelect,
-  week: ListSelect,
-  date: ListSelect,
-  time: ListSelect,
-  datetime: ListSelect,
-  color: ListSelect,
-  progress: ListSelect,
-  link: ListSelect,
-  image: ListSelect,
-  json5: ListSelect
+  string: FilterInput,
+  text: FilterInput,
+  email: FilterInput,
+  tel: FilterInput,
+  integer: FilterRangeNumber,
+  float: FilterRangeNumber,
+  number: FilterRangeNumber,
+  select: FilterSelect,
+  boolean: FilterCheckbox,
+  checkbox: FilterCheckbox,
+  month: FilterRangeDate,
+  week: FilterRangeDate,
+  date: FilterRangeDate,
+  time: FilterRangeDate,
+  datetime: FilterRangeDate,
+  color: FilterInput,
+  progress: FilterRangeNumber,
+  link: FilterInput,
+  image: FilterInput,
+  json5: FilterInput
 }
 
 export function registerRenderer(type: string, renderer: FilterSelectRenderer) {
@@ -44,5 +47,5 @@ export function getRenderer(type: string | FilterSelectRenderer): FilterSelectRe
     return type
   }
 
-  return RENDERERS[type || 'text'] || ListSelect
+  return RENDERERS[type || 'text'] || FilterSelect
 }

package/src/types.ts

@@ -1,13 +1,12 @@
-import { TemplateResult } from 'lit-html'
-
 import { DataCardField } from './data-card/data-card-field'
 import { DataCardGutter } from './data-card/data-card-gutter'
-import { RecordCard } from './data-card/record-card'
 import { DataGridField } from './data-grid/data-grid-field'
 import { DataListField } from './data-list/data-list-field'
 import { DataListGutter } from './data-list/data-list-gutter'
-import { RecordPartial } from './data-list/record-partial'
 import { DataReportField } from './data-report/data-report-field'
+import { RecordCard } from './data-card/record-card'
+import { RecordPartial } from './data-list/record-partial'
+import { TemplateResult } from 'lit-html'
 
 export type GristConfig = {
   columns: ColumnConfig[]
@@ -19,7 +18,7 @@ export type GristConfig = {
 
 export type SorterConfig = { name: string; desc?: boolean }
 export type SortersConfig = SorterConfig[]
-export type FilterConfig = { type: string; options?: { [key: string]: any } }
+export type FilterConfig = { type: string; options?: { [key: string]: any } } | boolean
 
 export type PaginationConfig = {
   page?: number

package/themes/grist-theme.css

@@ -33,6 +33,9 @@ body {
   --grid-header-splitter-border-hover: 1px solid var(--primary-color);
   --grid-header-color: rgba(var(--secondary-color-rgb), 0.8);
   --grid-header-font: bold var(--fontsize-small) var(--theme-font);
+  --grid-header-filter-title-color: var(--primary-text-color);
+  --grid-header-filter-title-font: normal 12px var(--theme-font);
+  --grid-header-filter-title-icon-color: var(--primary-color);
 
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: rgba(255, 255, 255, 0.4);