diff --git a/.env.example b/.env.example index 17a19d5..d8e7f01 100644 --- a/.env.example +++ b/.env.example @@ -3,3 +3,87 @@ VITE_SERVER_URL=http://localhost:9200 # If running the demo project VITE_DEMO_PREVIEW_URL=http://localhost:3001 + +# Set the default user settings (user can override them in the UI) +# (Enter data in JSON format) +#VITE_DEFAULT_USER_SETTINGS={"appearanceDarkMode":false,"editorFontSize":16,"editorLiveUpdate":true,"editorUpdateTimeout":1000,"editorShowPrintMargin":false,"editorAutoSyncFrom":true,"editorAutoSyncInterval":1000,"autoCleanData":false,"editorTabSize":2,"userDataAutoFetch":true,"layoutEditorLocation":"start","layoutSitePreviewLocation":"start","layoutSitePreviewPadding":true,"layoutSitePreviewKeepRatio":true,"layoutAutoSplit":true,"blueprintsIncludeTypings":true,"blueprintsReadFromData":true,"blueprintsReadFromStructure":true,"blueprintsWriteToData":true,"blueprintsWriteToDefault":true,"blueprintsWriteToIndex":true,"blueprintsWriteToStructure":true,"blueprintsWriteToTypings":true,"blueprintsWriteToSettings":true} + +# Force user settings (user won't be able to override them from the UI) +# (Enter data in JSON format) +#VITE_FORCE_USER_SETTINGS={"appearanceDarkMode":true} + +# Force a structure data +#VITE_FORCE_STRUCTURE= + +# Inject user data +# (Enter data in JSON format) +#VITE_USER_DATA= + +# UI CONFIGURATION +# -------------------- +# Use the following keys and separated them by a comma to disable many items in the UI. +# +# toolbar +# toolbar.menu +# toolbar.logo +# toolbar.project_selector +# toolbar.project_selector.new +# toolbar.project_selector.delete +# toolbar.advanced +# toolbar.site_preview +# toolbar.site_preview.refresh +# toolbar.site_preview.mobile +# toolbar.site_preview.desktop +# toolbar.site_preview.blank +# toolbar.trigger_menu +# toolbar.info +# toolbar.locale_selector +# toolbar.login +# toolbar.settings +# toolbar.settings.edit_json +# toolbar.settings.fetch_data +# toolbar.settings.download_data +# toolbar.settings.migrate_data +# toolbar.settings.clear_data +# toolbar.settings.settings +# toolbar.settings.logout +# +# sidebar +# sidebar.sections +# sidebar.tools +# sidebar.tools.file_manager +# sidebar.advanced +# sidebar.advanced.hash +# sidebar.advanced.server +# sidebar.advanced.upload +# sidebar.tutorial +# sidebar.github +# sidebar.footer +# +# structure +# structure.menu +# structure.menu.structure +# structure.menu.blueprints +# structure.menu.settings +# structure.menu.integration +# structure.trigger_menu +# structure.settings +# structure.settings.endpoint +# structure.settings.permissions_structure +# structure.settings.permissions_admin +# structure.footer +# structure.footer_local_sync +# structure.footer_save +# +# site_preview +# +# data +# data.footer +# data.footer.set_as_default +# data.footer.sync_local +# data.footer.sync_endpoint +# +# documentation +VITE_UI_DISABLE= +#VITE_UI_DISABLE=toolbar.logo,toolbar.login,toolbar.settings.edit_json,toolbar.settings.migrate_data,toolbar.settings.settings,documentation,structure,sidebar.tutorial,sidebar.github,sidebar.advanced + diff --git a/docs/structure.md b/docs/structure.md index 27579af..89dfd52 100644 --- a/docs/structure.md +++ b/docs/structure.md @@ -1,9 +1,9 @@ -# YAML Interface +# YAML Structure --- Let's get started on building your ideal admin panel with JSON.ms! ## Global Configuration -Let's start with the global configuration. You can copy paste and adjust the following code in your _YAML_ interface: +Let's start with the global configuration. You can copy paste and adjust the following code in your _YAML_ structure: ```yaml global: @@ -20,7 +20,7 @@ These settings allows to create an admin panel that aligns with your brand and u ## Locales -JSON.ms allows you to manage locales for translating the fields that will be saved in your application. You can easily define multiple locales in a customizable list of key/value pairs within the YAML interface. If no locales are provided, JSON.ms will default to "`en-US`." This feature enables you to ensure that the data fields are accurately translated, accommodating users who speak different languages and enhancing the overall usability of your application. +JSON.ms allows you to manage locales for translating the fields that will be saved in your application. You can easily define multiple locales in a customizable list of key/value pairs within the YAML structure. If no locales are provided, JSON.ms will default to "`en-US`." This feature enables you to ensure that the data fields are accurately translated, accommodating users who speak different languages and enhancing the overall usability of your application. ```yaml locales: @@ -404,7 +404,7 @@ Here's an example of a field using an enum: ## Schemas -Reusable schemas (fieldset) are a powerful feature that allows you to define a set of predefined fields that can be referenced multiple times throughout your interface. This promotes consistency in your data definitions and reduces redundancy, making your code cleaner and easier to maintain. +Reusable schemas (fieldset) are a powerful feature that allows you to define a set of predefined fields that can be referenced multiple times throughout your structure. This promotes consistency in your data definitions and reduces redundancy, making your code cleaner and easier to maintain. ```yaml schemas: diff --git a/package.json b/package.json index 786aefd..a3863e3 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@json.ms/www", "private": true, "type": "module", - "version": "1.3.1", + "version": "1.3.3", "scripts": { "dev": "vite --host", "build": "run-p type-check \"build-only {@}\" --", diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue index 4da182f..b76e190 100644 --- a/src/components/ActionBar.vue +++ b/src/components/ActionBar.vue @@ -192,17 +192,20 @@ const reset = () => { globalStore.admin.structure && globalStore.userSettings.data.layoutAutoSplit && layoutSize.value.data >= (mobileFrameWidth.value * 2)); +const splitTabs = computed((): boolean => { + if (![globalStore.uiConfig.data, globalStore.uiConfig.documentation].every(item => item)) { + return false; + } + return globalStore.admin.structure && globalStore.userSettings.data.layoutAutoSplit && layoutSize.value.data >= (mobileFrameWidth.value * 2); +}); const tab = computed({ get: () => { + if (globalStore.uiConfig.data && !globalStore.uiConfig.documentation) { + return 'data'; + } + if (!globalStore.uiConfig.data && globalStore.uiConfig.documentation) { + return 'docs'; + } const advancedMode = globalStore.admin.structure && windowWidth.value > 900; if (advancedMode && splitTabs.value) { return globalStore.admin.dataTab === 'data' @@ -316,12 +328,14 @@ useShortcut({ }).listen(); initLayout(); -setUserData({}, true); +const envInitialUserData = import.meta.env.VITE_USER_DATA; +const initialUserData = JSON.parse(envInitialUserData || '{}') || {}; +setUserData(initialUserData, true); onMounted(() => { sitePreview.value?.structureEditor?.scrollToSection(getAvailableSection()); structureEditor.value?.scrollToSection(getAvailableSection()); }) -if (globalStore.userSettings.data.userDataAutoFetch) { +if (!envInitialUserData && globalStore.userSettings.data.userDataAutoFetch) { refreshUserData(); } if (globalStore.session.loggedIn) { @@ -333,6 +347,7 @@ if (globalStore.session.loggedIn) { -