Add pre-selected option to selecto?

[quankhuc]

Environments

• Framework name: NuxtJS
• Framework version: Nuxt 3
• Component name: vue3-selecto
• Component version: 1.8.2
• Testable Address(optional): nuxt-catoptric-project.vercel.app

Description

I wonder if there is a way I can pass in an array of the coordinate of each box and have it to be pre-selected. For example, if I have a selection area of 10 boxes, I could target a box with its id and make it to be selected. As I look at the documentation, I don't think this option is available yet.

For example, I can configure selecto so that the box "1" to be already selected at the beginning.

Thank you for making such an awesome package so far.

[daybrush]

@quankhuc

selecto has setSelectedTargets method.

If you want it to be preselected, call setSelectedTargetes(pre-selected-targetes);.

[quankhuc]

Would you mind providing a snippet of how you hook it up in Selecto component? Thank you!

[quankhuc]

I actually could not use the setSelectedTargers() so I decided to add selected class into the div by myself. Here is how I did it if you are curious: https://github.com/quankhuc/nuxt-catoptric-project/blob/1ffef115505992475e17f352da6f3c1be4907d22/components/Dashboard/PanelModal.vue#L205

[daybrush]

@quankhuc

I used setSelectedTargets like this:

<script setup lang="ts">
import { onMounted, ref } from "vue";
import Selecto from "vue3-selecto";
import { SelectedTargets } from "selecto";

const selecto = ref<Selecto>();

function onSelect(e: SelectedTargets) {
  console.log(e);
  e.added.forEach(el => {
    el.style.background = "#f55";
  });
  e.removed.forEach(el => {
    el.style.background = "transparent";
  });
}
onMounted(() => {
  const result = selecto.value!.setSelectedTargets([document.querySelector("img")!]);

  onSelect(result);
});

const dragContainer = typeof window !== "undefined" && window as Window;
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <Selecto ref="selecto" @select-end="onSelect" :drag-container="dragContainer" :selectable-targets="['img']"/>
</template>