Merge pull request #52 from apostrophecms/vue3-migration

updates components for vue 3
apostrophecms · Mar 12, 2024 · 46a40dc · 46a40dc
2 parents 1e8abdc + 038405a
commit 46a40dc
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,13 +1,19 @@
 # Changelog
 
-## UNRELEASED
+## 1.4.0 (2024-03-12)
+
+### Changes
+
+* Compatible with both Apostrophe 3.x and Apostrophe 4.x (both Vue 2 and Vue 3).
 
 ### Fixes
 
 * Bug fix. When a piece or a page is created, published, then unpublished, and subsequently exported and re-imported, the manager modal incorrectly showed no published version. This occurs because the `lastPublishedAt` property of the draft document was set to null upon import, misleading the representation of the document's published state. Now it retains the original document's `lastPublishedAt` value.
 
 ## 1.3.0 (2024-02-21)
 
+### Changes
+
 * Requires the create and edit permissions to use the import utility operation
 
 ## 1.2.1 (2024-01-24)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@apostrophecms/import-export",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Import Export Documents for ApostropheCMS 3.",
   "main": "index.js",
   "scripts": {
@@ -37,4 +37,4 @@
     "lodash": "^4.17.21",
     "tar-stream": "^3.1.6"
   }
-}
+}
diff --git a/ui/apos/components/AposDuplicateImportModal.vue b/ui/apos/components/AposDuplicateImportModal.vue
@@ -264,7 +264,7 @@ export default {
   justify-content: center;
 }
 
-::v-deep .apos-modal__inner {
+:deep(.apos-modal__inner) {
   top: auto;
   right: auto;
   bottom: auto;
@@ -273,27 +273,27 @@ export default {
   text-align: left;
 }
 
-::v-deep .apos-modal__overlay {
+:deep(.apos-modal__overlay) {
   .apos-modal+.apos-export & {
     display: block;
   }
 }
 
-::v-deep .apos-modal__body {
+:deep(.apos-modal__body) {
   padding: 30px 20px;
 }
 
-::v-deep .apos-modal__body-main {
+:deep(.apos-modal__body-main) {
   display: flex;
   flex-direction: column;
   align-items: baseline;
 }
 
-::v-deep .apos-toggle__slider {
+:deep(.apos-toggle__slider) {
   display: flex;
 }
 
-::v-deep .apos-input--select {
+:deep(.apos-input--select) {
   text-transform: capitalize;
 }
 
@@ -336,7 +336,7 @@ export default {
 }
 
 // Override button to style it exactly like other checkboxes
-::v-deep .apos-toggle {
+:deep(.apos-toggle) {
   .apos-button {
     padding: 0;
     transition: all 0.1s ease-in-out;
@@ -360,7 +360,7 @@ export default {
   }
 }
 
-::v-deep .apos-toggle--blank {
+:deep(.apos-toggle--blank) {
   .apos-button {
     border-color: var(--a-base-4);
     background-color: var(--a-base-10);
@@ -399,7 +399,7 @@ export default {
   }
 }
 
-::v-deep .apos-schema .apos-field {
+:deep(.apos-schema .apos-field) {
   margin-bottom: $spacing-base;
 }
 
@@ -412,7 +412,7 @@ export default {
   gap: 20px;
 }
 
-.apos-import-duplicate__btn ::v-deep .apos-button__label {
+.apos-import-duplicate__btn :deep(.apos-button__label) {
   text-transform: capitalize;
 }
 

diff --git a/ui/apos/components/AposExportModal.vue b/ui/apos/components/AposExportModal.vue
@@ -300,7 +300,7 @@ export default {
   justify-content: center;
 }
 
-::v-deep .apos-modal__inner {
+:deep(.apos-modal__inner) {
   top: auto;
   right: auto;
   bottom: auto;
@@ -309,28 +309,28 @@ export default {
   text-align: left;
 }
 
-::v-deep .apos-modal__overlay {
+:deep(.apos-modal__overlay) {
   .apos-modal+.apos-export & {
     display: block;
   }
 }
 
-::v-deep .apos-modal__body {
+:deep(.apos-modal__body) {
   padding: 30px 20px;
   width: 375px;
 }
 
-::v-deep .apos-modal__body-main {
+:deep(.apos-modal__body-main) {
   display: flex;
   flex-direction: column;
   align-items: baseline;
 }
 
-::v-deep .apos-toggle__slider {
+:deep(.apos-toggle__slider) {
   display: flex;
 }
 
-::v-deep .apos-input--select {
+:deep(.apos-input--select) {
   text-transform: capitalize;
 }
 
@@ -404,7 +404,7 @@ export default {
   right: 0;
 }
 
-::v-deep .apos-schema .apos-field {
+:deep(.apos-schema) .apos-field {
   margin-bottom: $spacing-base;
 }
 
@@ -417,7 +417,7 @@ export default {
   gap: 20px;
 }
 
-.apos-export__btn ::v-deep .apos-button__label {
+.apos-export__btn :deep(.apos-button__label) {
   text-transform: capitalize;
 }
 

diff --git a/ui/apos/components/AposImportModal.vue b/ui/apos/components/AposImportModal.vue
@@ -210,26 +210,24 @@ export default {
   }
 }
 
-::v-deep {
-  .apos-modal__inner {
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-    max-width: 700px;
-    height: auto;
-    text-align: left;
-  }
+:deep(.apos-modal__inner) {
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  max-width: 700px;
+  height: auto;
+  text-align: left;
+}
 
-  .apos-modal__body-main {
-    display: flex;
-    flex-direction: column;
-    align-items: baseline;
-  }
+:deep(.apos-modal__body-main) {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+}
 
-  .apos-modal__body {
-    padding: 30px 20px;
-  }
+:deep(.apos-modal__body) {
+  padding: 30px 20px;
 }
 
 </style>