@weni/unnnic-system 2.0.0 → 2.0.2

package/src/components/SkeletonLoading/SkeletonLoading.vue

@@ -1,27 +1,33 @@
+<template>
+  <component
+    :is="tag"
+    v-if="showLoading"
+  >
+    <span
+      v-for="(element, index) in elements"
+      :key="index"
+      :class="classes"
+      :style="styles"
+    >
+      &zwnj;
+    </span>
+  </component>
+</template>
+
 <script>
+import { ref, inject } from 'vue';
 import { SkeletonStyle } from './skeletonTheme.vue';
 
-const isEmptyVNode = (children) => {
-  if (!children) return true;
-  const [firstNode] = children;
-  let str = firstNode.text;
-  if (str) {
-    // remove all line-break and space character
-    str = str.replace(/(\n|\r\n|\s)/g, '');
-  }
-  return typeof firstNode.tag === 'undefined' && !str;
-};
 export default {
-  name: 'unnnicSkeleton',
-  inject: {
-    themeStyle: {
-      from: '_themeStyle',
-      default: SkeletonStyle,
-    },
-    theme: {
-      from: '_skeletonTheme',
-      default: {},
-    },
+  name: 'unnnicSkeletonLoading',
+  setup() {
+    const themeStyle = inject('_themeStyle', ref(SkeletonStyle));
+    const theme = inject('_skeletonTheme', ref({}));
+
+    return {
+      themeStyle,
+      theme,
+    };
   },
   props: {
     prefix: {
@@ -42,8 +48,14 @@ export default {
     },
     width: [String, Number],
     height: [String, Number],
-    circle: Boolean,
-    loading: undefined,
+    circle: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: undefined,
+    },
   },
   computed: {
     isLoading() {
@@ -51,50 +63,51 @@ export default {
         ? this.theme.loading
         : this.loading;
     },
+    classes() {
+      return [`${this.prefix}-skeleton`];
+    },
+    styles() {
+      const styles = { ...this.themeStyle };
+      if (this.duration) {
+        styles.animation = `SkeletonLoading ${this.duration}s ease-in-out infinite`;
+      } else {
+        styles.backgroundImage = '';
+      }
+      if (this.width) styles.width = this.width;
+      if (this.height) styles.height = this.height;
+      if (this.circle) styles.borderRadius = '50%';
+      return styles;
+    },
+    elements() {
+      const elements = [];
+      for (let i = 0; i < this.count; i += 1) {
+        elements.push({});
+      }
+      return elements;
+    },
+    showLoading() {
+      return typeof this.isLoading !== 'undefined'
+        ? this.isLoading
+        : this.isEmptyVNode(this.$slots.default);
+    },
   },
-  render(h) {
-    const {
-      width,
-      height,
-      duration,
-      prefix,
-      circle,
-      count,
-      tag,
-      isLoading,
-    } = this;
-    const classes = [`${prefix}-skeleton`];
-    const elements = [];
-    const styles = { ...this.themeStyle };
-    if (duration) {
-      styles.animation = `SkeletonLoading ${duration}s ease-in-out infinite`;
-    } else {
-      styles.backgroundImage = '';
-    }
-    if (width) styles.width = width;
-    if (height) styles.height = height;
-    if (circle) styles.borderRadius = '50%';
-    for (let i = 0; i < count; i += 1) {
-      elements.push(
-        <span key={i} class={classes} style={styles}>
-          &zwnj;
-        </span>,
-      );
-    }
-    const showLoading = typeof isLoading !== 'undefined'
-      ? isLoading
-      : isEmptyVNode(this.$slots.default);
-    if (tag) {
-      return h(tag, !showLoading ? this.$slots.default : elements);
-    }
-    return !showLoading ? this.$slots.default : <span>{elements}</span>;
+  methods: {
+    isEmptyVNode(children) {
+      if (!children) return true;
+      const [firstNode] = children;
+      let str = firstNode.text;
+      if (str) {
+        // remove all line-break and space character
+        str = str.replace(/(\n|\r\n|\s)/g, '');
+      }
+      return typeof firstNode.tag === 'undefined' && !str;
+    },
   },
 };
 </script>
 
 <style lang="scss">
-@import "../../assets/scss/unnnic.scss";
-
+@import '../../assets/scss/unnnic.scss';
 .unnnic-skeleton {
   background-size: 500px 100%;
   background-repeat: no-repeat;

package/src/components/SkeletonLoading/skeletonTheme.vue

@@ -1,7 +1,24 @@
-<script lang="jsx">
-import { unnnicColorBackgroundSolo } from '../../assets/scss/colors.scss';
+<template>
+  <div :style="themeStyle">
+    <component
+      v-if="tag"
+      :is="tag"
+    >
+      <slot></slot>
+    </component>
+    <slot v-else></slot>
+  </div>
+</template>
 
-export const DEFAULT_BACKGROUND = unnnicColorBackgroundSolo;
+<script>
+import { ref, provide } from 'vue';
+import colors from '@/assets/scss/colors.scss?inline';
+
+// eslint-disable-next-line no-useless-escape
+const backgroundValueRegex = /unnnicColorBackgroundSolo:\s*(.*)\;/;
+const match = backgroundValueRegex.exec(colors);
+
+export const DEFAULT_BACKGROUND = match ? match[1] : '#E8F4F4';
 export const DEFAULT_HIGHLIGHT = 'rgba(255,255,255,0.375)';
 export const SkeletonStyle = {
   backgroundColor: DEFAULT_BACKGROUND,
@@ -14,10 +31,16 @@ export const SkeletonStyle = {
 };
 export default {
   name: 'unnnicSkeletonTheme',
-  provide() {
+  setup() {
+    const themeStyle = ref(SkeletonStyle);
+    const theme = ref({});
+
+    provide('_themeStyle', themeStyle);
+    provide('_skeletonTheme', theme);
+
     return {
-      _themeStyle: this.themeStyle,
-      _skeletonTheme: this,
+      themeStyle,
+      theme,
     };
   },
   props: {
@@ -42,12 +65,7 @@ export default {
       default: undefined,
     },
   },
-  data() {
-    return {
-      themeStyle: { ...SkeletonStyle },
-    };
-  },
-  render(h) {
+  mounted() {
     const { color, highlight, duration } = this;
     this.themeStyle.backgroundColor = color;
     this.themeStyle.backgroundImage = `linear-gradient(
@@ -62,13 +80,6 @@ export default {
       this.themeStyle.animation = '';
       this.themeStyle.backgroundImage = '';
     }
-    if (this.tag) {
-      return h(this.tag, this.$slots.default);
-    }
-    return this.$slots.default[0];
   },
 };
 </script>
-<style lang="scss">
-@import "../../assets/scss/unnnic.scss";
-</style>

package/src/components/Slider/Slider.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="unnnic-slider" :style="cssVars">
+  <div
+    class="unnnic-slider"
+    :style="cssVars"
+  >
     <div class="unnnic-slider__content">
-      <unnnicTooltip
+      <UnnnicTooltip
         ref="tooltip"
         class="unnnic-slider__content__tooltip"
         :text="sliderVal.toString()"
-        :force-open="true"
+        :forceOpen="true"
         :enabled="showTooltip"
         side="top"
       >
@@ -21,7 +24,7 @@
           @mouseover="showTooltip = true"
           @mouseleave="showTooltip = false"
         />
-      </unnnicTooltip>
+      </UnnnicTooltip>
 
       <div class="unnnic-slider__content__labels">
         <div class="unnnic-slider__content__labels__min">{{ minLabel }}</div>
@@ -29,7 +32,12 @@
       </div>
     </div>
 
-    <div ref="value-input" class="value-input" contenteditable="true" @input="handleInput" />
+    <div
+      ref="value-input"
+      class="value-input"
+      contenteditable="true"
+      @input="handleInput"
+    />
   </div>
 </template>
 
@@ -79,13 +87,14 @@ export default {
   created() {
     window.addEventListener('resize', this.handleResize);
   },
-  destroyed() {
+  unmounted() {
     window.removeEventListener('resize', this.handleResize);
   },
   mounted() {
     const fallbackLabelWidth = 32 + this.sliderVal.toString().length * 4.5;
     this.sliderWidth = this.$refs.input.clientWidth;
-    this.labelWidth = this.$refs.tooltip.$refs.label.clientWidth || fallbackLabelWidth;
+    this.labelWidth =
+      this.$refs.tooltip.$refs.label.clientWidth || fallbackLabelWidth;
     this.tooltipOffset = this.getNewTooltipPosition();
   },
   watch: {
@@ -125,7 +134,8 @@ export default {
       const halfLabelWidth = this.labelWidth / 2;
       const centerPosition = this.sliderWidth / 2;
 
-      let percentOfRange = (this.sliderVal - this.minValue) / (this.maxValue - this.minValue);
+      let percentOfRange =
+        (this.sliderVal - this.minValue) / (this.maxValue - this.minValue);
       if (Number.isNaN(percentOfRange)) {
         percentOfRange = 0;
       }
@@ -167,7 +177,8 @@ export default {
   font-size: $unnnic-font-size-body-md;
   line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
   padding: $unnnic-squish-nano;
-  height: $unnnic-font-size-body-md + $unnnic-line-height-medium + 0.5 * $unnnic-font-size * 2;
+  height: $unnnic-font-size-body-md + $unnnic-line-height-medium + 0.5 *
+    $unnnic-font-size * 2;
   position: relative;
 
   &:before {
@@ -177,13 +188,13 @@ export default {
     right: 0;
     top: 0;
     bottom: 0;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
     border-radius: inherit;
     pointer-events: none;
   }
 
   &:focus:before {
-    border-color: $unnnic-color-neutral-clean;
+    border-color: $unnnic-color-neutral-cleanest;
   }
 
   &:focus {
@@ -274,7 +285,9 @@ export default {
       &::-webkit-slider-runnable-track {
         @include track(1);
         margin: $unnnic-spacing-inline-xs 0;
-        --progress: calc((var(--val) - var(--min)) / ((var(--max) - var(--min))) * 100%);
+        --progress: calc(
+          (var(--val) - var(--min)) / ((var(--max) - var(--min))) * 100%
+        );
         background: linear-gradient(
           to right,
           $unnnic-color-aux-baby-blue 0%,

package/src/components/StarRating/StarRating.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="unnnic-star-rating">
-    <unnnic-icon
+    <UnnnicIcon
       :key="index"
       v-for="index in 5"
       :scheme="starScheme(index)"
@@ -8,8 +8,12 @@
       size="ant"
     />
 
-    <div v-if="showValue" class="rating-title">
-      <span class="highlight">{{ value.toFixed(1) }}</span>/5.0
+    <div
+      v-if="showValue"
+      class="rating-title"
+    >
+      <span class="highlight">{{ value.toFixed(1) }}</span
+      >/5.0
     </div>
   </div>
 </template>
@@ -49,7 +53,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-star-rating {
   display: flex;
@@ -61,7 +65,7 @@ export default {
     font-weight: $unnnic-font-weight-bold;
     font-size: $unnnic-font-size-body-lg;
     line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-    color: $unnnic-color-neutral-clean;
+    color: $unnnic-color-neutral-cleanest;
 
     .highlight {
       color: $unnnic-color-neutral-darkest;

package/src/components/Switch/Switch.vue

@@ -11,13 +11,13 @@
       {{ textLeft }}
     </div>
 
-    <unnnic-icon-svg
+    <UnnnicIconSvg
       :class="{ 'unnnic-switch__icon': true, active: isActive }"
       :icon="currentIcon"
       :size="iconSize"
       :scheme="iconScheme"
       :lineHeight="iconLineHeight"
-      @click.native="toggleState"
+      @click="toggleState"
     />
 
     <div
@@ -59,10 +59,13 @@ export default {
       type: Boolean,
       default: false,
     },
-    value: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
+    useVModel: {
+      type: Boolean,
+    },
   },
   data() {
     return {
@@ -71,10 +74,10 @@ export default {
   },
 
   watch: {
-    value: {
+    modelValue: {
       immediate: true,
       handler() {
-        this.isActive = this.value;
+        this.isActive = this.modelValue;
       },
     },
   },
@@ -82,15 +85,23 @@ export default {
   methods: {
     toggleState() {
       if (this.disabled) return;
-      this.isActive = !this.isActive;
-      this.$emit('input', this.isActive);
+
+      if (this.useVModel) {
+        this.$emit('update:model-value', !this.isActive);
+      } else {
+        this.isActive = !this.isActive;
+        this.$emit('update:model-value', this.isActive);
+      }
     },
   },
   computed: {
     currentIcon() {
       if (this.disabled) {
-        return this.isActive ? 'switch-selected-disabled' : 'switch-default-disabled';
+        return this.isActive
+          ? 'switch-selected-disabled'
+          : 'switch-default-disabled';
       }
+
       return 'switch-default';
     },
 
@@ -143,17 +154,13 @@ export default {
     align-self: center;
     margin: $unnnic-spacing-stack-nano $unnnic-inline-nano;
 
-    ::v-deep svg {
-      #default-circle {
-        transition: 0.2s linear transform;
-      }
+    :deep(#default-circle) {
+      transition: 0.2s linear transform;
     }
 
     &.active {
-      ::v-deep svg {
-        #default-circle {
-          transform: translateX(45%);
-        }
+      :deep(#default-circle) {
+        transform: translateX(45%);
       }
     }
   }

package/src/components/Tab/Tab.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div :class="['tab', `size-${size}`]">
     <header class="tab-header">
@@ -51,7 +52,8 @@ export default {
     };
   },
   created() {
-    const value = this.initialTab || this.activeTab || (this.tabs && this.tabs[0]);
+    const value =
+      this.initialTab || this.activeTab || (this.tabs && this.tabs[0]);
 
     this.change(value);
   },
@@ -78,7 +80,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .tab-header {
   display: flex;
@@ -120,7 +122,8 @@ export default {
     padding-bottom: $unnnic-spacing-stack-xs;
     margin-bottom: $unnnic-spacing-stack-xs;
 
-    .tab-head, .tab-head--active {
+    .tab-head,
+    .tab-head--active {
       font-size: $unnnic-font-size-body-md;
       line-height: ($unnnic-font-size-body-md + $unnnic-line-height-md);
     }

package/src/components/Table/Table.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-show="true" class="unnnic-table">
+  <div
+    v-show="true"
+    class="unnnic-table"
+  >
     <div class="header">
       <slot name="header"></slot>
     </div>
@@ -9,9 +12,15 @@
     </div>
 
     <div class="scroll">
-      <template v-for="(item, index) in items">
-        <div class="item" :key="index">
-          <slot name="item" :item="item"></slot>
+      <template
+        v-for="(item, index) in items"
+        :key="index"
+      >
+        <div class="item">
+          <slot
+            name="item"
+            :item="item"
+          ></slot>
         </div>
       </template>
     </div>
@@ -41,7 +50,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 $scroll-size: 4px;
 

package/src/components/Table/TableRow.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="table-row">
-    <template class="col" v-for="(header, index) in headers">
+    <template
+      v-for="(header, index) in headers"
+      :key="header.id"
+    >
       <div
         class="col"
-        :key="header.id"
         :style="{
           width: header.width,
           flex: header.flex,
@@ -18,7 +20,6 @@
       <div
         v-show="index + 1 !== headers.length"
         :class="['divider', { condensed: header.condensed }]"
-        :key="`divider-${index}`"
       ></div>
     </template>
   </div>
@@ -49,7 +50,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .table-row {
   display: flex;

package/src/components/TabsExpanded/TabsExpanded.vue

@@ -1,18 +1,28 @@
 <template>
   <div class="unnnic-tabs-expanded">
-    <div class="back-container" @click="$emit('back')">
-      <unnnic-icon
+    <div
+      class="back-container"
+      @click="$emit('back')"
+    >
+      <UnnnicIcon
         icon="keyboard-arrow-left-1"
         scheme="neutral-cloudy"
       />
     </div>
 
-    <div class="tab" v-for="item in items" :key="item.value" @click="$emit('change', item.value)">
+    <div
+      class="tab"
+      v-for="item in items"
+      :key="item.value"
+      @click="$emit('update:model-value', item.value)"
+    >
       <div>
         <div
           :class="[
             'u font secondary body-gt bold',
-            item.value === value ? 'color-brand-weni-soft' : 'color-neutral-cloudy',
+            item.value === modelValue
+              ? 'color-brand-weni-soft'
+              : 'color-neutral-cloudy',
           ]"
         >
           {{ item.title }}
@@ -23,9 +33,12 @@
         </div>
       </div>
 
-      <div v-if="item.value === value" class="close-container">
-        <unnnic-icon
-          @click.native.stop="$emit('close-tab', item)"
+      <div
+        v-if="item.value === modelValue"
+        class="close-container"
+      >
+        <UnnnicIcon
+          @click.stop="$emit('close-tab', item)"
           icon="close-1"
           size="xs"
           scheme="neutral-cloudy"
@@ -33,8 +46,11 @@
       </div>
     </div>
 
-    <div class="add-container" @click="$emit('add')">
-      <unnnic-icon
+    <div
+      class="add-container"
+      @click="$emit('add')"
+    >
+      <UnnnicIcon
         icon="add-1"
         scheme="neutral-cloudy"
         size="sm"
@@ -47,16 +63,12 @@
 import UnnnicIcon from '../Icon.vue';
 
 export default {
-  model: {
-    event: 'change',
-  },
-
   components: {
     UnnnicIcon,
   },
 
   props: {
-    value: {
+    modelValue: {
       type: [String, Number],
     },
 
@@ -68,7 +80,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-tabs-expanded {
   position: relative;
@@ -80,7 +92,8 @@ export default {
     margin-bottom: -$unnnic-border-width-thinner;
   }
 
-  .back-container, .add-container {
+  .back-container,
+  .add-container {
     padding: $unnnic-spacing-inset-sm;
     cursor: pointer;
     user-select: none;