Replies: 3 comments
-
I just re-created it if anyone cares, multiple isnt done yet but thats easy import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
import SlimSelect from "slim-select"
export default {
name: "InputAutocomplete",
template: `
<select ref="select" />
`,
props: {
modelValue: {
type: String,
default: "",
},
data: {
type: Array,
default: () => ([]),
},
valueKey: {
type: String,
default: "id",
},
textKey: {
type: String,
default: "name",
},
placeholder: {
type: String,
default: "Search",
},
},
emits: ["update:modelValue"],
setup(props, { emit }) {
const { data, modelValue, placeholder, textKey, valueKey } = toRefs(props);
const slim = ref(null);
const select = ref(null);
const afterChange = value => {
// TODO: implement multiple select
const [first] = value;
emit("update:modelValue", first.value);
};
const transformedData = computed(() => {
return data.value.map(item => ({
value: item[valueKey.value],
text: item[textKey.value],
}));
});
onMounted(() => {
slim.value = new SlimSelect({
select: select.value,
placeholder: placeholder.value,
events: {
afterChange,
},
});
watch(transformedData, () => {
slim.value.setData(transformedData.value);
}, { immediate: true });
watch([transformedData, modelValue], () => {
slim.value.setSelected(modelValue.value);
}, { immediate: true });
});
onBeforeUnmount(() => {
if (slim.value) {
slim.value.destroy();
}
});
return {
select,
};
},
}; |
Beta Was this translation helpful? Give feedback.
-
There is a vue component in the package. Are you not able to npm install it? Im open to adjusting any import stuff. But I have done a couple back and fourth and seems like people still have issues. |
Beta Was this translation helpful? Give feedback.
-
I dont have a built process because im just using the ESM version. Its just the esm specific version where i dont see vue published anywhere with that said i just rebuilt it myself in vue |
Beta Was this translation helpful? Give feedback.
-
Im new to importmaps and even with the ES version seems to not be workin
import SlimSelect from "slim-select"
"https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.es.min.js"
Beta Was this translation helpful? Give feedback.
All reactions