How to use the vue-types.object 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 / Common / WDot / WDot.vue View on Github 
index: VueTypes.number.isRequired,
cartesianIndex: VueTypes.number.isRequired,
trigger: VueTypes.oneOf(['hover', 'click', 'manual']).def('hover'),
x: VueTypes.number.isRequired,
y: VueTypes.number.isRequired,
fill: VueTypes.string,
stroke: VueTypes.string,
strokeWidth: VueTypes.number,
radius: VueTypes.number,
hoverRadius: VueTypes.number,
info: VueTypes.shape({
id: VueTypes.any,
label: VueTypes.any,
value: VueTypes.array,
}).loose,
styles: VueTypes.object.def({}),
transition: VueTypes.string.isRequired,
},
computed: {
dotStyles () {
return {
...this.themeStyles.styles,
...this.styles,
...(this.trigger === 'click' ? { cursor: 'pointer' } : {}),
}
},
// Event Listeners
dotListeners () {
return merge({}, this.$listeners, {
click: (event) => {
if (this.trigger === 'click') this.handleActive(event)
this.$emit('onClick', this.info)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()
const width = right + left + innerWidth
const height = top + bottom + innerHeight
// Resize parent
const spaces = getSpacesByPos(position, { width, height }, parent.spaceObjects)
parent.addSpace(spaces)
},dataField: VueTypes.string,
sortBy: VueTypes.string,
}),
),
sortByWithCount: VueTypes.oneOf(['asc', 'desc', 'count']),
stats: VueTypes.arrayOf(VueTypes.object),
string: VueTypes.string,
stringArray: VueTypes.arrayOf(VueTypes.string),
stringOrArray: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)]),
stringRequired: VueTypes.string.isRequired,
style: VueTypes.object,
themePreset: VueTypes.oneOf(['light', 'dark']),
// queryFormatDate: VueTypes.oneOf(VueTypes.object.keys(dateFormats)),
queryFormatSearch: VueTypes.oneOf(['and', 'or']),
queryFormatNumberBox: VueTypes.oneOf(['exact', 'lte', 'gte']),
params: VueTypes.object.isRequired,
props: VueTypes.object,
rangeLabelsAlign: VueTypes.oneOf(['left', 'right']),
title: VueTypes.oneOfType([VueTypes.string, VueTypes.any]),
tooltipTrigger: VueTypes.oneOf(['always', 'none', 'hover']),
location: VueTypes.shape({
lat: validateLocation,
lng: validateLocation,
}),
unit: VueTypes.oneOf([
'mi',
'miles',
'yd',
'yards',
'ft',
'feet',
'in',components: {
WAxisText,
},
mixins: [axisMixin, outerElementMixin],
props: {
id: VueTypes.string.def(AXIS_DIMENSION.X),
type: VueTypes.oneOf(AXIS_TYPE_LIST).def(AXIS_TYPE.NUMERIC),
position: VueTypes.oneOf(['bottom', 'top']).def('bottom'),
padding: VueTypes.shape({
left: VueTypes.number,
right: VueTypes.number,
}).def({}), // space between axis edges and bounds region
height: VueTypes.number.def(30),
labelAlign: VueTypes.oneOf(['start', 'middle', 'end']).def('end'),
negativeAxisStyles: VueTypes.object.def({}),
},
layoutInOuterArea (props) {
const {
position, height, invisible,
} = props || {}
return {
reference: 'canvas',
order: -1, // it should be the first one
position,
left: 0,
width: '100%',
height: invisible ? 0 : height,
}
},
computed: {
isOnTop () {import VueTypes from 'vue-types';
// import dateFormats from './dateFormats';
VueTypes.sensibleDefaults = false;
const reactKeyType = VueTypes.oneOfType([
VueTypes.string,
VueTypes.arrayOf(VueTypes.string),
VueTypes.object,
VueTypes.arrayOf(VueTypes.object),
]);
function validateLocation(props, propName) {
// eslint-disable-next-line
if (isNaN(props[propName])) {
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;
}VueTypes.number, // number of grid lines per tick
]).optional,
// Negative axis
hideNegativeAxis: VueTypes.bool.def(false),
// Style
hideLine: VueTypes.bool.def(false),
hideTickMark: VueTypes.bool.def(false),
axisStyles: VueTypes.object,
markStyles: VueTypes.object,
labelStyles: VueTypes.object,
tickLength: VueTypes.number.def(5),
tickStyles: VueTypes.object,
gridStyles: VueTypes.object,
},
preload ({ chart, options, props }) {
const { dimension } = options
const { id, type, datakey } = props || {}
chart.registerAxis(id, {
dimension,
type,
datakey,
})
},
computed: {
isNumeric () {
return this.type === AXIS_TYPE.NUMERIC
},
isCategorical () {export default {
type: 'axis',
dimension: undefined, // 'x', 'y', 'z', 'radial', 'angle'
inject: ['Chart'],
mixins: [themeMixin],
props: {
// Settings
id: VueTypes.string.isRequired,
type: VueTypes.oneOf(AXIS_TYPE_LIST).isRequired,
reversed: VueTypes.bool.def(false),
allowDuplicatedCategory: VueTypes.bool.def(false), // http://recharts.org/en-US/examples/LineChartHasMultiSeries
datakey: VueTypes.string.optional,
invisible: VueTypes.bool.def(false),
domain: VueTypes.array.def([]),
bounds: VueTypes.array.def([]),
padding: VueTypes.object.def({}), // space between axis edges and bounds region
// Ticks
ticks: VueTypes.array.optional,
numTicks: VueTypes.number.def(8),
exactNumTicks: VueTypes.number.optional,
tickFormatter: VueTypes.func.def(value => value),
// Label
label: VueTypes.oneOfType([
VueTypes.string,
VueTypes.arrayOf(VueTypes.string),
]).optional,
labelFontSize: VueTypes.number.def(12),
grid: VueTypes.oneOfType([
VueTypes.bool, // same as "1"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()
const width = right + left + innerWidth
const height = top + bottom + innerHeight
// Resize parentname: VueTypes.string.def(''),
datakey: VueTypes.string,
textOffset: VueTypes.number.def(20),
hideLine: VueTypes.bool.def(false),
hideTickMark: VueTypes.bool.def(false),
numTicks: VueTypes.number.def(8),
format: VueTypes.func.def(value => value),
label: VueTypes.oneOfType([
VueTypes.string,
VueTypes.arrayOf(VueTypes.string),
]).optional,
labelSize: VueTypes.number.def(12),
// Negative axis
hideNegativeAxis: VueTypes.bool.def(false),
// Style
axisStyles: VueTypes.object,
markStyles: VueTypes.object,
labelStyles: VueTypes.object,
tickStyles: VueTypes.object,
},
preload ({ parent, props, index }) {
const {
space, label, datakey, name,
} = props
// Check type axis
const isX = this.axis === 'x'
// Get spaces binding or default
let spaces = space || this.props.space.default()
// Set default space if has label and not space value
if (!space && label) {
spaces = spaceLabel(label, isX)
}<style lang="scss"></style>
