@avakhula/ui 0.0.10

package/src/components/TreeSelect/Option.vue

@@ -0,0 +1,325 @@
+<template>
+  <li>
+    <div
+      class="tree-select-option"
+      :class="{
+        'tree-select-option-checked': isChecked,
+        'tree-select-option-margin': hasVisibleChildren,
+        active: option.isChildrenVisible,
+        'is-multiple': isMultiple,
+        'is-not-multiple': !isMultiple,
+        'tree-select-option-toggle': this.isToggle && this.isMultiple,
+      }"
+      tabindex="0"
+      @keydown.self="onKeydown"
+    >
+      <ib-tooltip v-if="showTooltip" :text="option.title"></ib-tooltip>
+
+      <ib-icon-button
+        :disabled-focus="true"
+        kind="ghost"
+        class="toggle-children"
+        @click="toggleChildrenVisibility"
+        v-show="hasVisibleChildren"
+      >
+        <ib-icon :name="iconName"></ib-icon>
+      </ib-icon-button>
+      <div
+        @click.prevent="onChange"
+        :class="{
+          disabled: option.isDisabled,
+          'tree-select-option-label': true,
+          'tree-select-option-has-children': hasVisibleChildren,
+          active: !showInput && option.checked,
+        }"
+      >
+        <component
+          ref="component"
+          tabindex="-1"
+          v-show="showInput"
+          :is="component"
+          :name="actualName"
+          :value="option.id"
+          :id="'input' + id"
+          :is-checked="isChecked"
+          :disabled="option.isDisabled"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          @input="toggle"
+        ></component>
+
+        <template v-if="isBookmarkable">
+          <span
+            :class="
+              'bookmarkable-option-title ' + (isBookmarked ? 'bookmarked' : '')
+            "
+          >
+            <span class="option-label" v-if="!hasChildren">
+              {{ option.title }}
+              <ib-icon
+                name="star"
+                @click.stop.prevent="$emit('toggle-bookmark', option)"
+              ></ib-icon>
+            </span>
+
+            <span class="option-label" v-else>{{ option.title }}</span>
+          </span>
+        </template>
+        <template v-else-if="htmlTitle">
+          <span
+            class="option-label"
+            v-if="!hasChildren"
+            v-html="option.title"
+          ></span>
+          <span class="option-label" v-else v-html="option.title"></span>
+        </template>
+
+        <template v-else>
+          <span class="option-label">{{ option.title }}</span>
+        </template>
+      </div>
+
+      <list
+        v-if="hasChildren"
+        v-show="hasVisibleChildren && option.isChildrenVisible"
+      >
+        <select-option
+          v-for="childOption in option.children"
+          :key="childOption.value"
+          v-show="childOption.visible"
+          :option="childOption"
+          :name="name"
+          :parent-auto-check="parentAutoCheck"
+          :is-multiple="isMultiple"
+          :show-input="showInput"
+          @check="checkChildren"
+          @toggle-bookmark="$emit('toggle-bookmark', $event)"
+          :uid="uid"
+          :is-bookmarkable="isBookmarkable"
+        ></select-option>
+      </list>
+    </div>
+  </li>
+</template>
+
+<script>
+import Checkbox from "../Form/Checkbox/Checkbox.vue";
+import Toggle from "../Form/Toggle/Toggle.vue";
+import List from "../List.vue";
+import IbIcon from "../Icon.vue";
+import IbIconButton from "../IconButton/IconButton.vue";
+import IbTooltip from "../Tooltip/Tooltip.vue";
+import multiLineOverflows from "../../helpers/multiLineOverflows";
+import {
+  SPACE_KEY_CODE,
+  ARROW_RIGHT_KEY_CODE,
+  ARROW_LEFT_KEY_CODE,
+} from "../../constants/keyCodes";
+
+export default {
+  name: "select-option",
+  props: {
+    option: {
+      type: Object,
+    },
+    name: String,
+    parentAutoCheck: {
+      type: Boolean,
+      default: false,
+    },
+    isMultiple: {
+      type: Boolean,
+      default: true,
+    },
+    uid: {
+      type: String,
+      default: "",
+    },
+    onlyEndNodes: {
+      type: Boolean,
+      default: false,
+    },
+    htmlTitle: {
+      type: Boolean,
+      default: false,
+    },
+    showInput: {
+      type: Boolean,
+      default: true,
+    },
+    isBookmarkable: {
+      type: Boolean,
+      default: false,
+    },
+    isBookmarked: {
+      type: Boolean,
+      default: false,
+    },
+    isToggle: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  mounted() {
+    // eslint-disable-next-line no-prototype-builtins
+    if (this.option.hasOwnProperty("children") && this.option.children) {
+      this.checkParent();
+    }
+  },
+  updated() {
+    this.$nextTick(() => {
+      if (multiLineOverflows(this.$el.querySelector(".option-label"))) {
+        this.showTooltip = true;
+      }
+    });
+  },
+  data() {
+    return {
+      showTooltip: false,
+    };
+  },
+  methods: {
+    onKeydown(e) {
+      if (e.keyCode === SPACE_KEY_CODE) {
+        e.preventDefault();
+        this.onChange();
+      }
+
+      if (this.hasVisibleChildren) {
+        if (e.keyCode === ARROW_RIGHT_KEY_CODE) {
+          // eslint-disable-next-line vue/no-mutating-props
+          this.option.isChildrenVisible = true;
+        }
+
+        if (e.keyCode === ARROW_LEFT_KEY_CODE) {
+          // eslint-disable-next-line vue/no-mutating-props
+          this.option.isChildrenVisible = false;
+        }
+      }
+    },
+    onChange() {
+      this.$refs.component?.onChange();
+    },
+    toggle(value, checkChildren = true) {
+      this.check(this.option, value, true, checkChildren);
+    },
+    check(option, checkStatus, isDirectChild, checkChildren) {
+      this.$emit("check", option, checkStatus, isDirectChild);
+      if (checkChildren) {
+        option.children &&
+          option.children.forEach((childOption) => {
+            this.check(childOption, checkStatus, false, true);
+          });
+      }
+    },
+    toggleChildrenVisibility() {
+      // eslint-disable-next-line vue/no-mutating-props
+      this.option.isChildrenVisible = !this.option.isChildrenVisible;
+    },
+    checkChildren(option, isChecked, isDirectChild) {
+      if (isDirectChild && this.isMultiple) {
+        this.$nextTick(() => {
+          this.checkParent();
+        });
+      }
+      this.$emit("check", option, isChecked, false);
+    },
+    checkParent() {
+      const childrenSelectedCount = this.option.children.filter(
+          (child) => child.checked
+        ).length,
+        allChildrenSelected =
+          childrenSelectedCount >= this.option.children.length;
+
+      if (
+        (!this.option.checked && allChildrenSelected && this.parentAutoCheck) ||
+        (this.option.checked && !allChildrenSelected)
+      ) {
+        this.toggle(!this.option.checked, false);
+      }
+    },
+    calculateChildren(option, filter, checkNested = false) {
+      let count = 0;
+
+      option.children &&
+        option.children.forEach((child) => {
+          if (!filter || filter(child)) {
+            count++;
+          }
+
+          if (checkNested) {
+            count += this.calculateChildren(child, filter, checkNested);
+          }
+        });
+
+      return count;
+    },
+  },
+  computed: {
+    component() {
+      if (this.isMultiple && this.isToggle) return Toggle;
+      else return Checkbox;
+    },
+    isChecked() {
+      if (this.option.checked) {
+        return true;
+      }
+
+      if (this.option.isIndeterminate) {
+        return null; //null will trigger indeterminate stage
+      }
+
+      if (!this.childrenSelectedCount) {
+        return false;
+      } else if (
+        this.childrenSelectedCount > 0 &&
+        this.countOfAllChildren > this.childrenSelectedCount
+      ) {
+        return null; //null will trigger indeterminate stage
+      }
+
+      return true;
+    },
+    hasChildren() {
+      return this.option.children && this.option.children.length;
+    },
+    hasVisibleChildren() {
+      return this.calculateChildren(this.option, (item) => item.visible);
+    },
+    iconName() {
+      return this.option.isChildrenVisible ? "chevron-down" : "chevron-forward";
+    },
+    id() {
+      return this.uid + "_" + this.option.id;
+    },
+    actualName() {
+      return this.onlyEndNodes &&
+        this.option.children &&
+        this.option.children.length
+        ? ""
+        : this.name;
+    },
+    childrenSelectedCount() {
+      return this.calculateChildren(
+        this.option,
+        (child) => child.checked,
+        true
+      );
+    },
+    countOfAllChildren() {
+      return this.calculateChildren(this.option, () => true, true);
+    },
+  },
+  components: {
+    IbIcon,
+    List,
+    IbIconButton,
+    IbTooltip,
+  },
+};
+</script>
+<style lang="scss">
+@import "./scss/option.scss";
+</style>

package/src/components/TreeSelect/Select.stories.js

@@ -0,0 +1,349 @@
+import IbSelect from "./Select.vue";
+import IbButton from "../Button/Button.vue";
+import IbIcon from "../Icon.vue";
+
+export default {
+  title: "Form/Select",
+  components: IbSelect,
+  argTypes: {
+    onResize: { action: "resize" },
+    onSearch: { action: "search" },
+    onSubmit: { action: "submit" },
+    onInput: { action: "input" },
+    placeholder: {
+      control: { type: "text" },
+    },
+    searchPlaceholderText: {
+      control: { type: "text" },
+    },
+    clearButtonMessage: {
+      control: { type: "text" },
+    },
+    showClearButton: {
+      control: { type: "boolean" },
+    },
+    isResizable: {
+      control: { type: "boolean" },
+    },
+    name: {
+      control: { type: "text" },
+    },
+    maxSelectedNames: {
+      control: { type: "number" },
+    },
+    isMultiple: {
+      control: { type: "boolean" },
+    },
+    parentAutoCheck: {
+      control: { type: "boolean" },
+    },
+    strings: {
+      control: { type: "object" },
+    },
+    onlyEndNodes: {
+      control: { type: "boolean" },
+    },
+    isRequired: {
+      control: { type: "boolean" },
+    },
+    htmlOptionTitle: {
+      control: { type: "boolean" },
+    },
+    showInputs: {
+      control: { type: "boolean" },
+    },
+    dependency: {
+      control: { type: "text" },
+    },
+    filterId: {
+      control: { type: "text" },
+    },
+    staticPlaceholder: {
+      control: { type: "boolean" },
+    },
+    useSearch: {
+      control: { type: "boolean" },
+    },
+    isWatching: {
+      control: { type: "boolean" },
+    },
+    vertical: {
+      control: { type: "text" },
+    },
+    emptyMessage: {
+      control: { type: "text" },
+    },
+    allOptions: {
+      control: { type: "boolean" },
+    },
+    watchClearValue: {
+      control: { type: "boolean" },
+    },
+    isToggle: {
+      control: { type: "boolean" },
+    },
+  },
+};
+
+const testData = [
+  {
+    id: "1",
+    title: "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,
+  },
+];
+
+const testData1 = [
+  {
+    id: "1",
+    title: "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,
+  },
+
+  {
+    id: "7",
+    title: "Education 7",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+
+  {
+    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,
+  },
+];
+
+const Template = (args) => ({
+  components: { IbSelect },
+  setup() {
+    return { args };
+  },
+  template: "<ib-select v-bind='args' />",
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  initialSize: {
+    left: 0,
+    right: 0,
+  },
+  ariaLabel: "Search",
+  options: testData,
+  clearButtonMessage: "Clear",
+  placeholder: "Please select",
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  initialSize: {
+    left: 0,
+    right: 0,
+  },
+  ariaLabel: "Search",
+  options: testData1,
+  clearButtonMessage: "Clear",
+  placeholder: "Please select",
+};
+
+Multiple.decorators = [
+  () => ({
+    template: '<div style="padding-top: 50px"><story /></div>',
+  }),
+];
+
+export const Single = Template.bind({});
+Single.args = {
+  initialSize: {
+    left: 0,
+    right: 0,
+  },
+  ariaLabel: "Search",
+  isMultiple: false,
+  options: testData,
+  clearButtonMessage: "Clear",
+  placeholder: "Please select",
+};
+Single.decorators = [
+  () => ({
+    template: '<div style="padding-top: 50px"><story /></div>',
+  }),
+];
+
+export const Toggles = Template.bind({});
+Toggles.args = {
+  useSearch: true,
+  ariaLabel: "Search",
+  placeholder: "Please select",
+  clearButtonMessage: "Clear",
+  isToggle: true,
+  options: testData1,
+};
+Toggles.decorators = [
+  () => ({
+    template: '<div style="padding-top: 50px"><story /></div>',
+  }),
+];
+
+const TemplateCustomTrigger = (args) => ({
+  components: { IbSelect, IbButton, IbIcon },
+  setup() {
+    return { args };
+  },
+  template: `<ib-select v-bind='args'>
+    <template v-slot:trigger="{ selectedCount }">
+        <ib-button kind="secondary">
+            Selected ({{ selectedCount }})
+            <ib-icon style="paddingLeft: 5px" name="chevron-down-outline"></ib-icon>
+        </ib-button>
+    </template>
+  </ib-select>`,
+});
+
+export const CustomTrigger = TemplateCustomTrigger.bind({});
+CustomTrigger.args = {
+  useSearch: true,
+  placeholder: "Please select",
+  ariaLabel: "Search",
+  clearButtonMessage: "Clear",
+  options: testData1,
+  initialSize: {
+    left: 0,
+    right: 100,
+  },
+};
+Toggles.decorators = [
+  () => ({
+    template: '<div style="padding-top: 50px"><story /></div>',
+  }),
+];