How to use vue-types - 10 common examples
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 
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)
},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)import { getValue } from 'utils/injector';
import { ADAPTER } from 'data/Injectables';
import Input from 'components/form/Input';
import Icon from 'components/content/Icon';
import CheckBox from 'components/form/CheckBox';
import { serializeUrlParams } from 'utils/urlUtils';
export default {
name: 'ComponentFolderList',
props: {
folders: VueTypes.array.isRequired, // TODO: proper prop type
updateFolderSelectedState: VueTypes.func.isRequired,
loadAllFolders: VueTypes.func.isRequired,
removeFolder: VueTypes.func.isRequired,
addFolder: VueTypes.func.isRequired,
},
created() {
this.loadAllFolders();
},
data() {
return {
newFolder: '',
error: '',
};
},
methods: {
onSubmit() {
if (this.newFolder.length) {'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']),
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([props: {
// Internal props set by the parent (WPieChart)
index: VueTypes.number,
datakey: VueTypes.string,
trigger: VueTypes.oneOf(['hover', 'click', 'manual']).def('hover'),
startAngle: VueTypes.number.def(-1),
endAngle: VueTypes.number.def(-1),
radius: VueTypes.oneOfType([
VueTypes.number,
VueTypes.arrayOf(VueTypes.number).def([0, 100]),
]).def([0, 100]),
maxValue: VueTypes.number.def(-1), // Max value to limit curValues
// Styles
styles: VueTypes.object,
pathStyles: VueTypes.shape({
stroke: VueTypes.string,
}).loose,
color: VueTypes.string,
borderRadius: VueTypes.oneOfType([VueTypes.number, VueTypes.string]).def(0),
opacityDisabled: VueTypes.number.def(0.5),
// Animation
animation: VueTypes.bool.def(true),
animationDuration: VueTypes.number.def(2.5),
// index of item active
itemActive: VueTypes.oneOfType([Number, null]),
},
data () {
return {
activePath: null,
animatedSectors: [],
}
},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.`);
}animationMixin,
visibleMixin,
],
inject: ['Chart'],
props: {
// internal props set by the parent (WPieChart)
index: VueTypes.number,
datakey: VueTypes.string,
trigger: VueTypes.oneOf(['hover', 'click', 'manual']).def('hover'),
legend: VueTypes.string,
curve: VueTypes.oneOfType([VueTypes.bool, VueTypes.func]).def(false),
line: VueTypes.bool.def(false),
lineStyles: VueTypes.shape({
stroke: VueTypes.string,
strokeWidth: VueTypes.number,
strokeDasharray: VueTypes.string,
}).loose.def({}),
dotStyles: VueTypes.shape({
fill: VueTypes.string,
stroke: VueTypes.string,
strokeWidth: VueTypes.number,
radius: VueTypes.number,
opacity: VueTypes.number,
}).loose.def({}),
},
computed: {
lineStylesCmp () {
return {
...this.themeStyles.line,
...this.lineStyles,
stroke: this.themeStyles.line.stroke || this.lineStyles.stroke || this.fillColor,
fill: 'none',mixins: [
themeMixin,
animationMixin,
visibleMixin,
],
inject: ['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},
mixins: [
themeMixin,
animationMixin,
visibleMixin,
],
inject: ['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 }) {
