Ohm-Management - Projektarbeit B-ME
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.

themeable.js 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. 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; };
  2. import Vue from 'vue';
  3. export function functionalThemeClasses(context) {
  4. var vm = _extends({}, context.props, context.injections);
  5. var isDark = Themeable.options.computed.isDark.call(vm);
  6. return Themeable.options.computed.themeClasses.call({ isDark: isDark });
  7. }
  8. /* @vue/component */
  9. var Themeable = Vue.extend().extend({
  10. name: 'themeable',
  11. provide: function provide() {
  12. return {
  13. theme: this.themeableProvide
  14. };
  15. },
  16. inject: {
  17. theme: {
  18. default: {
  19. isDark: false
  20. }
  21. }
  22. },
  23. props: {
  24. dark: {
  25. type: Boolean,
  26. default: null
  27. },
  28. light: {
  29. type: Boolean,
  30. default: null
  31. }
  32. },
  33. data: function data() {
  34. return {
  35. themeableProvide: {
  36. isDark: false
  37. }
  38. };
  39. },
  40. computed: {
  41. isDark: function isDark() {
  42. if (this.dark === true) {
  43. // explicitly dark
  44. return true;
  45. } else if (this.light === true) {
  46. // explicitly light
  47. return false;
  48. } else {
  49. // inherit from parent, or default false if there is none
  50. return this.theme.isDark;
  51. }
  52. },
  53. themeClasses: function themeClasses() {
  54. return {
  55. 'theme--dark': this.isDark,
  56. 'theme--light': !this.isDark
  57. };
  58. },
  59. /** Used by menus and dialogs, inherits from v-app instead of the parent */
  60. rootIsDark: function rootIsDark() {
  61. if (this.dark === true) {
  62. // explicitly dark
  63. return true;
  64. } else if (this.light === true) {
  65. // explicitly light
  66. return false;
  67. } else {
  68. // inherit from v-app
  69. return this.$vuetify.dark;
  70. }
  71. },
  72. rootThemeClasses: function rootThemeClasses() {
  73. return {
  74. 'theme--dark': this.rootIsDark,
  75. 'theme--light': !this.rootIsDark
  76. };
  77. }
  78. },
  79. watch: {
  80. isDark: {
  81. handler: function handler(newVal, oldVal) {
  82. if (newVal !== oldVal) {
  83. this.themeableProvide.isDark = this.isDark;
  84. }
  85. },
  86. immediate: true
  87. }
  88. }
  89. });
  90. export default Themeable;
  91. //# sourceMappingURL=themeable.js.map