@nextcloud/vue/dist/chunks/NcEllipsisedOption-dT-CtXYp.mjs

Nextcloud vue components

import '../assets/NcEllipsisedOption-CPWbbgBy.css';
import { _ as _sfc_main$1, f as findRanges } from "./NcHighlight.vue_vue_type_script_lang-DnWQDM_2.mjs";
import { resolveComponent, createElementBlock, openBlock, createVNode, createBlock, createCommentVNode } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _sfc_main = {
  name: "NcEllipsisedOption",
  components: {
    NcHighlight: _sfc_main$1
  },
  props: {
    /**
     * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.
     */
    name: {
      type: String,
      default: ""
    },
    /**
     * The search value to highlight in the text
     */
    search: {
      type: String,
      default: ""
    }
  },
  computed: {
    needsTruncate() {
      return this.name && this.name.length >= 10;
    },
    /**
     * Index at which to split the name if it is longer than 10 characters.
     *
     * @return {number} The position at which to split
     */
    split() {
      return this.name.length - Math.min(Math.floor(this.name.length / 2), 10);
    },
    part1() {
      if (this.needsTruncate) {
        return this.name.slice(0, this.split);
      }
      return this.name;
    },
    part2() {
      if (this.needsTruncate) {
        return this.name.slice(this.split);
      }
      return "";
    },
    /**
     * The ranges to highlight. Since we split the string for ellipsising,
     * the Highlight component cannot figure this out itself and needs the ranges provided.
     *
     * @return {Array} The array with the ranges to highlight
     */
    highlight1() {
      if (!this.search) {
        return [];
      }
      return findRanges(this.name, this.search);
    },
    /**
     * We shift the ranges for the second part by the position of the split.
     * Ranges out of the string length are discarded by the Highlight component,
     * so we don't need to take care of this here.
     *
     * @return {Array} The array with the ranges to highlight
     */
    highlight2() {
      return this.highlight1.map((range) => {
        return {
          start: range.start - this.split,
          end: range.end - this.split
        };
      });
    }
  }
};
const _hoisted_1 = ["title"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_NcHighlight = resolveComponent("NcHighlight");
  return openBlock(), createElementBlock("span", {
    dir: "auto",
    class: "name-parts",
    title: $props.name
  }, [
    createVNode(_component_NcHighlight, {
      class: "name-parts__first",
      text: $options.part1,
      search: $props.search,
      highlight: $options.highlight1
    }, null, 8, ["text", "search", "highlight"]),
    $options.part2 ? (openBlock(), createBlock(_component_NcHighlight, {
      key: 0,
      class: "name-parts__last",
      text: $options.part2,
      search: $props.search,
      highlight: $options.highlight2
    }, null, 8, ["text", "search", "highlight"])) : createCommentVNode("", true)
  ], 8, _hoisted_1);
}
const NcEllipsisedOption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a612f185"]]);
export {
  NcEllipsisedOption as N
};
//# sourceMappingURL=NcEllipsisedOption-dT-CtXYp.mjs.map