@energie360/ui-library 0.1.6 → 0.1.7

package/components/collapsible/u-collapsible.vue

@@ -65,7 +65,6 @@ defineExpose({
       <section
         v-if="!panelHidden"
         :id="panelId"
-        class="collapsible__panel"
         :aria-labelledby="headerId"
       >
         <slot name="panel">

package/components/inline-edit/index.js

@@ -0,0 +1 @@
+export { default as UInlineEdit } from './u-inline-edit.vue'

package/components/inline-edit/inline-edit.scss

@@ -0,0 +1,54 @@
+@use '../../base/abstracts/' as a;
+
+.inline-edit {
+  border-bottom: 1px solid var(--e-c-mono-200);
+  padding-top: var(--e-space-8);
+  padding-bottom: var(--e-space-8);
+
+  &.expanded {
+    .inline-edit__summary {
+      display: none;
+    }
+
+    .inline-edit__content,
+    .inline-edit__description {
+      display: block;
+    }
+  }
+
+  &.disabled {
+    .inline-edit__title {
+      color: var(--e-c-mono-500);
+    }
+  }
+}
+
+.inline-edit__heading {
+  display: flex;
+  column-gap: var(--e-space-4);
+}
+
+.inline-edit__title {
+  @include a.type(300, strong);
+}
+
+.inline-edit__description,
+.inline-edit__summary {
+  @include a.type(300);
+
+  color: var(--e-c-mono-700);
+}
+
+.inline-edit__description {
+  display: none;
+}
+
+.inline-edit__heading-cta-col {
+  margin-left: auto;
+  text-align: right;
+}
+
+.inline-edit__content {
+  display: none;
+  margin-top: var(--e-space-6);
+}

package/components/inline-edit/u-inline-edit.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref, inject, useId, watch, useTemplateRef } from 'vue'
+import UButton from '../../elements/button/u-button.vue'
+import { getTranslation } from '../../utils/translations/translate'
+
+interface Props {
+  title: string
+  summary: string
+  description: string
+}
+
+defineProps<Props>()
+
+const emit = defineEmits(['expanded', 'collapsed'])
+const rootEl = useTemplateRef('root')
+const editId = useId()
+const headingId = `heading-${editId}`
+const panelId = `panel-${editId}`
+const expanded = ref(false)
+const disabled = ref(false)
+const { update, activeEdit } = inject('inline-edit-group', {})
+
+const onEditToggle = () => {
+  expanded.value = !expanded.value
+
+  emit(expanded.value ? 'expanded' : 'collapsed')
+
+  if (update && expanded.value) {
+    update(editId)
+
+    setTimeout(() => {
+      rootEl.value.scrollIntoView()
+    }, 80)
+
+    return
+  }
+
+  if (update && !expanded.value) {
+    // Active inline-edit is collapsed.
+    // Restore state of other items.
+    update('')
+  }
+}
+
+if (activeEdit) {
+  watch(activeEdit, (newV) => {
+    if (newV === '') {
+      expanded.value = false
+      disabled.value = false
+      return
+    }
+
+    if (newV !== editId) {
+      expanded.value = false
+      disabled.value = true
+    }
+  })
+}
+
+const collapse = () => {
+  expanded.value = false
+
+  if (update) {
+    update('')
+  }
+}
+
+defineExpose({ collapse })
+</script>
+
+<template>
+  <div ref="root" class="inline-edit" :class="{ expanded, disabled }">
+    <div class="inline-edit__heading">
+      <div class="inline-edit__heading-col">
+        <p :id="headingId" class="inline-edit__title">{{ title }}</p>
+
+        <p class="inline-edit__summary" v-html="summary"></p>
+        <p class="inline-edit__description" v-html="description"></p>
+      </div>
+      <div class="inline-edit__heading-cta-col">
+        <UButton
+          variant="plain-spaceless"
+          :disabled
+          :aria-controls="panelId"
+          :aria-expanded="expanded"
+          @click="onEditToggle"
+          >{{ getTranslation(expanded ? 'cancel' : 'edit') }}</UButton
+        >
+      </div>
+    </div>
+
+    <section :id="panelId" :aria-labelledby="headingId" class="inline-edit__content">
+      <slot></slot>
+    </section>
+  </div>
+</template>
+
+<style lang="scss" src="./inline-edit.scss"></style>

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

@@ -0,0 +1,8 @@
+@use './button-plain' as *;
+
+@mixin button-plain-spaceless {
+  @include button-plain;
+
+  padding: 0;
+  border-radius: var(--e-brd-radius-1); // For nicer focus outline.
+}

package/elements/button/button.scss

@@ -2,6 +2,7 @@
 @use 'button-filled' as *;
 @use 'button-outlined' as *;
 @use 'button-plain' as *;
+@use 'button-plain-spaceless' as *;
 @use 'button-plain-small' as *;
 @use 'button-filled-inverted' as *;
 @use 'button-outlined-inverted' as *;
@@ -32,6 +33,10 @@
     @include button-plain;
   }
 
+  &.plain-spaceless {
+    @include button-plain-spaceless;
+  }
+
   &.plain-small {
     @include button-plain-small;
   }

package/elements/button/index.js

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

package/elements/button-chip/index.js

@@ -0,0 +1 @@
+export { default as UButtonChip } from './u-button-chip.vue'

package/elements/icon/index.js

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

package/elements/icon-button/index.js

@@ -0,0 +1 @@
+export { default as UIconButton } from './u-icon-button.vue'

package/elements/image/index.js

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

package/elements/loader/index.js

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

package/elements/numeric-stepper/index.js

@@ -0,0 +1 @@
+export { default as UNumericStepper } from './u-numeric-stepper.vue'

package/elements/password-progress/index.js

@@ -0,0 +1 @@
+export { default as UPasswordProgress } from './u-password-progress.vue'

package/elements/password-progress/password-progress.scss

@@ -0,0 +1,36 @@
+@use '../../base/abstracts/' as a;
+
+.password-progress__caption {
+  margin-bottom: var(--e-space-2);
+
+  @include a.type(100, strong);
+}
+
+.password-progress__rules {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+}
+
+.password-progress__rule {
+  display: flex;
+  align-items: center;
+  column-gap: var(--e-space-1);
+
+  @include a.type(100);
+
+  .icon {
+    color: var(--e-c-mono-500);
+    transition: color a.$trs-default;
+  }
+
+  &.met {
+    .icon {
+      color: var(--e-c-signal-01-500);
+    }
+  }
+}
+
+.text-field + .password-progress {
+  margin-top: var(--e-space-6);
+}

package/elements/password-progress/u-password-progress.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import UIcon from '../icon/u-icon.vue'
+import { getTranslation } from '../../utils/translations/translate'
+
+interface PasswordRule {
+  label: string
+  met: boolean
+}
+
+interface Props {
+  rules: PasswordRule[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="password-progress">
+    <p class="password-progress__caption">
+      {{ getTranslation('passwordRequirements') }}
+    </p>
+    <ul class="password-progress__rules">
+      <li
+        v-for="(rule, idx) in rules"
+        :key="idx"
+        class="password-progress__rule"
+        :class="{ met: rule.met }"
+      >
+        <UIcon :name="rule.met ? 'check-circle' : 'close-circle'" />
+        {{ rule.label }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" src="./password-progress.scss"></style>

package/elements/select/index.js

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

package/elements/select-chip/index.js

@@ -0,0 +1 @@
+export { default as USelectChip } from './u-select-chip.vue'

package/elements/select-chips/index.js

@@ -0,0 +1 @@
+export { default as USelectChips } from './u-select-chips.vue'

package/elements/spectro/index.js

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

package/elements/text-field/index.js

@@ -0,0 +1 @@
+export { default as UTextField } from './u-text-field.vue'

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

@@ -16,7 +16,8 @@
   .password-toggle {
     display: block;
     border-radius: var(--e-brd-radius-1);
-    color: var(--e-c-primary-01-500);
+    color: var(--e-c-primary-01-700);
+    transition: color a.$trs-default;
     cursor: pointer;
 
     &:hover {

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

@@ -68,7 +68,7 @@ const onHoverOut = () => {
 }
 
 const hasHelpText = computed(() => {
-  return !!helpText || !!slots.helpText || required
+  return !!helpText || !!slots.helpText || !required
 })
 
 const needsHelpTextSpacer = computed(() => {
@@ -81,7 +81,7 @@ const onPasswordToggle = () => {
 }
 
 const passwordIcon = computed(() => {
-  return _inputType.value === TextFieldTypes.password ? 'password' : 'password-show'
+  return _inputType.value === TextFieldTypes.password ? 'visibility' : 'visibility-off'
 })
 
 const passwordA11yText = computed(() => {
@@ -113,7 +113,7 @@ watch(
         'has-value': hasValue,
         'float-label': isFocused || hasValue || placeholder || forceFloatLabel,
         'has-error': error,
-        'show-help-text': !required || hasHelpText,
+        'show-help-text': hasHelpText,
       },
     ]"
     @mouseenter="onHover"

package/elements/textarea/index.js

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

package/elements/textarea/textarea.scss

@@ -0,0 +1,14 @@
+@use '../../base/abstracts' as a;
+@use '../form-field' as f;
+
+// Maybe use this trick for textarea https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
+
+.textarea {
+  @include f.form-field-base(textarea);
+  @include f.form-field-states-all(textarea);
+  @include f.form-field-error;
+
+  .label {
+    top: a.rem(24);
+  }
+}

package/elements/textarea/u-textarea.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { useId, ref, useTemplateRef, useSlots, computed } from 'vue'
+import { FormFieldBase } from '../form-field/form-field.types'
+import { getTranslation } from '../../utils/translations/translate'
+
+interface Props extends FormFieldBase {
+  name: string
+  readonly?: boolean
+  placeholder?: string
+}
+
+const {
+  required = false,
+  disabled = false,
+  readonly = false,
+  helpText = '',
+  errorMessage = '',
+} = defineProps<Props>()
+
+const slots = useSlots()
+const model = defineModel<string>()
+
+const input = useTemplateRef('input')
+
+const inputId = useId()
+const isFocused = ref(false)
+const isHovering = ref(false)
+const hasValue = ref(false)
+
+const spacer = '.&nbsp;'
+
+const hasHelpText = computed(() => {
+  return !!helpText || !!slots.helpText || !required
+})
+
+const needsHelpTextSpacer = computed(() => {
+  return !!helpText || !!slots.helpText
+})
+
+const onHover = () => {
+  if (readonly || disabled) {
+    return
+  }
+
+  isHovering.value = true
+}
+
+const onHoverOut = () => {
+  isHovering.value = false
+}
+
+const onFocus = () => {
+  if (readonly || disabled) {
+    return
+  }
+
+  isFocused.value = true
+}
+
+const onBlur = () => {
+  isFocused.value = false
+}
+
+const onInput = () => {
+  hasValue.value = !!input.value && input.value.value !== ''
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'textarea',
+      {
+        required,
+        disabled,
+        readonly,
+        'float-label': isFocused || placeholder || hasValue,
+        focus: isFocused,
+        hover: isHovering,
+        'has-error': error,
+        'show-help-text': hasHelpText,
+      },
+    ]"
+    @mouseenter="onHover"
+    @mouseleave="onHoverOut"
+  >
+    <div class="wrapper">
+      <div class="label">
+        <slot name="label"
+          ><label :for="inputId">{{ label }}</label></slot
+        >
+      </div>
+
+      <div class="control">
+        <slot>
+          <textarea
+            :id="inputId"
+            ref="input"
+            v-model="model"
+            :name
+            :disabled
+            :readonly
+            :required
+            :placeholder
+            @focus="onFocus"
+            @blur="onBlur"
+            @input="onInput"
+          />
+        </slot>
+        <div class="control-border"></div>
+      </div>
+    </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>
+    </div>
+
+    <div class="error-messages-container">
+      <slot name="error-message"
+        ><span>{{ errorMessage }}</span></slot
+      >
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./textarea.scss"></style>

package/elements/toggle-switch/index.js

@@ -0,0 +1 @@
+export { default as UToggleSwitch } from './u-toggle-switch.vue'

package/i18n/i18n.ts

@@ -1,4 +1,3 @@
-// TODO: translate this, dude!!
 const translations = {
   DE: {
     yes: 'Ja',
@@ -9,6 +8,9 @@ const translations = {
     showPassword: 'Passwort anzeigen',
     hidePassword: 'Passwort verbergen',
     close: 'Schliessen',
+    passwordRequirements: 'Anforderungen an das Passwort',
+    edit: 'Bearbeiten',
+    cancel: 'Abbrechen',
   },
   FR: {
     yes: 'Ja',
@@ -19,6 +21,9 @@ const translations = {
     showPassword: 'Passwort anzeigen',
     hidePassword: 'Passwort verbergen',
     close: 'Fermer',
+    passwordRequirements: 'Exigences relatives au mot de passe',
+    edit: 'Modifier',
+    cancel: 'Annuler',
   },
   IT: {
     yes: 'Ja',
@@ -29,6 +34,9 @@ const translations = {
     showPassword: 'Passwort anzeigen',
     hidePassword: 'Passwort verbergen',
     close: 'Chiudere',
+    passwordRequirements: 'Requisiti per la password',
+    edit: 'modificare',
+    cancel: 'cancellare',
   },
   EN: {
     yes: 'Ja',
@@ -39,6 +47,9 @@ const translations = {
     showPassword: 'Passwort anzeigen',
     hidePassword: 'Passwort verbergen',
     close: 'Close',
+    passwordRequirements: 'Password requirements',
+    edit: 'Edit',
+    cancel: 'Cancel',
   },
 }
 

package/modules/feedback/u-feedback-close.vue

@@ -18,12 +18,19 @@ const closeColor = computed(() => `var(--e-c-${color})`)
 </template>
 
 <style lang="scss" scoped>
+@use '../../base/abstracts' as a;
+
 .feedback-close-wrapper {
   position: absolute;
   padding: var(--e-space-2);
   right: var(--e-space-2);
   top: var(--e-space-2);
 
+  @include a.bp(xs) {
+    right: 0;
+    top: 0;
+  }
+
   button {
     cursor: pointer;
     color: v-bind('closeColor');

package/modules/feedback/u-feedback-finish-view.vue

@@ -23,6 +23,10 @@ defineEmits<{ close: [] }>()
   background-color: var(--e-c-primary-01-700);
   color: var(--e-c-mono-00);
   --fill-color: var(--e-c-mono-00);
+
+  @include a.bp(xs) {
+    padding: var(--e-space-6) var(--e-space-7) var(--e-space-6) var(--e-space-4);
+  }
 }
 
 .finish-text-title {

package/modules/inline-edit-group/index.js

@@ -0,0 +1 @@
+export { default as UInlineEditGroup } from './u-inline-edit-group.vue'

package/modules/inline-edit-group/u-inline-edit-group.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+
+const update = (id) => {
+  activeEdit.value = id
+}
+
+const activeEdit = ref('')
+
+provide('inline-edit-group', {
+  update,
+  activeEdit,
+})
+</script>
+
+<template>
+  <div class="inline-edit-group">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" src="./inline-edit-group.scss"></style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -9,7 +9,7 @@
     "./package.json": "./package.json",
     "./base-style.css": "./dist/base-style.css",
     "./elements": "./elements/index.js",
-    "./elements/*": "./elements/*",
+    "./elements/*": "./elements/*/index.js",
     "./components": "./components/index.js",
     "./components/*": "./components/*",
     "./modules": "./modules/index.js",