merge dev to main

README.md

@@ -1,81 +1,24 @@
-# Vuetify (Default)
+# JSON.ms
 
-This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
+Just a small demo containing a presentation and a playground to follow along while exploring JSON.ms for the first time.
 
-## ❗️ Important Links
+### Install dependencies:
+```sh
+# Using Yarn
+yarn
 
-- 📄 [Docs](https://vuetifyjs.com/)
-- 🚨 [Issues](https://issues.vuetifyjs.com/)
-- 🏬 [Store](https://store.vuetifyjs.com/)
-- 🎮 [Playground](https://play.vuetifyjs.com/)
-- 💬 [Discord](https://community.vuetifyjs.com)
-
-## 💿 Install
-
-Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
-
-| Package Manager                                                | Command        |
-|---------------------------------------------------------------|----------------|
-| [yarn](https://yarnpkg.com/getting-started)                   | `yarn install` |
-| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install)     | `npm install`  |
-| [pnpm](https://pnpm.io/installation)                          | `pnpm install` |
-| [bun](https://bun.sh/#getting-started)                        | `bun install`  |
-
-After completing the installation, your environment is ready for Vuetify development.
-
-## ✨ Features
-
-- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
-- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
-- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
-- 💻 **Enhanced Development Experience**: Benefit from TypeScript's static type checking and the ESLint plugin suite for Vue, ensuring code quality and consistency. [TypeScript](https://www.typescriptlang.org/) | [ESLint Plugin Vue](https://eslint.vuejs.org/)
-- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
-- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
-- 🛠️ **Strongly-Typed Vue**: Use vue-tsc for type-checking your Vue components, and enjoy a robust development experience. [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc)
-
-These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
-
-## 💡 Usage
-
-This section covers how to start the development server and build your project for production.
-
-### Starting the Development Server
-
-To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
-
-```bash
-yarn dev
+# OR using npm
+npm install
 ```
 
-(Repeat for npm, pnpm, and bun with respective commands.)
-
-> Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
-
-### Building for Production
-
-To build your project for production, use:
+### Start the development server:
+```sh
+# Using Yarn
+yarn dev
 
-```bash
-yarn build
+# OR using npm
+npm run dev
 ```
 
-(Repeat for npm, pnpm, and bun with respective commands.)
-
-Once the build process is completed, your application will be ready for deployment in a production environment.
-
-## 💪 Support Vuetify Development
-
-This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
-
-- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
-- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
-- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
-- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
-- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
-- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
-- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
-
-## 📑 License
-[MIT](http://opensource.org/licenses/MIT)
-
-Copyright (c) 2016-present Vuetify, LLC
+## License
+MIT

package.json

@@ -2,7 +2,7 @@
   "name": "@jsonms/demo",
   "private": true,
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",

src/App.vue

@@ -3,7 +3,3 @@
     <router-view />
   </v-app>
 </template>
-
-<script lang="ts" setup>
-  //
-</script>

src/components/Carousels.vue

@@ -65,7 +65,11 @@ const slideColor = computed((): string => {
 
 watch(() => slide.value, () => {
   if (data.value.home.presentation[slide.value]) {
-    window.parent.postMessage({name: 'jsonms', type: 'commands', data: JSON.stringify(data.value.home.presentation[slide.value].commands) }, );
+    window.parent.postMessage({
+      name: 'jsonms',
+      type: 'commands',
+      data: JSON.stringify(data.value.home.presentation[slide.value].commands)
+    }, '*');
   }
 })
 </script>

src/interfaces.ts

@@ -1,38 +1,24 @@
 export type JmsLocale = 'en-US' | 'es-MX'
 
-export type JmsSection = 'home'
+export type JmsSection = 'home' | 'playground'
 
 export type JmsEnumColors = 'primary' | 'secondary'
 
+export type JmsEnumGender = 'male' | 'female'
+
 export type JmsLocaleSet<T> = {
   'en-US': T
   'es-MX': T
 }
 
-export interface JmsImageMeta {
+export interface JmsFileMeta {
   size: number
   type: string
   width: number
   height: number
   originalFileName: string
 }
 
-export interface JmsFileMeta {
-  size: number
-  type: string
-  originalFileName: string
-}
-
-export interface JmsVideo {
-  path: string
-  meta: JmsFileMeta
-}
-
-export interface JmsImage {
-  path: string
-  meta: JmsImageMeta
-}
-
 export interface JmsFile {
   path: string
   meta: JmsFileMeta
@@ -43,21 +29,108 @@ export interface JmsHomeItems {
   body: JmsLocaleSet<string | null>
   cta: JmsLocaleSet<string>
   color: JmsEnumColors
-  commands: ('openDrawer' | 'closeDrawer' | 'openAdvanced' | 'closeAdvanced' | 'showData' | 'showSettings' | 'showDoc' | 'setMobile' | 'setDesktop' | 'hideDevice')[]
+  commands: ('openDrawer' | 'closeDrawer' | 'openAdvanced' | 'closeAdvanced' | 'showData' | 'showSettings' | 'showDocs' | 'setMobile' | 'setDesktop' | 'hideDevice')[]
   hash: string
 }
 
 export interface JmsHome {
   presentation: JmsHomeItems[]
 }
 
+export interface JmsPlaygroundList {
+  select: 'male' | 'female' | null
+  radio: JmsEnumGender | null
+  checkbox: JmsEnumGender[]
+}
+
+export interface JmsPlaygroundArraysItems {
+  firstName: string | null
+  lastName: string | null
+  gender: JmsEnumGender | null
+  picture: JmsFile | null
+  hash: string
+}
+
+export interface JmsPlaygroundArraysItems {
+  title: string | null
+  hash: string
+}
+
+export interface JmsPlaygroundArrays {
+  array: JmsPlaygroundArraysItems[]
+  i18nArray: JmsPlaygroundArraysItems[]
+}
+
+export interface JmsPlaygroundFiles {
+  file: JmsFile | null
+  acceptImages: JmsFile | null
+  multiple: JmsFile[]
+}
+
+export interface JmsPlayground {
+  text: string | null
+  textWithIcon: string | null
+  i18nRequired: JmsLocaleSet<string>
+  i18nTextarea: JmsLocaleSet<undefined | null>
+  i18nRating: JmsLocaleSet<number | null>
+  conditionalSwitch: undefined | null
+  hiddenField: number | null
+  list: JmsPlaygroundList
+  arrays: JmsPlaygroundArrays
+  files: JmsPlaygroundFiles
+  markdown: string | null
+  date: Date | null
+}
+
 export interface JmsObject {
   home: JmsHome
+  playground: JmsPlayground
+}
+
+const locales: { [key: string]: string } = {
+  "en-US": "English (US)",
+  "es-MX": "Spanish (Mexico)"
 }
 
+export { locales }
+
 const defaultJmsObject: JmsObject = {
   "home": {
     "presentation": []
+  },
+  "playground": {
+    "text": null,
+    "textWithIcon": null,
+    "i18nRequired": {
+      "en-US": "",
+      "es-MX": ""
+    },
+    "i18nTextarea": {
+      "en-US": null,
+      "es-MX": null
+    },
+    "i18nRating": {
+      "en-US": null,
+      "es-MX": null
+    },
+    "conditionalSwitch": null,
+    "hiddenField": null,
+    "list": {
+      "select": null,
+      "radio": null,
+      "checkbox": []
+    },
+    "arrays": {
+      "array": [],
+      "i18nArray": []
+    },
+    "files": {
+      "file": null,
+      "acceptImages": null,
+      "multiple": []
+    },
+    "markdown": null,
+    "date": null
   }
 }
 

src/plugins/jsonms.ts

@@ -6,9 +6,9 @@ import { type JSONmsProvider } from '@jsonms/vue3';
 const defaultSection: JmsSection = 'home';
 const defaultLocale: JmsLocale = 'en-US';
 
-export default JsonMs<JmsObject, JmsLocale>(defaultJmsObject, defaultSection, defaultLocale)
+export default JsonMs<JmsObject, JmsSection, JmsLocale>(defaultJmsObject, defaultSection, defaultLocale)
 
-type JmsProviderSet = JSONmsProvider<JmsObject, JmsLocale, string>
+type JmsProviderSet = JSONmsProvider<JmsObject, JmsSection, JmsLocale>
 
 export const useJsonMs = (): JmsProviderSet => {
   const jms = inject<JmsProviderSet>('jms');