@operato/attachment 8.0.0-beta.0 → 8.0.0-beta.1

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.
 
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 **Note:** Version bump only for package @operato/attachment

package/package.json

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

package/.editorconfig

@@ -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

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

package/.storybook/server.mjs

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

package/src/index.ts

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

package/src/ox-attachment-list.ts

@@ -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')
-      }
-    )
-  }
-}

package/src/ox-attachment-selector.ts

@@ -1,111 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-import './ox-attachment-list.js'
-
-import { LitElement, css, html } from 'lit'
-import { PopupHandle, openPopup } from '@operato/layout'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-@customElement('ox-attachment-selector')
-export class OxAttachmentSelector extends LitElement {
-  static styles = [
-    css`
-      :host {
-        position: relative;
-        display: inline-block;
-      }
-
-      input[type='text'] {
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-
-      md-icon {
-        position: absolute;
-        top: 0;
-        right: 3px;
-      }
-    `
-  ]
-
-  @property({ type: String }) value: string = ''
-  @property({ type: Object }) properties: any
-
-  private popup?: PopupHandle
-
-  render() {
-    return html`
-      <input
-        id="text"
-        type="text"
-        .value=${this.value || ''}
-        @change=${(e: KeyboardEvent) => this._onInputChanged(e)}
-      />
-
-      <md-icon @click=${() => this.openSelector()}>${this.getIconByCategory()}</md-icon>
-    `
-  }
-
-  getIconByCategory() {
-    var { category } = this.properties || {}
-    switch (category) {
-      case 'audio':
-        return 'library_music'
-      case 'video':
-        return 'video_library'
-      case 'image':
-        return 'image'
-      case 'text':
-      case 'application':
-      default:
-        return 'attachment'
-    }
-  }
-
-  _onInputChanged(e: KeyboardEvent) {
-    this.value = (e.target as HTMLInputElement).value
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  openSelector() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    /*
-     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
-     * 주의. value는 object일 수도 있고, string일 수도 있다.
-     * string인 경우에는 해당 보드의 id로 해석한다.
-     */
-    var value = this.value || {}
-    var { category = 'application' } = this.properties || {}
-
-    var template = html`
-      <ox-attachment-list
-        .creatable=${true}
-        .category=${category}
-        @attachment-selected=${async (e: CustomEvent) => {
-          var attachment = e.detail.attachment
-          this.value = `/attachment/${attachment.path}`
-
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-
-          this.popup && this.popup.close()
-        }}
-      ></ox-attachment-list>
-    `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.select attachment')
-    })
-  }
-}

package/src/ox-property-editor-attachment-selector.ts

@@ -1,15 +0,0 @@
-import './ox-attachment-selector'
-
-import { html, TemplateResult } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-
-@customElement('ox-property-editor-attachment-selector')
-class OxPropertyEditorAttachmentSelector extends OxPropertyEditor {
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    return html`
-      <ox-attachment-selector id="editor" .value=${value} .properties=${spec.property}></ox-attachment-selector>
-    `
-  }
-}

package/src/ox-property-editor-image-selector.ts

@@ -1,22 +0,0 @@
-import './ox-attachment-selector'
-
-import { html, TemplateResult } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-
-@customElement('ox-property-editor-image-selector')
-class OxPropertyEditorImageSelector extends OxPropertyEditor {
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    return html`
-      <ox-attachment-selector
-        id="editor"
-        .value=${value}
-        .properties=${{
-          ...spec.property,
-          category: 'image'
-        }}
-      ></ox-attachment-selector>
-    `
-  }
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});