@energie360/ui-library 0.1.16 → 0.1.18

package/components/richtext/richtext.scss

@@ -1,8 +1,7 @@
 @use '../../base/abstracts' as a;
 @use './wizard';
 
-.richtext {
-  // Spacing rules
+@mixin richtext-spacing-rules {
   * + * {
     margin-top: var(--e-space-3);
   }
@@ -23,7 +22,9 @@
   * + ol {
     margin-top: var(--e-space-6);
   }
+}
 
+@mixin richtext-spacing-rules-mobile {
   @include a.bp(lg) {
     * + * {
       margin-top: var(--e-space-2);
@@ -41,6 +42,12 @@
       margin-top: var(--e-space-10);
     }
   }
+}
+
+.richtext {
+  // Spacing rules
+  @include richtext-spacing-rules;
+  @include richtext-spacing-rules-mobile;
 
   // Element styles
   h2,

package/components/richtext/u-richtext.vue

@@ -13,7 +13,9 @@ const classes = ['richtext', { 'richtext--small': small, 'richtext--inverted': i
 <template>
   <div v-if="text" :class="classes" v-html="text"></div>
 
-  <div v-else :class="classes"><slot></slot></div>
+  <div v-else :class="classes">
+    <slot />
+  </div>
 </template>
 
 <style lang="scss" src="./richtext.scss"></style>

package/components/search-group/search-group.scss

@@ -0,0 +1,59 @@
+@use '../../base/abstracts' as a;
+
+@mixin fields-mobile {
+  @include a.bp(lg) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    > * {
+      max-width: none;
+    }
+  }
+
+  @include a.bp(m) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.search-group__title {
+  @include a.type(200, strong);
+
+  margin-bottom: var(--e-space-3);
+}
+
+.search-group + .search-group {
+  margin-top: var(--e-space-8);
+}
+
+.search-group.wrap {
+  .search-group__fields {
+    display: grid;
+    gap: var(--e-space-6);
+    grid-template-columns: repeat(4, 1fr);
+
+    > * {
+      max-width: none;
+    }
+
+    @include fields-mobile;
+  }
+}
+
+.search-group__fields {
+  display: flex;
+  gap: var(--e-space-6);
+
+  > * {
+    flex: 1 1 auto;
+    max-width: calc(25% - 18px);
+  }
+
+  @include fields-mobile;
+}
+
+.search-group__ctas {
+  display: flex;
+  gap: var(--e-space-6);
+  flex-wrap: wrap;
+  margin-top: var(--e-space-10);
+}

package/components/search-group/u-search-group.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { onMounted, ref, useTemplateRef } from 'vue'
+
+interface Props {
+  title?: string
+}
+
+defineProps<Props>()
+
+const fieldsEl = useTemplateRef('fields')
+const fieldCount = ref(0)
+
+onMounted(() => {
+  fieldCount.value = fieldsEl.value.children.length
+})
+</script>
+
+<template>
+  <fieldset :class="['search-group', { wrap: fieldCount > 5 }]">
+    <legend v-if="title" class="search-group__title">{{ title }}</legend>
+
+    <div ref="fields" class="search-group__fields">
+      <slot />
+    </div>
+
+    <div v-if="$slots.ctas" class="search-group__ctas">
+      <slot name="ctas"></slot>
+    </div>
+  </fieldset>
+</template>
+
+<style scoped scss src="./search-group.scss"></style>

package/components/skeleton-loader/skeleton-loader.scss

@@ -0,0 +1,39 @@
+@use '../../base/abstracts' as a;
+
+@keyframes skeleton-animation {
+  0% {
+    background-color: var(--e-c-primary-01-50);
+  }
+
+  100% {
+    background-color: var(--e-c-primary-01-100);
+  }
+}
+
+@mixin skeleton-base {
+  background-color: var(--e-c-primary-01-50);
+  border-radius: var(--e-brd-radius-2);
+  width: 100%;
+  height: 100%;
+  animation-name: skeleton-animation;
+  animation-duration: var(--e-trs-duration-slower);
+  animation-direction: alternate;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+.skeleton-loader.fit {
+  @include skeleton-base;
+}
+
+.skeleton-loader.table {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+
+  > div {
+    @include skeleton-base;
+
+    height: a.rem(52);
+  }
+}

package/components/skeleton-loader/u-skeleton-loader.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+enum SkeletonType {
+  fit = 'fit',
+  table = 'table',
+}
+
+interface Props {
+  type?: SkeletonType
+}
+
+const { type = SkeletonType.fit } = defineProps<Props>()
+</script>
+
+<template>
+  <template v-if="type === SkeletonType.table">
+    <div :class="['skeleton-loader', type]">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </template>
+
+  <template v-if="type === SkeletonType.fit">
+    <div class="skeleton-loader fit"></div>
+  </template>
+</template>
+
+<style scoped lang="scss" src="./skeleton-loader.scss"></style>

package/components/table/cell-ctas.scss

@@ -2,11 +2,5 @@
 
 .cell-ctas {
   display: flex;
-  column-gap: var(--e-space-2);
-
-  .button-label {
-    @include a.bp(m) {
-      @include a.visually-hidden;
-    }
-  }
+  column-gap: var(--e-space-4);
 }

package/components/table/cell-icon-text.scss

@@ -13,10 +13,21 @@
   }
 
   @include a.type(100);
-}
 
-.cell-text {
-  @include a.bp(m) {
-    @include a.visually-hidden;
+  // Modifiers
+  &.hide-text-lg {
+    .cell-text {
+      @include a.bp(lg) {
+        @include a.visually-hidden;
+      }
+    }
+  }
+
+  &.hide-text-m {
+    .cell-text {
+      @include a.bp(m) {
+        @include a.visually-hidden;
+      }
+    }
   }
 }

package/components/table/table-cell.mixins.scss

@@ -4,8 +4,7 @@
   display: table-cell;
   padding: var(--e-space-4);
   height: a.rem(56);
-
-  @include a.type(100);
+  line-height: 0;
 
   @include a.bp(m) {
     height: auto;
@@ -18,6 +17,8 @@
   }
 
   .cell-content {
+    @include a.type(100);
+
     display: inline-flex;
     column-gap: var(--e-space-2);
     min-height: a.rem(24);

package/components/table/table-cell.scss

@@ -14,6 +14,11 @@
   &.text-bold {
     font-weight: var(--e-type-weight-strong);
   }
+
+  // Modifiers
+  &.nowrap {
+    white-space: nowrap;
+  }
 }
 
 .info-tooltip {

package/components/table/table-heading.scss

@@ -6,3 +6,10 @@
 
   @include c.table-cell-base;
 }
+
+.cell-content {
+  // Modifiers
+  &.nowrap {
+    white-space: nowrap;
+  }
+}

package/components/table/u-cell-ctas.vue

@@ -4,10 +4,11 @@ import UButton from '../../elements/button/u-button.vue'
 
 interface CellCta extends Cta {
   icon: string
+  attr: object
 }
 
 interface Props {
-  ctas: CellCta[]
+  ctas?: CellCta[]
 }
 
 defineProps<Props>()
@@ -16,13 +17,21 @@ defineProps<Props>()
 <template>
   <div class="cell-ctas">
     <template v-for="(cta, idx) in ctas" :key="idx">
-      <UButton variant="plain" :icon="cta.icon" :href="cta.href" :target="cta.target">
-        <span class="button-label">{{ cta.label }}</span>
+      <UButton
+        nowrap
+        variant="plain"
+        :icon="cta.icon"
+        :href="cta.href"
+        :target="cta.target"
+        v-bind="cta.attr"
+        hide-label-m
+      >
+        {{ cta.label }}
       </UButton>
     </template>
+
+    <slot></slot>
   </div>
 </template>
 
-<style scoped lang="scss">
-@use './cell-ctas.scss';
-</style>
+<style scoped lang="scss" src="./cell-ctas.scss"></style>

package/components/table/u-cell-icon-text.vue

@@ -5,19 +5,27 @@ import UIcon from '../../elements/icon/u-icon.vue'
 interface Props extends TableCellBase {
   icon: string
   iconColor?: TableCellIconColor
+  hideTextM?: false
+  hideTextLg?: false
 }
 
 const { iconColor = TableCellIconColor.grey } = defineProps<Props>()
 </script>
 
 <template>
-  <div :class="['cell-icon-text', `icon-color-${iconColor}`]">
+  <div
+    :class="[
+      'cell-icon-text',
+      `icon-color-${iconColor}`,
+      { 'hide-text-m': hideTextM, 'hide-text-lg': hideTextLg },
+    ]"
+  >
     <UIcon :name="icon"></UIcon>
 
-    <span class="cell-text">{{ text }}</span>
+    <span class="cell-text">
+      <slot>{{ text }}</slot>
+    </span>
   </div>
 </template>
 
-<style scoped lang="scss">
-@use './cell-icon-text.scss';
-</style>
+<style scoped lang="scss" src="./cell-icon-text.scss"></style>

package/components/table/u-table-cell.vue

@@ -6,12 +6,14 @@ import UTooltip from '../tooltip/u-tooltip.vue'
 interface Props extends TableCellBase {
   infoText?: string
   textStyle?: TableCellTextStyle
+  nowrap?: boolean
 }
 
 const {
   textStyle = TableCellTextStyle.normal,
   hAlign = TableCellHAlign.left,
   vAlign = TableCellVAlign.center,
+  nowrap = false,
 } = defineProps<Props>()
 </script>
 
@@ -20,7 +22,7 @@ const {
     role="cell"
     :class="['table-cell', `h-align-${hAlign}`, `v-align-${vAlign}`, { 'has-tooltip': infoText }]"
   >
-    <div :class="['cell-content', `text-${textStyle}`]">
+    <div :class="['cell-content', `text-${textStyle}`, { nowrap }]">
       <slot>{{ text }}</slot>
     </div>
 

package/components/table/u-table-heading.vue

@@ -3,6 +3,7 @@ interface Props {
   text?: string
   hAlign?: 'left' | 'center' | 'right'
   vAlign?: 'top' | 'center' | 'bottom'
+  nowrap?: boolean
 }
 
 const { hAlign = 'left', vAlign = 'top' } = defineProps<Props>()
@@ -10,7 +11,7 @@ const { hAlign = 'left', vAlign = 'top' } = defineProps<Props>()
 
 <template>
   <div role="cell" :class="['table-heading', `h-align-${hAlign}`, `v-align-${vAlign}`]">
-    <div class="cell-content">
+    <div :class="['cell-content', { nowrap }]">
       <slot :text="text">{{ text }}</slot>
     </div>
   </div>

package/components/tabs/tabs.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .tabs {
   $scroll-space: 18px;
@@ -86,3 +86,12 @@
       width a.$trs-default;
   }
 }
+
+// Modifiers
+.tabs.no-gradient {
+  .tabs__wrapper {
+    &::after {
+      content: none;
+    }
+  }
+}

package/components/tabs/u-tabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTemplateRef, ref, watch } from 'vue'
+import { useTemplateRef, ref, watch, useSlots } from 'vue'
 import { getOffsetParentPosition } from '../../utils/dom/dom'
 import { debounce } from '../../utils/functions/debounce'
 
@@ -11,14 +11,16 @@ interface Tab {
 
 interface Props {
   activation?: 'manual' | 'automatic'
-  items: Tab[]
+  items?: Tab[]
+  noGradient?: boolean
 }
 
-const { activation = 'manual' } = defineProps<Props>()
+const { items = [], activation = 'manual' } = defineProps<Props>()
 const emit = defineEmits<{ (e: 'tabFocus', id: string): void }>()
 
 const model = defineModel<string>()
 const activeBarStyles = ref({})
+const slots = useSlots()
 
 const tabs = useTemplateRef('tabs')
 const list = useTemplateRef('list')
@@ -87,7 +89,14 @@ const onResize = debounce(() => {
 const isActiveTab = (currentTabId: string) => currentTabId === model.value
 
 const positionActiveBar = () => {
-  const activeTabEl = tabs.value.find((item) => item.value === model.value)
+  let activeTabEl
+
+  if (slots.default) {
+    activeTabEl = Array.from(list.value.children).find((el) => el.classList.contains('active'))
+  } else {
+    activeTabEl = tabs.value.find((item) => item.value === model.value)
+  }
+
   const activeTabRelPos = getOffsetParentPosition(activeTabEl)
 
   activeBarStyles.value = {
@@ -107,36 +116,66 @@ onResize()
 </script>
 
 <template>
-  <div class="tabs">
+  <div :class="['tabs', { 'no-gradient': noGradient }]">
     <div class="tabs__row">
       <div class="tabs__col">
         <div class="tabs__wrapper">
           <div ref="list" class="tabs__list" role="tablist">
-            <button
-              v-for="(item, idx) in items"
-              :key="idx"
-              ref="tabs"
-              :class="{ active: isActiveTab(item.value) }"
-              :value="item.value"
-              type="button"
-              role="tab"
-              :tabindex="isActiveTab(item.value) ? 0 : -1"
-              :aria-selected="isActiveTab(item.value)"
-              v-bind="item.analyticsAttributes || {}"
-              @click="onTabClick"
-              @keydown="onTabKeyDown"
-            >
-              {{ item.label }}
-            </button>
-
-            <div class="tabs__active-bar" :style="activeBarStyles"></div>
+            <slot>
+              <button
+                v-for="(item, idx) in items"
+                :key="idx"
+                ref="tabs"
+                :class="{ active: isActiveTab(item.value) }"
+                :value="item.value"
+                type="button"
+                role="tab"
+                :tabindex="isActiveTab(item.value) ? 0 : -1"
+                :aria-selected="isActiveTab(item.value)"
+                v-bind="item.analyticsAttributes || {}"
+                @click="onTabClick"
+                @keydown="onTabKeyDown"
+              >
+                {{ item.label }}
+              </button>
+            </slot>
           </div>
+          <div class="tabs__active-bar" :style="activeBarStyles"></div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<style lang="scss">
-@use './tabs.scss';
+<style scoped lang="scss" src="./tabs.scss"></style>
+<style scoped lang="scss">
+@use '../../base/abstracts' as a;
+
+.tabs__list {
+  :slotted(a),
+  :slotted(button) {
+    @include a.type(200, strong);
+
+    display: block;
+    padding: var(--e-space-4);
+    text-decoration: none;
+    color: var(--e-c-mono-700);
+    transition: color a.$trs-default;
+    white-space: nowrap;
+    outline-offset: -4px;
+    cursor: pointer;
+
+    &.active,
+    &:focus,
+    &:hover {
+      color: var(--e-c-primary-01-700);
+    }
+
+    @include a.bp(lg) {
+      @include a.type(100, strong);
+
+      padding: var(--e-space-2) var(--e-space-3);
+    }
+  }
+}
 </style>