@avakhula/ui 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",

package/src/App.vue

@@ -1,19 +1,23 @@
 <template>
-
-  <ib-input
-    type="email"
-    name="email"
-    @input="val => console.log(val)"
-    @blur="val => console.log(val)"
-  />
+  <div class="test">
+    <limit-selector />
+  </div>
 </template>
 
 <script>
-import IbInput from "./components/Form/Input/Input.vue"
-
+import LimitSelector from "./components/Pagination/LimitSelector.vue"
 export default {
   components: {
-    IbInput
-  }
+    LimitSelector
+  } 
+}
+</script>
+
+
+<style lang="scss">
+.test {
+  height: 100vh;
+  display: flex;
+  align-items: end;
 }
-</script>
+</style>

package/src/components/Form/Toggle/Toggle.vue

@@ -101,6 +101,7 @@ export default {
   },
   methods: {
     onChange() {
+      if (this.disabled) return;
       this.checked = !this.checked;
       this.$emit("input", this.checked);
     },

package/src/components/TreeSelect/Select.vue

@@ -10,7 +10,7 @@
       :vertical="vertical"
       ref="dropdown"
       @close="onClose"
-      @open="isOpen = true"
+      @open="onOpen"
     >
       <template v-if="hasTrigger" v-slot:trigger>
         <slot v-bind:selected-count="selectedKeys.length" name="trigger"></slot>
@@ -242,6 +242,7 @@
 </template>
 
 <script>
+// <!-- TODO: use constants for vertical position -->
 import IbInput from "../Form/Input/Input.vue";
 import Option from "./Option.vue";
 import Mark from "mark.js/dist/mark.es6.min";
@@ -374,9 +375,10 @@ export default {
       type: Boolean,
       default: false,
     },
-    vertical: {
-      type: String,
-    },
+    // vertical: {
+    //   type: String,
+    //   default: "bottom"
+    // },
     emptyMessage: {
       type: String,
       default: "",
@@ -409,12 +411,15 @@ export default {
     "search",
     "resize",
     "submit",
+    "clearValue",
     "update:modelValue",
   ],
   watch: {
     value(value) {
       this.val = value;
-      this.setPreparedValues();
+      if (!Array.isArray(value) || value.join(',') !== Object.keys(this.selected).join(',')) {
+        this.setPreparedValues(this.actualOptions, false);
+      }
     },
     modelValue(value) {
       this.val = value;
@@ -512,6 +517,7 @@ export default {
       actualBookmarkedOptions: {},
       selected: [],
       isOpen: false,
+      vertical: "bottom",
       allOptionsIsChecked: true,
       hasTreeChildren: false,
       uid: `f${(~~(Math.random() * 1e8)).toString(16)}`,
@@ -657,7 +663,6 @@ export default {
       this.setPreparedValues();
       this.allOptionsIsChecked = false;
       this.selected = [];
-      const values = Object.keys(this.selected);
 
       if (this.isMultiple) {
         this.$emit("update:modelValue", null);
@@ -907,7 +912,19 @@ export default {
         this.$emit("close", Object.keys(this.selected)[0]);
       }
       this.$emit("blur");
+      this.vertical = "bottom";
     },
+    onOpen() {
+      const screenHeight = document.documentElement.scrollHeight;
+      this.isOpen = true;
+
+      this.$nextTick(() => {
+        const newScreenHeight = document.documentElement.scrollHeight
+        if(newScreenHeight > screenHeight) {
+          this.vertical = "top";
+        }
+      })
+    }
   },
   computed: {
     hasTrigger() {

package/src/components/TreeSelect/scss/select.scss

@@ -119,6 +119,13 @@ $tree-search-border-color: $gray-600;
     margin-left: auto;
   }
 
+  .dropdown-top {
+    .tree-drop {
+      bottom: 42px;
+      top: auto;
+    }
+  }
+
   .tree-drop {
     z-index: 9998;
     box-shadow: $menu-shadow;