Let's say I have this object:
const obj = {
ul: { padding: "20px 0", flex: 1 }, // <- there's a comma here!
li: { fontFamily: "'Lato'", lineHeight: "44px" }
}
Someone accidentally removes a comma separating two values:
const obj = {
ul: { padding: "20px 0", flex: 1 } // <-- oops! the comma that was here is gone...
li: { fontFamily: "'Lato'", lineHeight: "44px" }
}
Now eslint would say something like "Unexpected token", but will not be able to solve the error automatically with --fix. Is there a rule I can use to solve these type of issues automatically?
I've looked at rules like comma-dangle and object-property-newline but they don't seem to apply to this situation.
Related
is there a way to read the style of a column or cell in excel sheet in nodejs? I'm using xlsx lib but I am okay with using any other lib that provide this info. to be precise I need to know if a column or cell is bold or not while reading it.
The 'excel.js` did good job to get style and more other functions.
Demo - get B1 and C1 cell's styles.
B1 - Arial, 12 px size, bold
C1 - Calibri, 20 px, Italic
Code
const ExcelJS = require('exceljs');
const wb = new ExcelJS.Workbook();
const fileName = 'test-style.xlsx';
wb.xlsx.readFile(fileName).then(() => {
const ws = wb.getWorksheet('Sheet1');
const b1_font = ws.getCell('B1').font
console.log(b1_font);
const c1_font = ws.getCell('C2').font
console.log(c1_font);
}).catch(err => {
console.log(err.message);
});
Result
$ node read.js
{ bold: true, size: 12, color: { theme: 1 }, name: 'Arial', family: 2 }
{
size: 20,
color: { theme: 1 },
name: 'Calibri',
family: 2,
scheme: 'minor'
}
More detail information in here
and here
I have the following situation:
There are css rules inside of my JS var which looks like this:
"floating_icons": {
"main_color": "",
"phone_color": "",
"mail_color": "",
"whatsapp_color": ""
}
},
"style_css": ".pad-t { padding: 0 20px 0 20px;} .grey-t { color: rgba(127.765849375934, 127.765849375934, 127.765849375934, 0.217430264}"
}
},
"entity": {
"data": {
"data": {
And I need to apply 'style_css' it in my VueJS application. Unfortunatelly I didn't find any propriate solution for it.
Could you please help me out with it?
Binding Inline Styles guide for the Vuejs v2
The object syntax for v-bind:style is pretty straightforward - it looks almost like CSS, except it’s a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
It is often a good idea to bind to a style object directly so that the template is cleaner:
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
Again, the object syntax is often used in conjunction with computed properties that return objects.
Array Syntax
The array syntax for v-bind:style allows you to apply multiple style objects to the same element:
<div v-bind:style="[baseStyles, overridingStyles]"></div>
You should read the full guide at https://v2.vuejs.org/v2/guide/class-and-style.html
I'm using Go.js to create a canvas a user can draw straight lines on. From the documentation, I've been able to create nodes. Node creation code looks like:
const node = this.goMake(go.Node, 'Horizontal',
{ position: new go.Point(point[0], point[1]) }, // set the Node.position
this.goMake(go.Shape, 'Circle', { width: 10, height: 10, fill: 'lightblue' })
);
As I understand the documentation, in order to create a line (non-directional link) between the two nodes, I need to use their key values like so:
this.myDiagram.model.addLinkData({ from: node1.key, to: node2.key });
When logging out my nodes, I see that key value is an empty string.
Question: When creating my nodes using the first snippet above, how do I inject the key value so the second code snippet properly links the two? Creating unique values for all points is not an issue, I just can't figure out how to attach the unique value to the node's key property.
keys are a property of Model data, where the model has an array of node data and link data. Keys are not properties of the Nodes themselves exactly. node.key is just a convenience for node.data.key.
So when you write:
myDiagram.model.addNodeData( { key: 'a' });
It is making a copy of the myDiagram.nodeTemplate, and assigning that Node the node.data of { key: 'a' }, so that node's key is 'a'
In other words, you can only relate these things by the model, not by the Node that you are creating.
If you are using models, you should be creating node templates on the Diagram, not stand-alone nodes, as it appears you are doing. So something like:
myDiagram.nodeTemplate = this.goMake(go.Node, 'Horizontal',
{ position: new go.Point(point[0], point[1]) }, // set the Node.position
this.goMake(go.Shape, 'Circle', { width: 10, height: 10, fill: 'lightblue' })
);
or if you have multiple templates:
myDiagram.nodeTemplateMap.add('newTemplate', this.goMake(go.Node, 'Horizontal',
{ position: new go.Point(point[0], point[1]) }, // set the Node.position
this.goMake(go.Shape, 'Circle', { width: 10, height: 10, fill: 'lightblue' })
));
I have flow.js type definition as shown below:
export type Block = {
color: {
primary: Color,
secondary: Color,
},
font-size: '16px',
font-weight: '500',
};
And I would like to create an object with not all properties defined and another one with all fields required.
So second one:
const divv: Block = {
...all fields here
}
first one (just font-size):
const divv2: Block | any = {
font-size: '17px'
}
As you can see I've used
Block | any
To declare first one divv, but intellisense will hint me all divv2 properties, but it has only one of main Block type.
How to do it correctly?
Try $Shape
Copies the shape of the type supplied, but marks every field optional.
So, it'll be:
const divv2: $Shape<Block> = {
font-size: '17px'
}
First of all let me introduce you to my project. I am desining a web application that will show some data about devices scattered around a country. To create this I used Vue.js and HighCharts (HighMaps for the map part). This is the result I have achieved now.
What I want to add now is the possibility for the end-user to click on a marked region and show all of the devices in that region. To do that I need the region's "ID", called code in HighMaps, to send a ajax request to my db and I would also like to make this new "div" a component so that I can use it freely in my application. I'll put a sketch image of what I mean (excuse me for my really bad paint skills :D):
The black lines are not important, what I would like to achieve is to show a new component besides the map (or wherever really). Next is my current code, I am using the one page, one component style so both template and script tags are in the same file and I omitted in the script tag all the unecessary things. Right now I just set up a div with curly brackets to update a variable on change, just to debug more easily. My main problem is that, in the plotOptions.series.point.events.click when I try to reference the this.foo variable it doesn't set it since the div doesn't update. I think that might be a scope issue but I wouldn't know where to start looking.
<template>
<div id="canvasContainer">
<highmaps :options="chartOptions"></highmaps>
<app-componentForDevices><app-componentForDevices>
<div>{{foo}}</div>
</div>
</template>
<script>
import HighCharts from 'vue-highcharts';
import json from '../map.json'
export default {
data: function () {
return {
foo: 'NO',
/* Map */
chartOptions: {
chart: {
map: json, // The map data is taken from the .json file imported above
},
plotOptions: {
series: {
point: {
events: {
click: function () {
this.foo='OK'
}
}
}
},
map: {
joinBy: ['hc-key', 'code'],
allAreas: false,
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
},
}
},
/* Zoom and move */
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [
{
allAreas: true,
showInLegend: false,
},
{
borderColor: '#a0451c',
cursor: 'pointer',
name: 'ERROR',
color: "red",
data: ['it-na', 'it-mi', 'it-mo', 'it-ud'].map(function (code) {
return {code: code};
}),
},
{
borderColor: '#a09e21',
cursor: 'pointer',
name: 'WARNING',
color: "yellow",
data: ['it-ts', 'it-av', 'it-ri'].map(function (code) {
return {code: code};
}),
},
{
borderColor: '#4ea02a',
cursor: 'pointer',
name: "OK",
color: "lightgreen",
data: ['it-pa', 'it-ve', 'it-bo', 'it-ta', 'it-pn'].map(function (code) {
return {code: code};
}),
},
],
}
}
}
}
</script>
<style scoped>
svg{
align-items: center;
}
Thanks in advance for the help. Cheers!
EDIT
I have just tried #icecream_hobbit 's suggestion and using a ECMA6 arrow function helped since now I can access the variable store in Vue but now I lost the access to the local arguments like this.name which made possibile for me to print the selected region. Any ideas? Am I missing something?
EDITv2
Thanks to #icecream_hobbit I have found a way to do what I wanted. You just need to add an object inside the parenthesis so that you can use this for the global variable and e for your mouse click event.
events: {
click: (e) => {
this.foo = 'OK'
this.foo = e.point.name
}
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Until arrow functions, every new function defined its own this value
(a new object in the case of a constructor, undefined in strict mode
function calls, the base object if the function is called as an
"object method", etc.)
The this you were accessing did not belong to the Vue instance. You can use an arrow function () => {/*function body*/} to inherit the this of the Vue instance.
An arrow function expression has a shorter syntax than a function
expression and does not have its own this, arguments, super, or
new.target.
EDIT: For the added question of how do I do I get the Vue instance, and the object instance at the same time you can use a closure.
click: function(VueInstance){
return function() {
VueInstance.Foo = 'OK';
}(this)
}