vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+95
@@ -0,0 +1,95 @@
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
import '../../../src/stylus/components/_speed-dial.styl';
|
||||
import Toggleable from '../../mixins/toggleable';
|
||||
import Positionable from '../../mixins/positionable';
|
||||
import Transitionable from '../../mixins/transitionable';
|
||||
import ClickOutside from '../../directives/click-outside';
|
||||
/* @vue/component */
|
||||
export default {
|
||||
name: 'v-speed-dial',
|
||||
directives: { ClickOutside: ClickOutside },
|
||||
mixins: [Positionable, Toggleable, Transitionable],
|
||||
props: {
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'top',
|
||||
validator: function validator(val) {
|
||||
return ['top', 'right', 'bottom', 'left'].includes(val);
|
||||
}
|
||||
},
|
||||
openOnHover: Boolean,
|
||||
transition: {
|
||||
type: String,
|
||||
default: 'scale-transition'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes: function classes() {
|
||||
return _defineProperty({
|
||||
'v-speed-dial': true,
|
||||
'v-speed-dial--top': this.top,
|
||||
'v-speed-dial--right': this.right,
|
||||
'v-speed-dial--bottom': this.bottom,
|
||||
'v-speed-dial--left': this.left,
|
||||
'v-speed-dial--absolute': this.absolute,
|
||||
'v-speed-dial--fixed': this.fixed
|
||||
}, 'v-speed-dial--direction-' + this.direction, true);
|
||||
}
|
||||
},
|
||||
render: function render(h) {
|
||||
var _this = this;
|
||||
|
||||
var children = [];
|
||||
var data = {
|
||||
'class': this.classes,
|
||||
directives: [{
|
||||
name: 'click-outside',
|
||||
value: function value() {
|
||||
return _this.isActive = false;
|
||||
}
|
||||
}],
|
||||
on: {
|
||||
click: function click() {
|
||||
return _this.isActive = !_this.isActive;
|
||||
}
|
||||
}
|
||||
};
|
||||
if (this.openOnHover) {
|
||||
data.on.mouseenter = function () {
|
||||
return _this.isActive = true;
|
||||
};
|
||||
data.on.mouseleave = function () {
|
||||
return _this.isActive = false;
|
||||
};
|
||||
}
|
||||
if (this.isActive) {
|
||||
var btnCount = 0;
|
||||
children = (this.$slots.default || []).map(function (b, i) {
|
||||
if (b.tag && typeof b.componentOptions !== 'undefined' && b.componentOptions.Ctor.options.name === 'v-btn') {
|
||||
btnCount++;
|
||||
return h('div', {
|
||||
style: {
|
||||
transitionDelay: btnCount * 0.05 + 's'
|
||||
},
|
||||
key: i
|
||||
}, [b]);
|
||||
} else {
|
||||
b.key = i;
|
||||
return b;
|
||||
}
|
||||
});
|
||||
}
|
||||
var list = h('transition-group', {
|
||||
'class': 'v-speed-dial__list',
|
||||
props: {
|
||||
name: this.transition,
|
||||
mode: this.mode,
|
||||
origin: this.origin,
|
||||
tag: 'div'
|
||||
}
|
||||
}, children);
|
||||
return h('div', data, [this.$slots.activator, list]);
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=VSpeedDial.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VSpeedDial/VSpeedDial.js"],"names":[],"mappings":";;AAAA,OAAO,iDAAP;AAEA,OAAO,UAAP,MAAuB,yBAAvB;AACA,OAAO,YAAP,MAAyB,2BAAzB;AACA,OAAO,cAAP,MAA2B,6BAA3B;AAEA,OAAO,YAAP,MAAyB,gCAAzB;AAEA;AACA,eAAe;AACb,UAAM,cADO;AAGb,gBAAY,EAAE,0BAAF,EAHC;AAKb,YAAQ,CAAC,YAAD,EAAe,UAAf,EAA2B,cAA3B,CALK;AAOb,WAAO;AACL,mBAAW;AACT,kBAAM,MADG;AAET,qBAAS,KAFA;AAGT,uBAAW,wBAAM;AACf,uBAAO,CAAC,KAAD,EAAQ,OAAR,EAAiB,QAAjB,EAA2B,MAA3B,EAAmC,QAAnC,CAA4C,GAA5C,CAAP;AACD;AALQ,SADN;AAQL,qBAAa,OARR;AASL,oBAAY;AACV,kBAAM,MADI;AAEV,qBAAS;AAFC;AATP,KAPM;AAsBb,cAAU;AACR,eADQ,qBACD;AACL;AACE,gCAAgB,IADlB;AAEE,qCAAqB,KAAK,GAF5B;AAGE,uCAAuB,KAAK,KAH9B;AAIE,wCAAwB,KAAK,MAJ/B;AAKE,sCAAsB,KAAK,IAL7B;AAME,0CAA0B,KAAK,QANjC;AAOE,uCAAuB,KAAK;AAP9B,4CAQ8B,KAAK,SARnC,EAQiD,IARjD;AAUD;AAZO,KAtBG;AAqCb,UArCa,kBAqCL,CArCK,EAqCJ;AAAA;;AACP,YAAI,WAAW,EAAf;AACA,YAAM,OAAO;AACX,qBAAS,KAAK,OADH;AAEX,wBAAY,CAAC;AACX,sBAAM,eADK;AAEX,uBAAO;AAAA,2BAAO,MAAK,QAAL,GAAgB,KAAvB;AAAA;AAFI,aAAD,CAFD;AAMX,gBAAI;AACF,uBAAO;AAAA,2BAAO,MAAK,QAAL,GAAgB,CAAC,MAAK,QAA7B;AAAA;AADL;AANO,SAAb;AAWA,YAAI,KAAK,WAAT,EAAsB;AACpB,iBAAK,EAAL,CAAQ,UAAR,GAAqB;AAAA,uBAAO,MAAK,QAAL,GAAgB,IAAvB;AAAA,aAArB;AACA,iBAAK,EAAL,CAAQ,UAAR,GAAqB;AAAA,uBAAO,MAAK,QAAL,GAAgB,KAAvB;AAAA,aAArB;AACD;AAED,YAAI,KAAK,QAAT,EAAmB;AACjB,gBAAI,WAAW,CAAf;AACA,uBAAW,CAAC,KAAK,MAAL,CAAY,OAAZ,IAAuB,EAAxB,EAA4B,GAA5B,CAAgC,UAAC,CAAD,EAAI,CAAJ,EAAS;AAClD,oBAAI,EAAE,GAAF,IAAS,OAAO,EAAE,gBAAT,KAA8B,WAAvC,IAAsD,EAAE,gBAAF,CAAmB,IAAnB,CAAwB,OAAxB,CAAgC,IAAhC,KAAyC,OAAnG,EAA4G;AAC1G;AACA,2BAAO,EAAE,KAAF,EAAS;AACd,+BAAO;AACL,6CAAiB,WAAW,IAAX,GAAkB;AAD9B,yBADO;AAId,6BAAK;AAJS,qBAAT,EAKJ,CAAC,CAAD,CALI,CAAP;AAMD,iBARD,MAQO;AACL,sBAAE,GAAF,GAAQ,CAAR;AACA,2BAAO,CAAP;AACD;AACF,aAbU,CAAX;AAcD;AAED,YAAM,OAAO,EAAE,kBAAF,EAAsB;AACjC,qBAAS,oBADwB;AAEjC,mBAAO;AACL,sBAAM,KAAK,UADN;AAEL,sBAAM,KAAK,IAFN;AAGL,wBAAQ,KAAK,MAHR;AAIL,qBAAK;AAJA;AAF0B,SAAtB,EAQV,QARU,CAAb;AAUA,eAAO,EAAE,KAAF,EAAS,IAAT,EAAe,CAAC,KAAK,MAAL,CAAY,SAAb,EAAwB,IAAxB,CAAf,CAAP;AACD;AApFY,CAAf","sourcesContent":["import '../../stylus/components/_speed-dial.styl'\n\nimport Toggleable from '../../mixins/toggleable'\nimport Positionable from '../../mixins/positionable'\nimport Transitionable from '../../mixins/transitionable'\n\nimport ClickOutside from '../../directives/click-outside'\n\n/* @vue/component */\nexport default {\n name: 'v-speed-dial',\n\n directives: { ClickOutside },\n\n mixins: [Positionable, Toggleable, Transitionable],\n\n props: {\n direction: {\n type: String,\n default: 'top',\n validator: val => {\n return ['top', 'right', 'bottom', 'left'].includes(val)\n }\n },\n openOnHover: Boolean,\n transition: {\n type: String,\n default: 'scale-transition'\n }\n },\n\n computed: {\n classes () {\n return {\n 'v-speed-dial': true,\n 'v-speed-dial--top': this.top,\n 'v-speed-dial--right': this.right,\n 'v-speed-dial--bottom': this.bottom,\n 'v-speed-dial--left': this.left,\n 'v-speed-dial--absolute': this.absolute,\n 'v-speed-dial--fixed': this.fixed,\n [`v-speed-dial--direction-${this.direction}`]: true\n }\n }\n },\n\n render (h) {\n let children = []\n const data = {\n 'class': this.classes,\n directives: [{\n name: 'click-outside',\n value: () => (this.isActive = false)\n }],\n on: {\n click: () => (this.isActive = !this.isActive)\n }\n }\n\n if (this.openOnHover) {\n data.on.mouseenter = () => (this.isActive = true)\n data.on.mouseleave = () => (this.isActive = false)\n }\n\n if (this.isActive) {\n let btnCount = 0\n children = (this.$slots.default || []).map((b, i) => {\n if (b.tag && typeof b.componentOptions !== 'undefined' && b.componentOptions.Ctor.options.name === 'v-btn') {\n btnCount++\n return h('div', {\n style: {\n transitionDelay: btnCount * 0.05 + 's'\n },\n key: i\n }, [b])\n } else {\n b.key = i\n return b\n }\n })\n }\n\n const list = h('transition-group', {\n 'class': 'v-speed-dial__list',\n props: {\n name: this.transition,\n mode: this.mode,\n origin: this.origin,\n tag: 'div'\n }\n }, children)\n\n return h('div', data, [this.$slots.activator, list])\n }\n}\n"],"sourceRoot":""}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import VSpeedDial from './VSpeedDial';
|
||||
export { VSpeedDial };
|
||||
export default VSpeedDial;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VSpeedDial/index.js"],"names":[],"mappings":"AAAA,OAAO,UAAP,MAAuB,cAAvB;AAEA,SAAS,UAAT;AACA,eAAe,UAAf","sourcesContent":["import VSpeedDial from './VSpeedDial'\n\nexport { VSpeedDial }\nexport default VSpeedDial\n"],"sourceRoot":""}
|
||||
Reference in New Issue
Block a user