How to use the vue-types.shape 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.
appbaseio / reactivesearch / packages / vue / src / utils / vueTypes.js View on Github 
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']),
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']),import themeMixin from '../mixins/theme'
import { random } from '../utils/maths'
import { generateUid, getOuterElementLayout } from './chartUtils'
export default {
mixins: [themeMixin],
props: {
id: VueTypes.oneOfType([VueTypes.string, VueTypes.number]).optional,
dataset: VueTypes.oneOfType([Array, Object]).def([]),
responsive: VueTypes.bool.def(false),
width: VueTypes.number.def(600),
height: VueTypes.number.def(400),
padding: VueTypes.oneOfType([
VueTypes.number,
VueTypes.arrayOf(VueTypes.number),
VueTypes.shape({
top: VueTypes.number,
right: VueTypes.number,
bottom: VueTypes.number,
left: VueTypes.number,
}),
]).def(0),
},
provide () {
return {
Chart: this,
}
},
data () {
return {
isChartReady: !this.responsive,
parentWidth: null, // Width of chart// WDot,
// WSpread,
// },
mixins: [drawableCartesianMixin],
props: {
xAxisId: VueTypes.string.optional,
xDatakey: VueTypes.string.optional,
yAxisId: VueTypes.string.optional,
yDatakey: VueTypes.string.optional,
trigger: VueTypes.oneOf(['hover', 'click', 'manual']).def('click'),
label: VueTypes.string,
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 {components: {
WTrans,
},
mixins: [themeMixin],
props: {
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 Listenersinject: ['Chart'],
props: {
index: VueTypes.number.isRequired, // internal props set by the parent (WCartesian)
datakey: VueTypes.string.isRequired,
trigger: VueTypes.oneOf(['hover', 'click', 'manual']).def('click'),
legend: VueTypes.string,
curve: VueTypes.oneOfType([VueTypes.bool, VueTypes.func]).def(false),
area: VueTypes.bool.def(false),
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({}),
},
// It's called by parent components to necessary calcs before be rendering
// Componen is not mounted and cannot access to default props
preload ({ parent, props, index }) {
const { snap } = parent
const { datakey } = props
// Set datakeys by index
snap.linesByIndex = { ...snap.linesByIndex, [index]: { datakey } }
},import outerElementMixin from '../../../mixins/outerElementMixin'
import axisMixin, { AXIS_TYPE, AXIS_TYPE_LIST, AXIS_DIMENSION } from '../axisMixin'
import WAxisText from '../../Axis/WAxisText/WAxisText.vue'
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,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,
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),'in',
'inch',
'km',
'kilometers',
'm',
'meters',
'cm',
'centimeters',
'mm',
'millimeters',
'NM',
'nmi',
'nauticalmiles',
]),
value: VueTypes.string.def(undefined),
analyticsConfig: VueTypes.shape({
searchStateHeader: VueTypes.bool,
emptyQuery: VueTypes.bool,
suggestionAnalytics: VueTypes.bool,
userId: VueTypes.string,
customEvents: VueTypes.object,
}).def({
searchStateHeader: false,
emptyQuery: true,
suggestionAnalytics: true,
}),
};
export default types;export default {
name: 'WMarker',
type: 'cartesian',
inject: ['Chart'],
mixins: [themeMixin],
props: {
x: VueTypes.oneOfType([VueTypes.number, VueTypes.arrayOf(VueTypes.number)]).optional,
y: VueTypes.oneOfType([VueTypes.number, VueTypes.arrayOf(VueTypes.number)]).optional,
borderSpacing: VueTypes.oneOfType([VueTypes.number, VueTypes.arrayOf(VueTypes.number)]).def([0, 0, 0, 0]),
label: VueTypes.string.def(''),
labelAlign: VueTypes.oneOf(['start', 'end']).def('end'),
styles: VueTypes.object.def({}),
labelStyles: VueTypes.object,
trigger: VueTypes.oneOf(['hover', 'click', 'manual']).def('hover'),
info: VueTypes.shape({
id: VueTypes.any,
label: VueTypes.any,
value: VueTypes.array,
}).loose,
},
computed: {
scaledX () {
if (Array.isArray(this.x) && this.x.length === 2) {
return this.x.map(x => this.getScaledValue({ value: x, isX: true, isCategory: !this.Chart.scatter })).sort()
}
if (this.x !== undefined) {
return this.getScaledValue({ value: this.x, isX: true, isCategory: !this.Chart.scatter })
}
return undefined
},
scaledY () {
