lib-pajakio-v2 1.0.0

package/src/components/Dropdown/DropdownCheckbox.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <div class="dropdown">
+      <slot name="button" />
+      <div id="myDropdown" class="dropdown-content" :class="{ show: show }">
+        <slot name="list" />
+      </div>
+    </div>
+    <!-- handle close away -->
+    <div v-if="show" class="wrap-outline" @click="handleClose"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: [Boolean],
+      default: false,
+    },
+  },
+  methods: {
+    handleClose() {
+      this.$emit("handleClose");
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@use "@/assets/style/_color.scss" as *;
+
+.wrap-outline {
+  width: 100%;
+  height: 100vh;
+  top: 0px;
+  position: fixed;
+  left: 0px;
+  z-index: 1;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+
+  button,
+  a {
+    position: relative;
+    z-index: 2;
+  }
+
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    min-width: 105px;
+    overflow: auto;
+    z-index: 2;
+    box-shadow: 0px 1px 6px rgb(11 60 93 / 12%),
+      0px 4px 18px 3px rgb(46 50 52 / 8%);
+    border-radius: 6px;
+    border: 1px solid $neutral-2;
+    background: $neutral-0;
+    padding: 4px 0;
+    font-size: 14px;
+
+    a {
+      color: $neutral-6;
+      padding: 8px 12px;
+      text-decoration: none;
+      display: block;
+    }
+
+    button {
+      color: $neutral-6;
+      font-size: 14px;
+      padding: 8px 12px;
+      width: 100%;
+      min-width: max-content;
+      border: none;
+      background: none;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    a:hover,
+    button:hover {
+      background-color: $neutral-1;
+    }
+
+    .danger {
+      color: $critical-4;
+    }
+  }
+
+  .show {
+    display: block;
+  }
+}
+</style>

package/src/components/Dropdown/DropdownCompany.vue

@@ -0,0 +1,259 @@
+<template>
+  <div :class="[{ disabled: disabled }, { opened: opened }]" class="select">
+    <div
+      @click="toggle"
+      style="width: inherit"
+      class="select-label mr-auto value-dropdown-company"
+      :class="[{ 'active-dropdown': opened }]"
+    >
+      <slot name="label" :opened="opened"> </slot>
+    </div>
+    <div
+      class="select-options min-w-full"
+      :class="[{ 'card-options': cardStyle }]"
+    >
+      <div
+        v-if="searchAble.length > 0 && options.length > 1"
+        class="search-container flex"
+      >
+        <input
+          style="width: 100%"
+          class="select-label mr-2"
+          placeholder="Nama Perusahaan / NPWP"
+          v-model="keyword"
+          v-on:keyup.enter="onEnter"
+        />
+        <base-icon 
+          class="tool--icon c-pointer ml-auto"
+          iconName="search"
+        />
+      </div>
+      <div
+        v-if="filtredOptions.length < 1"
+        class="select-option text-regular"
+        :class="[{ 'card-option': cardStyle }]"
+        style="color: #505154; font-weight: bold; text-align: center"
+      >
+        <p class="text-black">{{ emptyListMsg }}</p>
+      </div>
+      <div
+        v-else
+        v-for="option in filtredOptions"
+        :key="option.companyId"
+        @click="change(option)"
+        class="select-option"
+        :class="[{ 'card-option': cardStyle }]"
+      >
+        <slot name="list" :item="option">
+          <p class="text-black">{{ option.companyName }}</p>
+        </slot>
+      </div>
+    </div>
+    <div v-if="opened" @click="toggle" class="select-overlay"></div>
+  </div>
+</template>
+
+<script>
+import BaseIcon from "@/components/Base/BaseIcon";
+
+export default {
+  name: "base-select",
+  components: {
+    BaseIcon
+  },
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    onChange: {
+      type: Function,
+      required: false,
+    },
+    disabled: {
+      default: false,
+      type: Boolean,
+    },
+    cardStyle: {
+      default: false,
+      type: Boolean,
+    },
+    searchAble: {
+      default: () => [],
+      type: Array,
+    },
+    emptyListMsg: {
+      default: "Data tidak ditemukan",
+      type: String,
+    },
+  },
+  data() {
+    return {
+      opened: false,
+      keyword: "",
+    };
+  },
+  computed: {
+    filtredOptions() {
+      if (this.searchAble.length < 1) return this.options;
+      return this.options.filter((item) => {
+        return this.searchAble.some((list) => {
+          return item[list]
+            ? item[list].toLowerCase().includes(this.keyword.toLowerCase())
+            : false;
+        });
+      });
+    },
+  },
+  methods: {
+    change(opt) {
+      this.$emit("input", opt);
+      this.opened = false;
+
+      if (this.onChange !== undefined) {
+        this.onChange(opt);
+      }
+    },
+    toggle() {
+      if (this.disabled) {
+        return;
+      }
+      this.opened = !this.opened;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.select {
+  font-size: 15px;
+  display: flex;
+  position: relative;
+  justify-content: center;
+  cursor: pointer;
+  .value-dropdown-company:hover,
+  .active-dropdown {
+    border-color: #3e7dc0 !important;
+  }
+  .card-view {
+    padding: 8px 16px;
+    border: 1px solid #d4d7d8;
+    border-radius: 6px;
+  }
+  .search-container {
+    margin: 12px 16px;
+    padding: 10px;
+    border: 1px solid #b3b3b4;
+    border-radius: 8px;
+
+    input {
+      border: none;
+      outline: none;
+    }
+  }
+  * {
+    box-sizing: border-box;
+  }
+  &-options {
+    font-size: 14px;
+    position: absolute;
+    z-index: 1001;
+    top: 0%;
+    opacity: 0;
+    margin-top: 10px;
+    width: 100%;
+    height: 0;
+    max-height: 0;
+    overflow: hidden;
+    background-color: #ffffff;
+    // border-radius: 0px 0px 8px 8px;
+    box-shadow: 6px 6px 10px #e8e8e8;
+    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    z-index: -99;
+  }
+  .card-options {
+    font-size: 14px;
+    position: absolute;
+    z-index: 1001;
+    top: 0%;
+    opacity: 0;
+    margin-top: 10px;
+    width: 100%;
+    max-width: 350px;
+    height: 0;
+    max-height: 0;
+    overflow: hidden;
+    background-color: #ffffff;
+    // border-radius: 0px 0px 8px 8px;
+    box-shadow: 6px 6px 10px #e8e8e8;
+    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    z-index: -99;
+
+    box-sizing: border-box;
+
+    /* Auto layout */
+
+    padding: 0px;
+
+    /* White */
+
+    background: #ffffff;
+    /* Black 3 */
+
+    border: 1px solid #b3b3b4;
+    /* Shadow Menu */
+
+    box-shadow: 2px 4px 8px rgba(221, 221, 221, 0.5);
+    border-radius: 8px;
+  }
+  &-option {
+    cursor: pointer;
+    top: 100%;
+  }
+  &-option:hover {
+    background-color: rgba(62, 125, 192, 0.2);
+  }
+  .card-option {
+    cursor: pointer;
+    padding: 12px 16px;
+    top: 100%;
+  }
+  &-overlay {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    z-index: 1000;
+  }
+  &.disabled {
+    opacity: 0.5;
+    .select-label {
+      div {
+        cursor: not-allowed;
+      }
+    }
+  }
+  &.disabled &-label:hover {
+    color: #4c4c4c;
+    cursor: default;
+  }
+}
+.select.opened {
+  .select-options {
+    top: 100%;
+    opacity: 1;
+    z-index: 999999;
+    height: max-content;
+    max-height: 200px;
+    overflow: auto;
+  }
+  .card-options {
+    top: 100%;
+    opacity: 1;
+    z-index: 999999;
+    height: max-content;
+    max-height: 200px;
+    overflow: auto;
+  }
+}
+</style>

package/src/components/Dropdown/DropdownMultipleTag.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="dropdown-multiple-tag cursor-pointer" @click="$emit('handleShow')">
+    <typo-text
+      v-if="placeholder && modelValue.length == 0"
+      variant="body-1-regular"
+      class="placeholder"
+    >
+      {{ placeholder }}
+    </typo-text>
+    <ul>
+      <li v-for="(item, index) in value" :key="index">
+        <div class="item-tag">
+          {{ item }}
+          <base-icon
+            iconName="close"
+            height="16"
+            width="16"
+            @click.stop="handleRemove(index)"
+          />
+        </div>
+      </li>
+    </ul>
+    <base-icon
+      :class="{ 'arrow-up': show }"
+      iconName="keyboard_arrow_down"
+      color="#7D8389"
+    />
+  </div>
+</template>
+
+<script>
+import BaseIcon from "@/components/Base/BaseIcon";
+import TypoText from "@/components/Typography/TypoText";
+
+export default {
+  components: {
+    BaseIcon,
+    TypoText
+  },
+  props: {
+    show: {
+      type: [Boolean],
+      default: false,
+    },
+    value: {
+      type: [Array],
+    },
+    modelValue: {
+      type: [Array],
+    },
+    placeholder: {
+      type: [String],
+      default: ""
+    }
+  },
+  methods: {
+    handleRemove(index) {
+      let getData = [];
+      this.value.forEach((element, idx) => {
+        if (index != idx) {
+          getData.push(element);
+        }
+      });
+      this.$emit("click", this.value[index])
+      this.$emit("update:modelValue", getData);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use "@/assets/style/_color.scss" as *;
+
+.dropdown-multiple-tag {
+  padding: 4px 16px;
+  background: $neutral-0;
+  border: 1px solid $neutral-2;
+  border-radius: 6px;
+  align-self: stretch;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  min-width: 100px;
+
+  .placeholder {
+    color: #d4d7d8;
+  }
+
+  .arrow-up {
+    transform: rotate(180deg);
+  }
+
+  svg {
+    cursor: pointer;
+  }
+
+  .item-tag {
+    background: $neutral-2;
+    border-radius: 4px;
+    padding: 2px 4px;
+    font-weight: bold;
+    font-size: 12px;
+    color: $neutral-6;
+    display: flex;
+    align-items: center;
+    margin: 4px 0;
+
+    svg {
+      margin-left: 4px;
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding: 0px;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0px;
+    width: 100%;
+
+    li {
+      margin-right: 8px;
+    }
+  }
+}
+</style>

package/src/components/Dropdown/DropdownSearchList.vue

@@ -0,0 +1,185 @@
+<template>
+  <ul class="select-box__list">
+    <li v-if="dataList.length == 0">
+      <label
+        class="flex justify-center select-box__option select-box__empty"
+        aria-hidden="aria-hidden"
+      >
+        Data tidak ditemukan
+      </label>
+    </li>
+    <li v-for="(item, index) in dataList" :key="index">
+      <label
+        class="flex select-box__option items-start"
+        :class="{
+          'select-active': item.value == valueSearch && item.value,
+          'justify-between': !item.code
+        }"
+        :for="index"
+        aria-hidden="aria-hidden"
+        @click="clickItemList(item)"
+      >
+        <div v-if="item.code" class="tag-code">
+          {{ item.code }}
+        </div> 
+        <div class="pr-3 text-left">
+          {{ item.label }} <span v-if="item.tagLabel" class="tag-label">{{ item.tagLabel }}</span>
+        </div>
+        <div v-if="item.name" class="select-box__item-name">
+          <span class="label-tag" v-if="item.tag">{{ item.tag }}</span> {{ item.name }}
+        </div>
+      </label>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: [Array],
+    },
+    modelValue: {
+      type: [Array, Object, String, Number, Boolean],
+    },
+  },
+  data() {
+    return {
+      dataList: [],
+      valueSearch: ""
+    };
+  },
+  watch: {
+    modelValue(newVal) {
+      let _this = this;
+      if (newVal) {
+        this.dataList = _this.list.filter((list) =>
+          list.label.toLowerCase().includes(this.modelValue.toLowerCase()) || 
+          String(list.name).toLowerCase().includes(this.modelValue.toLowerCase())
+        );
+      } else {
+        this.dataList = this.list
+        this.handleValue({value: ""})
+      }
+    },
+    list(newVal) {
+      this.dataList = newVal;
+    }
+  },
+  mounted() {
+    this.dataList = this.list;
+  },
+  methods: {
+    clickItemList(value) {
+      this.handleValue(value)
+      this.$emit("update:modelValue", value.label);
+    },
+    handleValue(value) {
+      this.valueSearch = value.value
+      this.$emit("handleValue", value.value)
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use "@/assets/style/_color.scss" as *;
+
+.select-box {
+  position: relative;
+  display: block;
+  width: 100%;
+  margin: 0 auto;
+  font-size: 14px;
+
+  &__list {
+    position: absolute;
+    width: calc(100% - 2px);
+    padding: 0;
+    list-style: none;
+    opacity: 1;
+    animation-duration: 0.5s;
+    animation-delay: 0.5s;
+    animation-fill-mode: forwards;
+    animation-timing-function: step-start;
+    top: 0px;
+    margin: 0px;
+    padding: 4px 0;
+    background: #fff;
+    max-height: 200px;
+    overflow: auto;
+    z-index: 9;
+
+    .tag-code {
+      background: #F9F9F9;
+      padding: 4px 6.5px;
+      border-radius: 4px;
+      margin-right: 8px;
+      font-weight: 900;
+    }
+
+    .tag-label {
+      font-size: 12px;
+      font-weight: 900;
+      background: #DBDBDB;
+      padding: 4px 8px;
+      border-radius: 4px;
+      margin-left: 8px;
+    }
+  }
+
+  /* width */
+  &__list::-webkit-scrollbar {
+    width: 8px;
+  }
+  /* Track */
+  &__list::-webkit-scrollbar-track {
+    background: $neutral-2;
+    border-radius: 6px;
+  }
+  /* Handle */
+  &__list::-webkit-scrollbar-thumb {
+    background: $neutral-3;
+    border-radius: 20px;
+  }
+  /* Handle on hover */
+  &__list::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+
+  &__option {
+    padding: 12px 16px;
+    background-color: #fff;
+    color: $neutral-6;
+    transition: all 0.3s;
+    font-weight: bold;
+    cursor: pointer;
+    line-break: auto;
+    text-align: right;
+
+    &:hover,
+    &:focus,
+    &.select-active {
+      background-color: $neutral-1;
+    }
+  }
+
+  &__item-name {
+    font-weight: normal;
+
+    .label-tag {
+      background: #DBDBDB;
+      font-size: 12px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      color: #B3B3B4;
+      font-weight: 700;
+      margin-right: 20px;
+    }
+  }
+
+  &__empty {
+    font-weight: normal;
+  }
+}
+</style>