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

package/src/components/Dropdown/Dropdown.vue

@@ -1,109 +1,109 @@
-<template>
-    <div class="unnnic-dropdown" @click.stop="onClickTrigger">
-        <div class="unnnic-dropdown__trigger">
-          <slot name="trigger" />
-          <div
-            v-if="active"
-            :class="[
-              'unnnic-dropdown__content',
-              active ? '' : 'unnnic-dropdown__content--hidden',
-              `unnnic-dropdown__content__position-${position}` ]"
-            v-click-outside="onClickOutside"
-          >
-            <slot />
-          </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import vClickOutside from 'v-click-outside';
-
-export default {
-  name: 'unnnicDropdown',
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    position: {
-      type: String,
-      default: 'bottom-left',
-      validator(value) {
-        return ['top-left', 'none', 'bottom-left', 'bottom-left', 'bottom-right'].indexOf(value) !== -1;
-      },
-    },
-  },
-  data() {
-    return {
-      active: false,
-    };
-  },
-  directives: {
-    clickOutside: vClickOutside.directive,
-  },
-  methods: {
-    onClickTrigger() {
-      this.active = !this.active;
-    },
-    onClickOutside() {
-      if (!this.active) return;
-      this.active = false;
-    },
-  },
-  watch: {
-    open() {
-      this.active = this.open;
-    },
-    active() {
-      this.$emit('update:open', this.active);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-  .unnnic-dropdown {
-    &__trigger {
-      position: relative;
-      display: inline-block;
-    }
-
-    &__content {
-        background-color: $unnnic-color-neutral-snow;
-        box-shadow: $unnnic-shadow-level-near;
-        border-radius: $unnnic-border-radius-sm;
-        position: absolute;
-        display: flex;
-        flex-direction: column;
-        padding: $unnnic-squish-xs;
-        z-index: 2;
-      &--hidden {
-        display: none !important;
-      }
-      &__position {
-          &-top-left {
-            bottom: 100%;
-            right: 1 * $unnnic-font-size;
-            margin-bottom: $unnnic-spacing-stack-xs;
-          }
-          &-top-right {
-            bottom: 100%;
-            left: 1 * $unnnic-font-size;
-            margin-bottom: $unnnic-inline-xs;
-          }
-          &-bottom-left {
-            margin-top: $unnnic-spacing-stack-xs;
-            top: 100%;
-            right: 0;
-          }
-          &-bottom-right {
-            margin-top: $unnnic-inline-xs;
-            top: 100%;
-            left: 1 * $unnnic-font-size;
-          }
-      }
-    }
-  }
-</style>
+<template>
+    <div class="unnnic-dropdown" @click.stop="onClickTrigger">
+        <div class="unnnic-dropdown__trigger">
+          <slot name="trigger" />
+          <div
+            v-if="active"
+            :class="[
+              'unnnic-dropdown__content',
+              active ? '' : 'unnnic-dropdown__content--hidden',
+              `unnnic-dropdown__content__position-${position}` ]"
+            v-click-outside="onClickOutside"
+          >
+            <slot />
+          </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import vClickOutside from 'v-click-outside';
+
+export default {
+  name: 'unnnicDropdown',
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    position: {
+      type: String,
+      default: 'bottom-left',
+      validator(value) {
+        return ['top-left', 'none', 'bottom-left', 'bottom-left', 'bottom-right'].indexOf(value) !== -1;
+      },
+    },
+  },
+  data() {
+    return {
+      active: false,
+    };
+  },
+  directives: {
+    clickOutside: vClickOutside.directive,
+  },
+  methods: {
+    onClickTrigger() {
+      this.active = !this.active;
+    },
+    onClickOutside() {
+      if (!this.active) return;
+      this.active = false;
+    },
+  },
+  watch: {
+    open() {
+      this.active = this.open;
+    },
+    active() {
+      this.$emit('update:open', this.active);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+  .unnnic-dropdown {
+    &__trigger {
+      position: relative;
+      display: inline-block;
+    }
+
+    &__content {
+        background-color: $unnnic-color-neutral-snow;
+        box-shadow: $unnnic-shadow-level-near;
+        border-radius: $unnnic-border-radius-sm;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        padding: $unnnic-squish-xs;
+        z-index: 2;
+      &--hidden {
+        display: none !important;
+      }
+      &__position {
+          &-top-left {
+            bottom: 100%;
+            right: 1 * $unnnic-font-size;
+            margin-bottom: $unnnic-spacing-stack-xs;
+          }
+          &-top-right {
+            bottom: 100%;
+            left: 1 * $unnnic-font-size;
+            margin-bottom: $unnnic-inline-xs;
+          }
+          &-bottom-left {
+            margin-top: $unnnic-spacing-stack-xs;
+            top: 100%;
+            right: 0;
+          }
+          &-bottom-right {
+            margin-top: $unnnic-inline-xs;
+            top: 100%;
+            left: 1 * $unnnic-font-size;
+          }
+      }
+    }
+  }
+</style>

package/src/components/Dropdown/DropdownItem.vue

@@ -1,31 +1,31 @@
-<template>
-    <a
-      @click="$emit('click')"
-      class="unnnic-dropdown-item unnnic--clickable">
-      <slot />
-    </a>
-</template>
-
-<script>
-export default {
-  name: 'unnnicDropdownItem',
-};
-</script>
-
-<style lang="scss">
-@import '../../assets/scss/unnnic.scss';
-  .unnnic-dropdown-item {
-    color: $unnnic-color-neutral-dark;
-    text-decoration: none;
-    font-family: $unnnic-font-family-secondary;
-    font-size: $unnnic-font-size-body-md;
-
-    + .unnnic-dropdown-item::before {
-        height: 0;
-        content: '';
-        display: block;
-        border: 1px solid $unnnic-color-neutral-lightest;
-        margin: $unnnic-spacing-stack-xs 0;
-    }
-  }
-</style>
+<template>
+    <a
+      @click="$emit('click')"
+      class="unnnic-dropdown-item unnnic--clickable">
+      <slot />
+    </a>
+</template>
+
+<script>
+export default {
+  name: 'unnnicDropdownItem',
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/unnnic.scss';
+  .unnnic-dropdown-item {
+    color: $unnnic-color-neutral-dark;
+    text-decoration: none;
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-md;
+
+    + .unnnic-dropdown-item::before {
+        height: 0;
+        content: '';
+        display: block;
+        border: 1px solid $unnnic-color-neutral-lightest;
+        margin: $unnnic-spacing-stack-xs 0;
+    }
+  }
+</style>

package/src/components/Dropdown/DropdownSkeleton.vue

@@ -1,164 +1,164 @@
-<template>
-  <span :class="['dropdown', { active }]" ref="dropdown">
-    <slot>
-    </slot><div
-      class="dropdown-data"
-      :style="{ position: 'fixed', ...positions }"
-      ref="dropdown-data"
-    >
-      <slot name="inside" :width="`${width}px`" :height="`${height}px`"></slot>
-    </div>
-  </span>
-</template>
-
-<script>
-export default {
-  props: {
-    type: {
-      type: String,
-      default: 'automatic',
-    },
-
-    value: Boolean,
-
-    position: {
-      type: String,
-      default: 'bottom-left',
-    },
-  },
-
-  data() {
-    return {
-      clientHeight: 0,
-      clientWidth: 0,
-
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-
-      data: {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
-      },
-    };
-  },
-
-  computed: {
-    active() {
-      if (this.type === 'manual') {
-        return this.value;
-      }
-
-      return false;
-    },
-
-    positions() {
-      let top;
-      let left;
-
-      if (this.position.startsWith('bottom')) {
-        top = this.y + this.height;
-
-        if (top + this.data.height > this.clientHeight) {
-          top = this.clientHeight - this.data.height;
-
-          if (this.y >= this.data.height) {
-            top = this.y - this.data.height;
-          }
-        }
-      } else if (this.position.startsWith('top')) {
-        top = this.y - this.data.height;
-
-        if (top < 0) {
-          top = 0;
-
-          if (this.y + this.height + this.data.height <= this.clientHeight) {
-            top = this.y + this.height;
-          }
-        }
-      }
-
-      if (this.position.endsWith('right')) {
-        left = this.x + this.width;
-
-        if (left + this.data.width > this.clientWidth) {
-          left = this.clientWidth - this.data.width;
-
-          if (this.x >= this.data.width) {
-            left = this.x - this.data.width;
-          }
-        }
-      } else if (this.position.endsWith('left')) {
-        left = this.x - this.data.width;
-
-        if (left < 0) {
-          left = 0;
-
-          if (this.x + this.width + this.data.width <= this.clientWidth) {
-            left = this.x + this.width;
-          }
-        }
-      }
-
-      return {
-        left: `${left}px`,
-        top: `${top}px`,
-      };
-    },
-  },
-
-  mounted() {
-    this.calculatePosition();
-
-    window.addEventListener('scroll', this.calculatePosition);
-    window.addEventListener('resize', this.calculatePosition);
-  },
-
-  beforeDestroy() {
-    window.removeEventListener('scroll', this.calculatePosition);
-    window.removeEventListener('resize', this.calculatePosition);
-  },
-
-  methods: {
-    calculatePosition() {
-      const rect = this.$refs.dropdown.getBoundingClientRect();
-      const dataRect = this.$refs['dropdown-data'].getBoundingClientRect();
-
-      this.clientHeight = document.documentElement.clientHeight;
-      this.clientWidth = document.documentElement.clientWidth;
-
-      this.x = rect.x;
-      this.y = rect.y;
-      this.width = rect.width;
-      this.height = rect.height;
-
-      this.data.x = dataRect.x;
-      this.data.y = dataRect.y;
-      this.data.width = dataRect.width;
-      this.data.height = dataRect.height;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
-
-.dropdown {
-  position: relative;
-
-  .dropdown-data {
-    z-index: 1;
-    pointer-events: none;
-    display: none;
-  }
-
-  &.active .dropdown-data {
-    pointer-events: auto;
-    display: block;
-  }
-}
-</style>
+<template>
+  <span :class="['dropdown', { active }]" ref="dropdown">
+    <slot>
+    </slot><div
+      class="dropdown-data"
+      :style="{ position: 'fixed', ...positions }"
+      ref="dropdown-data"
+    >
+      <slot name="inside" :width="`${width}px`" :height="`${height}px`"></slot>
+    </div>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'automatic',
+    },
+
+    value: Boolean,
+
+    position: {
+      type: String,
+      default: 'bottom-left',
+    },
+  },
+
+  data() {
+    return {
+      clientHeight: 0,
+      clientWidth: 0,
+
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+
+      data: {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+      },
+    };
+  },
+
+  computed: {
+    active() {
+      if (this.type === 'manual') {
+        return this.value;
+      }
+
+      return false;
+    },
+
+    positions() {
+      let top;
+      let left;
+
+      if (this.position.startsWith('bottom')) {
+        top = this.y + this.height;
+
+        if (top + this.data.height > this.clientHeight) {
+          top = this.clientHeight - this.data.height;
+
+          if (this.y >= this.data.height) {
+            top = this.y - this.data.height;
+          }
+        }
+      } else if (this.position.startsWith('top')) {
+        top = this.y - this.data.height;
+
+        if (top < 0) {
+          top = 0;
+
+          if (this.y + this.height + this.data.height <= this.clientHeight) {
+            top = this.y + this.height;
+          }
+        }
+      }
+
+      if (this.position.endsWith('right')) {
+        left = this.x + this.width;
+
+        if (left + this.data.width > this.clientWidth) {
+          left = this.clientWidth - this.data.width;
+
+          if (this.x >= this.data.width) {
+            left = this.x - this.data.width;
+          }
+        }
+      } else if (this.position.endsWith('left')) {
+        left = this.x - this.data.width;
+
+        if (left < 0) {
+          left = 0;
+
+          if (this.x + this.width + this.data.width <= this.clientWidth) {
+            left = this.x + this.width;
+          }
+        }
+      }
+
+      return {
+        left: `${left}px`,
+        top: `${top}px`,
+      };
+    },
+  },
+
+  mounted() {
+    this.calculatePosition();
+
+    window.addEventListener('scroll', this.calculatePosition);
+    window.addEventListener('resize', this.calculatePosition);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.calculatePosition);
+    window.removeEventListener('resize', this.calculatePosition);
+  },
+
+  methods: {
+    calculatePosition() {
+      const rect = this.$refs.dropdown.getBoundingClientRect();
+      const dataRect = this.$refs['dropdown-data'].getBoundingClientRect();
+
+      this.clientHeight = document.documentElement.clientHeight;
+      this.clientWidth = document.documentElement.clientWidth;
+
+      this.x = rect.x;
+      this.y = rect.y;
+      this.width = rect.width;
+      this.height = rect.height;
+
+      this.data.x = dataRect.x;
+      this.data.y = dataRect.y;
+      this.data.width = dataRect.width;
+      this.data.height = dataRect.height;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.dropdown {
+  position: relative;
+
+  .dropdown-data {
+    z-index: 1;
+    pointer-events: none;
+    display: none;
+  }
+
+  &.active .dropdown-data {
+    pointer-events: auto;
+    display: block;
+  }
+}
+</style>