How to use the vue-types.string 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 
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)
},'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 }) {color: {
type: String,
default: '#333'
},
/**
* The shape of my heart
*/
shape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
/**
* The size of the button
* @values small, normal, large
*/
size: VueTypes.string.def('normal'),
/**
* Gets called when the user clicks on the button
* @ignore
*/
onClick: {
type: Function,
default: event => {
console.log('You have clicked me!', event.target)
}
}
},
computed: {
fontSize() {
let size
switch (this.size) {
case 'small':import VueTypes from 'vue-types';
import types from '../../utils/vueTypes';
import ResultCardTitle from './addons/ResultCardTitle.jsx';
import ResultCardImage from './addons/ResultCardImage.jsx';
import ResultCardDescription from './addons/ResultCardDescription.jsx';
import Card from '../../styles/Card';
const ResultCard = {
name: 'ResultCard',
components: {
ResultCardTitle,
ResultCardImage,
ResultCardDescription,
},
props: {
target: VueTypes.string.def('_blank'),
href: types.string,
},
render() {
const children = this.$slots.default;
const { href, target, ...rest } = this.$props;
return (
{children}
);
},
