html5/render/vue/validator/check.js

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
const supportedProperties = {
  '@common': [
    'id', 'ref', 'style', 'class', 'append'
  ]
}

const supportedStyles = {
  '*': [
    '@box-model', '@border', '@position', '@flexbox', '@font', '@text', '@bg',
    'lines', 'item-size', 'item-color', 'item-selected-color'
  ],
  '@box-model': [
    'width', 'height', 'position',
    'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
    'margin-top', 'margin-bottom', 'margin-left', 'margin-right'
  ],
  '@border': [
    'border-style', 'border-width', 'border-color', 'border-radius',
    'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style',
    'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
    'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
    'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'
  ],
  '@position': ['position', 'top', 'left', 'right', 'bottom'],
  '@flexbox': [
    'flex', 'flex-direction', 'justify-content', 'align-items', 'flex-wrap'
  ],
  '@font': ['font-size', 'font-weight', 'font-style', 'font-family', 'line-height'],
  '@text': ['text-align', 'text-decoration', 'text-overflow', 'color'],
  '@bg': ['background-color', 'opacity'],

  'a': ['@box-model', '@border', '@position', '@flexbox', '@bg'],
  'div': ['@box-model', '@border', '@position', '@flexbox', '@bg'],
  'text': ['@box-model', '@border', '@position', '@font', '@text', '@bg', 'lines'],
  'slider': ['@box-model', '@border', '@position', '@flexbox', '@bg'],
  'switch': ['@box-model', '@border', '@position', '@flexbox', '@bg'],
  'indicator': ['@box-model', '@border', '@position', '@flexbox', '@bg', 'item-size', 'item-color', 'item-selected-color'],
  'input': ['@box-model', '@border', '@position', '@font', '@text', '@bg'],
  'textarea': ['@box-model', '@border', '@position', '@font', '@text', '@bg', 'rows'],
  'scroller': ['@box-model', '@border', '@position', '@flexbox', '@bg'],
  'loading': ['@box-model', '@border', '@position', '@flexbox', '@bg'],
  'refresh': ['@box-model', '@border', '@position', '@flexbox', '@bg'],
  'list': ['@box-model', '@border', '@position', '@flexbox', '@bg'],
  'cell': ['@box-model', '@border', '@position', '@flexbox', '@bg'],
  'video': ['@box-model', '@border', '@position', '@flexbox', '@bg'],
  'web': ['@box-model', '@border', '@position', '@flexbox', '@bg']
}

/**
 * Flatten a multiple dimension array.
 */
export function flatten (array) {
  return array.reduce((dist, item) => {
    return dist.concat(Array.isArray(item) ? flatten(item) : item)
  }, [])
}

/**
 * Check if the value is in the list.
 * @param {String} type
 * @param {String} value
 * @param {Object} dict
 */
export function checkSupported (type, value, dict = {}) {
  const tagType = dict[type] ? type : '*'
  if (Array.isArray(dict[tagType])) {
    return flatten(dict[tagType].map(k => dict[k] || k)).indexOf(value) !== -1
  }
  return false
}

/**
 * Check if the style is supported for the component.
 * @param {String} type
 * @param {String} style
 */
export function isSupportedStyle (type, style) {
  return checkSupported(type, style, supportedStyles)
}

/**
 * Check if the property is supported for the component.
 * @param {String} type
 * @param {String} property
 */
export function isSupportedProp (type, prop) {
  return checkSupported(type, prop, supportedProperties)
}