@operato/attribute 8.0.0-alpha.9 → 8.0.0-beta.1

package/src/ox-attribute-view.ts

@@ -1,188 +0,0 @@
-import '@operato/input/ox-input-file.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { AttributeSet } from './types.js'
-
-@customElement('ox-attribute-view')
-export class OxAttributeView extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: row;
-
-        --item-description-font: normal 0.8rem/1rem var(--theme-font);
-        --item-description-color: var(--page-description-color);
-      }
-
-      h2 {
-        margin: var(--title-margin);
-        font: var(--title-font);
-        color: var(--title-text-color);
-        text-transform: capitalize;
-        text-align: center;
-      }
-
-      h3 {
-        margin: var(--page-description-margin);
-        font: var(--page-description-font);
-        color: var(--page-description-color);
-        text-transform: capitalize;
-        text-align: center;
-      }
-
-      form {
-        flex: 1;
-
-        display: flex;
-        flex-direction: column;
-
-        overflow-y: auto;
-        padding: var(--padding-default);
-      }
-
-      label {
-        display: grid;
-
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 1fr 5fr;
-        grid-template-areas: 'name description' 'empty inputs';
-
-        grid-gap: 9px;
-        align-items: center;
-        margin-bottom: var(--spacing-medium);
-      }
-
-      label:nth-child(odd) {
-        background-color: var(--md-sys-color-background);
-        padding: var(--padding-default) 0;
-      }
-
-      div[name] {
-        grid-area: name;
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-align: right;
-      }
-
-      div[description] {
-        grid-area: description;
-        opacity: 0.7;
-        font: var(--item-description-font);
-        color: var(--item-description-color);
-        text-align: left;
-      }
-
-      div[description] * {
-        vertical-align: middle;
-      }
-
-      div[description] md-icon {
-        font-size: 0.9rem;
-      }
-
-      div[elements] {
-        grid-area: inputs;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 10px;
-        padding-right: var(--padding-default);
-      }
-
-      div[elements] * {
-        flex: 1;
-      }
-
-      div[elements] input,
-      div[elements] select {
-        border: var(--input-field-border);
-        border-radius: var(--input-field-border-radius);
-        padding: var(--input-field-padding);
-        font: var(--input-field-font);
-      }
-
-      @media only screen and (max-width: 460px) {
-        label {
-          display: grid;
-
-          grid-template-rows: auto auto 1fr;
-          grid-template-columns: 1fr;
-          grid-template-areas: 'name' 'description' 'inputs';
-
-          grid-gap: 9px;
-          align-items: center;
-          margin-bottom: var(--spacing-medium);
-        }
-
-        div[name] {
-          text-align: left;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) attributeSet?: AttributeSet
-  @property({ type: Object }) value?: { [tag: string]: any }
-
-  render() {
-    return html`<form>
-      <h2>${this.attributeSet?.entity || ''}</h2>
-      <h3>${this.attributeSet?.description || ''}</h3>
-      ${this.buildEntryViews()}
-    </form> `
-  }
-
-  private buildEntryViews() {
-    const items = (this.attributeSet?.items || []).filter(item => item.active)
-
-    return (items || []).map(item => {
-      const { name, description, tag, type, options = {} } = item
-
-      const value = this.value && this.value[tag]
-
-      switch (type) {
-        case 'select':
-          var element = html` <select .name=${tag} disabled>
-            <option value=""></option>
-            ${(options.options || []).map(
-              option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`
-            )}
-          </select>`
-          break
-
-        case 'boolean':
-          var element = html` <input type="checkbox" name=${tag} .checked=${value} disabled />`
-          break
-
-        case 'number':
-          var element = html` <input type="number" name=${tag} value=${value} disabled />`
-          break
-
-        case 'file':
-          var element = html`<ox-input-file
-            name=${tag}
-            label="Attach Files"
-            accept="*/*"
-            multiple="true"
-            hide-filelist
-            disabled
-          ></ox-input-file>`
-
-        case 'string':
-        default:
-          var element = html` <input type="text" name=${tag} value=${value} disabled />`
-      }
-
-      return html` <label .title=${description}>
-        <div name>${name}</div>
-        <div description><md-icon>info</md-icon> ${description}</div>
-        <div elements>${element}</div>
-      </label>`
-    })
-  }
-}

package/src/types.ts

@@ -1,23 +0,0 @@
-export type SelectOption = { text: string; value: string }
-export type SelectOptions = SelectOption[]
-
-export type TypeOptions = {
-  options?: SelectOptions
-  [prop: string]: any
-}
-
-export type AttributeItem = {
-  name: string
-  description: string
-  tag: string
-  type: string
-  active: boolean
-  hidden: boolean
-  options: TypeOptions
-}
-
-export type AttributeSet = {
-  entity: string
-  description: string
-  items: AttributeItem[]
-}

package/stories/ox-attribute-form.stories.ts

@@ -1,105 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/i18n'
-import '../src/ox-attribute-form.js'
-
-import { html, TemplateResult } from 'lit'
-
-export default {
-  title: 'ox-attribute-form',
-  component: 'ox-attribute-form',
-  argTypes: {}
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {}
-
-const attributeSet = {
-  entity: 'Domain',
-  description: 'Attributes for Domain Entity',
-  items: [
-    {
-      name: '등록정보',
-      description: '회사 등록 정보',
-      tag: 'brn',
-      type: 'text',
-      active: true,
-      hidden: false
-    },
-    {
-      name: '주소',
-      description: '회사 주소',
-      tag: 'address',
-      type: 'text',
-      active: true,
-      hidden: false
-    },
-    {
-      name: '신용도',
-      description: '회사의 신용도',
-      tag: 'credit',
-      type: 'select',
-      options: {
-        options: [
-          { text: '최우수', value: '최우수' },
-          { text: '우수', value: '우수' },
-          { text: '보통', value: '보통' },
-          { text: '미달', value: '미달' }
-        ]
-      },
-      active: true,
-      hidden: false
-    },
-    {
-      name: '정보파일',
-      description: '참조 첨부 파일.',
-      tag: 'file',
-      type: 'file',
-      active: true,
-      hidden: false
-    }
-  ]
-}
-
-var value = {
-  brn: '1234567890-1234-1',
-  address: '경기도 성남시 분당구.',
-  credit: '최우수'
-}
-
-const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
-  <link href="/themes/app-theme.css" 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"
-  />
-
-  <style>
-    body {
-    }
-  </style>
-
-  <ox-attribute-form
-    .attributeSet=${attributeSet}
-    .value=${value}
-    @change=${(e: CustomEvent) => {
-      value = e.detail
-      console.log('change', value)
-    }}
-  ></ox-attribute-form>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {}

package/stories/ox-attribute-view.stories.ts

@@ -1,98 +0,0 @@
-import '@operato/i18n'
-import '../src/ox-attribute-view.js'
-import '@material/web/icon/icon.js'
-
-import { html, TemplateResult } from 'lit'
-
-export default {
-  title: 'ox-attribute-view',
-  component: 'ox-attribute-view',
-  argTypes: {}
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {}
-
-const attributeSet = {
-  entity: 'Domain',
-  description: 'Attributes for Domain Entity',
-  items: [
-    {
-      name: '등록정보',
-      description: '회사 등록 정보',
-      tag: 'brn',
-      type: 'text',
-      active: true,
-      hidden: false
-    },
-    {
-      name: '주소',
-      description: '회사 주소',
-      tag: 'address',
-      type: 'text',
-      active: true,
-      hidden: false
-    },
-    {
-      name: '신용도',
-      description: '회사의 신용도',
-      tag: 'credit',
-      type: 'select',
-      options: {
-        options: [
-          { text: '최우수', value: '최우수' },
-          { text: '우수', value: '우수' },
-          { text: '보통', value: '보통' },
-          { text: '미달', value: '미달' }
-        ]
-      },
-      active: true,
-      hidden: false
-    },
-    {
-      name: '정보파일',
-      description: '참조 첨부 파일.',
-      tag: 'file',
-      type: 'file',
-      active: true,
-      hidden: false
-    }
-  ]
-}
-
-var value = {
-  brn: '1234567890-1234-1',
-  address: '경기도 성남시 분당구.',
-  credit: '최우수'
-}
-
-const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
-  <link href="/themes/app-theme.css" 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"
-  />
-
-  <style>
-    body {
-    }
-  </style>
-
-  <ox-attribute-view .attributeSet=${attributeSet} .value=${value}></ox-attribute-view>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {}