How to use the vue-types.number 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 / WTooltip / WTooltip.vue View on Github 
import VueTypes from 'vue-types'
import WBullet from '../WBullet/WBullet.vue'
import { toPx } from '../utils'
import themeMixin from '../../../mixins/theme'
export default {
name: 'WTooltip',
type: 'plugins',
inject: ['Chart'],
components: {
WBullet,
},
mixins: [themeMixin],
props: {
id: VueTypes.string,
gap: VueTypes.number.def(10),
styles: VueTypes.object,
visibleStyles: VueTypes.object,
titleStyles: VueTypes.object,
wrapperStyles: VueTypes.object,
},
data () {
return {
selected: null,
visible: false,
x: 0,
y: 0,
}
},
computed: {
// Styles
stylesCmp () {export default {
name: 'WXAxis2',
dimension: AXIS_DIMENSION.X,
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,
}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 + innerWidth
const height = top + bottom + innerHeightdomain: 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"
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),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,
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]),curve: VueTypes.oneOfType([VueTypes.bool, VueTypes.func]).def(false),
area: VueTypes.bool.def(false),
color: VueTypes.string.optional,
styles: VueTypes.shape({
fill: VueTypes.string,
stroke: VueTypes.string,
strokeWidth: VueTypes.number,
strokeDasharray: VueTypes.string,
}).def({}),
dot: VueTypes.bool.def(false),
dotStyles: VueTypes.shape({
fill: VueTypes.string,
stroke: VueTypes.string,
strokeWidth: VueTypes.number,
radius: VueTypes.number,
hoverRadius: VueTypes.number,
}).def({}),
},
preload ({ chart, uid, props }) {
const {
xAxisId, yAxisId, series, xDatakey, yDatakey,
} = props || {}
chart.registerAxisDatakey(uid, {
axisId: xAxisId,
dimension: AXIS_DIMENSION.X,
series,
datakey: xDatakey,
})
chart.registerAxisDatakey(uid, {
axisId: yAxisId,
dimension: AXIS_DIMENSION.Y,
series,
