@md-plugins/quasar-app-extension-q-press 0.1.0-beta.10 → 0.1.0-beta.12

package/README.md

@@ -4,9 +4,9 @@ The Ultimate Markdown Solution for the Quasar Framework.
 
 See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpress/overview) for more information.
 
-> Current beta release: `0.1.0-beta.10`.
+> Current beta release: `0.1.0-beta.12`.
 >
-> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.29`. TypeScript processing is required.
+> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.30`. TypeScript processing is required.
 
 ## Features
 
@@ -38,12 +38,14 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
 - `npm i -D markdown-it @types/markdown-it`
 - `yarn add -D markdown-it @types/markdown-it`
 - `pnpm i -D markdown-it @types/markdown-it`
+- `bun add -d markdown-it @types/markdown-it`
 
 3. Add `prismjs` to your project dependencies
 
 - `npm i prismjs`
 - `yarn add prismjs`
 - `pnpm add prismjs`
+- `bun add prismjs`
 
 ## Modifications
 

package/dist/templates/init/src/_q-press/components/MarkdownApi.vue

@@ -55,7 +55,10 @@
         <q-tab v-for="tab in tabsList" :key="`api-tab-${tab}`" :name="tab" class="header-btn">
           <div class="row no-wrap items-center">
             <span class="q-mr-xs text-capitalize">{{ tab }}</span>
-            <q-badge v-if="filteredApiCount[tab].overall" :label="filteredApiCount[tab].overall" />
+            <q-badge
+              v-if="filteredApiCount[tab]?.overall"
+              :label="filteredApiCount[tab]?.overall"
+            />
           </div>
         </q-tab>
       </q-tabs>
@@ -64,7 +67,10 @@
 
       <q-tab-panels v-model="currentTab" animated>
         <q-tab-panel v-for="tab in tabsList" :key="tab" class="q-pa-none" :name="tab">
-          <div v-if="innerTabsList[tab].length !== 1" class="markdown-api__container row no-wrap">
+          <div
+            v-if="innerTabsList[tab]?.length !== 1"
+            class="markdown-api__container row no-wrap"
+          >
             <div class="col-auto">
               <q-tabs
                 v-model="currentInnerTab"
@@ -86,8 +92,8 @@
                     <span class="q-mr-xs text-capitalize">{{ innerTab }}</span>
                     <div class="col" />
                     <q-badge
-                      v-if="filteredApiCount[tab].category[innerTab]"
-                      :label="filteredApiCount[tab].category[innerTab]"
+                      v-if="filteredApiCount[tab]?.category[innerTab]"
+                      :label="filteredApiCount[tab]?.category[innerTab]"
                     />
                   </div>
                 </q-tab>
@@ -109,12 +115,12 @@
                 class="q-pa-none"
                 :name="innerTab"
               >
-                <MarkdownApiEntry :type="tab" :definition="filteredApi[tab][innerTab]" />
+                <MarkdownApiEntry :type="tab" :definition="filteredApi[tab]?.[innerTab]" />
               </q-tab-panel>
             </q-tab-panels>
           </div>
           <div v-else class="markdown-api__container">
-            <MarkdownApiEntry :type="tab" :definition="filteredApi[tab][defaultInnerTabName]" />
+            <MarkdownApiEntry :type="tab" :definition="filteredApi[tab]?.[defaultInnerTabName]" />
           </div>
         </q-tab-panel>
       </q-tab-panels>
@@ -131,20 +137,57 @@ import MarkdownApiEntry from './MarkdownApiEntry'
 
 const defaultInnerTabName = '__default'
 
+type ApiEntry = Record<string, any> & {
+  category?: string
+  definition?: Record<string, ApiEntry>
+  desc?: string
+  propName?: string
+}
+
+type ApiDefinition = Record<string, ApiEntry>
+type ParsedApi = Record<string, Record<string, any>>
+type InnerTabsMap = Record<string, string[]>
+type ApiCount = Record<string, { overall: number; category: Record<string, number> }>
+
+type ApiFile = Record<string, any> & {
+  addedIn?: string
+  behavior?: unknown
+  internal?: unknown
+  meta?: {
+    docsUrl?: string
+  }
+  type?: string
+}
+
+type MarkdownApiProps = {
+  api?: ApiFile | null
+  file?: string
+  name?: string
+  pageLink?: boolean
+}
+
+type QPressEnv = {
+  QCLI_FS_QUASAR_FOLDER?: string
+  QUASAR_CLIENT?: boolean
+  QUASAR_DEV?: boolean
+}
+
+const qPressEnv = (import.meta as ImportMeta & { env: QPressEnv }).env
+
 /**
  * Extracts and categorizes properties based on their categories.
  *
  * @param {Object} props - The properties object where each key is a property name and each value is an object containing a `category` string.
  * @returns {Array<string>} - An array of unique category names sorted alphabetically. If there is only one unique category, returns an array with a default inner tab name.
  */
-function getPropsCategories(props) {
-  const acc = new Set()
+function getPropsCategories(props: ApiDefinition | undefined): string[] {
+  const acc = new Set<string>()
 
-  for (const key in props) {
+  for (const key in props ?? {}) {
     if (props[key] !== void 0) {
       const value = props[key]
 
-      value.category.split('|').forEach((groupKey) => {
+      ;(value.category ?? defaultInnerTabName).split('|').forEach((groupKey: string) => {
         acc.add(groupKey)
       })
     }
@@ -161,10 +204,10 @@ function getPropsCategories(props) {
  * @param {string} apiType - The type of the API.
  * @returns {Array} - The array of inner tabs.
  */
-function getInnerTabs(api, tabs, apiType) {
-  const acc = {}
+function getInnerTabs(api: ApiFile, tabs: string[], apiType?: string): InnerTabsMap {
+  const acc: InnerTabsMap = {}
 
-  tabs.forEach((tab) => {
+  tabs.forEach((tab: string) => {
     acc[tab] =
       apiType === 'component' && tab === 'props'
         ? getPropsCategories(api[tab])
@@ -181,16 +224,17 @@ function getInnerTabs(api, tabs, apiType) {
  * @param {Array} tabs - The array to store the main tabs.
  * @param {Array} innerTabs - The array to store the inner tabs.
  */
-function parseApi(api, tabs, innerTabs) {
-  const acc = {}
+function parseApi(api: ApiFile, tabs: string[], innerTabs: InnerTabsMap): ParsedApi {
+  const acc: ParsedApi = {}
 
-  tabs.forEach((tab) => {
+  tabs.forEach((tab: string) => {
     const apiValue = api[tab]
+    const tabInnerTabs = innerTabs[tab] ?? [defaultInnerTabName]
 
-    if (innerTabs[tab].length > 1) {
-      const inner = {}
+    if (tabInnerTabs.length > 1) {
+      const inner: Record<string, ApiDefinition> = {}
 
-      innerTabs[tab].forEach((subTab) => {
+      tabInnerTabs.forEach((subTab: string) => {
         inner[subTab] = {}
       })
 
@@ -198,8 +242,10 @@ function parseApi(api, tabs, innerTabs) {
         if (apiValue[key] !== void 0) {
           const value = apiValue[key]
 
-          value.category.split('|').forEach((groupKey) => {
-            inner[groupKey][key] = value
+          ;(value.category ?? defaultInnerTabName).split('|').forEach((groupKey: string) => {
+            if (inner[groupKey] !== undefined) {
+              inner[groupKey][key] = value
+            }
           })
         }
       }
@@ -222,7 +268,7 @@ function parseApi(api, tabs, innerTabs) {
  * @param {string} desc - The description of the item to check.
  * @returns {boolean} - Returns true if the item passes the filter, otherwise false.
  */
-function passesFilter(filter, name, desc) {
+function passesFilter(filter: string, name: string, desc?: string): boolean {
   return (
     name.toLowerCase().indexOf(filter) > -1 ||
     (desc !== void 0 && desc.toLowerCase().indexOf(filter) > -1)
@@ -238,23 +284,29 @@ function passesFilter(filter, name, desc) {
  * @param {Array} innerTabs - The list of inner tabs to consider while filtering.
  * @returns {Object} - The filtered API data.
  */
-function getFilteredApi(parsedApi, filter, tabs, innerTabs) {
+function getFilteredApi(
+  parsedApi: ParsedApi,
+  filter: string,
+  tabs: string[],
+  innerTabs: InnerTabsMap,
+): ParsedApi {
   if (filter === '') {
     return parsedApi
   }
 
-  const acc = {}
+  const acc: ParsedApi = {}
 
-  tabs.forEach((tab) => {
+  tabs.forEach((tab: string) => {
     if (tab === 'injection') {
-      const name = parsedApi[tab][defaultInnerTabName]
+      const name = parsedApi[tab]?.[defaultInnerTabName]
       acc[tab] = {}
-      acc[tab][defaultInnerTabName] = passesFilter(filter, name, '') === true ? name : {}
+      acc[tab][defaultInnerTabName] =
+        typeof name === 'string' && passesFilter(filter, name, '') === true ? name : {}
       return
     }
 
     if (tab === 'quasarConfOptions') {
-      const api = parsedApi[tab][defaultInnerTabName]
+      const api = (parsedApi[tab]?.[defaultInnerTabName] ?? {}) as ApiEntry
       acc[tab] = {}
       acc[tab][defaultInnerTabName] = {
         ...api,
@@ -262,8 +314,8 @@ function getFilteredApi(parsedApi, filter, tabs, innerTabs) {
       }
       const result = acc[tab][defaultInnerTabName]
 
-      for (const name in api.definition || {}) {
-        const entry = api.definition[name]
+      for (const name in api.definition ?? {}) {
+        const entry = api.definition[name]!
         if (passesFilter(filter, name, entry.desc) === true) {
           result.definition[name] = entry
         }
@@ -279,17 +331,17 @@ function getFilteredApi(parsedApi, filter, tabs, innerTabs) {
       return
     }
 
-    const tabApi = parsedApi[tab]
-    const tabCategories = innerTabs[tab]
+    const tabApi = parsedApi[tab] ?? {}
+    const tabCategories = innerTabs[tab] ?? [defaultInnerTabName]
 
     acc[tab] = {}
-    tabCategories.forEach((categ) => {
-      const subTabs = {}
-      const categoryEntries = tabApi[categ]
+    tabCategories.forEach((categ: string) => {
+      const subTabs: ApiDefinition = {}
+      const categoryEntries = (tabApi[categ] ?? {}) as ApiDefinition
 
       for (const name in categoryEntries) {
         const entry = categoryEntries[name]
-        if (passesFilter(filter, name, entry.desc) === true) {
+        if (entry !== undefined && passesFilter(filter, name, entry.desc) === true) {
           subTabs[name] = entry
         }
       }
@@ -309,22 +361,24 @@ function getFilteredApi(parsedApi, filter, tabs, innerTabs) {
  * @param {Array} innerTabs - The array of inner tab configurations.
  * @returns {number} - The count of API entries.
  */
-function getApiCount(parsedApi, tabs, innerTabs) {
-  const acc = {}
+function getApiCount(parsedApi: ParsedApi, tabs: string[], innerTabs: InnerTabsMap): ApiCount {
+  const acc: ApiCount = {}
 
-  tabs.forEach((tab) => {
-    const tabApi = parsedApi[tab]
-    const tabCategories = innerTabs[tab]
+  tabs.forEach((tab: string) => {
+    const tabApi = parsedApi[tab] ?? {}
+    const tabCategories = innerTabs[tab] ?? [defaultInnerTabName]
+    const firstCategory = tabCategories[0] ?? defaultInnerTabName
 
     if (['value', 'arg', 'injection'].includes(tab)) {
       acc[tab] = {
-        overall: Object.keys(tabApi[tabCategories[0]]).length === 0 ? 0 : 1,
+        overall: Object.keys(tabApi[firstCategory] ?? {}).length === 0 ? 0 : 1,
+        category: {},
       }
       return
     }
 
     if (tab === 'quasarConfOptions') {
-      const api = tabApi[tabCategories[0]]
+      const api = (tabApi[firstCategory] ?? {}) as ApiEntry
       acc[tab] = {
         overall:
           Object.keys(api).length === 0
@@ -332,25 +386,24 @@ function getApiCount(parsedApi, tabs, innerTabs) {
             : api.definition === void 0
               ? 1
               : Object.keys(api.definition).length,
+        category: {},
       }
       return
     }
 
-    acc[tab] = { overall: 0 }
+    acc[tab] = { overall: 0, category: {} }
 
     if (tabCategories.length === 1) {
-      const categ = tabCategories[0]
-      const count = Object.keys(tabApi[categ]).length
+      const categ = tabCategories[0] ?? defaultInnerTabName
+      const count = Object.keys(tabApi[categ] ?? {}).length
 
       acc[tab] = {
         overall: count,
         category: { [categ]: count },
       }
     } else {
-      acc[tab].category = {}
-
-      tabCategories.forEach((categ) => {
-        const count = Object.keys(tabApi[categ]).length
+      tabCategories.forEach((categ: string) => {
+        const count = Object.keys(tabApi[categ] ?? {}).length
         acc[tab].category[categ] = count
         acc[tab].overall += count
       })
@@ -361,29 +414,18 @@ function getApiCount(parsedApi, tabs, innerTabs) {
 }
 
 const getJsonUrl =
-  import.meta.env.QUASAR_DEV === true
-    ? (file) => `/@fs/${import.meta.env.QCLI_FS_QUASAR_FOLDER}/dist/api/${file}.json`
-    : (file) => `/quasar-api/${file}.json`
-
-const props = defineProps({
-  file: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  api: {
-    type: Object,
-    required: false,
-    default: null,
-  },
-  name: {
-    type: String,
-    default: 'API Documentation',
-  },
-  pageLink: Boolean,
+  qPressEnv.QUASAR_DEV === true
+    ? (file: string) => `/@fs/${qPressEnv.QCLI_FS_QUASAR_FOLDER ?? ''}/dist/api/${file}.json`
+    : (file: string) => `/quasar-api/${file}.json`
+
+const props = withDefaults(defineProps<MarkdownApiProps>(), {
+  api: null,
+  file: '',
+  name: 'API Documentation',
+  pageLink: false,
 })
 
-const inputRef = ref(null)
+const inputRef = ref<HTMLInputElement | null>(null)
 
 const loading = ref(true)
 const nameBanner = ref(`Loading ${props.file || props.name} API...`)
@@ -392,16 +434,16 @@ const nothingToShow = ref(false)
 const apiPath = ref('')
 
 const filter = ref('')
-const apiDef = ref({})
+const apiDef = ref<ParsedApi>({})
 
-const tabsList = ref([])
-const innerTabsList = ref({})
+const tabsList = ref<string[]>([])
+const innerTabsList = ref<InnerTabsMap>({})
 
-const currentTab = ref(null)
-const currentInnerTab = ref(null)
+const currentTab = ref('')
+const currentInnerTab = ref('')
 
 watch(currentTab, (val) => {
-  currentInnerTab.value = innerTabsList.value[val][0]
+  currentInnerTab.value = innerTabsList.value[val]?.[0] ?? defaultInnerTabName
 })
 
 const inputIcon = computed(() => (filter.value !== '' ? mdiClose : mdiMagnify))
@@ -436,11 +478,14 @@ const filteredApiCount = computed(() =>
  * @param {Object} api - Additional API properties.
  * @returns {Object} The parsed API information.
  */
-function parseApiFile(name, { type, behavior, meta, addedIn, ...api }) {
+function parseApiFile(
+  name: string,
+  { type, behavior: _behavior, meta, addedIn: _addedIn, ...api }: ApiFile,
+) {
   nameBanner.value = `${name} API`
-  apiPath.value = meta.docsUrl
+  apiPath.value = meta?.docsUrl ?? ''
 
-  const { internal: _, ...apiSections } = api
+  const { internal: _internal, ...apiSections } = api
   const tabs = Object.keys(apiSections)
 
   if (tabs.length === 0) {
@@ -457,7 +502,7 @@ function parseApiFile(name, { type, behavior, meta, addedIn, ...api }) {
 }
 
 function onSearchFieldClick() {
-  inputRef.value.focus()
+  inputRef.value?.focus()
 }
 
 function onFilterClick() {
@@ -466,12 +511,12 @@ function onFilterClick() {
   }
 }
 
-if (import.meta.env.QUASAR_CLIENT) {
+if (qPressEnv.QUASAR_CLIENT === true) {
   onMounted(() => {
     if (props.file) {
       fetch(getJsonUrl(props.file))
         .then((response) => response.json())
-        .then((json) => {
+        .then((json: ApiFile) => {
           parseApiFile(props.file, json)
           loading.value = false
         })

package/dist/templates/init/src/_q-press/components/MarkdownCodepen.vue

@@ -26,6 +26,11 @@ type CodepenParts = {
   [key: string]: string | undefined
 }
 
+type CodepenGlobalPackage = {
+  packageName: string
+  globalName: string
+}
+
 const defaultCssResources = [
   'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons',
   `https://cdn.jsdelivr.net/npm/quasar@${Quasar.version}/dist/quasar.min.css`,
@@ -44,22 +49,59 @@ function indent(code: string, spaces = 2) {
     .join('\n')
 }
 
-function getImportNames(content: string, packageName: string) {
-  const names = new Set<string>()
-  const importRe = new RegExp(`import\\s+{([^}'"\\n]+)}\\s+from\\s+['"]${packageName}['"];?`, 'g')
+function getImportParts(content: string, packageName: string) {
+  const parts: { importName: string; bindingName: string }[] = []
+  const escapedPackageName = packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const importRe = new RegExp(
+    `import\\s+(?!type\\b){([^}]*)}\\s+from\\s+['"]${escapedPackageName}['"];?`,
+    'g',
+  )
   let match: RegExpExecArray | null
 
   while ((match = importRe.exec(content)) !== null) {
-    for (const part of match[1].split(',')) {
-      const name = part.trim().replace(/\s+as\s+/g, ': ')
+    for (const part of (match[1] ?? '').split(',')) {
+      const rawName = part.trim()
 
-      if (name.length > 0) {
-        names.add(name)
+      if (rawName.length === 0 || rawName.startsWith('type ')) {
+        continue
+      }
+
+      const [importName, bindingName = importName] = rawName.split(/\s+as\s+/)
+
+      if (importName !== undefined && importName.length > 0) {
+        parts.push({
+          importName,
+          bindingName,
+        })
       }
     }
   }
 
-  return [...names]
+  return parts
+}
+
+function getImportNames(content: string, packageName: string) {
+  return [
+    ...new Set(
+      getImportParts(content, packageName).map(({ importName, bindingName }) =>
+        importName === bindingName ? importName : `${importName}: ${bindingName}`,
+      ),
+    ),
+  ]
+}
+
+function getImportBindingNames(content: string, packageName: string) {
+  return [...new Set(getImportParts(content, packageName).map(({ bindingName }) => bindingName))]
+}
+
+function getGlobalPackageImportLines(content: string) {
+  return (siteConfig.codepen?.globalPackages ?? [])
+    .map(({ packageName, globalName }: CodepenGlobalPackage) => {
+      const imports = getImportNames(content, packageName)
+
+      return imports.length > 0 ? `const { ${imports.join(', ')} } = ${globalName}` : ''
+    })
+    .filter((line) => line.length > 0)
 }
 
 function getGlobalImportLines(content: string) {
@@ -69,9 +111,20 @@ function getGlobalImportLines(content: string) {
   return [
     vueImports.length > 0 ? `const { ${vueImports.join(', ')} } = Vue` : '',
     quasarImports.length > 0 ? `const { ${quasarImports.join(', ')} } = Quasar` : '',
+    ...getGlobalPackageImportLines(content),
   ].filter((line) => line.length > 0)
 }
 
+function getGlobalImportBindingNames(content: string) {
+  return [
+    ...getImportBindingNames(content, 'vue'),
+    ...getImportBindingNames(content, 'quasar'),
+    ...(siteConfig.codepen?.globalPackages ?? []).flatMap(({ packageName }: CodepenGlobalPackage) =>
+      getImportBindingNames(content, packageName),
+    ),
+  ]
+}
+
 function stripImports(content: string) {
   return content
     .replace(/^\s*import\s+type\s+[\s\S]*?\s+from\s+['"][^'"]+['"];?\s*$/gm, '')
@@ -101,21 +154,53 @@ function getScriptBlock(script: string, setup: boolean) {
 
 function getSetupReturnNames(content: string) {
   const names = new Set<string>()
-  const declarationRe = /(?:^|\n)\s*(?:const|let|var)\s+([A-Za-z_$][\w$]*)/g
+  const topLevelContent = getTopLevelContent(content)
+  const declarationRe =
+    /(?:^|\n)\s*(?:const|let|var)\s+([\s\S]*?)(?=\n\s*(?:const|let|var|function|interface|type|class)\s+|\s*$)/g
+  const variableNameRe = /(?:^|\n)\s*([A-Za-z_$][\w$]*)\s*(?:[:=,]|$)/g
   const functionRe = /(?:^|\n)\s*function\s+([A-Za-z_$][\w$]*)/g
   let match: RegExpExecArray | null
 
-  while ((match = declarationRe.exec(content)) !== null) {
-    names.add(match[1])
+  while ((match = declarationRe.exec(topLevelContent)) !== null) {
+    let variableMatch: RegExpExecArray | null
+
+    while ((variableMatch = variableNameRe.exec(match[1] ?? '')) !== null) {
+      if (variableMatch[1] !== undefined) {
+        names.add(variableMatch[1])
+      }
+    }
   }
 
-  while ((match = functionRe.exec(content)) !== null) {
-    names.add(match[1])
+  while ((match = functionRe.exec(topLevelContent)) !== null) {
+    if (match[1] !== undefined) {
+      names.add(match[1])
+    }
   }
 
   return [...names]
 }
 
+function getTopLevelContent(content: string) {
+  let depth = 0
+  let output = ''
+
+  for (const char of content) {
+    if (depth === 0 || char === '\n') {
+      output += char
+    } else {
+      output += ' '
+    }
+
+    if (char === '{') {
+      depth++
+    } else if (char === '}') {
+      depth = Math.max(0, depth - 1)
+    }
+  }
+
+  return output
+}
+
 function getAppSetup() {
   return ['app.use(Quasar, { config: {} })', siteConfig.codepen?.jsSetup ?? '']
     .map((line) => line.trim())
@@ -127,7 +212,9 @@ function createSetupScript(script: string) {
   const { content } = getScriptBlock(script, true)
   const globalImports = getGlobalImportLines(content)
   const setupContent = stripCompilerMacros(stripImports(content))
-  const returnNames = getSetupReturnNames(setupContent)
+  const returnNames = [
+    ...new Set([...getGlobalImportBindingNames(content), ...getSetupReturnNames(setupContent)]),
+  ]
   const setupBody = [
     setupContent.length > 0 ? indent(setupContent, 4) : '',
     returnNames.length > 0 ? `    return { ${returnNames.join(', ')} }` : '',
@@ -172,7 +259,7 @@ function createOptionsScript(script: string) {
 const props = defineProps({ title: { type: String, required: true } })
 
 const active = ref(false)
-const formRef = ref(null)
+const formRef = ref<HTMLFormElement | null>(null)
 const def = reactive<{ parts: CodepenParts }>({ parts: {} })
 
 const cssResources = computed(() => {
@@ -216,7 +303,10 @@ const html = computed(() => {
     .replace(/([\w]+=")([^"]*?)(")/g, function (match, p1, p2, p3) {
       return p1 + p2.replace(/>/g, '___TEMP_REPLACEMENT___') + p3
     })
-    .replace(/<(q-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs, '<$1$2$3></$1>')
+    .replace(
+      /<([A-Z][\w-]*|[a-z][\w]*-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs,
+      '<$1$2$3></$1>',
+    )
     .replace(
       /(<template[^>]*>)(\s*?(?:[\n\r][\t ]+)?)<(thead|tbody|tfoot)/gs,
       '$1$2<___PREVENT_TEMPLATE___$3',
@@ -244,15 +334,20 @@ const html = computed(() => {
 })
 
 const editors = computed(() => {
-  const flag = (html.value && 0b100) | (css.value && 0b010) | (js.value && 0b001)
+  const flag =
+    (html.value.length > 0 ? 0b100 : 0) |
+    (css.value.length > 0 ? 0b010 : 0) |
+    (js.value.length > 0 ? 0b001 : 0)
   return flag.toString(2)
 })
 
 const computedTitle = computed(() => {
+  const titleSuffix = siteConfig.codepen?.titleSuffix ?? `Quasar v${Quasar.version}`
+
   return (
     (typeof document !== 'undefined' ? document.title.split(' | ')[0] + ': ' : '') +
     (props.title ? props.title + ' - ' : '') +
-    `Quasar v${Quasar.version}`
+    titleSuffix
   )
 })
 
@@ -298,14 +393,14 @@ function open(whichParts: CodepenParts) {
   def.parts = whichParts
 
   if (active.value) {
-    formRef.value.submit()
+    formRef.value?.submit()
     return
   }
 
   active.value = true
 
   nextTick(() => {
-    formRef.value.submit()
+    formRef.value?.submit()
   })
 }
 

package/dist/templates/init/src/_q-press/components/MarkdownExample.vue

@@ -96,7 +96,7 @@
 import { computed, inject, markRaw, ref, reactive, onBeforeUnmount, onMounted } from 'vue'
 import { openURL } from 'quasar'
 
-import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v6'
+import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v7'
 // import { mdiCompare } from '@quasar/extras/mdi-v7'
 
 import MarkdownCode from './MarkdownCode.vue'

package/dist/templates/init/src/_q-press/components/MarkdownLink.vue

@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { mdiLaunch } from '@quasar/extras/mdi-v6'
+import { mdiLaunch } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({ to: { type: String, required: true } })
 const internal = computed(