vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Embedded unstyled mode demo updates

pull/4224/head
Tuğçe Küçükoğlu 2023-07-25 22:30:22 +03:00
parent f99d90bbe6
commit daaec94637
4 changed files with 115 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/doc/DocSectionCode.vue
View File

@ -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';

36
components/doc/codeeditor/index.js
View File

@ -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(
{
title: 'PrimeVue Demo',
template: 'node',
description:
'**\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
},
{
const primevueproject = {
title: embedded ? 'PrimeVue Tailwind Demo' : 'PrimeVue Demo',
template: 'node',
description: embedded
? "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 };

74
components/doc/codeeditor/templates.js
View File

@ -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 imports = '';
let routeFiles = {};
let element = '',
imports = '',
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";
import "primevue/resources/themes/lara-light-blue/theme.css";
content: `${pvTheme}
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`]: {
content: staticStyles.global
[`${path}style.css`]: {
content: embedded ? tailwindConfig : staticStyles.global
},
[`${path}flags.css`]: {
content: staticStyles.flags
@ -329,8 +343,8 @@ app.mount("#app");
import ${mainFileName} from "./${mainFileName}${fileExtension}";
export const router = createRouter({
history: createWebHistory(),
routes: [{ path: "/", component: ${mainFileName} }]
history: createWebHistory(),
routes: [{ path: "/", component: ${mainFileName} }]
});`
},
[`${sourceFileName}`]: {
@ -386,8 +400,8 @@ routes: [{ path: "/", component: ${mainFileName} }]
content: `import { createRouter, createWebHistory } from "vue-router";
${viewImports}
export const router = createRouter({
history: createWebHistory(),
routes: [ ${routePaths}]
history: createWebHistory(),
routes: [ ${routePaths}]
});`
};
}
@ -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 };

25
doc/checkbox/theming/UnstyledDoc.vue
View File

@ -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>