base_ui/components/global/MyList.vue

<template>
  <div class="list-container">
    <div
      class="list-content"
      v-if="cloneItems.length"
      :style="{ height: $attrs.height, maxHeight: $attrs.maxHeight }"
    >
      <div
        v-for="(item, index) in cloneItems"
        :key="index"
        class="search-items__item"
        :class="{ active: item.active ?? false }"
      >
        <div class="search-items__header">
          <a class="search-items__label text__13 text__dark-gray">{{
            item.item_type ?? "--"
          }}</a>
          <a class="search-items__title text__blue">
            {{ item.title ?? "--" }}
          </a>
        </div>
        <div class="text__13 text__dark-gray search-items__code">
          <span style="margin-left: 10px">مجله : علوم حدیث</span>
          <span style="margin-left: 10px"
            >شماره : {{ item.number ?? "--" }}</span
          >
          <span style="margin-left: 10px">
            منبع : {{ item.resource ?? "--" }}</span
          >
        </div>
        <div class="search-items__content">
          <div
            class="search-items__detail text__14 line-clamp__2"
            v-html="item.text"
          ></div>
        </div>

        <div class="search-item__actions">
          <span class="tavasi tavasi-more-vert"></span>

          <!--          <button @click="showDetails(index)" title="مشاهده"-->
          <!--                  class="btn show-btn">-->
          <!--            <i class="tavasi tavasi-eye"></i>-->
          <!--          </button>-->
          <button
            @click="togglePanel(index)"
            title="ویرایش"
            class="btn edit-btn"
            data-toggle="modal"
            data-target="#edit-paper"
          >
            <span class="tavasi tavasi-Component-242--1"></span>
          </button>

          <button
            @click="deleteItem(item.id)"
            title="حذف"
            class="btn delete-btn"
            type="button"
          >
            <!--                <NuxtImg class="" src="assets/common/img/Component 295 – 1.svg" alt="حذف"/>-->
            <svg class="icon icon-Component-295--1">
              <use xlink:href="#icon-Component-295--1"></use>
            </svg>
          </button>
          <button
            @click="showDetails(index)"
            title="مشاهده جزییات"
            class="btn show-detail-btn"
            type="button"
          >
            <span class="tavasi tavasi-eye"></span>
          </button>
        </div>
      </div>
    </div>

    <no-data v-else />

    <jahat-pagination
      :paginationInfo="paginationInfo"
      @page-changed="clickCallback"
      @page-limit-changed="limitChanged"
    >
    </jahat-pagination>
  </div>
</template>

<script>
// import tableAndListMixin from "~/mixins/tableAndListMixin";

/**

 * @vue-prop {Object} [paginationInfo] - اطلاعات صفحه بندی
 * @vue-prop {Number} [paginationInfo.pages=0] - تعداد کل صفحات
 * @vue-prop {Number} [paginationInfo.total=0] - تعداد کل آیتم‌ها
 * @vue-prop {Number} [paginationInfo.page=1] - صفحه فعلی
 * @vue-prop {Number} [paginationInfo.offset=0] - آفست (صفحه * تعداد در هر صفحه)
 * @vue-prop {Number} [paginationInfo.limit=10] - تعداد در هر صفحه
 * 
 * @vue-data {Array} [cloneItems=[]] - لیست آیتم‌های کلون شده
 */

export default {
  // mixins: [tableAndListMixin],
};
</script>

<style scoped lang="scss">
.list-container {
  width: 100%;

  .list-content {
    height: calc(100vh - 10em);
    overflow: auto;
  }
}

.search-items__item {
  position: relative;

  &:not(:last-child) {
    margin-bottom: 30px;
  }

  &:hover,
  &.active {
    background-color: #e8fcff;

    .search-item__actions {
      width: 8.5em;
      transition: all 0.5s;

      .tavasi-more-vert {
        transition: all 0.2s;
        display: none;
      }
    }
  }
}

.search-items__code {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

.search-items__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

.search-items__header .text__gray {
  color: #a7a098;
}

.search-items__label {
  white-space: nowrap;
  padding: 0 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e4dfd8;
  height: 20px;
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.4);
}

.search-items__label:hover {
  color: black;
  border-color: black;
}

.search-items__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  margin-bottom: 6px;
  margin-top: 3px;
  color: #060606;
}

.search-items__title:hover {
  color: #0d65e8 !important;
  text-decoration: underline !important;
}

.search-items__detail {
  display: inline-block;
  line-height: 25px;
  color: #111;
}

.search-items__item--bookmark {
  padding-left: 55px;
  position: relative;
}

.search-items__bookmark {
  position: absolute;
  left: 0;
  top: 24px;
}

.search-items__bookmark.active img.active {
  opacity: 1;
}

.search-items__bookmark.active img.deactive {
  opacity: 0;
}

.search-items__bookmark:hover img.active {
  opacity: 1;
}

.search-items__bookmark:hover img.deactive {
  opacity: 0;
}

.search-items__bookmark img {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.search-items__bookmark img.active {
  position: absolute;
  opacity: 0;
}

.search-item__actions {
  position: absolute;
  left: 0;
  width: 1.6em;
  top: 1em;
  overflow: hidden;
  transition: all 0.5s;
  display: flex;
  align-items: center;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;

    .tavasi {
      color: #adbec4;
    }
  }
}
</style>