2023-02-28 08:29:30 +00:00
import pkg from '../../../package.json' ;
import { services } from './services' ;
const PrimeVue = {
version : '^3.23.0' ,
description :
'PrimeVue is an open source UI library for Vue featuring a rich set of 80+ 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 370+ ready to use UI blocks to build spectacular applications in no time.'
} ;
const app _dependencies = pkg ? pkg . devDependencies : { } ;
const core _dependencies = {
vue : '^3.2.45' ,
'vue-router' : '^4.1.6' ,
'@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 dependencies = { ... core _dependencies , ... deps } ;
const fileExtension = '.vue' ;
const mainFileName = 'App' ;
const sourceFileName = ` ${ path } ${ mainFileName } ${ fileExtension } ` ;
let element = '' ;
let imports = '' ;
let routeFiles = { } ;
sources . routeFiles &&
Object . entries ( sources . routeFiles ) . forEach ( ( [ key , value ] ) => {
routeFiles [ ` ${ path + key } ` ] = {
content : value
} ;
} ) ;
let extFilesSource = extFiles
? extFiles [ sourceType . language ]
? { ... extFiles [ sourceType . language ] }
: Object . keys ( extFiles )
. filter ( ( k ) => ! sourceTypes . includes ( k ) )
. reduce ( ( result , current ) => ( result [ current ] = extFiles [ current ] ) && result , { } )
: { } ;
if ( deps !== null && component !== null ) {
imports += ` import ${ component } from 'primevue/ ${ component . toLowerCase ( ) } '; ` ;
element += ` app.component(' ${ component } ', ${ component } ); ` ;
}
const files = {
'package.json' : {
content : {
name : title . toLowerCase ( ) . replaceAll ( ' ' , '_' ) ,
description : ` ** ${ description } ** ${ PrimeVue . description } ` ,
keywords : [ ] ,
scripts : {
dev : 'vite' ,
build : 'vite build' ,
preview : 'vite preview'
} ,
2023-03-02 13:49:29 +00:00
dependencies ,
main : 'src/App.vue'
2023-02-28 08:29:30 +00:00
}
} ,
'vite.config.js' : {
content : ` import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite' ;
import vue from '@vitejs/plugin-vue' ;
// https://vitejs.dev/config/
export default defineConfig ( {
plugins : [ vue ( ) ] ,
resolve : {
alias : {
'@' : fileURLToPath ( new URL ( './src' , import . meta . url ) )
}
}
} ) ; `
} ,
'index.html' : {
content : ` <!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< meta name = "theme-color" content = "#000000" / >
< meta name = "description" content = "**${description}** ${PrimeVue.description}" / >
<!-- Added to show icons in the editor -- >
< link rel = "stylesheet" href = "https://unpkg.com/primeicons@${dependencies['primeicons'].replace(/[\^|~]/gi, '')}/primeicons.css" >
< title > PrimeVue App < / t i t l e >
< / h e a d >
< body >
< div id = "app" > < / d i v >
< script type = "module" src = "/src/main.js" > < / s c r i p t >
< / b o d y >
< / h t m l > `
} ,
[ ` ${ path } main.js ` ] : {
content : ` import "primeflex/primeflex.css";
import "primevue/resources/themes/lara-light-blue/theme.css" ;
import "primevue/resources/primevue.min.css" ;
import "primeicons/primeicons.css" ;
import "./index.css" ;
import "./flags.css" ;
import { createApp } from "vue" ;
import App from "./App.vue" ;
import { router } from "./router" ;
import PrimeVue from "primevue/config" ;
import AutoComplete from 'primevue/autocomplete' ;
import Accordion from 'primevue/accordion' ;
import AccordionTab from 'primevue/accordiontab' ;
import Avatar from 'primevue/avatar' ;
import AvatarGroup from 'primevue/avatargroup' ;
import Badge from 'primevue/badge' ;
import BadgeDirective from "primevue/badgedirective" ;
import BlockUI from 'primevue/blockui' ;
import Button from 'primevue/button' ;
import Breadcrumb from 'primevue/breadcrumb' ;
import Calendar from 'primevue/calendar' ;
import Card from 'primevue/card' ;
import CascadeSelect from 'primevue/cascadeselect' ;
import Carousel from 'primevue/carousel' ;
import Checkbox from 'primevue/checkbox' ;
import Chip from 'primevue/chip' ;
import Chips from 'primevue/chips' ;
import ColorPicker from 'primevue/colorpicker' ;
import Column from 'primevue/column' ;
import ColumnGroup from 'primevue/columngroup' ;
import ConfirmDialog from 'primevue/confirmdialog' ;
import ConfirmPopup from 'primevue/confirmpopup' ;
import ConfirmationService from 'primevue/confirmationservice' ;
import ContextMenu from 'primevue/contextmenu' ;
import DataTable from 'primevue/datatable' ;
import DataView from 'primevue/dataview' ;
import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions' ;
import DeferredContent from 'primevue/deferredcontent' ;
import Dialog from 'primevue/dialog' ;
import DialogService from 'primevue/dialogservice'
import Divider from 'primevue/divider' ;
import Dock from 'primevue/dock' ;
import Dropdown from 'primevue/dropdown' ;
import DynamicDialog from 'primevue/dynamicdialog' ;
import Fieldset from 'primevue/fieldset' ;
import FileUpload from 'primevue/fileupload' ;
import FocusTrap from 'primevue/focustrap' ;
import Galleria from 'primevue/galleria' ;
import Image from 'primevue/image' ;
import InlineMessage from 'primevue/inlinemessage' ;
import Inplace from 'primevue/inplace' ;
import InputSwitch from 'primevue/inputswitch' ;
import InputText from 'primevue/inputtext' ;
import InputMask from 'primevue/inputmask' ;
import InputNumber from 'primevue/inputnumber' ;
import Knob from 'primevue/knob' ;
import Listbox from 'primevue/listbox' ;
import MegaMenu from 'primevue/megamenu' ;
import Menu from 'primevue/menu' ;
import Menubar from 'primevue/menubar' ;
import Message from 'primevue/message' ;
import MultiSelect from 'primevue/multiselect' ;
import OrderList from 'primevue/orderlist' ;
import OrganizationChart from 'primevue/organizationchart' ;
import OverlayPanel from 'primevue/overlaypanel' ;
import Paginator from 'primevue/paginator' ;
import Panel from 'primevue/panel' ;
import PanelMenu from 'primevue/panelmenu' ;
import Password from 'primevue/password' ;
import PickList from 'primevue/picklist' ;
import ProgressBar from 'primevue/progressbar' ;
import ProgressSpinner from 'primevue/progressspinner' ;
import Rating from 'primevue/rating' ;
import RadioButton from 'primevue/radiobutton' ;
import Ripple from 'primevue/ripple' ;
import Row from 'primevue/row' ;
import SelectButton from 'primevue/selectbutton' ;
import ScrollPanel from 'primevue/scrollpanel' ;
import ScrollTop from 'primevue/scrolltop' ;
import Skeleton from 'primevue/skeleton' ;
import Slider from 'primevue/slider' ;
import Sidebar from 'primevue/sidebar' ;
import SpeedDial from 'primevue/speeddial' ;
import SplitButton from 'primevue/splitbutton' ;
import Splitter from 'primevue/splitter' ;
import SplitterPanel from 'primevue/splitterpanel' ;
import Steps from 'primevue/steps' ;
import StyleClass from 'primevue/styleclass' ;
import TabMenu from 'primevue/tabmenu' ;
import TieredMenu from 'primevue/tieredmenu' ;
import Textarea from 'primevue/textarea' ;
import Toast from 'primevue/toast' ;
import ToastService from 'primevue/toastservice' ;
import Toolbar from 'primevue/toolbar' ;
import TabView from 'primevue/tabview' ;
import TabPanel from 'primevue/tabpanel' ;
import Tag from 'primevue/tag' ;
import Terminal from 'primevue/terminal' ;
import Timeline from 'primevue/timeline' ;
import ToggleButton from 'primevue/togglebutton' ;
import Tooltip from 'primevue/tooltip' ;
import Tree from 'primevue/tree' ;
import TreeSelect from 'primevue/treeselect' ;
import TreeTable from 'primevue/treetable' ;
import TriStateCheckbox from 'primevue/tristatecheckbox' ;
import VirtualScroller from 'primevue/virtualscroller' ;
$ { imports }
const app = createApp ( App ) ;
app . use ( PrimeVue , { ripple : true } ) ;
app . use ( ConfirmationService ) ;
app . use ( ToastService ) ;
app . use ( DialogService ) ;
app . use ( router ) ;
app . directive ( 'tooltip' , Tooltip ) ;
app . directive ( 'badge' , BadgeDirective ) ;
app . directive ( 'ripple' , Ripple ) ;
app . directive ( 'styleclass' , StyleClass ) ;
app . directive ( 'focustrap' , FocusTrap ) ;
app . component ( 'Accordion' , Accordion ) ;
app . component ( 'AccordionTab' , AccordionTab ) ;
app . component ( 'AutoComplete' , AutoComplete ) ;
app . component ( 'Avatar' , Avatar ) ;
app . component ( 'AvatarGroup' , AvatarGroup ) ;
app . component ( 'Badge' , Badge ) ;
app . component ( 'BlockUI' , BlockUI ) ;
app . component ( 'Breadcrumb' , Breadcrumb ) ;
app . component ( 'Button' , Button ) ;
app . component ( 'Calendar' , Calendar ) ;
app . component ( 'Card' , Card ) ;
app . component ( 'Carousel' , Carousel ) ;
app . component ( 'CascadeSelect' , CascadeSelect ) ;
app . component ( 'Checkbox' , Checkbox ) ;
app . component ( 'Chip' , Chip ) ;
app . component ( 'Chips' , Chips ) ;
app . component ( 'ColorPicker' , ColorPicker ) ;
app . component ( 'Column' , Column ) ;
app . component ( 'ColumnGroup' , ColumnGroup ) ;
app . component ( 'ConfirmDialog' , ConfirmDialog ) ;
app . component ( 'ConfirmPopup' , ConfirmPopup ) ;
app . component ( 'ContextMenu' , ContextMenu ) ;
app . component ( 'DataTable' , DataTable ) ;
app . component ( 'DataView' , DataView ) ;
app . component ( 'DataViewLayoutOptions' , DataViewLayoutOptions ) ;
app . component ( 'DeferredContent' , DeferredContent ) ;
app . component ( 'Dialog' , Dialog ) ;
app . component ( 'Divider' , Divider ) ;
app . component ( 'Dock' , Dock ) ;
app . component ( 'Dropdown' , Dropdown ) ;
app . component ( 'DynamicDialog' , DynamicDialog ) ;
app . component ( 'Fieldset' , Fieldset ) ;
app . component ( 'FileUpload' , FileUpload ) ;
app . component ( 'Galleria' , Galleria ) ;
app . component ( 'Image' , Image ) ;
app . component ( 'InlineMessage' , InlineMessage ) ;
app . component ( 'Inplace' , Inplace ) ;
app . component ( 'InputMask' , InputMask ) ;
app . component ( 'InputNumber' , InputNumber ) ;
app . component ( 'InputSwitch' , InputSwitch ) ;
app . component ( 'InputText' , InputText ) ;
app . component ( 'Knob' , Knob ) ;
app . component ( 'Listbox' , Listbox ) ;
app . component ( 'MegaMenu' , MegaMenu ) ;
app . component ( 'Menu' , Menu ) ;
app . component ( 'Menubar' , Menubar ) ;
app . component ( 'Message' , Message ) ;
app . component ( 'MultiSelect' , MultiSelect ) ;
app . component ( 'OrderList' , OrderList ) ;
app . component ( 'OrganizationChart' , OrganizationChart ) ;
app . component ( 'OverlayPanel' , OverlayPanel ) ;
app . component ( 'Paginator' , Paginator ) ;
app . component ( 'Panel' , Panel ) ;
app . component ( 'PanelMenu' , PanelMenu ) ;
app . component ( 'Password' , Password ) ;
app . component ( 'PickList' , PickList ) ;
app . component ( 'ProgressBar' , ProgressBar ) ;
app . component ( 'ProgressSpinner' , ProgressSpinner ) ;
app . component ( 'RadioButton' , RadioButton ) ;
app . component ( 'Rating' , Rating ) ;
app . component ( 'Row' , Row ) ;
app . component ( 'SelectButton' , SelectButton ) ;
app . component ( 'ScrollPanel' , ScrollPanel ) ;
app . component ( 'ScrollTop' , ScrollTop ) ;
app . component ( 'Slider' , Slider ) ;
app . component ( 'Sidebar' , Sidebar ) ;
app . component ( 'Skeleton' , Skeleton ) ;
app . component ( 'SpeedDial' , SpeedDial ) ;
app . component ( 'SplitButton' , SplitButton ) ;
app . component ( 'Splitter' , Splitter ) ;
app . component ( 'SplitterPanel' , SplitterPanel ) ;
app . component ( 'Steps' , Steps ) ;
app . component ( 'TabMenu' , TabMenu ) ;
app . component ( 'TabView' , TabView ) ;
app . component ( 'TabPanel' , TabPanel ) ;
app . component ( 'Tag' , Tag ) ;
app . component ( 'Textarea' , Textarea ) ;
app . component ( 'Terminal' , Terminal ) ;
app . component ( 'TieredMenu' , TieredMenu ) ;
app . component ( 'Timeline' , Timeline ) ;
app . component ( 'Toast' , Toast ) ;
app . component ( 'Toolbar' , Toolbar ) ;
app . component ( 'ToggleButton' , ToggleButton ) ;
app . component ( 'Tree' , Tree ) ;
app . component ( 'TreeSelect' , TreeSelect ) ;
app . component ( 'TreeTable' , TreeTable ) ;
app . component ( 'TriStateCheckbox' , TriStateCheckbox ) ;
app . component ( 'VirtualScroller' , VirtualScroller ) ;
$ { element }
app . mount ( "#app" ) ;
`
} ,
[ ` ${ path } index.css ` ] : {
content : staticStyles . global
} ,
[ ` ${ path } flags.css ` ] : {
content : staticStyles . flags
} ,
[ ` ${ path } router.js ` ] : {
content : ` import { createRouter, createWebHistory } from "vue-router";
import $ { mainFileName } from "./${mainFileName}${fileExtension}" ;
export const router = createRouter ( {
history : createWebHistory ( ) ,
routes : [ { path : "/" , component : $ { mainFileName } } ]
} ) ; `
} ,
[ ` ${ sourceFileName } ` ] : {
content : sources . replaceAll ( '<\\/script>' , '</script>' )
} ,
... routeFiles ,
... extFilesSource
} ;
if ( extPages && extPages . length >= 1 ) {
let routePaths = '' ;
let viewImports = '' ;
extPages . forEach ( ( page , index ) => {
let compPath = page . tabName . replace ( 'Demo' , '' ) . toLowerCase ( ) ;
routePaths += ` { path: "/ ${ index === 0 ? '' : compPath } ", component: ${ page . tabName } }, \n ` ;
viewImports += ` import ${ page . tabName } from "./components/ ${ page . tabName } ${ fileExtension } "; \n ` ;
files [ ` ${ path } components/ ${ page . tabName } ${ fileExtension } ` ] = {
content : page . content
} ;
} ) ;
files [ ` ${ path } router.js ` ] = {
content : ` import { createRouter, createWebHistory } from "vue-router";
$ { viewImports }
export const router = createRouter ( {
history : createWebHistory ( ) ,
routes : [ $ { routePaths } ]
} ) ; `
} ;
}
if ( service ) {
service . forEach ( ( name ) => {
files [ ` ${ path } service/ ${ name } .js ` ] = {
content : services [ name ]
} ;
} ) ;
}
return { files , dependencies , sourceFileName } ;
} ;
const staticStyles = {
global : ` html {
font - size : 14 px ;
}
body {
font - family : var ( -- font - family ) ;
font - weight : normal ;
background : var ( -- surface - ground ) ;
color : var ( -- text - color ) ;
padding : 1 rem ;
- webkit - font - smoothing : antialiased ;
- moz - osx - font - smoothing : grayscale ;
}
. card {
background : var ( -- surface - card ) ;
padding : 2 rem ;
border - radius : 10 px ;
margin - bottom : 1 rem ;
}
` ,
flags : ` span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(https://primefaces.org/cdn/primevue/images/flag/flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.
} ;
export { getVueApp } ;
