Embedded unstyled mode demo updates

components/doc/DocSectionCode.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative doc-section-code">
+    <div v-if="!embedded" class="relative doc-section-code">
         <div class="flex surface-card align-items-center justify-content-end absolute z-1" :style="{ right: '.75rem', top: '.75rem', gap: '.75rem' }">
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
                 <Button
@@ -111,6 +111,7 @@
 </code></pre>
         </template>
     </div>
+    <div v-else id="embed"></div>
 </template>
 
 <script>
@@ -154,6 +155,10 @@ export default {
         importCode: {
             type: Boolean,
             default: false
+        },
+        embedded: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -162,6 +167,9 @@ export default {
             codeLang: this.code['options'] ? 'composition' : 'basic'
         };
     },
+    mounted() {
+        this.embedded && useStackBlitz(this.codeLang, this.code['composition'], this.service, this.code.pages, this.dependencies, this.component, this.extFiles, this.embedded);
+    },
     methods: {
         toggleCodeMode(content) {
             this.codeMode = this.codeMode === 'basic' ? content : 'basic';

components/doc/codeeditor/index.js

@@ -28,9 +28,9 @@ const useCodeSandbox = (language, code, service, extPages, dependencies, compone
         .then((data) => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'));
 };
 
-const useStackBlitz = (language, code, service, extPages, dependencies, component, extFiles) => {
+const useStackBlitz = (language, code, service, extPages, dependencies, component, extFiles, embedded = false) => {
     const getStackBlitzParameters = (sourceType) => {
-        const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles }, sourceType);
+        const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles, embedded }, sourceType);
 
         return { files, dependenciesDemo, sourceFileName };
     };
@@ -41,20 +41,28 @@ const useStackBlitz = (language, code, service, extPages, dependencies, componen
 
     Object.entries(stackBlitzParameters.files).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content));
 
-    sdk.openProject(
+    const primevueproject = {
-        {
+        title: embedded ? 'PrimeVue Tailwind Demo' : 'PrimeVue Demo',
-            title: 'PrimeVue Demo',
         template: 'node',
-            description:
+        description: embedded
-                '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
+            ? "This example demonstrates how to style components with Tailwind CSS using PrimeVue's unstyled property. As mentioned in the PrimeVue documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
+            : '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
         dependencies: stackBlitzParameters.dependencies,
         files
-        },
+    };
-        {
+
+    if (embedded) {
+        sdk.embedProject('embed', primevueproject, {
+            openFile: 'src/main.js',
+            view: 'default',
+            height: '800px'
+        });
+    } else {
+        sdk.openProject(primevueproject, {
             newWindow: true,
             openFile: [stackBlitzParameters.sourceFileName]
+        });
     }
-    );
 };
 
 export { useCodeSandbox, useStackBlitz };

components/doc/codeeditor/templates.js

@@ -15,22 +15,23 @@ const core_dependencies = {
     '@vitejs/plugin-vue': '^4.0.0',
     vite: '^4.0.0',
     primevue: PrimeVue.version || 'latest',
-    primeflex: app_dependencies['primeflex'] || 'latest',
     primeicons: app_dependencies['primeicons'] || 'latest'
 };
 
 // create-vue -> https://github.com/vuejs/create-vue
 const getVueApp = (props = {}, sourceType) => {
     const path = 'src/';
-    const { code: sources, title = 'primevue_demo', description = '', service, extPages, dependencies: deps, component, extFiles } = props;
+    const { code: sources, title = 'primevue_demo', description = '', service, extPages, dependencies: deps, component, extFiles, embedded } = props;
     const dependencies = { ...core_dependencies, ...deps };
 
     const fileExtension = '.vue';
     const mainFileName = 'App';
     const sourceFileName = `${path}${mainFileName}${fileExtension}`;
-    let element = '';
+    let element = '',
-    let imports = '';
+        imports = '',
-    let routeFiles = {};
+        unstyled = '',
+        pvTheme = '',
+        routeFiles = {};
 
     sources.routeFiles &&
         Object.entries(sources.routeFiles).forEach(([key, value]) => {
@@ -52,6 +53,20 @@ const getVueApp = (props = {}, sourceType) => {
         element += `app.component('${component}', ${component});`;
     }
 
+    if (embedded) {
+        unstyled += `, unstyled: true, pt: Tailwind`;
+        imports += `import Tailwind from 'primevue/tailwind';`;
+
+        dependencies['tailwindcss'] = '^3.3.2';
+        dependencies['postcss'] = '^8.4.27';
+        dependencies['autoprefixer'] = '^10.4.14';
+    } else {
+        pvTheme += `import "primeflex/primeflex.css";
+import "primevue/resources/themes/lara-light-blue/theme.css";`;
+
+        dependencies['primeflex'] = app_dependencies['primeflex'] || 'latest';
+    }
+
     const files = {
         'package.json': {
             content: {
@@ -102,11 +117,10 @@ export default defineConfig({
 </html>`
         },
         [`${path}main.js`]: {
-            content: `import "primeflex/primeflex.css";
+            content: `${pvTheme}
-import "primevue/resources/themes/lara-light-blue/theme.css";
 import "primevue/resources/primevue.min.css"; /* Deprecated */
 import "primeicons/primeicons.css";
-import "./index.css";
+import "./style.css";
 import "./flags.css";
 
 import { createApp } from "vue";
@@ -213,7 +227,7 @@ ${imports}
 
 const app = createApp(App);
 
-app.use(PrimeVue, { ripple: true });
+app.use(PrimeVue, { ripple: true ${unstyled} });
 app.use(ConfirmationService);
 app.use(ToastService);
 app.use(DialogService);
@@ -318,8 +332,8 @@ ${element}
 app.mount("#app");
 `
         },
-        [`${path}index.css`]: {
+        [`${path}style.css`]: {
-            content: staticStyles.global
+            content: embedded ? tailwindConfig : staticStyles.global
         },
         [`${path}flags.css`]: {
             content: staticStyles.flags
@@ -400,6 +414,31 @@ routes: [ ${routePaths}]
         });
     }
 
+    if (embedded) {
+        files['tailwind.config.js'] = {
+            content: `/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx}"
+    ],
+    theme: {
+        extend: {}
+    },
+    plugins: []
+}`
+        };
+
+        files['postcss.config.js'] = {
+            content: `module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+}`
+        };
+    }
+
     return { files, dependencies, sourceFileName };
 };
 
@@ -427,4 +466,9 @@ body {
     `
 };
 
+const tailwindConfig = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`;
+
 export { getVueApp };

doc/checkbox/theming/UnstyledDoc.vue

@@ -2,4 +2,29 @@
     <DocSectionText v-bind="$attrs">
         <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
     </DocSectionText>
+    <DocSectionCode :code="code" embedded />
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Checkbox v-model="checked" :binary="true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>