@operato/data-grist 0.2.42 → 0.2.43

package/src/filters/filter-checkbox.ts

@@ -0,0 +1,35 @@
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from '../types'
+
+export const FilterCheckbox: FilterSelectRenderer = (column, owner) => {
+  const options = typeof column.filter !== 'boolean' && column.filter?.options
+
+  return html`
+    <input
+      type="checkbox"
+      @click=${(e: MouseEvent) => {
+        // e.preventDefault()
+        // e.stopPropagation()
+
+        const checkbox: HTMLInputElement = e.target as HTMLInputElement
+
+        // if (checkbox.checked === false && checkbox.indeterminate === false) {
+        //   checkbox.indeterminate = true
+        // } else if ((checkbox.checked = true && checkbox.indeterminate === true)) {
+        //   checkbox.checked = false
+        // }
+
+        // if (checkbox.checked) {
+        //   checkbox.checked = false
+        // } else {
+        //   if (checkbox.checked === false) {
+        //     checkbox.indeterminate = true
+        //   } else {
+        //     checkbox.checked = true
+        //   }
+        // }
+      }}
+    />
+  `
+}

package/src/filters/filter-input.ts

@@ -0,0 +1,10 @@
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from '../types'
+
+export const FilterInput: FilterSelectRenderer = (column, owner) => {
+  const filter = column.filter
+  const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type
+
+  return html` <input type=${type} /> `
+}

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,10 @@
+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" /> - <input name="to" type="number" /> `
+}

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,10 @@
+import { css } from 'lit'
+
+export const FilterStyles = css`
+  [filter] input {
+    background: red;
+  }
+
+  [filter] ox-checkbox {
+  }
+`

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/dist/src/filters/list-select.d.ts

@@ -1,3 +0,0 @@
-import '@operato/popup';
-import { FilterSelectRenderer } from '../types';
-export declare const ListSelect: FilterSelectRenderer;

package/dist/src/filters/list-select.js

@@ -1,12 +0,0 @@
-import '@operato/popup';
-import { html } from 'lit-html';
-export const ListSelect = (column, owner) => {
-    var _a;
-    const options = (_a = column.filter) === null || _a === void 0 ? void 0 : _a.options;
-    return html `
-    <ox-popup-list .config=${column} multiple attr-selected="checked" popup>
-      ${options === null || options === void 0 ? void 0 : options.map((option) => html ` <ox-checkbox option value="${option}">${option}</ox-checkbox> `)}
-    </ox-popup-list>
-  `;
-};
-//# sourceMappingURL=list-select.js.map

package/dist/src/filters/list-select.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"list-select.js","sourceRoot":"","sources":["../../../src/filters/list-select.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAA;AAGvB,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,MAAM,CAAC,MAAM,UAAU,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;;IAChE,MAAM,OAAO,GAAG,MAAA,MAAM,CAAC,MAAM,0CAAE,OAAO,CAAA;IAEtC,OAAO,IAAI,CAAA;6BACgB,MAAM;QAC3B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA,+BAA+B,MAAM,KAAK,MAAM,iBAAiB,CAAC;;GAE5G,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/popup'\n\nimport { FilterSelectRenderer } from '../types'\nimport { html } from 'lit-html'\n\nexport const ListSelect: FilterSelectRenderer = (column, owner) => {\n  const options = column.filter?.options\n\n  return html`\n    <ox-popup-list .config=${column} multiple attr-selected=\"checked\" popup>\n      ${options?.map((option: string) => html` <ox-checkbox option value=\"${option}\">${option}</ox-checkbox> `)}\n    </ox-popup-list>\n  `\n}\n"]}

package/src/filters/list-select.ts

@@ -1,14 +0,0 @@
-import '@operato/popup'
-
-import { FilterSelectRenderer } from '../types'
-import { html } from 'lit-html'
-
-export const ListSelect: FilterSelectRenderer = (column, owner) => {
-  const options = column.filter?.options
-
-  return html`
-    <ox-popup-list .config=${column} multiple attr-selected="checked" popup>
-      ${options?.map((option: string) => html` <ox-checkbox option value="${option}">${option}</ox-checkbox> `)}
-    </ox-popup-list>
-  `
-}