vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+61
@@ -0,0 +1,61 @@
|
||||
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 { upperFirst } from '../../util/helpers';
|
||||
export default function () {
|
||||
var expandedParentClass = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
||||
|
||||
var sizeProperty = x ? 'width' : 'height';
|
||||
return {
|
||||
beforeEnter: function beforeEnter(el) {
|
||||
el._parent = el.parentNode;
|
||||
el._initialStyle = _defineProperty({
|
||||
transition: el.style.transition,
|
||||
visibility: el.style.visibility,
|
||||
overflow: el.style.overflow
|
||||
}, sizeProperty, el.style[sizeProperty]);
|
||||
},
|
||||
enter: function enter(el) {
|
||||
var initialStyle = el._initialStyle;
|
||||
el.style.setProperty('transition', 'none', 'important');
|
||||
el.style.visibility = 'hidden';
|
||||
var size = el['offset' + upperFirst(sizeProperty)] + 'px';
|
||||
el.style.visibility = initialStyle.visibility;
|
||||
el.style.overflow = 'hidden';
|
||||
el.style[sizeProperty] = 0;
|
||||
void el.offsetHeight; // force reflow
|
||||
el.style.transition = initialStyle.transition;
|
||||
expandedParentClass && el._parent && el._parent.classList.add(expandedParentClass);
|
||||
requestAnimationFrame(function () {
|
||||
el.style[sizeProperty] = size;
|
||||
});
|
||||
},
|
||||
|
||||
afterEnter: resetStyles,
|
||||
enterCancelled: resetStyles,
|
||||
leave: function leave(el) {
|
||||
el._initialStyle = _defineProperty({
|
||||
overflow: el.style.overflow
|
||||
}, sizeProperty, el.style[sizeProperty]);
|
||||
el.style.overflow = 'hidden';
|
||||
el.style[sizeProperty] = el['offset' + upperFirst(sizeProperty)] + 'px';
|
||||
void el.offsetHeight; // force reflow
|
||||
requestAnimationFrame(function () {
|
||||
return el.style[sizeProperty] = 0;
|
||||
});
|
||||
},
|
||||
|
||||
afterLeave: afterLeave,
|
||||
leaveCancelled: afterLeave
|
||||
};
|
||||
function afterLeave(el) {
|
||||
expandedParentClass && el._parent && el._parent.classList.remove(expandedParentClass);
|
||||
resetStyles(el);
|
||||
}
|
||||
function resetStyles(el) {
|
||||
el.style.overflow = el._initialStyle.overflow;
|
||||
el.style[sizeProperty] = el._initialStyle[sizeProperty];
|
||||
delete el._initialStyle;
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=expand-transition.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/transitions/expand-transition.js"],"names":[],"mappings":";;AAAA,SAAS,UAAT,QAA2B,oBAA3B;AAEA,eAAc,YAA8C;AAAA,QAAnC,mBAAmC,uEAAb,EAAa;AAAA,QAAT,CAAS,uEAAL,KAAK;;AAC1D,QAAM,eAAe,IAAI,OAAJ,GAAc,QAAnC;AAEA,WAAO;AACL,mBADK,uBACQ,EADR,EACU;AACb,eAAG,OAAH,GAAa,GAAG,UAAhB;AACA,eAAG,aAAH;AACE,4BAAY,GAAG,KAAH,CAAS,UADvB;AAEE,4BAAY,GAAG,KAAH,CAAS,UAFvB;AAGE,0BAAU,GAAG,KAAH,CAAS;AAHrB,eAIG,YAJH,EAIkB,GAAG,KAAH,CAAS,YAAT,CAJlB;AAMD,SATI;AAWL,aAXK,iBAWE,EAXF,EAWI;AACP,gBAAM,eAAe,GAAG,aAAxB;AACA,eAAG,KAAH,CAAS,WAAT,CAAqB,YAArB,EAAmC,MAAnC,EAA2C,WAA3C;AACA,eAAG,KAAH,CAAS,UAAT,GAAsB,QAAtB;AACA,gBAAM,OAAU,GAAG,WAAW,WAAW,YAAX,CAAd,CAAV,OAAN;AACA,eAAG,KAAH,CAAS,UAAT,GAAsB,aAAa,UAAnC;AACA,eAAG,KAAH,CAAS,QAAT,GAAoB,QAApB;AACA,eAAG,KAAH,CAAS,YAAT,IAAyB,CAAzB;AACA,iBAAK,GAAG,YAAR,CARO,CAQc;AACrB,eAAG,KAAH,CAAS,UAAT,GAAsB,aAAa,UAAnC;AAEA,mCAAuB,GAAG,OAA1B,IAAqC,GAAG,OAAH,CAAW,SAAX,CAAqB,GAArB,CAAyB,mBAAzB,CAArC;AAEA,kCAAsB,YAAK;AACzB,mBAAG,KAAH,CAAS,YAAT,IAAyB,IAAzB;AACD,aAFD;AAGD,SA3BI;;AA6BL,oBAAY,WA7BP;AA8BL,wBAAgB,WA9BX;AAgCL,aAhCK,iBAgCE,EAhCF,EAgCI;AACP,eAAG,aAAH;AACE,0BAAU,GAAG,KAAH,CAAS;AADrB,eAEG,YAFH,EAEkB,GAAG,KAAH,CAAS,YAAT,CAFlB;AAKA,eAAG,KAAH,CAAS,QAAT,GAAoB,QAApB;AACA,eAAG,KAAH,CAAS,YAAT,IAA4B,GAAG,WAAW,WAAW,YAAX,CAAd,CAA5B;AACA,iBAAK,GAAG,YAAR,CARO,CAQc;AAErB,kCAAsB;AAAA,uBAAM,GAAG,KAAH,CAAS,YAAT,IAAyB,CAA/B;AAAA,aAAtB;AACD,SA3CI;;AA6CL,8BA7CK;AA8CL,wBAAgB;AA9CX,KAAP;AAiDA,aAAS,UAAT,CAAqB,EAArB,EAAuB;AACrB,+BAAuB,GAAG,OAA1B,IAAqC,GAAG,OAAH,CAAW,SAAX,CAAqB,MAArB,CAA4B,mBAA5B,CAArC;AACA,oBAAY,EAAZ;AACD;AAED,aAAS,WAAT,CAAsB,EAAtB,EAAwB;AACtB,WAAG,KAAH,CAAS,QAAT,GAAoB,GAAG,aAAH,CAAiB,QAArC;AACA,WAAG,KAAH,CAAS,YAAT,IAAyB,GAAG,aAAH,CAAiB,YAAjB,CAAzB;AACA,eAAO,GAAG,aAAV;AACD;AACF","sourcesContent":["import { upperFirst } from '../../util/helpers'\n\nexport default function (expandedParentClass = '', x = false) {\n const sizeProperty = x ? 'width' : 'height'\n\n return {\n beforeEnter (el) {\n el._parent = el.parentNode\n el._initialStyle = {\n transition: el.style.transition,\n visibility: el.style.visibility,\n overflow: el.style.overflow,\n [sizeProperty]: el.style[sizeProperty]\n }\n },\n\n enter (el) {\n const initialStyle = el._initialStyle\n el.style.setProperty('transition', 'none', 'important')\n el.style.visibility = 'hidden'\n const size = `${el['offset' + upperFirst(sizeProperty)]}px`\n el.style.visibility = initialStyle.visibility\n el.style.overflow = 'hidden'\n el.style[sizeProperty] = 0\n void el.offsetHeight // force reflow\n el.style.transition = initialStyle.transition\n\n expandedParentClass && el._parent && el._parent.classList.add(expandedParentClass)\n\n requestAnimationFrame(() => {\n el.style[sizeProperty] = size\n })\n },\n\n afterEnter: resetStyles,\n enterCancelled: resetStyles,\n\n leave (el) {\n el._initialStyle = {\n overflow: el.style.overflow,\n [sizeProperty]: el.style[sizeProperty]\n }\n\n el.style.overflow = 'hidden'\n el.style[sizeProperty] = `${el['offset' + upperFirst(sizeProperty)]}px`\n void el.offsetHeight // force reflow\n\n requestAnimationFrame(() => el.style[sizeProperty] = 0)\n },\n\n afterLeave,\n leaveCancelled: afterLeave\n }\n\n function afterLeave (el) {\n expandedParentClass && el._parent && el._parent.classList.remove(expandedParentClass)\n resetStyles(el)\n }\n\n function resetStyles (el) {\n el.style.overflow = el._initialStyle.overflow\n el.style[sizeProperty] = el._initialStyle[sizeProperty]\n delete el._initialStyle\n }\n}\n"],"sourceRoot":""}
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
import { createSimpleTransition, createJavaScriptTransition } from '../../util/helpers';
|
||||
import ExpandTransitionGenerator from './expand-transition';
|
||||
// Component specific transitions
|
||||
export var VBottomSheetTransition = createSimpleTransition('bottom-sheet-transition');
|
||||
export var VCarouselTransition = createSimpleTransition('carousel-transition');
|
||||
export var VCarouselReverseTransition = createSimpleTransition('carousel-reverse-transition');
|
||||
export var VTabTransition = createSimpleTransition('tab-transition');
|
||||
export var VTabReverseTransition = createSimpleTransition('tab-reverse-transition');
|
||||
export var VMenuTransition = createSimpleTransition('menu-transition');
|
||||
export var VFabTransition = createSimpleTransition('fab-transition', 'center center', 'out-in');
|
||||
// Generic transitions
|
||||
export var VDialogTransition = createSimpleTransition('dialog-transition');
|
||||
export var VDialogBottomTransition = createSimpleTransition('dialog-bottom-transition');
|
||||
export var VFadeTransition = createSimpleTransition('fade-transition');
|
||||
export var VScaleTransition = createSimpleTransition('scale-transition');
|
||||
export var VScrollXTransition = createSimpleTransition('scroll-x-transition');
|
||||
export var VScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition');
|
||||
export var VScrollYTransition = createSimpleTransition('scroll-y-transition');
|
||||
export var VScrollYReverseTransition = createSimpleTransition('scroll-y-reverse-transition');
|
||||
export var VSlideXTransition = createSimpleTransition('slide-x-transition');
|
||||
export var VSlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition');
|
||||
export var VSlideYTransition = createSimpleTransition('slide-y-transition');
|
||||
export var VSlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition');
|
||||
// JavaScript transitions
|
||||
export var VExpandTransition = createJavaScriptTransition('expand-transition', ExpandTransitionGenerator());
|
||||
export var VExpandXTransition = createJavaScriptTransition('expand-x-transition', ExpandTransitionGenerator('', true));
|
||||
export var VRowExpandTransition = createJavaScriptTransition('row-expand-transition', ExpandTransitionGenerator('datatable__expand-col--expanded'));
|
||||
export default {
|
||||
$_vuetify_subcomponents: {
|
||||
VBottomSheetTransition: VBottomSheetTransition,
|
||||
VCarouselTransition: VCarouselTransition,
|
||||
VCarouselReverseTransition: VCarouselReverseTransition,
|
||||
VDialogTransition: VDialogTransition,
|
||||
VDialogBottomTransition: VDialogBottomTransition,
|
||||
VFabTransition: VFabTransition,
|
||||
VFadeTransition: VFadeTransition,
|
||||
VMenuTransition: VMenuTransition,
|
||||
VScaleTransition: VScaleTransition,
|
||||
VScrollXTransition: VScrollXTransition,
|
||||
VScrollXReverseTransition: VScrollXReverseTransition,
|
||||
VScrollYTransition: VScrollYTransition,
|
||||
VScrollYReverseTransition: VScrollYReverseTransition,
|
||||
VSlideXTransition: VSlideXTransition,
|
||||
VSlideXReverseTransition: VSlideXReverseTransition,
|
||||
VSlideYTransition: VSlideYTransition,
|
||||
VSlideYReverseTransition: VSlideYReverseTransition,
|
||||
VTabReverseTransition: VTabReverseTransition,
|
||||
VTabTransition: VTabTransition,
|
||||
VExpandTransition: VExpandTransition,
|
||||
VExpandXTransition: VExpandXTransition,
|
||||
VRowExpandTransition: VRowExpandTransition
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/transitions/index.js"],"names":[],"mappings":"AAAA,SACE,sBADF,EAEE,0BAFF,QAGO,oBAHP;AAKA,OAAO,yBAAP,MAAsC,qBAAtC;AAEA;AACA,OAAO,IAAM,yBAAyB,uBAAuB,yBAAvB,CAA/B;AACP,OAAO,IAAM,sBAAsB,uBAAuB,qBAAvB,CAA5B;AACP,OAAO,IAAM,6BAA6B,uBAAuB,6BAAvB,CAAnC;AACP,OAAO,IAAM,iBAAiB,uBAAuB,gBAAvB,CAAvB;AACP,OAAO,IAAM,wBAAwB,uBAAuB,wBAAvB,CAA9B;AACP,OAAO,IAAM,kBAAkB,uBAAuB,iBAAvB,CAAxB;AACP,OAAO,IAAM,iBAAiB,uBAAuB,gBAAvB,EAAyC,eAAzC,EAA0D,QAA1D,CAAvB;AAEP;AACA,OAAO,IAAM,oBAAoB,uBAAuB,mBAAvB,CAA1B;AACP,OAAO,IAAM,0BAA0B,uBAAuB,0BAAvB,CAAhC;AACP,OAAO,IAAM,kBAAkB,uBAAuB,iBAAvB,CAAxB;AACP,OAAO,IAAM,mBAAmB,uBAAuB,kBAAvB,CAAzB;AACP,OAAO,IAAM,qBAAqB,uBAAuB,qBAAvB,CAA3B;AACP,OAAO,IAAM,4BAA4B,uBAAuB,6BAAvB,CAAlC;AACP,OAAO,IAAM,qBAAqB,uBAAuB,qBAAvB,CAA3B;AACP,OAAO,IAAM,4BAA4B,uBAAuB,6BAAvB,CAAlC;AACP,OAAO,IAAM,oBAAoB,uBAAuB,oBAAvB,CAA1B;AACP,OAAO,IAAM,2BAA2B,uBAAuB,4BAAvB,CAAjC;AACP,OAAO,IAAM,oBAAoB,uBAAuB,oBAAvB,CAA1B;AACP,OAAO,IAAM,2BAA2B,uBAAuB,4BAAvB,CAAjC;AAEP;AACA,OAAO,IAAM,oBAAoB,2BAA2B,mBAA3B,EAAgD,2BAAhD,CAA1B;AACP,OAAO,IAAM,qBAAqB,2BAA2B,qBAA3B,EAAkD,0BAA0B,EAA1B,EAA8B,IAA9B,CAAlD,CAA3B;AACP,OAAO,IAAM,uBAAuB,2BAA2B,uBAA3B,EAAoD,0BAA0B,iCAA1B,CAApD,CAA7B;AAEP,eAAe;AACb,6BAAyB;AACvB,sDADuB;AAEvB,gDAFuB;AAGvB,8DAHuB;AAIvB,4CAJuB;AAKvB,wDALuB;AAMvB,sCANuB;AAOvB,wCAPuB;AAQvB,wCARuB;AASvB,0CATuB;AAUvB,8CAVuB;AAWvB,4DAXuB;AAYvB,8CAZuB;AAavB,4DAbuB;AAcvB,4CAduB;AAevB,0DAfuB;AAgBvB,4CAhBuB;AAiBvB,0DAjBuB;AAkBvB,oDAlBuB;AAmBvB,sCAnBuB;AAoBvB,4CApBuB;AAqBvB,8CArBuB;AAsBvB;AAtBuB;AADZ,CAAf","sourcesContent":["import {\n createSimpleTransition,\n createJavaScriptTransition\n} from '../../util/helpers'\n\nimport ExpandTransitionGenerator from './expand-transition'\n\n// Component specific transitions\nexport const VBottomSheetTransition = createSimpleTransition('bottom-sheet-transition')\nexport const VCarouselTransition = createSimpleTransition('carousel-transition')\nexport const VCarouselReverseTransition = createSimpleTransition('carousel-reverse-transition')\nexport const VTabTransition = createSimpleTransition('tab-transition')\nexport const VTabReverseTransition = createSimpleTransition('tab-reverse-transition')\nexport const VMenuTransition = createSimpleTransition('menu-transition')\nexport const VFabTransition = createSimpleTransition('fab-transition', 'center center', 'out-in')\n\n// Generic transitions\nexport const VDialogTransition = createSimpleTransition('dialog-transition')\nexport const VDialogBottomTransition = createSimpleTransition('dialog-bottom-transition')\nexport const VFadeTransition = createSimpleTransition('fade-transition')\nexport const VScaleTransition = createSimpleTransition('scale-transition')\nexport const VScrollXTransition = createSimpleTransition('scroll-x-transition')\nexport const VScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition')\nexport const VScrollYTransition = createSimpleTransition('scroll-y-transition')\nexport const VScrollYReverseTransition = createSimpleTransition('scroll-y-reverse-transition')\nexport const VSlideXTransition = createSimpleTransition('slide-x-transition')\nexport const VSlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition')\nexport const VSlideYTransition = createSimpleTransition('slide-y-transition')\nexport const VSlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition')\n\n// JavaScript transitions\nexport const VExpandTransition = createJavaScriptTransition('expand-transition', ExpandTransitionGenerator())\nexport const VExpandXTransition = createJavaScriptTransition('expand-x-transition', ExpandTransitionGenerator('', true))\nexport const VRowExpandTransition = createJavaScriptTransition('row-expand-transition', ExpandTransitionGenerator('datatable__expand-col--expanded'))\n\nexport default {\n $_vuetify_subcomponents: {\n VBottomSheetTransition,\n VCarouselTransition,\n VCarouselReverseTransition,\n VDialogTransition,\n VDialogBottomTransition,\n VFabTransition,\n VFadeTransition,\n VMenuTransition,\n VScaleTransition,\n VScrollXTransition,\n VScrollXReverseTransition,\n VScrollYTransition,\n VScrollYReverseTransition,\n VSlideXTransition,\n VSlideXReverseTransition,\n VSlideYTransition,\n VSlideYReverseTransition,\n VTabReverseTransition,\n VTabTransition,\n VExpandTransition,\n VExpandXTransition,\n VRowExpandTransition\n }\n}\n"],"sourceRoot":""}
|
||||
Reference in New Issue
Block a user