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

package/src/components/FormElement/FormElement.vue

@@ -1,60 +1,60 @@
-<template>
-  <div class="unnnic-form-element">
-    <div
-      v-if="label"
-      :class="[
-        'label unnnic-font secondary color-neutral-cloudy',
-        { 'body-md': size === 'sm', 'body-gt': size == 'md' },
-      ]"
-    >
-      {{ label }}
-    </div>
-
-    <slot></slot>
-
-    <div
-      v-if="error && error !== true"
-      class="message unnnic-font secondary body-md color-feedback-red"
-    >
-      {{ error }}
-    </div>
-
-    <div v-if="message" class="message unnnic-font secondary body-md color-neutral-cloudy">
-      {{ message }}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    size: {
-      type: String,
-      default: 'md',
-      validator: (size) => ['md', 'sm'].includes(size),
-    },
-
-    label: String,
-
-    error: [Boolean, String],
-
-    message: String,
-  },
-
-  data() {},
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-
-.unnnic-form-element {
-  .label {
-    margin-bottom: $unnnic-spacing-stack-xs;
-  }
-
-  .message {
-    margin-top: $unnnic-spacing-stack-nano;
-  }
-}
-</style>
+<template>
+  <div class="unnnic-form-element">
+    <div
+      v-if="label"
+      :class="[
+        'label unnnic-font secondary color-neutral-cloudy',
+        { 'body-md': size === 'sm', 'body-gt': size == 'md' },
+      ]"
+    >
+      {{ label }}
+    </div>
+
+    <slot></slot>
+
+    <div
+      v-if="error && error !== true"
+      class="message unnnic-font secondary body-md color-feedback-red"
+    >
+      {{ error }}
+    </div>
+
+    <div v-if="message" class="message unnnic-font secondary body-md color-neutral-cloudy">
+      {{ message }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      validator: (size) => ['md', 'sm'].includes(size),
+    },
+
+    label: String,
+
+    error: [Boolean, String],
+
+    message: String,
+  },
+
+  data() {},
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+.unnnic-form-element {
+  .label {
+    margin-bottom: $unnnic-spacing-stack-xs;
+  }
+
+  .message {
+    margin-top: $unnnic-spacing-stack-nano;
+  }
+}
+</style>

package/src/components/Icon.vue

@@ -1,157 +1,157 @@
-<template>
-<span
-    @click="onClick"
-    @mousedown="$emit('mousedown')"
-    @mouseup="$emit('mouseup')"
-    :class="[
-      'unnnic-icon',
-      `unnnic-icon__size--${size}`,
-      clickable ? 'unnnic--clickable' : '',
-      lineHeight ? `unnnic-icon__line-height--${lineHeight}` : '',
-      scheme ? `unnnic-icon-scheme--${scheme}` : '',
-    ]"
-    v-html="svg" />
-</template>
-
-<script>
-import icons from '../utils/icons';
-
-export default {
-  name: 'uIcon',
-  props: {
-    icon: {
-      type: String,
-      default: null,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: 'md',
-      validator(value) {
-        return [
-          'nano', 'xs', 'sm', 'ant', 'md', 'lg', 'xl',
-          'avatar-lg', 'avatar-md', 'avatar-sm', 'avatar-xs', 'avatar-nano',
-        ].indexOf(value) !== -1;
-      },
-    },
-    lineHeight: {
-      type: String,
-      default: null,
-      validator(value) {
-        return !value || ['sm', 'md', 'lg'].indexOf(value) !== -1;
-      },
-    },
-    scheme: {
-      type: String,
-      default: '',
-    },
-  },
-  mounted() {},
-  computed: {
-    svg() {
-      return icons[this.icon];
-    },
-  },
-  methods: {
-    onClick() {
-      if (!this.clickable) return;
-      this.$emit('click');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../assets/scss/unnnic.scss";
-
-.unnnic-icon ::v-deep svg {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-</style>
-
-<style lang="scss">
-@import "../assets/scss/unnnic.scss";
-
-$scheme-colors: "feedback-red" $unnnic-color-feedback-red,
-  "feedback-green" $unnnic-color-feedback-green, "feedback-yellow" $unnnic-color-feedback-yellow,
-  "feedback-blue" $unnnic-color-feedback-blue, "feedback-grey" $unnnic-color-feedback-grey,
-  "aux-blue" $unnnic-color-aux-blue, "aux-purple" $unnnic-color-aux-purple,
-  "aux-orange" $unnnic-color-aux-orange, "aux-lemon" $unnnic-color-aux-lemon,
-  "aux-pink" $unnnic-color-aux-pink,
-  "brand-weni" $unnnic-color-brand-weni,
-  "brand-weni-soft" $unnnic-color-brand-weni-soft,
-  "brand-weni-dark" $unnnic-color-brand-weni-dark,
-  "brand-sec" $unnnic-color-brand-sec,
-  "neutral-clean" $unnnic-color-neutral-clean,
-  "neutral-cleanest" $unnnic-color-neutral-cleanest,
-  "neutral-dark" $unnnic-color-neutral-dark,
-  "neutral-soft" $unnnic-color-neutral-soft,
-  "neutral-darkest" $unnnic-color-neutral-darkest,
-  "neutral-cloudy" $unnnic-color-neutral-cloudy,
-  "neutral-snow" $unnnic-color-neutral-snow,
-  "background-snow" $unnnic-color-background-snow;
-
-@each $name, $color in $scheme-colors {
-  .unnnic-icon-scheme {
-    &--#{$name} {
-      & .primary {
-        fill: $color;
-      }
-
-      & .primary-stroke {
-        stroke: $color;
-      }
-    }
-  }
-}
-
-$icon-sizes:
-    'xl' $unnnic-icon-size-xl,
-    'lg' $unnnic-icon-size-lg,
-    'md' $unnnic-icon-size-md,
-    'ant' $unnnic-icon-size-ant,
-    'sm' $unnnic-icon-size-sm,
-    'xs' $unnnic-icon-size-xs,
-    'avatar-lg' $unnnic-avatar-size-lg,
-    'avatar-md' $unnnic-avatar-size-md,
-    'avatar-sm' $unnnic-avatar-size-sm,
-    'avatar-xs' $unnnic-avatar-size-xs,
-    'avatar-nano' $unnnic-avatar-size-nano;
-
-$line-heights:
-  'sm' $unnnic-line-height-small,
-  'md' $unnnic-line-height-medium,
-  'lg' $unnnic-line-height-large;
-
-    .unnnic-icon {
-      position: relative;
-      display: inline-block;
-      vertical-align: middle;
-
-        @each $name, $size in $icon-sizes {
-            &__size--#{$name} {
-                width: $size;
-                height: $size;
-                min-width: $size;
-                min-height: $size;
-
-                @each $line-name, $line-size in $line-heights {
-                  &.unnnic-icon__line-height--#{$line-name} svg {
-                    position: relative;
-                    top: (($size + $line-size) - ($size*1.2))/1.2;
-                  }
-              }
-            }
-        }
-
-        svg {
-            width: 100%;
-            height: 100%;
-        }
-    }
-</style>
+<template>
+<span
+    @click="onClick"
+    @mousedown="$emit('mousedown')"
+    @mouseup="$emit('mouseup')"
+    :class="[
+      'unnnic-icon',
+      `unnnic-icon__size--${size}`,
+      clickable ? 'unnnic--clickable' : '',
+      lineHeight ? `unnnic-icon__line-height--${lineHeight}` : '',
+      scheme ? `unnnic-icon-scheme--${scheme}` : '',
+    ]"
+    v-html="svg" />
+</template>
+
+<script>
+import icons from '../utils/icons';
+
+export default {
+  name: 'uIcon',
+  props: {
+    icon: {
+      type: String,
+      default: null,
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator(value) {
+        return [
+          'nano', 'xs', 'sm', 'ant', 'md', 'lg', 'xl',
+          'avatar-lg', 'avatar-md', 'avatar-sm', 'avatar-xs', 'avatar-nano',
+        ].indexOf(value) !== -1;
+      },
+    },
+    lineHeight: {
+      type: String,
+      default: null,
+      validator(value) {
+        return !value || ['sm', 'md', 'lg'].indexOf(value) !== -1;
+      },
+    },
+    scheme: {
+      type: String,
+      default: '',
+    },
+  },
+  mounted() {},
+  computed: {
+    svg() {
+      return icons[this.icon];
+    },
+  },
+  methods: {
+    onClick() {
+      if (!this.clickable) return;
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/scss/unnnic.scss";
+
+.unnnic-icon ::v-deep svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>
+
+<style lang="scss">
+@import "../assets/scss/unnnic.scss";
+
+$scheme-colors: "feedback-red" $unnnic-color-feedback-red,
+  "feedback-green" $unnnic-color-feedback-green, "feedback-yellow" $unnnic-color-feedback-yellow,
+  "feedback-blue" $unnnic-color-feedback-blue, "feedback-grey" $unnnic-color-feedback-grey,
+  "aux-blue" $unnnic-color-aux-blue, "aux-purple" $unnnic-color-aux-purple,
+  "aux-orange" $unnnic-color-aux-orange, "aux-lemon" $unnnic-color-aux-lemon,
+  "aux-pink" $unnnic-color-aux-pink,
+  "brand-weni" $unnnic-color-brand-weni,
+  "brand-weni-soft" $unnnic-color-brand-weni-soft,
+  "brand-weni-dark" $unnnic-color-brand-weni-dark,
+  "brand-sec" $unnnic-color-brand-sec,
+  "neutral-clean" $unnnic-color-neutral-clean,
+  "neutral-cleanest" $unnnic-color-neutral-cleanest,
+  "neutral-dark" $unnnic-color-neutral-dark,
+  "neutral-soft" $unnnic-color-neutral-soft,
+  "neutral-darkest" $unnnic-color-neutral-darkest,
+  "neutral-cloudy" $unnnic-color-neutral-cloudy,
+  "neutral-snow" $unnnic-color-neutral-snow,
+  "background-snow" $unnnic-color-background-snow;
+
+@each $name, $color in $scheme-colors {
+  .unnnic-icon-scheme {
+    &--#{$name} {
+      & .primary {
+        fill: $color;
+      }
+
+      & .primary-stroke {
+        stroke: $color;
+      }
+    }
+  }
+}
+
+$icon-sizes:
+    'xl' $unnnic-icon-size-xl,
+    'lg' $unnnic-icon-size-lg,
+    'md' $unnnic-icon-size-md,
+    'ant' $unnnic-icon-size-ant,
+    'sm' $unnnic-icon-size-sm,
+    'xs' $unnnic-icon-size-xs,
+    'avatar-lg' $unnnic-avatar-size-lg,
+    'avatar-md' $unnnic-avatar-size-md,
+    'avatar-sm' $unnnic-avatar-size-sm,
+    'avatar-xs' $unnnic-avatar-size-xs,
+    'avatar-nano' $unnnic-avatar-size-nano;
+
+$line-heights:
+  'sm' $unnnic-line-height-small,
+  'md' $unnnic-line-height-medium,
+  'lg' $unnnic-line-height-large;
+
+    .unnnic-icon {
+      position: relative;
+      display: inline-block;
+      vertical-align: middle;
+
+        @each $name, $size in $icon-sizes {
+            &__size--#{$name} {
+                width: $size;
+                height: $size;
+                min-width: $size;
+                min-height: $size;
+
+                @each $line-name, $line-size in $line-heights {
+                  &.unnnic-icon__line-height--#{$line-name} svg {
+                    position: relative;
+                    top: (($size + $line-size) - ($size*1.2))/1.2;
+                  }
+              }
+            }
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+</style>