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

package/dist/App.js

@@ -1,25 +1,23 @@
-import o from "./components/Form/Textarea/Textarea.js";
-import { resolveComponent as n, createElementBlock as r, openBlock as s, createVNode as c, withCtx as i, createElementVNode as a } from "vue";
-import { _ as l } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
-const p = {
+import t from "./components/TreeSelect/Select.js";
+import { resolveComponent as o, createElementBlock as s, openBlock as n, createVNode as c } from "vue";
+import { _ as r } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const i = {
   components: {
-    IbTextarea: o
+    IbSelect: t
   }
-}, _ = { style: { display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", height: "100vh" } }, m = /* @__PURE__ */ a("button", null, "test", -1);
-function d(f, t, u, x, h, $) {
-  const e = n("ib-textarea");
-  return s(), r("div", _, [
+}, p = { style: { display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", height: "100vh" } };
+function a(d, l, _, f, m, u) {
+  const e = o("ib-select");
+  return n(), s("div", p, [
     c(e, {
-      onBlur: t[0] || (t[0] = (b) => console.log("test"))
-    }, {
-      actions: i(() => [
-        m
-      ]),
-      _: 1
+      "data-testid": "tests",
+      "data-foo": "sdf",
+      dusk: "asd",
+      options: []
     })
   ]);
 }
-const B = /* @__PURE__ */ l(p, [["render", d]]);
+const b = /* @__PURE__ */ r(i, [["render", a]]);
 export {
-  B as default
+  b as default
 };

package/dist/components/Dropdown/DropdownList.js

@@ -88,7 +88,7 @@ function v(e, w, t, k, C, s) {
     ]), 1040, ["horizontal", "vertical", "isOpened", "closeOnClick", "disabled", "onAll"])
   ], 2);
 }
-const L = /* @__PURE__ */ y(O, [["render", v]]);
+const P = /* @__PURE__ */ y(O, [["render", v]]);
 export {
-  L as default
+  P as default
 };

package/dist/components/Form/Textarea/Textarea.js

@@ -1,7 +1,7 @@
 import b from "../../../helpers/generateUID.js";
 import p from "../../Alert/Alert.js";
 import _ from "../CharactersCount.js";
-import { resolveComponent as o, createElementBlock as L, openBlock as c, normalizeClass as x, createBlock as I, createCommentVNode as y, withDirectives as s, createElementVNode as u, createVNode as d, withCtx as h, createTextVNode as m, toDisplayString as f, vShow as v, mergeProps as M, vModelText as S, renderSlot as C } from "vue";
+import { resolveComponent as o, createElementBlock as L, openBlock as c, normalizeClass as x, createBlock as y, createCommentVNode as I, withDirectives as s, createElementVNode as u, createVNode as d, withCtx as h, createTextVNode as m, toDisplayString as f, vShow as v, mergeProps as M, vModelText as S, renderSlot as C } from "vue";
 import { _ as O } from "../../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
 const w = {
   name: "IbTextarea",
@@ -80,11 +80,11 @@ function N(t, r, e, T, l, a) {
     class: x(["textarea-wrapper", { disabled: e.disabled, hasActins: t.$slots.actions }]),
     onFocusout: r[2] || (r[2] = (...i) => a.onFocusOut && a.onFocusOut(...i))
   }, [
-    e.characterLimit ? (c(), I(g, {
+    e.characterLimit ? (c(), y(g, {
       key: 0,
       "character-limit": e.characterLimit,
       "character-length": l.val.length
-    }, null, 8, ["character-limit", "character-length"])) : y("", !0),
+    }, null, 8, ["character-limit", "character-length"])) : I("", !0),
     s(d(n, null, {
       default: h(() => [
         m(f(e.errorMessage), 1)

package/dist/components/List.js

@@ -60,7 +60,7 @@ function y(o, i, d, a, l, r) {
     E(o.$slots, "default")
   ], 34);
 }
-const b = /* @__PURE__ */ h(C, [["render", y]]);
+const _ = /* @__PURE__ */ h(C, [["render", y]]);
 export {
-  b as default
+  _ as default
 };

package/dist/components/TreeSelect/Option.js

@@ -5,8 +5,8 @@ import E from "../Icon.js";
 import S from "../IconButton/IconButton.js";
 import { TooltipDirective as A } from "../../directives/tooltip/tooltip.js";
 import O from "../../helpers/generateUID.js";
-import N from "../../helpers/multiLineOverflows.js";
-import { SPACE_KEY_CODE as L, ARROW_RIGHT_KEY_CODE as K, ARROW_LEFT_KEY_CODE as x } from "../../constants/keyCodes.js";
+import L from "../../helpers/multiLineOverflows.js";
+import { SPACE_KEY_CODE as N, ARROW_RIGHT_KEY_CODE as K, ARROW_LEFT_KEY_CODE as x } from "../../constants/keyCodes.js";
 import { resolveComponent as d, resolveDirective as H, createElementBlock as l, openBlock as n, withDirectives as r, withModifiers as u, normalizeClass as f, createElementVNode as _, createCommentVNode as v, createVNode as p, withCtx as C, vShow as m, createBlock as c, resolveDynamicComponent as P, toDisplayString as b, Fragment as T, createTextVNode as R, renderList as F } from "vue";
 import { _ as Y } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
 const z = {
@@ -62,7 +62,7 @@ const z = {
   },
   updated() {
     this.$nextTick(() => {
-      this.option.showTooltipByDefault ? this.showTooltip = !0 : N(this.$el.querySelector(".option-label")) && (this.showTooltip = !0);
+      this.option.showTooltipByDefault ? this.showTooltip = !0 : L(this.$el.querySelector(".option-label")) && (this.showTooltip = !0);
     });
   },
   data() {
@@ -73,7 +73,7 @@ const z = {
   },
   methods: {
     onKeydown(t) {
-      t.keyCode === L && (t.preventDefault(), this.onChange()), this.hasVisibleChildren && (t.keyCode === K && (this.option.isChildrenVisible = !0), t.keyCode === x && (this.option.isChildrenVisible = !1));
+      t.keyCode === N && (t.preventDefault(), this.onChange()), this.hasVisibleChildren && (t.keyCode === K && (this.option.isChildrenVisible = !0), t.keyCode === x && (this.option.isChildrenVisible = !1));
     },
     onChange() {
       var t, i;

package/package.json

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

package/src/App.vue

@@ -0,0 +1,16 @@
+<template>
+<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">
+    <ib-select data-testid="tests" data-foo="sdf" dusk="asd" :options="[]" />
+</div>
+
+</template>
+
+<script>
+import IbSelect from "./components/TreeSelect/Select.vue";
+
+export default {
+  components: {
+    IbSelect,
+  },
+};
+</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;
+}