@kokoccc/vuetify 1.0.1

package/src/services/theme/__tests__/theme-utils.spec.ts

@@ -0,0 +1,55 @@
+import {
+  genStyles,
+  parse,
+} from '../utils'
+
+describe('theme-utilities.ts', () => {
+  let parsedTheme
+
+  beforeEach(() => {
+    parsedTheme = {
+      primary: {
+        base: '#c42742',
+        lighten5: '#2c0447',
+        lighten4: '#cfa854',
+        lighten3: '#dd88cc',
+        lighten2: '#b49921',
+        lighten1: '#f899c7',
+        darken1: '#0169dc',
+        darken2: '#c28fd0',
+        darken3: '#fbe002',
+        darken4: '#33303a',
+      },
+      anchor: '#c42742',
+    }
+  })
+
+  it('should parse a theme or theme item', () => {
+    const theme = {
+      primary: '#000',
+      secondary: '#fff',
+    }
+
+    expect(parse(theme)).toMatchSnapshot()
+    expect(parse(parsedTheme)).toMatchSnapshot()
+  })
+
+  it('should generate styles', () => {
+    // No values provided
+    expect(genStyles({})).toBe('')
+
+    expect(genStyles(parsedTheme)).toMatchSnapshot()
+  })
+
+  it('should generate css vars', () => {
+    expect(genStyles(parsedTheme, true)).toMatchSnapshot()
+  })
+
+  it('should use custom anchor color', () => {
+    // Uses primary base as fallback
+    expect(genStyles(parsedTheme)).toContain('a { color: #c42742; }')
+
+    parsedTheme.anchor = '#000000'
+    expect(genStyles(parsedTheme)).toContain('a { color: #000000; }')
+  })
+})

package/src/services/theme/__tests__/theme.spec.ts

@@ -0,0 +1,284 @@
+// Service
+import { Theme } from '../index'
+
+// Preset
+import { preset } from '../../../presets/default'
+
+// Utilities
+import { mergeDeep } from '../../../util/helpers'
+
+// Types
+import { createApp, nextTick } from 'vue'
+import {
+  VuetifyParsedTheme,
+  VuetifyThemeVariant,
+  ThemeOptions,
+} from 'vuetify/types/services/theme'
+
+// Test Utils
+import { enableAutoUnmount } from '@vue/test-utils'
+
+const FillVariant = (variant: Partial<VuetifyThemeVariant> = {}) => {
+  return {
+    primary: '#1976D2',
+    secondary: '#424242',
+    accent: '#82B1FF',
+    error: '#FF5252',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FFC107',
+    ...variant,
+  }
+}
+
+describe('Theme.ts', () => {
+  function rootFactory () {
+    return mergeDeep(JSON.parse(JSON.stringify(preset)), {
+      theme: {
+        default: 'light',
+        themes: {
+          dark: FillVariant(),
+          light: FillVariant(),
+        },
+      },
+    })
+  }
+
+  let mockTheme: (theme?: Partial<ThemeOptions>) => Theme
+  let instance: any
+
+  beforeEach(() => {
+    mockTheme = (themeOptions?: Partial<ThemeOptions>) => {
+      const options = { theme: themeOptions || {} }
+      const theme = new Theme(mergeDeep(rootFactory(), options))
+
+      // Создаем Vue 3 app instance для тестов
+      const app = createApp({})
+      instance = app
+
+      theme.init(instance)
+
+      return theme
+    }
+  })
+
+  afterEach(() => {
+    const style = document.getElementById('vuetify-theme-stylesheet')
+
+    style && style.remove()
+  })
+
+  // Включаем автоматическую очистку компонентов
+  enableAutoUnmount(afterEach)
+
+  it('should disable theme colors', () => {
+    const theme = mockTheme({ disable: true })
+
+    expect(theme.styleEl).toBeFalsy()
+  })
+
+  it('should generate theme and apply to document', () => {
+    const theme = mockTheme({
+      themes: {
+        light: FillVariant({
+          primary: '#000001',
+          secondary: '#000002',
+          accent: '#000003',
+        }),
+      },
+    })
+
+    // Принудительно создаем стиль элемент для тестов
+    theme.applyTheme()
+
+    // В Vue Meta 3 metaManager больше не используется
+    // Проверяем, что стили применяются напрямую через DOM
+    expect(theme.styleEl).toBeTruthy()
+    expect(theme.styleEl?.innerHTML).toBeTruthy()
+
+    // Проверяем сгенерированные стили
+    const generatedStyles = theme.generatedStyles
+    expect(generatedStyles).toMatchSnapshot()
+    expect(generatedStyles.indexOf('#000001') > -1).toBe(true)
+    expect(generatedStyles.indexOf('#000002') > -1).toBe(true)
+    expect(generatedStyles.indexOf('#000003') > -1).toBe(true)
+  })
+
+  it('should apply a new theme', () => {
+    const theme = mockTheme({
+      default: 'light',
+      themes: {
+        light: FillVariant(),
+        dark: FillVariant({
+          primary: '#FFFFFF',
+        }),
+      },
+    })
+
+    // Принудительно создаем стиль элемент для тестов
+    theme.applyTheme()
+
+    // В Vue Meta 3 metaManager больше не используется
+    expect(theme.styleEl).toBeTruthy()
+
+    const initialStyles = theme.generatedStyles
+
+    theme.dark = true
+
+    // Проверяем, что стили изменились при смене темы
+    const newStyles = theme.generatedStyles
+    expect(initialStyles).not.toEqual(newStyles)
+  })
+
+  it('should clear css', () => {
+    const theme = mockTheme()
+    const spy = jest.spyOn(theme, 'clearCss')
+
+    theme.dark = true
+    expect(spy).toHaveBeenCalledTimes(0)
+
+    theme.themes.light = FillVariant()
+    theme.dark = false
+    expect(spy).toHaveBeenCalledTimes(0)
+
+    theme.disabled = true
+    theme.dark = true
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should use themeCache', () => {
+    const cache = new Map()
+    const themeCache = {
+      get: jest.fn(theme => cache.get(theme)),
+      set: jest.fn((theme: VuetifyParsedTheme, css: string) => {
+        cache.set(theme, css)
+      }),
+    }
+
+    const theme = mockTheme({
+      options: { themeCache },
+    })
+
+    expect(theme.generatedStyles).toMatchSnapshot()
+    // В Vue 3 может быть другое количество вызовов из-за изменений в реактивности
+    expect(themeCache.set).toHaveBeenCalled()
+
+    theme.applyTheme()
+
+    expect(themeCache.get).toHaveBeenCalled()
+    expect(themeCache.set).toHaveBeenCalled()
+    expect(theme.generatedStyles).toMatchSnapshot()
+  })
+
+  it('should minify theme', () => {
+    const minifyTheme = jest.fn((css: string) => css + 'foobar')
+
+    const theme = mockTheme({
+      options: { minifyTheme },
+    })
+
+    // Принудительно создаем стиль элемент для тестов
+    theme.applyTheme()
+
+    // В Vue Meta 3 metaManager больше не используется
+    expect(theme.styleEl).toBeTruthy()
+
+    const generatedStyles = theme.generatedStyles
+
+    expect(minifyTheme).toHaveBeenCalled()
+    expect(generatedStyles.indexOf('foobar') > -1).toBe(true)
+    expect(generatedStyles).toMatchSnapshot()
+  })
+
+  it('should add nonce to stylesheet', () => {
+    const theme = mockTheme({
+      options: { cspNonce: 'foobar' },
+    })
+
+    // Принудительно создаем стиль элемент для тестов
+    theme.applyTheme()
+
+    // В Vue Meta 3 metaManager больше не используется
+    expect(theme.styleEl).toBeTruthy()
+
+    // Проверяем, что nonce передается правильно
+    expect(theme.options.cspNonce).toBe('foobar')
+    expect(theme.styleEl?.nonce).toBe('foobar')
+  })
+
+  it('should initialize the theme', () => {
+    const theme = mockTheme()
+    const spy = jest.spyOn(theme, 'applyTheme')
+    const ssrContext = { head: '' }
+    const app = createApp({})
+    theme.init(app, ssrContext)
+
+    // В SSR режиме applyTheme не вызывается, так как стили добавляются в head
+    expect(ssrContext.head).toBeTruthy()
+    expect(ssrContext.head).toMatchSnapshot()
+  })
+
+  it('should set theme with vue-meta@next', () => {
+    const theme = mockTheme()
+    const app = createApp({})
+
+    theme.init(app)
+
+    // В vue-meta@next стили применяются через DOM
+    expect(theme.styleEl).toBeTruthy()
+  })
+
+  it('should react to theme changes', async () => {
+    const theme = mockTheme()
+    const spy = jest.spyOn(theme, 'applyTheme')
+
+    // В Vue 3 реактивность работает по-другому, поэтому нужно принудительно вызывать applyTheme
+    theme.themes.light.primary = '#000000'
+    theme.applyTheme()
+    expect(spy).toHaveBeenCalled()
+
+    theme.themes.dark.secondary = '#000000'
+    theme.applyTheme()
+    expect(spy).toHaveBeenCalled()
+
+    theme.currentTheme.accent = '#000000'
+    theme.applyTheme()
+    expect(spy).toHaveBeenCalled()
+  })
+
+  it('should reset themes', async () => {
+    const theme = mockTheme()
+    const spy = jest.spyOn(theme, 'applyTheme')
+
+    expect(theme.generatedStyles).toMatchSnapshot()
+    theme.resetThemes()
+    expect(theme.generatedStyles).toMatchSnapshot()
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should set theme', () => {
+    const theme = mockTheme()
+    const spy = jest.spyOn(theme, 'applyTheme')
+
+    expect(theme.generatedStyles).toMatchSnapshot()
+    theme.setTheme('light', { accent: '#c0ffee' })
+    expect(theme.generatedStyles).toMatchSnapshot()
+    theme.setTheme('dark', { accent: '#c0ffee' })
+    expect(theme.generatedStyles).toMatchSnapshot()
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+
+  it('should not generate variations', () => {
+    const theme = mockTheme({ options: { variations: false } })
+
+    // Принудительно создаем стиль элемент для тестов
+    theme.applyTheme()
+
+    // В Vue Meta 3 metaManager больше не используется
+    expect(theme.styleEl).toBeTruthy()
+
+    const generatedStyles = theme.generatedStyles
+
+    expect(generatedStyles).toMatchSnapshot()
+  })
+})

package/src/services/theme/index.ts

@@ -0,0 +1,256 @@
+/* eslint-disable no-multi-spaces */
+// Extensions
+import { Service } from '../service'
+
+// Utilities
+import * as ThemeUtils from './utils'
+import { getNestedValue } from '../../util/helpers'
+
+// Types
+import {App, reactive} from 'vue'
+import { VuetifyPreset } from 'vuetify/types/services/presets'
+import {
+  VuetifyParsedTheme,
+  VuetifyThemes,
+  VuetifyThemeVariant,
+  Theme as ITheme,
+} from 'vuetify/types/services/theme'
+
+// Vue Meta 3
+import { createMetaManager, useMeta } from 'vue-meta'
+
+export class Theme extends Service {
+  static property: 'theme' = 'theme'
+
+  public disabled = false
+
+  public options: ITheme['options']
+
+  public styleEl?: HTMLStyleElement
+
+  public themes: VuetifyThemes
+
+  public defaults: VuetifyThemes
+
+  private isDark = null as boolean | null
+
+  private unwatch = null as (() => void) | null
+
+  private metaManager: any = null
+
+  constructor (preset: VuetifyPreset) {
+    super()
+
+    const {
+      dark,
+      disable,
+      options,
+      themes,
+    } = preset[Theme.property]
+
+    this.dark = Boolean(dark)
+    this.defaults = this.themes = themes
+    this.options = options
+
+    if (disable) {
+      this.disabled = true
+
+      return
+    }
+
+    this.themes = {
+      dark: this.fillVariant(themes.dark, true),
+      light: this.fillVariant(themes.light, false),
+    }
+  }
+
+  // When setting css, check for element and apply new values
+  /* eslint-disable-next-line accessor-pairs */
+  set css (val: string) {
+    if (this.metaManager) {
+      this.applyVueMeta3(val)
+      return
+    }
+    this.checkOrCreateStyleElement() && (this.styleEl!.innerHTML = val)
+  }
+
+  set dark (val: boolean) {
+    const oldDark = this.isDark
+
+    this.isDark = val
+    // Only apply theme after dark
+    // has already been set before
+    oldDark != null && this.applyTheme()
+  }
+
+  get dark () {
+    return Boolean(this.isDark)
+  }
+
+  // Apply current theme default
+  // only called on client side
+  public applyTheme (): void {
+    if (this.disabled) return this.clearCss()
+
+    this.css = this.generatedStyles
+  }
+
+  public clearCss (): void {
+    this.css = ''
+  }
+
+  // Initialize theme for SSR and SPA
+  // Attach to ssrContext head or
+  // apply new theme to document
+  public init (root: App, ssrContext?: any): void {
+    if (this.disabled) return
+
+    // Инициализируем vue-meta 3
+    this.initVueMeta3(root)
+
+    if (ssrContext) {
+      this.initSSR(ssrContext)
+    } else {
+      this.initTheme(root)
+    }
+  }
+
+  // Allows for you to set target theme
+  public setTheme (theme: 'light' | 'dark', value: object) {
+    this.themes[theme] = Object.assign(this.themes[theme], value)
+    this.applyTheme()
+  }
+
+  // Reset theme defaults
+  public resetThemes () {
+    this.themes.light = Object.assign({}, this.defaults.light)
+    this.themes.dark = Object.assign({}, this.defaults.dark)
+    this.applyTheme()
+  }
+
+  // Check for existence of style element
+  private checkOrCreateStyleElement (): boolean {
+    this.styleEl = document.getElementById('vuetify-theme-stylesheet') as HTMLStyleElement
+
+    /* istanbul ignore next */
+    if (this.styleEl) return true
+
+    this.genStyleElement() // If doesn't have it, create it
+
+    return Boolean(this.styleEl)
+  }
+
+  private fillVariant (
+    theme: Partial<VuetifyThemeVariant> = {},
+    dark: boolean
+  ): VuetifyThemeVariant {
+    const defaultTheme = this.themes[dark ? 'dark' : 'light']
+
+    return Object.assign({},
+      defaultTheme,
+      theme
+    )
+  }
+
+  // Generate the style element
+  // if applicable
+  private genStyleElement (): void {
+    /* istanbul ignore if */
+    if (typeof document === 'undefined') return
+
+    /* istanbul ignore next */
+    this.styleEl = document.createElement('style')
+    this.styleEl.type = 'text/css'
+    this.styleEl.id = 'vuetify-theme-stylesheet'
+
+    if (this.options.cspNonce) {
+      this.styleEl.setAttribute('nonce', this.options.cspNonce)
+    }
+
+    document.head.appendChild(this.styleEl)
+  }
+
+  private initVueMeta3 (root: App) {
+    // Vue Meta 3 теперь работает через плагин, а не через отдельный manager
+    // Стили будут добавляться напрямую через useMeta API в компонентах
+    // или через обычный DOM API
+    this.metaManager = null
+  }
+
+  private applyVueMeta3 (css: string) {
+    // Vue Meta 3 больше не использует manager.addMeta API
+    // Используем обычный DOM API для обновления стилей
+    this.checkOrCreateStyleElement() && (this.styleEl!.innerHTML = css)
+  }
+
+  private initSSR (ssrContext?: any) {
+    // SSR
+    const nonce = this.options.cspNonce ? ` nonce="${this.options.cspNonce}"` : ''
+    ssrContext.head = ssrContext.head || ''
+    ssrContext.head += `<style type="text/css" id="vuetify-theme-stylesheet"${nonce}>${this.generatedStyles}</style>`
+  }
+
+  private initTheme (root: App) {
+    // Only watch for reactivity on client side
+    if (typeof document === 'undefined') return
+
+    // If we get here somehow, ensure
+    // existing instance is removed
+    if (this.unwatch) {
+      this.unwatch()
+      this.unwatch = null
+    }
+
+    // TODO: Update to use RFC if merged
+    // https://github.com/vuejs/rfcs/blob/advanced-reactivity-api/active-rfcs/0000-advanced-reactivity-api.md
+
+    // root.$once('hook:created', () => {
+    //   const obs = reactive({ themes: this.themes })
+    //   this.unwatch = root.$watch(() => obs.themes, () => this.applyTheme(), { deep: true })
+    // })
+
+
+    this.applyTheme()
+  }
+
+  get currentTheme () {
+    const target = this.dark ? 'dark' : 'light'
+
+    return this.themes[target]
+  }
+
+  get generatedStyles (): string {
+    const theme = this.parsedTheme
+    /* istanbul ignore next */
+    const options = this.options || {}
+    let css
+
+    if (options.themeCache != null) {
+      css = options.themeCache.get(theme)
+      /* istanbul ignore if */
+      if (css != null) return css
+    }
+
+    css = ThemeUtils.genStyles(theme, options.customProperties)
+
+    if (options.minifyTheme != null) {
+      css = options.minifyTheme(css)
+    }
+
+    if (options.themeCache != null) {
+      options.themeCache.set(theme, css)
+    }
+
+    return css
+  }
+
+  get parsedTheme (): VuetifyParsedTheme {
+    return ThemeUtils.parse(
+      this.currentTheme || {},
+      undefined,
+      getNestedValue(this.options, ['variations'], true)
+    )
+  }
+
+  // Vue Meta 3 больше не нужен isVueMeta23 метод
+}