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

package/src/components/Accordion/Accordion.vue

@@ -1,142 +1,142 @@
-<template>
-  <div @click="$emit('input', !open)" class="unnnic-accordion">
-    <div class="header">
-      <unnnic-icon-svg
-        :icon="open ? 'subtract-circle-1' : 'add-circle-1'"
-        scheme="neutral-clean"
-        size="md"
-      />
-
-      <div :class="['title', { open }]">{{ title }}</div>
-
-      <div v-show="open" class="actions">
-        <slot name="actions"></slot>
-      </div>
-    </div>
-
-    <div ref="content" :class="['content', { open }]" :style="{ height }">
-      <slot/>
-    </div>
-  </div>
-</template>
-
-<script>
-import unnnicIconSvg from '../Icon.vue';
-
-export default {
-  model: {
-    prop: 'open',
-  },
-
-  components: {
-    unnnicIconSvg,
-  },
-
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-
-    title: {
-      type: String,
-    },
-  },
-
-  data() {
-    return {
-      height: 0,
-      setHeightToNull: null,
-    };
-  },
-
-  mounted() {
-    if (this.open) {
-      this.height = null;
-    }
-  },
-
-  watch: {
-    open(value) {
-      clearTimeout(this.setHeightToNull);
-
-      if (value) {
-        this.height = `${this.$refs.content.scrollHeight}px`;
-
-        this.setHeightToNull = setTimeout(() => {
-          this.height = null;
-        }, 200);
-      } else {
-        this.height = `${this.$refs.content.scrollHeight}px`;
-
-        setTimeout(() => {
-          this.height = 0;
-        }, 0);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
-
-.unnnic-accordion {
-  background-color: $unnnic-color-background-snow;
-  padding: $unnnic-spacing-inset-md;
-  border-radius: $unnnic-border-radius-md;
-  z-index: 0;
-  cursor: pointer;
-  position: relative;
-
-  &:before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: -1;
-    border-radius: $unnnic-border-radius-md;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-
-    .title {
-      flex: 1;
-      font-family: $unnnic-font-family-secondary;
-      font-weight: $unnnic-font-weight-regular;
-      font-size: $unnnic-font-size-body-lg;
-      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-      color: $unnnic-color-neutral-darkest;
-      margin-left: $unnnic-spacing-inline-xs;
-
-      &.open {
-        font-weight: $unnnic-font-weight-bold;
-      }
-    }
-  }
-
-  .content {
-    overflow: hidden;
-    transition: all 0.2s;
-    margin-top: 0;
-    opacity: 0;
-
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-    font-size: $unnnic-font-size-body-lg;
-    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-    color: $unnnic-color-neutral-dark;
-  }
-
-  .content.open {
-    margin-top: $unnnic-spacing-stack-sm;
-    opacity: 1;
-  }
-}
-</style>
+<template>
+  <div @click="$emit('input', !open)" class="unnnic-accordion">
+    <div class="header">
+      <unnnic-icon-svg
+        :icon="open ? 'subtract-circle-1' : 'add-circle-1'"
+        scheme="neutral-clean"
+        size="md"
+      />
+
+      <div :class="['title', { open }]">{{ title }}</div>
+
+      <div v-show="open" class="actions">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+
+    <div ref="content" :class="['content', { open }]" :style="{ height }">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script>
+import unnnicIconSvg from '../Icon.vue';
+
+export default {
+  model: {
+    prop: 'open',
+  },
+
+  components: {
+    unnnicIconSvg,
+  },
+
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+
+    title: {
+      type: String,
+    },
+  },
+
+  data() {
+    return {
+      height: 0,
+      setHeightToNull: null,
+    };
+  },
+
+  mounted() {
+    if (this.open) {
+      this.height = null;
+    }
+  },
+
+  watch: {
+    open(value) {
+      clearTimeout(this.setHeightToNull);
+
+      if (value) {
+        this.height = `${this.$refs.content.scrollHeight}px`;
+
+        this.setHeightToNull = setTimeout(() => {
+          this.height = null;
+        }, 200);
+      } else {
+        this.height = `${this.$refs.content.scrollHeight}px`;
+
+        setTimeout(() => {
+          this.height = 0;
+        }, 0);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.unnnic-accordion {
+  background-color: $unnnic-color-background-snow;
+  padding: $unnnic-spacing-inset-md;
+  border-radius: $unnnic-border-radius-md;
+  z-index: 0;
+  cursor: pointer;
+  position: relative;
+
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+    border-radius: $unnnic-border-radius-md;
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+
+    .title {
+      flex: 1;
+      font-family: $unnnic-font-family-secondary;
+      font-weight: $unnnic-font-weight-regular;
+      font-size: $unnnic-font-size-body-lg;
+      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+      color: $unnnic-color-neutral-darkest;
+      margin-left: $unnnic-spacing-inline-xs;
+
+      &.open {
+        font-weight: $unnnic-font-weight-bold;
+      }
+    }
+  }
+
+  .content {
+    overflow: hidden;
+    transition: all 0.2s;
+    margin-top: 0;
+    opacity: 0;
+
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-lg;
+    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+    color: $unnnic-color-neutral-dark;
+  }
+
+  .content.open {
+    margin-top: $unnnic-spacing-stack-sm;
+    opacity: 1;
+  }
+}
+</style>

package/src/components/Alert/Alert.vue

@@ -1,145 +1,145 @@
-<template>
-  <div v-if="version === '1.0'" :class="['unnnic-alert', `unnnic-alert-position--${position}`]">
-    <unnnic-icon-svg
-      :icon="icon"
-      :scheme="scheme"
-      size="sm"
-    />
-    <div class="unnnic-alert__content">
-      <div class="unnnic-alert__title">
-        {{ title.toUpperCase() }}
-      </div>
-      <div class="unnnic-alert__text">
-        {{ text }}
-      </div>
-    </div>
-    <div
-      v-if="closeText"
-      class="unnnic-alert__close-text unnnic--clickable"
-      @click="onClose()">
-      {{ closeText.toUpperCase() }}
-    </div>
-    <unnnic-icon-svg
-      v-else
-      clickable
-      icon="close-1"
-      scheme="brand-sec"
-      size="xs"
-      @click="onClose"
-    />
-  </div>
-
-  <component v-else :is="'version' + version.replace(/\./g, 'dot')" v-bind="$props"></component>
-</template>
-
-<script>
-import unnnicIconSvg from '../Icon.vue';
-import Version1dot1 from './Version1dot1.vue';
-
-export default {
-  name: 'unnnicAlert',
-  components: {
-    unnnicIconSvg,
-    Version1dot1,
-  },
-  props: {
-    version: {
-      type: String,
-      default: '1.1',
-    },
-
-    title: {
-      type: String,
-      default: null,
-    },
-    text: {
-      type: String,
-      default: null,
-    },
-    scheme: {
-      type: String,
-      default: null,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    closeText: {
-      type: String,
-    },
-    position: {
-      type: String,
-      default: 'top-right',
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-
-  .unnnic-alert {
-    position: fixed;
-    padding: $unnnic-inset-xs;
-    min-width: 12.5 * $unnnic-font-size;
-
-    display: inline-flex;
-    align-items: center;
-
-    font-family: $unnnic-font-family-secondary;
-    border-radius: $unnnic-border-radius-sm;
-
-    background-color: $unnnic-color-background-snow;
-    box-shadow: $unnnic-shadow-level-near;
-    position: fixed;
-
-    z-index: 9999;
-
-    &-position {
-      &--top-right {
-        top: 1 * $unnnic-font-size;
-        right: 1 * $unnnic-font-size;
-      }
-      &--top-left {
-        top: 1 * $unnnic-font-size;
-        left: 1 * $unnnic-font-size;
-      }
-      &--bottom-right {
-        bottom: 1 * $unnnic-font-size;
-        right: 1 * $unnnic-font-size;
-      }
-      &--bottom-left {
-        bottom: 1 * $unnnic-font-size;
-        left: 1 * $unnnic-font-size;
-      }
-    }
-
-    &__content {
-      flex: 1;
-      margin: 0 $unnnic-inline-xs;
-    }
-
-    &__title {
-      font-size: $unnnic-font-size-body-sm ;
-      font-weight: $unnnic-font-weight-bold;
-      color: $unnnic-color-neutral-darkest;
-    }
-
-    &__text {
-      font-size: $unnnic-font-size-body-md;
-      font-weight: $unnnic-font-weight-regular;
-      color: $unnnic-color-neutral-dark;
-    }
-
-    &__close {
-      &-text {
-        color: $unnnic-color-brand-sec;
-        font-size: $unnnic-font-size-body-md;
-      }
-    }
-  }
-</style>
+<template>
+  <div v-if="version === '1.0'" :class="['unnnic-alert', `unnnic-alert-position--${position}`]">
+    <unnnic-icon-svg
+      :icon="icon"
+      :scheme="scheme"
+      size="sm"
+    />
+    <div class="unnnic-alert__content">
+      <div class="unnnic-alert__title">
+        {{ title.toUpperCase() }}
+      </div>
+      <div class="unnnic-alert__text">
+        {{ text }}
+      </div>
+    </div>
+    <div
+      v-if="closeText"
+      class="unnnic-alert__close-text unnnic--clickable"
+      @click="onClose()">
+      {{ closeText.toUpperCase() }}
+    </div>
+    <unnnic-icon-svg
+      v-else
+      clickable
+      icon="close-1"
+      scheme="brand-sec"
+      size="xs"
+      @click="onClose"
+    />
+  </div>
+
+  <component v-else :is="'version' + version.replace(/\./g, 'dot')" v-bind="$props"></component>
+</template>
+
+<script>
+import unnnicIconSvg from '../Icon.vue';
+import Version1dot1 from './Version1dot1.vue';
+
+export default {
+  name: 'unnnicAlert',
+  components: {
+    unnnicIconSvg,
+    Version1dot1,
+  },
+  props: {
+    version: {
+      type: String,
+      default: '1.1',
+    },
+
+    title: {
+      type: String,
+      default: null,
+    },
+    text: {
+      type: String,
+      default: null,
+    },
+    scheme: {
+      type: String,
+      default: null,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    closeText: {
+      type: String,
+    },
+    position: {
+      type: String,
+      default: 'top-right',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+  .unnnic-alert {
+    position: fixed;
+    padding: $unnnic-inset-xs;
+    min-width: 12.5 * $unnnic-font-size;
+
+    display: inline-flex;
+    align-items: center;
+
+    font-family: $unnnic-font-family-secondary;
+    border-radius: $unnnic-border-radius-sm;
+
+    background-color: $unnnic-color-background-snow;
+    box-shadow: $unnnic-shadow-level-near;
+    position: fixed;
+
+    z-index: 9999;
+
+    &-position {
+      &--top-right {
+        top: 1 * $unnnic-font-size;
+        right: 1 * $unnnic-font-size;
+      }
+      &--top-left {
+        top: 1 * $unnnic-font-size;
+        left: 1 * $unnnic-font-size;
+      }
+      &--bottom-right {
+        bottom: 1 * $unnnic-font-size;
+        right: 1 * $unnnic-font-size;
+      }
+      &--bottom-left {
+        bottom: 1 * $unnnic-font-size;
+        left: 1 * $unnnic-font-size;
+      }
+    }
+
+    &__content {
+      flex: 1;
+      margin: 0 $unnnic-inline-xs;
+    }
+
+    &__title {
+      font-size: $unnnic-font-size-body-sm ;
+      font-weight: $unnnic-font-weight-bold;
+      color: $unnnic-color-neutral-darkest;
+    }
+
+    &__text {
+      font-size: $unnnic-font-size-body-md;
+      font-weight: $unnnic-font-weight-regular;
+      color: $unnnic-color-neutral-dark;
+    }
+
+    &__close {
+      &-text {
+        color: $unnnic-color-brand-sec;
+        font-size: $unnnic-font-size-body-md;
+      }
+    }
+  }
+</style>

package/src/components/Alert/AlertCaller.vue

@@ -1,49 +1,49 @@
-<template>
-    <button @click="callAlert"> Launch alert </button>
-</template>
-
-<script>
-import alert from '../../utils/call';
-
-export default {
-  props: {
-    title: {
-      type: String,
-      default: null,
-    },
-    text: {
-      type: String,
-      default: null,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    enabled: {
-      type: Boolean,
-      default: true,
-    },
-    scheme: {
-      type: String,
-      default: null,
-    },
-    seconds: {
-      type: Number,
-      default: 3,
-    },
-    closeText: {
-      type: String,
-      default: null,
-    },
-    position: {
-      type: String,
-      default: 'top-right',
-    },
-  },
-  methods: {
-    callAlert() {
-      alert.callAlert({ props: this.$props, seconds: this.seconds });
-    },
-  },
-};
-</script>
+<template>
+    <button @click="callAlert"> Launch alert </button>
+</template>
+
+<script>
+import alert from '../../utils/call';
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: null,
+    },
+    text: {
+      type: String,
+      default: null,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
+    scheme: {
+      type: String,
+      default: null,
+    },
+    seconds: {
+      type: Number,
+      default: 3,
+    },
+    closeText: {
+      type: String,
+      default: null,
+    },
+    position: {
+      type: String,
+      default: 'top-right',
+    },
+  },
+  methods: {
+    callAlert() {
+      alert.callAlert({ props: this.$props, seconds: this.seconds });
+    },
+  },
+};
+</script>