@oxygen-cms/ui 1.8.2 → 1.9.1

package/.github/workflows/node.js.yml

@@ -16,12 +16,12 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm ci

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxygen-cms/ui",
-  "version": "1.8.2",
+  "version": "1.9.1",
   "description": "Various utilities for UI-building in Vue.js",
   "main": "none",
   "repository": {

package/src/components/MainMenu.vue

@@ -15,12 +15,18 @@
                          :to="group.listAction">
                 <template #label>
                     {{ groupLabel }}
-                    <b-button v-if="userPermissions.has(group.addPermission)"
-                              tag="router-link"
-                              type="is-text"
-                              class="is-pulled-right show-if-active"
-                              :icon-right="group.addIcon"
-                              :to="group.addAction"></b-button>
+                    <span v-if="userPermissions.has(group.addPermission) && group.addDropdownComponent"
+                          class="is-pulled-right show-if-active add-dropdown-trigger"
+                          @click.stop.prevent
+                          @mousedown.stop.prevent>
+                        <component :is="group.addDropdownComponent"
+                                   :minimal="true" />
+                    </span>
+                    <router-link v-else-if="userPermissions.has(group.addPermission)"
+                               class="is-pulled-right show-if-active"
+                               :to="group.addAction">
+                        <MinimalDropdownButton :icon="group.addIcon" />
+                    </router-link>
                 </template>
                 <b-menu-item v-for="(item, itemLabel) in itemsWithPermission(group.items)" :key="itemLabel" :label="itemLabel" tag="router-link" :to="item.to"></b-menu-item>
             </b-menu-item>
@@ -35,8 +41,11 @@
 </template>
 
 <script>
+import MinimalDropdownButton from "./MinimalDropdownButton.vue";
+
 export default {
     name: "MainMenu",
+    components: { MinimalDropdownButton },
     props: {
         items: {
             type: Object,

package/src/components/MinimalDropdownButton.vue

@@ -0,0 +1,36 @@
+<template>
+    <b-button
+        type="is-text"
+        :icon-right="icon"
+        class="minimal-button">
+    </b-button>
+</template>
+
+<script>
+export default {
+    name: "MinimalDropdownButton",
+    props: {
+        icon: {
+            type: String,
+            required: true
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import '../styles/variables.scss';
+
+    .minimal-button {
+        padding: 0 0.5em;
+        height: auto;
+    }
+
+    .button.is-text.minimal-button {
+        background-color: $grey-lighter;
+    }
+
+    .button.is-text.minimal-button:hover {
+        background-color: darken($grey-lighter, 5%);
+    }
+</style>

package/src/components/PageActions.vue

@@ -20,7 +20,7 @@
                 paddingless>
                 <div class="modal-card" style="width: auto; overflow: visible">
                     <header class="modal-card-head">
-                        <p class="modal-card-title">Parent page for "{{ item.title }}"</p>
+                        <p class="modal-card-title">Update the parent for "{{ item.title }}"</p>
                     </header>
                     <section class="modal-card-body" style="overflow: visible;">
                         <b-field>
@@ -28,11 +28,16 @@
                                 v-model.lazy="movePageSearchQuery"
                                 :disabled="isLoading"
                                 open-on-focus
-                                :data="pagesList"
-                                :custom-formatter="data => data.title + ' - ' + data.slug"
+                                :data="sortedPagesList"
                                 placeholder="Search for pages..."
                                 clearable
                                 @select="setParentPage">
+                                <template #default="props">
+                                    <span :style="getOptionStyle(props.option)">
+                                        {{ props.option.title }} - {{ props.option.slug }}
+                                        <span v-if="isCurrentParent(props.option)" style="opacity: 0.6;"> (current parent)</span>
+                                    </span>
+                                </template>
                                 <template #empty>No results found</template>
                             </b-autocomplete>
                         </b-field>
@@ -71,6 +76,16 @@ export default {
             pagesList: []
         }
     },
+    computed: {
+        sortedPagesList() {
+            // Sort with Home page (slug '/') at the top, then alphabetically by title
+            return [...this.pagesList].sort((a, b) => {
+                if (a.slug === '/') return -1;
+                if (b.slug === '/') return 1;
+                return a.title.localeCompare(b.title);
+            });
+        }
+    },
     watch: {
         'movePageSearchQuery': 'fetchData'
     },
@@ -78,9 +93,6 @@ export default {
         async fetchData() {
             let data = await this.pagesApi.list({ inTrash: false, page: 1, q: this.movePageSearchQuery });
             this.pagesList = data.items;
-            this.pagesList.sort((a, b) => {
-                return a.title.localeCompare(b.title);
-            });
             this.isLoading = false;
         },
         async publish() {
@@ -88,12 +100,32 @@ export default {
             this.$emit('update', item);
         },
         async setParentPage(parentPage) {
+            // Don't allow moving to current parent
+            if (this.isCurrentParent(parentPage)) {
+                return;
+            }
             let data = await this.pagesApi.update({id: this.item.id, parent: parentPage.id, autoConvertToDraft: 'no', version: false});
             this.$buefy.toast.open(morphToNotification(data));
             this.$emit('reload');
         },
         close() {
             this.$refs.moveDropdown.toggle();
+        },
+        isCurrentParent(page) {
+            if (!this.item.parent) return false;
+            // Handle both cases: parent as object or parent as ID
+            const parentId = typeof this.item.parent === 'object' ? this.item.parent.id : this.item.parent;
+            return page.id === parentId;
+        },
+        getOptionStyle(option) {
+            let style = '';
+            if (option.slug === '/') {
+                style += 'font-weight: bold;';
+            }
+            if (this.isCurrentParent(option)) {
+                style += ' opacity: 0.5; cursor: not-allowed;';
+            }
+            return style;
         }
     }
 }

package/src/components/PageTable.vue

@@ -27,7 +27,7 @@
         @details-close="item => setExpanded(item, false)"
         @sort="onSort">
         <b-table-column v-slot="props" label="Title" :sortable="!!onSort" field="title">{{ props.row.title }} <PageStatusIcon :item="props.row"></PageStatusIcon></b-table-column>
-        <b-table-column v-slot="props" label="URL"  :sortable="!!onSort" field="slugPart"><a :href="PagesApi.slugToUrl(props.row.slug)" class="is-size-7" target="_blank" v-if="props.row.stage === PagesApi.STAGE_PUBLISHED">{{ PagesApi.slugToUrl(props.row.slug) }} <b-icon icon="external-link-alt"></b-icon></a><em v-else class="is-size-7">(unpublished)</em></b-table-column>
+        <b-table-column v-slot="props" label="URL" :sortable="!!onSort" field="slugPart"><a :href="PagesApi.slugToUrl(props.row.slug)" class="is-size-7" target="_blank" v-if="props.row.stage === PagesApi.STAGE_PUBLISHED">{{ PagesApi.slugToUrl(props.row.slug) }} <b-icon icon="external-link-alt"></b-icon></a><em v-else class="is-size-7">(unpublished)</em></b-table-column>
         <b-table-column v-slot="props" label="Description" width="30%" :sortable="!!onSort" field="description"><div class="is-size-7">{{ props.row.description }}</div></b-table-column>
         <b-table-column v-slot="props" label="Last Updated" field="updatedAt" :sortable="!!onSort">
             <div v-if="props.row.updatedAt" class="is-size-7"><Updated :model="props.row"></Updated></div>

package/src/components/ResourceList.vue

@@ -9,12 +9,18 @@
             <div class="is-flex-grow-1">
             </div>
             <b-input v-model.lazy="searchQuery" rounded :placeholder="'Search ' + displayName" icon="search" icon-pack="fas" class="mr-3"></b-input>
-            <b-button v-if="!inTrash" tag="router-link" :to="'/' + routePrefix + '/create'" type="is-success" icon-left="pencil-alt" class="mr-3">Create
-                {{ singularDisplayName }}</b-button>
+
+            <component v-if="!inTrash"
+                       :is="createDropdownComponent"
+                       class="mr-3"
+                       @created="fetchData" />
+
             <b-button v-if="!inTrash" tag="router-link" :to="'/' + routePrefix + '/trash'" type="is-danger" outlined icon-left="trash">Deleted
                 {{ displayName }}</b-button>
         </div>
 
+        <slot name="before-table" :search-query="searchQuery"></slot>
+
         <div class="full-height full-height-container box">
             <component :is="tableComponent" :paginated-items="paginatedItems" :on-page-change="page => paginatedItems.currentPage = page" :detailed="!searchQuery" :on-sort="onSort">
                 <template #actions="slotProps">
@@ -58,7 +64,11 @@ export default {
         defaultSortOrder: String,
         tableComponent: Object,
         actionsComponent: Object,
-        resourceApi: Object
+        resourceApi: Object,
+        createDropdownComponent: {
+            type: Object,
+            required: true
+        }
     },
     data() {
         return {

package/src/components/dashboard/MediaPanel.vue

@@ -4,15 +4,23 @@
         <p class="subtitle">Photos, videos, audio, PDFs.</p>
         <div class="buttons">
             <b-button tag="router-link" to="/media/list" icon-left="list">Manage Photos & Files</b-button>
-            <b-button tag="router-link" type="is-success" to="/media/list?upload=true" icon-left="upload">Upload</b-button>
+            <MediaUploadDropdown :minimal="false" :current-directory="null" @uploaded="handleUploaded" />
             <b-button tag="router-link" to="/media/responsive-images" type="is-light" icon-left="mail-bulk">Generate Responsive Images</b-button>
         </div>
     </article>
 </template>
 
 <script>
+import MediaUploadDropdown from "../media/MediaUploadDropdown.vue";
+
 export default {
-    name: "MediaPanel"
+    name: "MediaPanel",
+    components: { MediaUploadDropdown },
+    methods: {
+        handleUploaded() {
+            this.$router.push('/media/list');
+        }
+    }
 }
 </script>
 

package/src/components/media/MediaList.vue

@@ -35,7 +35,7 @@
             </b-field>
 
             <b-button v-if="!inTrash && !searchQuery" icon-left="folder-plus" class="action-bar-pad" @click="isCreateDirectoryModalActive = true">New Directory</b-button>
-            <b-button v-if="!inTrash && !searchQuery" icon-left="file-upload" type="is-success" class="action-bar-pad" @click="$router.push({ query: { upload: true }})">Upload Files</b-button>
+            <MediaUploadDropdown v-if="!inTrash && !searchQuery" class="action-bar-pad" :current-directory="paginatedItems.currentDirectory" @uploaded="fetchData" />
             <b-input v-if="!inTrash" rounded placeholder="Search photos and files..." icon="search"
                      icon-pack="fas" :value="searchQuery" class="action-bar-pad" @input="value => navigateTo({searchQuery: value})"></b-input>
             <b-button v-if="!inTrash" icon-left="trash" type="is-danger" outlined class="action-bar-pad" @click="navigateTo({inTrash: true})">Deleted Items</b-button>
@@ -101,10 +101,6 @@
             </div>
         </b-modal>
 
-        <b-modal :active.sync="isUploadModalActive" trap-focus has-modal-card aria-role="dialog" aria-modal auto-focus>
-            <MediaUpload :current-directory="paginatedItems.currentDirectory" @close="$router.push({ query: { }})" @uploaded="fetchData"></MediaUpload>
-        </b-modal>
-
     </div>
 
 </template>
@@ -115,11 +111,11 @@ import MediaDirectory from "./MediaDirectory.vue";
 import MediaItem from "./MediaItem.vue";
 import MediaDirectoryApi, {getDirectoryBreadcrumbItems, getDirectoryPathString} from "../../MediaDirectoryApi";
 import {morphToNotification} from "../../api";
-import MediaUpload from "./MediaUpload.vue";
+import MediaUploadDropdown from "./MediaUploadDropdown.vue";
 
 export default {
     name: "MediaList",
-    components: { MediaDirectory, MediaItem, MediaUpload },
+    components: { MediaDirectory, MediaItem, MediaUploadDropdown },
     props: {
         currentPath: {
             type: String,
@@ -145,9 +141,6 @@ export default {
         }
     },
     computed: {
-        isUploadModalActive() {
-            return this.$route.query.upload === 'true';
-        },
         displayPath() {
             return getDirectoryPathString(this.paginatedItems.currentDirectory);
         },

package/src/components/media/MediaUploadDropdown.vue

@@ -0,0 +1,182 @@
+<template>
+    <b-dropdown
+        ref="dropdown"
+        :position="minimal ? 'is-bottom-right' : 'is-bottom-left'"
+        aria-role="menu"
+        trap-focus
+        append-to-body
+        class="media-upload-dropdown">
+        <template #trigger="{ active }">
+            <MinimalDropdownButton v-if="minimal" icon="upload"/>
+            <b-button v-else
+                      :type="active ? '' : 'is-success'"
+                      icon-left="file-upload"
+                      :disabled="active">
+                Upload Files
+            </b-button>
+        </template>
+
+        <b-dropdown-item aria-role="menu-item" custom paddingless>
+            <div class="modal-card" style="width: auto; overflow: visible">
+                <header class="modal-card-head has-background-success-light">
+                    <p v-if="!isUploading" class="modal-card-title">
+                        <b-icon icon="upload" size="is-normal" class="push-right"></b-icon>
+                        Upload files to '{{ currentPath }}'
+                    </p>
+                    <p v-else class="modal-card-title">
+                        <b-icon icon="upload" size="is-normal" class="push-right"></b-icon>
+                        Uploading {{ filesToUpload.length }} item(s)
+                    </p>
+                </header>
+                <section v-if="!isUploading" class="modal-card-body" style="overflow: visible;">
+                    <b-upload v-model="filesToUpload"
+                              multiple
+                              drag-drop expanded>
+                        <section class="section">
+                            <div class="content has-text-centered">
+                                <p>
+                                    <b-icon
+                                        icon="upload"
+                                        size="is-large">
+                                    </b-icon>
+                                </p>
+                                <p>Drop your files here or click to upload</p>
+                            </div>
+                        </section>
+                    </b-upload>
+
+                    <div class="tags mt-4">
+                        <span v-for="(file, index) in filesToUpload" :key="index" class="tag is-primary image-preview">
+                            <img :src="imagePreviews[index]" alt="file preview" />
+                            <p class="image-preview-label">
+                                {{ file.name }}
+                                <button class="delete is-small" type="button" @click="deleteFileToUpload(index)"></button>
+                            </p>
+                        </span>
+                    </div>
+                </section>
+                <section v-else class="modal-card-body" style="overflow: visible;">
+                    <b-progress size="is-medium" type="is-info"></b-progress>
+                </section>
+                <footer class="modal-card-foot is-flex">
+                    <div class="is-flex-grow-1"></div>
+                    <b-button @click="close">Close</b-button>
+                    <b-button type="is-success" :disabled="isUploading" @click="doUpload">Upload</b-button>
+                </footer>
+            </div>
+        </b-dropdown-item>
+    </b-dropdown>
+</template>
+
+<script>
+import {morphToNotification} from "../../api";
+import MediaApi from "../../MediaApi";
+import {getDirectoryPathString} from "../../MediaDirectoryApi";
+import MinimalDropdownButton from "../MinimalDropdownButton.vue";
+
+export default {
+    name: "MediaUploadDropdown",
+    components: { MinimalDropdownButton },
+    props: {
+        currentDirectory: { type: Object, default: null },
+        minimal: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            filesToUpload: [],
+            isUploading: false,
+            mediaApi: new MediaApi()
+        }
+    },
+    computed: {
+        currentPath() {
+            return getDirectoryPathString(this.currentDirectory);
+        },
+    },
+    asyncComputed: {
+        async imagePreviews() {
+            let promises = this.filesToUpload.map(file => {
+                return new Promise((resolve) => {
+                    let reader = new FileReader();
+                    reader.onload = function (e) {
+                        resolve(e.target.result);
+                    };
+                    reader.readAsDataURL(file);
+                })
+            })
+            return Promise.all(promises);
+        }
+    },
+    methods: {
+        deleteFileToUpload(index) {
+            this.filesToUpload.splice(index, 1);
+        },
+        async doUpload() {
+            if(this.filesToUpload.length === 0) {
+                return this.$buefy.toast.open({
+                    message: 'No files selected for upload',
+                    type: 'is-warning',
+                    queue: false
+                });
+            }
+            this.isUploading = true;
+            try {
+                let data = await this.mediaApi.create({
+                    files: this.filesToUpload,
+                    currentDirectory: this.currentDirectory
+                });
+                this.$buefy.toast.open(morphToNotification(data));
+                this.$emit('uploaded');
+                this.close();
+            } catch(e) {
+                // upload failed
+                console.warn(e);
+                this.close();
+            }
+        },
+        close() {
+            this.$refs.dropdown.toggle();
+            this.isUploading = false;
+            this.filesToUpload = [];
+        }
+    }
+}
+</script>
+
+<style>
+    .media-upload-dropdown .dropdown-content {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .media-upload-dropdown .dropdown-menu {
+        overflow: visible !important;
+        min-width: 30rem;
+    }
+
+    .media-upload-dropdown .modal-card-title {
+        flex-shrink: unset;
+        flex-grow: unset;
+    }
+</style>
+
+<style scoped>
+    .image-preview {
+        display: flex;
+        flex-direction: column;
+        height: auto;
+    }
+
+    .image-preview img {
+        margin: 0.5rem;
+    }
+
+    .image-preview-label {
+        margin: 0.5rem;
+        display: inline-flex;
+        align-items: center;
+    }
+</style>

package/src/components/pages/CreatePageDropdown.vue

@@ -0,0 +1,209 @@
+<template>
+    <b-dropdown
+        ref="dropdown"
+        :position="minimal ? 'is-bottom-right' : 'is-bottom-left'"
+        aria-role="menu"
+        trap-focus
+        append-to-body
+        class="create-page-dropdown">
+        <template #trigger="{ active }">
+            <MinimalDropdownButton v-if="minimal" icon="plus"/>
+            <b-button v-else
+                      :type="active ? '' : 'is-success'"
+                      icon-left="pencil-alt"
+                      :disabled="active">
+                Create Page
+            </b-button>
+        </template>
+
+        <b-dropdown-item aria-role="menu-item" custom paddingless>
+            <div class="modal-card" style="width: auto; overflow: visible">
+                <header class="modal-card-head has-background-success-light">
+                    <p class="modal-card-title">
+                        <b-icon icon="file-alt" size="is-normal" class="push-right"></b-icon>
+                        Create Page
+                    </p>
+                </header>
+                <section class="modal-card-body" style="overflow: visible;">
+                    <b-field label="Title">
+                        <b-input
+                            v-model="title"
+                            placeholder="e.g.: About Us"
+                            autofocus
+                            @keyup.enter.native="submit">
+                        </b-input>
+                    </b-field>
+
+                    <b-field label="URL Part" message="Leave blank to auto-generate from title">
+                        <b-input
+                            v-model="slugPart"
+                            :placeholder="slugifyTitle(title) || 'e.g.: about-us'"
+                            @keyup.enter.native="submit">
+                        </b-input>
+                    </b-field>
+
+                    <b-field label="Parent Page">
+                        <b-autocomplete
+                            v-if="!selectedParent"
+                            v-model="parentSearchQuery"
+                            :disabled="isLoading"
+                            open-on-focus
+                            :data="sortedPagesList"
+                            placeholder="Search for parent page..."
+                            clearable
+                            @select="onSelectParent"
+                            @input="onParentSearchInput">
+                            <template #default="props">
+                                <span :style="props.option.slug === '/' ? 'font-weight: bold;' : ''">
+                                    {{ props.option.title }} - {{ props.option.slug }}
+                                </span>
+                            </template>
+                            <template #empty>No results found</template>
+                        </b-autocomplete>
+                        <div v-else style="display: flex; align-items: center; padding: 0.5rem 0.75rem; border: 1px solid #dbdbdb; border-radius: 4px; background-color: #f5f5f5;">
+                            <span style="flex: 1;">
+                                <strong>{{ selectedParent.title }}</strong> - {{ selectedParent.slug }}
+                            </span>
+                            <a @click.stop="clearSelectedParent" style="color: #f14668; cursor: pointer; margin-left: 0.5rem;">
+                                <b-icon icon="times" size="is-small"></b-icon>
+                            </a>
+                        </div>
+                    </b-field>
+                </section>
+                <footer class="modal-card-foot is-flex">
+                    <div class="is-flex-grow-1"></div>
+                    <b-button @click="close">Cancel</b-button>
+                    <b-button type="is-success" :loading="submitting" @click="submit">
+                        Create Page
+                    </b-button>
+                </footer>
+            </div>
+        </b-dropdown-item>
+    </b-dropdown>
+</template>
+
+<script>
+import PagesApi from "../../PagesApi.js";
+import { morphToNotification } from "../../api.js";
+import { slugify } from "../../util.js";
+import MinimalDropdownButton from "../MinimalDropdownButton.vue";
+
+export default {
+    name: "CreatePageDropdown",
+    components: { MinimalDropdownButton },
+    props: {
+        minimal: {
+            type: Boolean,
+            default: false
+        }
+    },
+    created() {
+        this.fetchPages();
+    },
+    data() {
+        return {
+            title: '',
+            slugPart: '',
+            parentSearchQuery: '',
+            selectedParent: null,
+            submitting: false,
+            isLoading: false,
+            pagesList: [],
+            pagesApi: new PagesApi()
+        }
+    },
+    computed: {
+        sortedPagesList() {
+            // Sort with Home page (slug '/') at the top, then alphabetically by title
+            return [...this.pagesList].sort((a, b) => {
+                if (a.slug === '/') return -1;
+                if (b.slug === '/') return 1;
+                return a.title.localeCompare(b.title);
+            });
+        }
+    },
+    watch: {
+        'parentSearchQuery': 'fetchPages'
+    },
+    methods: {
+        slugifyTitle(str) {
+            return slugify(str);
+        },
+        async fetchPages() {
+            this.isLoading = true;
+            let data = await this.pagesApi.list({ inTrash: false, page: 1, q: this.parentSearchQuery });
+            this.pagesList = data.items;
+            this.isLoading = false;
+        },
+        onSelectParent(option) {
+            this.selectedParent = option;
+            // Clear the search query after selection to reset the autocomplete
+            this.$nextTick(() => {
+                this.parentSearchQuery = '';
+            });
+        },
+        onParentSearchInput() {
+            // Clear selected parent if user starts typing
+            if (this.parentSearchQuery && this.selectedParent) {
+                this.selectedParent = null;
+            }
+        },
+        clearSelectedParent() {
+            this.selectedParent = null;
+            this.parentSearchQuery = '';
+        },
+        async submit() {
+            if (!this.title.trim()) {
+                this.$buefy.toast.open({
+                    type: 'is-danger',
+                    message: 'Please enter a title'
+                });
+                return;
+            }
+
+            this.submitting = true;
+            try {
+                let data = {
+                    title: this.title,
+                    slugPart: this.slugPart || this.slugifyTitle(this.title),
+                    parent: this.selectedParent ? this.selectedParent.id : null
+                };
+
+                let response = await this.pagesApi.create(data);
+                this.$buefy.toast.open(morphToNotification(response));
+                this.close();
+                this.$emit('created', response.item);
+                this.$router.push('/pages/' + response.item.id + '/edit');
+            } catch(e) {
+                // Error handled by API layer
+            }
+            this.submitting = false;
+        },
+        close() {
+            this.$refs.dropdown.toggle();
+            // Reset form
+            this.title = '';
+            this.slugPart = '';
+            this.parentSearchQuery = '';
+            this.selectedParent = null;
+        }
+    }
+}
+</script>
+
+<style>
+    .create-page-dropdown .dropdown-content {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .create-page-dropdown .dropdown-menu {
+        overflow: visible !important;
+        min-width: 25rem;
+    }
+
+    .create-page-dropdown .modal-card-title {
+        flex-shrink: unset;
+        flex-grow: unset;
+    }
+</style>

package/src/components/partials/CreatePartialDropdown.vue

@@ -0,0 +1,135 @@
+<template>
+    <b-dropdown
+        ref="dropdown"
+        :position="minimal ? 'is-bottom-right' : 'is-bottom-left'"
+        aria-role="menu"
+        trap-focus
+        append-to-body
+        class="create-partial-dropdown">
+        <template #trigger="{ active }">
+            <MinimalDropdownButton v-if="minimal" icon="plus"/>
+            <b-button v-else
+                      :type="active ? '' : 'is-success'"
+                      icon-left="pencil-alt"
+                      :disabled="active">
+                Create Partial
+            </b-button>
+        </template>
+
+        <b-dropdown-item aria-role="menu-item" custom paddingless>
+            <div class="modal-card" style="width: auto; overflow: visible">
+                <header class="modal-card-head has-background-success-light">
+                    <p class="modal-card-title">
+                        <b-icon icon="puzzle-piece" size="is-normal" class="push-right"></b-icon>
+                        Create Partial
+                    </p>
+                </header>
+                <section class="modal-card-body" style="overflow: visible;">
+                    <b-field label="Title">
+                        <b-input
+                            v-model="title"
+                            placeholder="e.g.: Footer Copyright Text"
+                            autofocus
+                            @keyup.enter.native="submit">
+                        </b-input>
+                    </b-field>
+
+                    <b-field label="Key" message="Leave blank to auto-generate from title">
+                        <b-input
+                            v-model="key"
+                            :placeholder="slugifyKey(title) || 'e.g.: footer.copyright'"
+                            @keyup.enter.native="submit">
+                        </b-input>
+                    </b-field>
+                </section>
+                <footer class="modal-card-foot is-flex">
+                    <div class="is-flex-grow-1"></div>
+                    <b-button @click="close">Cancel</b-button>
+                    <b-button type="is-success" :loading="submitting" @click="submit">
+                        Create Partial
+                    </b-button>
+                </footer>
+            </div>
+        </b-dropdown-item>
+    </b-dropdown>
+</template>
+
+<script>
+import PartialsApi from "../../PartialsApi.js";
+import { morphToNotification } from "../../api.js";
+import { slugifyKey } from "../../util.js";
+import MinimalDropdownButton from "../MinimalDropdownButton.vue";
+
+export default {
+    name: "CreatePartialDropdown",
+    components: { MinimalDropdownButton },
+    props: {
+        minimal: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            title: '',
+            key: '',
+            submitting: false,
+            partialsApi: new PartialsApi()
+        }
+    },
+    methods: {
+        slugifyKey(str) {
+            return slugifyKey(str);
+        },
+        async submit() {
+            if (!this.title.trim()) {
+                this.$buefy.toast.open({
+                    type: 'is-danger',
+                    message: 'Please enter a title'
+                });
+                return;
+            }
+
+            this.submitting = true;
+            try {
+                let data = {
+                    title: this.title,
+                    key: this.key || this.slugifyKey(this.title)
+                };
+
+                let response = await this.partialsApi.create(data);
+                this.$buefy.toast.open(morphToNotification(response));
+                this.close();
+                this.$emit('created', response.item);
+                this.$router.push('/partials/' + response.item.id + '/edit');
+            } catch(e) {
+                // Error handled by API layer
+            }
+            this.submitting = false;
+        },
+        close() {
+            this.$refs.dropdown.toggle();
+            // Reset form
+            this.title = '';
+            this.key = '';
+        }
+    }
+}
+</script>
+
+<style>
+    .create-partial-dropdown .dropdown-content {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .create-partial-dropdown .dropdown-menu {
+        overflow: visible !important;
+        min-width: 25rem;
+    }
+
+    .create-partial-dropdown .modal-card-title {
+        flex-shrink: unset;
+        flex-grow: unset;
+    }
+</style>

package/src/modules/Media.js

@@ -1,5 +1,6 @@
 import MediaPage from "../components/media/MediaPage.vue";
 import MediaResponsiveImages from "../components/media/MediaResponsiveImages.vue";
+import MediaUploadDropdown from "../components/media/MediaUploadDropdown.vue";
 import {WEB_CONTENT} from "../main";
 
 export default function(ui) {
@@ -10,6 +11,7 @@ export default function(ui) {
         addAction: '/media/list/?upload=true',
         addIcon: 'upload',
         addPermission: 'media.postCreate',
+        addDropdownComponent: MediaUploadDropdown,
         listAction: '/media/list',
         listPermission: 'media.getList',
         items: {

package/src/modules/PagesPartials.js

@@ -8,6 +8,8 @@ import PartialsApi from "../PartialsApi.js";
 import PartialTable from "../components/PartialTable.vue";
 import PageActions from "../components/PageActions.vue";
 import PartialActions from "../components/PartialActions.vue";
+import CreatePageDropdown from "../components/pages/CreatePageDropdown.vue";
+import CreatePartialDropdown from "../components/partials/CreatePartialDropdown.vue";
 
 export default function(ui) {
     ui.addMainMenuGroup(WEB_CONTENT, {
@@ -18,6 +20,7 @@ export default function(ui) {
         addIcon: 'plus',
         addPermission: 'pages.postCreate',
         addAction: '/pages/create',
+        addDropdownComponent: CreatePageDropdown,
         items: {
         }
     });
@@ -29,25 +32,15 @@ export default function(ui) {
         addIcon: 'plus',
         addPermission: 'partials.postCreate',
         addAction: '/partials/create',
+        addDropdownComponent: CreatePartialDropdown,
         items: {
         }
     });
 
-    const partialsProps = { displayName: 'Partials', routePrefix: 'partials', inTrash: false, tableComponent: PartialTable, actionsComponent: PartialActions, singularDisplayName: 'Partial', defaultSortField: 'title', defaultSortOrder: 'asc', resourceApi: new PartialsApi() }
-    const pagesProps = { displayName: 'Pages', routePrefix: 'pages', inTrash: false, tableComponent: PageTable, actionsComponent: PageActions, singularDisplayName: 'Page', defaultSortField: 'title', defaultSortOrder: 'asc', resourceApi: new PagesApi() }
+    const partialsProps = { displayName: 'Partials', routePrefix: 'partials', inTrash: false, tableComponent: PartialTable, actionsComponent: PartialActions, singularDisplayName: 'Partial', defaultSortField: 'title', defaultSortOrder: 'asc', resourceApi: new PartialsApi(), createDropdownComponent: CreatePartialDropdown }
+    const pagesProps = { displayName: 'Pages', routePrefix: 'pages', inTrash: false, tableComponent: PageTable, actionsComponent: PageActions, singularDisplayName: 'Page', defaultSortField: 'title', defaultSortOrder: 'asc', resourceApi: new PagesApi(), createDropdownComponent: CreatePageDropdown }
 
     ui.addAuthenticatedRoutes([
-        {
-            path: '(pages|partials)/create',
-            component: LegacyPage,
-            props: (route) => {
-                return {
-                    fullPath: route.fullPath,
-                    legacyPrefix: '/oxygen/view',
-                    adminPrefix: '/oxygen'
-                }
-            }
-        },
         {
             path: '(pages|partials)/:subpath/edit',
             component: LegacyPage,

package/src/util.js

@@ -62,4 +62,24 @@ const tryParseTelephone = (telephone) => {
     }
 };
 
-export { strEquals, convertStr, nestedGet, nestedSet, tryParseTelephone };
+const slugify = (str) => {
+    if(!str) return '';
+    return str
+        .toLowerCase()
+        .trim()
+        .replace(/[^\w\s-]/g, '')      // Remove non-word chars except spaces and hyphens
+        .replace(/[\s_-]+/g, '-')       // Replace spaces, underscores, multiple hyphens with single hyphen
+        .replace(/^-+|-+$/g, '');       // Remove leading/trailing hyphens
+};
+
+const slugifyKey = (str) => {
+    if(!str) return '';
+    return str
+        .toLowerCase()
+        .trim()
+        .replace(/[^\w\s.-]/g, '')      // Remove non-word chars except spaces, dots, and hyphens
+        .replace(/[\s_-]+/g, '.')       // Replace spaces, underscores, hyphens with dots
+        .replace(/^\.+|\.+$/g, '');     // Remove leading/trailing dots
+};
+
+export { strEquals, convertStr, nestedGet, nestedSet, tryParseTelephone, slugify, slugifyKey };

package/.idea/workspace.xml

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ChangeListManager">
-    <list default="true" id="4ad0dcde-54f6-459b-8ef0-38a17e946358" name="Changes" comment="" />
-    <option name="SHOW_DIALOG" value="false" />
-    <option name="HIGHLIGHT_CONFLICTS" value="true" />
-    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-    <option name="LAST_RESOLUTION" value="IGNORE" />
-  </component>
-  <component name="ComposerSettings">
-    <execution />
-  </component>
-  <component name="ProjectId" id="27rS1jBVazc5EdthHlwaXfJm1hC" />
-  <component name="ProjectViewState">
-    <option name="hideEmptyMiddlePackages" value="true" />
-    <option name="showLibraryContents" value="true" />
-  </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "WebServerToolWindowFactoryState": "false",
-    "last_opened_file_path": "/home/chris/code/oxygen/Components/ui"
-  }
-}]]></component>
-  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="Default task">
-      <changelist id="4ad0dcde-54f6-459b-8ef0-38a17e946358" name="Changes" comment="" />
-      <created>1650076498224</created>
-      <option name="number" value="Default" />
-      <option name="presentableId" value="Default" />
-      <updated>1650076498224</updated>
-    </task>
-    <servers />
-  </component>
-</project>