@things-factory/scene-form 5.0.0-alpha.9 → 5.0.0-y.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/scene-form",
-  "version": "5.0.0-alpha.9",
+  "version": "5.0.0-y.0",
   "description": "HTML Element component for things-scene.",
   "browser": "src/index.js",
   "things-scene": true,
@@ -22,10 +22,10 @@
     "soap": "^0.34.0"
   },
   "dependencies": {
-    "@hatiolab/things-scene": "^2.7.34",
+    "@hatiolab/things-scene": "^2.8.2",
     "hls.js": "^0.14.16",
     "tinycolor2": "^1.4.1",
     "xml-js": "^1.6.11"
   },
-  "gitHead": "c0f2f0758f80724cae6bbd56bbea43feef0f8a1c"
+  "gitHead": "2fb8066dae72d864b0fc3a5b439a18579fa39ee6"
 }

package/README.md

@@ -1,15 +0,0 @@
-## things-scene-form
-
-## build
-
-`$ yarn build`
-
-| type | filename                | for            | tested |
-| ---- | ----------------------- | -------------- | ------ |
-| UMD  | things-scene-form.js    | modern browser | O      |
-| UMD  | things-scene-form-ie.js | ie 11          | O      |
-| ESM  | things-scene-form.mjs   | modern browser | O      |
-
-## publish
-
-`$ yarn publish`

package/helps/scene/component/input.ko.md

@@ -1,59 +0,0 @@
-# Input
-
-키보드나 마우스를 사용해서 사용자로부터 입력을 받아서 처리하는 컴포넌트이다.
-Form Container안에 배치되면, 일반적인 HTML Form에서 사용되는 다양한 종류의 HTML Input Element와 동일하게 동작한다.
-
-[The Input (Form Input) element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
-
-## 종류
-
-- input
-- input-text
-- input-password
-- input-email
-- input-search
-- input-time
-- input-datetime-local
-- input-month
-- input-week
-
-## Properties
-
-- name
-  - type: string
-  - form 안의 엘리먼트 이름
-- value
-  - type: string
-  - input element의 값
-- placeholder
-  - type: string
-  - input element의 플레이스홀더
-- readonly
-  - type: checkbox
-  - 읽기 전용 여부
-- disabled
-  - type: checkbox
-  - form 안에서의 동작 불가
-- max-length
-  - type: number
-  - 최대 입력 글자 수
-- submit-on-change
-  - type: checkbox
-  - 엔터키나 포커스 아웃 등으로 값 변경이 확정되면, 자동으로 폼 전송
-- spread-on-init
-  - type: checkbox
-  - 초기값부터 데이타 스프레드되도록 할 것인지를 설정
-  - true로 설정하면, 초기값이 input 컴포넌트의 data로 set되어 설정된 데이타 스프레드가 동작한다.
-  - false로 설정하면, 초기값은 data로 set되지 않는다.
-- next-input
-  - type: string
-  - 엔터키가 입력되었을 때 자동으로 포커스가 특정 컴포넌트로 이동되도록 설정
-- autofocus
-  - type: checkbox
-  - 보드가 로드될 때, 자동으로 입력 포커스를 갖도록 할 것인지를 설정
-- alltime-focus
-  - type: checkbox
-  - 이 컴포넌트가 포커스를 잃었을 때, alltime-focus-pending에 설정된 시간 후에 자동으로 다시 포커스를 획득하도록 하는 설정
-- alltime-focus-pending
-  - type: number
-  - 이 컴포넌트가 포커스를 잃었을 때, alltime-focus가 설정되면, alltime-focus-pending에 설정된 시간(milli-seconds) 후에 자동으로 다시 포커스를 획득하도록 하는 설정

package/helps/scene/component/input.md

@@ -1,59 +0,0 @@
-# Input
-
-It is a component that receives and processes input from the user using a keyboard or mouse.
-When placed in a form container, it operates in the same way as various types of HTML input elements used in general HTML forms.
-
-[The Input (Form Input) element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
-
-## 종류
-
-- input
-- input-text
-- input-password
-- input-email
-- input-search
-- input-time
-- input-datetime-local
-- input-month
-- input-week
-
-## Properties
-
-- name
-  - type: string
-  - the name of the element in the form
-- value
-  - type: string
-  - input element value
-- placeholder
-  - type: string
-  - placeholder for input element
-- readonly
-  - type: checkbox
-  - Whether read-only
-- disabled
-  - type: checkbox
-  - Operation in the form is disabled
-- max-length
-  - type: number
-  - Maximum number of characters to be entered
-- submit-on-change
-  - type: checkbox
-  - When the value change is confirmed by Enter key or focus out, etc., the form is automatically sent.
-- spread-on-init
-  - type: checkbox
-  - Set whether to spread the data from the initial value
-  - If set to true, the initial value is set as the data of the input component, and the set data spread operates.
-  - If set to false, the initial value is not set to data.
-- next-input
-  - type: string
-  - Set the focus to automatically move to a specific component when the enter key is pressed
-- autofocus
-  - type: checkbox
-  - Set whether to have input focus automatically when the board is loaded
-- alltime-focus
-  - type: checkbox
-  - When this component loses focus, it is set to automatically regain focus after the time set in alltime-focus-pending.
-- alltime-focus-pending
-  - type: number
-  - When this component loses focus, if alltime-focus is set, it automatically acquires focus again after the time (milli-seconds) set in alltime-focus-pending.

package/helps/scene/component/input.zh.md

@@ -1,58 +0,0 @@
-# Input
-
-它是使用键盘或鼠标接收和处理来自用户的输入的组件。
-当放置在表单容器中时，其操作与常规HTML表单中使用的各种类型的HTML输入元素相同。
-[The Input (Form Input) element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
-
-## 种类
-
-- input
-- input-text
-- input-password
-- input-email
-- input-search
-- input-time
-- input-datetime-local
-- input-month
-- input-week
-
-## Properties
-
-- name
-  - type: string
-  - 表单中元素的名称
-- value
-  - type: string
-  - 输入元素值
-- placeholder
-  - type: string
-  - 输入元素的占位符
-- readonly
-  - type: checkbox
-  - 是否只读
-- disabled
-  - type: checkbox
-  - 表格中的操作被禁用
-- max-length
-  - type: number
-  - 输入的最大字符数
-- submit-on-change
-  - type: checkbox
-  - 当按Enter键确认值更改或聚焦后，将自动发送表格。
-- spread-on-init
-  - type: checkbox
-  - 设置是否从初始值传播数据
-  - 如果设置为true，则将初始值设置为输入组件的数据，并且设置的数据扩展操作。
-  - 如果设置为false，则初始值不设置为data。
-- next-input
-  - type: string
-  - 将焦点设置为在按下回车键时自动移动到特定组件
-- autofocus
-  - type: checkbox
-  - 设置加载电路板时是否自动具有输入焦点
-- alltime-focus
-  - type: checkbox
-  - 当此组件失去焦点时，它将设置为在alltime-focus-pending中设置的时间后自动重新获得焦点。
-- alltime-focus-pending
-  - type: number
-  - 当此组件失去焦点时，如果设置了alltime-focus，则在alltime-focus-pending中设置的时间（毫秒）后，它将自动再次获取焦点。

package/src/button.js

@@ -1,34 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, HTMLOverlayElement } from '@hatiolab/things-scene'
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'value',
-      name: 'text'
-    }
-  ],
-  'value-property': 'text'
-}
-
-export default class Button extends HTMLOverlayElement {
-  get tagName() {
-    return 'button'
-  }
-
-  get nature() {
-    return NATURE
-  }
-
-  setElementProperties(button) {
-    this.element.textContent = this.value
-  }
-}
-
-Component.register('button', Button)

package/src/checkbox.js

@@ -1,103 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'value',
-      name: 'value'
-    },
-    {
-      type: 'number',
-      label: 'size',
-      name: 'size'
-    },
-    {
-      type: 'string',
-      label: 'name',
-      name: 'name'
-    },
-    {
-      type: 'checkbox',
-      label: 'checked',
-      name: 'checked'
-    },
-    {
-      type: 'checkbox',
-      label: 'submit-on-change',
-      name: 'submitOnChange'
-    },
-    {
-      type: 'checkbox',
-      label: 'spread-on-init',
-      name: 'spreadOnInit'
-    }
-  ],
-  'value-property': 'value'
-}
-
-import Input from './input'
-import { Component } from '@hatiolab/things-scene'
-
-export default class CheckBox extends Input {
-  get nature() {
-    return NATURE
-  }
-
-  get tagName() {
-    return 'input'
-  }
-
-  get inputType() {
-    return 'checkbox'
-  }
-
-  get hasTextProperty() {
-    return true
-  }
-
-  createElement() {
-    this.element = document.createElement('label')
-    if (!this.element) return
-
-    var input = document.createElement('input')
-    this.element.appendChild(input)
-
-    var text = document.createTextNode(this.get('text'))
-    this.element.appendChild(text)
-
-    this.setElementProperties(this.element)
-
-    if (this.parent.isHTMLElement && this.parent.isHTMLElement()) this.parent.element.appendChild(this.element)
-    else this.root.model_layer.overlay.appendChild(this.element)
-
-    Component.reposition(this)
-
-    this.oncreate_element && this.oncreate_element(this.element)
-  }
-
-  setElementProperties(element) {
-    var eText = this.element.querySelector('text')
-    var eInput = this.element.querySelector('input')
-
-    var { text, checked, value } = this.state
-
-    if (eText) {
-      eText.textContent = text
-    }
-
-    if (eInput) {
-      eInput.checked = checked
-      eInput.value = value
-    }
-
-    super.setElementProperties(eInput)
-  }
-}
-
-Component.register('input-checkbox', CheckBox)

package/src/div.js

@@ -1,27 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true
-}
-
-import { Component, HTMLOverlayContainer } from '@hatiolab/things-scene'
-
-export default class Div extends HTMLOverlayContainer {
-  setElementProperties(div) {
-    div.textContent = this.text
-  }
-
-  get tagName() {
-    return 'div'
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('div', Div)

package/src/embed.js

@@ -1,47 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'src',
-      name: 'src',
-    },
-    {
-      type: 'string',
-      label: 'mime-type',
-      name: 'mimetype',
-    },
-  ],
-  'value-property': 'src',
-}
-
-import { Component, HTMLOverlayElement } from '@hatiolab/things-scene'
-
-export default class Embed extends HTMLOverlayElement {
-  get src() {
-    return this.getState('src')
-  }
-
-  set src(src) {
-    this.setState('src', src)
-  }
-
-  setElementProperties(embed) {
-    var { src = '', mimetype = '' } = this.state
-
-    if (embed.src != src) embed.src = src
-    if (embed.type != mimetype) embed.type = mimetype
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('embed', Embed)

package/src/fieldset.js

@@ -1,48 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'legend',
-      name: 'legend'
-    }
-  ]
-}
-
-import { Component, HTMLOverlayContainer } from '@hatiolab/things-scene'
-
-export default class FieldSet extends HTMLOverlayContainer {
-  setElementProperties(fieldset) {
-    var { legend = '' } = this.state
-
-    if (legend) {
-      this.legendElement.textContent = legend
-    } else {
-      this._legendElement && this.element.removeChild(this._legendElement)
-      delete this._legendElement
-    }
-  }
-
-  get legendElement() {
-    if (!this._legendElement) {
-      var legend = document.createElement('legend')
-      this.element.appendChild(legend)
-
-      this._legendElement = legend
-    }
-
-    return this._legendElement
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('fieldset', FieldSet)