vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+207
@@ -0,0 +1,207 @@
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
// Styles
|
||||
import '../../../src/stylus/components/_toolbar.styl';
|
||||
// Mixins
|
||||
import Applicationable from '../../mixins/applicationable';
|
||||
import Colorable from '../../mixins/colorable';
|
||||
import Themeable from '../../mixins/themeable';
|
||||
import SSRBootable from '../../mixins/ssr-bootable';
|
||||
// Directives
|
||||
import Scroll from '../../directives/scroll';
|
||||
import { deprecate } from '../../util/console';
|
||||
// Types
|
||||
import mixins from '../../util/mixins';
|
||||
export default mixins(Applicationable('top', ['clippedLeft', 'clippedRight', 'computedHeight', 'invertedScroll', 'manualScroll']), Colorable, SSRBootable, Themeable
|
||||
/* @vue/component */
|
||||
).extend({
|
||||
name: 'v-toolbar',
|
||||
directives: { Scroll: Scroll },
|
||||
props: {
|
||||
card: Boolean,
|
||||
clippedLeft: Boolean,
|
||||
clippedRight: Boolean,
|
||||
dense: Boolean,
|
||||
extended: Boolean,
|
||||
extensionHeight: {
|
||||
type: [Number, String],
|
||||
validator: function validator(v) {
|
||||
return !isNaN(parseInt(v));
|
||||
}
|
||||
},
|
||||
flat: Boolean,
|
||||
floating: Boolean,
|
||||
height: {
|
||||
type: [Number, String],
|
||||
validator: function validator(v) {
|
||||
return !isNaN(parseInt(v));
|
||||
}
|
||||
},
|
||||
invertedScroll: Boolean,
|
||||
manualScroll: Boolean,
|
||||
prominent: Boolean,
|
||||
scrollOffScreen: Boolean,
|
||||
/* @deprecated */
|
||||
scrollToolbarOffScreen: Boolean,
|
||||
scrollTarget: String,
|
||||
scrollThreshold: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
tabs: Boolean
|
||||
},
|
||||
data: function data() {
|
||||
return {
|
||||
activeTimeout: null,
|
||||
currentScroll: 0,
|
||||
heights: {
|
||||
mobileLandscape: 48,
|
||||
mobile: 56,
|
||||
desktop: 64,
|
||||
dense: 48
|
||||
},
|
||||
isActive: true,
|
||||
isExtended: false,
|
||||
isScrollingUp: false,
|
||||
previousScroll: 0,
|
||||
savedScroll: 0,
|
||||
target: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canScroll: function canScroll() {
|
||||
// TODO: remove
|
||||
if (this.scrollToolbarOffScreen) {
|
||||
deprecate('scrollToolbarOffScreen', 'scrollOffScreen', this);
|
||||
return true;
|
||||
}
|
||||
return this.scrollOffScreen || this.invertedScroll;
|
||||
},
|
||||
computedContentHeight: function computedContentHeight() {
|
||||
if (this.height) return parseInt(this.height);
|
||||
if (this.dense) return this.heights.dense;
|
||||
if (this.prominent || this.$vuetify.breakpoint.mdAndUp) return this.heights.desktop;
|
||||
if (this.$vuetify.breakpoint.smAndDown && this.$vuetify.breakpoint.width > this.$vuetify.breakpoint.height) return this.heights.mobileLandscape;
|
||||
return this.heights.mobile;
|
||||
},
|
||||
computedExtensionHeight: function computedExtensionHeight() {
|
||||
if (this.tabs) return 48;
|
||||
if (this.extensionHeight) return parseInt(this.extensionHeight);
|
||||
return this.computedContentHeight;
|
||||
},
|
||||
computedHeight: function computedHeight() {
|
||||
if (!this.isExtended) return this.computedContentHeight;
|
||||
return this.computedContentHeight + this.computedExtensionHeight;
|
||||
},
|
||||
computedMarginTop: function computedMarginTop() {
|
||||
if (!this.app) return 0;
|
||||
return this.$vuetify.application.bar;
|
||||
},
|
||||
classes: function classes() {
|
||||
return _extends({
|
||||
'v-toolbar': true,
|
||||
'elevation-0': this.flat || !this.isActive && !this.tabs && this.canScroll,
|
||||
'v-toolbar--absolute': this.absolute,
|
||||
'v-toolbar--card': this.card,
|
||||
'v-toolbar--clipped': this.clippedLeft || this.clippedRight,
|
||||
'v-toolbar--dense': this.dense,
|
||||
'v-toolbar--extended': this.isExtended,
|
||||
'v-toolbar--fixed': !this.absolute && (this.app || this.fixed),
|
||||
'v-toolbar--floating': this.floating,
|
||||
'v-toolbar--prominent': this.prominent
|
||||
}, this.themeClasses);
|
||||
},
|
||||
computedPaddingLeft: function computedPaddingLeft() {
|
||||
if (!this.app || this.clippedLeft) return 0;
|
||||
return this.$vuetify.application.left;
|
||||
},
|
||||
computedPaddingRight: function computedPaddingRight() {
|
||||
if (!this.app || this.clippedRight) return 0;
|
||||
return this.$vuetify.application.right;
|
||||
},
|
||||
computedTransform: function computedTransform() {
|
||||
return !this.isActive ? this.canScroll ? -this.computedContentHeight : -this.computedHeight : 0;
|
||||
},
|
||||
currentThreshold: function currentThreshold() {
|
||||
return Math.abs(this.currentScroll - this.savedScroll);
|
||||
},
|
||||
styles: function styles() {
|
||||
return {
|
||||
marginTop: this.computedMarginTop + 'px',
|
||||
paddingRight: this.computedPaddingRight + 'px',
|
||||
paddingLeft: this.computedPaddingLeft + 'px',
|
||||
transform: 'translateY(' + this.computedTransform + 'px)'
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentThreshold: function currentThreshold(val) {
|
||||
if (this.invertedScroll) {
|
||||
this.isActive = this.currentScroll > this.scrollThreshold;
|
||||
return;
|
||||
}
|
||||
if (val < this.scrollThreshold || !this.isBooted) return;
|
||||
this.isActive = this.isScrollingUp;
|
||||
this.savedScroll = this.currentScroll;
|
||||
},
|
||||
isActive: function isActive() {
|
||||
this.savedScroll = 0;
|
||||
},
|
||||
invertedScroll: function invertedScroll(val) {
|
||||
this.isActive = !val;
|
||||
},
|
||||
manualScroll: function manualScroll(val) {
|
||||
this.isActive = !val;
|
||||
},
|
||||
isScrollingUp: function isScrollingUp() {
|
||||
this.savedScroll = this.savedScroll || this.currentScroll;
|
||||
}
|
||||
},
|
||||
created: function created() {
|
||||
if (this.invertedScroll || this.manualScroll) this.isActive = false;
|
||||
},
|
||||
mounted: function mounted() {
|
||||
if (this.scrollTarget) {
|
||||
this.target = document.querySelector(this.scrollTarget);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onScroll: function onScroll() {
|
||||
if (!this.canScroll || this.manualScroll || typeof window === 'undefined') return;
|
||||
this.currentScroll = this.target ? this.target.scrollTop : window.pageYOffset;
|
||||
this.isScrollingUp = this.currentScroll < this.previousScroll;
|
||||
this.previousScroll = this.currentScroll;
|
||||
},
|
||||
updateApplication: function updateApplication() {
|
||||
return this.invertedScroll || this.manualScroll ? 0 : this.computedHeight;
|
||||
}
|
||||
},
|
||||
render: function render(h) {
|
||||
this.isExtended = this.extended || !!this.$slots.extension;
|
||||
var children = [];
|
||||
var data = this.setBackgroundColor(this.color, {
|
||||
'class': this.classes,
|
||||
style: this.styles,
|
||||
on: this.$listeners
|
||||
});
|
||||
data.directives = [{
|
||||
arg: this.scrollTarget,
|
||||
name: 'scroll',
|
||||
value: this.onScroll
|
||||
}];
|
||||
children.push(h('div', {
|
||||
staticClass: 'v-toolbar__content',
|
||||
style: { height: this.computedContentHeight + 'px' },
|
||||
ref: 'content'
|
||||
}, this.$slots.default));
|
||||
if (this.isExtended) {
|
||||
children.push(h('div', {
|
||||
staticClass: 'v-toolbar__extension',
|
||||
style: { height: this.computedExtensionHeight + 'px' }
|
||||
}, this.$slots.extension));
|
||||
}
|
||||
return h('nav', data, children);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VToolbar.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+26
@@ -0,0 +1,26 @@
|
||||
import VBtn from '../VBtn';
|
||||
import VIcon from '../VIcon';
|
||||
import Vue from 'vue';
|
||||
/* @vue/component */
|
||||
export default Vue.extend({
|
||||
name: 'v-toolbar-side-icon',
|
||||
functional: true,
|
||||
render: function render(h, _ref) {
|
||||
var slots = _ref.slots,
|
||||
listeners = _ref.listeners,
|
||||
props = _ref.props,
|
||||
data = _ref.data;
|
||||
|
||||
var classes = data.staticClass ? data.staticClass + ' v-toolbar__side-icon' : 'v-toolbar__side-icon';
|
||||
var d = Object.assign(data, {
|
||||
staticClass: classes,
|
||||
props: Object.assign(props, {
|
||||
icon: true
|
||||
}),
|
||||
on: listeners
|
||||
});
|
||||
var defaultSlot = slots().default;
|
||||
return h(VBtn, d, defaultSlot || [h(VIcon, '$vuetify.icons.menu')]);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VToolbarSideIcon.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VToolbar/VToolbarSideIcon.ts"],"names":[],"mappings":"AAAA,OAAO,IAAP,MAAiB,SAAjB;AACA,OAAO,KAAP,MAAkB,UAAlB;AAEA,OAAO,GAAP,MAAgB,KAAhB;AAEA;AACA,eAAe,IAAI,MAAJ,CAAW;AACxB,UAAM,qBADkB;AAGxB,gBAAY,IAHY;AAKxB,UALwB,kBAKhB,CALgB,QAKoB;AAAA,YAA/B,KAA+B,QAA/B,KAA+B;AAAA,YAAxB,SAAwB,QAAxB,SAAwB;AAAA,YAAb,KAAa,QAAb,KAAa;AAAA,YAAN,IAAM,QAAN,IAAM;;AAC1C,YAAM,UAAU,KAAK,WAAL,GACT,KAAK,WADI,6BAEZ,sBAFJ;AAIA,YAAM,IAAI,OAAO,MAAP,CAAc,IAAd,EAAoB;AAC5B,yBAAa,OADe;AAE5B,mBAAO,OAAO,MAAP,CAAc,KAAd,EAAqB;AAC1B,sBAAM;AADoB,aAArB,CAFqB;AAK5B,gBAAI;AALwB,SAApB,CAAV;AAQA,YAAM,cAAc,QAAQ,OAA5B;AAEA,eAAO,EAAE,IAAF,EAAQ,CAAR,EAAW,eAAe,CAAC,EAAE,KAAF,EAAS,qBAAT,CAAD,CAA1B,CAAP;AACD;AArBuB,CAAX,CAAf","sourcesContent":["import VBtn from '../VBtn'\nimport VIcon from '../VIcon'\n\nimport Vue from 'vue'\n\n/* @vue/component */\nexport default Vue.extend({\n name: 'v-toolbar-side-icon',\n\n functional: true,\n\n render (h, { slots, listeners, props, data }) {\n const classes = data.staticClass\n ? `${data.staticClass} v-toolbar__side-icon`\n : 'v-toolbar__side-icon'\n\n const d = Object.assign(data, {\n staticClass: classes,\n props: Object.assign(props, {\n icon: true\n }),\n on: listeners\n })\n\n const defaultSlot = slots().default\n\n return h(VBtn, d, defaultSlot || [h(VIcon, '$vuetify.icons.menu')])\n }\n})\n"],"sourceRoot":""}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
import { createSimpleFunctional } from '../../util/helpers';
|
||||
import VToolbar from './VToolbar';
|
||||
import VToolbarSideIcon from './VToolbarSideIcon';
|
||||
var VToolbarTitle = createSimpleFunctional('v-toolbar__title');
|
||||
var VToolbarItems = createSimpleFunctional('v-toolbar__items');
|
||||
export { VToolbar, VToolbarSideIcon, VToolbarTitle, VToolbarItems };
|
||||
export default {
|
||||
$_vuetify_subcomponents: {
|
||||
VToolbar: VToolbar,
|
||||
VToolbarItems: VToolbarItems,
|
||||
VToolbarTitle: VToolbarTitle,
|
||||
VToolbarSideIcon: VToolbarSideIcon
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VToolbar/index.ts"],"names":[],"mappings":"AAAA,SAAS,sBAAT,QAAuC,oBAAvC;AAEA,OAAO,QAAP,MAAqB,YAArB;AACA,OAAO,gBAAP,MAA6B,oBAA7B;AAEA,IAAM,gBAAgB,uBAAuB,kBAAvB,CAAtB;AACA,IAAM,gBAAgB,uBAAuB,kBAAvB,CAAtB;AAEA,SAAS,QAAT,EAAmB,gBAAnB,EAAqC,aAArC,EAAoD,aAApD;AAEA,eAAe;AACb,6BAAyB;AACvB,0BADuB;AAEvB,oCAFuB;AAGvB,oCAHuB;AAIvB;AAJuB;AADZ,CAAf","sourcesContent":["import { createSimpleFunctional } from '../../util/helpers'\n\nimport VToolbar from './VToolbar'\nimport VToolbarSideIcon from './VToolbarSideIcon'\n\nconst VToolbarTitle = createSimpleFunctional('v-toolbar__title')\nconst VToolbarItems = createSimpleFunctional('v-toolbar__items')\n\nexport { VToolbar, VToolbarSideIcon, VToolbarTitle, VToolbarItems }\n\nexport default {\n $_vuetify_subcomponents: {\n VToolbar,\n VToolbarItems,\n VToolbarTitle,\n VToolbarSideIcon\n }\n}\n"],"sourceRoot":""}
|
||||
Reference in New Issue
Block a user