fix(components): ui prop override with class (#136)

docs/app/composables/fetchContentExamplesCode.ts

@@ -1,6 +1,6 @@
 const useContentExamplesCodeState = () => useState('content-examples-code', () => ({}))
 
-export async function fetchContentExampleCode (name?: string) {
+export async function fetchContentExampleCode(name?: string) {
   if (!name) return
   const state = useContentExamplesCodeState()
 
@@ -8,7 +8,9 @@ export async function fetchContentExampleCode (name?: string) {
     await state.value[name]
     return state.value[name]
   }
-  if (state.value[name]) { return state.value[name] }
+  if (state.value[name]) {
+    return state.value[name]
+  }
 
   // add to nitro prerender
   if (import.meta.server) {

docs/app/composables/useShikiHighlighter.ts

@@ -1,31 +0,0 @@
-import { createShikiHighlighter } from '@nuxtjs/mdc/runtime/highlighter/shiki'
-import MaterialTheme from 'shiki/themes/material-theme.mjs'
-import MaterialThemeLighter from 'shiki/themes/material-theme-lighter.mjs'
-import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
-import HtmlLang from 'shiki/langs/html.mjs'
-import MdcLang from 'shiki/langs/mdc.mjs'
-import VueLang from 'shiki/langs/vue.mjs'
-import YamlLang from 'shiki/langs/yaml.mjs'
-import PostcssLang from 'shiki/langs/postcss.mjs'
-
-let highlighter
-export const useShikiHighlighter = () => {
-  if (!highlighter) {
-    highlighter = createShikiHighlighter({
-      bundledThemes: {
-        'material-theme': MaterialTheme,
-        'material-theme-lighter': MaterialThemeLighter,
-        'material-theme-palenight': MaterialThemePalenight
-      },
-      bundledLangs: {
-        html: HtmlLang,
-        mdc: MdcLang,
-        vue: VueLang,
-        yml: YamlLang,
-        postcss: PostcssLang
-      }
-    })
-  }
-
-  return highlighter
-}

docs/app/plugins/prettier.ts

@@ -2,10 +2,10 @@ import type { Options } from 'prettier'
 import PrettierWorker from '@/workers/prettier.js?worker&inline'
 
 export interface SimplePrettier {
-  format: (source: string, options?: Options) => Promise<string>;
+  format: (source: string, options?: Options) => Promise<string>
 }
 
-function createPrettierWorkerApi (worker: Worker): SimplePrettier {
+function createPrettierWorkerApi(worker: Worker): SimplePrettier {
   let counter = 0
   const handlers = {}
 
@@ -17,6 +17,7 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
     }
 
     const [resolve, reject] = handlers[uid]
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete handlers[uid]
 
     if (error) {
@@ -26,7 +27,7 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
     }
   })
 
-  function postMessage<T> (message) {
+  function postMessage<T>(message) {
     const uid = ++counter
     return new Promise<T>((resolve, reject) => {
       handlers[uid] = [resolve, reject]
@@ -35,19 +36,19 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
   }
 
   return {
-    format (source: string, options?: Options) {
+    format(source: string, options?: Options) {
       return postMessage({ type: 'format', source, options })
     }
   }
 }
 
 export default defineNuxtPlugin({
-  async setup () {
+  async setup() {
     let prettier: SimplePrettier
     if (import.meta.server) {
       const prettierModule = await import('prettier')
       prettier = {
-        format (source, options = {
+        format(source, options = {
           parser: 'markdown'
         }) {
           return prettierModule.format(source, options)

docs/app/workers/prettier.js

@@ -10,14 +10,14 @@ self.onmessage = async function (event) {
   })
 }
 
-function handleMessage (message) {
+function handleMessage(message) {
   switch (message.type) {
     case 'format':
       return handleFormatMessage(message)
   }
 }
 
-async function handleFormatMessage (message) {
+async function handleFormatMessage(message) {
   const { options, source } = message
   const formatted = await prettier.format(source, {
     parser: 'markdown',