@operato/contact 8.0.0-beta.0 → 8.0.0-beta.2

package/src/ox-pfp-edit.ts

@@ -1,296 +0,0 @@
-import '@material/web/icon/icon.js'
-import { html, css, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { Profile } from './ox-pfp-view'
-import { FileDropHelper } from '@operato/utils'
-import { gesture, GestureEventDoubleTap, GestureEventDrag, GestureEventPinch } from '@operato/utils/gesture-mixin.js'
-
-@customElement('ox-pfp-edit')
-export class OxPfpEdit extends gesture(LitElement) {
-  static styles = css`
-    :host {
-      display: inline-block;
-      overflow: hidden;
-      aspect-ratio: 1 / 1;
-      height: var(--ox-pfp-size, 100px);
-      width: var(--ox-pfp-size, 100px);
-      touch-action: none;
-    }
-
-    [content] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-    }
-
-    [circle] {
-      width: 90%;
-      height: 90%;
-      position: relative;
-    }
-
-    [circle]::after {
-      position: absolute;
-      content: '';
-      width: 100%;
-      height: 100%;
-      box-shadow: 0 0 0 1000px lightgray;
-      border-radius: 50%;
-      opacity: 0.9;
-    }
-
-    [circle]::before {
-      content: '';
-      display: block;
-      position: absolute;
-      text-align: left;
-      line-height: 24px;
-      top: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      background-repeat: no-repeat;
-      background-image: var(
-        --background-image,
-        linear-gradient(
-          var(--md-sys-color-on-primary-container, lightgray),
-          var(--md-sys-color-on-primary-container, lightgray)
-        )
-      );
-      transform: var(--image-transform, '');
-      background-size: 100% 100%;
-    }
-
-    [monogram] {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      border: 1px solid darkgray;
-      box-sizing: border-box;
-      padding: 0;
-      overflow: hidden;
-      background-color: gray;
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    [monogram] div {
-      flex: 1;
-      text-transform: uppercase;
-      font-size: 2em;
-      font-family: system-ui;
-      text-align: center;
-    }
-
-    [file-load] {
-      position: absolute;
-      left: 0;
-      top: 0;
-      display: flex;
-      place-content: center;
-    }
-
-    [file-load]:hover {
-      opacity: 50%;
-    }
-
-    #input-file {
-      display: none;
-    }
-
-    label {
-      display: flex;
-      align-content: center;
-    }
-
-    md-icon {
-      align-self: center;
-      color: var(--file-uploader-icon-color, black);
-      --md-icon-size: var(--file-uploader-icon-size, 24px);
-    }
-  `
-
-  @property({ type: Object }) profile: Profile = {}
-  @property({ type: String }) name?: string
-
-  @query('[circle]') circle!: HTMLDivElement
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    FileDropHelper.set(this)
-
-    this.addEventListener('pinch', this.pinchHandler as EventListener)
-    this.addEventListener('drag', this.dragHandler as EventListener)
-    this.addEventListener('doubletap', this.doubleTapHandler as EventListener)
-    this.addEventListener('wheel', this.wheelHandler as EventListener)
-    this.addEventListener('file-drop', this.dropFileHandler)
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener('pinch', this.pinchHandler as EventListener)
-    this.removeEventListener('drag', this.dragHandler as EventListener)
-    this.removeEventListener('doubletap', this.doubleTapHandler as EventListener)
-    this.removeEventListener('wheel', this.wheelHandler as EventListener)
-    this.removeEventListener('file-drop', this.dropFileHandler)
-    super.disconnectedCallback()
-  }
-
-  render() {
-    return html`
-      <div content>
-        ${this.profile?.picture
-          ? html`<div circle></div>`
-          : html`<div monogram><div>${this.name?.replace(/\s/g, '').slice(0, 2)}</div></div>`}
-      </div>
-
-      <div file-load>
-        <label>
-          <input
-            id="input-file"
-            type="file"
-            accept="image/*"
-            hidden
-            capture="environment"
-            @change=${(e: Event) => this.onChangeFile(e)}
-          />
-          <md-icon title="select image">image_search</md-icon>
-        </label>
-      </div>
-
-      <slot></slot>
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}
-
-    if (picture) {
-      const style = this.style
-      style.setProperty('--background-image', `url('${picture}')`)
-      style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)
-    }
-  }
-
-  get value() {
-    return this.profile
-  }
-
-  set value(value: Profile) {
-    this.profile = value
-  }
-
-  private doubleTapHandler = (e: GestureEventDoubleTap) => {
-    this.fit()
-  }
-
-  private wheelHandler = (e: WheelEvent) => {
-    e.preventDefault()
-
-    const delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail))
-    const scale = 1 - delta / 20
-
-    // wheel 이벤트가 발생한 포인터 위치를 중심으로 줌
-    this.zoomAt(e.clientX, e.clientY, scale)
-  }
-
-  dragHandler = (e: GestureEventDrag) => {
-    const { deltaX, deltaY } = e.detail
-    const { offsetHeight, offsetWidth } = this
-    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}
-
-    this.profile = {
-      top: top + (deltaY / offsetHeight) * 100,
-      left: left + (deltaX / offsetWidth) * 100,
-      zoom,
-      picture,
-      file
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        detail: this.profile
-      })
-    )
-  }
-
-  pinchHandler = (e: GestureEventPinch) => {
-    const { scale, centerX, centerY } = e.detail
-    this.zoomAt(centerX, centerY, scale)
-  }
-
-  /**
-   * 중심점을 기준으로 확대/축소
-   */
-  private zoomAt(clientX: number, clientY: number, scale: number) {
-    const { offsetLeft, offsetTop, offsetWidth: width, offsetHeight: height } = this
-
-    const centerX = offsetLeft + width / 2
-    const centerY = offsetTop + height / 2
-
-    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}
-
-    const rect = this.getBoundingClientRect()
-
-    const relativeX = (centerX - rect.left) / this.offsetWidth
-    const relativeY = (centerY - rect.top) / this.offsetHeight
-
-    const newZoom = zoom * scale
-
-    const deltaX = (relativeX * this.offsetWidth * (1 - scale)) / newZoom
-    const deltaY = (relativeY * this.offsetHeight * (1 - scale)) / newZoom
-
-    this.profile = {
-      top: top - (deltaY / this.offsetHeight) * 100,
-      left: left - (deltaX / this.offsetWidth) * 100,
-      zoom: newZoom,
-      picture,
-      file
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        detail: this.profile
-      })
-    )
-  }
-
-  dropFileHandler = (e: Event) => {
-    const dropFiles = (e as CustomEvent).detail
-    const imageFile = dropFiles[0]
-    if (!imageFile) return
-
-    const picture = URL.createObjectURL(imageFile)
-    this.profile = { left: 0, top: 0, zoom: 1, picture, file: imageFile }
-  }
-
-  onChangeFile(e: Event) {
-    const fileInput = e.currentTarget as HTMLInputElement
-    const imageFile = [...Array.from(fileInput.files as FileList)][0]
-    if (!imageFile) return
-
-    const picture = URL.createObjectURL(imageFile)
-    this.profile = { left: 0, top: 0, zoom: 1, picture, file: imageFile }
-
-    fileInput.value = '' // Clear file input after use
-  }
-
-  fit() {
-    // Fit the image to the full container size and centered
-    this.profile = { ...this.profile, left: 0, top: 0, zoom: 1 }
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        detail: this.profile
-      })
-    )
-  }
-
-  clear() {
-    this.profile = {}
-  }
-}

package/src/ox-pfp-view.ts

@@ -1,104 +0,0 @@
-import { html, css, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-export type Profile = {
-  left?: number
-  top?: number
-  zoom?: number
-  picture?: string
-  file?: File
-}
-
-@customElement('ox-pfp-view')
-export class OxPfpView extends LitElement {
-  static styles = css`
-    :host {
-      display: inline-block;
-      aspect-ratio: 1 / 1;
-
-      height: var(--ox-pfp-size, 100px);
-      width: var(--ox-pfp-size, 100px);
-    }
-
-    [circle] {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      position: relative;
-      background-color: var(--md-sys-color-on-primary-container, #999);
-
-      overflow: hidden;
-    }
-
-    [circle]::before {
-      content: '';
-      display: block;
-      position: absolute;
-      text-align: left;
-      line-height: 24px;
-      top: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      background-repeat: no-repeat;
-      background-image: var(
-        --background-image,
-        linear-gradient(
-          var(--md-sys-color-on-primary-container, #999),
-          var(--md-sys-color-on-secondary-container, #666)
-        )
-      );
-      transform: var(--image-transform, '');
-      background-size: 100% 100%;
-    }
-
-    [monogram] {
-      height: 100%;
-      border-radius: 50%;
-      border: 1px solid rgba(0, 0, 0, 0.1);
-      box-sizing: border-box;
-      padding: 0;
-      overflow: hidden;
-      background-color: var(--md-sys-color-primary-container, #999);
-      color: var(--md-sys-color-on-primary-container, white);
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    [monogram] div {
-      flex: 1;
-      text-transform: uppercase;
-      font-size: 1.5em;
-      font-family: system-ui;
-      text-align: center;
-    }
-  `
-
-  @property({ type: Object }) profile?: Profile = {}
-  @property({ type: String }) name?: string
-
-  @query('[circle]') circle!: HTMLDivElement
-
-  render() {
-    return html`
-      ${this.profile?.picture
-        ? html`<div circle></div>`
-        : html`<div monogram><div>${this.name?.replace(/\s/g, '').slice(0, 2)}</div></div>`}
-
-      <slot></slot>
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}
-
-    if (picture) {
-      const style = this.style
-
-      style.setProperty('--background-image', `url(${picture})`)
-      style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)
-    }
-  }
-}

package/src/ox-pfp.ts

@@ -1,95 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import './ox-pfp-edit.js'
-import './ox-pfp-view.js'
-
-import { html, css, LitElement } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { Profile } from './ox-pfp-view.js'
-import { OxPfpEdit } from './ox-pfp-edit.js'
-
-@customElement('ox-pfp')
-export class OxPfp extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      aspect-ratio: 1 / 1;
-
-      height: var(--ox-pfp-size, 100px);
-      width: var(--ox-pfp-size, 100px);
-    }
-
-    ox-pfp-edit,
-    ox-pfp-view {
-      position: relative;
-    }
-
-    [buttons] {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      display: flex;
-    }
-
-    md-icon {
-      position: absolute;
-
-      color: var(--md-sys-color-primary);
-      --md-icon-size: 24px;
-    }
-
-    md-icon[icon='save'] {
-      bottom: 0;
-      right: 0;
-    }
-
-    md-icon[icon='edit'] {
-      bottom: 0;
-      right: 0;
-    }
-
-    md-icon[icon='cancel'] {
-      top: 0;
-      right: 0;
-    }
-
-    md-icon[icon='clear'] {
-      bottom: 0;
-      left: 0;
-    }
-  `
-
-  @property({ type: Object }) profile: Profile = {}
-  @property({ type: String }) name?: string
-
-  @state() editMode?: boolean = false
-
-  @query('ox-pfp-edit') edit!: OxPfpEdit
-
-  render() {
-    return this.editMode
-      ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>
-          <md-icon title="clear" icon="clear" @click=${() => this.edit.clear()}>delete</md-icon>
-          <md-icon
-            title="save"
-            icon="save"
-            @click=${() => {
-              this.profile = this.edit.profile
-              this.editMode = false
-              this.dispatchEvent(
-                new CustomEvent('change', {
-                  detail: this.profile
-                })
-              )
-            }}
-            >save</md-icon
-          >
-          <md-icon title="cancel" icon="cancel" @click=${() => (this.editMode = false)}>cancel</md-icon>
-        </ox-pfp-edit> `
-      : html`
-          <ox-pfp-view .profile=${this.profile} name=${this.name || ''}>
-            <md-icon title="edit" icon="edit" @click=${() => (this.editMode = true)}>edit</md-icon>
-          </ox-pfp-view>
-        `
-  }
-}

package/stories/ox-contact.stories.ts

@@ -1,107 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import '@material/web/icon/icon.js'
-import '@operato/i18n'
-import '../src/ox-contact.js'
-
-import { Contact, ContactField } from '../src/ox-contact.js'
-
-export default {
-  title: 'OxContact',
-  component: 'ox-contact',
-  argTypes: {
-    contact: { control: 'object' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  contact?: Contact
-}
-
-const Template: Story<ArgTypes> = ({ contact }: ArgTypes) => html`
-  <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"
-  />
-
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
-  <link href="/themes/form-theme.css" rel="stylesheet" />
-
-  <style>
-    body {
-      background-color: var(--md-sys-color-surface);
-    }
-  </style>
-
-  <ox-contact .contact=${contact}> </ox-contact>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  contact: {
-    note: 'abcdefg',
-    name: '남 상혁',
-    company: 'Hatiolab',
-    items: [
-      {
-        id: '2',
-        type: ContactField.Phone,
-        label: 'home',
-        value: '010-1223-3443'
-      },
-      {
-        id: '3',
-        type: ContactField.Phone,
-        label: 'mobile',
-        value: '010-1122-3344'
-      },
-      {
-        id: '4',
-        type: ContactField.Email,
-        label: 'work',
-        value: 'heartyoh@hatiolab.com'
-      },
-      {
-        id: '5',
-        type: ContactField.Email,
-        label: 'home',
-        value: 'shnam2k@gmail.com'
-      },
-      {
-        id: '6',
-        type: ContactField.Address,
-        label: 'home',
-        value: '경기도 성남시 분당구 123'
-      },
-      {
-        id: '7',
-        type: ContactField.Address,
-        label: 'work',
-        value: '경기도 성남시 분당구 234'
-      },
-      {
-        id: '8',
-        type: ContactField.Address,
-        label: 'work',
-        value: '서울특별시 종로구 123'
-      }
-    ]
-  }
-}