[Feature request ] Number slider
martinandersen3d opened this issue · comments
Wow! Just Awesome extension!
Feature: Press and hold down on the title to slide the number:
For some time ago i was programming a css editor, I did not had the time to finish it. But I will add the code here for the slider, as inspiration:
My Code from late 2017.. can't remember what everything does :-D
<template>
<div>
<!-- Start -->
<span @mousedown="start" class='noSelect labelText'>
{{propsDataName}}
</span>
<span>
<input
v-model="componentString"
:class="[ componentString.length > 21 ? 'inputWide' : '' ]"
@keyup.up.capture.prevent.stop="textfieldPressUp"
@keyup.down.prevent="textfieldPressDown"
:title="propsDataTooltip"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
>
</span>
<span class='dropdownSpan'>
<select v-model="dropdownSelected" class='dropdownSelect' @change="cons">
<option v-for="(item, index) in dropdownItems" v-bind:value="item"> <!-- todo style="background-color:blue;" -->
{{ item.val }}
</option>
</select>
</span>
<!-- End -->
</div>
</template>
<script>
var collect = require('collect.js');
export default {
props: {
propsData: Object
},
data(){
return{
propsDataName:'',
propsDataTooltip:'',
mouseStartX:0,
mouseStartY:0,
mouseMoveX:0,
mouseMoveY:0,
mouseMoveTotalX:0, /* user moves mostly between -100px and +100px, so totally around 200px */
componentValue:25,
componentString:"",
componentArr:[],
componentArrPos:0,
componentIsNum:false,
componentStartValue:25,
componentUnit:"px",
componentMin:-1000, /* null or integer */
componentMax:100000, /* null or integer */
dropdownSelected: '',
dropdownItems: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
};
}, //data
methods: {
start(e){
this.increaseDecreeseValue(0, this.componentString)
this.componentValue = parseInt(this.componentArr[0])
this.componentStartValue = this.componentValue
this.mouseMoveTotalX = 0
var x = e.pageX;
var y = e.pageY;
this.mouseStartX=x
this.mouseStartY=y
window.addEventListener('mousemove',this.move);
window.addEventListener('mouseup',this.end);
},
move(e){
var x = e.pageX;
var y = e.pageY;
this.mouseMoveX=x
this.mouseMoveY=y
this.mouseMoveTotalX = -this.mouseStartX +x
/* if a min or max value is defined */
// Convert negative -30 numbers to positive
var positiveNumber = Math.abs(this.mouseMoveTotalX)
// y = (x*0.05)^2.1
var potensFunction = Math.pow( (positiveNumber*0.05), 2.1 )
// if 'mouseMoveTotalX' is a negative number, we will multiply 'potensFunction' with * -1
if( Math.sign(this.mouseMoveTotalX) === -1 ){potensFunction = potensFunction * -1}
var result = this.componentStartValue + potensFunction;
// check value min and max settings and crop value.
if( result < this.componentMin ){ result = this.componentMin}
if( result>this.componentMax ){ result = this.componentMax}
this.componentValue = parseInt(result)
this.componentArr[0] = this.componentValue
this.componentString = this.componentArr.join('')
},//move
end(){
window.removeEventListener('mousemove',this.move);
window.removeEventListener('mouseup',this.end);
},//end
cons(){
this.componentString = this.dropdownSelected.val;
},//cons
textfieldPressUp(e){
e.preventDefault();
// console.log(e.path[0].selectionStart);
},//textfieldPressUp
textfieldPressDown(e){
e.preventDefault();
// console.log(e);
},//textfieldPressUp
increaseDecreeseValue(cursorPositionInt, str){
/**
@param cursorPositionInt = integer
@param str = string
@param addSubtractString = string
*/
function isNum(n) {
if(n ==="-"){return true}
return !isNaN(parseFloat(n)) && isFinite(n);
}
var cursor = cursorPositionInt;
var arr= str.toString().split('');
var temp ="";
var resActive=null
var res=[];
for (let i = 0; i < arr.length; i++) {
var n = arr[i]
var next = (i+1 < arr.length) ? arr[i+1] : ''
var next_type = isNum(next);
temp+=n
if(isNum(n) !== next_type){
res.push(temp)
temp = ""
}
if(i+1 === arr.length){res.push(temp)}
if(cursor === i){resActive = res.length}
if(cursor === i && isNum(n) ===false){resActive = null}
}
// if(isNum( res[resActive] )){
// res[resActive] = parseInt(res[resActive]) + parseInt(addSubtract)
// }
var result =res.join('')
if(str.length > 0 && isNum(res[0])){
this.componentIsNum = true
this.componentPos =0
this.componentArr = res
}
else{
this.componentIsNum = false
}
},
},//methods
mounted(){
this.propsDataName = this.propsData.id.replace("-", " ")
this.propsDataTooltip = this.propsData.tooltip
var opSplit = this.propsData.options.split("|")
var collection = collect(opSplit)
var i = 0
var res = collection.map(function (theKey) {
var tmp = {val:theKey, id: i}
i++;
return tmp;
});
// console.log(res.all());
this.dropdownItems = res.all();
} //mounted
}
</script>
<style scoped>
input{
background-color: rgba(255,255,255, 0.5);
border: 1px solid rgba(0,0,0, 0.2);
padding: 3px;
}
input:active,input:hover{
background-color: white;
border: 1px solid rgba(0,0,0, 0.8);
padding: 3px;
}
.inputWide{
display: block;
width: 250px !important;
}
.dropdownSpan{
margin-left: -25px;
}
.dropdownSelect{
width:21px;
height: 24px;
background-color:none;
}
.dropdownSelect:hover{
border: 1px solid rgba(0,0,0, 0.8);
}
.labelText{
cursor: w-resize;
font-size: 14px;
padding: 3px;
color:rgb(180,180,180);
width:140px;
padding-left: 16px;
display: inline-block;
}
.labelText:hover{
color:blue;
background-color: rgba(255,255,255, 1);
}
.noSelect{
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
More Jizz:
cssMixin.js
export const cssMixin = {
data(){
return{
cssObj: [
{ id: "background-attachment",
group: "12Background",
defaultText: "scroll",
options: "scroll|fixed",
type: "",
tooltip: ""
},
{ id: "background-blend-mode",
group: "12Background",
defaultText: "",
options: "normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity",
type: "",
tooltip: ""
},
{ id: "background-color",
group: "12Background",
defaultText: "transparent",
options: "rgb(0,0,0)|#ffffff|red|rgba(0, 0, 0, 0.6)|hsl(89, 43%, 51%)|hsla(89, 43%, 51%, 0.6)",
type: "",
tooltip: ""
},
{ id: "background-image",
group: "12Background",
defaultText: "none",
options: "url('link.jpg')",
type: "",
tooltip: ""
},
{ id: "background-position",
group: "12Background",
defaultText: "0% 0%",
options: "left center|left bottom|right top|right center|right bottom|center top|center center|center bottom|20% 20%|20px 20px",
type: "",
tooltip: "background-repeat:no-repeat;"
},
{ id: "background-repeat",
group: "12Background",
defaultText: "repeat",
options: "repeat|repeat-x|repeat-y|no-repeat",
type: "",
tooltip: ""
},
{ id: "background-size",
group: "12Background",
defaultText: "",
options: "auto|cover|contain|100px 100px|200px|50%|100% 100%",
type: "",
tooltip: "background-repeat:no-repeat;"
},
{ id: "background",
group: "12Background",
defaultText: "multiple values",
options: "background-color|background-image|background-repeat|background-attachment|background-position",
type: "",
tooltip: ""
},
{ id: "border-collapse",
group: "24Table",
defaultText: "separate",
options: "collapse|separate",
type: "",
tooltip: "table' and 'inline-table' elements"
},
{ id: "border-color",
group: "15Border",
defaultText: "multiple values",
options: "rgb(255,0,0)|#FF0000|red|rgba(201, 76, 76, 0.6)|hsl(89, 43%, 51%)|hsla(89, 43%, 51%, 0.6) |transparent",
type: "",
tooltip: ""
},
{ id: "border-radius",
group: "15Border",
defaultText: "",
options: "3px|5px|50%",
type: "",
tooltip: ""
},
{ id: "border-spacing",
group: "24Table",
defaultText: "0",
options: "0px 0px",
type: "",
tooltip: "table' and 'inline-table' elements"
},
{ id: "border-style",
group: "15Border",
defaultText: "",
options: "none|hidden|dotted|dashed|solid|double |groove|ridge|inset|outset",
type: "",
tooltip: ""
},
{ id: "border-width",
group: "15Border",
defaultText: "multiple values",
options: "2px|3px 3px|1px 3px 6px 9px",
type: "",
tooltip: ""
},
{ id: "border",
group: "15Border",
defaultText: "multiple values",
options: "1px solid #green",
type: "",
tooltip: ""
},
{ id: "bottom",
group: "18Position",
defaultText: "auto",
options: "14px|50%|auto",
type: "",
tooltip: ""
},
{ id: "box-shadow",
group: "22Fx",
defaultText: "",
options: "10px 5px 5px black",
type: "",
tooltip: "maybe you are looking for 'text-shadow'?"
},
{ id: "box-sizing",
group: "18Position",
defaultText: "",
options: "content-box|border-box",
type: "",
tooltip: ""
},
{ id: "caption-side",
group: "24Table",
defaultText: "top",
options: "top|bottom",
type: "",
tooltip: ""
},
{ id: "clear",
group: "18Position",
defaultText: "none",
options: "none|left|right|both",
type: "",
tooltip: ""
},
{ id: "clip-path",
group: "18Position",
defaultText: "auto",
options: "rect(0px,50px,50px,0px)|rect(1px, 10em, 3rem, 2ch)|auto|fill-box|stroke-box|view-box|margin-box|border-box|padding-box|content-box|inset(100px 50px)|circle(50px at 0 100px)|polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)|padding-box circle(50px at 0 100px)",
type: "",
tooltip: "Crop a image. Note: The clip property does not work if 'overflow:visible'. Applies to absolutely positioned elements Try position: absolute;"
},
{ id: "color",
group: "10Font",
defaultText: "depends on user agent",
options: "rgb(255,0,0)|#FF0000|red|rgba(201, 76, 76, 0.6)|hsl(89, 43%, 51%)|hsla(89, 43%, 51%, 0.6) ",
type: "",
tooltip: ""
},
{ id: "column-count",
group: "10Font",
defaultText: "",
options: "2|3|4",
type: "",
tooltip: ""
},
{ id: "column-gap",
group: "10Font",
defaultText: "",
options: "20px",
type: "",
tooltip: ""
},
{ id: "content",
group: "25Beforeafter",
defaultText: "normal",
options: "",
type: "",
tooltip: ""
},
{ id: "counter-increment",
group: "10Font",
defaultText: "none",
options: "",
type: "",
tooltip: ""
},
{ id: "counter-reset",
group: "10Font",
defaultText: "none",
options: "",
type: "",
tooltip: ""
},
{ id: "cursor",
group: "10Font",
defaultText: "auto",
options: "crosshair|default|pointer|move|e-resize|ne-resize|nw-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help|progress|url('link.jpg')",
type: "",
tooltip: ""
},
{ id: "direction",
group: "10Font",
defaultText: "ltr",
options: "ltr|rtl",
type: "",
tooltip: "unicode-bidi: bidi-override;"
},
{ id: "display",
group: "18Position",
defaultText: "inline",
options: "inline|block|flex|grid|list-item|inline-block|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption",
type: "",
tooltip: ""
},
{ id: "empty-cells",
group: "24Table",
defaultText: "show",
options: "show|hide",
type: "",
tooltip: ""
},
{ id: "float",
group: "18Position",
defaultText: "none",
options: "left|right",
type: "",
tooltip: ""
},
{ id: "font-family",
group: "10Font",
defaultText: "depends on user agent",
options: "",
type: "",
tooltip: ""
},
{ id: "font-size",
group: "10Font",
defaultText: "medium",
options: "8px|9px|10px|11px|12px|14px|18px|24px|30px|36px|28px|60px|72px|96px|0.8em|1.6rem|120%|medium|xx-small|x-small|small|large|x-large|xx-large| smaller|larger",
type: "",
tooltip: ""
},
{ id: "font-style",
group: "10Font",
defaultText: "normal",
options: "normal|italic|oblique",
type: "",
tooltip: ""
},
{ id: "font-variant",
group: "10Font",
defaultText: "normal",
options: "normal|small-caps",
type: "",
tooltip: ""
},
{ id: "font-weight",
group: "10Font",
defaultText: "normal",
options: "normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900",
type: "",
tooltip: ""
},
{ id: "font",
group: "10Font",
defaultText: "multiple values",
options: "font-style|font-variant|font-weight|font-size|font-family|caption|icon|menu|message-box|small-caption|status-bar",
type: "",
tooltip: ""
},
{ id: "height",
group: "17Height",
defaultText: "auto",
options: "14px|50%|auto",
type: "",
tooltip: ""
},
{ id: "left",
group: "18Position",
defaultText: "auto",
options: "14px|50%|auto",
type: "",
tooltip: ""
},
{ id: "letter-spacing",
group: "10Font",
defaultText: "normal",
options: "normal|14px",
type: "",
tooltip: ""
},
{ id: "line-height",
group: "10Font",
defaultText: "normal",
options: "14px|50%",
type: "",
tooltip: ""
},
{ id: "list-style-image",
group: "23List",
defaultText: "none",
options: "url('link.jpg')",
type: "",
tooltip: "elements with 'display: list-item'"
},
{ id: "list-style-position",
group: "23List",
defaultText: "outside",
options: "inside|outside",
type: "",
tooltip: "elements with 'display: list-item'"
},
{ id: "list-style-type",
group: "23List",
defaultText: "disc",
options: "disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin|armenian|georgian|lower-alpha|upper-alpha",
type: "",
tooltip: "elements with 'display: list-item'"
},
{ id: "list-style",
group: "23List",
defaultText: "multiple values",
options: "list-style-type|list-style-position|list-style-image",
type: "",
tooltip: "elements with 'display: list-item'"
},
{ id: "margin",
group: "13Margin",
defaultText: "multiple values",
options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
type: "",
tooltip: "all elements except elements with table display types other than table-caption, table and inline-table"
},
{ id: "margin-left",
group: "13Margin",
defaultText: "",
options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
type: "",
tooltip: ""
},
{ id: "margin-right",
group: "13Margin",
defaultText: "",
options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
type: "",
tooltip: ""
},
{ id: "margin-top",
group: "13Margin",
defaultText: "",
options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
type: "",
tooltip: ""
},
{ id: "margin-bottom",
group: "13Margin",
defaultText: "",
options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
type: "",
tooltip: ""
},
{ id: "max-height",
group: "17Height",
defaultText: "none",
options: "14px|50%",
type: "",
tooltip: "all elements but non-replaced inline elements, table columns, and column groups"
},
{ id: "max-width",
group: "16Width",
defaultText: "none",
options: "14px|50%",
type: "",
tooltip: "all elements but non-replaced inline elements, table rows, and row groups"
},
{ id: "min-height",
group: "17Height",
defaultText: "0",
options: "14px|50%",
type: "",
tooltip: "all elements but non-replaced inline elements, table columns, and column groups"
},
{ id: "min-width",
group: "16Width",
defaultText: "0",
options: "14px|50%",
type: "",
tooltip: "all elements but non-replaced inline elements, table rows, and row groups"
},
{ id: "opacity",
group: "10Font",
defaultText: "",
options: "20%",
type: "",
tooltip: ""
},
{ id: "outline-color",
group: "22Fx",
defaultText: "invert",
options: "rgb(255,0,0)|#FF0000|red|rgba(201, 76, 76, 0.6)|hsl(89, 43%, 51%)|hsla(89, 43%, 51%, 0.6) |invert",
type: "",
tooltip: ""
},
{ id: "outline-style",
group: "22Fx",
defaultText: "none",
options: "hidden|dotted|dashed|solid|double|groove|ridge|inset|outset",
type: "",
tooltip: ""
},
{ id: "outline-width",
group: "22Fx",
defaultText: "medium",
options: "5px",
type: "",
tooltip: ""
},
{ id: "outline",
group: "22Fx",
defaultText: "multiple values",
options: "outline-color|outline-style|outline-width",
type: "",
tooltip: ""
},
{ id: "overflow",
group: "18Position",
defaultText: "visible",
options: "visible|hidden|scroll|auto",
type: "",
tooltip: ""
},
{ id: "padding",
group: "14Padding",
defaultText: "multiple values",
options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
type: "",
tooltip: ""
},
{ id: "padding-left",
group: "14Padding",
defaultText: "",
options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
type: "",
tooltip: ""
},
{ id: "padding-right",
group: "14Padding",
defaultText: "",
options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
type: "",
tooltip: ""
},
{ id: "padding-top",
group: "14Padding",
defaultText: "",
options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
type: "",
tooltip: ""
},
{ id: "padding-bottom",
group: "14Padding",
defaultText: "",
options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
type: "",
tooltip: ""
},
{ id: "page-break-after",
group: "10Font",
defaultText: "auto",
options: "auto|always|avoid|left|right",
type: "",
tooltip: ""
},
{ id: "page-break-before",
group: "10Font",
defaultText: "auto",
options: "auto|always|avoid|left|right",
type: "",
tooltip: ""
},
{ id: "page-break-inside",
group: "10Font",
defaultText: "auto",
options: "avoid|auto",
type: "",
tooltip: ""
},
{ id: "position",
group: "18Position",
defaultText: "static",
options: "static|relative|absolute|fixed",
type: "",
tooltip: ""
},
{ id: "quotes",
group: "10Font",
defaultText: "depends on user agent",
options: "",
type: "",
tooltip: ""
},
{ id: "resize",
group: "18Position",
defaultText: "",
options: "horizontal|vertical|both",
type: "",
tooltip: ""
},
{ id: "right",
group: "18Position",
defaultText: "auto",
options: "14px|50%|auto",
type: "",
tooltip: ""
},
{ id: "table-layout",
group: "24Table",
defaultText: "auto",
options: "auto|fixed",
type: "",
tooltip: ""
},
{ id: "text-align",
group: "10Font",
defaultText: "a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl'",
options: "left|right|center|justify",
type: "",
tooltip: ""
},
{ id: "text-decoration",
group: "10Font",
defaultText: "none",
options: "none|underline|overline|line-through|blink",
type: "",
tooltip: ""
},
{ id: "text-indent",
group: "10Font",
defaultText: "0",
options: "14px|50%",
type: "",
tooltip: ""
},
{ id: "text-shadow",
group: "10Font",
defaultText: "",
options: "5px 5px 5px #CF5C2B",
type: "",
tooltip: ""
},
{ id: "text-transform",
group: "10Font",
defaultText: "none",
options: "capitalize|uppercase|lowercase",
type: "",
tooltip: ""
},
{ id: "top",
group: "18Position",
defaultText: "auto",
options: "14px|50%|auto",
type: "",
tooltip: ""
},
{ id: "unicode-bidi",
group: "10Font",
defaultText: "normal",
options: "normal|embed|bidi-override",
type: "",
tooltip: "direction: rtl;"
},
{ id: "vertical-align",
group: "10Font",
defaultText: "baseline",
options: "baseline|sub|super|top|text-top|middle|bottom|text-bottom|50%|14px",
type: "",
tooltip: "inline-level and 'table-cell' elements"
},
{ id: "visibility",
group: "18Position",
defaultText: "visible",
options: "visible|hidden|collapse",
type: "",
tooltip: ""
},
{ id: "white-space",
group: "10Font",
defaultText: "normal",
options: "normal|pre|nowrap|pre-wrap|pre-line",
type: "",
tooltip: ""
},
{ id: "width",
group: "16Width",
defaultText: "auto",
options: "14px|50%|auto",
type: "",
tooltip: ""
},
{ id: "word-spacing",
group: "10Font",
defaultText: "normal",
options: "normal|14px",
type: "",
tooltip: ""
},
{ id: "z-index",
group: "18Position",
defaultText: "auto",
options: "20",
type: "",
tooltip: ""
},
{ id: "align-content",
group: "19Flex",
defaultText: "stretch",
options: "stretch|center|flex-start|flex-end|space-between|space-around",
type: "",
tooltip: "This property has no effect on single line flexible boxes. The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines."
},
{ id: "align-items",
group: "19Flex",
defaultText: "stretch",
options: "stretch|center|flex-start|flex-end|baseline",
type: "",
tooltip: ""
},
{ id: "flex-basis",
group: "19Flex",
defaultText: "auto",
options: "16px|24px|36px|25%|33%|50%| 66%|75%",
type: "",
tooltip: "Specifies the initial length of a flexible item"
},
{ id: "justify-content",
group: "19Flex",
defaultText: "flex-start",
options: "flex-start|flex-end|center|space-between|space-around",
type: "",
tooltip: ""
},
{ id: "flex-direction",
group: "20Flex Container",
defaultText: "row",
options: "row|row-reverse|column|column-reverse",
type: "",
tooltip: "Specifies the direction of the flexible items"
},
{ id: "flex-flow",
group: "20Flex Container",
defaultText: "row nowrap",
options: "row nowrap|row wrap|row wrap-reverse|row-reverse nowrap|row-reverse wrap|row-reverse wrap-reverse|column nowrap|column wrap|column wrap-reverse|column-reverse nowrap|column-reverse wrap|column-reverse wrap-reverse",
type: "",
tooltip: "A shorthand property for the flex-direction and the flex-wrap properties"
},
{ id: "flex-wrap",
group: "20Flex Container",
defaultText: "nowrap",
options: "nowrap|wrap|wrap-reverse",
type: "",
tooltip: ""
},
{ id: "align-self",
group: "21Flex Item",
defaultText: "auto",
options: "auto|stretch|center|flex-start|flex-end|baseline",
type: "",
tooltip: ""
},
{ id: "flex",
group: "21Flex Item",
defaultText: "0 1 auto",
options: "auto|2|2|10em|30px|1 30px|2 2|2 2 10%",
type: "",
tooltip: "The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container.\nThe flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties."
},
{ id: "order",
group: "21Flex Item",
defaultText: "0",
options: "1|2|3|4|5|6|7|8|9|10",
type: "",
tooltip: "number: Default value 0. Specifies the order for the flexible item"
},
{ id: "flex-grow",
group: "21Flex Item",
defaultText: "0",
options: "1|2|3|4|5",
type: "",
tooltip: "The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. The flex-grow property is specified as a single number."
},
{ id: "flex-shrink",
group: "21Flex Item",
defaultText: "1",
options: "1|2|3|4|5",
type: "",
tooltip: "The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container."
}
]
};//return
}, //data
} //export
/**
var collect = require('collect.js');
const collection = collect(cssObj);
const unique = collection.map(function (item) {
return item.group;
}).unique().sort();
unique.all();
console.log( unique.all() );
'font',
'background',
'margin',
'padding',
'border',
'width',
'height',
'position',
'position_flex',
'position_flex_item'
'position_flex_container',
'list',
'fx',
'table',
'beforeafter',
'11Font',
'20Flex Container',
'21Flex Item',
'22Fx',
'23List',
'24Table',
'25Beforeafter',
'12Background',
'13Margin',
'14Padding',
'15Border',
'16Width',
'17Height',
'18Position',
'19Flex'
*/
cssView.vue
<template><div class='cssContainer'>
<!-- Start -->
<!--
<div @click="this.asdsa = !this.asdsa">hey</div>
<div v-if="this.asdsa">sdfsdfsd</div>
-->
<div v-for="(groupItem, groupIndex) in groups" >
<div @click="groupsShow[groupIndex] =! groupsShow[groupIndex]" class='cssTitle'>{{groupItem.substring(2)}}
</div>
<div v-for="(item, index) in sameGroup(groupItem)" v-show=" groupsShow[groupIndex] ">
<labelSlider :propsData="item"></labelSlider>
</div>
</div>
<!-- END -->
</div></template>
<script>
import {cssMixin} from './cssMixin.js';
import collect from 'collect.js'
export default {
mixins: [cssMixin],
data(){
return{
groups:'',
groupsShow:[true,true,true,true,true,true,true,true,true,true,true,true,true,true,true]
};
}, //data
methods: {
sameGroup(str){
const collection = collect(this.cssObj);
const filtered = collection.filter(function (value, key) {
return value.group == str;
});
var result=filtered.all();
return result;
}
},//methods
mounted(){
const collection = collect(this.cssObj);
const unique = collection.map(function (item) {
return item.group;
}).unique().sort();
this.groups = unique.all();
}
}
</script>
<style scoped>
.cssContainer{
overflow-y: scroll;
height: 800px;
}
.cssTitle{
color:rgb(180,180,180);
font-weight: bold;
margin-top:16px;
}
</style>
And the insane spreadsheet :D
(..from late 2017)
https://docs.google.com/spreadsheets/d/1vlOe5SVWqJ9BNt818jZ_bqJRo3-GTjOLfGY9HsdBE6A/edit?usp=sharing