@gxp-dev/tools 2.0.63 → 2.0.64

package/template/README.md

@@ -49,23 +49,23 @@ your-project/
 
 ```vue
 <template>
-  <div class="my-plugin">
-    <h1>{{ stringsList?.welcome_text || 'Welcome!' }}</h1>
-    <!-- Your custom content here -->
-  </div>
+	<div class="my-plugin">
+		<h1>{{ stringsList?.welcome_text || "Welcome!" }}</h1>
+		<!-- Your custom content here -->
+	</div>
 </template>
 
 <script setup>
 // Props injected by the platform
 const props = defineProps({
-  pluginVars: Object,      // Custom variables from admin panel
-  dependencyList: Object,  // Selected dependencies
-  assetUrls: Object,       // Asset URLs (signed URLs for images, etc.)
-  stringsList: Object,     // Localized strings
-  permissionFlags: Array,  // Permission flags
-  theme: Object,           // Theme configuration
-  router: Object           // Platform router for navigation
-});
+	pluginVars: Object, // Custom variables from admin panel
+	dependencyList: Object, // Selected dependencies
+	assetUrls: Object, // Asset URLs (signed URLs for images, etc.)
+	stringsList: Object, // Localized strings
+	permissionFlags: Array, // Permission flags
+	theme: Object, // Theme configuration
+	router: Object, // Platform router for navigation
+})
 </script>
 ```
 
@@ -83,18 +83,18 @@ You can customize these layouts to match your kiosk's design.
 
 ### Available Scripts
 
-| Script | Description |
-|--------|-------------|
-| `npm run dev` | Start HTTPS dev server with Socket.IO |
-| `npm run dev-app` | Start HTTPS dev server only |
-| `npm run dev-http` | Start HTTP dev server (no SSL) |
-| `npm run build` | Build for production |
-| `npm run setup-ssl` | Generate SSL certificates |
-| `npm run socket:list` | List available socket events |
-| `npm run socket:send` | Send test socket events |
-| `npm run assets:list` | List development assets |
-| `npm run assets:init` | Initialize asset directories |
-| `npm run assets:generate` | Generate placeholder images |
+| Script                    | Description                           |
+| ------------------------- | ------------------------------------- |
+| `npm run dev`             | Start HTTPS dev server with Socket.IO |
+| `npm run dev-app`         | Start HTTPS dev server only           |
+| `npm run dev-http`        | Start HTTP dev server (no SSL)        |
+| `npm run build`           | Build for production                  |
+| `npm run setup-ssl`       | Generate SSL certificates             |
+| `npm run socket:list`     | List available socket events          |
+| `npm run socket:send`     | Send test socket events               |
+| `npm run assets:list`     | List development assets               |
+| `npm run assets:init`     | Initialize asset directories          |
+| `npm run assets:generate` | Generate placeholder images           |
 
 ### Dev Tools Modal
 
@@ -116,9 +116,10 @@ The Dev Tools Modal provides:
 4. **Mock Data Editor** - Edit theme colors, navigation items, user session, and permissions
 
 You can also control dev tools from the browser console:
+
 ```javascript
-window.gxDevTools.open()   // Open modal
-window.gxDevTools.close()  // Close modal
+window.gxDevTools.open() // Open modal
+window.gxDevTools.close() // Close modal
 window.gxDevTools.toggle() // Toggle modal
 ```
 
@@ -143,29 +144,37 @@ VITE_SSL_KEY=.certs/localhost-key.pem
 Your Plugin.vue component receives these props from the platform:
 
 ### pluginVars
+
 Custom variables configured in the admin panel:
+
 ```javascript
-const { pluginVars } = props;
-console.log(pluginVars.primary_color);  // "#FFD600"
-console.log(pluginVars.projectId);       // 39
+const { pluginVars } = props
+console.log(pluginVars.primary_color) // "#FFD600"
+console.log(pluginVars.projectId) // 39
 ```
 
 ### assetUrls
+
 URLs for configured assets:
+
 ```vue
 <img :src="assetUrls.main_logo" alt="Logo" />
 <img :src="assetUrls.background_image" alt="Background" />
 ```
 
 ### stringsList
+
 Localized strings:
+
 ```vue
 <h1>{{ stringsList.welcome_text }}</h1>
 <p>{{ stringsList.instruction_text }}</p>
 ```
 
 ### theme
+
 Theme configuration (colors, fonts, etc.):
+
 ```vue
 <GxThemeWrapper :theme="theme">
   <!-- Your content inherits theme variables -->
@@ -173,26 +182,28 @@ Theme configuration (colors, fonts, etc.):
 ```
 
 ### router
+
 Platform router for navigation (Inertia.js-style):
+
 ```javascript
 // Basic navigation
-router.visit('/camera');
+router.visit("/camera")
 
 // POST data to a route
-router.visit('/share', {
-  method: 'post',
-  data: { image: photoUrl, caption: 'My photo!' }
-});
+router.visit("/share", {
+	method: "post",
+	data: { image: photoUrl, caption: "My photo!" },
+})
 
 // Navigation with options
-router.visit('/results', {
-  preserveScroll: true,
-  preserveState: true,
-  replace: true,
-  onStart: () => {},
-  onFinish: () => {},
-  onError: (errors) => {}
-});
+router.visit("/results", {
+	preserveScroll: true,
+	preserveState: true,
+	replace: true,
+	onStart: () => {},
+	onFinish: () => {},
+	onError: (errors) => {},
+})
 ```
 
 ## GX ComponentKit
@@ -200,6 +211,7 @@ router.visit('/results', {
 This project includes `@gramercytech/gx-componentkit` with pre-built components:
 
 ### Page Components
+
 - `GxPageStart` - Welcome/start screen with idle timeout
 - `GxPageInstructions` - Instruction display page
 - `GxPageCamera` - Camera capture interface
@@ -209,33 +221,36 @@ This project includes `@gramercytech/gx-componentkit` with pre-built components:
 - `GxPageLoading` - Loading overlay
 
 ### UI Components
+
 - `GxModal` - Customizable modal dialogs
 - `GxCountdown` - Timer/countdown component
 - `GxVideoPlayer` - Video player with custom controls
 - `GxThemeWrapper` - Theme provider component
 
 ### Composables
+
 - `useMedia()` - Camera, video, and audio utilities
 - `useAnimations()` - Animation helpers
 - `useScanning()` - Barcode/QR scanning
 - `useErrors()` - Error state management
 
 ### Usage Example
+
 ```vue
 <script setup>
 import {
-  GxModal,
-  GxCountdown,
-  GxVideoPlayer,
-  useMedia
-} from '@gramercytech/gx-componentkit';
+	GxModal,
+	GxCountdown,
+	GxVideoPlayer,
+	useMedia,
+} from "@gramercytech/gx-componentkit"
 
-const { startCamera, takePhoto } = useMedia();
+const { startCamera, takePhoto } = useMedia()
 </script>
 
 <template>
-  <GxCountdown :duration="30" @finished="handleFinished" />
-  <GxVideoPlayer :src="videoUrl" @play="handlePlay" />
+	<GxCountdown :duration="30" @finished="handleFinished" />
+	<GxVideoPlayer :src="videoUrl" @play="handlePlay" />
 </template>
 ```
 
@@ -245,9 +260,9 @@ Theme CSS variables are automatically available:
 
 ```css
 .my-component {
-  background: var(--gx-primary-color);
-  color: var(--gx-text-color);
-  border: 2px solid var(--gx-primary-color);
+	background: var(--gx-primary-color);
+	color: var(--gx-text-color);
+	border: 2px solid var(--gx-primary-color);
 }
 ```
 
@@ -284,6 +299,7 @@ gxdev assets generate --name logo --size 200x200 --color "#FF5722" --text "My Lo
 ```
 
 ### ImageMagick Installation
+
 ```bash
 # macOS
 brew install imagemagick
@@ -301,6 +317,7 @@ npm run build
 ```
 
 This creates a `dist/` folder with:
+
 - `plugin.es.js` - Your compiled plugin (ES module)
 - `style.css` - Compiled styles
 

package/template/app-manifest.json

@@ -11,11 +11,9 @@
 		"primary_color": "#FFD600"
 	},
 	"strings": {
-		"default": {
-		}
-	},
-	"assets": {
+		"default": {}
 	},
+	"assets": {},
 	"dependencies": [],
 	"permissions": []
 }

package/template/configuration.json

@@ -1,15 +1,15 @@
 {
-    "additionalTabs": [
-        {
-            "type": "card_list",
-            "cards": [
-                {
-                    "cols": 12,
-                    "type": "fields_list",
-                    "title": "Configuration",
-                    "fieldsList": []
+	"additionalTabs": [
+		{
+			"type": "card_list",
+			"cards": [
+				{
+					"cols": 12,
+					"type": "fields_list",
+					"title": "Configuration",
+					"fieldsList": []
 				}
 			]
 		}
 	]
-}
+}

package/template/default-styling.css

@@ -1 +1 @@
-/* This file used to pre-populate the the additional styling editor in the GxP app */
+/* This file used to pre-populate the the additional styling editor in the GxP app */

package/template/index.html

@@ -1,22 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>GxP Plugin Builder</title>
+		<script type="module">
+			import * as Vue from "/node_modules/vue/dist/vue.esm-bundler.js"
+			window.Vue = Vue
+			import * as Pinia from "/node_modules/pinia/dist/pinia.esm-browser.js"
+			window.Pinia = Pinia
+		</script>
+	</head>
 
-<head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>GxP Plugin Builder</title>
-    <script type="module">
-        import * as Vue from '/node_modules/vue/dist/vue.esm-bundler.js';
-        window.Vue = Vue;
-        import * as Pinia from '/node_modules/pinia/dist/pinia.esm-browser.js';
-        window.Pinia = Pinia;
-    </script>
-</head>
-
-<body>
-    <div id="app"></div>
-    <script type="module" src="/main.js"></script>
-</body>
-
-</html>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/main.js"></script>
+	</body>
+</html>

package/template/main.js

@@ -1,40 +1,42 @@
-import { createApp } from "vue";
-import * as Vue from "vue";
-import * as Pinia from "pinia";
-import { createPinia, setActivePinia } from "pinia";
+import { createApp } from "vue"
+import * as Vue from "vue"
+import * as Pinia from "pinia"
+import { createPinia, setActivePinia } from "pinia"
 
 // Create and configure Pinia before any store imports
-const pinia = createPinia();
-setActivePinia(pinia);
+const pinia = createPinia()
+setActivePinia(pinia)
 
 // Expose Vue and Pinia to window for dynamically loaded plugins
-window.Vue = Vue;
-window.Pinia = Pinia;
-window.pinia = pinia;
+window.Vue = Vue
+window.Pinia = Pinia
+window.pinia = pinia
 
 // Dynamic imports ensure pinia is set up before stores load
 async function init() {
-	const { default: App } = await import("@gx-runtime/PortalContainer.vue");
-	const { useGxpStore } = await import("@/stores/index.js");
-	const { createGxpStringsPlugin } = await import("@gx-runtime/gxpStringsPlugin.js");
+	const { default: App } = await import("@gx-runtime/PortalContainer.vue")
+	const { useGxpStore } = await import("@/stores/index.js")
+	const { createGxpStringsPlugin } =
+		await import("@gx-runtime/gxpStringsPlugin.js")
 
-	window.useGxpStore = useGxpStore;
+	window.useGxpStore = useGxpStore
 
-	const app = createApp(App);
-	app.use(pinia);
+	const app = createApp(App)
+	app.use(pinia)
 
-	const gxpStore = useGxpStore();
+	const gxpStore = useGxpStore()
 
 	// Build the dev server base URL so gxp-src default paths resolve to the
 	// local dev server instead of the current domain (important when the app
 	// is injected into the cloud platform via browser extension).
-	const devProtocol = import.meta.env.VITE_USE_HTTPS !== "false" ? "https" : "http";
-	const devPort = import.meta.env.VITE_NODE_PORT || "3060";
-	const devServerBaseUrl = `${devProtocol}://localhost:${devPort}`;
+	const devProtocol =
+		import.meta.env.VITE_USE_HTTPS !== "false" ? "https" : "http"
+	const devPort = import.meta.env.VITE_NODE_PORT || "3060"
+	const devServerBaseUrl = `${devProtocol}://localhost:${devPort}`
 
-	app.use(createGxpStringsPlugin(gxpStore, { devServerBaseUrl }));
+	app.use(createGxpStringsPlugin(gxpStore, { devServerBaseUrl }))
 
-	app.mount("#app");
+	app.mount("#app")
 }
 
-init();
+init()