base_ui/components/other/_NotionComponent.vue

<template>
  <div class="form-row form-group" :key="$attrs.key">
    <vue-tribute class="tribute-container" :options="tributeOptions">
      <div class="ta-header">
        <div class="ta-type-selection">
          <multiselect
            v-model="types[0]"
            id="group-filter"
            placeholder=""
            track-by="id"
            label="title"
            :options="types"
            :searchable="true"
            :options-limit="300"
            :limit="10"
            :max-height="350"
            selectLabel=""
            selectedLabel=""
            deselectLabel=""
            :close-on-select="true"
            :clear-on-select="false"
            :preserve-search="true"
          >
            <!-- <template slot="selection" slot-scope="{ values, search, isOpen }"
              ><span
                class="multiselect__single"
                v-if="values.length"
                v-show="!isOpen"
                >{{ values.length }} فیلتر</span
              ></template
            > -->
            <!-- <template slot="noResult" slot-scope="{ values, search, isOpen }">
              چیزی یافت نشد.
            </template>
            <template slot="noOptions" slot-scope="{ values, search, isOpen }">
              فهرست خالی است.
            </template> -->
          </multiselect>
        </div>

        <div class="ta-options">
          <div class="ta-options-item">
            <svg role="graphics-symbol" viewBox="0 0 14 16" class="copy">
              <path
                d="M2.404 15.322h5.701c1.26 0 1.887-.662 1.887-1.927V12.38h1.154c1.254 0 1.91-.662 1.91-1.928V5.555c0-.774-.158-1.266-.626-1.74L9.512.837C9.066.387 8.545.21 7.865.21H5.463c-1.254 0-1.91.662-1.91 1.928v1.084H2.404c-1.254 0-1.91.668-1.91 1.933v8.239c0 1.265.656 1.927 1.91 1.927zm7.588-6.62c0-.792-.1-1.161-.592-1.665L6.225 3.814c-.452-.462-.844-.58-1.5-.591V2.215c0-.533.28-.832.843-.832h2.38v2.883c0 .726.386 1.113 1.107 1.113h2.83v4.998c0 .539-.276.832-.844.832H9.992V8.701zm-.79-4.29c-.206 0-.288-.088-.288-.287V1.594l2.771 2.818H9.201zM2.503 14.15c-.563 0-.844-.293-.844-.832V5.232c0-.539.281-.837.85-.837h1.91v3.187c0 .85.416 1.26 1.26 1.26h3.14v4.476c0 .54-.28.832-.843.832H2.504zM5.79 7.816c-.24 0-.346-.105-.346-.345V4.547l3.223 3.27H5.791z"
              ></path>
            </svg>
            کپی
          </div>

          <div class="ta-options-item">کپشن</div>

          <div class="ta-options-item">
            <div class="dropdown">
              <button
                class="btn btn-secondary dropdown-toggle"
                type="button"
              >
                <svg
                  role="graphics-symbol"
                  viewBox="0 0 13 3"
                  class="dots"
                  style="
                    width: 14px;
                    height: 14px;
                    display: block;
                    fill: inherit;
                    flex-shrink: 0;
                  "
                >
                  <g>
                    <path
                      d="M3,1.5A1.5,1.5,0,1,1,1.5,0,1.5,1.5,0,0,1,3,1.5Z"
                    ></path>
                    <path
                      d="M8,1.5A1.5,1.5,0,1,1,6.5,0,1.5,1.5,0,0,1,8,1.5Z"
                    ></path>
                    <path
                      d="M13,1.5A1.5,1.5,0,1,1,11.5,0,1.5,1.5,0,0,1,13,1.5Z"
                    ></path>
                  </g>
                </svg>
              </button>
              
              <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <button class="dropdown-item" type="button">Action</button>
                <button class="dropdown-item" type="button">
                  Another action
                </button>
                <button class="dropdown-item" type="button">
                  Something else here
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <textarea
        @tribute-no-match="noMatchFound"
        @tribute-replaced="textReplaced"
        :ref="localFormElement.key"
        class="form-control"
        @focus="clearErrors"
        @blur="validate"
        @change="validate"
        :placeholder="localFormElement.placeholder"
        :id="localFormElement.key"
        :name="localFormElement.key"
        v-model="textValue"
        cols="1"
        rows="1"
      >
      </textarea>

      <div class="ta-footer">
        <input
          class="form-control ta-footer-input"
          type="text"
          value="فریم وظیفه"
        />
      </div>
    </vue-tribute>

    <context-menu
      style="position: static; display: inline-flex"
      v-if="contextMenu.length"
      :id="'context-menu-' + localFormElement.key"
      :contextMenu="contextMenu"
      @other="methodName($event)"
    >
    </context-menu>
  </div>
</template>

<script>
import formBuilderMixin from "~/extensions/formBuilderExtension";

import VueTribute from "vue-tribute";
import apis from "~/apis/borhanApi.js";

export default {
  props: {
    enableSuggestion: {
      default: false,
    },
    contextMenu: {
      default() {
        return [];
      },
    },
  },
  extends: formBuilderMixin,

  data() {
    return {
      types: [
        {
          id: "1",
          title: "javascript",
        },
        {
          id: "2",
          title: "PHP",
        },
        {
          id: "3",
          title: "SpareQL",
        },
        {
          id: "4",
          title: "Paython",
        },
        {
          id: "5",
          title: "BASIC",
        },
      ],
      tributeOptions: {
        // symbol or string that starts the lookup
        trigger: "",

        // element to target for @mentions
        iframe: null,

        // class added in the flyout menu for active item
        selectClass: "highlight",

        // class added to the menu container
        containerClass: "tribute-container large",

        // class added to each list item
        itemClass: "my-tribute-class",

        // function called on select that returns the content to insert
        selectTemplate: function (item) {
          return item.original.value;
          // return "@" + item.original.value;
        },

        // template for displaying item in menu
        menuItemTemplate: function (item) {
          return item.string;
        },

        // template for when no match is found (optional),
        // If no template is provided, menu is hidden.
        noMatchTemplate:
          '<span class="no-result">مورد مشابهی ثبت نشده است.</span>',

        // specify an alternative parent container for the menu
        // container must be a positioned element for the menu to appear correctly ie. `position: relative;`
        // default container is the body
        menuContainer: document.body,

        // column to search against in the object (accepts function or string)
        lookup: "key",

        // column that contains the content to insert by default
        fillAttr: "value",

        // REQUIRED: array of objects to match or a function that returns data (see 'Loading remote data' for an example)
        values: [
          {
            key: "سلام",
            value: "سلام",
          },
          {
            key: "باسلام",
            value: "باسلام",
          },
          {
            key: "علیک سلام",
            value: "علیک سلام",
          },
          {
            key: "بی سلام",
            value: "بی سلام",
          },
          {
            key: "صدتا سلام",
            value: "صدتا سلام",
          },
        ],
        // values: ["سلام", "باسلام", "علیک سلام", "بی سلام", "صدتا سلام"],
        // values: (text, cb) => {
        //   this.remoteSearch(text, (items) => cb(items));
        // },
        // When your values function is async, an optional loading template to show
        loadingItemTemplate: null,

        // specify whether a space is required before the trigger string
        requireLeadingSpace: true,

        // specify whether a space is allowed in the middle of mentions
        allowSpaces: true,

        // optionally specify a custom suffix for the replace text
        // (defaults to empty space if undefined)
        // replaceTextSuffix: "",

        // specify whether the menu should be positioned.  Set to false and use in conjuction with menuContainer to create an inline menu
        // (defaults to true)
        positionMenu: true,

        // when the spacebar is hit, select the current match
        spaceSelectsMatch: false,

        // turn tribute into an autocomplete
        autocompleteMode: true,

        // Customize the elements used to wrap matched strings within the results list
        // defaults to <span></span> if undefined
        searchOpts: {
          pre: "<span>",
          post: "</span>",
          skip: false, // true will skip local search, useful if doing server-side search
        },

        // Limits the number of items in the menu
        menuItemLimit: 25,

        // specify the minimum number of characters that must be typed before menu appears
        menuShowMinLength: 0,
      },
      httpService: undefined,
    };
  },
  mounted() {
    this.httpService = new HttpService(import.meta.env.VITE_BASE_URL);
  },
  methods: {
    limitText(count) {
      return `و ${count} کاربر دیگر`;
    },
    noMatchFound(args) {
    },
    textReplaced(args) {
    },
    methodName(action, index = 0) {
      try {
        this[action](index);
      } catch (err) {
        this.$emit(action, index);
      }
    },
    remoteSearch(input, callback) {

      return this.httpService
        .getRequest(apis.concept.annotations.read + "?ontology_id=" + input)
        .then((res) => {
          callback(res.data);
        })
        .catch((e) => {
          callback([]);
        })
        .finally(() => {
          this.fetchingData = false;
        });
    },
  },


};
</script>

<!-- #region  tribute -->
<style scoped lang="scss">
.multiselect {
  font-size: 11px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  display: block;
  position: relative;
  width: 100%;
  min-height: 30px;
  text-align: left;
  color: #35495e;

  &.multiselect--active {
    background-color: #fff;
    z-index: 999999;
  }
}
.multiselect__content-wrapper {
  z-index: 9999;
}
.multiselect__select {
  position: absolute;
  width: 40px;
  height: 33px;
  right: 1px;
  top: 1px;
  padding: 4px 8px;
  text-align: center;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;

  &::before {
    position: relative;
    right: 0;
    top: unset;
    color: #999;
    margin-top: 0;
    border: none;
    background-size: contain;
    width: 2em;
    height: 2em;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url("../../assets/common/img/Component-25--1.svg");
  }
}
.multiselect__tags {
  min-height: 30px;
  display: block;
  padding: 8px 40px 0 8px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  background: #fff;
  font-size: 14px;
  border-color: transparent;
  background: transparent;
}
[dir="rtl"] .multiselect__tags {
  padding: 5px 5px 0 30px;
}
.multiselect__input,
.multiselect__single {
  position: relative;
  display: inline-block;
  min-height: 20px;
  line-height: 20px;
  border: none;
  border-radius: 5px;
  background: transparent;
  padding: 0 0 0 5px;
  width: 100%;
  -webkit-transition: border 0.1s ease;
  transition: border 0.1s ease;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 8px;
  vertical-align: top;
}



.form-group {
  &:hover {
    .ta-header,
    .ta-options {
      opacity: 1;
      visibility: visible;
      transition: opacity 300ms ease-in 0s;
    }
  }

  &.active,
  &:active {
    .ta-header,
    .ta-options {
      opacity: 1;
      visibility: visible;
      transition: opacity 300ms ease-in 0s;
    }
  }
}
</style>
<!-- #endregion  tribute -->

<style lang="scss" scoped>
.ta-header {
  position: absolute;
  top: 3px;
  right: 8px;
  left: 1px;

  display: flex;
  justify-content: space-between;

  opacity: 0;
  visibility: hidden;

  transition: opacity 300ms ease-in 0s;

  .ta-type-selection {
    // position: absolute;
    // top: 8px;
    // right: 8px;
    z-index: 1;
    color: rgba(55, 53, 47, 0.65);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    opacity: 1;
    transition: opacity 300ms ease-in 0s;
  }
}

.ta-options {
  opacity: 0;
  visibility: hidden;

  // position: absolute;
  // top: 3px;
  // left: 1px;
  z-index: 1;
  color: rgba(55, 53, 47, 0.65);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 25px;
  font-size: 11.5px;
  transition: opacity 300ms ease-in 0s;

  .ta-options-item {
    user-select: none;
    transition: background 20ms ease-in 0s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    height: 25px;
    border-radius: 4px 0px 0px 4px;
    font-size: 11.5px;
    line-height: 1.2;
    padding: 4px 6px;
    color: rgb(55, 53, 47);
    background: rgb(234, 233, 229);
    font-weight: 400;

    svg {
      width: 16px;
      height: 16px;
      display: block;
      fill: inherit;
      flex-shrink: 0;
      padding-right: 4px;
    }
  }
}

.ta-footer {
  background: white;
  padding-left: 105px;

  .ta-footer-input {
    border-radius: unset;
    height: unset;

    max-width: 100%;
    width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    caret-color: rgb(55, 53, 47);
    font-size: 14px;
    line-height: 1.4;
    color: rgba(55, 53, 47, 0.65);
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 2px;
    border-color: transparent !important;
    background-color: #fff;
  }
}

.form-control {
  flex-grow: 1;
  flex-shrink: 1;
  tab-size: 2;
  padding: 34px 16px 32px 32px;
  min-height: 1em;
  color: rgb(55, 53, 47);
  white-space: pre;

  border-radius: 4px;
  position: relative;
  background: rgb(247, 246, 243);
  min-width: 0px;
  width: 100%;
  resize: none;
  border-color: transparent;
}

.main-page__content .form-builder div input {
  border-color: transparent !important;
}
</style>