このページは個人的なメモ書きです。何かあればご連絡ください。

• Tweeq

Events

stateDiagram-v2
  [*] --> Focused:focus
  Focused --> Focused:update：modelValue
  Focused --> [*]:blur

原則

• update:modelValue: は自動的に発火させる

States that input components have internally

Types and States

• modelValue: M: そのインプットのモデル値
• display: string: UIとして表示する文字列
  • 最大3回しか display.value = xxx というコードはコンポーネント内に登場しない
    1. 非フォーカス時に外部からモデル値が変更された時
    2. 直接インプットから編集されている時（
       display.value = e.target.value
       ）
• local: Local: インプットが内部状態として持つ型
  • ModelとLocalは異なる可能性がある
    • e.g. InputColor（後述）
• validateResult: ValidateResult<Local>: バリデーション結果。localよりautomatically computed
• validLocal: Local | undefined: 最後にバリデーションに成功したlocalの値

Functions

• print: Model -> string: モデル値をディスプレイ値に変換する
• decompose: Model -> Local, compose: Local -> Model: モデル値とローカル値とを相互変換する
• validate: Local -> Validator<Local>: ローカル値をバリデーションする

迷み！！！！

• modelValue --> local 時にvalidateするかどうか
• multiSelectのget/setValueにはlocalを渡すか、validLocalを渡すか

localってなに?
文字列による編集にせよ、

Actions

• confirm: 現在編集中の値を確定する
  • 典型的なコード

  • local.value = validLocal.value  
    display.value = print(validLocal.value)  
    emit('confirm')
    

flowchart TB  
  modelValue[modelValue: T]:::Model --> s{{≠ emittedModel?}}:::Cond -.->|decompose| local  
  local[local: L]:::Local -->|"print"| display[display: string]  
  display -->|"parse"| onInput{{onInput?}}:::Cond -.-> local  
  local ==>|validate| validateResult  
  validateResult([validated: ValidateResult<L>]):::Local --> p{{passed?}}:::Cond -.-> validLocal  
  validLocal[validLocal: L]:::Local ==>|compose| emittedModel  
  emittedModel([emittedModel]):::Model --> e{{≠ modelValue?}}:::Cond -->|update:modelValue| modelValue  
  
  classDef Model fill:pink  
    classDef Local fill:skyblue  
    classDef Cond fill:white, stroke:gray

stateDiagram-v2  
  modelValue --> local:decompose\n\n(if modelValue != emittedModel)  
  local --> display:print  
  display --> local: parse  
  local --> validated:validate (computed)  
  validated --> validLocal: set if validation doesn't fail  
  validLocal --> emittedModel: compose (computed)  
  emittedModel --> modelValue:update：modelValue\n\n(if modelValue != emittedModel)  
  
  classDef Model fill:pink  
  classDef Local fill:skyblue  
  
  class modelValue, emittedModel Model  
  class local, validated, validLocal Local

InputColor

• 表に出るコンポーネントはこういう風になっている（e.g. InputColor, InputColorPicker）
  • Model = string
  • Local = HSVA = {h: number, s: number, v: number, a: number}
• その内側では、Model、LocalともにすべてHSVAで状態を保持が保持されている

複数のインプットからなるインプットの実装