@energie360/ui-library 0.1.12 → 0.1.14

package/components/index.js

@@ -48,3 +48,4 @@ export { default as UContextMenuLink } from './context-menu-link/u-context-menu-
 export { default as UContextMenuDivider } from './context-menu-divider/u-context-menu-divider.vue'
 export { default as UCircularProgress } from './circular-progress/u-circular-progress.vue'
 export { default as UProgressAvatar } from './progress-avatar/u-progress-avatar.vue'
+export { default as UWelcome } from './welcome/u-welcome.vue'

package/components/language-nav/u-language-nav.vue

@@ -7,17 +7,20 @@ interface LanguageSwitch {
 }
 
 interface Props {
-  links: LanguageSwitch[]
+  links?: LanguageSwitch[]
 }
 
-defineProps<Props>()
+const { links = [] } = defineProps<Props>()
 </script>
 
 <template>
   <nav class="language-nav">
-    <template v-for="(link, idx) in links" :key="idx">
-      <p v-if="link.isActive">{{ link.label }}</p>
-      <a v-else :href="link.href" :hreflang="link.hreflang">{{ link.label }}</a>
+    <slot v-if="links.length === 0" />
+    <template v-else>
+      <template v-for="(link, key) in links" :key>
+        <p v-if="link.isActive">{{ link.label }}</p>
+        <a v-else :href="link.href" :hreflang="link.hreflang">{{ link.label }}</a>
+      </template>
     </template>
   </nav>
 </template>

package/components/welcome/u-welcome.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// import { Image } from '../../elements/types'
+
+interface Props {
+  text?: string
+  //   image: Image
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="welcome-container">
+    <div class="welcome-content">
+      <slot>
+        <h2 v-if="text">{{ text }}</h2>
+      </slot>
+    </div>
+    <!-- TODO: Add image whenever is ready -->
+    <!-- <div class="welcome-image">
+        <img src="path/to/image.jpg" alt="Welcome Image" />
+    </div> -->
+  </div>
+</template>
+
+<style scoped lang="scss" src="./welcome.scss"></style>

package/components/welcome/welcome.scss

@@ -0,0 +1,24 @@
+@use '../../base/abstracts/' as a;
+
+.welcome-container {
+  @include a.type(500, strong);
+  background-color: var(--e-c-primary-01-100);
+  border-radius: var(--e-brd-radius-2);
+  color: var(--e-c-primary-01-950);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--e-space-8) var(--e-space-6);
+
+  @include a.bp(m) {
+    padding: var(--e-space-3) var(--e-space-4);
+  }
+}
+
+// .welcome-content {
+
+// }
+
+// TODO: Add styles for the welcome image whenever is ready
+// .welcome-image {
+
+// }

package/elements/select/u-select.vue

@@ -2,7 +2,7 @@
 import { FormFieldBase } from '../form-field/form-field.types'
 import { computed, ref, useId, useSlots } from 'vue'
 import { SelectOption } from '../types'
-import { translate } from '../../utils/translations/translate'
+import { getTranslation } from '../../utils/translations/translate'
 
 interface Props extends FormFieldBase {
   name: string
@@ -112,15 +112,15 @@ const needsHelpTextSpacer = computed(() => {
 
     <div class="help-text">
       <span class="optional-text"
-        >{{ translate('common.optional')
+        >{{ getTranslation('optional')
         }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span></span
       ><slot name="helpText">{{ helpText }}</slot>
     </div>
 
     <div class="error-messages-container">
-      <slot name="error-message"
-        ><span>{{ errorMessage }}</span></slot
-      >
+      <slot name="error-message">
+        <span>{{ errorMessage }}</span>
+      </slot>
     </div>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "",
   "type": "module",
   "main": "dist/index.js",