@weni/unnnic-system 1.16.17 → 1.16.19-develop.0

package/src/components/Select/SelectItem.vue

@@ -1,79 +1,79 @@
-<template>
-    <div
-      @click="$emit('click')"
-      :class="{
-        'unnnic-select-item': true,
-        'unnnic-select-item__active': active,
-        'unnnic--clickable': selectable,
-        'unnnic-select-item--selectable': selectable,
-        'text-focused': textFocused,
-      }">
-      <span :class="['unnnic-select-item__label', `unnnic-select-item__label--${size}`]">
-        <slot/>
-        </span>
-    </div>
-</template>
-
-<script>
-export default {
-  name: 'UnnicSelectItem',
-  props: {
-    size: {
-      type: String,
-      default: '',
-    },
-    selectable: {
-      type: Boolean,
-      default: true,
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    textFocused: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../assets/scss/unnnic.scss';
-  .unnnic-select-item {
-    background-color: $unnnic-color-background-snow;
-    padding: $unnnic-spacing-stack-nano $unnnic-inline-xs;
-    margin: $unnnic-inline-xs;
-
-    font-family: $unnnic-font-family-secondary;
-    color: $unnnic-color-neutral-dark;
-    font-weight: $unnnic-font-weight-regular;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 100%;
-    -webkit-line-clamp: 1;
-
-    &.text-focused {
-      color: $unnnic-color-brand-weni-soft;
-      font-weight: $unnnic-font-weight-bold;
-    }
-
-    &--selectable:hover, &__active{
-      background-color: $unnnic-color-neutral-lightest;
-      border-radius: $unnnic-border-radius-sm;
-    }
-
-    &__label{
-      &--md{
-        font-size: $unnnic-font-size-body-gt;
-        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-      }
-      &--sm{
-        font-size: $unnnic-font-size-body-md;
-        line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
-      }
-    }
-
-  }
-</style>
+<template>
+    <div
+      @click="$emit('click')"
+      :class="{
+        'unnnic-select-item': true,
+        'unnnic-select-item__active': active,
+        'unnnic--clickable': selectable,
+        'unnnic-select-item--selectable': selectable,
+        'text-focused': textFocused,
+      }">
+      <span :class="['unnnic-select-item__label', `unnnic-select-item__label--${size}`]">
+        <slot/>
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'UnnicSelectItem',
+  props: {
+    size: {
+      type: String,
+      default: '',
+    },
+    selectable: {
+      type: Boolean,
+      default: true,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    textFocused: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/unnnic.scss';
+  .unnnic-select-item {
+    background-color: $unnnic-color-background-snow;
+    padding: $unnnic-spacing-stack-nano $unnnic-inline-xs;
+    margin: $unnnic-inline-xs;
+
+    font-family: $unnnic-font-family-secondary;
+    color: $unnnic-color-neutral-dark;
+    font-weight: $unnnic-font-weight-regular;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
+    -webkit-line-clamp: 1;
+
+    &.text-focused {
+      color: $unnnic-color-brand-weni-soft;
+      font-weight: $unnnic-font-weight-bold;
+    }
+
+    &--selectable:hover, &__active{
+      background-color: $unnnic-color-neutral-lightest;
+      border-radius: $unnnic-border-radius-sm;
+    }
+
+    &__label{
+      &--md{
+        font-size: $unnnic-font-size-body-gt;
+        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+      }
+      &--sm{
+        font-size: $unnnic-font-size-body-md;
+        line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
+      }
+    }
+
+  }
+</style>

package/src/components/SelectListItem/SelectListItem.vue

@@ -1,125 +1,125 @@
-<template>
-  <div class="unnnic-select-list-item">
-    <div class="main">
-      <unnnic-checkbox class="unnnic-checkbox" :value="checked" @change="$emit('change', $event)" />
-
-      <span
-        v-if="title"
-        class="title u font secondary body-lg bold color-neutral-darkest"
-        :title="title"
-      >
-        {{ title }}
-      </span>
-
-      <span
-        v-if="description"
-        class="u font secondary body-md color-neutral-cloudy"
-        :title="description"
-      >
-        {{ description }}
-      </span>
-    </div>
-
-    <div class="content">
-      <div class="item" v-for="(item, index) in data" :key="index">
-        <span class="u font secondary body-gt color-neutral-dark">{{ item.name }}</span>
-        <span class="u font secondary body-gt bold color-neutral-darkest">{{ item.value }}</span>
-      </div>
-
-      <unnnic-dropdown v-if="$slots.actions" position="bottom-left">
-        <unnnic-icon
-          slot="trigger"
-          icon="navigation-menu-vertical-1"
-          size="sm"
-          scheme="neutral-cleanest"
-          clickable
-        />
-
-        <slot name="actions" />
-      </unnnic-dropdown>
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicCheckbox from '../Checkbox/Checkbox.vue';
-import UnnnicDropdown from '../Dropdown/Dropdown.vue';
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  model: {
-    prop: 'checked',
-    event: 'change',
-  },
-
-  components: {
-    UnnnicCheckbox,
-    UnnnicDropdown,
-    UnnnicIcon,
-  },
-
-  props: {
-    checked: Boolean,
-    title: String,
-    description: String,
-    data: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-
-.unnnic-select-list-item {
-  padding: $unnnic-spacing-inset-sm;
-  border-radius: $unnnic-border-radius-md;
-  background-color: $unnnic-color-background-snow;
-  outline-style: solid;
-  outline-color: $unnnic-color-neutral-soft;
-  outline-width: $unnnic-border-width-thinner;
-  outline-offset: -$unnnic-border-width-thinner;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .main {
-    display: flex;
-    column-gap: $unnnic-spacing-inline-sm;
-    align-items: center;
-    overflow: hidden;
-    min-width: $unnnic-spacing-inline-lg;
-    margin-right: $unnnic-spacing-inline-sm;
-    flex: 1;
-
-    .unnnic-checkbox {
-      margin: $unnnic-spacing-stack-nano $unnnic-spacing-inline-nano;
-    }
-
-    .u.font {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex: 1;
-    }
-
-    .title {
-      max-width: fit-content;
-    }
-  }
-
-  .content {
-    display: flex;
-    column-gap: $unnnic-spacing-inline-xl;
-
-    .item {
-      display: flex;
-      column-gap: $unnnic-spacing-inline-xs;
-    }
-  }
-}
-</style>
+<template>
+  <div class="unnnic-select-list-item">
+    <div class="main">
+      <unnnic-checkbox class="unnnic-checkbox" :value="checked" @change="$emit('change', $event)" />
+
+      <span
+        v-if="title"
+        class="title u font secondary body-lg bold color-neutral-darkest"
+        :title="title"
+      >
+        {{ title }}
+      </span>
+
+      <span
+        v-if="description"
+        class="u font secondary body-md color-neutral-cloudy"
+        :title="description"
+      >
+        {{ description }}
+      </span>
+    </div>
+
+    <div class="content">
+      <div class="item" v-for="(item, index) in data" :key="index">
+        <span class="u font secondary body-gt color-neutral-dark">{{ item.name }}</span>
+        <span class="u font secondary body-gt bold color-neutral-darkest">{{ item.value }}</span>
+      </div>
+
+      <unnnic-dropdown v-if="$slots.actions" position="bottom-left">
+        <unnnic-icon
+          slot="trigger"
+          icon="navigation-menu-vertical-1"
+          size="sm"
+          scheme="neutral-cleanest"
+          clickable
+        />
+
+        <slot name="actions" />
+      </unnnic-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import UnnnicCheckbox from '../Checkbox/Checkbox.vue';
+import UnnnicDropdown from '../Dropdown/Dropdown.vue';
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  model: {
+    prop: 'checked',
+    event: 'change',
+  },
+
+  components: {
+    UnnnicCheckbox,
+    UnnnicDropdown,
+    UnnnicIcon,
+  },
+
+  props: {
+    checked: Boolean,
+    title: String,
+    description: String,
+    data: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+.unnnic-select-list-item {
+  padding: $unnnic-spacing-inset-sm;
+  border-radius: $unnnic-border-radius-md;
+  background-color: $unnnic-color-background-snow;
+  outline-style: solid;
+  outline-color: $unnnic-color-neutral-soft;
+  outline-width: $unnnic-border-width-thinner;
+  outline-offset: -$unnnic-border-width-thinner;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .main {
+    display: flex;
+    column-gap: $unnnic-spacing-inline-sm;
+    align-items: center;
+    overflow: hidden;
+    min-width: $unnnic-spacing-inline-lg;
+    margin-right: $unnnic-spacing-inline-sm;
+    flex: 1;
+
+    .unnnic-checkbox {
+      margin: $unnnic-spacing-stack-nano $unnnic-spacing-inline-nano;
+    }
+
+    .u.font {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+    }
+
+    .title {
+      max-width: fit-content;
+    }
+  }
+
+  .content {
+    display: flex;
+    column-gap: $unnnic-spacing-inline-xl;
+
+    .item {
+      display: flex;
+      column-gap: $unnnic-spacing-inline-xs;
+    }
+  }
+}
+</style>

package/src/components/Sidebar/Sidebar.vue

@@ -1,91 +1,91 @@
-<template>
-    <div :class="{'unnnic-side-bar': true, 'unnnic-side-bar--contracted': !expanded}">
-        <div class="unnnic-side-bar__header">
-            <slot name="header" />
-        </div>
-        <slot />
-        <div class="unnnic-side-bar__footer">
-            <slot name="footer"/>
-        </div>
-    </div>
-</template>
-
-<script>
-
-export default {
-  name: 'unnnic-sidebar',
-  props: {
-    expanded: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../assets/scss/unnnic.scss';
-
-.unnnic-side-bar {
-    background-color: $unnnic-color-background-sky;
-    padding: $unnnic-inset-sm;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 15.375 * $unnnic-font-size;
-    transition: width .1s;
-    font-family: $unnnic-font-family-secondary;
-    box-sizing: border-box;
-
-    &--contracted {
-        width: 5.625 * $unnnic-font-size;
-        transition: width .1s;
-
-        .unnnic-side-bar {
-            &-menu {
-                &__title {
-                    display: none;
-                    margin: 0;
-                }
-
-                + .unnnic-side-bar-menu::before {
-                    width: 100%;
-                    height: 0px;
-                    border: 1px $unnnic-color-neutral-soft solid;
-                    content: '';
-                    display: block;
-                    margin-bottom: $unnnic-spacing-stack-md;
-                }
-            }
-
-            &-item {
-                display: flex;
-                justify-content: center;
-
-                &__icon {
-                    margin: 0;
-                    font-size: $unnnic-icon-size-md !important;
-                    width: $unnnic-icon-size-md !important;
-                    height: $unnnic-icon-size-md !important;
-                }
-
-                &__label {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    &__header {
-        margin-bottom: $unnnic-spacing-stack-md;
-    }
-
-    &__footer {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-    }
-}
-
-</style>
+<template>
+    <div :class="{'unnnic-side-bar': true, 'unnnic-side-bar--contracted': !expanded}">
+        <div class="unnnic-side-bar__header">
+            <slot name="header" />
+        </div>
+        <slot />
+        <div class="unnnic-side-bar__footer">
+            <slot name="footer"/>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'unnnic-sidebar',
+  props: {
+    expanded: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/unnnic.scss';
+
+.unnnic-side-bar {
+    background-color: $unnnic-color-background-sky;
+    padding: $unnnic-inset-sm;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 15.375 * $unnnic-font-size;
+    transition: width .1s;
+    font-family: $unnnic-font-family-secondary;
+    box-sizing: border-box;
+
+    &--contracted {
+        width: 5.625 * $unnnic-font-size;
+        transition: width .1s;
+
+        .unnnic-side-bar {
+            &-menu {
+                &__title {
+                    display: none;
+                    margin: 0;
+                }
+
+                + .unnnic-side-bar-menu::before {
+                    width: 100%;
+                    height: 0px;
+                    border: 1px $unnnic-color-neutral-soft solid;
+                    content: '';
+                    display: block;
+                    margin-bottom: $unnnic-spacing-stack-md;
+                }
+            }
+
+            &-item {
+                display: flex;
+                justify-content: center;
+
+                &__icon {
+                    margin: 0;
+                    font-size: $unnnic-icon-size-md !important;
+                    width: $unnnic-icon-size-md !important;
+                    height: $unnnic-icon-size-md !important;
+                }
+
+                &__label {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    &__header {
+        margin-bottom: $unnnic-spacing-stack-md;
+    }
+
+    &__footer {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+    }
+}
+
+</style>