|
| 1 | +<script setup lang="ts"> |
| 2 | +import type { NewOperation } from '~/composables/useConnector' |
| 3 | +
|
| 4 | +const props = withDefaults( |
| 5 | + defineProps<{ |
| 6 | + packageName: string |
| 7 | + version?: string |
| 8 | + }>(), |
| 9 | + { version: '' }, |
| 10 | +) |
| 11 | +
|
| 12 | +const { t } = useI18n() |
| 13 | +const { isConnected, state, addOperation, approveOperation, executeOperations, refreshState } = |
| 14 | + useConnector() |
| 15 | +
|
| 16 | +const deprecateMessage = ref('') |
| 17 | +const deprecateVersion = ref(props.version) |
| 18 | +const isDeprecating = shallowRef(false) |
| 19 | +const deprecateSuccess = shallowRef(false) |
| 20 | +const deprecateError = shallowRef<string | null>(null) |
| 21 | +
|
| 22 | +const connectorModal = useModal('connector-modal') |
| 23 | +
|
| 24 | +const modalTitle = computed(() => |
| 25 | + deprecateVersion.value |
| 26 | + ? `${$t('package.deprecation.modal.title')} ${props.packageName}@${deprecateVersion.value}` |
| 27 | + : `${$t('package.deprecation.modal.title')} ${props.packageName}`, |
| 28 | +) |
| 29 | +
|
| 30 | +async function handleDeprecate() { |
| 31 | + const message = deprecateMessage.value.trim() |
| 32 | + if (!message || !isConnected.value) return |
| 33 | +
|
| 34 | + isDeprecating.value = true |
| 35 | + deprecateError.value = null |
| 36 | +
|
| 37 | + try { |
| 38 | + const params: Record<string, string> = { |
| 39 | + pkg: props.packageName, |
| 40 | + message, |
| 41 | + } |
| 42 | + if (deprecateVersion.value.trim()) { |
| 43 | + params.version = deprecateVersion.value.trim() |
| 44 | + } |
| 45 | +
|
| 46 | + const command = params.version |
| 47 | + ? `npm deprecate ${props.packageName}@${params.version} "${message}"` |
| 48 | + : `npm deprecate ${props.packageName} "${message}"` |
| 49 | +
|
| 50 | + const operation = await addOperation({ |
| 51 | + type: 'package:deprecate', |
| 52 | + params, |
| 53 | + description: params.version |
| 54 | + ? `Deprecate ${props.packageName}@${params.version}` |
| 55 | + : `Deprecate ${props.packageName}`, |
| 56 | + command, |
| 57 | + } as NewOperation) |
| 58 | +
|
| 59 | + if (!operation) { |
| 60 | + throw new Error('Failed to create operation') |
| 61 | + } |
| 62 | +
|
| 63 | + await approveOperation(operation.id) |
| 64 | + await executeOperations() |
| 65 | + await refreshState() |
| 66 | +
|
| 67 | + const completedOp = state.value.operations.find(op => op.id === operation.id) |
| 68 | + if (completedOp?.status === 'completed') { |
| 69 | + deprecateSuccess.value = true |
| 70 | + } else if (completedOp?.status === 'failed') { |
| 71 | + if (completedOp.result?.requiresOtp) { |
| 72 | + close() |
| 73 | + connectorModal.open() |
| 74 | + } else { |
| 75 | + deprecateError.value = completedOp.result?.stderr || t('deprecate.modal.failed') |
| 76 | + } |
| 77 | + } else { |
| 78 | + close() |
| 79 | + connectorModal.open() |
| 80 | + } |
| 81 | + } catch (err) { |
| 82 | + deprecateError.value = err instanceof Error ? err.message : t('deprecate.modal.failed') |
| 83 | + } finally { |
| 84 | + isDeprecating.value = false |
| 85 | + } |
| 86 | +} |
| 87 | +
|
| 88 | +const dialogRef = ref<HTMLDialogElement>() |
| 89 | +
|
| 90 | +function open() { |
| 91 | + deprecateError.value = null |
| 92 | + deprecateSuccess.value = false |
| 93 | + deprecateMessage.value = '' |
| 94 | + deprecateVersion.value = props.version ?? '' |
| 95 | + dialogRef.value?.showModal() |
| 96 | +} |
| 97 | +
|
| 98 | +function close() { |
| 99 | + dialogRef.value?.close() |
| 100 | +} |
| 101 | +
|
| 102 | +defineExpose({ open, close }) |
| 103 | +</script> |
| 104 | + |
| 105 | +<template> |
| 106 | + <Modal ref="dialogRef" :modal-title="modalTitle" id="deprecate-package-modal" class="max-w-md"> |
| 107 | + <!-- Success state --> |
| 108 | + <div v-if="deprecateSuccess" class="space-y-4"> |
| 109 | + <div |
| 110 | + class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg" |
| 111 | + > |
| 112 | + <span class="i-carbon-checkmark-filled text-green-500 w-6 h-6" aria-hidden="true" /> |
| 113 | + <div> |
| 114 | + <p class="font-mono text-sm text-fg">{{ $t('package.deprecation.modal.success') }}</p> |
| 115 | + <p class="text-xs text-fg-muted"> |
| 116 | + {{ $t('package.deprecation.modal.success_detail') }} |
| 117 | + </p> |
| 118 | + </div> |
| 119 | + </div> |
| 120 | + <button |
| 121 | + type="button" |
| 122 | + class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50" |
| 123 | + @click="close" |
| 124 | + > |
| 125 | + {{ $t('common.close') }} |
| 126 | + </button> |
| 127 | + </div> |
| 128 | + |
| 129 | + <!-- Form (only shown when connected; parent only opens modal when isConnected) --> |
| 130 | + <div v-else class="space-y-4"> |
| 131 | + <div> |
| 132 | + <label for="deprecate-message" class="block text-sm font-medium text-fg mb-1"> |
| 133 | + {{ $t('package.deprecation.modal.reason') }} |
| 134 | + </label> |
| 135 | + <textarea |
| 136 | + id="deprecate-message" |
| 137 | + v-model="deprecateMessage" |
| 138 | + rows="3" |
| 139 | + class="w-full px-3 py-2 font-mono text-sm bg-bg border border-border rounded-md text-fg placeholder:text-fg-muted focus:outline-none focus:ring-2 focus:ring-fg/50" |
| 140 | + :placeholder="$t('package.deprecation.modal.reason_placeholder')" |
| 141 | + /> |
| 142 | + </div> |
| 143 | + <div> |
| 144 | + <label for="deprecate-version" class="block text-sm font-medium text-fg mb-1"> |
| 145 | + {{ $t('package.deprecation.modal.version') }} |
| 146 | + </label> |
| 147 | + <input |
| 148 | + id="deprecate-version" |
| 149 | + v-model="deprecateVersion" |
| 150 | + type="text" |
| 151 | + class="w-full px-3 py-2 font-mono text-sm bg-bg border border-border rounded-md text-fg placeholder:text-fg-muted focus:outline-none focus:ring-2 focus:ring-fg/50" |
| 152 | + :placeholder="$t('package.deprecation.modal.version_placeholder')" |
| 153 | + /> |
| 154 | + </div> |
| 155 | + <div |
| 156 | + v-if="deprecateError" |
| 157 | + role="alert" |
| 158 | + class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md" |
| 159 | + > |
| 160 | + {{ deprecateError }} |
| 161 | + </div> |
| 162 | + <button |
| 163 | + type="button" |
| 164 | + :disabled="isDeprecating || !deprecateMessage.trim()" |
| 165 | + class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50" |
| 166 | + @click="handleDeprecate" |
| 167 | + > |
| 168 | + {{ |
| 169 | + isDeprecating |
| 170 | + ? $t('package.deprecation.modal.deprecating') |
| 171 | + : $t('package.deprecation.action') |
| 172 | + }} |
| 173 | + </button> |
| 174 | + </div> |
| 175 | + </Modal> |
| 176 | +</template> |
0 commit comments