@energie360/ui-library 0.1.17 → 0.1.18

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>

package/dist/layout/split.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACsBA;EAtBE;EACA;EACA;EACA;EACA;;ACYA;EDMF;IAfI;IACA;;;ACQF;EDMF;IAVI;IACA;;;ACGF;EDMF;IALI;IACA;;;;AEjBJ;EACE;EACA;EACA;EACA;EACA;;ADUA;ECfF;IAQI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADCJ;ECfF;IAmBI;IACA;;;;AAIJ;EACE;EACA;;ADXA;ECSF;IAKI;IACA;;;ADfF;ECSF;IAUI;IACA;IACA;;;;AAIJ;EACE;;AD1BA;ECyBF;IAII;IACA;;;AD9BF;ECyBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;;AD1CA;ECsCF;IAOI;IAIA;IACA;;;ADlDF;ECsCF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;AD3DF;ECsCF;IAyBI;IACA;IACA;;;;AAIJ;EACE;;ADtEA;ECqEF;IAII;;;ADzEF;ECqEF;IAQI","file":"split.css"}
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACwCA;EAxCE;EACA;EACA;EACA;EACA;;ACYA;EDwBF;IAjCI;IACA;;;ACQF;EDwBF;IA5BI;IACA;;;ACGF;EDwBF;IAvBI;IACA;;;;AEjBJ;EACE;EACA;EACA;EACA;EACA;;ADUA;ECfF;IAQI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADCJ;ECfF;IAmBI;IACA;;;;AAIJ;EACE;EACA;;ADXA;ECSF;IAKI;IACA;;;ADfF;ECSF;IAUI;IACA;IACA;;;;AAIJ;EACE;;AD1BA;ECyBF;IAII;IACA;;;AD9BF;ECyBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;;AD1CA;ECsCF;IAOI;IAIA;IACA;;;ADlDF;ECsCF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;AD3DF;ECsCF;IAyBI;IACA;IACA;;;;AAIJ;EACE;;ADtEA;ECqEF;IAII;;;ADzEF;ECqEF;IAQI","file":"split.css"}

package/elements/button/_button-plain-small-spaceless.scss

@@ -0,0 +1,10 @@
+@use '../../base/abstracts' as a;
+@use './button-plain' as *;
+
+@mixin button-plain-small-spaceless {
+  @include button-plain;
+  @include a.type(100, strong);
+
+  padding: 0;
+  border-radius: var(--e-brd-radius-1); // For nicer focus outline.
+}

package/elements/button/button.scss

@@ -4,6 +4,7 @@
 @use 'button-plain' as *;
 @use 'button-plain-spaceless' as *;
 @use 'button-plain-small' as *;
+@use 'button-plain-small-spaceless' as *;
 @use 'button-filled-inverted' as *;
 @use 'button-outlined-inverted' as *;
 @use 'button-secondary-outlined' as *;
@@ -41,6 +42,10 @@
     @include button-plain-small;
   }
 
+  &.plain-small-spaceless {
+    @include button-plain-small-spaceless;
+  }
+
   &.filled-inverted {
     @include button-filled-inverted;
   }
@@ -70,4 +75,31 @@
       --icon-fill-color: transparent;
     }
   }
+
+  // Modifiers
+  &.nowrap {
+    white-space: nowrap;
+  }
+
+  // In some cases we need to force full width of a button.
+  // Is mostly the case when the button is wrapped by another element.
+  &.full-width {
+    width: 100%;
+  }
+
+  &.hide-label-lg {
+    @include a.bp(lg) {
+      .button__label {
+        @include a.visually-hidden;
+      }
+    }
+  }
+
+  &.hide-label-m {
+    @include a.bp(m) {
+      .button__label {
+        @include a.visually-hidden;
+      }
+    }
+  }
 }

package/elements/button/u-button.vue

@@ -12,6 +12,10 @@ interface ButtonProps {
   target?: string
   variant?: string
   asSpan?: boolean
+  nowrap?: boolean
+  fullWidth?: boolean
+  hideLabelM?: boolean
+  hideLabelLg?: boolean
 }
 
 const { asSpan = false } = defineProps<ButtonProps>()
@@ -21,20 +25,59 @@ const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
 
 <template>
   <template v-if="href">
-    <a :class="['button', variant]" :href :target>
+    <a
+      :class="[
+        'button',
+        variant,
+        {
+          nowrap,
+          'full-width': fullWidth,
+          'hide-label-m': hideLabelM,
+          'hide-label-lg': hideLabelLg,
+        },
+      ]"
+      :href
+      :target
+      v-bind="$attrs"
+    >
       <UIcon v-if="icon" :name="icon"></UIcon>
-      <slot>{{ label }}</slot>
+
+      <span v-if="hideLabelM || hideLabelLg" class="button__label">
+        <slot>{{ label }}</slot>
+      </span>
+
+      <template v-else>
+        <slot>{{ label }}</slot>
+      </template>
     </a>
   </template>
 
   <template v-else>
     <component
       :is="buttonTag"
-      :class="['button', variant, { loading: loading, disabled }]"
+      :class="[
+        'button',
+        variant,
+        {
+          nowrap,
+          'full-width': fullWidth,
+          'hide-label-m': hideLabelM,
+          'hide-label-lg': hideLabelLg,
+          loading: loading,
+          disabled,
+        },
+      ]"
       :disabled="disabled || null"
     >
       <UIcon v-if="icon" :name="icon" />
-      <slot>{{ label }}</slot>
+
+      <span v-if="hideLabelM || hideLabelLg" class="button__label">
+        <slot>{{ label }}</slot>
+      </span>
+
+      <template v-else>
+        <slot>{{ label }}</slot>
+      </template>
 
       <span v-if="loading" class="button__loader">
         <ULoader />

package/elements/form-field/form-field-base.scss

@@ -23,6 +23,10 @@
       font-size a.$trs-default,
       color a.$trs-default,
       line-height a.$trs-default;
+    white-space: nowrap;
+    max-width: calc(100% - var(--e-space-6));
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .control {

package/elements/select/u-select.vue

@@ -51,7 +51,7 @@ const onHoverOut = () => {
 }
 
 const hasHelpText = computed(() => {
-  return !!helpText || !!slots.helpText || required
+  return !!helpText || !!slots.helpText || !required
 })
 
 const needsHelpTextSpacer = computed(() => {
@@ -70,7 +70,7 @@ const needsHelpTextSpacer = computed(() => {
         hover: isHovering,
         'float-label': true,
         'has-error': error,
-        'show-help-text': !required || hasHelpText,
+        'show-help-text': hasHelpText,
       },
     ]"
     @mouseenter="onHover"
@@ -111,10 +111,10 @@ const needsHelpTextSpacer = computed(() => {
     </div>
 
     <div class="help-text">
-      <span class="optional-text"
-        >{{ getTranslation('optional')
-        }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span></span
-      ><slot name="helpText">{{ helpText }}</slot>
+      <span class="optional-text">
+        {{ getTranslation('optional') }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span>
+      </span>
+      <slot name="helpText">{{ helpText }}</slot>
     </div>
 
     <div class="error-messages-container">

package/elements/text-field/text-field.scss

@@ -28,4 +28,19 @@
       color: var(--e-c-secondary-01-700);
     }
   }
+
+  // Type: Search
+  .cancel-search {
+    display: block;
+    border-radius: var(--e-brd-radius-1);
+    color: var(--e-c-primary-01-900);
+    visibility: hidden;
+    pointer-events: none;
+
+    &.visible {
+      visibility: visible;
+      pointer-events: auto;
+      cursor: pointer;
+    }
+  }
 }

package/elements/text-field/text-field.types.ts

@@ -4,4 +4,5 @@ export enum TextFieldTypes {
   email = 'email',
   password = 'password',
   date = 'date',
+  search = 'search',
 }

package/elements/text-field/u-text-field.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import UIcon from '../icon/u-icon.vue'
 import { TextFieldTypes } from './text-field.types'
-import { computed, ref, useSlots, useTemplateRef, useId, watch } from 'vue'
+import { computed, ref, useId, useSlots, useTemplateRef, watch } from 'vue'
 import { FormFieldBase } from '../form-field/form-field.types'
 import { getTranslation } from '../../utils/translations/translate'
 
@@ -95,6 +95,10 @@ const passwordA11yText = computed(() => {
   return _inputType.value === TextFieldTypes.password ? 'showPassword' : 'hidePassword'
 })
 
+const onCancelSearch = () => {
+  model.value = ''
+}
+
 watch(
   () => type,
   () => {
@@ -165,16 +169,33 @@ watch(
         </button>
       </span>
 
+      <!-- TYPE: DATE -->
+      <span v-if="type === TextFieldTypes.date" class="suffix-icon">
+        <UIcon name="calendar" />
+      </span>
+
+      <!-- TYPE: SEARCH -->
+      <span v-if="type === TextFieldTypes.search" class="prefix-icon">
+        <UIcon name="search" />
+      </span>
+
+      <span v-if="type === TextFieldTypes.search" class="suffix-action">
+        <button
+          type="button"
+          :class="['cancel-search', { visible: hasValue && (isHovering || isFocused) }]"
+          tabindex="-1"
+          @click="onCancelSearch"
+        >
+          <span class="visually-hidden">{{ getTranslation('cancelSearch') }}</span>
+          <UIcon name="close-circle-filled"></UIcon>
+        </button>
+      </span>
+
       <!-- UNIT -->
       <span v-if="unit" class="suffix-text">
         {{ unit }}
       </span>
 
-      <!-- DATE -->
-      <span v-if="type === TextFieldTypes.date" class="suffix-icon">
-        <UIcon name="calendar"></UIcon>
-      </span>
-
       <!-- ACTION -->
       <span v-if="!!slots.action" class="suffix-action custom-action">
         <slot name="action"></slot>

package/elements/toggle-switch/toggle-switch-small.scss

@@ -11,6 +11,10 @@
     align-items: center;
     width: 100%;
     gap: var(--e-space-4);
+
+    input {
+      width: var(--width);
+    }
   }
 
   .toggle-switch__handle {
@@ -37,4 +41,10 @@
       margin-right: auto;
     }
   }
+
+  .toggle-switch__additional-label {
+    display: inline;
+
+    @include a.type(200);
+  }
 }