Bump @nextcloud/vue from 5.4.0 to 7.0.1

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## [Unreleased]
 
+### Fixed
+- Allow import of recipes with HowToSections
+  [#1255](https://github.com./nextcloud/cookbook/pull/1255) @christianlupus
 
 
 ## 0.9.17 - 2022-10-31
@@ -8,7 +11,7 @@
 - Add alarm sound to timers
   [#1120](https://github.com./nextcloud/cookbook/pull/1120) @MarcelRobitaille
 - Allow import of recipes with HowToSections
-  [#1300](https://github.com./nextcloud/cookbook/pull/1282) @christianlupus
+  [#1300](https://github.com./nextcloud/cookbook/pull/1300) @christianlupus
 
 ### Changed
 - Create build script for GitHub pages with GitHub actions to allow for custom building

package.json

@@ -33,7 +33,7 @@
     "@nextcloud/event-bus": "3.0.2",
     "@nextcloud/moment": "^1.1.1",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^5.1.0",
+    "@nextcloud/vue": "^7.0.1",
     "caret-pos": "2.0.0",
     "linkifyjs": "^4.0.0",
     "lozad": "^1.16.0",

src/components/AppControls/AppControls.vue

@@ -53,18 +53,18 @@
             />
         </div>
         {{/* Primary buttons */}}
-        <SimpleButton
+        <NcButton
             v-if="isRecipe"
             type="primary"
             :aria-label="t('cookbook', 'Edit')"
-            @click="goToRecipe($store.state.recipe.id)"
+            @click="goToRecipeEdit($store.state.recipe.id)"
         >
             <template #icon>
                 <PencilIcon :size="20" />
             </template>
             {{ t("cookbook", "Edit") }}
-        </SimpleButton>
-        <SimpleButton
+        </NcButton>
+        <NcButton
             v-if="isEdit || isCreate"
             type="primary"
             :aria-label="t('cookbook', 'Save')"
@@ -79,32 +79,32 @@
                 <CheckmarkIcon v-else :size="20" />
             </template>
             {{ t("cookbook", "Save") }}
-        </SimpleButton>
+        </NcButton>
         <!-- This is clumsy design but the component cannot display just one input element on the breadcrumbs bar -->
-        <Actions
+        <NcActions
             v-if="isIndex"
             default-icon="icon-search-white"
             :menu-title="t('cookbook', 'Search')"
             :primary="true"
         >
-            <ActionInput
+            <NcActionInput
                 icon="icon-quota"
                 :value="filterValue"
                 @update:value="updateFilters"
             >
                 {{ t("cookbook", "Filter") }}
-            </ActionInput>
-            <ActionInput icon="icon-search" @submit="search">
+            </NcActionInput>
+            <NcActionInput icon="icon-search" @submit="search">
                 {{ t("cookbook", "Search") }}
-            </ActionInput>
-        </Actions>
+            </NcActionInput>
+        </NcActions>
         {{/* Overflow buttons (3-dot menu) */}}
-        <Actions
+        <NcActions
             v-if="isRecipe || isEdit"
             :force-menu="true"
             class="overflow-menu"
         >
-            <ActionButton
+            <NcActionButton
                 v-if="isEdit"
                 :icon="
                     $store.state.reloadingRecipe === parseInt($route.params.id)
@@ -116,8 +116,26 @@
                 @click="reloadRecipeEdit()"
             >
                 {{ t("cookbook", "Reload recipe") }}
-            </ActionButton>
-            <ActionButton
+            </NcActionButton>
+            <NcActionButton
+                v-if="isEdit"
+                class="action-button"
+                :aria-label="t('cookbook', 'Abort editing')"
+                @click="goToRecipe($store.state.recipe.id)"
+            >
+                {{ t("cookbook", "Abort editing") }}
+                <template #icon>
+                    <NcLoadingIcon
+                        v-if="
+                            $store.state.reloadingRecipe ===
+                            parseInt($route.params.id)
+                        "
+                        :size="20"
+                    />
+                    <eye-icon v-else :size="20" />
+                </template>
+            </NcActionButton>
+            <NcActionButton
                 v-if="isRecipe"
                 :icon="
                     $store.state.reloadingRecipe === parseInt($route.params.id)
@@ -129,40 +147,42 @@
                 @click="reloadRecipeView()"
             >
                 {{ t("cookbook", "Reload recipe") }}
-            </ActionButton>
-            <ActionButton
+            </NcActionButton>
+            <NcActionButton
                 v-if="isRecipe"
                 class="action-button"
                 :aria-label="t('cookbook', 'Print recipe')"
                 @click="printRecipe()"
             >
                 <template #icon=""><printer-icon :size="20" /></template>
                 {{ t("cookbook", "Print recipe") }}
-            </ActionButton>
-            <ActionButton
+            </NcActionButton>
+            <NcActionButton
                 v-if="isRecipe"
                 icon="icon-delete"
                 class="action-button"
                 :aria-label="t('cookbook', 'Delete recipe')"
                 @click="deleteRecipe()"
             >
                 {{ t("cookbook", "Delete recipe") }}
-            </ActionButton>
-        </Actions>
+            </NcActionButton>
+        </NcActions>
     </div>
 </template>
 
 <script>
-import Actions from "@nextcloud/vue/dist/Components/Actions"
-import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
+import NcActions from "@nextcloud/vue/dist/Components/NcActions"
+import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton"
 // Cannot use `Button` else get `vue/no-reserved-component-names` eslint errors
-import SimpleButton from "@nextcloud/vue/dist/Components/Button"
-import ActionInput from "@nextcloud/vue/dist/Components/ActionInput"
+import NcButton from "@nextcloud/vue/dist/Components/NcButton"
+import NcActionInput from "@nextcloud/vue/dist/Components/NcActionInput"
+import NcLoadingIcon from "@nextcloud/vue/dist/Components/NcLoadingIcon"
 
 import PencilIcon from "icons/Pencil.vue"
 import LoadingIcon from "icons/Loading.vue"
 import CheckmarkIcon from "icons/Check.vue"
 import PrinterIcon from "icons/Printer.vue"
+import EyeIcon from "icons/Eye.vue"
 
 import helpers from "cookbook/js/helper"
 import {
@@ -176,14 +196,16 @@ import ModeIndicator from "./ModeIndicator.vue"
 export default {
     name: "AppControls",
     components: {
-        Actions,
-        ActionButton,
-        ActionInput,
+        NcActions,
+        NcActionButton,
+        NcActionInput,
+        NcLoadingIcon,
         PrinterIcon,
-        SimpleButton,
+        NcButton,
         PencilIcon,
         LoadingIcon,
         CheckmarkIcon,
+        EyeIcon,
         ModeIndicator,
         Location,
     },
@@ -301,6 +323,9 @@ export default {
             this.$root.$emit("applyRecipeFilter", e)
         },
         goToRecipe(id) {
+            helpers.goTo(`/recipe/${id}`)
+        },
+        goToRecipeEdit(id) {
             helpers.goTo(`/recipe/${id}/edit`)
         },
     },
@@ -312,7 +337,7 @@ export default {
     /* 44px is the height of nextcloud/vue button (not exposed as a variable :[ ) */
     --nc-button-size: 44px;
 
-    --vertical-padding: 8px;
+    --vertical-padding: 4px;
 
     /* Sticky is better than fixed because fixed takes the element out of flow,
      which breaks the height, putting elements underneath */
@@ -322,7 +347,7 @@ export default {
     z-index: 2;
 
     /* The height of the nextcloud header */
-    top: var(--header-height);
+    top: 0px;
     display: flex;
     width: 100%;
     /* Make sure the wrapper is always at least as tall as the tallest element

src/components/AppInvalidGuest.vue

@@ -1,6 +1,6 @@
 <template>
-    <Content app-name="cookbook">
-        <AppContent>
+    <NcContent app-name="cookbook">
+        <NcAppContent>
             <div class="main">
                 <div class="dialog">
                     <div class="message">
@@ -19,20 +19,20 @@
                     </div>
                 </div>
             </div>
-        </AppContent>
-    </Content>
+        </NcAppContent>
+    </NcContent>
 </template>
 
 <script>
-import Content from "@nextcloud/vue/dist/Components/Content"
-import AppContent from "@nextcloud/vue/dist/Components/AppContent"
+import NcContent from "@nextcloud/vue/dist/Components/NcContent"
+import NcAppContent from "@nextcloud/vue/dist/Components/NcAppContent"
 
 export default {
     name: "InvalidGuest",
     components: {
         // eslint-disable-next-line vue/no-reserved-component-names
-        Content,
-        AppContent,
+        NcContent,
+        NcAppContent,
     },
     methods: {
         selectFolder() {

src/components/AppMain.vue

@@ -1,7 +1,7 @@
 <template>
-    <Content app-name="cookbook">
+    <NcContent app-name="cookbook">
         <AppNavi class="app-navigation" />
-        <AppContent>
+        <NcAppContent>
             <div>
                 <AppControls />
                 <div class="cookbook-app-content">
@@ -14,27 +14,27 @@
                 :class="{ 'stay-open': isNavigationOpen }"
                 @click="closeNavigation"
             />
-        </AppContent>
+        </NcAppContent>
         <dialogs-wrapper></dialogs-wrapper>
-    </Content>
+    </NcContent>
 </template>
 
 <script>
 import isMobile from "@nextcloud/vue/dist/Mixins/isMobile"
-import AppContent from "@nextcloud/vue/dist/Components/AppContent"
-import Content from "@nextcloud/vue/dist/Components/Content"
+import NcAppContent from "@nextcloud/vue/dist/Components/NcAppContent"
+import NcContent from "@nextcloud/vue/dist/Components/NcContent"
 import AppControls from "cookbook/components/AppControls/AppControls.vue"
 import { emit, subscribe, unsubscribe } from "@nextcloud/event-bus"
 import AppNavi from "./AppNavi.vue"
 
 export default {
     name: "AppMain",
     components: {
-        AppContent,
+        NcAppContent,
         AppControls,
         AppNavi,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Content,
+        NcContent,
     },
     mixins: [isMobile],
     data() {