Merge branch 'io-1304' into test

CHANGELOG.md

@@ -9,11 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- **Breaking change:** Added VUE3 support.
 - Added configuration files to .npmignore.
 - Added VUE apps names to the components so they are easier to identify in Vue devtools applist.
 - Added nowrap and truncated as modifiers to typography.
 - Added links to the designmanual in typography and icons to clearify font installation.
-- Added keyboard functionality to datepicker component and upgraded to new version.
+- **Breaking change:** Added keyboard functionality to datepicker component and upgraded to new version.
 - Added nowrap and truncated as modifiers to typography.
 - Added new custom width and height classes.
 - Added focus outline on keyboard navigation.
@@ -23,7 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Changed accordion heading to be inside ods-accordion
+- Changed accordion heading to be inside ods-accordion.
 - Changed font-weight in video heading and refactored to correct scss setup.
 - Updated package version for stylelint.
 - **Breaking change:** Updated checkbox and radio component according to adjustments from design (Figma), both now have label options, correct spacing and correct font size and weight. Also changed naming of modifiers to be more consistent with other components.
@@ -46,8 +47,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Removed
 
-- Removed twitter icon.
-- Removed remaining old styleguide files.
+- **Breaking change:** Removed VUE2 support.
+- **Breaking change:** Removed twitter icon.
+- **Breaking change:** Removed remaining old styleguide files.
 
 ## [1.1.0] - 16.02.2024
 

src/components/form/input/input.scss

@@ -35,6 +35,10 @@
     @extend %ods-margin-bottom-1;
   }
 
+  &--error {
+    @extend %ods-margin-bottom-1;
+  }
+
   &__label {
     @include mixins.form-label;
   }

src/components/form/input/input.vue

@@ -7,7 +7,7 @@
     </label>
   </div>
   <div class="ods-status-message ods-status-message--danger" v-if="errorMessage">
-    <h2 class="ods-status-message__heading" :id="errorId"><span class="ods-status-message__icon ods-icon--error-hexa" aria-hidden="true"></span>Error message</h2>
+    <h2 class="ods-status-message__heading" :id="errorId"><span class="ods-status-message__icon ods-icon--error-hexa" aria-hidden="true"></span>{{ errorMessage }}</h2>
   </div>
 </template>
 <script>

src/components/form/textarea/textarea.vue

@@ -5,7 +5,7 @@
       <textarea v-model="textModel" :name="name" :aria-describedby="conditionalErrorId" :aria-required="ariaRequired ? 'true' : null" class="ods-textarea__textarea" :rows="rows" :placeholder="placeholder"></textarea>
     </label>
     <div class="ods-status-message ods-status-message--danger" v-if="errorMessage">
-      <h2 class="ods-status-message__heading" :id="errorId"><span class="ods-status-message__icon ods-icon--error-hexa" aria-hidden="true"></span>Error message</h2>
+      <h2 class="ods-status-message__heading" :id="errorId"><span class="ods-status-message__icon ods-icon--error-hexa" aria-hidden="true"></span>{{ errorMessage }}</h2>
     </div>
   </div>
 </template>

src/components/map/map.js

@@ -72,7 +72,11 @@ document.addEventListener('DOMContentLoaded', () => {
       name: 'OdsMapApp4',
       components: { OdsMap },
       mounted() {
-        this.$refs.odsMap4.resize();
+        this.$nextTick(() => {
+          if (this.$refs.odsMap4) {
+            this.$refs.odsMap4.resize();
+          }
+        });
       },
 
       methods: {