@operato/data-grist 8.0.0-alpha.8 → 8.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "8.0.0-alpha.8",
+  "version": "8.0.0-beta.1",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "./ox-report.js": "./dist/src/data-report.js",
     "./ox-filters-form.js": "./dist/src/filters/filters-form.js",
     "./ox-sorters-control.js": "./dist/src/sorters/sorters-control.js",
-    "./ox-record-creator.js": "./dist/src/record-view/record-creator.js",
+    "./ox-record-creator.js": "./dist/src/record-view/ox-record-creator.js",
     "./ox-grist-personalizer.js": "./dist/src/personalizer/ox-grist-personalizer.js"
   },
   "typesVersions": {
@@ -41,7 +41,7 @@
         "dist/src/sorters/sorters-control.d.ts"
       ],
       "ox-record-creator.js": [
-        "dist/src/record-view/record-creator.d.ts"
+        "dist/src/record-view/ox-record-creator.d.ts"
       ],
       "ox-grist-personalizer.js": [
         "dist/src/personalizer/ox-grist-personalizer.d.ts"
@@ -62,32 +62,32 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/headroom": "^8.0.0-alpha.0",
-    "@operato/input": "^8.0.0-alpha.4",
-    "@operato/p13n": "^8.0.0-alpha.4",
-    "@operato/popup": "^8.0.0-alpha.4",
-    "@operato/pull-to-refresh": "^8.0.0-alpha.0",
-    "@operato/styles": "^8.0.0-alpha.4",
-    "@operato/time-calculator": "^8.0.0-alpha.6",
-    "@operato/utils": "^8.0.0-alpha.0",
+    "@operato/headroom": "^8.0.0-beta.1",
+    "@operato/input": "^8.0.0-beta.1",
+    "@operato/p13n": "^8.0.0-beta.1",
+    "@operato/popup": "^8.0.0-beta.1",
+    "@operato/pull-to-refresh": "^8.0.0-beta.1",
+    "@operato/styles": "^8.0.0-beta.1",
+    "@operato/time-calculator": "^8.0.0-beta.1",
+    "@operato/utils": "^8.0.0-beta.1",
     "i18next": "^23.11.5",
     "json5": "^2.2.0",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.9.2",
+    "@custom-elements-manifest/analyzer": "^0.10.0",
     "@hatiolab/prettier-config": "^1.0.0",
     "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^3.1.6",
+    "@open-wc/testing": "^4.0.0",
     "@types/lodash-es": "^4.17.5",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@web/dev-server": "^0.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@web/dev-server": "^0.4.0",
     "@web/dev-server-storybook": "^2.0.1",
-    "@web/test-runner": "^0.18.0",
-    "concurrently": "^8.0.1",
-    "eslint": "^8.39.0",
+    "@web/test-runner": "^0.19.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f495fb42a98844182ac2db30d7c2aea815488d62"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/themes/calendar-theme.css

@@ -9,7 +9,8 @@ body {
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
   --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-monty-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
   --calendar-monthly-label-color: var(--md-sys-color-secondary);
@@ -35,6 +36,7 @@ body {
   --calendar-weekly-ol-margin: var(--margin-default) 0;
   --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
   --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-week-color: var(--md-sys-color-on-surface);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
   --calendar-weekly-label-color: var(--md-sys-color-secondary);

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/dist/src/record-view/record-creator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"record-creator.js","sourceRoot":"","sources":["../../../src/record-view/record-creator.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-view'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristRecord, ValidationReason } from '../types'\nimport { RecordView } from './record-view'\n\n@customElement('ox-record-creator')\nexport class RecordCreator extends LitElement {\n  @state() grist?: DataGrist\n\n  @property({ type: Object }) callback?: (operation: { [key: string]: any }) => boolean\n  @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur = false\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', (e: Event) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      if (this.lightPopup) {\n        this.lightPopupRecordView()\n      } else {\n        this.popupRecordView()\n      }\n    })\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.grist = this.closest('ox-grist') as DataGrist\n  }\n\n  render() {\n    return html`<slot></slot>`\n  }\n\n  validateRecord(record: GristRecord): { field: string; reason: ValidationReason }[] {\n    const columns = this.grist!.compiledConfig.columns;\n    const invalidFields: { field: string; reason: ValidationReason }[] = [];\n\n    columns.forEach(column => {\n      if (column.record?.mandatory && (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')) {\n        invalidFields.push({\n          field: column.name,\n          reason: ValidationReason.MANDATORY\n        });\n      }\n      // 여기에 추가적인 유효성 검사 규칙을 구현할 수 있습니다.\n    });\n\n    return invalidFields\n  }\n\n  lightPopupRecordView() {\n    const config = this.grist!.compiledConfig\n    var title = 'create'\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var popup = OxPopup.open({\n      template: html`\n        <div title>${title}</div>\n        <ox-record-view\n          @field-change=${(e: CustomEvent) => {\n            const view = e.currentTarget as RecordView\n\n            var { after, before, column, record, row } = (e as CustomEvent).detail as {\n              after: any\n              before: any\n              column: ColumnConfig\n              record: GristRecord\n              row: number\n            }\n\n            var validation = column.validation\n            if (validation && typeof validation == 'function') {\n              if (!validation.call(this, after, before, record, column)) {\n                return\n              }\n            }\n\n            view.record = {\n              ...record,\n              [column.name]: after\n            }\n          }}\n          .columns=${columns}\n          .record=${record}\n          .rowIndex=${rowIndex}\n          @reset=${(e: Event) => {\n            const view = e.currentTarget as RecordView\n            view.record = {}\n          }}\n          @cancel=${(e: Event) => {\n            popup.close()\n          }}\n          @ok=${async (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n            // 레코드 밸리데이션 체크\n            const invalidFields = await this.validateRecord(view.record);\n            if (invalidFields.length > 0) {\n              // const firstInvalidField = invalidFields[0];\n              // if (firstInvalidField) {\n              //   view.setFocus(firstInvalidField.field)\n              // }\n              view.setFocusOnInvalid(invalidFields);\n              return false;\n            }\n\n            popup.close()\n\n            this.dispatchEvent(\n              new CustomEvent('ok', {\n                bubbles: true,\n                composed: true,\n                detail: view.record\n              })\n            )\n          }}\n        ></ox-record-view>\n      `,\n      parent: document.body,\n      preventCloseOnBlur: this.preventCloseOnBlur\n    })\n  }\n\n  popupRecordView() {\n    const config = this.grist!.compiledConfig\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var title = 'create'\n\n    var recordView = document.createElement('ox-record-view') as RecordView\n\n    recordView.columns = columns\n    recordView.record = record\n    recordView.rowIndex = rowIndex\n\n    document.dispatchEvent(\n      new CustomEvent('open-popup', {\n        detail: {\n          template: recordView,\n          options: {\n            backdrop: true,\n            size: 'large',\n            title\n          },\n          callback: (popup: any) => {\n            recordView.addEventListener('reset', (e: Event) => {\n              const view = e.currentTarget as RecordView\n              view.record = {}\n            })\n\n            recordView.addEventListener('cancel', (e: Event) => {\n              popup.close()\n            })\n\n            recordView.addEventListener('ok', async (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n              // 레코드 밸리데이션 체크\n              const invalidFields = await this.validateRecord(view.record);\n              if (invalidFields.length > 0) {\n                const firstInvalidField = invalidFields[0];\n                if (firstInvalidField) {\n                  const fieldElement = view.renderRoot?.querySelector(`[name=\"${firstInvalidField}\"]`);\n                  if (fieldElement) {\n                    (fieldElement as HTMLElement).focus();\n                  }\n                }\n                return false;\n              }\n              \n              if (await this.callback?.(view.record)) {\n                popup.close()\n              } else {\n                // 밸리데이션 실패 시 처리\n                console.error('레코드 밸리데이션 실패');\n                // 여기에 사용자에게 오류 메시지를 표시하는 로직을 추가할 수 있습니다.\n              }\n            })\n\n            recordView.addEventListener('field-change', async (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n              var { after, before, column, record, row } = (e as CustomEvent).detail as {\n                after: any\n                before: any\n                column: ColumnConfig\n                record: GristRecord\n                row: number\n              }\n\n              var validation = column.validation\n              if (validation && typeof validation == 'function') {\n                if (!(await validation.call(this, after, before, record, column))) {\n                  return\n                }\n              }\n\n              view.record = {\n                ...record,\n                [column.name]: after\n              }\n            })\n\n            popup.onclosed = () => {}\n          }\n        }\n      })\n    )\n  }\n}\n"]}

package/src/accumulator/accumulator.ts

@@ -1,63 +0,0 @@
-import { AccumulatorObject, ColumnConfig, GristData } from '../types'
-
-function sum(data: GristData, column: ColumnConfig): number {
-  const name = column.name
-
-  return data.records
-    .filter(record => !Number.isNaN(record[name]))
-    .reduce((sum, record) => {
-      return sum + Number(record[name] || 0)
-    }, 0)
-}
-
-function avg(data: GristData, column: ColumnConfig): number {
-  const name = column.name
-  const effectiveRecords = data.records.filter(record => !Number.isNaN(record[name]))
-
-  return (
-    effectiveRecords.reduce((sum, record) => {
-      return sum + Number(record[name] || 0)
-    }, 0) / effectiveRecords.length
-  )
-}
-
-function count(data: GristData, column: ColumnConfig): number {
-  return data.records.length
-}
-
-function min(data: GristData, column: ColumnConfig): number {
-  const name = column.name
-
-  return Math.min.apply(
-    null,
-    data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name] || 0))
-  )
-}
-
-function max(data: GristData, column: ColumnConfig): number {
-  const name = column.name
-
-  return Math.max.apply(
-    null,
-    data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name] || 0))
-  )
-}
-
-const Accumulators: { [name: string]: (data: GristData, column: ColumnConfig) => string | number } = {
-  sum,
-  avg,
-  count,
-  min,
-  max
-}
-
-export function accumulate(data: GristData, column: ColumnConfig, accumulator: AccumulatorObject) {
-  accumulator = typeof accumulator === 'object' ? accumulator.type : accumulator
-  var func = accumulator as (data: GristData, column: ColumnConfig) => string | number
-
-  if (typeof accumulator == 'string') {
-    func = Accumulators[accumulator]
-  }
-
-  return func.call(null, data, column)
-}

package/src/configure/column-builder.ts

@@ -1,114 +0,0 @@
-import { FilterConfigObject, FilterOperator } from '..'
-import { NOOP } from '../const'
-import { getEditor } from '../editors'
-import { generateGutterColumn } from '../gutters'
-import { getGristEventHandler } from '../handlers'
-import { getRenderer } from '../renderers'
-import { ColumnConfig } from '../types'
-
-export const buildColumn = (column: any): ColumnConfig => {
-  var compiled: ColumnConfig = { ...column }
-
-  if (column.type == 'gutter') {
-    compiled = generateGutterColumn(column)
-  }
-
-  var { name, header, record, handlers, label, filter } = compiled
-
-  /* header */
-
-  if (typeof header == 'string') {
-    compiled.header = {
-      renderer: () => header
-    }
-  }
-
-  if (typeof compiled.header?.renderer == 'string') {
-    const text = compiled.header.renderer
-    compiled.header = {
-      ...compiled.header,
-      renderer: () => text
-    }
-  }
-
-  /* label */
-  if (label) {
-    let type = typeof label
-    switch (type) {
-      case 'boolean':
-        compiled.label = {
-          renderer: compiled.header?.renderer || (() => name)
-        }
-        break
-      case 'string':
-        compiled.label = {
-          renderer: () => label
-        }
-        break
-      default:
-        compiled.label = label
-    }
-  } else {
-    compiled.label = false
-  }
-
-  /*
-   * record
-   */
-  var { renderer: recordRenderer, editor, editable, classifier } = record || {}
-
-  recordRenderer = getRenderer(recordRenderer || column.type)
-
-  if (editable !== false && typeof editor !== 'function') {
-    editor = getEditor(column.type)
-  }
-
-  if (typeof classifier !== 'function') {
-    classifier = NOOP
-  }
-
-  compiled.record = {
-    ...record,
-    classifier,
-    renderer: recordRenderer,
-    editor
-  }
-
-  /* filter */
-  if (filter) {
-    let type = typeof filter
-    switch (type) {
-      case 'boolean':
-        compiled.filter = {
-          type: column.type,
-          operator: 'eq'
-        }
-        break
-      case 'string':
-        compiled.filter = {
-          type: column.type,
-          operator: filter as FilterOperator
-        }
-        break
-      default:
-        compiled.filter = {
-          //@ts-ignore
-          type: column.type,
-          operator: 'eq',
-          ...(filter as FilterConfigObject)
-        }
-    }
-  }
-
-  /* handler */
-  var { click, dblclick, focus, contextmenu } = handlers || {}
-
-  compiled.handlers = {
-    click: click && getGristEventHandler(click),
-    dblclick: dblclick && getGristEventHandler(dblclick),
-    focus: focus && getGristEventHandler(focus),
-    contextmenu: contextmenu && getGristEventHandler(contextmenu)
-  }
-
-  return compiled
-}

package/src/configure/config-builder.ts

@@ -1,40 +0,0 @@
-import { GristConfig, ColumnConfig } from '../types'
-import { buildColumn } from './column-builder'
-import { buildImexOptions } from './imex-option-builder'
-import { buildListOptions } from './list-option-builder'
-import { buildTreeOptions } from './tree-option-builder'
-import { buildRowsOptions } from './rows-option-builder'
-import { buildFiltersOptions } from './filters-option-builder'
-
-function findLastIndexWithCondition(arr: ColumnConfig[], condition: (x: ColumnConfig) => boolean) {
-  for (let i = arr.length - 1; i >= 0; i--) {
-    if (condition(arr[i])) {
-      return i
-    }
-  }
-  return -1
-}
-
-export const buildConfig = (config: any): GristConfig => {
-  var { columns = [], rows = {}, pagination, sorters, filters, list, tree, imex } = config
-
-  /* 마지막 fixed 컬럼 앞의 모든 컬럼의 fixed를 true로 설정한다. */
-  const lastFixedIndex = findLastIndexWithCondition(columns, x => !!x.fixed)
-  if (lastFixedIndex >= 0) {
-    for (let i = 0; i < lastFixedIndex; i++) {
-      columns[i].fixed = true
-    }
-  }
-
-  return {
-    ...config,
-    columns: columns.map((column: any) => buildColumn(column)),
-    rows: buildRowsOptions(rows),
-    pagination,
-    sorters,
-    filters: buildFiltersOptions(filters),
-    list: buildListOptions(list),
-    tree: buildTreeOptions(tree),
-    imex: buildImexOptions(imex)
-  }
-}

package/src/configure/filters-option-builder.ts

@@ -1,8 +0,0 @@
-import { FiltersConfig } from '../types'
-
-export const buildFiltersOptions = (filtersConfig: FiltersConfig | undefined): FiltersConfig => {
-  return {
-    header: false,
-    ...filtersConfig
-  }
-}

package/src/configure/imex-option-builder.ts

@@ -1,5 +0,0 @@
-import { ImexConfig } from '../types'
-
-export const buildImexOptions = (imex: any): ImexConfig | undefined => {
-  return imex
-}

package/src/configure/list-option-builder.ts

@@ -1,9 +0,0 @@
-import { ListConfig } from '../types'
-
-export const buildListOptions = (list: ListConfig | undefined): ListConfig => {
-  return {
-    fields: ['name', 'description', 'updatedAt'],
-    details: [],
-    ...list
-  }
-}

package/src/configure/rows-option-builder.ts

@@ -1,38 +0,0 @@
-import { NOOP } from '../const'
-import { RowsConfig } from '../types'
-import { getGristEventHandler } from '../handlers'
-
-export const buildRowsOptions = (rows: any): RowsConfig => {
-  var {
-    appendable = true,
-    editable = true,
-    insertable = false,
-    selectable,
-    groups = [],
-    totals = [],
-    classifier,
-    accumulator
-  } = rows
-
-  /* handler */
-  var { click, dblclick, focus } = rows.handlers || {}
-  if (typeof classifier !== 'function') {
-    classifier = NOOP
-  }
-
-  return {
-    accumulator,
-    appendable,
-    editable,
-    insertable,
-    selectable,
-    groups,
-    totals,
-    handlers: {
-      click: getGristEventHandler(click),
-      dblclick: getGristEventHandler(dblclick),
-      focus: getGristEventHandler(focus)
-    },
-    classifier
-  }
-}

package/src/configure/tree-option-builder.ts

@@ -1,22 +0,0 @@
-import { TreeConfig } from '../types'
-
-const CollapsedAll = () => false
-const ExpandedAll = () => true
-
-export const buildTreeOptions = (tree: TreeConfig | undefined): TreeConfig => {
-  var { expanded = CollapsedAll } = tree || {}
-
-  switch (expanded) {
-    case true:
-      expanded = ExpandedAll
-      break
-    case false:
-      expanded = CollapsedAll
-      break
-  }
-
-  return {
-    ...tree,
-    expanded
-  }
-}

package/src/configure/zero-config.ts

@@ -1,83 +0,0 @@
-import {
-  ColumnConfig,
-  FieldRenderer,
-  GristClassifier,
-  GristConfig,
-  GristData,
-  GristEventHandlerSet,
-  GristRecord,
-  GroupConfig,
-  LabelConfig,
-  ListConfig,
-  TreeConfig,
-  RowsConfig
-} from '../types'
-
-export const ZERO_CLASSIFIER: GristClassifier = (record, rowIndex) => {}
-export const ZERO_FIELD_RENDERER: FieldRenderer = (value, column, record, rowIndex, owner) => {}
-
-export const ZERO_EVENTHANDLERSET: GristEventHandlerSet = {
-  click: undefined,
-  dblclick: undefined,
-  focus: undefined,
-  contextmenu: undefined
-}
-export const ZERO_COLUMNS: ColumnConfig[] = []
-export const ZERO_GROUPS: GroupConfig[] = []
-export const ZERO_TOTALS: [] = []
-export const ZERO_LABEL: LabelConfig = false
-
-export const ZERO_COLUMN: ColumnConfig = {
-  type: '',
-  name: '',
-  header: {
-    renderer: column => {}
-  },
-  record: {
-    renderer: ZERO_FIELD_RENDERER,
-    classifier: ZERO_CLASSIFIER,
-    options: {}
-  },
-  handlers: ZERO_EVENTHANDLERSET,
-  label: ZERO_LABEL
-}
-
-export const ZERO_ROWS: RowsConfig = {
-  appendable: false,
-  insertable: false,
-  editable: false,
-  groups: ZERO_GROUPS,
-  totals: ZERO_TOTALS,
-  classifier: ZERO_CLASSIFIER,
-  handlers: ZERO_EVENTHANDLERSET
-}
-
-export const ZERO_LIST: ListConfig = {
-  fields: ['name', 'description', 'updatedAt'],
-  details: []
-}
-
-export const ZERO_TREE: TreeConfig = {}
-
-export const ZERO_CONFIG: GristConfig = {
-  columns: ZERO_COLUMNS,
-  rows: ZERO_ROWS,
-  list: ZERO_LIST,
-  tree: ZERO_TREE
-}
-
-export const ZERO_RECORD: GristRecord = {}
-export const ZERO_RECORDS: GristRecord[] = []
-
-export const ZERO_DATA: GristData = {
-  records: ZERO_RECORDS
-}
-
-export const ZERO_PAGES = [20, 30, 50, 100]
-
-export const ZERO_PAGINATION = {
-  page: 1,
-  limit: 20,
-  total: 0,
-  pages: ZERO_PAGES
-}

package/src/const.ts

@@ -1 +0,0 @@
-export const NOOP = function () {}