@operato/form 1.0.0-beta.4 → 1.0.0-beta.43

package/dist/src/filters/filter-range-date.js

@@ -0,0 +1,54 @@
+import { html } from 'lit-html';
+export const FilterRangeDate = (filter, value, owner) => {
+    var { name, type, operator } = filter;
+    const [from, to] = value instanceof Array ? value : [];
+    if (type === 'datetime') {
+        type = 'datetime-local';
+    }
+    return html `
+    <input
+      name=${name}
+      type=${type}
+      .value=${from}
+      from
+      @keyup=${(e) => {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        ;
+        e.target.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name,
+                operator,
+                value: Array.from(e.target.parentElement.querySelectorAll('input[from], input[to]')).map(input => input.value)
+            }
+        }));
+    }}
+    />
+    ~
+    <input
+      name=${name}
+      type=${type}
+      .value=${to}
+      to
+      @keyup=${(e) => {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        ;
+        e.target.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name,
+                operator,
+                value: Array.from(e.target.parentElement.querySelectorAll('input[from], input[to]')).map(input => input.value)
+            }
+        }));
+    }}
+    />
+  `;
+};
+//# sourceMappingURL=filter-range-date.js.map

package/dist/src/filters/filter-range-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-range-date.js","sourceRoot":"","sources":["../../../src/filters/filter-range-date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,eAAe,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC5E,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAA;IACrC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEtD,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,IAAI,GAAG,gBAAgB,CAAA;KACxB;IAED,OAAO,IAAI,CAAA;;aAEA,IAAI;aACJ,IAAI;eACF,IAAI;;eAEJ,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,OAAM;SACP;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI;gBACJ,QAAQ;gBACR,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;;;aAIM,IAAI;aACJ,IAAI;eACF,EAAE;;eAEF,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,OAAM;SACP;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI;gBACJ,QAAQ;gBACR,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from './types.js'\n\nexport const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {\n  var { name, type, operator } = filter\n  const [from, to] = value instanceof Array ? value : []\n\n  if (type === 'datetime') {\n    type = 'datetime-local'\n  }\n\n  return html`\n    <input\n      name=${name}\n      type=${type}\n      .value=${from}\n      from\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name,\n              operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n    ~\n    <input\n      name=${name}\n      type=${type}\n      .value=${to}\n      to\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name,\n              operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

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

@@ -0,0 +1,2 @@
+import { FilterSelectRenderer } from './types.js';
+export declare const FilterRangeNumber: FilterSelectRenderer;

package/dist/src/filters/filter-range-number.js

@@ -0,0 +1,53 @@
+import { html } from 'lit-html';
+export const FilterRangeNumber = (filter, value, owner) => {
+    const { name, operator } = filter;
+    const [from, to] = value instanceof Array ? value : [];
+    return html `
+    <input
+      name=${name}
+      type="number"
+      placeholder="minimum"
+      .value=${from}
+      from
+      @keyup=${(e) => {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        ;
+        e.target.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name,
+                operator,
+                value: Array.from(e.target.parentElement.querySelectorAll('input[from], input[to]')).map(input => input.value)
+            }
+        }));
+    }}
+    />
+    ~
+    <input
+      name=${name}
+      type="number"
+      placeholder="maximum"
+      .value=${to}
+      to
+      @keyup=${(e) => {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        ;
+        e.target.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name,
+                operator,
+                value: Array.from(e.target.parentElement.querySelectorAll('input[from], input[to]')).map(input => input.value)
+            }
+        }));
+    }}
+    />
+  `;
+};
+//# sourceMappingURL=filter-range-number.js.map

package/dist/src/filters/filter-range-number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-range-number.js","sourceRoot":"","sources":["../../../src/filters/filter-range-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,iBAAiB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC9E,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAA;IACjC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEtD,OAAO,IAAI,CAAA;;aAEA,IAAI;;;eAGF,IAAI;;eAEJ,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,OAAM;SACP;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI;gBACJ,QAAQ;gBACR,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;;;aAIM,IAAI;;;eAGF,EAAE;;eAEF,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,OAAM;SACP;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI;gBACJ,QAAQ;gBACR,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from './types.js'\n\nexport const FilterRangeNumber: FilterSelectRenderer = (filter, value, owner) => {\n  const { name, operator } = filter\n  const [from, to] = value instanceof Array ? value : []\n\n  return html`\n    <input\n      name=${name}\n      type=\"number\"\n      placeholder=\"minimum\"\n      .value=${from}\n      from\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name,\n              operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n    ~\n    <input\n      name=${name}\n      type=\"number\"\n      placeholder=\"maximum\"\n      .value=${to}\n      to\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name,\n              operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

package/dist/src/filters/filter-select.d.ts

@@ -0,0 +1,3 @@
+import '@operato/input/ox-checkbox.js';
+import { FilterSelectRenderer } from './types.js';
+export declare const FilterSelect: FilterSelectRenderer;

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

@@ -0,0 +1,33 @@
+import '@operato/input/ox-checkbox.js';
+import { html } from 'lit-html';
+export const FilterSelect = (filter, value, owner) => {
+    /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
+    var { name, type, operator, options = [] } = filter;
+    if (typeof options === 'function') {
+        options = options.call(filter, owner);
+    }
+    options = options.map((option) => {
+        switch (typeof option) {
+            case 'string':
+                return {
+                    display: option,
+                    value: option
+                };
+            case 'object':
+                return {
+                    display: option.display,
+                    value: option.value
+                };
+            default:
+                return option;
+        }
+    });
+    return operator === 'in'
+        ? html `
+        ${options === null || options === void 0 ? void 0 : options.filter((option) => !!option).map((option) => html ` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `)}
+      `
+        : html `
+        ${options === null || options === void 0 ? void 0 : options.map((option) => html ` <div option value=${option.value}>${option.display}&nbsp;</div> `)}
+      `;
+};
+//# sourceMappingURL=filter-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACzE,4DAA4D;IAC5D,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,MAAM,CAAA;IAEnD,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;QACjC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;KACtC;IAED,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE;QACpC,QAAQ,OAAO,MAAM,EAAE;YACrB,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM;oBACf,KAAK,EAAE,MAAM;iBACd,CAAA;YACH,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM,CAAC,OAAO;oBACvB,KAAK,EAAE,MAAM,CAAC,KAAK;iBACpB,CAAA;YACH;gBACE,OAAO,MAAM,CAAA;SAChB;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,QAAQ,KAAK,IAAI;QACtB,CAAC,CAAC,IAAI,CAAA;UACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CACL,MAAM,CAAC,CAAC,MAAuC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAC7D,GAAG,CACF,CAAC,MAAuC,EAAE,EAAE,CAC1C,IAAI,CAAA,8BAA8B,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,iBAAiB,CACpF;OACJ;QACH,CAAC,CAAC,IAAI,CAAA;UACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CACZ,CAAC,MAAuC,EAAE,EAAE,CAC1C,IAAI,CAAA,sBAAsB,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,eAAe,CAC1E;OACF,CAAA;AACP,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from './types.js'\n\nexport const FilterSelect: FilterSelectRenderer = (filter, value, owner) => {\n  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */\n  var { name, type, operator, options = [] } = filter\n\n  if (typeof options === 'function') {\n    options = options.call(filter, owner)\n  }\n\n  options = options.map((option: any) => {\n    switch (typeof option) {\n      case 'string':\n        return {\n          display: option,\n          value: option\n        }\n      case 'object':\n        return {\n          display: option.display,\n          value: option.value\n        }\n      default:\n        return option\n    }\n  })\n\n  return operator === 'in'\n    ? html`\n        ${options\n          ?.filter((option: { display: string; value: any }) => !!option)\n          .map(\n            (option: { display: string; value: any }) =>\n              html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `\n          )}\n      `\n    : html`\n        ${options?.map(\n          (option: { display: string; value: any }) =>\n            html` <div option value=${option.value}>${option.display}&nbsp;</div> `\n        )}\n      `\n}\n"]}

package/dist/src/filters/filter-styles.d.ts

@@ -0,0 +1 @@
+export declare const FilterStyles: import("lit").CSSResult;

package/dist/src/filters/filter-styles.js

@@ -0,0 +1,88 @@
+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-focus-border: 1px solid var(--primary-color);
+    --ox-input-border-radius: var(--border-radius);
+    --ox-input-font: normal 14px var(--theme-font);
+    --ox-input-color: var(--primary-text-color);
+
+    --ox-filters-form-gap: var(--margin-wide);
+    --ox-filters-form-label-font: var(--label-font);
+    --ox-filters-form-label-color: var(--label-color);
+    --ox-select-padding: 0 var(--padding-narrow);
+  }
+
+  label {
+    font: var(--ox-filters-form-label-font);
+    color: var(--ox-filters-form-label-color);
+  }
+  span {
+    margin-right: var(--margin-narrow);
+    text-transform: capitalize;
+  }
+
+  input::placeholder {
+    color: var(--ox-input-placeholder-color);
+    opacity: 0.6;
+  }
+
+  ox-select,
+  input {
+    padding: var(--input-padding);
+    border: none;
+    border-bottom: var(--ox-input-border);
+    font: var(--ox-input-font);
+    color: var(--ox-input-color);
+  }
+
+  ox-select:focus,
+  input:focus {
+    outline: none;
+    border-bottom: var(--ox-input-focus-border);
+    color: var(--primary-color);
+  }
+  ox-select {
+    padding: var(--ox-select-padding);
+  }
+
+  input[type='number'] {
+    padding-right: var(--padding-narrow);
+    max-width: 90px;
+  }
+
+  input[type*='date'],
+  input[type*='time'],
+  input[type='week'],
+  input[type='month'] {
+    padding: 8px var(--padding-narrow) 8px var(--padding-default);
+    max-width: 170px;
+  }
+
+  @media only screen and (max-width: 460px) {
+    :host {
+      --ox-filters-form-label-font: bold 13px var(--theme-font);
+      --ox-input-font: normal 16px var(--theme-font);
+      --ox-filters-form-gap: var(--margin-narrow);
+    }
+
+    ox-checkbox {
+      margin-top: var(--margin-narrow);
+    }
+
+    input[from],
+    input[to] {
+      max-width: 44%;
+    }
+
+    input[type*='datetime'][from],
+    input[type*='datetime'][to] {
+      padding-right: var(--padding-narrow);
+      min-width: 91%;
+    }
+  }
+`;
+//# sourceMappingURL=filter-styles.js.map

package/dist/src/filters/filter-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqF9B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const FilterStyles = css`\n  :host {\n    --ox-input-placeholder-color: var(--primary-color);\n\n    --ox-input-padding: var(--padding-narrow) var(--padding-default);\n    --ox-input-border: 1px solid rgba(0, 0, 0, 0.2);\n    --ox-input-focus-border: 1px solid var(--primary-color);\n    --ox-input-border-radius: var(--border-radius);\n    --ox-input-font: normal 14px var(--theme-font);\n    --ox-input-color: var(--primary-text-color);\n\n    --ox-filters-form-gap: var(--margin-wide);\n    --ox-filters-form-label-font: var(--label-font);\n    --ox-filters-form-label-color: var(--label-color);\n    --ox-select-padding: 0 var(--padding-narrow);\n  }\n\n  label {\n    font: var(--ox-filters-form-label-font);\n    color: var(--ox-filters-form-label-color);\n  }\n  span {\n    margin-right: var(--margin-narrow);\n    text-transform: capitalize;\n  }\n\n  input::placeholder {\n    color: var(--ox-input-placeholder-color);\n    opacity: 0.6;\n  }\n\n  ox-select,\n  input {\n    padding: var(--input-padding);\n    border: none;\n    border-bottom: var(--ox-input-border);\n    font: var(--ox-input-font);\n    color: var(--ox-input-color);\n  }\n\n  ox-select:focus,\n  input:focus {\n    outline: none;\n    border-bottom: var(--ox-input-focus-border);\n    color: var(--primary-color);\n  }\n  ox-select {\n    padding: var(--ox-select-padding);\n  }\n\n  input[type='number'] {\n    padding-right: var(--padding-narrow);\n    max-width: 90px;\n  }\n\n  input[type*='date'],\n  input[type*='time'],\n  input[type='week'],\n  input[type='month'] {\n    padding: 8px var(--padding-narrow) 8px var(--padding-default);\n    max-width: 170px;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      --ox-filters-form-label-font: bold 13px var(--theme-font);\n      --ox-input-font: normal 16px var(--theme-font);\n      --ox-filters-form-gap: var(--margin-narrow);\n    }\n\n    ox-checkbox {\n      margin-top: var(--margin-narrow);\n    }\n\n    input[from],\n    input[to] {\n      max-width: 44%;\n    }\n\n    input[type*='datetime'][from],\n    input[type*='datetime'][to] {\n      padding-right: var(--padding-narrow);\n      min-width: 91%;\n    }\n  }\n`\n"]}

package/dist/src/filters/index.d.ts

@@ -0,0 +1,8 @@
+export * from './registry.js';
+export * from './filter-select.js';
+export * from './filter-input.js';
+export * from './filter-checkbox.js';
+export * from './filter-range-date.js';
+export * from './filter-range-number.js';
+export * from './ox-filters-form-base.js';
+export * from './types.js';

package/dist/src/filters/index.js

@@ -0,0 +1,9 @@
+export * from './registry.js';
+export * from './filter-select.js';
+export * from './filter-input.js';
+export * from './filter-checkbox.js';
+export * from './filter-range-date.js';
+export * from './filter-range-number.js';
+export * from './ox-filters-form-base.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

package/dist/src/filters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/filters/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAE7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AAExC,cAAc,2BAA2B,CAAA;AACzC,cAAc,YAAY,CAAA","sourcesContent":["export * from './registry.js'\n\nexport * from './filter-select.js'\nexport * from './filter-input.js'\nexport * from './filter-checkbox.js'\nexport * from './filter-range-date.js'\nexport * from './filter-range-number.js'\n\nexport * from './ox-filters-form-base.js'\nexport * from './types.js'\n"]}

package/dist/src/filters/ox-filters-form-base.d.ts

@@ -0,0 +1,25 @@
+import '@operato/input/ox-checkbox.js';
+import '@operato/input/ox-select.js';
+import '@operato/popup/ox-popup-list.js';
+import '@operato/input/ox-input-search.js';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { FilterConfig, FilterOperator, FilterValue } from './types.js';
+export declare type QueryFilterRangeValue = [from: number, to: number];
+export declare type QueryFilter = {
+    name: string;
+    operator: FilterOperator;
+    value: any;
+};
+export declare class FiltersFormBase extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: FilterValue[];
+    filters: FilterConfig[];
+    urlParamsSensitive?: boolean;
+    form: HTMLFormElement;
+    private _popstateEventHandler?;
+    private _filtersChangeHandler?;
+    connectedCallback(): void;
+    render(): TemplateResult;
+    updated(changes: PropertyValues<this>): Promise<void>;
+    getQueryFilters(): Promise<QueryFilter[]>;
+}

package/dist/src/filters/ox-filters-form-base.js

@@ -0,0 +1,238 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-checkbox.js';
+import '@operato/input/ox-select.js';
+import '@operato/popup/ox-popup-list.js';
+import '@operato/input/ox-input-search.js';
+import json5 from 'json5';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, queryAsync } from 'lit/decorators.js';
+import { FilterStyles } from './filter-styles.js';
+import { getFilterRenderer } from './registry.js';
+let FiltersFormBase = class FiltersFormBase extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+        this.filters = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.renderRoot.addEventListener('change', async (e) => {
+            this.dispatchEvent(new CustomEvent('filters-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    filters: await this.getQueryFilters(),
+                    from: 'filters-form'
+                }
+            }));
+        });
+    }
+    render() {
+        return html `
+      <form
+        @submit=${(e) => {
+            e.preventDefault();
+        }}
+      >
+        ${this.filters.map((filter) => {
+            var _a, _b;
+            const { name, label, type, operator } = filter;
+            const idx = operator === 'between' ? 1 : 0;
+            const renderer = getFilterRenderer(operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'
+                ? 'text'
+                : type)[idx];
+            const value = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.find(filter => filter.name == name)) === null || _b === void 0 ? void 0 : _b.value;
+            if (!renderer) {
+                return html ``;
+            }
+            return type === 'search'
+                ? html `<ox-input-search name="search" .value=${value}></ox-input-search>`
+                : type !== 'select'
+                    ? html ` <label filter-title><span>${label}</span> ${renderer(filter, value, this)} </label> `
+                    : operator === 'in'
+                        ? html `
+                <ox-select
+                  name=${name}
+                  placeholder=${label}
+                  .value=${value}
+                  @change=${(e) => {
+                            var _a;
+                            return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
+                                detail: {
+                                    name,
+                                    operator,
+                                    value: e.detail
+                                }
+                            }));
+                        }}
+                >
+                  <ox-popup-list multiple attr-selected="checked" with-search>
+                    ${renderer(filter, value, this)}
+                  </ox-popup-list>
+                </ox-select>
+              `
+                        : html `
+                <ox-select
+                  name=${name}
+                  placeholder=${label}
+                  .value=${value}
+                  @change=${(e) => {
+                            var _a;
+                            return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
+                                detail: {
+                                    name,
+                                    operator,
+                                    value: e.detail
+                                }
+                            }));
+                        }}
+                >
+                  <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
+                </ox-select>
+              `;
+        })}
+      </form>
+    `;
+    }
+    async updated(changes) {
+        if (changes.has('urlParamsSensitive')) {
+            if (this.urlParamsSensitive) {
+                this._popstateEventHandler = () => {
+                    const queryString = window.location.search;
+                    const urlParams = new URLSearchParams(queryString);
+                    var filters = urlParams.get('filters');
+                    if (filters) {
+                        try {
+                            this.value = json5.parse(filters);
+                            this.dispatchEvent(new CustomEvent('filters-change', {
+                                bubbles: true,
+                                composed: true,
+                                detail: {
+                                    filters: json5.parse(filters),
+                                    from: 'url-parameter'
+                                }
+                            }));
+                        }
+                        catch (e) {
+                            console.error(`invalid filters params on URL query string : ${e}`);
+                        }
+                    }
+                };
+                //@ts-ignore
+                this._popstateEventHandler(); // call for the first time
+                window.addEventListener('popstate', this._popstateEventHandler);
+                this._filtersChangeHandler = (e) => {
+                    const urlParams = new URLSearchParams(window.location.search);
+                    const { filters, from } = e.detail || {};
+                    if (from === 'url-parameter') {
+                        return;
+                    }
+                    if (filters.length > 0) {
+                        urlParams.set('filters', json5.stringify(filters));
+                    }
+                    else {
+                        urlParams.delete('filters');
+                    }
+                    const queryString = String(urlParams);
+                    const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`;
+                    history.pushState({}, document.title, url);
+                };
+                this.addEventListener('filters-change', this._filtersChangeHandler);
+            }
+            else {
+                if (this._popstateEventHandler) {
+                    window.removeEventListener('popstate', this._popstateEventHandler);
+                }
+                if (this._filtersChangeHandler) {
+                    this.removeEventListener('popstate', this._filtersChangeHandler);
+                }
+            }
+        }
+    }
+    async getQueryFilters() {
+        const formData = new FormData(await this.form);
+        var filters = this.filters
+            .map((filter) => {
+            const { name, type, operator } = filter;
+            var value = formData.getAll(name);
+            if (value.length == 0) {
+                return;
+            }
+            if (-1 === value.findIndex(v => v !== '')) {
+                return;
+            }
+            const filterValue = value.map(v => {
+                const value = v.toString();
+                /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */
+                switch (type) {
+                    case 'integer':
+                    case 'float':
+                    case 'number':
+                    case 'progress':
+                    case 'checkbox':
+                    case 'boolean':
+                        return !value ? undefined : JSON.parse(value);
+                    default:
+                        return value;
+                }
+            });
+            return {
+                name,
+                operator,
+                value: filterValue.length === 1 ? filterValue[0] : filterValue
+            };
+        })
+            .filter(result => result !== undefined);
+        return filters;
+    }
+};
+FiltersFormBase.styles = [
+    FilterStyles,
+    css `
+      :host {
+        display: flex;
+      }
+
+      form {
+        flex: 1;
+
+        display: flex;
+        flex-flow: row wrap;
+        gap: var(--ox-filters-form-gap);
+      }
+
+      form > * {
+        display: flex;
+        align-items: center;
+      }
+
+      @media only screen and (max-width: 460px) {
+        form {
+          flex-direction: column;
+        }
+
+        label,
+        label span,
+        ox-select {
+          display: block;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], FiltersFormBase.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], FiltersFormBase.prototype, "filters", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'url-params-sensitive' })
+], FiltersFormBase.prototype, "urlParamsSensitive", void 0);
+__decorate([
+    queryAsync('form')
+], FiltersFormBase.prototype, "form", void 0);
+FiltersFormBase = __decorate([
+    customElement('ox-filters-form-base')
+], FiltersFormBase);
+export { FiltersFormBase };
+//# sourceMappingURL=ox-filters-form-base.js.map

package/dist/src/filters/ox-filters-form-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-filters-form-base.js","sourceRoot":"","sources":["../../../src/filters/ox-filters-form-base.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport json5 from 'json5'\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, queryAsync } from 'lit/decorators.js'\n\nimport { FilterStyles } from './filter-styles.js'\nimport { getFilterRenderer } from './registry.js'\nimport { FilterConfig, FilterOperator, FilterValue } from './types.js'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator: FilterOperator\n  value: any\n}\n\n@customElement('ox-filters-form-base')\nexport class FiltersFormBase extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-flow: row wrap;\n        gap: var(--ox-filters-form-gap);\n      }\n\n      form > * {\n        display: flex;\n        align-items: center;\n      }\n\n      @media only screen and (max-width: 460px) {\n        form {\n          flex-direction: column;\n        }\n\n        label,\n        label span,\n        ox-select {\n          display: block;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: FilterValue[] = []\n  @property({ type: Object }) filters: FilterConfig[] = []\n  @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  private _popstateEventHandler?: EventListener\n  private _filtersChangeHandler?: EventListener\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', async (e: Event) => {\n      this.dispatchEvent(\n        new CustomEvent('filters-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            filters: await this.getQueryFilters(),\n            from: 'filters-form'\n          }\n        })\n      )\n    })\n  }\n\n  render(): TemplateResult {\n    return html`\n      <form\n        @submit=${(e: Event) => {\n          e.preventDefault()\n        }}\n      >\n        ${this.filters.map((filter: FilterConfig) => {\n          const { name, label, type, operator } = filter\n          const idx = operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(\n            operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n              ? 'text'\n              : type\n          )[idx]\n          const value = this.value?.find(filter => filter.name == name)?.value\n\n          if (!renderer) {\n            return html``\n          }\n\n          return type === 'search'\n            ? html`<ox-input-search name=\"search\" .value=${value}></ox-input-search>`\n            : type !== 'select'\n            ? html` <label filter-title><span>${label}</span> ${renderer(filter, value, this)} </label> `\n            : operator === 'in'\n            ? html`\n                <ox-select\n                  name=${name}\n                  placeholder=${label}\n                  .value=${value}\n                  @change=${(e: CustomEvent) =>\n                    e.target?.dispatchEvent(\n                      new CustomEvent('filter-change', {\n                        detail: {\n                          name,\n                          operator,\n                          value: e.detail\n                        }\n                      })\n                    )}\n                >\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(filter, value, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html`\n                <ox-select\n                  name=${name}\n                  placeholder=${label}\n                  .value=${value}\n                  @change=${(e: CustomEvent) =>\n                    e.target?.dispatchEvent(\n                      new CustomEvent('filter-change', {\n                        detail: {\n                          name,\n                          operator,\n                          value: e.detail\n                        }\n                      })\n                    )}\n                >\n                  <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>\n                </ox-select>\n              `\n        })}\n      </form>\n    `\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('urlParamsSensitive')) {\n      if (this.urlParamsSensitive) {\n        this._popstateEventHandler = () => {\n          const queryString = window.location.search\n          const urlParams = new URLSearchParams(queryString)\n          var filters = urlParams.get('filters')\n\n          if (filters) {\n            try {\n              this.value = json5.parse(filters)\n              this.dispatchEvent(\n                new CustomEvent('filters-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    filters: json5.parse(filters),\n                    from: 'url-parameter'\n                  }\n                })\n              )\n            } catch (e) {\n              console.error(`invalid filters params on URL query string : ${e}`)\n            }\n          }\n        }\n\n        //@ts-ignore\n        this._popstateEventHandler() // call for the first time\n\n        window.addEventListener('popstate', this._popstateEventHandler)\n\n        this._filtersChangeHandler = (e: Event) => {\n          const urlParams = new URLSearchParams(window.location.search)\n          const { filters, from } = (e as CustomEvent).detail || {}\n\n          if (from === 'url-parameter') {\n            return\n          }\n\n          if (filters.length > 0) {\n            urlParams.set('filters', json5.stringify(filters))\n          } else {\n            urlParams.delete('filters')\n          }\n          const queryString = String(urlParams)\n          const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`\n\n          history.pushState({}, document.title, url)\n        }\n\n        this.addEventListener('filters-change', this._filtersChangeHandler)\n      } else {\n        if (this._popstateEventHandler) {\n          window.removeEventListener('popstate', this._popstateEventHandler)\n        }\n        if (this._filtersChangeHandler) {\n          this.removeEventListener('popstate', this._filtersChangeHandler)\n        }\n      }\n    }\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const formData = new FormData(await this.form)\n\n    var filters = this.filters\n      .map((filter: FilterConfig) => {\n        const { name, type, operator } = filter\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    return filters\n  }\n}\n"]}

package/dist/src/filters/registry.d.ts

@@ -0,0 +1,7 @@
+import { FilterSelectRenderer } from './types.js';
+export declare function registerFilterRenderer(type: string, renderer: FilterSelectRenderer[]): void;
+export declare function unregisterFilterRenderer(type: string): void;
+export declare function getFilterRenderers(): {
+    [name: string]: FilterSelectRenderer[];
+};
+export declare function getFilterRenderer(type: string): FilterSelectRenderer[];

package/dist/src/filters/registry.js

@@ -0,0 +1,46 @@
+import { FilterCheckbox } from './filter-checkbox.js';
+import { FilterInputBarcode } from './filter-input-barcode.js';
+import { FilterInput } from './filter-input.js';
+import { FilterRangeDate } from './filter-range-date.js';
+import { FilterRangeNumber } from './filter-range-number.js';
+import { FilterSelect } from './filter-select.js';
+var RENDERERS = {
+    string: [FilterInput],
+    text: [FilterInput],
+    email: [FilterInput],
+    tel: [FilterInput],
+    integer: [FilterInput, FilterRangeNumber],
+    float: [FilterInput, FilterRangeNumber],
+    number: [FilterInput, FilterRangeNumber],
+    select: [FilterSelect],
+    boolean: [FilterCheckbox],
+    checkbox: [FilterCheckbox],
+    month: [FilterInput, FilterRangeDate],
+    week: [FilterInput, FilterRangeDate],
+    date: [FilterInput, FilterRangeDate],
+    time: [FilterInput, FilterRangeDate],
+    datetime: [FilterInput, FilterRangeDate],
+    color: [FilterInput],
+    progress: [FilterInput, FilterRangeNumber],
+    link: [FilterInput],
+    image: [FilterInput],
+    json5: [FilterInput],
+    scanner: [FilterInputBarcode],
+    barcode: [FilterInputBarcode]
+};
+export function registerFilterRenderer(type, renderer) {
+    RENDERERS[type] = renderer;
+}
+export function unregisterFilterRenderer(type) {
+    delete RENDERERS[type];
+}
+export function getFilterRenderers() {
+    return { ...RENDERERS };
+}
+export function getFilterRenderer(type) {
+    if (typeof type == 'function') {
+        return type;
+    }
+    return RENDERERS[type || 'text'] || [FilterInput];
+}
+//# sourceMappingURL=registry.js.map