vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+103
@@ -0,0 +1,103 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
require('../../../src/stylus/components/_parallax.styl');
|
||||
|
||||
var _translatable = require('../../mixins/translatable');
|
||||
|
||||
var _translatable2 = _interopRequireDefault(_translatable);
|
||||
|
||||
var _mixins = require('../../util/mixins');
|
||||
|
||||
var _mixins2 = _interopRequireDefault(_mixins);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
/* @vue/component */
|
||||
|
||||
// Mixins
|
||||
exports.default = (0, _mixins2.default)(_translatable2.default).extend({
|
||||
name: 'v-parallax',
|
||||
props: {
|
||||
alt: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 500
|
||||
},
|
||||
src: String
|
||||
},
|
||||
data: function data() {
|
||||
return {
|
||||
isBooted: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
styles: function styles() {
|
||||
return {
|
||||
display: 'block',
|
||||
opacity: this.isBooted ? 1 : 0,
|
||||
transform: 'translate(-50%, ' + this.parallax + 'px)'
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
parallax: function parallax() {
|
||||
this.isBooted = true;
|
||||
}
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
init: function init() {
|
||||
var _this = this;
|
||||
|
||||
var img = this.$refs.img;
|
||||
if (!img) return;
|
||||
if (img.complete) {
|
||||
this.translate();
|
||||
this.listeners();
|
||||
} else {
|
||||
img.addEventListener('load', function () {
|
||||
_this.translate();
|
||||
_this.listeners();
|
||||
}, false);
|
||||
}
|
||||
},
|
||||
objHeight: function objHeight() {
|
||||
return this.$refs.img.naturalHeight;
|
||||
}
|
||||
},
|
||||
render: function render(h) {
|
||||
var imgData = {
|
||||
staticClass: 'v-parallax__image',
|
||||
style: this.styles,
|
||||
attrs: {
|
||||
src: this.src,
|
||||
alt: this.alt
|
||||
},
|
||||
ref: 'img'
|
||||
};
|
||||
var container = h('div', {
|
||||
staticClass: 'v-parallax__image-container'
|
||||
}, [h('img', imgData)]);
|
||||
var content = h('div', {
|
||||
staticClass: 'v-parallax__content'
|
||||
}, this.$slots.default);
|
||||
return h('div', {
|
||||
staticClass: 'v-parallax',
|
||||
style: {
|
||||
height: this.height + 'px'
|
||||
},
|
||||
on: this.$listeners
|
||||
}, [container, content]);
|
||||
}
|
||||
}); // Style
|
||||
//# sourceMappingURL=VParallax.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VParallax/VParallax.ts"],"names":[],"mappings":";;;;;;AACA;;AAGA;;;;AAKA;;;;;;AAQA;;AAdA;kBAee,sBAAkD,sBAAlD,EAAgE,MAAhE,CAAuE;AACpF,UAAM,YAD8E;AAGpF,WAAO;AACL,aAAK;AACH,kBAAM,MADH;AAEH,qBAAS;AAFN,SADA;AAKL,gBAAQ;AACN,kBAAM,CAAC,MAAD,EAAS,MAAT,CADA;AAEN,qBAAS;AAFH,SALH;AASL,aAAK;AATA,KAH6E;AAepF,UAAM;AAAA,eAAO;AACX,sBAAU;AADC,SAAP;AAAA,KAf8E;AAmBpF,cAAU;AACR,cADQ,oBACF;AACJ,mBAAO;AACL,yBAAS,OADJ;AAEL,yBAAS,KAAK,QAAL,GAAgB,CAAhB,GAAoB,CAFxB;AAGL,gDAA8B,KAAK,QAAnC;AAHK,aAAP;AAKD;AAPO,KAnB0E;AA6BpF,WAAO;AACL,gBADK,sBACG;AACN,iBAAK,QAAL,GAAgB,IAAhB;AACD;AAHI,KA7B6E;AAmCpF,WAnCoF,qBAmC7E;AACL,aAAK,IAAL;AACD,KArCmF;;AAuCpF,aAAS;AACP,YADO,kBACH;AAAA;;AACF,gBAAM,MAAM,KAAK,KAAL,CAAW,GAAvB;AAEA,gBAAI,CAAC,GAAL,EAAU;AAEV,gBAAI,IAAI,QAAR,EAAkB;AAChB,qBAAK,SAAL;AACA,qBAAK,SAAL;AACD,aAHD,MAGO;AACL,oBAAI,gBAAJ,CAAqB,MAArB,EAA6B,YAAK;AAChC,0BAAK,SAAL;AACA,0BAAK,SAAL;AACD,iBAHD,EAGG,KAHH;AAID;AACF,SAfM;AAgBP,iBAhBO,uBAgBE;AACP,mBAAO,KAAK,KAAL,CAAW,GAAX,CAAe,aAAtB;AACD;AAlBM,KAvC2E;AA4DpF,UA5DoF,kBA4D5E,CA5D4E,EA4D3E;AACP,YAAM,UAAqB;AACzB,yBAAa,mBADY;AAEzB,mBAAO,KAAK,MAFa;AAGzB,mBAAO;AACL,qBAAK,KAAK,GADL;AAEL,qBAAK,KAAK;AAFL,aAHkB;AAOzB,iBAAK;AAPoB,SAA3B;AAUA,YAAM,YAAY,EAAE,KAAF,EAAS;AACzB,yBAAa;AADY,SAAT,EAEf,CACD,EAAE,KAAF,EAAS,OAAT,CADC,CAFe,CAAlB;AAMA,YAAM,UAAU,EAAE,KAAF,EAAS;AACvB,yBAAa;AADU,SAAT,EAEb,KAAK,MAAL,CAAY,OAFC,CAAhB;AAIA,eAAO,EAAE,KAAF,EAAS;AACd,yBAAa,YADC;AAEd,mBAAO;AACL,wBAAW,KAAK,MAAhB;AADK,aAFO;AAKd,gBAAI,KAAK;AALK,SAAT,EAMJ,CAAC,SAAD,EAAY,OAAZ,CANI,CAAP;AAOD;AAxFmF,CAAvE,C","sourcesContent":["// Style\nimport '../../stylus/components/_parallax.styl'\n\n// Mixins\nimport Translatable from '../../mixins/translatable'\n\n// Types\nimport Vue from 'vue'\nimport { VNode, VNodeData } from 'vue/types/vnode'\nimport mixins, { ExtractVue } from '../../util/mixins'\n\ninterface options extends Vue {\n $refs: {\n img: HTMLImageElement\n }\n}\n\n/* @vue/component */\nexport default mixins<options & ExtractVue<typeof Translatable>>(Translatable).extend({\n name: 'v-parallax',\n\n props: {\n alt: {\n type: String,\n default: ''\n },\n height: {\n type: [String, Number],\n default: 500\n },\n src: String\n },\n\n data: () => ({\n isBooted: false\n }),\n\n computed: {\n styles (): object {\n return {\n display: 'block',\n opacity: this.isBooted ? 1 : 0,\n transform: `translate(-50%, ${this.parallax}px)`\n }\n }\n },\n\n watch: {\n parallax () {\n this.isBooted = true\n }\n },\n\n mounted () {\n this.init()\n },\n\n methods: {\n init () {\n const img = this.$refs.img\n\n if (!img) return\n\n if (img.complete) {\n this.translate()\n this.listeners()\n } else {\n img.addEventListener('load', () => {\n this.translate()\n this.listeners()\n }, false)\n }\n },\n objHeight () {\n return this.$refs.img.naturalHeight\n }\n },\n\n render (h): VNode {\n const imgData: VNodeData = {\n staticClass: 'v-parallax__image',\n style: this.styles,\n attrs: {\n src: this.src,\n alt: this.alt\n },\n ref: 'img'\n }\n\n const container = h('div', {\n staticClass: 'v-parallax__image-container'\n }, [\n h('img', imgData)\n ])\n\n const content = h('div', {\n staticClass: 'v-parallax__content'\n }, this.$slots.default)\n\n return h('div', {\n staticClass: 'v-parallax',\n style: {\n height: `${this.height}px`\n },\n on: this.$listeners\n }, [container, content])\n }\n})\n"],"sourceRoot":""}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.VParallax = undefined;
|
||||
|
||||
var _VParallax = require('./VParallax');
|
||||
|
||||
var _VParallax2 = _interopRequireDefault(_VParallax);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
exports.VParallax = _VParallax2.default;
|
||||
exports.default = _VParallax2.default;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VParallax/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;QAES,S,GAAA,mB;kBACM,mB","sourcesContent":["import VParallax from './VParallax'\n\nexport { VParallax }\nexport default VParallax\n"],"sourceRoot":""}
|
||||
Reference in New Issue
Block a user