feat: article editor core

web/src/components/PublishControl.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		online: boolean
+		dirty: boolean
+		pending?: string
+		disabled?: boolean
+		hideIcon?: boolean
+	}>(),
+	{
+		pending: undefined,
+		disabled: false,
+		hideIcon: false,
+	},
+)
+
+defineEmits<{ publish: []; unpublish: [] }>()
+
+const label = computed(() => {
+	if (props.pending) {
+		return props.pending
+	}
+	if (props.online) {
+		return 'Unpublish'
+	}
+	if (props.dirty) {
+		return 'Save and publish'
+	}
+	return 'Publish'
+})
+
+const icon = computed(() => {
+	if (props.hideIcon) {
+		return undefined
+	}
+	if (props.online) {
+		return 'i-lucide-globe-lock'
+	}
+	return 'i-lucide-globe'
+})
+
+const variant = computed(() => (props.online ? 'outline' : 'solid'))
+</script>
+
+<template>
+	<UButton
+		:color="online ? 'neutral' : 'primary'"
+		:variant="variant"
+		:icon="icon"
+		:disabled="disabled"
+		:loading="Boolean(pending)"
+		@click="online ? $emit('unpublish') : $emit('publish')"
+	>
+		{{ label }}
+	</UButton>
+</template>