jupyter-vuetify/lib/VuetifyView.js

Jupyter widgets based on vuetify UI components

import { VueView, createViewContext, vueRender } from "jupyter-vue";
import "vuetify/styles";
import colors from "vuetify/lib/util/colors.mjs";
import { createVuetify, useTheme } from "vuetify";
import * as components from "vuetify/components";
import * as labComponents from "vuetify/labs/components";
import * as directives from "vuetify/directives";
import { ThemeColorsModel, ThemeModel } from "./Themes";
import { addApp } from "./VuetifyApp";

// Every widget view gets its own Vue app, but all views for one widget manager
// should share a single Vuetify plugin and theme state.
const managerStateByWidgetManager = new WeakMap();
function getManagerState(widgetManager) {
  let managerState = managerStateByWidgetManager.get(widgetManager);
  if (!managerState) {
    managerState = {
      initializedThemes: new WeakSet(),
      vuetify: createVuetify({
        components: {
          ...components,
          ...labComponents
        },
        directives
      })
    };
    managerStateByWidgetManager.set(widgetManager, managerState);
  }
  return managerState;
}
const observer = new MutationObserver(mutationList => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      const overlay = document.querySelector(".v-overlay-container");
      if (overlay) {
        overlay.classList.add("vuetify-styles");
        overlay.addEventListener("keydown", event => {
          event.stopPropagation();
        });
      }
    }
  }
});
observer.observe(document.body, {
  childList: true
});
export class VuetifyView extends VueView {
  addPlugins(vueApp) {
    super.addPlugins(vueApp);
    const {
      vuetify
    } = getManagerState(this.model.widget_manager);
    this.el.classList.add("vuetify-styles");
    document.querySelector("html").style.fontSize = "16px";
    vueApp.use(vuetify);
    addApp(vueApp);
  }
  async beforeViewRender() {
    await super.beforeViewRender();
    const models = await Promise.all(Object.values(this.model.widget_manager._models));
    this.themeModel = models.find(m => m instanceof ThemeModel);
    models.filter(m => m instanceof ThemeColorsModel).forEach(m => {
      if (m.get("_theme_name") === "light") {
        this.themeLightModel = m;
      } else if (m.get("_theme_name") === "dark") {
        this.themeDarkModel = m;
      }
    });
  }
  onSetup() {
    super.onSetup();
    this.setupTheme(useTheme());
  }

  /** @override */
  vueComponent() {
    const view = this;
    return {
      provide: {
        viewCtx: createViewContext(view)
      },
      setup: () => {
        view.onSetup();
        return () => vueRender(view.model, view);
      }
    };
  }
  setupTheme(theme) {
    if (!this.themeModel) {
      return;
    }
    const managerState = getManagerState(this.model.widget_manager);
    if (!managerState.initializedThemes.has(theme)) {
      initializeTheme(theme, this.themeModel, this.themeLightModel, this.themeDarkModel);
      managerState.initializedThemes.add(theme);
    }
  }
}
function initializeTheme(theme, themeModel, themeLightModel, themeDarkModel) {
  if (ThemeModel.themeManager) {
    const setAutoTheme = () => {
      if (themeModel.get("dark") === null) {
        const isDark = document.body.dataset.jpThemeLight === "false";
        theme.global.name.value = isDark ? "dark" : "light";
        themeModel.set("dark_jlab", isDark);
        themeModel.save_changes();
      }
    };
    ThemeModel.themeManager.themeChanged.connect(() => {
      setAutoTheme();
    });
    setAutoTheme();
  }
  const onDark = () => {
    theme.global.name.value = themeModel.get("dark") ? "dark" : "light";
  };
  const onColorsLight = () => {
    mergeThemeColors(theme, "light", getColors(themeLightModel));
  };
  onColorsLight();
  const onColorsDark = () => {
    mergeThemeColors(theme, "dark", getColors(themeDarkModel));
  };
  onColorsDark();
  if (themeModel.get("dark") !== null) {
    onDark();
  } else if (document.body.dataset.jpThemeLight) {
    const isDark = document.body.dataset.jpThemeLight === "false";
    theme.global.name.value = isDark ? "dark" : "light";
    themeModel.set("dark_jlab", isDark);
    themeModel.save_changes();
  } else if (document.body.classList.contains("theme-dark")) {
    theme.global.name.value = "dark";
    themeModel.set("dark", true);
    themeModel.save_changes();
  } else if (document.body.classList.contains("theme-light")) {
    themeModel.set("dark", false);
    themeModel.save_changes();
  }
  themeModel.on("change:dark", onDark);
  themeLightModel.on("change", onColorsLight);
  themeDarkModel.on("change", onColorsDark);
}
function mergeThemeColors(theme, themeName, colors) {
  const themeConfig = theme.themes.value[themeName];
  themeConfig.colors = {
    ...(themeConfig.colors || {}),
    ...colors
  };
}
function parseColor(colorStr) {
  const parts = colorStr.split(".").slice(1);
  let result = colors;
  parts.forEach(part => {
    result = result[part];
  });
  return typeof result === "string" ? result : result.base;
}
function getColors(colorModel) {
  const colors = Object.fromEntries(Object.entries(colorModel.attributes).filter(([key]) => !key.startsWith("_") && !["accent", "anchor", "custom_theme_colors"].includes(key)).map(([key, value]) => [key.replace(/_/g, "-"), value.startsWith("colors.") ? parseColor(value) : value]));
  return {
    ...colors,
    ...(colorModel.get("custom_theme_colors") || {})
  };
}