OSOE-338: Upgrade to Vue.js v3 in Lombiq.VueJs

Lombiq.VueJs.Samples/Assets/Scripts/VueComponents/demo-sfc.vue

@@ -2,14 +2,14 @@
     <!-- This is the template of the component. If you have IDE plugin for Vue.js, this format
          affords you first-class Vue.js coding support. -->
     <div class="DemoSfc__wrapper">
-        <select class="DemoSfc__select" @change="$emit('input', parseInt($event.target.value))">
+        <select class="DemoSfc__select" @change="$emit('update:model-value', parseInt($event.target.value))">
             <!-- Note the bound "key" property - it must be unique and you should always include
                  it for performance reasons. Also the "value" binding is not strictly necessary
                  but can be useful for communicating value with external libraries, e.g. with
                  other JS scripts or during UI testing. -->
             <option v-for="n in max"
                     :key="'demo-sfc-' + n"
-                    :selected="value === n"
+                    :selected="modelValue === n"
                     :value="n">
                 {{ n }}
             </option>
@@ -31,11 +31,9 @@ export default {
     // added during compilation.
     // name: "demo-sfc",
 
-    // Here we declare a required and an optional property, both are validated to be numeric. The
-    // "value" here is a special property name, along with the "input" event name. They together
-    // make up the input and output part of the "v-model" directive you saw in the cshtml.
+    // Here we declare a required and an optional property, both are validated to be numeric.
     props: {
-        value: {
+        modelValue: {
             type: Number,
             required: true,
         },
@@ -45,11 +43,17 @@ export default {
         },
     },
 
+    // If you use the <vue-component-app> tag helper, the parent component automatically accepts matching "update:*"
+    // events for all provided model props. If you declare the "emits" option like below, then only those that are also
+    // listed here. This way props meant to be read-only won't get the same two-way binding and you won't see annoying
+    // warnings if you use the "Vue.js devtools" browser extension.
+    emits: ['update:model-value'],
+
     // Computed properties are like getters, but they are cached and reactive. For example this
-    // one is only re-evaluated if self.value changes which triggers an update.
+    // one is only re-evaluated if self.modelValue changes which triggers an update.
     computed: {
         repeaterData(self) {
-            return Array.from({ length: self.value })
+            return Array.from({ length: self.modelValue })
                 .map((_, i) => `DemoRepeater__listItem_${i + 1}`);
         },
     },

Lombiq.VueJs.Samples/Assets/Scripts/VueComponents/enhancement-control.vue

@@ -4,22 +4,22 @@
              event handling boilerplate -->
         <button type="button"
                 class="btn btn-primary"
-                :class="{ disabled: value <= 1 }"
-                @click.prevent="$emit('input', value - 1)">
+                :class="{ disabled: modelValue <= 1 }"
+                @click.prevent="$emit('update:model-value', modelValue - 1)">
             [[ << ]]
         </button>
         <button v-for="page in max"
                 :key="'pager-' + page"
                 class="btn btn-primary"
-                :class="{ disabled: page === value }"
+                :class="{ disabled: page === modelValue }"
                 type="button"
-                @click.prevent="$emit('input', page)">
+                @click.prevent="$emit('update:model-value', page)">
             {{ page }}
         </button>
         <button type="button"
                 class="btn btn-primary"
-                :class="{ disabled: value >= max }"
-                @click.prevent="$emit('input', value + 1)">
+                :class="{ disabled: modelValue >= max }"
+                @click.prevent="$emit('update:model-value', modelValue + 1)">
             [[ >> ]]
         </button>
     </div>
@@ -28,7 +28,7 @@
 <script>
 export default {
     props: {
-        value: {
+        modelValue: {
             type: Number,
             required: true,
         },
@@ -37,6 +37,7 @@ export default {
             required: true,
         },
     },
+    emits: ['update:model-value'],
 };
 
 // NEXT STATION: Assets/Scripts/VueComponents/enhancement-table-body.vue

Lombiq.VueJs.Samples/Assets/Scripts/VueComponents/qr-card.vue

@@ -5,7 +5,7 @@
                 <div class="card">
                     <div class="card-body">
                         <h5 v-if="!loading && !error">[[ Scan code ]]</h5>
-                        <qrcode-stream @decode="onDecode" @init="onInit" :track="paintOutline">
+                        <qrcode-stream :track="paintOutline" @detect="onDetect" @init="onInit" @error="onError">
                             <loading-indicator v-if="loading">
                                 [[ Loading ... ]]
                             </loading-indicator>
@@ -40,10 +40,19 @@
 </template>
 
 <script>
-import { QrcodeStream } from '../../../node_modules/vue-qrcode-reader';
+import { QrcodeStream } from 'vue-qrcode-reader';
 import LoadingIndicator from './loading-indicator.vue';
 import BusinessCard from './business-card.vue';
 
+function tryParseJson(text) {
+    try {
+        return JSON.parse(text);
+    }
+    catch {
+        return {};
+    }
+}
+
 export default {
     components: {
         QrcodeStream,
@@ -65,18 +74,14 @@ export default {
         };
     },
     methods: {
-        onDecode(result) {
-            const content = ((text) => {
-                try {
-                    return JSON.parse(text);
-                }
-                catch {
-                    return {};
-                }
-            })(result);
+        onDetect(detectedCodes) {
+            const json = detectedCodes
+                .filter((code) => code.format === 'qr_code' && code.rawValue)
+                .map((code) => code.rawValue)[0];
+            const cardId = tryParseJson(json).cardId;
 
-            this.cardId = content.cardId;
-            this.scanError = content.cardId ? '' : 'InvalidCard';
+            this.cardId = cardId;
+            this.scanError = cardId ? '' : 'InvalidCard';
         },
         async onInit(promise) {
             this.loading = true;
@@ -91,6 +96,9 @@ export default {
                 this.loading = false;
             }
         },
+        onError(error) {
+            this.error = error.name;
+        },
         paintOutline(detectedCodes, ctx) {
             for (const detectedCode of detectedCodes) {
                 const [firstPoint, ...otherPoints] = detectedCode.cornerPoints;

Lombiq.VueJs.Samples/Constants/ResourceNames.cs

@@ -2,8 +2,6 @@ namespace Lombiq.VueJs.Samples.Constants;
 
 public static class ResourceNames
 {
-    public const string DemoApp = nameof(DemoApp);
-
     public const string DemoSfc = "demo-sfc";
     public const string DemoRepeater = "demo-repeater";
 

Lombiq.VueJs.Samples/Navigation/VueJsNavigationProvider.cs

@@ -0,0 +1,29 @@
+using Lombiq.HelpfulLibraries.OrchardCore.Navigation;
+using Lombiq.VueJs.Samples.Controllers;
+using Microsoft.AspNetCore.Http;
+using Microsoft.Extensions.Localization;
+using OrchardCore.Navigation;
+
+namespace Lombiq.VueJs.Samples.Navigation;
+
+public class VueJsNavigationProvider : MainMenuNavigationProviderBase
+{
+    public VueJsNavigationProvider(
+        IHttpContextAccessor hca,
+        IStringLocalizer<VueJsNavigationProvider> stringLocalizer)
+        : base(hca, stringLocalizer)
+    {
+    }
+
+    protected override void Build(NavigationBuilder builder) =>
+        builder
+            .Add(T["Vue.js"], builder => builder
+                .Add(T["Vue Single File Component (SFC)"], itemBuilder => itemBuilder
+                    .Action<VueSfcController>(_hca.HttpContext, controller => controller.Index()))
+                .Add(T["Standalone SFC with Tag Helper"], itemBuilder => itemBuilder
+                    .Action<VueSfcController>(_hca.HttpContext, controller => controller.AppTagHelper()))
+                .Add(T["Progressive Enhancement"], itemBuilder => itemBuilder
+                    .Action<VueSfcController>(_hca.HttpContext, controller => controller.EnhancedList(1)))
+                .Add(T["QR Card"], itemBuilder => itemBuilder
+                    .Action<QrCardController>(_hca.HttpContext, controller => controller.Index())));
+}

Lombiq.VueJs.Samples/ResourceManagementOptionsConfiguration.cs

@@ -1,24 +1,16 @@
 using Lombiq.VueJs.Extensions;
 using Microsoft.Extensions.Options;
 using OrchardCore.ResourceManagement;
-using static Lombiq.VueJs.Samples.Constants.FeatureIds;
 using static Lombiq.VueJs.Samples.Constants.ResourceNames;
 
 namespace Lombiq.VueJs.Samples;
 
 public class ResourceManagementOptionsConfiguration : IConfigureOptions<ResourceManagementOptions>
 {
-    private const string Root = "~/" + Area;
-
     private static readonly ResourceManifest _manifest = new();
 
     static ResourceManagementOptionsConfiguration()
     {
-        // This resource will be required for our demo Vue.js application.
-        _manifest
-            .DefineScript(DemoApp)
-            .SetUrl(Root + "/apps/demo.min.js", Root + "/apps/demo.js");
-
         // This resource is not strictly required, but it tells the <vue-component> tag helper which other shapes it
         // needs to import. As you can see we don't use SetUrl. Only SetDependencies is used if there are any.
         _manifest

Lombiq.VueJs.Samples/Startup.cs

@@ -1,10 +1,12 @@
 using Lombiq.HelpfulLibraries.Common.DependencyInjection;
 using Lombiq.VueJs.Samples.Migrations;
+using Lombiq.VueJs.Samples.Navigation;
 using Lombiq.VueJs.Samples.TagHelpers;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Options;
 using OrchardCore.Data.Migration;
 using OrchardCore.Modules;
+using OrchardCore.Navigation;
 using OrchardCore.ResourceManagement;
 
 namespace Lombiq.VueJs.Samples;
@@ -15,5 +17,6 @@ public override void ConfigureServices(IServiceCollection services) =>
         services.AddTransient<IConfigureOptions<ResourceManagementOptions>, ResourceManagementOptionsConfiguration>()
             .AddScoped<IDataMigration, BusinessCardMigrations>()
             .AddTagHelpers<QrCodeTagHelper>()
+            .AddScoped<INavigationProvider, VueJsNavigationProvider>()
             .AddLazyInjectionSupport();
 }

Lombiq.VueJs.Samples/Views/ContentPart.Edit-BusinessCard.cshtml

@@ -1,5 +1,3 @@
-@using OrchardCore.ContentManagement
-
 @foreach (var shape in Model)
 {
     @await DisplayAsync(shape)

Lombiq.VueJs.Samples/Views/QrCard/Index.cshtml

@@ -1,13 +1,5 @@
 @model Lombiq.VueJs.Samples.ViewModels.QrCardAppViewModel
 
-<vue-component area="@FeatureIds.Area" name="@ResourceNames.QrCard" />
-<div id="qrCardApp">
-    <qr-card api-url="@Model.ApiUrl">
-    </qr-card>
-</div>
-
-<script at="Foot" depends-on="@ResourceNames.QrCard">
-    window.app = new Vue({
-        el: '#qrCardApp',
-    });
-</script>
+@* This is the simplest use of the SFC app tag helper, the vue file is located in the same module as this view, so the
+   area attribute is automatically resolved. You only need the resource name and the model. *@
+<vue-component-app name="@ResourceNames.QrCard" model="@Model" />