Squashed commit message

frontend/admin/src/components/Slider/LinkSelector.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div>
+      <select v-model="link.type" class="form-control link-type-select" @change="link.value = null">
+        <option value="none">Нет ссылки</option>
+        <option value="category">Ссылка на категорию</option>
+        <option value="product">Ссылка на товар</option>
+        <option value="url">Внешняя ссылка</option>
+      </select>
+    </div>
+
+    <div v-if="link.type === 'url'" class="mt-10">
+      <input
+        :value="link.value?.url"
+        @input="setLink($event.target.value)"
+        type="text"
+        placeholder="https://example.com"
+        class="form-control"
+      />
+    </div>
+
+    <div v-else-if="link.type === 'category'" class="mt-10">
+      <CategorySelect v-model="link.value"/>
+    </div>
+
+    <div v-else-if="link.type === 'product'" class="mt-10">
+      <ProductSelect v-model="link.value"/>
+    </div>
+
+    <div v-else-if="link.type === 'none'"></div>
+
+    <div v-else class="alert alert-danger">Не поддерживается: {{ link.type }}</div>
+  </div>
+</template>
+
+<script setup>
+import CategorySelect from "@/components/Slider/CategorySelect.vue";
+import ProductSelect from "@/components/Slider/ProductSelect.vue";
+
+const link = defineModel();
+
+function setLink(value) {
+  if (link.value?.value) {
+    link.value.value.url = value;
+  } else {
+    link.value.value = { url: value };
+  }
+}
+</script>
+
+<style scoped>
+.link-type-select {
+  cursor: pointer;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+</style>