@avakhula/ui 0.0.10

package/src/components/Dropdown/Dropdown.stories.js

@@ -0,0 +1,48 @@
+import { horizontalPosition, verticalPosition } from "./constants";
+import IbDropdown from "./Dropdown.vue";
+import IbButton from "../Button/Button.vue";
+import readme from "./readme.mdx";
+
+export default {
+  title: "Dropdown",
+  component: IbDropdown,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+  argTypes: {
+    vertical: {
+      control: { type: "select" },
+      options: Object.values(verticalPosition),
+    },
+    horizontal: {
+      control: { type: "select" },
+      options: Object.values(horizontalPosition),
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbDropdown, IbButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-dropdown v-bind="args">
+      <template #trigger>
+        <ib-button>
+          Default dropdown
+        </ib-button>
+      </template>
+
+      <template #body>
+        <div style="padding: 10px;">
+          Content...
+        </div>
+      </template>
+    </ib-dropdown>
+  `,
+});
+
+export const Default = Template.bind({});

package/src/components/Dropdown/Dropdown.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="ib-dropdown" v-outside="close">
+    <span
+      class="dropdown-trigger"
+      :class="triggerClasses"
+      ref="dropdown"
+      @keydown="onKeydown"
+      @click.prevent.stop="toggle"
+      v-if="hasTrigger && triggerType === 'click'"
+    >
+      <slot name="trigger" v-bind:is-opened="isOpenedState"></slot>
+    </span>
+
+    <span
+      class="dropdown-trigger"
+      :class="triggerClasses"
+      @mouseenter="debouncedOpen"
+      @mouseleave="debouncedClose"
+      v-if="hasTrigger && triggerType === 'hover'"
+    >
+      <slot name="trigger" v-bind:is-opened="isOpenedState"></slot>
+    </span>
+
+    <div
+      ref="body"
+      :class="'ib-dropdown-menu ' + classes"
+      v-if="!destroyOnHide || isOpenedState"
+      v-show="isOpenedState"
+    >
+      <div class="dropdown-body" @click="closeOnClickIfRequired">
+        <slot name="body" v-bind:is-opened-state="isOpenedState"></slot>
+
+        <span class="close" @click="close" v-if="showCloseIcon">
+          <slot name="close"></slot>
+        </span>
+      </div>
+      <div class="footer-slot">
+        <slot name="footerslot"></slot>
+      </div>
+    </div>
+
+    <div class="before" @click="close">
+      <slot name="before"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ENTER_KEY_CODE,
+  ARROW_DOWN_KEY_CODE,
+  SPACE_KEY_CODE,
+  ESC_KEY_CODE,
+} from "../../constants/keyCodes";
+import { EVENT_NAME_CLICK } from "../../constants/events";
+import { OutsideDirective as Outside } from "../../directives/outside/outside";
+import { verticalPosition, horizontalPosition } from "./constants";
+
+export default {
+  name: "IbDropdown",
+  directives: { Outside },
+  props: {
+    vertical: {
+      type: String,
+      default: verticalPosition.bottom,
+    },
+    horizontal: {
+      type: String,
+      default: horizontalPosition.left,
+    },
+    triggerClass: {
+      default: "",
+    },
+    isOpened: {
+      type: Boolean,
+      default: false,
+    },
+    showCloseIcon: {
+      type: Boolean,
+      default: false,
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    triggerType: {
+      type: String,
+      default: EVENT_NAME_CLICK,
+    },
+    destroyOnHide: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    isOpened(value) {
+      if (value) {
+        this.open();
+      } else {
+        this.close();
+      }
+    },
+  },
+  mounted() {
+    this.$globalEvents.$on("dropdown:open", (event) => {
+      if (!this.$el.contains(event.$el)) {
+        this.close();
+      }
+    });
+
+    document.addEventListener("focus", this.closeOnEventOutside, true);
+    document.addEventListener("keyup", this.onKeyupDocument);
+  },
+  data() {
+    return {
+      isOpenedState: this.isOpened,
+      timeout: null,
+    };
+  },
+  methods: {
+    onKeydown(e) {
+      if (e.keyCode === ENTER_KEY_CODE || e.keyCode === SPACE_KEY_CODE) {
+        e.preventDefault();
+        this.toggle();
+      }
+
+      if (e.keyCode === ARROW_DOWN_KEY_CODE) {
+        e.preventDefault();
+        this.open();
+      }
+    },
+    onKeyupDocument(e) {
+      if (e.keyCode === ESC_KEY_CODE) {
+        e.preventDefault();
+        this.close();
+      }
+    },
+    toggle() {
+      if (this.isOpenedState) {
+        this.close();
+      } else {
+        this.open();
+      }
+    },
+    open() {
+      if (this.disabled) {
+        return;
+      }
+
+      this.isOpenedState = true;
+      this.$emit("open");
+      this.$globalEvents.$emit("dropdown:open", this);
+    },
+    close() {
+      if (this.disabled) {
+        return;
+      }
+      this.isOpenedState = false;
+      this.$emit("close");
+    },
+    debouncedOpen() {
+      this.timeout = setTimeout(() => {
+        this.open();
+      }, 300);
+    },
+    debouncedClose() {
+      this.close();
+      clearTimeout(this.timeout);
+    },
+    closeOnClickIfRequired() {
+      if (this.closeOnClick) {
+        this.close();
+      }
+    },
+    closeOnEventOutside(e) {
+      if (!this.$el.contains(e.target)) {
+        this.close();
+      }
+    },
+  },
+  computed: {
+    classes() {
+      const verticalClass =
+          this.vertical === verticalPosition.bottom
+            ? " dropdown-bottom"
+            : " dropdown-top",
+        horizontalClass =
+          this.horizontal === horizontalPosition.left
+            ? " dropdown-left"
+            : this.horizontal === horizontalPosition.right
+            ? " dropdown-right"
+            : " dropdown-center",
+        activeClass = this.isOpenedState ? " active" : "";
+
+      return verticalClass + horizontalClass + activeClass;
+    },
+    triggerClasses() {
+      let activeClass = this.isOpenedState ? "active" : "";
+
+      if (this.disabled) {
+        activeClass += " dropdown-trigger-disabled";
+      }
+
+      return this.triggerClass + activeClass;
+    },
+    hasTrigger() {
+      return !!this.$slots.trigger;
+    },
+  },
+  beforeUnmount() {
+    document.removeEventListener("focus", this.closeOnEventOutside, true);
+    document.removeEventListener("keypress", this.onKeydownDocument);
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/variables/shadows.scss";
+
+$menu-shadow: $ib-shadow-3;
+$menu-bg: $white;
+
+.ib-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-trigger {
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+
+  &.dropdown-trigger-disabled {
+    pointer-events: none;
+  }
+}
+
+.ib-dropdown-menu {
+  z-index: 9998;
+  box-shadow: $menu-shadow;
+  border-radius: 4px;
+  overflow: visible;
+  position: absolute;
+  display: block;
+  background-color: $menu-bg;
+  min-width: 100%;
+  width: fit-content;
+
+  .dropdown-body {
+    width: max-content;
+    min-width: 100%;
+  }
+
+  &.dropdown-top {
+    bottom: calc(100% + 3px);
+    top: auto;
+  }
+
+  &.dropdown-bottom {
+    bottom: auto;
+    top: calc(100% + 3px);
+  }
+
+  &.dropdown-left {
+    right: auto;
+    left: 0;
+  }
+
+  &.dropdown-right {
+    left: auto;
+    right: 0;
+  }
+
+  &.dropdown-center {
+    left: 50%;
+    right: 0;
+    transform: translateX(-50%);
+  }
+}
+</style>
+<style lang="scss">
+@import "../../assets/scss/variables/colors.scss";
+
+.dropdown-trigger {
+  &.active {
+    .ib-icon-button:not(.button-clear) {
+      color: $blue-900;
+      background: $blue-200;
+    }
+  }
+}
+.dropdown-trigger {
+  .icon-chevron-down-outline,
+  .icon-chevron-down {
+    margin-left: 5px;
+    font-size: 16px;
+    transition: all 0.3s;
+  }
+
+  &.active {
+    .icon-chevron-down-outline,
+    .icon-chevron-down {
+      visibility: visible;
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>

package/src/components/Dropdown/DropdownDivider.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="dropdown-divider"></div>
+</template>
+
+<script></script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/variables/colors.scss";
+
+.dropdown-divider {
+  height: 1px;
+  width: 100%;
+  background-color: $gray-200;
+}
+</style>

package/src/components/Dropdown/DropdownItem.vue

@@ -0,0 +1,59 @@
+<template>
+  <li class="dropdown-item-wrapper">
+    <component
+      :is="href ? 'a' : 'div'"
+      :class="checked ? 'active' : ''"
+      v-bind="attrs"
+      tabindex="0"
+    >
+      <slot ref="slot"></slot>
+    </component>
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    href: {
+      type: String,
+    },
+  },
+  computed: {
+    attrs() {
+      const attrs = {
+        class: "ib-dropdown-item",
+      };
+
+      if (this.href) {
+        attrs.href = this.href;
+      }
+
+      return attrs;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "../../assets/scss/mixins/dropdown-list-item.scss";
+@include DropdownListItem;
+
+.dropdown-item-wrapper {
+  list-style: none;
+}
+
+.ib-dropdown-item p {
+  display: flex;
+  align-items: center;
+
+  .ib-icon {
+    font-size: 16px;
+    color: inherit;
+    margin-right: 15px;
+  }
+}
+</style>

package/src/components/Dropdown/DropdownList.stories.js

@@ -0,0 +1,174 @@
+import { horizontalPosition, verticalPosition } from "./constants";
+import readme from "./readme.mdx";
+import IbDropdownList from "./DropdownList.vue";
+import IbDropdownItem from "./DropdownItem.vue";
+import IbDropdownDivider from "./DropdownDivider.vue";
+import IbButton from "../Button/Button.vue";
+import IbIconButton from "../IconButton/IconButton.vue";
+import IbIcon from "../Icon.vue";
+
+export default {
+  title: "Dropdown",
+  component: IbDropdownList,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+  argTypes: {
+    vertical: {
+      control: { type: "select" },
+      options: verticalPosition,
+    },
+    horizontal: {
+      control: { type: "select" },
+      options: horizontalPosition,
+    },
+  },
+};
+
+const DropdownListTemplate = (args) => ({
+  components: { IbDropdownList, IbButton, IbDropdownItem },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-dropdown-list v-bind="args">
+      <template #trigger>
+        <ib-button :disabled="args.disabled">
+          Dropdown list
+          <ib-icon name="chevron-down-outline"></ib-icon>
+        </ib-button>
+      </template>
+
+      <template #body>
+        <ib-dropdown-item checked>Item 1</ib-dropdown-item>
+        <ib-dropdown-item>Item 2</ib-dropdown-item>
+        <ib-dropdown-item>Item 3</ib-dropdown-item>
+      </template>
+    </ib-dropdown-list>
+  `,
+});
+
+export const DropdownList = DropdownListTemplate.bind({});
+DropdownList.parameters = {
+  docs: {
+    description: {
+      story:
+        "In the dropdown list, you need to use such elements as a `<ib-dropdown-item />`",
+    },
+  },
+};
+
+const DropdownListWithIconsTemplate = (args) => ({
+  components: {
+    IbDropdownList,
+    IbButton,
+    IbDropdownItem,
+    IbIcon,
+    IbDropdownDivider,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-dropdown-list v-bind="args">
+      <template #trigger>
+        <ib-button :disabled="args.disabled">
+          Dropdown list
+          <ib-icon name="chevron-down-outline"></ib-icon>
+        </ib-button>
+      </template>
+
+      <template #body>
+        <ib-dropdown-item checked>
+          <ib-icon icon="print-outline" />
+          Item 1
+        </ib-dropdown-item>
+        <ib-dropdown-item>
+          <ib-icon icon="mail-outline" />
+          Item 2
+        </ib-dropdown-item>
+        <ib-dropdown-divider />
+        <ib-dropdown-item>
+          <ib-icon icon="cloud-upload-outline" />
+          Item 3
+        </ib-dropdown-item>
+      </template>
+    </ib-dropdown-list>
+  `,
+});
+
+export const DropdownListItemWithIcon = DropdownListWithIconsTemplate.bind({});
+
+const DropdownRightPosition = (args) => ({
+  components: { IbDropdownList, IbButton, IbDropdownItem },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-dropdown-list v-bind="args">
+      <template #trigger>
+        <ib-button :disabled="args.disabled">
+          Dropdown
+        </ib-button>
+      </template>
+
+      <template #body>
+        <p style="padding: 5px">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+      </template>
+    </ib-dropdown-list>
+  `,
+});
+
+export const DropdownPosition = DropdownRightPosition.bind({});
+DropdownPosition.args = {
+  horizontal: horizontalPosition.right,
+};
+DropdownPosition.parameters = {
+  docs: {
+    description: {
+      story:
+        "In the dropdown list, you need to use such elements as a `<ib-dropdown-item />`, `<ib-checkbox />`, `<ib-toggle />`",
+    },
+  },
+};
+DropdownPosition.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];
+
+const DropdownContextMenuTemplate = (args) => ({
+  components: { IbDropdownList, IbIconButton, IbIcon, IbDropdownItem },
+  setup() {
+    return { args };
+  },
+  template: `
+  <ib-dropdown-list v-bind="args">
+      <template #trigger>
+        <ib-icon-button kind="ghost" :disabled="args.disabled">
+          <ib-icon name="ellipsis-horizontal-sharp" />
+        </ib-icon-button>
+      </template>
+
+      <template #body>
+        <ib-dropdown-item>Page 1</ib-dropdown-item>
+        <ib-dropdown-item>Page 2</ib-dropdown-item>
+        <ib-dropdown-item>Page 3</ib-dropdown-item>
+      </template>
+    </ib-dropdown-list>
+  `,
+});
+
+export const ContextMenu = DropdownContextMenuTemplate.bind({});
+ContextMenu.args = {
+  horizontal: horizontalPosition.center,
+};
+ContextMenu.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];

package/src/components/Dropdown/DropdownList.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="dropdown-list-wrapper">
+    <ib-dropdown
+      :horizontal="horizontal"
+      :vertical="vertical"
+      :isOpened="isOpened"
+      :closeOnClick="closeOnClick"
+      :disabled="disabled"
+      v-bind="$attrs"
+      ref="dropdown"
+      @all="proxyEvents"
+    >
+      <template v-slot:trigger="{ isOpened }" v-if="hasTrigger">
+        <slot name="trigger" v-bind:is-opened="isOpened"> </slot>
+      </template>
+
+      <template v-slot:body="{ isOpened }">
+        <ib-list ref="list" class="list">
+          <slot name="body" v-bind:is-opened-state="isOpened"></slot>
+        </ib-list>
+      </template>
+    </ib-dropdown>
+  </div>
+</template>
+
+<script>
+import IbDropdown from "./Dropdown.vue";
+import IbList from "../List.vue";
+import { verticalPosition, horizontalPosition } from "./constants";
+
+export default {
+  props: {
+    vertical: {
+      type: String,
+      default: verticalPosition.bottom,
+    },
+    horizontal: {
+      type: String,
+      default: horizontalPosition.left,
+    },
+    isOpened: {
+      type: Boolean,
+      default: false,
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    proxyEvents(eventInfo) {
+      this.$emit(eventInfo.event, ...eventInfo.args);
+    },
+  },
+  data() {
+    return {
+      list: this.$refs.list,
+    };
+  },
+  computed: {
+    hasTrigger() {
+      return !!this.$slots.trigger;
+    },
+  },
+  components: {
+    IbDropdown,
+    IbList,
+  },
+};
+</script>
+<style lang="scss">
+@import "../../assets/scss/variables/colors.scss";
+
+.dropdown-list-wrapper {
+  .list {
+    width: fit-content;
+    max-width: 220px;
+    min-width: 100%;
+    max-height: 360px;
+  }
+
+  .ib-toggle-container,
+  .ib-checkbox {
+    min-width: 100%;
+    width: max-content;
+    max-width: inherit;
+  }
+}
+</style>

package/src/components/Dropdown/constants.js

@@ -0,0 +1,10 @@
+export const horizontalPosition = {
+  left: "left",
+  right: "right",
+  center: "center",
+};
+
+export const verticalPosition = {
+  top: "top",
+  bottom: "bottom",
+};