feat: established vue3 compatibility (#232)

FriendsOfShopware · Nov 24, 2023 · 2cd2981 · 2cd2981
1 parent 081f029
commit 2cd2981
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 14 deletions.
diff --git a/...s/app/administration/src/module/frosh-tools/component/frosh-tools-tab-files/template.twig b/...s/app/administration/src/module/frosh-tools/component/frosh-tools-tab-files/template.twig
@@ -1,20 +1,27 @@
 <sw-card-view>
-    <sw-card class="frosh-tools-tab-files__files-card" :class="isLoadingClass" :title="$tc('frosh-tools.tabs.files.title')" :isLoading="isLoading" :large="true">
+    <sw-card class="frosh-tools-tab-files__files-card"
+             :class="isLoadingClass"
+             :title="$tc('frosh-tools.tabs.files.title')"
+             :isLoading="isLoading"
+             :large="true"
+            positionIdentifier="frosh-tools-tab-files__files-card">
         <sw-alert variant="error" v-if="items.error">{{ items.error }}</sw-alert>
 
         <sw-alert variant="success" v-if="items.ok">{{ $tc('frosh-tools.tabs.files.allFilesOk') }}</sw-alert>
         <sw-alert variant="warning" v-else-if="items.files">{{ $tc('frosh-tools.tabs.files.notOk') }}</sw-alert>
 
         <template #toolbar>
             <!-- @todo: Make the refresh button fancy -->
-            <sw-button variant="ghost" @click="refresh"><sw-icon :small="true" name="regular-undo"></sw-icon></sw-button>
+            <sw-button variant="ghost" @click="refresh">
+                <sw-icon :small="true" name="regular-undo"></sw-icon>
+            </sw-button>
         </template>
 
         <sw-data-grid
-            v-if="items.files && items.files.length"
-            :showSelection="false"
-            :dataSource="items.files"
-            :columns="columns">
+                v-if="items.files && items.files.length"
+                :showSelection="false"
+                :dataSource="items.files"
+                :columns="columns">
 
             <template #column-name="{ item }">
                 <a @click="diff(item)" :title="$tc('frosh-tools.tabs.files.restore.diff')">{{ item.name }}</a>
@@ -43,7 +50,7 @@
 
         <span style="white-space: pre" v-html="diffData.html"></span>
 
-        <template slot="modal-footer">
+        <template #modal-footer>
             <sw-button variant="ghost-danger"
                        @click="restoreFile(diffData.file.name)"
                        :disabled="diffData.file.expected">

diff --git a/...es/app/administration/src/module/frosh-tools/component/frosh-tools-tab-logs/template.twig b/...es/app/administration/src/module/frosh-tools/component/frosh-tools-tab-logs/template.twig
@@ -15,8 +15,13 @@
                 :placeholder="$tc('frosh-tools.tabs.logs.logFileSelect.placeholder')"
                 labelProperty="name"
                 valueProperty="name"
-                v-model="selectedLogFile"
-                @change="onFileSelected"
+                {% if VUE3 %}
+                    v-model:value="selectedLogFile"
+                    @update:value="onFileSelected"
+                {% else %}
+                    v-model="selectedLogFile"
+                    @change="onFileSelected"
+                {% endif %}
             ></sw-single-select>
         </template>
 
@@ -25,10 +30,10 @@
             :showActions="false"
             :dataSource="logEntries"
             :columns="columns">
-            <template slot="column-date" slot-scope="{ item }">
+            <template #column-date="{ item }">
                 {{ item.date | date({hour: '2-digit', minute: '2-digit', second: '2-digit'}) }}
             </template>
-            <template slot="column-message" slot-scope="{ item }">
+            <template #column-message="{ item }">
                 <a @click="showInfoModal(item)">{{ item.message }}</a>
             </template>
         </sw-data-grid>
@@ -44,7 +49,7 @@
     <sw-modal v-if="displayedLog"
               variant="large">
 
-        <template slot="modal-header">
+        <template #modal-header>
             <div class="sw-modal__titles">
                 <h4 class="sw-modal__title">
                     {{ displayedLog.channel }} - {{ displayedLog.level }}

diff --git a/...ration/src/module/frosh-tools/component/frosh-tools-tab-state-machines/template.html.twig b/...ration/src/module/frosh-tools/component/frosh-tools-tab-state-machines/template.html.twig
@@ -24,7 +24,11 @@
                 v-model="selectedStateMachine"
                 entity="state_machine"
                 :aside="true"
-                @change="onStateMachineChange"
+                {% if VUE3 %}
+                    @update:value="onStateMachineChange"
+                {% else %}
+                    @change="onStateMachineChange"
+                {% endif %}
                 :label="$tc('frosh-tools.tabs.state-machines.label')"
                 :placeholder="$tc('frosh-tools.chooseStateMachine')"
                 :helpText="$tc('frosh-tools.tabs.state-machines.helpText')"

diff --git a/src/Resources/app/administration/src/module/frosh-tools/page/index/frosh-tools.scss b/src/Resources/app/administration/src/module/frosh-tools/page/index/frosh-tools.scss
@@ -6,6 +6,7 @@
 
     .sw-card-view__content {
         padding-top: 0;
+        width: 1330px;
     }
     .sw-card-view {
         position: initial;

diff --git a/src/Resources/app/administration/src/module/frosh-tools/page/index/template.twig b/src/Resources/app/administration/src/module/frosh-tools/page/index/template.twig
@@ -1,5 +1,5 @@
 <sw-page class="frosh-tools">
-    <template slot="content">
+    <template #content>
         <sw-container>
             <sw-tabs :small="false" positionIdentifier="frosh-tools-tabs">
                 <sw-tabs-item :route="{ name: 'frosh.tools.index.index' }">