@avakhula/ui 0.1.6 → 0.1.8

package/package.json

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

package/src/App.vue

@@ -1,36 +1,135 @@
 <template>
-  <div class="page">
+  <ib-select :options="opt">
+    <template v-slot:triggerContent="{ selectedCount }">
+        {{ selectedCount }}
+    </template>
+  </ib-select>
 
-    <sorting view="table-sorting" toggle-tip-title="hello" :table-name="'table'" :title="'test'">
-
-      <!-- <template #toggleTipBody>
-        <p>
-          test
-        </p>
-      </template>
+</template>
 
-      <template #toggleTipButtons>
-        <p>
-          test
-        </p>
-      </template> -->
+<script>
+import IbSelect from "./components/TreeSelect/Select.vue";
+const testData1 = [
+  {
+    id: "1",
+    title: "A Education",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: true,
+    isChildrenVisible: true,
+  },
+  {
+    id: "2",
+    title: "Education 2",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "3",
+    title: "Education 3",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "4",
+    title: "Education 4",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "5",
+    title: "Education 5",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
 
+  {
+    id: "6",
+    title: "Education 6",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
 
-    </sorting>
-  </div>
-</template>
+  {
+    id: "7",
+    title: "Education 7",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
 
-<script>
-import Sorting from './components/Sorting/Sorting.vue';
+  {
+    id: "8",
+    title: "Education 8",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "9",
+    title: "Education 9",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "10",
+    title: "Education 10",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "11",
+    title: "Education 11",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+];
 export default {
-  components: {
-    Sorting
-  }
-}
-</script>
-
-<style lang="scss">
-.page {
-  padding: 200px;
+  data() {
+    return {
+      opt: testData1,
+    }
+  },
+  components: {IbSelect}
 }
-</style>
+</script>

package/src/components/Form/Checkbox/Checkbox.scss

@@ -5,13 +5,13 @@
 $checkbox-bg-disabled: $gray-100;
 $checkbox-filed-bg-disabled: $neutral-500;
 $checkbox-border-disabled: $neutral-500;
-$checkbox-border: $gray-500;
+$checkbox-border: $gray-600;
 $checkbox-bg: transparent;
 $checkbox-checkmark: $neutral-900;
 $checkbox-border-hover: $blue-300;
 $checkbox-bg-hover: $blue-100;
 $checkbox-border-active: transparent;
-$checkbox-bg-active: $blue-300;
+$checkbox-bg-active: $blue-200;
 $checkbox-text-color-disabled: $neutral-500;
 $checkbox-bg-error: transparent;
 $checkbox-border-error: $red-800;

package/src/components/Form/Input/Input.vue

@@ -184,6 +184,7 @@ export default {
       this.actualValue = "";
       this.$emit("update:modelValue", this.actualValue);
       this.$emit("input", this.actualValue);
+      this.$emit("clear");
     },
     onBlur() {
       this.$emit("blur", this.actualValue);
@@ -261,6 +262,7 @@ export default {
     "input",
     "blur",
     "focus",
+    "clear",
     "update:modelValue",
     `label:disabled:${this?.id}`,
   ],

package/src/components/Form/Radio/radio.scss

@@ -11,7 +11,7 @@ $radio-bg-hover: $blue-100;
 $radio-bg-active: $blue-200;
 $radio-bg-disabled: $gray-100;
 $radio-bg-error: transparent;
-$radio-border: $gray-500;
+$radio-border: $gray-600;
 $radio-border-hover: $blue-300;
 $radio-border-active: $blue-200;
 $radio-border-disabled: $neutral-500;

package/src/components/TreeSelect/Select.vue

@@ -3,7 +3,12 @@
     {{ errorMessage }}
   </ib-alert>
 
-  <div class="tree-select" :class="classList">
+  <div
+    class="tree-select"
+    :class="{
+      ...classList, 'tree-select-custom-trigger-content': hasTriggerContent
+    }"
+  >
     <ib-dropdown
       :disabled="isLoading"
       :is-resizable="isResizable"
@@ -30,40 +35,49 @@
           :aria-activedescendant="focusedOptionId"
           :class="{
             'tree-choice-opened': isOpened,
-            'has-clear-button': !showClearButton,
+            'has-clear-button': showClearButton,
             'tree-choice-error': errorMessage,
           }"
         >
-          <template v-if="htmlOptionTitle">
-            <span
-              :class="{ placeholder: !selectStatus }"
-              v-html="selectStatus || placeholder"
-            ></span>
+
+          <template v-if="hasTriggerContent">
+            <slot v-bind:selected-count="selectedKeys.length" name="triggerContent"></slot>
           </template>
+
           <template v-else>
-            <span :class="{ placeholder: !selectStatus }">
-              {{ selectStatus || placeholder }}
-            </span>
+            <template v-if="htmlOptionTitle">
+              <span
+                :class="{ placeholder: !selectStatus }"
+                v-html="selectStatus || placeholder"
+              ></span>
+            </template>
+            <template v-else>
+              <span :class="{ placeholder: !selectStatus }">
+                {{ selectStatus || placeholder }}
+              </span>
+            </template>
           </template>
-        </div>
-        <ib-icon-button
-          v-if="showClearButton"
-          kind="ghost"
-          class="button-clear"
-          @click.prevent="clearValue"
-          @keypress.enter.stop.prevent
-          @keydown.enter.stop.prevent
-          @keyup.enter.prevent="clearValue"
-          :help-text="clearButtonMessage"
-          v-show="Object.keys(selected).length"
-        >
-          <ib-icon name="close-outline"></ib-icon>
-        </ib-icon-button>
 
-        <ib-icon
-          :name="isOpened ? 'chevron-up-outline' : 'chevron-down-outline'"
-          :classes="'tree-select-caret'"
-        />
+          <ib-icon-button
+            v-if="showClearButton"
+            kind="ghost"
+            class="button-clear"
+            @click.prevent="clearValue"
+            @keypress.enter.stop.prevent
+            @keydown.enter.stop.prevent
+            @keyup.enter.prevent="clearValue"
+            :help-text="clearButtonMessage"
+            v-show="Object.keys(selected).length"
+          >
+            <ib-icon name="close-outline"></ib-icon>
+          </ib-icon-button>
+
+          <ib-icon
+            :name="isOpened ? 'chevron-up-outline' : 'chevron-down-outline'"
+            :classes="'tree-select-caret'"
+          />
+      </div>
+
       </template>
 
       <template v-slot:body>
@@ -930,6 +944,9 @@ export default {
     hasTrigger() {
       return !!this.$slots.trigger;
     },
+    hasTriggerContent() {
+      return !!this.$slots.triggerContent;
+    },
     hasEmptyMessage() {
       return !!this.$slots.emptyMessage;
     },

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

@@ -27,6 +27,10 @@ $tree-search-border-color: $gray-600;
 .tree-select {
   width: 100%;
 
+  &.tree-select-custom-trigger-content {
+    width: fit-content;
+  }
+
   .ib-dropdown {
     width: 100%;
   }
@@ -51,6 +55,7 @@ $tree-search-border-color: $gray-600;
       display: flex;
       align-items: center;
       justify-content: center;
+      font-size: 16px;
     }
 
     &:hover {
@@ -77,12 +82,16 @@ $tree-search-border-color: $gray-600;
     justify-content: space-between;
     overflow: hidden;
     position: relative;
-    padding-right: 40px;
+    padding-right: 30px;
     border-bottom: 1px solid $choice-border-color;
     transition: background-color 0.3s, border-color 0.3s, border-radius 0.3s;
 
     &.has-clear-button {
-      padding-right: 30px;
+      padding-right: 60px;
+    }
+
+    &.tree-choice-custom-content {
+      width: fit-content;
     }
 
     span {