How to use the vue-types.arrayOf function in vue-types
To help you get started, we’ve selected a few vue-types examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Waavi / vue-wcharts / src / components / Widgets / WLegend.vue View on Github 
import { toPx, getIsHorizontal, getSpacesByPos } from './utils'
import WLegendItem from './WLegendItem.vue'
import WBullet from './WBullet.vue'
export default {
name: 'WLegend',
type: 'plugins',
inject: ['Chart'],
components: {
WLegendItem,
WBullet,
},
props: {
position: VueTypes.oneOf(['top', 'bottom', 'left', 'right']).def('bottom'),
align: VueTypes.oneOf(['start', 'center', 'end']).def('center'),
space: VueTypes.arrayOf(VueTypes.number).def([16, 16, 16, 16]),
size: VueTypes.number, // Width or height, with different positiion prop top-bottom/left-right
selectable: VueTypes.bool.def(false),
componentsStyles: VueTypes.object,
wrapperStyles: VueTypes.object,
legendStyles: VueTypes.object,
colors: VueTypes.arrayOf(VueTypes.string),
},
preload ({ parent, props, index }) {
const { position, size, space } = props
// Positions
const isHorizontal = getIsHorizontal(position)
const innerWidth = !isHorizontal ? size || 85 : null
const innerHeight = isHorizontal ? size || 20 : null
// Spaces
const [top, right, bottom, left] = space || this.props.space.default()
const width = right + left + innerWidthChart: this,
}
},
filters: {
// Transform value to percentage string
percentage (value) {
return `${value.toFixed(2)}%`
},
},
mixins: [
activeMixin,
themeMixin,
animationMixin,
],
props: {
dataset: VueTypes.arrayOf(VueTypes.number).def([]),
markers: VueTypes.arrayOf(VueTypes.number).def([]),
trigger: VueTypes.oneOf(['hover', 'click', 'manual']).def('hover'),
total: VueTypes.number,
showLabel: VueTypes.bool.def(false),
delay: VueTypes.number.def(300),
minWidth: VueTypes.number,
// Styles
styles: VueTypes.object.def({}),
labelStyles: VueTypes.object,
markerStyles: VueTypes.object.def({}),
},
data () {
return {
launchAnimation: false,
offset: this.minWidth || MIN_WIDTH,
}export default {
name: 'WLegend',
type: 'plugins',
inject: ['Chart'],
components: {
WLegendItem,
WBullet,
},
mixins: [themeMixin],
props: {
legends: VueTypes.arrayOf([String]),
position: VueTypes.oneOf(['top', 'bottom', 'left', 'right']).def('bottom'),
align: VueTypes.oneOf(['start', 'center', 'end']).def('center'),
selectable: VueTypes.bool.def(false),
size: VueTypes.number, // Width or height, with different positiion prop top-bottom/left-right
space: VueTypes.arrayOf(VueTypes.number).def([16, 16, 16, 16]),
colors: VueTypes.arrayOf(VueTypes.string).optional,
// Styles
styles: VueTypes.object.def({}),
wrapperStyles: VueTypes.object.def({}),
legendStyles: VueTypes.object.def({}),
legendStylesDisabled: VueTypes.object.def({}),
bulletStyles: VueTypes.object.def({}),
},
preload ({ parent, props, index }) {
const { position, size, space } = props
// Positions
const isHorizontal = getIsHorizontal(position)
const innerWidth = !isHorizontal ? size || 85 : null
const innerHeight = isHorizontal ? size || 20 : null
// Spaces
const [top, right, bottom, left] = space || this.props.space.default()}),
react: VueTypes.shape({
and: reactKeyType,
or: reactKeyType,
not: reactKeyType,
}),
selectedValues: VueTypes.object,
selectedValue: VueTypes.oneOfType([
VueTypes.string,
VueTypes.arrayOf(VueTypes.string),
VueTypes.arrayOf(VueTypes.object),
VueTypes.object,
Number,
VueTypes.arrayOf(Number),
]),
suggestions: VueTypes.arrayOf(VueTypes.object),
supportedOrientations: VueTypes.oneOf([
'portrait',
'portrait-upside-down',
'landscape',
'landscape-left',
'landscape-right',
]),
sortBy: VueTypes.oneOf(['asc', 'desc']),
sortOptions: VueTypes.arrayOf(
VueTypes.shape({
label: VueTypes.string,
dataField: VueTypes.string,
sortBy: VueTypes.string,
}),
),
sortByWithCount: VueTypes.oneOf(['asc', 'desc', 'count']),import stack from 'd3-shape/src/stack'
import stackOffsetDiverging from 'd3-shape/src/offset/diverging'
import noop from 'lodash.noop'
import { bound } from '../../utils/maths'
import merge from '../../utils/merge'
import chartMixin from '../../mixins/chart'
export default {
name: 'WCartesian',
mixins: [chartMixin],
props: {
scatter: VueTypes.bool.def(false),
bound: VueTypes.array.def([]),
xBound: VueTypes.array.def([]),
gap: VueTypes.oneOfType([VueTypes.number, VueTypes.arrayOf(VueTypes.number).def([0, 0, 0, 0])]).def(0),
},
data () {
return {
axis: {
x: {
datakey: null,
name: null,
numTicks: null,
},
y: {
datakey: null,
name: null,
numTicks: null,
},
z: {
datakey: null,.isRequired,
dataNumberBox: VueTypes.shape({
label: VueTypes.string,
start: VueTypes.number.isRequired,
end: VueTypes.number.isRequired,
}).isRequired,
date: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)]),
dateObject: VueTypes.object,
excludeFields: VueTypes.arrayOf(VueTypes.string),
fieldWeights: VueTypes.arrayOf(VueTypes.number),
filterLabel: VueTypes.string,
func: VueTypes.func,
funcRequired: VueTypes.func.isRequired,
fuzziness: VueTypes.oneOf([0, 1, 2, 'AUTO']),
headers: VueTypes.object,
hits: VueTypes.arrayOf(VueTypes.object),
iconPosition: VueTypes.oneOf(['left', 'right']),
includeFields: VueTypes.arrayOf(VueTypes.string),
labelPosition: VueTypes.oneOf(['left', 'right', 'top', 'bottom']),
number: VueTypes.number,
options: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.object), VueTypes.object]),
paginationAt: VueTypes.oneOf(['top', 'bottom', 'both']),
range: VueTypes.shape({
start: VueTypes.number.isRequired,
end: VueTypes.number.isRequired,
}),
rangeLabels: VueTypes.shape({
start: VueTypes.string.isRequired,
end: VueTypes.string.isRequired,
}),
react: VueTypes.shape({
and: reactKeyType,start: VueTypes.number.isRequired,
end: VueTypes.number.isRequired,
}),
rangeLabels: VueTypes.shape({
start: VueTypes.string.isRequired,
end: VueTypes.string.isRequired,
}),
react: VueTypes.shape({
and: reactKeyType,
or: reactKeyType,
not: reactKeyType,
}),
selectedValues: VueTypes.object,
selectedValue: VueTypes.oneOfType([
VueTypes.string,
VueTypes.arrayOf(VueTypes.string),
VueTypes.arrayOf(VueTypes.object),
VueTypes.object,
Number,
VueTypes.arrayOf(Number),
]),
suggestions: VueTypes.arrayOf(VueTypes.object),
supportedOrientations: VueTypes.oneOf([
'portrait',
'portrait-upside-down',
'landscape',
'landscape-left',
'landscape-right',
]),
sortBy: VueTypes.oneOf(['asc', 'desc']),
sortOptions: VueTypes.arrayOf(
VueTypes.shape({import VueTypes from 'vue-types'
import axisMixin from '../../../mixins/axis'
const negativeAxisStylesDefaultProp = {
stroke: '#999',
strokeWidth: 1,
strokeDasharray: '0',
}
export default {
name: 'WXAxis',
axis: 'x',
mixins: [axisMixin],
props: {
labelAlign: VueTypes.oneOf(['start', 'middle', 'end']).def('end'),
space: VueTypes.arrayOf(VueTypes.number).def([0, 20, 24, 20]),
textOffset: VueTypes.number.def(20),
negativeAxisStyles: VueTypes.object.def({}),
},
computed: {
negativeAxis () {
const {
canvas, yScale, bounds, snap,
} = this.Chart
if (bounds.min >= 0 || !Object.keys(snap).length) return null
const y = yScale(0)
return {
x1: canvas.x0,
y1: y,
x2: canvas.x1,
y2: y,
}return new Error(`${propName} value must be a VueTypes.number`);
}
if (propName === 'lat' && (props[propName] < -90 || props[propName] > 90)) {
return new Error(`${propName} value should be between -90 and 90.`);
}
if (propName === 'lng' && (props[propName] < -180 || props[propName] > 180)) {
return new Error(`${propName} value should be between -180 and 180.`);
}
return null;
}
const types = {
any: VueTypes.any,
bool: VueTypes.bool,
boolRequired: VueTypes.bool.isRequired,
components: VueTypes.arrayOf(VueTypes.string),
children: VueTypes.any,
data: VueTypes.arrayOf(VueTypes.object),
dataFieldArray: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)])
.isRequired,
dataNumberBox: VueTypes.shape({
label: VueTypes.string,
start: VueTypes.number.isRequired,
end: VueTypes.number.isRequired,
}).isRequired,
date: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)]),
dateObject: VueTypes.object,
excludeFields: VueTypes.arrayOf(VueTypes.string),
fieldWeights: VueTypes.arrayOf(VueTypes.number),
filterLabel: VueTypes.string,
func: VueTypes.func,
funcRequired: VueTypes.func.isRequired,
