@avakhula/ui 0.0.510-alpha-spa.4 → 0.0.510-alpha-spa.5

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.510-alpha-spa.04",
+  "version": "0.0.510-alpha-spa.05",
   "type": "module",
   "module": "dist/index.js",
   "sideEffects": false,
   "private": false,
-  "files": [ "dist" ],
+  "files": [ "dist", "src" ],
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/App.vue

@@ -0,0 +1,24 @@
+<template>
+<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">
+
+    <ib-textarea
+        @blur="console.log('test')"
+    >
+
+        <template #actions>
+            <button>test</button>
+        </template>
+    </ib-textarea>
+</div>
+
+</template>
+
+<script>
+import IbTextarea from "./components/Form/Textarea/Textarea.vue";
+
+export default {
+  components: {
+    IbTextarea,
+  },
+};
+</script>

package/src/EventEmmiter.js

@@ -0,0 +1,19 @@
+import mitt from "mitt";
+
+export default class {
+  constructor() {
+    this.provider = mitt();
+  }
+
+  $on(event, callback) {
+    this.provider.on(event, callback);
+  }
+
+  $off(event, callback) {
+    this.provider.off(event, callback);
+  }
+
+  $emit(event, args) {
+    this.provider.emit(event, args);
+  }
+}

package/src/assets/scss/mixins/dropdown-list-item.scss

@@ -0,0 +1,57 @@
+@use "../variables/colors.scss" as *;
+@use "../typography.scss" as *;
+@use "../mixins.scss" as *;
+
+@mixin DropdownListItem {
+  .ib-dropdown-item {
+    @include Ib-H4-regular;
+    padding: 8.5px 15px;
+    background-color: transparent;
+    border: none;
+    border-left: 2px solid transparent;
+    display: inline-block;
+    text-decoration: none;
+    text-align: start;
+    outline: none;
+    color: $neutral-900;
+    min-width: 100%;
+    width: max-content;
+    max-width: inherit;
+    cursor: pointer;
+    transition: background-color 0.3s, border-color 0.3s;
+    @include lineClamp(1);
+    display: flex;
+    align-items: center;
+
+    ion-icon {
+      font-size: 16px;
+      margin-right: 15px;
+    }
+
+    p {
+      @include lineClamp(1);
+    }
+
+    &:hover {
+      background-color: $gray-100;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      color: $neutral-500;
+    }
+
+    &:focus {
+      @include focus();
+    }
+
+    &.active {
+      background-color: $gray-100;
+      border-left-color: $blue-900;
+
+      &:hover {
+        background-color: $blue-50;
+      }
+    }
+  }
+}

package/src/assets/scss/mixins/tooltip-position.scss

@@ -0,0 +1,154 @@
+@use "../variables/colors.scss" as *;
+@use "../variables/shadows.scss" as *;
+
+$background: $white;
+$textColor: $neutral-900;
+$shadow: $ib-shadow-3;
+
+@mixin TooltipPosition {
+  &::before {
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 4px 0 4px;
+    border-color: $background transparent transparent transparent;
+    position: absolute;
+  }
+
+  &.ib {
+    &-top-left {
+      bottom: calc(100% + 5px);
+      right: calc(50% - 14px);
+
+      &::before {
+        bottom: -4px;
+        right: 10px;
+      }
+    }
+
+    &-top-center {
+      bottom: calc(100% + 5px);
+      right: 50%;
+      transform: translateX(50%);
+
+      &::before {
+        bottom: -4px;
+        right: 50%;
+        transform: translateX(50%);
+      }
+    }
+
+    &-top-right {
+      bottom: calc(100% + 5px);
+      left: calc(50% - 14px);
+
+      &::before {
+        bottom: -4px;
+        left: 10px;
+      }
+    }
+
+    &-right-top {
+      left: calc(100% + 5px);
+      bottom: calc(50% - 14px);
+
+      &::before {
+        left: -6px;
+        bottom: 10px;
+        transform: rotate(90deg);
+      }
+    }
+
+    &-right-center {
+      bottom: 50%;
+      transform: translateY(50%);
+      left: calc(100% + 5px);
+
+      &::before {
+        left: -8px;
+        top: 50%;
+        transform: rotate(90deg) translateY(-50%);
+      }
+    }
+
+    &-right-bottom {
+      left: calc(100% + 5px);
+      top: calc(50% - 10px);
+
+      &::before {
+        top: 10px;
+        left: -6px;
+        transform: rotate(90deg);
+      }
+    }
+
+    &-bottom-left {
+      top: calc(100% + 5px);
+      right: calc(50% - 14px);
+
+      &::before {
+        top: -4px;
+        right: 10px;
+        transform: rotate(180deg);
+      }
+    }
+
+    &-bottom-center {
+      top: calc(100% + 5px);
+      right: 50%;
+      transform: translateX(50%);
+
+      &::before {
+        top: -4px;
+        right: 50%;
+        transform: rotate(180deg) translateX(-50%);
+      }
+    }
+
+    &-bottom-right {
+      top: calc(100% + 5px);
+      left: calc(50% - 14px);
+
+      &::before {
+        top: -4px;
+        left: 10px;
+        transform: rotate(180deg);
+      }
+    }
+
+    &-left-top {
+      right: calc(100% + 5px);
+      bottom: calc(50% - 14px);
+
+      &::before {
+        right: -6px;
+        bottom: 10px;
+        transform: rotate(-90deg);
+      }
+    }
+
+    &-left-center {
+      bottom: 50%;
+      transform: translateY(50%);
+      right: calc(100% + 5px);
+
+      &::before {
+        right: -8px;
+        top: 50%;
+        transform: rotate(-90deg) translateY(-50%);
+      }
+    }
+
+    &-left-bottom {
+      right: calc(100% + 5px);
+      top: calc(50% - 10px);
+
+      &::before {
+        top: 10px;
+        right: -6px;
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}

package/src/assets/scss/mixins.scss

@@ -0,0 +1,21 @@
+@use "./variables/colors.scss" as *;
+
+@mixin outline($offset: -2px, $color: $blue-700) {
+  outline-offset: $offset;
+  outline: 2px solid $color!important;
+}
+
+@mixin focus($offset: -2px, $color: $blue-700) {
+  @include outline($offset, $color);
+
+  &:not(:focus-visible) {
+    outline: none!important;
+  }
+}
+
+@mixin lineClamp($lines: 2) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+  overflow: hidden;
+}

package/src/assets/scss/reset.scss

@@ -0,0 +1,12 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+p {
+  margin: 0;
+}

package/src/assets/scss/style.scss

@@ -0,0 +1,73 @@
+@use "./reset.scss" as *;
+@use "./mixins.scss" as *;
+@use "./variables/colors.scss" as *;
+@use "./typography.scss" as *;
+
+body,
+textarea::placeholder,
+input::placeholder,
+textarea,
+button {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.ib-link {
+  @include Ib-P1-regular;
+}
+
+.ib-standalone-link {
+  text-decoration: none;
+  @include Ib-H4-medium;
+  height: 36px;
+  border-bottom: 1px solid transparent;
+  display: inline-flex;
+  align-items: center;
+
+  .ib-icon {
+    margin-left: 5px;
+    font-size: 16px;
+  }
+}
+
+.ib-standalone-link,
+.ib-link {
+  color: $blue-800;
+  transition: color 0.3s;
+  text-underline-offset: 4px;
+  text-decoration-color: $blue-800;
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-color: $blue-700;
+    color: $blue-700;
+  }
+
+  &:active {
+    text-decoration: underline;
+    text-decoration-color: $blue-900;
+    color: $blue-900;
+  }
+
+  &:focus {
+    text-decoration: underline;
+    border-radius: 4px;
+    @include outline(4px);
+  }
+
+  &:visited {
+    color: $purple-500;
+    text-decoration-color: $purple-500;
+
+    &:hover {
+      text-decoration-color: $purple-400;
+      color: $purple-400;
+    }
+
+    &:active {
+      color: $purple-800;
+      text-decoration-color: $purple-800;
+    }
+  }
+}

package/src/assets/scss/typography.scss

@@ -0,0 +1,155 @@
+@mixin Ib-H1-medium {
+  font-weight: 500;
+  font-size: 26px;
+  line-height: 35px;
+  letter-spacing: 0.02em;
+}
+
+@mixin Ib-H2-medium {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 27px;
+  letter-spacing: 0.02em;
+}
+
+@mixin Ib-H3-medium {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 21px;
+  letter-spacing: 0.02em;
+}
+
+@mixin Ib-H4 {
+  font-style: normal;
+  font-size: 14px;
+  line-height: 19px;
+  letter-spacing: 0.02em;
+}
+
+@mixin Ib-H4-regular {
+  @include Ib-H4;
+  font-weight: 400;
+}
+
+@mixin Ib-H4-medium {
+  @include Ib-H4;
+  font-weight: 500;
+}
+
+@mixin Ib-H4-regular-italic {
+  @include Ib-H4;
+  font-style: italic;
+  font-weight: 400;
+}
+
+@mixin Ib-H5 {
+  font-style: normal;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.02em;
+}
+
+@mixin Ib-H5-regular {
+  @include Ib-H5;
+  font-weight: 400;
+}
+
+@mixin Ib-H5-medium {
+  @include Ib-H5;
+  font-weight: 500;
+}
+
+@mixin Ib-H6 {
+  font-style: normal;
+  font-size: 10px;
+  line-height: 12px;
+  letter-spacing: 0.02em;
+}
+
+@mixin Ib-H6-regular {
+  @include Ib-H6;
+  font-weight: 400;
+}
+
+@mixin Ib-H6-medium {
+  @include Ib-H6;
+  font-weight: 500;
+}
+
+
+@mixin Ib-P1 {
+  font-style: normal;
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0.02em;
+}
+
+@mixin Ib-P1-regular {
+  @include Ib-P1;
+  font-weight: 400;
+}
+
+@mixin Ib-P1-medium {
+  @include Ib-P1;
+  font-weight: 500;
+}
+
+.Ib-H1-medium {
+  @include Ib-H1-medium;
+}
+
+.Ib-H2-medium {
+  @include Ib-H2-medium;
+}
+
+.Ib-H3-medium {
+  @include Ib-H3-medium;
+}
+
+.Ib-H4 {
+  @include Ib-H4;
+}
+
+.Ib-H4-regular {
+  @include Ib-H4-regular;
+}
+
+.Ib-H4-medium {
+  @include Ib-H4-medium;
+}
+
+.Ib-H4-regular-italic {
+  @include Ib-H4-regular-italic;
+}
+
+.Ib-H5 {
+  @include Ib-H5;
+}
+
+.Ib-H5-regular {
+  @include Ib-H5-regular;
+}
+
+.Ib-H5-medium {
+  @include Ib-H5-medium;
+}
+
+.Ib-H6 {
+  @include Ib-H6;
+}
+
+.Ib-H6-regular {
+  @include Ib-H6-regular;
+}
+
+.Ib-H6-medium {
+  @include Ib-H6-medium;
+}
+
+.Ib-P1-medium {
+  @include Ib-P1-medium;
+}
+
+.Ib-P1-regular {
+  @include Ib-P1-regular;
+}