npm - @operato/attachment - Versions diffs - 7.1.30 → 7.1.32 - Mend

@operato/attachment 7.1.30 → 7.1.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/CHANGELOG.md +18 -0
package/dist/src/ox-attachment-list.d.ts +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +9 -9
package/.editorconfig +0 -29
package/.storybook/main.js +0 -3
package/.storybook/server.mjs +0 -8
package/demo/index.html +0 -43
package/src/index.ts +0 -1
package/src/ox-attachment-list.ts +0 -507
package/src/ox-attachment-selector.ts +0 -111
package/src/ox-property-editor-attachment-selector.ts +0 -15
package/src/ox-property-editor-image-selector.ts +0 -22
package/tsconfig.json +0 -24
package/web-dev-server.config.mjs +0 -27
package/web-test-runner.config.mjs +0 -41

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@operato/attachment",
   "description": "Webcomponent attachment following open-wc recommendations",
   "author": "heartyoh",
-  "version": "7.1.30",
+  "version": "7.1.32",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -54,13 +54,13 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/data-grist": "^7.1.30",
-    "@operato/graphql": "^7.1.1",
-    "@operato/i18n": "^7.1.1",
-    "@operato/input": "^7.1.30",
-    "@operato/property-editor": "^7.1.30",
-    "@operato/styles": "^7.1.27",
-    "@operato/utils": "^7.1.1",
+    "@operato/data-grist": "^7.1.32",
+    "@operato/graphql": "^7.1.32",
+    "@operato/i18n": "^7.1.32",
+    "@operato/input": "^7.1.32",
+    "@operato/property-editor": "^7.1.32",
+    "@operato/styles": "^7.1.32",
+    "@operato/utils": "^7.1.32",
     "i18next": "^23.11.5",
     "lit": "^3.1.2"
   },
@@ -96,5 +96,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "863eb4937334eb66a3cd0e5dbea5c77bc1afc472"
+  "gitHead": "c4f5ed0b63d49d02c5a155b592c0ecf681c92cf7"
 }

package/.editorconfig DELETED Viewed

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-root = true
-[*]
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-[*.md]
-trim_trailing_whitespace = false
-[*.json]
-indent_size = 2
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js DELETED Viewed

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

package/.storybook/server.mjs DELETED Viewed

@@ -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/demo/index.html DELETED Viewed

@@ -1,43 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-        --ox-checkbox-size: 12px;
-      }
-      #demo {
-        position: relative;
-        height: 300px;
-        background-color: lightgray;
-        vertical-align: middle;
-      }
-    </style>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="demo"></div>
-    <script type="module">
-      import { html, render } from 'lit'
-      const parent = document.querySelector('#demo')
-      render(html`clike anywhere in this box to utils mini.`, parent)
-    </script>
-  </body>
-</html>

package/src/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export * from './ox-attachment-list'

package/src/ox-attachment-list.ts DELETED Viewed

@@ -1,507 +0,0 @@
-import '@operato/data-grist'
-import '@operato/input/ox-input-file.js'
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { openPopup, PopupHandle } from '@operato/popup'
-import {
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  FieldRenderer,
-  FilterValue,
-  GristData,
-  GristRecord,
-  PaginationConfig,
-  SortersConfig
-} from '@operato/data-grist'
-import { buildArgs, client } from '@operato/graphql'
-import { ScrollbarStyles, CommonGristStyles, CommonHeaderStyles } from '@operato/styles'
-import { i18next } from '@operato/i18n'
-import { copyToClipboard, sleep } from '@operato/utils'
-const FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {
-  return gql`
-  {
-    attachments(${buildArgs(listParam)}) {
-      items {
-        id
-        name
-        description
-        mimetype
-        encoding
-        category
-        fullpath
-        path
-        tags
-        createdAt
-        updatedAt
-      }
-      total
-    }
-  }
-`
-}
-const DELETE_ATTACHMENT_GQL = gql`
-  mutation DeleteAttachment($id: String!) {
-    deleteAttachment(id: $id)
-  }
-`
-const CREATE_ATTACHMENTS_GQL = gql`
-  mutation ($attachments: [NewAttachment!]!) {
-    createAttachments(attachments: $attachments) {
-      id
-      name
-      description
-      mimetype
-      encoding
-      category
-      path
-      tags
-      createdAt
-      updatedAt
-    }
-  }
-`
-const UPDATE_ATTACHMENT_GQL = gql`
-  mutation UpdateAttachment($patch: AttachmentPatch!, $id: String!) {
-    updateAttachment(patch: $patch, id: $id) {
-      id
-      name
-      description
-      mimetype
-      encoding
-      category
-      path
-      tags
-      createdAt
-      updatedAt
-    }
-  }
-`
-@customElement('ox-attachment-list')
-export class OxAttachmentList extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    CommonGristStyles,
-    CommonHeaderStyles,
-    css`
-      :host {
-        display: flex;
-        width: 100%;
-        --grid-record-emphasized-background-color: red;
-        --grid-record-emphasized-color: yellow;
-      }
-      ox-grist {
-        flex: 1;
-        overflow-y: auto;
-        --grid-record-emphasized-background-color: red;
-        --grid-record-emphasized-color: yellow;
-      }
-      .header .filters {
-        flex-direction: column;
-        align-items: stretch;
-      }
-    `
-  ]
-  @property({ type: String }) category: string = ''
-  @property({ type: Boolean }) creatable: boolean = false
-  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false
-  @query('ox-grist') grist!: DataGrist
-  @query('ox-input-file') fileUploader!: any
-  render() {
-    return html`
-      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom" class="header">
-          <div class="filters">
-            <ox-input-file
-              accept="*/*"
-              multiple="true"
-              hide-filelist
-              @change=${this.onCreateAttachment.bind(this)}
-            ></ox-input-file>
-            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>
-          </div>
-        </div>
-      </ox-grist>
-    `
-  }
-  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
-    const { items: records, total } = await this.getAttachments({ page, limit, filters, sortings })
-    return {
-      total,
-      records
-    }
-  }
-  get gristConfig() {
-    return {
-      list: {
-        thumbnail: 'thumbnail',
-        fields: ['name'],
-        details: ['tags', 'updatedAt']
-      },
-      columns: [
-        {
-          type: 'gutter',
-          gutterName: 'dirty'
-        },
-        {
-          type: 'gutter',
-          gutterName: 'sequence'
-        },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'tag',
-          title: i18next.t('field.hashtags'),
-          handlers: {
-            click: (
-              columns: ColumnConfig[],
-              data: GristData,
-              column: ColumnConfig,
-              record: GristRecord,
-              rowIndex: number,
-              target: HTMLElement
-            ): void => {
-              this.popupHashtagEditor(record)
-            }
-          }
-        },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'open_in_new',
-          title: i18next.t('button.open-in-new'),
-          handlers: {
-            click: (
-              columns: ColumnConfig[],
-              data: GristData,
-              column: ColumnConfig,
-              record: GristRecord,
-              rowIndex: number,
-              target: HTMLElement
-            ): void => {
-              window.open(record.fullpath, '_blank')
-            }
-          }
-        },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'link',
-          title: i18next.t('button.copy-url'),
-          handlers: {
-            click: async (
-              columns: ColumnConfig[],
-              data: GristData,
-              column: ColumnConfig,
-              record: GristRecord,
-              rowIndex: number,
-              target: HTMLElement
-            ): Promise<void> => {
-              var { protocol, hostname, port } = location
-              await copyToClipboard(`${protocol}//${hostname}:${port}${record.fullpath}`)
-              target.setAttribute('data-tooltip', 'url copied!')
-              const rect = target.getBoundingClientRect()
-              target.style.setProperty('--tooltip-top', `${rect.top}px`)
-              target.style.setProperty('--tooltip-left', `${rect.left}px`)
-              await sleep(2000)
-              target.removeAttribute('data-tooltip')
-            }
-          }
-        },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'save_alt',
-          iconOnly: false,
-          title: i18next.t('button.download'),
-          handlers: {
-            click: (
-              columns: ColumnConfig[],
-              data: GristData,
-              column: ColumnConfig,
-              record: GristRecord,
-              rowIndex: number,
-              target: HTMLElement
-            ): void => {
-              const element = document.createElement('a')
-              element.setAttribute('href', record.fullpath)
-              element.setAttribute('download', record.name!)
-              document.body.appendChild(element)
-              element.click()
-              element.remove()
-            }
-          }
-        },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'delete',
-          iconOnly: false,
-          danger: true,
-          title: i18next.t('button.delete'),
-          handlers: {
-            click: async (
-              columns: ColumnConfig[],
-              data: GristData,
-              column: ColumnConfig,
-              record: GristRecord,
-              rowIndex: number,
-              target: HTMLElement
-            ): Promise<void> => {
-              await this.deleteAttachment(record.id!)
-              this.refreshAttachments()
-            }
-          }
-        },
-        {
-          type: 'string',
-          name: 'id',
-          hidden: true
-        },
-        {
-          type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          width: 200,
-          filter: 'search',
-          sortable: true
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          width: 200,
-          filter: 'search'
-        },
-        {
-          type: 'select-buttons',
-          name: 'category',
-          header: i18next.t('field.category'),
-          hidden: true,
-          filter: {
-            operator: 'in',
-            options: ['audio', 'video', 'image', 'text', 'application'],
-            value: this.category,
-            label: ''
-          }
-        },
-        {
-          type: 'hashtags',
-          name: 'tags',
-          header: i18next.t('field.hashtags'),
-          label: true,
-          record: {
-            editable: false
-          },
-          filter: 'search',
-          width: 200
-        },
-        {
-          type: 'image',
-          name: 'thumbnail',
-          hidden: true,
-          record: {
-            editable: false,
-            renderer: function (value, column, record, rowIndex, owner) {
-              return record.category == 'image'
-                ? html` <img src=${record.fullpath} style="max-width: 100%; max-height: 100%;" /> `
-                : record.category == 'video'
-                  ? html` <video src=${record.fullpath} style="width: 100%; height: 100%;" controls></video> `
-                  : html`
-                      <div style="width: 100%; height: 100%;" etc>
-                        <md-icon style="--md-icon-size: 24px;">insert_drive_file</md-icon>
-                        <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>
-                      </div>
-                    `
-            } as FieldRenderer
-          },
-          handlers: {
-            click: (
-              columns: ColumnConfig[],
-              data: GristData,
-              column: ColumnConfig,
-              record: GristRecord,
-              rowIndex: number,
-              target: HTMLElement
-            ): void => {
-              this.onClickSelect(record)
-            }
-          },
-          width: 120
-        },
-        {
-          type: 'datetime',
-          name: 'updatedAt',
-          header: i18next.t('field.updated-at'),
-          sortable: true,
-          width: 180
-        },
-        {
-          type: 'datetime',
-          name: 'createdAt',
-          header: i18next.t('field.created-at'),
-          sortable: true,
-          width: 180
-        }
-      ],
-      rows: {
-        appendable: false,
-        selectable: {
-          multiple: true
-        },
-        classifier: function (
-          record: GristRecord,
-          rowIndex: number
-        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}
-      },
-      sorters: [
-        {
-          name: 'name',
-          desc: false
-        }
-      ],
-      pagination: {
-        pages: [20, 30, 50, 100, 200]
-      }
-    }
-  }
-  async firstUpdated() {
-    this.refreshAttachments()
-  }
-  onClickSelect(attachment: any) {
-    this.dispatchEvent(
-      new CustomEvent('attachment-selected', {
-        composed: true,
-        bubbles: true,
-        detail: {
-          attachment
-        }
-      })
-    )
-  }
-  async onCreateAttachment(e: CustomEvent) {
-    const files = e.detail
-    await this.createAttachments(files)
-    this.refreshAttachments()
-  }
-  async onDeleteAttachment(id: string) {
-    await this.deleteAttachment(id)
-    this.refreshAttachments()
-  }
-  async refreshAttachments() {
-    this.grist.fetch()
-  }
-  async getAttachments({
-    page = 1,
-    limit = 30,
-    filters = [],
-    sortings = []
-  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {
-    var pagination: PaginationConfig = {
-      limit,
-      page
-    }
-    var params = {
-      filters,
-      sortings,
-      pagination
-    }
-    var attachmentListResponse = await client.query({
-      query: FETCH_ATTACHMENT_LIST_GQL(params)
-    })
-    return attachmentListResponse?.data?.attachments || {}
-  }
-  async createAttachments(files: File[]) {
-    /*
-      ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client
-    */
-    const response = await client.mutate({
-      mutation: CREATE_ATTACHMENTS_GQL,
-      variables: {
-        attachments: files.map(file => {
-          return { file }
-        })
-      },
-      context: {
-        hasUpload: true
-      }
-    })
-  }
-  async updateAttachment(patch: any) {
-    const response = await client.mutate({
-      mutation: UPDATE_ATTACHMENT_GQL,
-      variables: patch
-    })
-  }
-  async deleteAttachment(id: string) {
-    const response = await client.mutate({
-      mutation: DELETE_ATTACHMENT_GQL,
-      variables: {
-        id
-      }
-    })
-    return response.data
-  }
-  popupHashtagEditor(record: GristRecord) {
-    const hashtags = Array.isArray(record.tags) ? [...record.tags] : []
-    const confirmCallback = async (newval: any) => {
-      await this.updateAttachment({
-        id: record.id,
-        patch: { tags: newval }
-      })
-      this.refreshAttachments()
-    }
-    openPopup(
-      html`
-        <ox-popup-hashtags-input .value=${hashtags} .confirmCallback=${confirmCallback}></ox-popup-hashtags-input>
-      `,
-      {
-        backdrop: true,
-        title: i18next.t('title.edit hashtags')
-      }
-    )
-  }
-}