Slugy, webp, hromada refaktoringu

src/components/inputs/SlugInput.vue

@@ -0,0 +1,62 @@
+<script setup>
+import {ref, watch} from "vue";
+import {slugify} from "src/composables/slugify";
+
+const props = defineProps({
+  modelValue: {
+    type: String
+  },
+  slugSource: {
+    type: String,
+    required: false,
+  },
+  url : {
+    type: String,
+    required: false,
+    default: null
+  },
+  label: {
+    type: String,
+    required: false,
+    default: "URL"
+  },
+  rules: {
+    type: Array,
+    required: false,
+    default: () => ([])
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+const model = ref("");
+
+const emitValue = (val) => {
+  emit("update:modelValue", val);
+}
+watch(() => model.value, (newVal) => {
+  model.value = slugify(newVal);
+  emitValue(newVal);
+})
+
+
+
+watch(() => props.slugSource, (newVal, oldVal) => {
+  if (model.value === "" || slugify(oldVal) === model.value) {
+    // pokud puvodni vychozi hodnota je stejna jako aktualne nastaveny slug, zmenime model
+    model.value = slugify(newVal);
+  }
+}, {immediate: true});
+</script>
+
+<template>
+  <q-input
+      v-model="model"
+      :label="label"
+      :rules="rules"
+      hint="Veřejná URL adresa"
+   >
+      <template #prepend>
+        {{ url }}
+      </template>
+    </q-input>
+</template>