Home / File/ model.ts — vue Source File

model.ts — vue Source File

Architecture documentation for model.ts, a typescript file in the vue codebase. 4 imports, 1 dependents.

File typescript WebPlatform WebRuntime 4 imports 1 dependents 9 functions

Entity Profile

Dependency Diagram

graph LR
  69a7e351_3007_a43c_618a_93588eb8db15["model.ts"]
  0f9c49cb_fc8a_5f02_c6c9_10188c13531b["element"]
  69a7e351_3007_a43c_618a_93588eb8db15 --> 0f9c49cb_fc8a_5f02_c6c9_10188c13531b
  09aa5370_2caa_6b33_3f44_6ac5211bd11b["util"]
  69a7e351_3007_a43c_618a_93588eb8db15 --> 09aa5370_2caa_6b33_3f44_6ac5211bd11b
  0b94d479_4c91_cb17_f853_bbf7580e667b["index"]
  69a7e351_3007_a43c_618a_93588eb8db15 --> 0b94d479_4c91_cb17_f853_bbf7580e667b
  90a2398a_1498_3263_c62e_0c064dd2c9b3["index"]
  69a7e351_3007_a43c_618a_93588eb8db15 --> 90a2398a_1498_3263_c62e_0c064dd2c9b3
  75e9abae_441c_ea84_6744_7c3ef7799d18["index.ts"]
  75e9abae_441c_ea84_6744_7c3ef7799d18 --> 69a7e351_3007_a43c_618a_93588eb8db15
  style 69a7e351_3007_a43c_618a_93588eb8db15 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Not type checking this file because flow doesn't like attaching
 * properties to Elements.
 */

import { isTextInputType } from 'web/util/element'
import { looseEqual, looseIndexOf } from 'shared/util'
import { mergeVNodeHook } from 'core/vdom/helpers/index'
import { warn, isIE9, isIE, isEdge } from 'core/util/index'

/* istanbul ignore if */
if (isIE9) {
  // http://www.matts411.com/post/internet-explorer-9-oninput/
  document.addEventListener('selectionchange', () => {
    const el = document.activeElement
    // @ts-expect-error
    if (el && el.vmodel) {
      trigger(el, 'input')
    }
  })
}

const directive = {
  inserted(el, binding, vnode, oldVnode) {
    if (vnode.tag === 'select') {
      // #6903
      if (oldVnode.elm && !oldVnode.elm._vOptions) {
        mergeVNodeHook(vnode, 'postpatch', () => {
          directive.componentUpdated(el, binding, vnode)
        })
      } else {
        setSelected(el, binding, vnode.context)
      }
      el._vOptions = [].map.call(el.options, getValue)
    } else if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
      el._vModifiers = binding.modifiers
      if (!binding.modifiers.lazy) {
        el.addEventListener('compositionstart', onCompositionStart)
        el.addEventListener('compositionend', onCompositionEnd)
        // Safari < 10.2 & UIWebView doesn't fire compositionend when
        // switching focus before confirming composition choice
        // this also fixes the issue where some browsers e.g. iOS Chrome
        // fires "change" instead of "input" on autocomplete.
        el.addEventListener('change', onCompositionEnd)
        /* istanbul ignore if */
        if (isIE9) {
          el.vmodel = true
        }
      }
    }
  },

  componentUpdated(el, binding, vnode) {
    if (vnode.tag === 'select') {
      setSelected(el, binding, vnode.context)
      // in case the options rendered by v-for have changed,
      // it's possible that the value is out-of-sync with the rendered options.
      // detect such cases and filter out values that no longer has a matching
      // option in the DOM.
      const prevOptions = el._vOptions
// ... (89 more lines)

Domain

Subdomains

Dependencies

  • element
  • index
  • index
  • util

Frequently Asked Questions

What does model.ts do?
model.ts is a source file in the vue codebase, written in typescript. It belongs to the WebPlatform domain, WebRuntime subdomain.
What functions are defined in model.ts?
model.ts defines 9 function(s): actuallySetSelected, directive.componentUpdated, directive.inserted, getValue, hasNoMatchingOption, onCompositionEnd, onCompositionStart, setSelected, trigger.
What does model.ts depend on?
model.ts imports 4 module(s): element, index, index, util.
What files import model.ts?
model.ts is imported by 1 file(s): index.ts.
Where is model.ts in the architecture?
model.ts is located at src/platforms/web/runtime/directives/model.ts (domain: WebPlatform, subdomain: WebRuntime, directory: src/platforms/web/runtime/directives).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free