65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
Vue
<script setup>
|
|
import {useQuasar} from "quasar";
|
|
import {ref, watch} from "vue";
|
|
import {slugify} from "src/composables/slugify";
|
|
|
|
const props = defineProps({
|
|
requireUrlSlug: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isPublic: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
urlPrefix: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emits = defineEmits(["changeVisibility"]);
|
|
|
|
const $q = useQuasar();
|
|
const urlSlugModel = ref("");
|
|
watch(() => urlSlugModel.value, (newVal) => {
|
|
const slug = slugify(newVal);
|
|
|
|
if (urlSlugModel.value !== slug)
|
|
urlSlugModel.value = slug;
|
|
})
|
|
const inputPrompt = () =>
|
|
$q.dialog({
|
|
title: 'URL',
|
|
message: props.urlPrefix+"...",
|
|
prompt: {
|
|
model: urlSlugModel,
|
|
placeholder: "URL fragment",
|
|
isValid: val => val.length > 1,
|
|
type: 'text' // optional
|
|
},
|
|
cancel: true,
|
|
persistent: true
|
|
})
|
|
|
|
|
|
const togglePublicVisibility = () => {
|
|
if (props.requireUrlSlug && !props.isPublic) {
|
|
inputPrompt().onOk((data) => {
|
|
emits("changeVisibility", {isPublic: !props.isPublic, urlSlug: slugify(urlSlugModel.value)});
|
|
})
|
|
} else {
|
|
emits("changeVisibility", {isPublic: !props.isPublic});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-btn
|
|
@click="togglePublicVisibility"
|
|
:icon="isPublic ? 'visibility_off' : 'visibility'"
|
|
flat
|
|
:label="isPublic ? 'Skrýt' : 'Zveřejnit'"
|
|
/>
|
|
</template>
|