diff --git a/README.md b/README.md index 0519646..194cdd8 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 5d8f23b..407fbc8 100644 --- a/package.json +++ b/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 {@}\" --", diff --git a/src/App.vue b/src/App.vue index 9497da7..4f21c35 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,3 @@ - - diff --git a/src/components/Carousels.vue b/src/components/Carousels.vue index dca4940..f185b1d 100644 --- a/src/components/Carousels.vue +++ b/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) + }, '*'); } }) diff --git a/src/interfaces.ts b/src/interfaces.ts index a12ebba..7ee1bd6 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -1,15 +1,17 @@ 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 = { 'en-US': T 'es-MX': T } -export interface JmsImageMeta { +export interface JmsFileMeta { size: number type: string width: number @@ -17,22 +19,6 @@ export interface JmsImageMeta { 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,7 +29,7 @@ export interface JmsHomeItems { body: JmsLocaleSet cta: JmsLocaleSet 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 } @@ -51,13 +37,100 @@ 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 + i18nTextarea: JmsLocaleSet + i18nRating: JmsLocaleSet + 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 } } diff --git a/src/plugins/jsonms.ts b/src/plugins/jsonms.ts index dfa0d90..7fc2afd 100644 --- a/src/plugins/jsonms.ts +++ b/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(defaultJmsObject, defaultSection, defaultLocale) +export default JsonMs(defaultJmsObject, defaultSection, defaultLocale) -type JmsProviderSet = JSONmsProvider +type JmsProviderSet = JSONmsProvider export const useJsonMs = (): JmsProviderSet => { const jms = inject('jms');