@operato/attachment 1.0.0-alpha.8 → 1.0.0-alpha.9

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.8...v1.0.0-alpha.9) (2022-03-12)
+
+
+### :rocket: New Features
+
+* settled concept for input, property-editor, grist-editor, so on ([0c9e1d0](https://github.com/hatiolab/operato/commit/0c9e1d054c7aef5d965868242cf471667af7a3c3))
+
+
+
 ## [1.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.7...v1.0.0-alpha.8) (2022-03-11)
 
 **Note:** Version bump only for package @operato/attachment

package/dist/src/ox-attachment-list.d.ts

@@ -1,7 +1,7 @@
 import '@operato/data-grist';
 import '@operato/input/ox-input-file.js';
-import { LitElement, PropertyValues } from 'lit';
 import { ColumnConfig, FieldRenderer, FiltersForm, GristData, GristRecord, QueryFilter, SortersConfig } from '@operato/data-grist';
+import { LitElement, PropertyValues } from 'lit';
 export declare class OxAttachmentList extends LitElement {
     static styles: import("lit").CSSResult[];
     categories: any[];
@@ -108,9 +108,12 @@ export declare class OxAttachmentList extends LitElement {
                 renderer: FieldRenderer;
                 align?: undefined;
             };
+            handlers: {
+                click: (columns: ColumnConfig[], data: GristData, column: ColumnConfig, record: GristRecord, rowIndex: number, target: HTMLElement) => void;
+                dblclick?: undefined;
+            };
             gutterName?: undefined;
             icon?: undefined;
-            handlers?: undefined;
             header?: undefined;
             width?: undefined;
             filter?: undefined;

package/dist/src/ox-attachment-list.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
 import '@operato/data-grist';
 import '@operato/input/ox-input-file.js';
+import { LitElement, css, html } from 'lit';
+import { ScrollbarStyles, TooltipStyles } from '@operato/styles';
+import { buildArgs, client } from '@operato/graphql';
+import { customElement, property, query } from 'lit/decorators.js';
 import gql from 'graphql-tag';
 import i18next from 'i18next';
-import { css, html, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { buildArgs, client } from '@operato/graphql';
-import { ScrollbarStyles, TooltipStyles } from '@operato/styles';
 import { sleep } from '@operato/utils';
 const FETCH_ATTACHMENT_LIST_GQL = (listParam) => {
     return gql `
@@ -212,6 +212,11 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
                     </div>
                   `;
                         }
+                    },
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex, target) => {
+                            this.onClickSelect(record);
+                        }
                     }
                 },
                 {

package/dist/src/ox-attachment-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-attachment-list.js","sourceRoot":"","sources":["../../src/ox-attachment-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-file.js'\n\nimport gql from 'graphql-tag'\nimport i18next from 'i18next'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport {\n  ColumnConfig,\n  DataGrist,\n  FieldRenderer,\n  FiltersForm,\n  GristData,\n  GristRecord,\n  PaginationConfig,\n  QueryFilter,\n  SortersConfig\n} from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles, TooltipStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\nconst FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    attachments(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        mimetype\n        encoding\n        category\n        fullpath\n        path\n        createdAt\n        updatedAt\n      }\n      total\n    }\n  }\n`\n}\n\nconst DELETE_ATTACHMENT_GQL = gql`\n  mutation DeleteAttachment($id: String!) {\n    deleteAttachment(id: $id)\n  }\n`\n\nconst CREATE_ATTACHMENTS_GQL = gql`\n  mutation ($attachments: [NewAttachment!]!) {\n    createAttachments(attachments: $attachments) {\n      id\n      name\n      description\n      mimetype\n      encoding\n      category\n      path\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-attachment-list')\nexport class OxAttachmentList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      #headroom {\n        align-items: center;\n        padding: var(--padding-default) var(--padding-wide);\n        border-top: 2px solid rgba(0, 0, 0, 0.2);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n      }\n\n      #filters {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n      }\n\n      #filters > * {\n        padding: var(--padding-default) var(--padding-wide);\n      }\n\n      select {\n        border: 0;\n        outline: none;\n        text-align: right;\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) categories: any[] = ['audio', 'video', 'image', 'text', 'application']\n  @property({ type: String }) category: string = ''\n  @property({ type: Boolean }) creatable: boolean = false\n\n  @query('ox-grist') private grist!: DataGrist\n  @query('ox-input-file') fileUploader!: any\n  @query('ox-filters-form') filtersForm!: FiltersForm\n\n  render() {\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" id=\"headroom\">\n        \n          <div id=\"filters\">\n            <ox-filters-form\n              slot=\"headroom\"\n              @change=${(e: Event) => this.grist.fetch(true)}\n            ></ox-filters-form>\n\n            <select\n              @change=${(e: Event) => {\n                this.category = (e.currentTarget as HTMLInputElement)?.value\n                this.requestUpdate()\n              }}\n            >\n              <option value=\"\">${i18next.t('text.please choose a category')}</option>\n              ${this.categories.map(\n                category =>\n                  html` <option value=${category} ?selected=${this.category == category}>${category}</option> `\n              )}\n            </select>\n          </div>\n\n          <ox-input-file\n            accept=\"*/*\"\n            multiple=\"true\"\n            hide-filelist\n            @change=${this.onCreateAttachment.bind(this)}\n          ></ox-input-file>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page, limit, sorters = [] }: { page: number; limit: number; sorters: SortersConfig }) {\n    const filters: QueryFilter[] = await this.filtersForm.getQueryFilters()\n    const { items: records, total } = await this.getAttachments({ page, limit, filters, sortings: sorters })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    return {\n      list: {\n        thumbnail: 'thumbnail',\n        fields: ['name'],\n        details: ['updatedAt']\n      },\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'dirty'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'open_in_new',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              window.open(record.fullpath, '_blank')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'link',\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              var { protocol, hostname, port } = location\n              await navigator.clipboard.writeText(`${protocol}//${hostname}:${port}${record.fullpath}`)\n\n              target.setAttribute('data-tooltip', 'url copied!')\n              await sleep(2000)\n              target.removeAttribute('data-tooltip')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'delete',\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              await this.deleteAttachment(record.id!)\n              this.refreshAttachments()\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'save_alt',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              const element = document.createElement('a')\n              element.setAttribute('href', record.fullpath)\n              element.setAttribute('download', record.name!)\n              document.body.appendChild(element)\n              element.click()\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: 'name',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search',\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: 'description',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search',\n          handlers: {\n            dblclick: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number\n            ): void => {\n              alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)\n            }\n          }\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          hidden: true,\n          record: {\n            editable: false,\n            renderer: function (value, column, record, rowIndex, owner) {\n              return record.category == 'image'\n                ? html` <img src=${record.fullpath} style=\"max-width: 100%; max-height: 100%;\" /> `\n                : record.category == 'video'\n                ? html` <video src=${record.fullpath} style=\"width: 100%; height: 100%;\" controls></video> `\n                : html`\n                    <div style=\"width: 100%; height: 100%;\" etc>\n                      <mwc-icon outlined>insert_drive_file</mwc-icon>\n                      <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>\n                    </div>\n                  `\n            } as FieldRenderer\n          }\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: 'updated at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'createdAt',\n          header: 'created at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: true\n        },\n        handlers: {\n          click: 'select-row-toggle'\n        },\n        classifier: function (\n          record: GristRecord,\n          rowIndex: number\n        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshAttachments()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('category')) {\n      this.refreshAttachments()\n    }\n  }\n\n  onClickSelect(attachment: any) {\n    this.dispatchEvent(\n      new CustomEvent('attachment-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          attachment\n        }\n      })\n    )\n  }\n\n  async onCreateAttachment(e: CustomEvent) {\n    const files = e.detail\n\n    await this.createAttachments(files)\n    this.refreshAttachments()\n  }\n\n  async onDeleteAttachment(id: string) {\n    await this.deleteAttachment(id)\n\n    this.refreshAttachments()\n  }\n\n  async refreshAttachments() {\n    this.grist.fetch()\n  }\n\n  async getAttachments({\n    page = 1,\n    limit = 30,\n    filters = [],\n    sortings = []\n  }: { page?: number; limit?: number; filters?: QueryFilter[]; sortings?: SortersConfig } = {}) {\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    if (this.category)\n      filters.push({\n        name: 'category',\n        operator: 'eq',\n        value: this.category\n      })\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var attachmentListResponse = await client.query({\n      query: FETCH_ATTACHMENT_LIST_GQL(params)\n    })\n\n    if (!attachmentListResponse || !attachmentListResponse.data) {\n      return {}\n    }\n\n    return attachmentListResponse?.data?.attachments || {}\n  }\n\n  async createAttachments(files: File[]) {\n    /*\n      ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client\n    */\n\n    const response = await client.mutate({\n      mutation: CREATE_ATTACHMENTS_GQL,\n      variables: {\n        attachments: files.map(file => {\n          return { file }\n        })\n      },\n      context: {\n        hasUpload: true\n      }\n    })\n  }\n\n  async deleteAttachment(id: string) {\n    const response = await client.mutate({\n      mutation: DELETE_ATTACHMENT_GQL,\n      variables: {\n        id\n      }\n    })\n\n    return response.data\n  }\n}\n"]}
+{"version":3,"file":"ox-attachment-list.js","sourceRoot":"","sources":["../../src/ox-attachment-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-file.js'\n\nimport {\n  ColumnConfig,\n  DataGrist,\n  FieldRenderer,\n  FiltersForm,\n  GristData,\n  GristRecord,\n  PaginationConfig,\n  QueryFilter,\n  SortersConfig\n} from '@operato/data-grist'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { ScrollbarStyles, TooltipStyles } from '@operato/styles'\nimport { buildArgs, client } from '@operato/graphql'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport gql from 'graphql-tag'\nimport i18next from 'i18next'\nimport { sleep } from '@operato/utils'\n\nconst FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    attachments(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        mimetype\n        encoding\n        category\n        fullpath\n        path\n        createdAt\n        updatedAt\n      }\n      total\n    }\n  }\n`\n}\n\nconst DELETE_ATTACHMENT_GQL = gql`\n  mutation DeleteAttachment($id: String!) {\n    deleteAttachment(id: $id)\n  }\n`\n\nconst CREATE_ATTACHMENTS_GQL = gql`\n  mutation ($attachments: [NewAttachment!]!) {\n    createAttachments(attachments: $attachments) {\n      id\n      name\n      description\n      mimetype\n      encoding\n      category\n      path\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-attachment-list')\nexport class OxAttachmentList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      #headroom {\n        align-items: center;\n        padding: var(--padding-default) var(--padding-wide);\n        border-top: 2px solid rgba(0, 0, 0, 0.2);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n      }\n\n      #filters {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n      }\n\n      #filters > * {\n        padding: var(--padding-default) var(--padding-wide);\n      }\n\n      select {\n        border: 0;\n        outline: none;\n        text-align: right;\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) categories: any[] = ['audio', 'video', 'image', 'text', 'application']\n  @property({ type: String }) category: string = ''\n  @property({ type: Boolean }) creatable: boolean = false\n\n  @query('ox-grist') private grist!: DataGrist\n  @query('ox-input-file') fileUploader!: any\n  @query('ox-filters-form') filtersForm!: FiltersForm\n\n  render() {\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" id=\"headroom\">\n        \n          <div id=\"filters\">\n            <ox-filters-form\n              slot=\"headroom\"\n              @change=${(e: Event) => this.grist.fetch(true)}\n            ></ox-filters-form>\n\n            <select\n              @change=${(e: Event) => {\n                this.category = (e.currentTarget as HTMLInputElement)?.value\n                this.requestUpdate()\n              }}\n            >\n              <option value=\"\">${i18next.t('text.please choose a category')}</option>\n              ${this.categories.map(\n                category =>\n                  html` <option value=${category} ?selected=${this.category == category}>${category}</option> `\n              )}\n            </select>\n          </div>\n\n          <ox-input-file\n            accept=\"*/*\"\n            multiple=\"true\"\n            hide-filelist\n            @change=${this.onCreateAttachment.bind(this)}\n          ></ox-input-file>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page, limit, sorters = [] }: { page: number; limit: number; sorters: SortersConfig }) {\n    const filters: QueryFilter[] = await this.filtersForm.getQueryFilters()\n    const { items: records, total } = await this.getAttachments({ page, limit, filters, sortings: sorters })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    return {\n      list: {\n        thumbnail: 'thumbnail',\n        fields: ['name'],\n        details: ['updatedAt']\n      },\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'dirty'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'open_in_new',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              window.open(record.fullpath, '_blank')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'link',\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              var { protocol, hostname, port } = location\n              await navigator.clipboard.writeText(`${protocol}//${hostname}:${port}${record.fullpath}`)\n\n              target.setAttribute('data-tooltip', 'url copied!')\n              await sleep(2000)\n              target.removeAttribute('data-tooltip')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'delete',\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              await this.deleteAttachment(record.id!)\n              this.refreshAttachments()\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'save_alt',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              const element = document.createElement('a')\n              element.setAttribute('href', record.fullpath)\n              element.setAttribute('download', record.name!)\n              document.body.appendChild(element)\n              element.click()\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: 'name',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search',\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: 'description',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search',\n          handlers: {\n            dblclick: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number\n            ): void => {\n              alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)\n            }\n          }\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          hidden: true,\n          record: {\n            editable: false,\n            renderer: function (value, column, record, rowIndex, owner) {\n              return record.category == 'image'\n                ? html` <img src=${record.fullpath} style=\"max-width: 100%; max-height: 100%;\" /> `\n                : record.category == 'video'\n                ? html` <video src=${record.fullpath} style=\"width: 100%; height: 100%;\" controls></video> `\n                : html`\n                    <div style=\"width: 100%; height: 100%;\" etc>\n                      <mwc-icon outlined>insert_drive_file</mwc-icon>\n                      <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>\n                    </div>\n                  `\n            } as FieldRenderer\n          },\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              this.onClickSelect(record)\n            }\n          }\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: 'updated at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'createdAt',\n          header: 'created at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: true\n        },\n        handlers: {\n          click: 'select-row-toggle'\n        },\n        classifier: function (\n          record: GristRecord,\n          rowIndex: number\n        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshAttachments()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('category')) {\n      this.refreshAttachments()\n    }\n  }\n\n  onClickSelect(attachment: any) {\n    this.dispatchEvent(\n      new CustomEvent('attachment-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          attachment\n        }\n      })\n    )\n  }\n\n  async onCreateAttachment(e: CustomEvent) {\n    const files = e.detail\n\n    await this.createAttachments(files)\n    this.refreshAttachments()\n  }\n\n  async onDeleteAttachment(id: string) {\n    await this.deleteAttachment(id)\n\n    this.refreshAttachments()\n  }\n\n  async refreshAttachments() {\n    this.grist.fetch()\n  }\n\n  async getAttachments({\n    page = 1,\n    limit = 30,\n    filters = [],\n    sortings = []\n  }: { page?: number; limit?: number; filters?: QueryFilter[]; sortings?: SortersConfig } = {}) {\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    if (this.category)\n      filters.push({\n        name: 'category',\n        operator: 'eq',\n        value: this.category\n      })\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var attachmentListResponse = await client.query({\n      query: FETCH_ATTACHMENT_LIST_GQL(params)\n    })\n\n    if (!attachmentListResponse || !attachmentListResponse.data) {\n      return {}\n    }\n\n    return attachmentListResponse?.data?.attachments || {}\n  }\n\n  async createAttachments(files: File[]) {\n    /*\n      ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client\n    */\n\n    const response = await client.mutate({\n      mutation: CREATE_ATTACHMENTS_GQL,\n      variables: {\n        attachments: files.map(file => {\n          return { file }\n        })\n      },\n      context: {\n        hasUpload: true\n      }\n    })\n  }\n\n  async deleteAttachment(id: string) {\n    const response = await client.mutate({\n      mutation: DELETE_ATTACHMENT_GQL,\n      variables: {\n        id\n      }\n    })\n\n    return response.data\n  }\n}\n"]}

package/dist/src/ox-input-background-pattern.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/i18n/ox-i18n.js';
+import './ox-attachment-list.js';
+import { OxFormField } from '@operato/input';
+export declare type BackgroundPatternOption = {
+    image?: HTMLImageElement | string;
+    align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom';
+    offsetX?: number;
+    offsetY?: number;
+    width?: number;
+    height?: number;
+    fitPattern?: boolean;
+};
+/**
+ * 컴포넌트의 fill pattern을 편집하는 element
+ *
+ * Example:
+ *  <ox-input-background-pattern
+ *    @change="${e => { this.pattern = e.target.value }}"
+ *    .value=${this.pattern}"
+ *  ></ox-input-background-pattern>
+ */
+export declare class OxInputBackgroundPattern extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value?: BackgroundPatternOption;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    _onChange(e: Event): void;
+}

package/dist/src/ox-input-background-pattern.js

@@ -0,0 +1,147 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import './ox-attachment-list.js';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxFormField } from '@operato/input';
+/**
+ * 컴포넌트의 fill pattern을 편집하는 element
+ *
+ * Example:
+ *  <ox-input-background-pattern
+ *    @change="${e => { this.pattern = e.target.value }}"
+ *    .value=${this.pattern}"
+ *  ></ox-input-background-pattern>
+ */
+let OxInputBackgroundPattern = class OxInputBackgroundPattern extends OxFormField {
+    render() {
+        const value = this.value || {};
+        return html `
+      <label> <ox-i18n msgid="label.image" auto="">image</ox-i18n> </label>
+
+      <ox-property-editor-attachment-selector
+        value-key="image"
+        .value=${value.image || ''}
+        custom-editor
+      ></ox-property-editor-attachment-selector>
+
+      <label> <ox-i18n msgid="label.align" auto="">align</ox-i18n> </label>
+
+      <select value-key="align" class="select-content" .value=${value.align}>
+        <option value="left-top">Left Top</option>
+        <option value="top">Top</option>
+        <option value="right-top">Right Top</option>
+        <option value="left">Left</option>
+        <option value="center">Center</option>
+        <option value="right">Right</option>
+        <option value="left-bottom">Left Bottom</option>
+        <option value="bottom">Bottom</option>
+        <option value="right-bottom">Right Bottom</option>
+      </select>
+
+      <div class="grid-10">
+        <label> <ox-i18n msgid="label.offset-x" auto="">offsetX</ox-i18n> </label>
+        <input type="number" value-key="offsetX" .value=${value.offsetX} />
+
+        <label> <ox-i18n msgid="label.offset-y" auto="">offsetY</ox-i18n> </label>
+        <input type="number" value-key="offsetY" .value=${value.offsetY} />
+
+        <label> <ox-i18n msgid="label.width" auto="">width</ox-i18n> </label>
+        <input type="number" value-key="width" .value=${value.width} />
+
+        <label> <ox-i18n msgid="label.height" auto="">height</ox-i18n> </label>
+        <input type="number" value-key="height" .value=${value.height} />
+      </div>
+
+      <div class="grid-10">
+        <input value-key="fitPattern" type="checkbox" .checked=${value.fitPattern} required />
+        <label> <ox-i18n msgid="label.fit" auto="">Fit</ox-i18n> </label>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onChange.bind(this));
+    }
+    _onChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        var value = element.value;
+        if (key == 'fitPattern') {
+            value = element.checked;
+        }
+        this.value = {
+            ...this.value,
+            [key]: value
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+OxInputBackgroundPattern.styles = css `
+    :host,
+    .grid-10 {
+      display: grid;
+      grid-template-columns: repeat(10, 1fr);
+      grid-gap: 5px;
+      grid-auto-rows: minmax(24px, auto);
+
+      align-items: center;
+    }
+
+    * {
+      align-self: stretch;
+    }
+
+    label {
+      grid-column: span 2;
+      text-align: right;
+      text-transform: capitalize;
+
+      align-self: center;
+    }
+
+    .grid-10 {
+      grid-column: span 10;
+    }
+
+    select,
+    input,
+    [custom-editor] {
+      grid-column: span 8;
+    }
+
+    select {
+      height: 100%;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+    }
+
+    input[type='checkbox'] {
+      grid-column: 3 / 4;
+      align-self: center;
+    }
+
+    input[type='checkbox'] ~ label {
+      grid-column: span 7;
+      text-align: left;
+    }
+
+    .grid-10 > input[type='number'] {
+      grid-column: span 3;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+    }
+
+    .grid-10 > label {
+      grid-column: span 2;
+      text-align: right;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxInputBackgroundPattern.prototype, "value", void 0);
+OxInputBackgroundPattern = __decorate([
+    customElement('ox-input-background-pattern')
+], OxInputBackgroundPattern);
+export { OxInputBackgroundPattern };
+//# sourceMappingURL=ox-input-background-pattern.js.map

package/dist/src/ox-input-background-pattern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-background-pattern.js","sourceRoot":"","sources":["../../src/ox-input-background-pattern.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAY5C;;;;;;;;GAQG;AAGH,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,WAAW;IA8DvD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAK,EAA8B,CAAA;QAE3D,OAAO,IAAI,CAAA;;;;;iBAKE,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;gEAM8B,KAAK,CAAC,KAAK;;;;;;;;;;;;;;0DAcjB,KAAK,CAAC,OAAO;;;0DAGb,KAAK,CAAC,OAAO;;;wDAGf,KAAK,CAAC,KAAK;;;yDAGV,KAAK,CAAC,MAAM;;;;iEAIJ,KAAK,CAAC,UAAU;;;KAG5E,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAC3C,IAAI,KAAK,GAAQ,OAAO,CAAC,KAAK,CAAA;QAE9B,IAAI,GAAG,IAAI,YAAY,EAAE;YACvB,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;SACxB;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAI,CAAC,EAAE,KAAK;SACd,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AAhIQ,+BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAgC;AA5DhD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAiIpC;SAjIY,wBAAwB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-attachment-list.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\nexport type BackgroundPatternOption = {\n  image?: HTMLImageElement | string\n  align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n  offsetX?: number\n  offsetY?: number\n  width?: number\n  height?: number\n  fitPattern?: boolean\n}\n\n/**\n * 컴포넌트의 fill pattern을 편집하는 element\n *\n * Example:\n *  <ox-input-background-pattern\n *    @change=\"${e => { this.pattern = e.target.value }}\"\n *    .value=${this.pattern}\"\n *  ></ox-input-background-pattern>\n */\n\n@customElement('ox-input-background-pattern')\nexport class OxInputBackgroundPattern extends OxFormField {\n  static styles = css`\n    :host,\n    .grid-10 {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 5px;\n      grid-auto-rows: minmax(24px, auto);\n\n      align-items: center;\n    }\n\n    * {\n      align-self: stretch;\n    }\n\n    label {\n      grid-column: span 2;\n      text-align: right;\n      text-transform: capitalize;\n\n      align-self: center;\n    }\n\n    .grid-10 {\n      grid-column: span 10;\n    }\n\n    select,\n    input,\n    [custom-editor] {\n      grid-column: span 8;\n    }\n\n    select {\n      height: 100%;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    input[type='checkbox'] {\n      grid-column: 3 / 4;\n      align-self: center;\n    }\n\n    input[type='checkbox'] ~ label {\n      grid-column: span 7;\n      text-align: left;\n    }\n\n    .grid-10 > input[type='number'] {\n      grid-column: span 3;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    .grid-10 > label {\n      grid-column: span 2;\n      text-align: right;\n    }\n  `\n\n  @property({ type: Object }) value?: BackgroundPatternOption\n\n  render() {\n    const value = this.value || ({} as BackgroundPatternOption)\n\n    return html`\n      <label> <ox-i18n msgid=\"label.image\" auto=\"\">image</ox-i18n> </label>\n\n      <ox-property-editor-attachment-selector\n        value-key=\"image\"\n        .value=${value.image || ''}\n        custom-editor\n      ></ox-property-editor-attachment-selector>\n\n      <label> <ox-i18n msgid=\"label.align\" auto=\"\">align</ox-i18n> </label>\n\n      <select value-key=\"align\" class=\"select-content\" .value=${value.align}>\n        <option value=\"left-top\">Left Top</option>\n        <option value=\"top\">Top</option>\n        <option value=\"right-top\">Right Top</option>\n        <option value=\"left\">Left</option>\n        <option value=\"center\">Center</option>\n        <option value=\"right\">Right</option>\n        <option value=\"left-bottom\">Left Bottom</option>\n        <option value=\"bottom\">Bottom</option>\n        <option value=\"right-bottom\">Right Bottom</option>\n      </select>\n\n      <div class=\"grid-10\">\n        <label> <ox-i18n msgid=\"label.offset-x\" auto=\"\">offsetX</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetX\" .value=${value.offsetX} />\n\n        <label> <ox-i18n msgid=\"label.offset-y\" auto=\"\">offsetY</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetY\" .value=${value.offsetY} />\n\n        <label> <ox-i18n msgid=\"label.width\" auto=\"\">width</ox-i18n> </label>\n        <input type=\"number\" value-key=\"width\" .value=${value.width} />\n\n        <label> <ox-i18n msgid=\"label.height\" auto=\"\">height</ox-i18n> </label>\n        <input type=\"number\" value-key=\"height\" .value=${value.height} />\n      </div>\n\n      <div class=\"grid-10\">\n        <input value-key=\"fitPattern\" type=\"checkbox\" .checked=${value.fitPattern} required />\n        <label> <ox-i18n msgid=\"label.fit\" auto=\"\">Fit</ox-i18n> </label>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key')\n    var value: any = element.value\n\n    if (key == 'fitPattern') {\n      value = element.checked\n    }\n\n    this.value = {\n      ...this.value,\n      [key!]: value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/ox-input-color-gradient.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/i18n/ox-i18n.js';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
+import '@polymer/paper-listbox/paper-listbox';
+import '@polymer/paper-item/paper-item';
+import '@operato/input/ox-input-angle.js';
+import '@operato/input/ox-input-color-stops.js';
+import { ColorStop, OxFormField } from '@operato/input';
+export declare type GradientOption = {
+    type: 'linear' | 'radial';
+    rotation: number;
+    direction?: 'left-to-right' | 'lefttop-to-rightbottom' | 'top-to-bottom' | 'righttop-to-leftbottom' | 'right-to-left' | 'rightbottom-to-lefttop' | 'bottom-to-top' | 'leftbottom-to-righttop' | 'left-to-right' | 'center-to-corner';
+    center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom';
+    colorStops?: ColorStop[];
+};
+export declare class OxInputColorGradient extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value: GradientOption;
+    firstUpdated(): void;
+    _onChange(e: Event): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _convertDirectionToRotation(direction: string): number;
+}