@avakhula/ui 0.0.10

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

@@ -0,0 +1,270 @@
+import IbTreeSelect from "./Select.vue";
+
+export default {
+  title: "Form/TreeSelect",
+  components: IbTreeSelect,
+  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 Template = (args) => ({
+  components: { IbTreeSelect },
+  setup() {
+    return { args };
+  },
+  template: "<ib-tree-select v-bind='args' />",
+});
+
+const testData = [
+  {
+    id: "category_id_2",
+    title: "Education",
+    is_category: true,
+    children: [
+      {
+        id: "category_id_19",
+        title: "Test1",
+        is_category: true,
+        children: [
+          {
+            id: 139,
+            title: "Test Course 1",
+            selected: false,
+            initiallyVisible: true,
+            visible: true,
+            isDisabled: false,
+            checked: false,
+          },
+          {
+            id: 300,
+            title: "Course for unenrollmemt test",
+            selected: false,
+            initiallyVisible: true,
+            visible: true,
+            isDisabled: false,
+            checked: false,
+          },
+        ],
+        initiallyVisible: true,
+        visible: true,
+        isDisabled: false,
+        checked: false,
+        isChildrenVisible: true,
+      },
+      {
+        id: 15,
+        title: "History",
+        selected: false,
+        initiallyVisible: true,
+        visible: true,
+        isDisabled: false,
+        checked: false,
+      },
+      {
+        id: 17,
+        title: "Algebra 101",
+        selected: false,
+        initiallyVisible: true,
+        visible: true,
+        isDisabled: false,
+        checked: false,
+      },
+      {
+        id: 29,
+        title: "Music",
+        selected: false,
+        initiallyVisible: true,
+        visible: true,
+        isDisabled: false,
+        checked: false,
+      },
+      {
+        id: 30,
+        title: "Astronomy",
+        selected: false,
+        initiallyVisible: true,
+        visible: true,
+        isDisabled: false,
+        checked: false,
+      },
+      {
+        id: 31,
+        title: "Pharmacology",
+        selected: false,
+        initiallyVisible: true,
+        visible: true,
+        isDisabled: false,
+        checked: false,
+      },
+      {
+        id: 32,
+        title: "German Basics",
+        selected: false,
+        initiallyVisible: true,
+        visible: true,
+        isDisabled: false,
+        checked: false,
+      },
+    ],
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: 43234,
+    title: "German Basics 1",
+    selected: false,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 434,
+    title: "German Basics 2",
+    selected: false,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 4324,
+    title: "German Basics 3",
+    selected: false,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 41224,
+    title: "German Basics 4",
+    selected: false,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 990,
+    title: "German Basics 5",
+    selected: false,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 122324,
+    title: "German Basics 6",
+    selected: false,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 9123123,
+    title: "German Basics 7",
+    selected: false,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+  },
+];
+export const Default = Template.bind({});
+Default.args = {
+  options: testData,
+  initialSize: {
+    left: 0,
+    right: 100,
+  },
+  ariaLabel: "Search",
+  clearButtonMessage: "Clear",
+  placeholder: "Please select",
+};
+Default.decorators = [
+  () => ({
+    template: '<div style="padding-top: 50px"><story /></div>',
+  }),
+];

package/src/components/TreeSelect/scss/option.scss

@@ -0,0 +1,204 @@
+@import "../../../assets/scss/variables/colors.scss";
+@import "../../../assets/scss/typography.scss";
+@import "../../../assets/scss/mixins.scss";
+
+$option-hover-bg: $gray-100;
+$option-checked-bg: $gray-100;
+$option-checked-hover-bg: $blue-50;
+
+.not-tree-child {
+  .tree-select-option {
+    .tree-select-option-label {
+      padding-left: 15px;
+    }
+  }
+}
+
+.tree-select-option {
+  position: relative;
+
+  .popover-wrapper {
+    width: 100%;
+  }
+
+  .tree-select-option-label {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    height: 36px;
+    padding: 0 5px 0 44px;
+
+    .ib-checkbox {
+        display: flex;
+        align-items: center;
+
+        &:focus {
+          .ib-checkbox-body {
+            outline: none!important;
+          }
+        }
+    }
+
+    .ib-checkbox-body {
+      padding: 0;
+    } 
+
+    .option-label {
+      margin-left: 15px;
+      @include Ib-H4-regular;
+      @include lineClamp(1);
+    }
+  }
+
+  .toggle-children {
+    position: absolute;
+    top: 5px;
+    left: 15px;
+    z-index: 100;
+  }
+
+  .ib-checkbox-body {
+    padding: 0;
+  }
+
+  .ib-list {
+    margin: 0;
+  }
+
+  &:focus {
+    outline: none;
+    & > .ib-button {
+
+      & + .tree-select-option-label {
+        @include outline();
+      }
+    }
+
+    .ib-list .tree-select-option-label {
+      outline: none;
+    }
+  }
+
+  &.tree-select-option-checked {
+    background-color: $option-checked-bg;
+
+    .tree-select-option-label {
+      &:hover {
+        background-color: $option-checked-hover-bg;
+      }
+    }
+  }
+
+  .tree-select-option-label {
+    &:hover {
+      background-color: $option-hover-bg;
+    }
+  }
+
+  &.is-not-multiple {
+    border-left: 2px solid transparent;
+    &:hover {
+      border-left-color: $option-hover-bg;
+    }
+
+    &.tree-select-option-checked {
+      border-left-color: $blue-900;
+    }
+
+    .tree-select-option-label .option-label {
+      margin-left: 0;
+    }
+  }
+
+  .tree-select-option {
+    .toggle-children,
+    .option-label,
+    .ib-checkbox {
+      transform: translateX(25px);
+    }
+
+    .option-label {
+      width: calc(100% - 50px);
+    }
+
+    .tree-select-option {
+      .toggle-children,
+      .option-label,
+      .ib-checkbox {
+        transform: translateX(50px);
+      }
+
+      .option-label {
+        width: calc(100% - 75px);
+      }
+
+      .tree-select-option {
+        .toggle-children,
+        .option-label,
+        .ib-checkbox {
+          transform: translateX(75px);
+        }
+        
+        .option-label {
+          width: calc(100% - 100px);
+        }
+
+        .tree-select-option {
+          .toggle-children,
+          .option-label,
+          .ib-checkbox {
+            transform: translateX(100px);
+          }
+
+          .option-label {
+            width: calc(100% - 125px);
+          }
+
+          .tree-select-option {
+            .toggle-children,
+            .option-label,
+            .ib-checkbox {
+              transform: translateX(125px);
+            }
+
+            .option-label {
+              width: calc(100% - 150px);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.tree-select-option-toggle {
+    position: relative;
+
+    &.tree-select-option-checked {
+      background-color: $option-checked-bg;
+    }
+
+    .ib-tooltip {
+      position: initial;
+
+      .option-label {
+        position: absolute;
+      }
+    }
+
+    
+    .ib-toggle-container {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+
+      &:focus {
+        outline: none!important;
+      }
+      &:hover,
+      &.toggle-on {
+        background-color: transparent;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,166 @@
+@import "../../../assets/scss/variables/shadows.scss";
+@import "../../../assets/scss/variables/colors.scss";
+@import "../../../assets/scss/typography.scss";
+@import "../../../assets/scss/mixins.scss";
+
+$choice-bg: $gray-100;
+$choice-border-color: $gray-500;
+$choice-text-color: $neutral-900;
+
+$menu-bg: $white;
+$menu-shadow: $ib-shadow-3;
+
+$choice-hover-bg: $blue-100;
+$choice-hover-border-color: $blue-800;
+$choice-hover-icon-color: $blue-700;
+
+$choice-opened-bg: $blue-50;
+$choice-opened-border-color: $blue-900;
+$choice-opened-icon-color: $blue-900;
+
+$tree-search-border-color: $gray-600;
+.tree-select {
+  .dropdown-trigger {
+    display: inline-block;
+    position: relative;
+
+    .button-clear {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 31px;
+    }
+
+    .tree-select-caret {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &:hover {
+      .tree-choice {
+        background-color: $choice-hover-bg;
+        border-bottom-color: $choice-hover-border-color;
+      }
+
+      .tree-select-caret {
+        color: $choice-hover-icon-color;
+      }
+    }
+  }
+
+  .tree-choice {
+    @include Ib-H4-regular;
+    padding: 0 5px 0 15px;
+    height: 36px;
+    background-color: $choice-bg;
+    color: $choice-text-color;
+    border-radius: 4px 4px 0 0;
+    width: 280px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    position: relative;
+    padding-right: 40px;
+    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;
+    }
+
+    span {
+      @include lineClamp(1);
+    }
+
+    &:focus {
+      border-radius: 4px;
+      border-bottom-color: transparent;
+      @include outline();
+    }
+
+    &.tree-choice-opened {
+      background-color: $choice-opened-bg;
+      border-bottom-color: $choice-opened-border-color;
+
+      .tree-select-caret {
+        color: $choice-opened-icon-color;
+      }
+    }
+  }
+
+  .button-clear {
+    margin-left: auto;
+  }
+
+  .tree-drop {
+    z-index: 9998;
+    box-shadow: $menu-shadow;
+    border-radius: 4px;
+    position: absolute;
+    display: block;
+    background-color: $menu-bg;
+    min-width: 100%;
+    width: fit-content;
+    max-height: 415px;
+    padding: 6.5px 0;
+    top: 5px;
+
+    .tree-search {
+      background-color: transparent;
+      border-radius: 0!important;
+      border-bottom-color: $tree-search-border-color;
+    }
+
+    .ib-input-wrapper {
+      margin-bottom: 6.5px;
+      
+      & > div {
+        overflow: visible;
+      }
+    }
+
+    .ib-list {
+      margin: 0;
+      overflow: auto;
+      max-height: 360px;
+    }
+  }
+
+  .ib-dropdown-menu {
+    position: inherit;
+  }
+
+  .ib-dropdown-resizer {
+    position: absolute;
+    cursor: move;
+    background: transparent;
+    z-index: 2;
+
+    &.ib-dropdown-resizer-left,
+    &.ib-dropdown-resizer-right {
+      width: 3px;
+      top: 0;
+      bottom: 0;
+    }
+
+    &.ib-dropdown-resizer-left {
+      left: 0;
+      cursor: w-resize;
+    }
+
+    &.ib-dropdown-resizer-right {
+      right: 0;
+      cursor: e-resize;
+    }
+  }
+
+  .tree-select-empty {
+    text-align: center;
+  }
+}

package/src/constants/events.js

@@ -0,0 +1,2 @@
+export const EVENT_NAME_HOVER = "hover";
+export const EVENT_NAME_CLICK = "click";

package/src/constants/keyCodes.js

@@ -0,0 +1,8 @@
+export const ESC_KEY_CODE = 27;
+export const SPACE_KEY_CODE = 32;
+export const ENTER_KEY_CODE = 13;
+export const TAB_KEY_CODE = 9;
+export const ARROW_UP_KEY_CODE = 38;
+export const ARROW_LEFT_KEY_CODE = 37;
+export const ARROW_RIGHT_KEY_CODE = 39;
+export const ARROW_DOWN_KEY_CODE = 40;

package/src/directives/outside/outside.js

@@ -0,0 +1,81 @@
+const { performance } = window;
+const getEventLikeTimeStamp =
+  typeof performance?.now === "function" &&
+  Date.now() > document.createEvent("Event").timeStamp
+    ? () => performance.now()
+    : () => Date.now();
+
+const callbacks = new Map();
+let listening = false;
+
+const globalListener = (event) => {
+  callbacks.forEach(({ bindTimeStamp, callback }, element) => {
+    if (element.contains(event.target) || event.timeStamp <= bindTimeStamp) {
+      return;
+    }
+
+    try {
+      callback(event);
+    } catch (e) {
+      console.error(e);
+    }
+  });
+};
+
+const startListening = () => {
+  if (listening) {
+    return;
+  }
+
+  document.addEventListener("click", globalListener, { capture: true });
+  listening = true;
+};
+
+const stopListening = () => {
+  if (!listening) {
+    return;
+  }
+
+  document.removeEventListener("click", globalListener);
+  listening = false;
+};
+
+const created = (el, { value, arg = "click" }) => {
+  if (typeof value !== "function") {
+    throw new Error(
+      `[OutsideDirective] Value must be a function; got ${typeof value}!`
+    );
+  }
+
+  if (arg !== "click") {
+    throw new Error(
+      `[OutsideDirective] Cannot bind ${arg} events; only click events are currently supported!`
+    );
+  }
+
+  if (callbacks.has(el)) {
+    return;
+  }
+
+  if (!listening) {
+    startListening();
+  }
+
+  callbacks.set(el, {
+    bindTimeStamp: getEventLikeTimeStamp(),
+    callback: value,
+  });
+};
+
+const beforeUnmount = (el) => {
+  callbacks.delete(el);
+
+  if (callbacks.size === 0) {
+    stopListening();
+  }
+};
+
+export const OutsideDirective = {
+  created,
+  beforeUnmount,
+};