Develop Reference

How to add multiple icon to an array

I have an array simply like this
const data = {
products: [
{
name: 'example1',
icon: <exampleIcon />,
},
{
name: 'example2'
icon: <exampleIcon2 />
},
],
};
I'm using icons from React Icons
Is it possible for me to add multiple icons to the icon part? like three icons in a row like this exampleIcon exampleIcon exampleIcon

you should be able to put multiple icons inside a react fragment
icon: <><exampleIcon /> <exampleIcon2 /></>,

Yes you can, just wrap your components into a root div like this:
const data = {
products: [
{
name: 'example1',
icon: <div className="wrapper"><exampleIcon /><exampleIcon /><exampleIcon /></div> ,
},
{
name: 'example2',
icon: <exampleIcon2 />
},
],
};
Add this style:
.wrapper {
display: flex;
}

Where to save single time use data for vuejs in webpack setup

This is the current setup that I have with my vuejs & webpack.
I have a Vue file: gallery.vue
<template>
<div id="gallery">
<figure style="background-color:#1a1c23;">
<img
src="./assets/img/someimage1.png"
alt="Alt text for image 1"
title="title text for image 1"
data-src="./assets/link-additional-image1.png"
data-color="#1a1c23">
</figure>
<figure style......
</figure>
// A large number of these figure elements
</div>
</template>
<script>
import GalleryItem from './component/galleryItem.vue'
export default {
name: 'Gallery',
components: {
GalleryItem
}
}
</script>
And this is the component file galleryItem.vue
<template>
<figure v-bind:style="{backgroundColor:backgroundColor}">
<img
v-bind:src="src"
v-bind:alt="alt"
v-bind:title="title"
v-bind:data-src="dataSrc"
v-bind:data-color="dataColor">
</figure>
</template>
<script>
export default {
name: 'GalleryItem',
props: {
backgroundColor: String,
src: String,
alt: String,
title: String,
dataSrc: String,
dataColor: String
}
}
</script>
What I want to do instead is have an array of object, something like below, and recursively create galleryItem components in gallery component using that array.
How can I achieve this? I don't know where to save the array and how to pass it to the vue components, I was thinking to have the array in a seprate javascript file.
Or if this is a wrong approach ?
var a = [
{
backgroundColor: "#480572",
src: "./assets/img/someimage1.png",
alt: "Alt text for image 1",
title: "title text for image 1",
dataSrc: "./assets/link-additional-image1.png",
dataColor: "#ebebf7"
},
{
backgroundColor: "#2A3132",
src: "./assets/img/someimage2.png",
alt: "Alt text for image 2",
title: "title text for image 1",
dataSrc: "./assets/link-additional-image2.png",
dataColor: "#FFFFFF"
},
....
// A large number of these items
]

Yes, you can save it to a separate js file and import from there.
//../assets/gallery.js or where ever you want to save the file
export const gallery = [
{
backgroundColor: "#480572",
src: "./assets/img/someimage1.png",
alt: "Alt text for image 1",
title: "title text for image 1",
dataSrc: "./assets/link-additional-image1.png",
dataColor: "#ebebf7"
},
{
backgroundColor: "#2A3132",
src: "./assets/img/someimage2.png",
alt: "Alt text for image 2",
title: "title text for image 1",
dataSrc: "./assets/link-additional-image2.png",
dataColor: "#FFFFFF"
},
....
// A large number of these items
]
In gallery component
<script>
import GalleryItem from './component/galleryItem.vue'
import { gallery } from '../assets/gallery.js'
export default {
name: 'Gallery',
data() {
return {
gallery
}
},
components: {
GalleryItem
}
}
</script>

Polymer JS - Parametric neon-animation config

I have a component - floating digit that animates from bottom to top.
And this code is working perfectly fine:
<dom-module id="floating-digit">
<style>
span.increment {
display: none;
font-size: 12px;
font-weight: normal;
position: absolute;
right: -10px;
top: 1.25em;
}
</style>
<template>
<span id="floater" class="increment">+[[digit]]</span>
</template>
</dom-module>
<script>
Polymer({
is: "floating-digit",
behaviors: [Polymer.NeonAnimationRunnerBehavior],
properties: {
digit: {
type: String,
value: "",
observer: '_animateDigit'
},
transformFrom: {
type: String,
value: "translateY(0)"
},
transformTo: {
type: String,
value: "translateY(-100%)"
},
animationConfig: {
value: function () {
return {
'animate': [
{
name: 'fade-in-animation',
node: this.$.floater,
timing: {duration: 100}
},
{
name: 'transform-animation',
node: this.$.floater,
transformFrom: "translateY(0)",
transformTo: "translateY(-100%)",
timing: {duration: 1500}
},
{
name: 'fade-out-animation',
node: this.$.floater,
timing: {duration: 2000, delay: 2000}
},
]
}
}
}
},
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
_animateDigit: function _animateDigit() {
this.$.floater.style.display = "inline";
this.playAnimation('animate');
},
_onNeonAnimationFinish: function _onNeonAnimationFinish() {
this.$.floater.style.display = 'none';
},
})
</script>
But there are several places on my app where I want to use this component with different transformFrom and transformTo values.
That is why I added to my floating-digit properties transformTo and transformFrom, so I can parametrize them when I want those values to be different than default:
<floating-digit id="floating-0" transform-from="translateY(-20%)" transform-to="translateY(-80%)" digit="[[someNumber]]"></floating-digit>
I have changed animationConfig this way (only changed excerpt):
{
name: 'transform-animation',
node: this.$.floater,
transformFrom: this.transformFrom,
transformTo: this.transformTo,
timing: {duration: 1500}
},
But it does not work. This function seems not to have access to all those properties defined in element.
console.log(this) inside function returning animationConfig object value properly identifies this as desired instance of <floating-digit>. Unfortunately, without properties that can be used for parametrizing configuration of animations. They remain undefined.
Any of you possibly have an idea how to access those parameters?

If anyone is interested I have found solution. Unfortunately this solution does not use Polymer to grab those parameters.
I am using native web API to do this:
My animationConfig looks that way:
animationConfig: {
value: function () {
let transformFrom = this.attributes.getNamedItem('transform-from') ? this.attributes.getNamedItem('transform-from').textContent : "translateY(0)";
let transformTo = this.attributes.getNamedItem('transform-to') ? this.attributes.getNamedItem('transform-to').textContent : "translateY(-100%)";
return {
'animate': [
{
name: 'fade-in-animation',
node: this.$.floater,
timing: {duration: 100}
},
{
name: 'transform-animation',
node: this.$.floater,
transformFrom: transformFrom,
transformTo: transformTo,
timing: {duration: 1500}
},
{
name: 'fade-out-animation',
node: this.$.floater,
timing: {duration: 2000, delay: 2000}
},
]
}
}
}
And I am calling this same way as before:
<floating-digit id="floating-0" transform-from="translateY(-20%)" transform-to="translateY(-70%)" digit="5"></floating-digit>
If anyone have idea why this does not work properly, you are more than invited to share your solution.

VueJS - Dynamic repeating component

I have a <filter> component in a .vue file that has some properties to control the filter of a query.
This <filter> can be added / removed on-the-fly as the user needs. It's behavior is very similar to the Google Analytics segmentation filter, or Advanced Custom Fields from WordPress.
The only solution I see is instantiating this component dynamically and iterate over an array of these components inside my main app, but I don't exactly know how to do it.
Vue.component("my-filter", {
template: "#filterTemplate",
data: function() {
return {
field: null,
value: null
}
},
mounted: function() {
this.$emit("filter-created", this);
},
methods: {
removeFilter: function() {
console.log("Remove this filter");
}
}
});
var app = new Vue({
el: "#app",
data: {
filtersCount: 5,
filters: [] // PROBLEM! I can't decrement on my filtersCount and remove the correct filter. Iteration should be over my "filtersCount" property.
},
methods: {
filterCreated: function(filterObj) {
this.filters.push(filterObj);
},
addFilter: function() {
this.filtersCount += 1;
}
}
});
* {
font-family: "Helvetica", "mono";
font-size: 16px;
}
.filterContainer + .filterContainer {
margin-top: 10px;
}
.filterContainer {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
<!-- I shouldn't iterate over an integer value, but over an array of objects to remove the right ones -->
<my-filter v-on:filter-created="filterCreated" v-for="(index, filter) in filtersCount" :key="index"></my-filter>
<br>
<button #click="addFilter">Add filter</button>
</div>
<script type="text/x-template" id="filterTemplate">
<div class="filterContainer">
<input type="text" :value="field" placeholder="Field" />
<input type="text" :value="value" placeholder="Value" />
<button #click="removeFilter">Remove filter</button>
</div>
</script>

A few things can be changed to get it working (I'm just assuming what you are looking for!)
First, you don't need a data property for counting filters (filtersCount), you can loop through the filters property.
Second, adding this to the filters property can cause unexpected behaviour because this references the entire Vue component. I would recommend adding plain objects that represent the filter data and pass the data as props. Note: that the index is also passed as a prop which can be referenced and allow the filter to be removed through emitting
And lastly, your v-for seems to be reversed. It should be (filter, index) instead of (index, filter).
Vue.component("my-filter", {
template: "#filterTemplate",
props: [
'field',
'value', // filter data
'id',
'index' // index that allows this filter to be removed
],
data: function() {
return {
field: this.field,
value: this.value
}
},
methods: {
removeFilter: function() {
this.$emit('remove-filter', this.index);
},
handleInput: function(prop, e) {
this.$emit('update-filter', { index: this.index, prop, value: e.target.value });
}
}
});
window.vm = new Vue({
el: "#app",
data: {
filters: [
{ id: 1, field: null, value: null },
{ id: 2, field: null, value: null },
{ id: 3, field: null, value: null },
{ id: 4, field: null, value: null },
{ id: 5, field: null, value: null }
]
},
methods: {
addFilter: function() {
var id = Math.max.apply(Math,this.filters.map(function(o){return o.id;})) + 1;
this.filters.push({ id, field: null, value: null });
},
removeFilter: function(index) {
this.filters.splice(index, 1);
},
updateFilter: function(payload) {
this.filters[payload.index][payload.prop] = payload.value;
}
}
});
* {
font-family: "Helvetica", "mono";
font-size: 16px;
}
.filterContainer + .filterContainer {
margin-top: 10px;
}
.filterContainer {
display: block;
border: 1px solid black;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
<button #click="addFilter">Add Filter</button>
<br><br>
<my-filter v-for="(filter, index) in filters" :key="index" :field="filter.field" :value="filter.value" :id="filter.id" :index="index" #remove-filter="removeFilter" #update-filter="updateFilter"></my-filter>
</div>
<script type="text/x-template" id="filterTemplate">
<div class="filterContainer">
<div>Index: {{ index }}, ID: {{ id }}</div>
<input type="text" :value="field" placeholder="Field" #input="handleInput('field', $event)" />
<input type="text" :value="value" placeholder="Value" #input="handleInput('value', $event)" />
<button #click="removeFilter">Remove filter</button>
</div>
</script>

Kendo Scheduler Won't Take dataSource

I have a JSON array that looks something like this:
var mockArr = [
{activity: "That One Activity", due_date: "07/22/2016", address: "22 Jump Ln", id: "42"},
{activity: "That Other Activity", due_date: "07/25/2015", address: "123 Fake St", id: "43"}
];
and I'm trying to bind it to a kendo Scheduler widget, which is configured like this:
$("#scheduler").kendoScheduler({
date: new Date(),
height: 100,
views: [
{type: "day"},
{type: "month", selected: true},
{type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}"}
],
mobile: "phone",
timezone: "Etc/UTC",
allDaySlot:true,
editable: false,
dataSource: {
data: mockArr,
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "id", type: "number" },
title: { from: "activity" },
start: { type: "date", from: "due_date" },
end: {type: "date", from: "due_date"},
description: { from: "address" }
}
}
}
}
});
When I run the web applet the console spits out "TypeError: e is null", and I get a page that looks like this
But I get a working scheduler when I replace mockArr and the referencing model with a static SchedulerEvent such as:
var event = new kendo.data.SchedulerEvent({
id: 1,
title: "test event",
start: new Date("2016/7/22"),
end: new Date("2016/7/22")
});
Why doesn't the scheduler like my dataSource?

There are few reasons you are facing this issue.
The reason why page look like in the image you provided is because you specified height: 100 .Remove this line kendo framework handle it automatically and you can specify it later based on your need.
Your Json Array need to be formatted correctly. see the snippet in the code provided
The data Parameter in datasource expect a javascript object you need to parse it using this data:JSON.parse(mockArr),
I noticed that kendo does not allow to bind start/end parameter in the fields to same name like you used due_date so it need to be changed to
start:{ type: "date", from: "due_date" },
end: { type: "date", from: "due_date1" },
Other than this Your code work fine I have tested it.
The console error "web applet the console spits out "TypeError: e is null" sounds to be specific to java , i assume you are using java and that might be related to java framework.
Here is your live version of working code .
Navigate to Kendo UI online Editor and delete the pre-populated code and paste the code snippet provided below.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example">
<div id="scheduler"></div>
</div>
<script>
var mockArr ='[{"activity":"That One Activity","due_date":"07/22/2016","due_date1":"07/22/2016","address":"22 Jump Ln","id":"42"},{"activity": "That Other Activity", "due_date": "07/25/2016","due_date1":"07/25/2016","address": "123 Fake St", "id": "43"}]';
$("#scheduler").kendoScheduler({
date: new Date(),
views: [
{type: "day"},
{type: "month", selected: true},
{type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}"}
],
allDaySlot:true,
editable: true,
dataSource: {
data:JSON.parse(mockArr),
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "id", type: "number" },
title: { from: "activity" },
start: { type: "date", from: "due_date" },
end: { type: "date", from: "due_date1" },
description: { from: "address" }
}
}
}
}
});
</script>
</body>
</html>