@energie360/ui-library 0.1.4 → 0.1.5

package/components/card/card.scss

@@ -26,33 +26,10 @@
 }
 
 // LAYOUT
-.card-header,
-.card-section,
-.card-footer {
-  padding: var(--e-space-6);
-
-  @include a.bp(m) {
-    padding: var(--e-space-5);
-  }
-
-  @include a.bp(s) {
-    padding: var(--e-space-4);
-  }
-}
-
-.card-footer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--e-space-4);
-}
-
-.card-section:last-child:has(.card-hint),
-.card-footer {
+.card-section:last-child:has(.card-hint, .card-footer) {
   margin-top: auto; // Make this element stick to bottom of the card.
 }
 
-.card-header + *,
-.card-section + .card-section,
-* + .card-footer {
+.card-section + .card-section {
   border-top: 1px solid var(--e-c-mono-200);
 }

package/components/card-footer/card-footer.scss

@@ -0,0 +1,5 @@
+.card-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--e-space-4);
+}

package/components/card-footer/u-card-footer.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { inject, watch, onMounted } from 'vue'
+import UButton from '../../elements/button/u-button.vue'
+import USelectChip from '../../elements/select-chip/u-select-chip.vue'
+
+interface Link {
+  label: string
+  href?: string
+  target?: string
+}
+
+interface Radio {
+  label: string
+  name?: string
+  value?: string
+}
+
+interface Props {
+  cta: Radio | Link
+}
+
+const { cta } = defineProps<Props>()
+
+const { toggleActiveCard } = inject('card')
+const { currentValue } = inject('card-group', {})
+
+const onChange = () => {
+  toggleActiveCard(true)
+}
+
+if (currentValue) {
+  watch(currentValue, (newV) => {
+    toggleActiveCard(newV === cta.value)
+  })
+
+  onMounted(() => {
+    if (currentValue?.value) {
+      toggleActiveCard(currentValue.value === cta.value)
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="card-footer">
+    <UButton v-if="cta.href" variant="outlined" v-bind="cta" />
+
+    <USelectChip v-else provide-key="card-group" v-bind="cta" @change="onChange" />
+  </div>
+</template>
+
+<style lang="scss" src="./card-footer.scss"></style>

package/components/card-group/card-group.scss

@@ -0,0 +1,29 @@
+@use '../../base/abstracts/' as a;
+
+.card-group {
+  display: grid;
+  gap: var(--e-space-5);
+
+  // >= 3 card items
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr;
+
+  // 1 card item
+  &:has(> :last-child:nth-child(1)) {
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: 1fr;
+  }
+
+  // 2 card items
+  &:has(> :last-child:nth-child(2)) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+  }
+
+  @include a.bp(lg) {
+    &:has(> :last-child:nth-child(n)) {
+      grid-template-columns: repeat(1, 1fr);
+      grid-template-rows: 1fr;
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef } from 'vue'
+import { debounceRaf } from '../../utils/functions/debounce'
+import { isLarge } from '../../utils/functions/breakpoint'
+import { useRadioGroup } from '../../elements/radio-group/radio-group-composables'
+
+const model = defineModel<string>()
+
+const group = useTemplateRef('group')
+
+const onResize = debounceRaf(() => {
+  const headers = Array.from(group.value.querySelectorAll('.card-header'))
+
+  if (headers.length < 2) {
+    // We don't need this logic for just one card.
+    return
+  }
+
+  // Reset heights
+  headers.forEach((header) => {
+    header.style.height = ''
+  })
+
+  if (isLarge().matches) {
+    // Cards are stacked now. No need to set height.
+    return
+  }
+
+  // Get max height
+  const maxHeight = headers.reduce((acc, val) => {
+    return Math.max(acc, val.offsetHeight)
+  }, 0)
+
+  // Adjust heights
+  headers.forEach((header) => {
+    header.style.height = `${maxHeight}px`
+  })
+})
+
+onMounted(() => {
+  // Wait for webfonts to be ready (and rendered) to avoid calculating with 'wrong' font.
+  document.fonts.ready.then(() => {
+    window.addEventListener('resize', onResize)
+
+    // Initial state
+    onResize()
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', onResize)
+})
+
+useRadioGroup({
+  model,
+  provideKey: 'card-group',
+})
+</script>
+
+<template>
+  <div ref="group" class="card-group">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" src="./card-group.scss"></style>

package/components/card-header/card-header.scss

@@ -3,12 +3,8 @@
 $image-col-width: 112px;
 $image-col-width-small: 100px;
 
-:host {
-  display: block;
-  container: card / inline-size;
-}
-
 .card-header {
+  container: card / inline-size;
   position: relative;
   display: flex;
   column-gap: var(--e-space-2);

package/components/card-section/card-section.scss

@@ -0,0 +1,13 @@
+@use '../../base/abstracts/' as a;
+
+.card-section {
+  padding: var(--e-space-6);
+
+  @include a.bp(m) {
+    padding: var(--e-space-5);
+  }
+
+  @include a.bp(s) {
+    padding: var(--e-space-4);
+  }
+}

package/components/card-section/u-card-section.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="card-section">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" src="./card-section.scss"></style>

package/components/tabs/tabs.scss

@@ -0,0 +1,88 @@
+@use '../../base/abstracts/' as a;
+
+.tabs {
+  $scroll-space: 18px;
+
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: var(--e-c-mono-100);
+  }
+
+  .tabs__wrapper {
+    position: relative;
+    width: 100%;
+    height: calc(100% + #{$scroll-space});
+
+    &::after {
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 30px;
+      height: calc(100% - #{$scroll-space} - 1px);
+      background: linear-gradient(270deg, #fff 0%, rgb(255 255 255 / 0%) 100%);
+    }
+  }
+
+  .tabs__row {
+    display: flex;
+  }
+
+  .tabs__col {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .tabs__list {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    height: 100%;
+    flex-wrap: nowrap;
+    overflow: auto;
+
+    a,
+    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);
+      }
+    }
+  }
+
+  .tabs__active-bar {
+    position: absolute;
+    bottom: #{$scroll-space};
+    height: 2px;
+    background-color: var(--e-c-primary-01-200);
+    transition:
+      left a.$trs-default,
+      width a.$trs-default;
+  }
+}

package/components/tabs/u-tabs.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { useTemplateRef, ref, watch } from 'vue'
+import { getOffsetParentPosition } from '../../utils/dom/dom'
+import { debounce } from '../../utils/functions/debounce'
+
+interface Tab {
+  label: string
+  value: string
+}
+
+interface Props {
+  activation?: 'manual' | 'automatic'
+  items: Tab[]
+}
+
+const { activation = 'manual' } = defineProps<Props>()
+const emit = defineEmits<{ (e: 'tabFocus', id: string): void }>()
+
+const model = defineModel<string>()
+const activeBarStyles = ref({})
+
+const tabs = useTemplateRef('tabs')
+const list = useTemplateRef('list')
+
+const ARROW_LEFT = 'ArrowLeft'
+const ARROW_RIGHT = 'ArrowRight'
+const ARROW_DOWN = 'ArrowDown'
+const ARROW_UP = 'ArrowUp'
+
+const onTabClick = (e) => {
+  e.preventDefault()
+
+  // Mark active tab
+  model.value = e.target.value
+
+  positionActiveBar()
+}
+
+const onTabKeyDown = (e) => {
+  let focusTabIndex: number
+  const currentIndex = tabs.value.findIndex((tab) => tab === e.target)
+
+  if (e.code === ARROW_RIGHT || e.code === ARROW_UP) {
+    e.stopPropagation()
+    e.preventDefault()
+
+    focusTabIndex = currentIndex + 1
+
+    if (focusTabIndex > tabs.value.length - 1) {
+      focusTabIndex = 0
+    }
+
+    tabs.value[focusTabIndex].focus()
+    emit('tabFocus', tabs.value[focusTabIndex].value)
+
+    if (activation === 'automatic') {
+      tabs.value[focusTabIndex].click()
+    }
+
+    return
+  }
+
+  if (e.code === ARROW_LEFT || e.code === ARROW_DOWN) {
+    e.stopPropagation()
+    e.preventDefault()
+
+    focusTabIndex = currentIndex - 1
+
+    if (focusTabIndex < 0) {
+      focusTabIndex = tabs.value.length - 1
+    }
+
+    tabs.value[focusTabIndex].focus()
+    emit('tabFocus', tabs.value[focusTabIndex].value)
+
+    if (activation === 'automatic') {
+      tabs.value[focusTabIndex].click()
+    }
+  }
+}
+
+const onResize = debounce(() => {
+  positionActiveBar()
+}, 80)
+
+const isActiveTab = (currentTabId: string) => currentTabId === model.value
+
+const positionActiveBar = () => {
+  const activeTabEl = tabs.value.find((item) => item.value === model.value)
+  const activeTabRelPos = getOffsetParentPosition(activeTabEl)
+
+  activeBarStyles.value = {
+    width: `${activeTabEl.offsetWidth}px`,
+    left: `${activeTabRelPos.left + list.value.scrollLeft}px`,
+  }
+}
+
+watch(model, () => {
+  onResize()
+})
+
+window.addEventListener('resize', onResize)
+
+// Initial state
+onResize()
+</script>
+
+<template>
+  <div class="tabs">
+    <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)"
+              @click="onTabClick"
+              @keydown="onTabKeyDown"
+            >
+              {{ item.label }}
+            </button>
+
+            <div class="tabs__active-bar" :style="activeBarStyles"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use './tabs.scss';
+</style>

package/dist/layout/split.css

@@ -27,7 +27,10 @@
 
 .split {
   position: relative;
+  display: flex;
+  flex-direction: column;
   padding-left: 50%;
+  min-height: 100vh;
 }
 @media (max-width: 1020px) {
   .split {
@@ -110,6 +113,9 @@
   }
 }
 
+.split__footer {
+  margin-top: auto;
+}
 @media (max-width: 1020px) {
   .split__footer {
     grid-area: footer;

package/dist/layout/split.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAKA;ACsBA;EAtBE;EACA;EACA;EACA;EACA;;ACYA;EDMF;IAfI;IACA;;;ACQF;EDMF;IAVI;IACA;;;ACGF;EDMF;IALI;IACA;;;;AEjBJ;EACE;EACA;;ADaA;ECfF;IAKI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADIJ;ECfF;IAgBI;IACA;;;;AAIJ;EACE;EACA;;ADRA;ECMF;IAKI;IACA;;;ADZF;ECMF;IAUI;IACA;IACA;;;;AAIJ;EACE;;ADvBA;ECsBF;IAII;IACA;;;AD3BF;ECsBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;;ADvCA;ECmCF;IAOI;IAIA;IACA;;;AD/CF;ECmCF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;ADxDF;ECmCF;IAyBI;IACA;IACA;;;;AD9DF;ECkEF;IAEI;;;ADpEF;ECkEF;IAMI","file":"split.css"}
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAKA;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"}

package/elements/button/_button-base.scss

@@ -35,7 +35,7 @@
 
   &.disabled,
   &:disabled {
-    pointer-events: none;
+    cursor: not-allowed;
   }
 
   &.loading {

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

@@ -50,7 +50,7 @@
   }
 
   .control-border {
-    z-index: -1;
+    z-index: 0;
     pointer-events: none;
     position: absolute;
     top: 0;

package/elements/icon-button/_icon-button-base.scss

@@ -17,9 +17,6 @@ $icon-button-size: 48px;
   height: a.rem($icon-button-size);
   border-radius: 100%;
   color: transparent;
-
-  // Pointer should only be used for actual 'links'.
-  // And buttons shouldn't have a pointer cursor. But it seems people still want this.
   cursor: pointer;
 
   .icon,
@@ -54,6 +51,6 @@ $icon-button-size: 48px;
   }
 
   &:disabled {
-    cursor: default;
+    cursor: not-allowed;
   }
 }

package/elements/radio/index.js

@@ -0,0 +1 @@
+export { default as URadio } from './u-radio.vue'

package/elements/radio/radio.scss

@@ -0,0 +1,7 @@
+.radio {
+  display: block;
+}
+
+.radio__control {
+  appearance: radio;
+}

package/elements/radio/u-radio.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useRadio } from '../radio-group/radio-group-composables'
+
+interface Props {
+  label: string
+  name?: string
+  value: string | number
+  disabled?: boolean
+}
+
+defineProps<Props>()
+
+const model = defineModel<string>()
+
+const { onChange } = useRadio({ model })
+</script>
+
+<template>
+  <div class="radio">
+    <label>{{ label }}</label>
+    <input
+      v-model="model"
+      class="radio__control"
+      type="radio"
+      :name
+      :value
+      :disabled
+      @change="onChange"
+    />
+  </div>
+</template>
+
+<style lang="scss" src="./radio.scss"></style>

package/elements/radio-group/index.js

@@ -0,0 +1 @@
+export { default as URadioGroup } from './u-radio-group.vue'

package/elements/radio-group/radio-group-composables.ts

@@ -0,0 +1,38 @@
+import { provide, ref, watch, inject, onMounted } from 'vue'
+
+export const useRadioGroup = ({ model, provideKey = 'radio-group' }) => {
+  const currentValue = ref(model)
+
+  const updateValue = (value) => {
+    model.value = value
+  }
+
+  provide(provideKey, {
+    updateValue,
+    currentValue,
+  })
+}
+
+export const useRadio = ({ model, provideKey = 'radio-group' }) => {
+  const { updateValue, currentValue } = inject(provideKey, {})
+
+  const onChange = (e) => {
+    if (updateValue) {
+      updateValue(e.target.value)
+    }
+  }
+
+  if (currentValue) {
+    watch(currentValue, (newV) => {
+      model.value = newV
+    })
+
+    onMounted(() => {
+      if (currentValue) {
+        model.value = currentValue.value
+      }
+    })
+  }
+
+  return { onChange }
+}

package/elements/radio-group/radio-group.scss

@@ -0,0 +1,3 @@
+.radio-group {
+  display: block;
+}

package/elements/radio-group/u-radio-group.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useRadioGroup } from './radio-group-composables'
+
+const model = defineModel<string>()
+
+useRadioGroup({ model })
+</script>
+
+<template>
+  <div class="radio-group">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" src="./radio-group.scss"></style>

package/elements/select-chip/u-select-chip.vue

@@ -1,41 +1,35 @@
 <script setup lang="ts">
 import UIcon from '../icon/u-icon.vue'
-import { computed, inject, useId, watch } from 'vue'
+import { useRadio } from '../radio-group/radio-group-composables'
+import { computed } from 'vue'
 
 interface Props {
   name: string
   label?: string
   disabled?: boolean
   value?: string
+  provideKey?: string
 }
-const { name, disabled = false, value = '' } = defineProps<Props>()
-const cId = useId()
+const {
+  name,
+  disabled = false,
+  value = '',
+  provideKey = 'select-chip-group',
+} = defineProps<Props>()
 
-const model = defineModel<boolean>({ default: false })
+const model = defineModel<string>()
 
-const { activeSelectChip, updateActiveSelectChip } = inject('select-chip-group', {})
+const { onChange } = useRadio({ model, provideKey })
 
-const onChange = () => {
-  if (updateActiveSelectChip) {
-    updateActiveSelectChip(cId)
-  }
-}
-
-if (activeSelectChip) {
-  watch(activeSelectChip, (newV) => {
-    if (newV !== cId) {
-      model.value = false
-    }
-  })
-}
-
-const classes = computed(() => (disabled ? 'disabled' : model.value ? 'filled' : 'outlined'))
+const classes = computed(() =>
+  disabled ? 'disabled' : model.value === value ? 'filled' : 'outlined',
+)
 </script>
 
 <template>
   <div class="select-chip">
     <label :class="classes" class="select-chip__button button">
-      <UIcon v-if="model" name="mini-check"></UIcon>
+      <UIcon v-if="model === value" name="mini-check"></UIcon>
       {{ label }}
 
       <slot>