vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+114
@@ -0,0 +1,114 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
require('../../../src/stylus/components/_alerts.styl');
|
||||
|
||||
var _VIcon = require('../VIcon');
|
||||
|
||||
var _VIcon2 = _interopRequireDefault(_VIcon);
|
||||
|
||||
var _colorable = require('../../mixins/colorable');
|
||||
|
||||
var _colorable2 = _interopRequireDefault(_colorable);
|
||||
|
||||
var _toggleable = require('../../mixins/toggleable');
|
||||
|
||||
var _toggleable2 = _interopRequireDefault(_toggleable);
|
||||
|
||||
var _transitionable = require('../../mixins/transitionable');
|
||||
|
||||
var _transitionable2 = _interopRequireDefault(_transitionable);
|
||||
|
||||
var _mixins = require('../../util/mixins');
|
||||
|
||||
var _mixins2 = _interopRequireDefault(_mixins);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
/* @vue/component */
|
||||
|
||||
// Mixins
|
||||
// Styles
|
||||
exports.default = (0, _mixins2.default)(_colorable2.default, _toggleable2.default, _transitionable2.default).extend({
|
||||
name: 'v-alert',
|
||||
props: {
|
||||
dismissible: Boolean,
|
||||
icon: String,
|
||||
outline: Boolean,
|
||||
type: {
|
||||
type: String,
|
||||
validator: function validator(val) {
|
||||
return ['info', 'error', 'success', 'warning'].includes(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
computedColor: function computedColor() {
|
||||
return this.type && !this.color ? this.type : this.color || 'error';
|
||||
},
|
||||
computedIcon: function computedIcon() {
|
||||
if (this.icon || !this.type) return this.icon;
|
||||
switch (this.type) {
|
||||
case 'info':
|
||||
return '$vuetify.icons.info';
|
||||
case 'error':
|
||||
return '$vuetify.icons.error';
|
||||
case 'success':
|
||||
return '$vuetify.icons.success';
|
||||
case 'warning':
|
||||
return '$vuetify.icons.warning';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
genIcon: function genIcon() {
|
||||
if (!this.computedIcon) return null;
|
||||
return this.$createElement(_VIcon2.default, {
|
||||
'class': 'v-alert__icon'
|
||||
}, this.computedIcon);
|
||||
},
|
||||
genDismissible: function genDismissible() {
|
||||
var _this = this;
|
||||
|
||||
if (!this.dismissible) return null;
|
||||
return this.$createElement('a', {
|
||||
'class': 'v-alert__dismissible',
|
||||
on: { click: function click() {
|
||||
_this.isActive = false;
|
||||
} }
|
||||
}, [this.$createElement(_VIcon2.default, {
|
||||
props: {
|
||||
right: true
|
||||
}
|
||||
}, '$vuetify.icons.cancel')]);
|
||||
}
|
||||
},
|
||||
render: function render(h) {
|
||||
var children = [this.genIcon(), h('div', this.$slots.default), this.genDismissible()];
|
||||
var setColor = this.outline ? this.setTextColor : this.setBackgroundColor;
|
||||
var alert = h('div', setColor(this.computedColor, {
|
||||
staticClass: 'v-alert',
|
||||
'class': {
|
||||
'v-alert--outline': this.outline
|
||||
},
|
||||
directives: [{
|
||||
name: 'show',
|
||||
value: this.isActive
|
||||
}],
|
||||
on: this.$listeners
|
||||
}), children);
|
||||
if (!this.transition) return alert;
|
||||
return h('transition', {
|
||||
props: {
|
||||
name: this.transition,
|
||||
origin: this.origin,
|
||||
mode: this.mode
|
||||
}
|
||||
}, [alert]);
|
||||
}
|
||||
});
|
||||
// Components
|
||||
//# sourceMappingURL=VAlert.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VAlert/VAlert.ts"],"names":[],"mappings":";;;;;;AACA;;AAGA;;;;AAGA;;;;AACA;;;;AACA;;;;AAIA;;;;;;AAEA;;AATA;;kBAUe,sBAAO,mBAAP,EAAkB,oBAAlB,EAA8B,wBAA9B,EAA8C,MAA9C,CAAqD;AAClE,UAAM,SAD4D;AAGlE,WAAO;AACL,qBAAa,OADR;AAEL,cAAM,MAFD;AAGL,iBAAS,OAHJ;AAIL,cAAM;AACJ,kBAAM,MADF;AAEJ,qBAFI,qBAEO,GAFP,EAEkB;AACpB,uBAAO,CACL,MADK,EAEL,OAFK,EAGL,SAHK,EAIL,SAJK,EAKL,QALK,CAKI,GALJ,CAAP;AAMD;AATG;AAJD,KAH2D;AAoBlE,cAAU;AACR,qBADQ,2BACK;AACX,mBAAQ,KAAK,IAAL,IAAa,CAAC,KAAK,KAApB,GAA6B,KAAK,IAAlC,GAA0C,KAAK,KAAL,IAAc,OAA/D;AACD,SAHO;AAIR,oBAJQ,0BAII;AACV,gBAAI,KAAK,IAAL,IAAa,CAAC,KAAK,IAAvB,EAA6B,OAAO,KAAK,IAAZ;AAE7B,oBAAQ,KAAK,IAAb;AACE,qBAAK,MAAL;AAAa,2BAAO,qBAAP;AACb,qBAAK,OAAL;AAAc,2BAAO,sBAAP;AACd,qBAAK,SAAL;AAAgB,2BAAO,wBAAP;AAChB,qBAAK,SAAL;AAAgB,2BAAO,wBAAP;AAJlB;AAMD;AAbO,KApBwD;AAoClE,aAAS;AACP,eADO,qBACA;AACL,gBAAI,CAAC,KAAK,YAAV,EAAwB,OAAO,IAAP;AAExB,mBAAO,KAAK,cAAL,CAAoB,eAApB,EAA2B;AAChC,yBAAS;AADuB,aAA3B,EAEJ,KAAK,YAFD,CAAP;AAGD,SAPM;AASP,sBATO,4BASO;AAAA;;AACZ,gBAAI,CAAC,KAAK,WAAV,EAAuB,OAAO,IAAP;AAEvB,mBAAO,KAAK,cAAL,CAAoB,GAApB,EAAyB;AAC9B,yBAAS,sBADqB;AAE9B,oBAAI,EAAE,OAAO,iBAAK;AAAG,8BAAK,QAAL,GAAgB,KAAhB;AAAuB,qBAAxC;AAF0B,aAAzB,EAGJ,CACD,KAAK,cAAL,CAAoB,eAApB,EAA2B;AACzB,uBAAO;AACL,2BAAO;AADF;AADkB,aAA3B,EAIG,uBAJH,CADC,CAHI,CAAP;AAUD;AAtBM,KApCyD;AA6DlE,UA7DkE,kBA6D1D,CA7D0D,EA6DzD;AACP,YAAM,WAAW,CACf,KAAK,OAAL,EADe,EAEf,EAAE,KAAF,EAAS,KAAK,MAAL,CAAY,OAArB,CAFe,EAGf,KAAK,cAAL,EAHe,CAAjB;AAKA,YAAM,WAAW,KAAK,OAAL,GAAe,KAAK,YAApB,GAAmC,KAAK,kBAAzD;AACA,YAAM,QAAQ,EAAE,KAAF,EAAS,SAAS,KAAK,aAAd,EAA6B;AAClD,yBAAa,SADqC;AAElD,qBAAS;AACP,oCAAoB,KAAK;AADlB,aAFyC;AAKlD,wBAAY,CAAC;AACX,sBAAM,MADK;AAEX,uBAAO,KAAK;AAFD,aAAD,CALsC;AASlD,gBAAI,KAAK;AATyC,SAA7B,CAAT,EAUV,QAVU,CAAd;AAYA,YAAI,CAAC,KAAK,UAAV,EAAsB,OAAO,KAAP;AAEtB,eAAO,EAAE,YAAF,EAAgB;AACrB,mBAAO;AACL,sBAAM,KAAK,UADN;AAEL,wBAAQ,KAAK,MAFR;AAGL,sBAAM,KAAK;AAHN;AADc,SAAhB,EAMJ,CAAC,KAAD,CANI,CAAP;AAOD;AAzFiE,CAArD,C;AAbf","sourcesContent":["// Styles\nimport '../../stylus/components/_alerts.styl'\n\n// Components\nimport VIcon from '../VIcon'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Toggleable from '../../mixins/toggleable'\nimport Transitionable from '../../mixins/transitionable'\n\n// Types\nimport { VNode } from 'vue/types'\nimport mixins from '../../util/mixins'\n\n/* @vue/component */\nexport default mixins(Colorable, Toggleable, Transitionable).extend({\n name: 'v-alert',\n\n props: {\n dismissible: Boolean,\n icon: String,\n outline: Boolean,\n type: {\n type: String,\n validator (val: string) {\n return [\n 'info',\n 'error',\n 'success',\n 'warning'\n ].includes(val)\n }\n }\n },\n\n computed: {\n computedColor (): string {\n return (this.type && !this.color) ? this.type : (this.color || 'error')\n },\n computedIcon (): string | void {\n if (this.icon || !this.type) return this.icon\n\n switch (this.type) {\n case 'info': return '$vuetify.icons.info'\n case 'error': return '$vuetify.icons.error'\n case 'success': return '$vuetify.icons.success'\n case 'warning': return '$vuetify.icons.warning'\n }\n }\n },\n\n methods: {\n genIcon (): VNode | null {\n if (!this.computedIcon) return null\n\n return this.$createElement(VIcon, {\n 'class': 'v-alert__icon'\n }, this.computedIcon)\n },\n\n genDismissible (): VNode | null {\n if (!this.dismissible) return null\n\n return this.$createElement('a', {\n 'class': 'v-alert__dismissible',\n on: { click: () => { this.isActive = false } }\n }, [\n this.$createElement(VIcon, {\n props: {\n right: true\n }\n }, '$vuetify.icons.cancel')\n ])\n }\n },\n\n render (h): VNode {\n const children = [\n this.genIcon(),\n h('div', this.$slots.default),\n this.genDismissible()\n ] as any\n const setColor = this.outline ? this.setTextColor : this.setBackgroundColor\n const alert = h('div', setColor(this.computedColor, {\n staticClass: 'v-alert',\n 'class': {\n 'v-alert--outline': this.outline\n },\n directives: [{\n name: 'show',\n value: this.isActive\n }],\n on: this.$listeners\n }), children)\n\n if (!this.transition) return alert\n\n return h('transition', {\n props: {\n name: this.transition,\n origin: this.origin,\n mode: this.mode\n }\n }, [alert])\n }\n})\n"],"sourceRoot":""}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.VAlert = undefined;
|
||||
|
||||
var _VAlert = require('./VAlert');
|
||||
|
||||
var _VAlert2 = _interopRequireDefault(_VAlert);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
exports.VAlert = _VAlert2.default;
|
||||
exports.default = _VAlert2.default;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VAlert/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;QAES,M,GAAA,gB;kBACM,gB","sourcesContent":["import VAlert from './VAlert'\n\nexport { VAlert }\nexport default VAlert\n"],"sourceRoot":""}
|
||||
Reference in New Issue
Block a user