项目原始demo,不改动
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
 
 
 
 

233 line
9.3 KiB

  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. require("../../../src/components/VAppBar/VAppBar.sass");
  7. var _VToolbar = _interopRequireDefault(require("../VToolbar/VToolbar"));
  8. var _scroll = _interopRequireDefault(require("../../directives/scroll"));
  9. var _applicationable = _interopRequireDefault(require("../../mixins/applicationable"));
  10. var _scrollable = _interopRequireDefault(require("../../mixins/scrollable"));
  11. var _ssrBootable = _interopRequireDefault(require("../../mixins/ssr-bootable"));
  12. var _toggleable = _interopRequireDefault(require("../../mixins/toggleable"));
  13. var _helpers = require("../../util/helpers");
  14. var _mixins = _interopRequireDefault(require("../../util/mixins"));
  15. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  16. function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
  17. function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
  18. 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; }
  19. var baseMixins = (0, _mixins.default)(_VToolbar.default, _scrollable.default, _ssrBootable.default, _toggleable.default, (0, _applicationable.default)('top', ['clippedLeft', 'clippedRight', 'computedHeight', 'invertedScroll', 'isExtended', 'isProminent', 'value']));
  20. /* @vue/component */
  21. var _default = baseMixins.extend({
  22. name: 'v-app-bar',
  23. directives: {
  24. Scroll: _scroll.default
  25. },
  26. props: {
  27. clippedLeft: Boolean,
  28. clippedRight: Boolean,
  29. collapseOnScroll: Boolean,
  30. elevateOnScroll: Boolean,
  31. fadeImgOnScroll: Boolean,
  32. hideOnScroll: Boolean,
  33. invertedScroll: Boolean,
  34. scrollOffScreen: Boolean,
  35. shrinkOnScroll: Boolean,
  36. value: {
  37. type: Boolean,
  38. default: true
  39. }
  40. },
  41. data: function data() {
  42. return {
  43. isActive: this.value
  44. };
  45. },
  46. computed: {
  47. applicationProperty: function applicationProperty() {
  48. return !this.bottom ? 'top' : 'bottom';
  49. },
  50. canScroll: function canScroll() {
  51. return _scrollable.default.options.computed.canScroll.call(this) && (this.invertedScroll || this.elevateOnScroll || this.hideOnScroll || this.collapseOnScroll || this.isBooted || // If falsey, user has provided an
  52. // explicit value which should
  53. // overwrite anything we do
  54. !this.value);
  55. },
  56. classes: function classes() {
  57. return _objectSpread({}, _VToolbar.default.options.computed.classes.call(this), {
  58. 'v-toolbar--collapse': this.collapse || this.collapseOnScroll,
  59. 'v-app-bar': true,
  60. 'v-app-bar--clipped': this.clippedLeft || this.clippedRight,
  61. 'v-app-bar--fade-img-on-scroll': this.fadeImgOnScroll,
  62. 'v-app-bar--elevate-on-scroll': this.elevateOnScroll,
  63. 'v-app-bar--fixed': !this.absolute && (this.app || this.fixed),
  64. 'v-app-bar--hide-shadow': this.hideShadow,
  65. 'v-app-bar--is-scrolled': this.currentScroll > 0,
  66. 'v-app-bar--shrink-on-scroll': this.shrinkOnScroll
  67. });
  68. },
  69. computedContentHeight: function computedContentHeight() {
  70. if (!this.shrinkOnScroll) return _VToolbar.default.options.computed.computedContentHeight.call(this);
  71. var height = this.computedOriginalHeight;
  72. var min = this.dense ? 48 : 56;
  73. var max = height;
  74. var difference = max - min;
  75. var iteration = difference / this.computedScrollThreshold;
  76. var offset = this.currentScroll * iteration;
  77. return Math.max(min, max - offset);
  78. },
  79. computedFontSize: function computedFontSize() {
  80. if (!this.isProminent) return undefined;
  81. var max = this.dense ? 96 : 128;
  82. var difference = max - this.computedContentHeight;
  83. var increment = 0.00347; // 1.5rem to a minimum of 1.25rem
  84. return Number((1.50 - difference * increment).toFixed(2));
  85. },
  86. computedLeft: function computedLeft() {
  87. if (!this.app || this.clippedLeft) return 0;
  88. return this.$vuetify.application.left;
  89. },
  90. computedMarginTop: function computedMarginTop() {
  91. if (!this.app) return 0;
  92. return this.$vuetify.application.bar;
  93. },
  94. computedOpacity: function computedOpacity() {
  95. if (!this.fadeImgOnScroll) return undefined;
  96. var opacity = Math.max((this.computedScrollThreshold - this.currentScroll) / this.computedScrollThreshold, 0);
  97. return Number(parseFloat(opacity).toFixed(2));
  98. },
  99. computedOriginalHeight: function computedOriginalHeight() {
  100. var height = _VToolbar.default.options.computed.computedContentHeight.call(this);
  101. if (this.isExtended) height += parseInt(this.extensionHeight);
  102. return height;
  103. },
  104. computedRight: function computedRight() {
  105. if (!this.app || this.clippedRight) return 0;
  106. return this.$vuetify.application.right;
  107. },
  108. computedScrollThreshold: function computedScrollThreshold() {
  109. if (this.scrollThreshold) return Number(this.scrollThreshold);
  110. return this.computedOriginalHeight - (this.dense ? 48 : 56);
  111. },
  112. computedTransform: function computedTransform() {
  113. if (!this.canScroll || this.elevateOnScroll && this.currentScroll === 0 && this.isActive) return 0;
  114. if (this.isActive) return 0;
  115. var scrollOffScreen = this.scrollOffScreen ? this.computedHeight : this.computedContentHeight;
  116. return this.bottom ? scrollOffScreen : -scrollOffScreen;
  117. },
  118. hideShadow: function hideShadow() {
  119. if (this.elevateOnScroll && this.isExtended) {
  120. return this.currentScroll < this.computedScrollThreshold;
  121. }
  122. if (this.elevateOnScroll) {
  123. return this.currentScroll === 0 || this.computedTransform < 0;
  124. }
  125. return (!this.isExtended || this.scrollOffScreen) && this.computedTransform !== 0;
  126. },
  127. isCollapsed: function isCollapsed() {
  128. if (!this.collapseOnScroll) {
  129. return _VToolbar.default.options.computed.isCollapsed.call(this);
  130. }
  131. return this.currentScroll > 0;
  132. },
  133. isProminent: function isProminent() {
  134. return _VToolbar.default.options.computed.isProminent.call(this) || this.shrinkOnScroll;
  135. },
  136. styles: function styles() {
  137. return _objectSpread({}, _VToolbar.default.options.computed.styles.call(this), {
  138. fontSize: (0, _helpers.convertToUnit)(this.computedFontSize, 'rem'),
  139. marginTop: (0, _helpers.convertToUnit)(this.computedMarginTop),
  140. transform: "translateY(".concat((0, _helpers.convertToUnit)(this.computedTransform), ")"),
  141. left: (0, _helpers.convertToUnit)(this.computedLeft),
  142. right: (0, _helpers.convertToUnit)(this.computedRight)
  143. });
  144. }
  145. },
  146. watch: {
  147. canScroll: 'onScroll',
  148. computedTransform: function computedTransform() {
  149. // Normally we do not want the v-app-bar
  150. // to update the application top value
  151. // to avoid screen jump. However, in
  152. // this situation, we must so that
  153. // the clipped drawer can update
  154. // its top value when scrolled
  155. if (!this.canScroll || !this.clippedLeft && !this.clippedRight) return;
  156. this.callUpdate();
  157. },
  158. invertedScroll: function invertedScroll(val) {
  159. this.isActive = !val || this.currentScroll !== 0;
  160. }
  161. },
  162. created: function created() {
  163. if (this.invertedScroll) this.isActive = false;
  164. },
  165. methods: {
  166. genBackground: function genBackground() {
  167. var render = _VToolbar.default.options.methods.genBackground.call(this);
  168. render.data = this._b(render.data || {}, render.tag, {
  169. style: {
  170. opacity: this.computedOpacity
  171. }
  172. });
  173. return render;
  174. },
  175. updateApplication: function updateApplication() {
  176. return this.invertedScroll ? 0 : this.computedHeight + this.computedTransform;
  177. },
  178. thresholdMet: function thresholdMet() {
  179. if (this.invertedScroll) {
  180. this.isActive = this.currentScroll > this.computedScrollThreshold;
  181. return;
  182. }
  183. if (this.hideOnScroll) {
  184. this.isActive = this.isScrollingUp || this.currentScroll < this.computedScrollThreshold;
  185. }
  186. if (this.currentThreshold < this.computedScrollThreshold) return;
  187. this.savedScroll = this.currentScroll;
  188. }
  189. },
  190. render: function render(h) {
  191. var render = _VToolbar.default.options.render.call(this, h);
  192. render.data = render.data || {};
  193. if (this.canScroll) {
  194. render.data.directives = render.data.directives || [];
  195. render.data.directives.push({
  196. arg: this.scrollTarget,
  197. name: 'scroll',
  198. value: this.onScroll
  199. });
  200. }
  201. return render;
  202. }
  203. });
  204. exports.default = _default;
  205. //# sourceMappingURL=VAppBar.js.map