|
| 1 | +<script setup lang="ts"> |
| 2 | +import { computed, ref, toRaw } from 'vue' |
| 3 | +import { VueButton, VueDropdown, VueDropdownButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui' |
| 4 | +import { getRaw } from '@vue/devtools-kit' |
| 5 | +import type { InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit' |
| 6 | +import type { ButtonProps } from '@vue/devtools-ui/dist/types/src/components/Button' |
| 7 | +import { editInspectorState } from '@vue/devtools-core' |
| 8 | +import { useClipboard } from '@vueuse/core' |
| 9 | +import { useStateEditorContext } from '~/composables/state-editor' |
| 10 | +import type { EditorAddNewPropType, EditorInputValidType } from '~/composables/state-editor' |
| 11 | +
|
| 12 | +const props = withDefaults(defineProps<{ |
| 13 | + data: InspectorState |
| 14 | + hovering: boolean |
| 15 | + depth: number |
| 16 | + showAddIfNeeded?: boolean |
| 17 | + disableEdit?: boolean |
| 18 | +}>(), { |
| 19 | + showAddIfNeeded: true, |
| 20 | +}) |
| 21 | +
|
| 22 | +defineEmits<{ |
| 23 | + enableEditInput: [type: EditorInputValidType] |
| 24 | + addNewProp: [type: EditorAddNewPropType] |
| 25 | +}>() |
| 26 | +
|
| 27 | +const state = useStateEditorContext() |
| 28 | +
|
| 29 | +const { copy, isSupported } = useClipboard() |
| 30 | +
|
| 31 | +const popupVisible = ref(false) |
| 32 | +
|
| 33 | +const raw = computed(() => getRaw(props.data.value)) |
| 34 | +const rawValue = computed(() => raw.value.value) |
| 35 | +const customType = computed(() => raw.value.customType) |
| 36 | +const dataType = computed(() => rawValue.value === null ? 'null' : typeof rawValue.value) |
| 37 | +
|
| 38 | +const iconButtonProps = { |
| 39 | + flat: true, |
| 40 | + size: 'mini', |
| 41 | +} satisfies ButtonProps |
| 42 | +
|
| 43 | +const buttonClass = computed(() => ({ |
| 44 | + 'opacity-0': !props.hovering, |
| 45 | +})) |
| 46 | +
|
| 47 | +function quickEdit(v: unknown, remove: boolean = false) { |
| 48 | + editInspectorState({ |
| 49 | + path: props.data.key.split('.'), |
| 50 | + inspectorId: state.value.inspectorId, |
| 51 | + type: props.data.stateType!, |
| 52 | + nodeId: state.value.nodeId, |
| 53 | + state: { |
| 54 | + newKey: null!, |
| 55 | + value: toRaw(v), |
| 56 | + type: dataType.value, |
| 57 | + remove, |
| 58 | + }, |
| 59 | + } satisfies InspectorStateEditorPayload) |
| 60 | +} |
| 61 | +
|
| 62 | +function quickEditNum(v: number | string, offset: 1 | -1) { |
| 63 | + const target = typeof v === 'number' |
| 64 | + ? v + offset |
| 65 | + : BigInt(v) + BigInt(offset) |
| 66 | + quickEdit(target) |
| 67 | +} |
| 68 | +</script> |
| 69 | + |
| 70 | +<template> |
| 71 | + <div class="inline pl5px"> |
| 72 | + <!-- only editable will show operate actions --> |
| 73 | + <template v-if="!props.disableEdit && data.editable"> |
| 74 | + <!-- input edit, number/string/object --> |
| 75 | + <template v-if="dataType === 'string' || dataType === 'number' || dataType === 'object' || dataType === 'null'"> |
| 76 | + <VueButton |
| 77 | + v-tooltip="{ |
| 78 | + content: 'Edit value', |
| 79 | + }" v-bind="iconButtonProps" :class="buttonClass" @click.stop="$emit('enableEditInput', dataType)" |
| 80 | + > |
| 81 | + <template #icon> |
| 82 | + <VueIcon icon="i-material-symbols-edit-rounded" /> |
| 83 | + </template> |
| 84 | + </VueButton> |
| 85 | + <VueButton |
| 86 | + v-if="dataType === 'object' && showAddIfNeeded" |
| 87 | + v-tooltip="{ |
| 88 | + content: 'Add new value', |
| 89 | + }" v-bind="iconButtonProps" :class="buttonClass" @click.stop=" |
| 90 | + $emit('addNewProp', Array.isArray(rawValue) ? 'array' : 'object')" |
| 91 | + > |
| 92 | + <template #icon> |
| 93 | + <VueIcon icon="i-material-symbols-add-circle-rounded" /> |
| 94 | + </template> |
| 95 | + </VueButton> |
| 96 | + </template> |
| 97 | + <!-- checkbox, button value only --> |
| 98 | + <VueButton |
| 99 | + v-if="dataType === 'boolean'" v-bind="iconButtonProps" :class="buttonClass" |
| 100 | + @click="quickEdit(!rawValue)" |
| 101 | + > |
| 102 | + <template #icon> |
| 103 | + <VueIcon :icon="rawValue ? 'i-material-symbols-check-box-sharp' : 'i-material-symbols-check-box-outline-blank-sharp'" /> |
| 104 | + </template> |
| 105 | + </VueButton> |
| 106 | + <!-- increment/decrement button, numeric/bigint --> |
| 107 | + <template v-else-if="dataType === 'number' || customType === 'bigint'"> |
| 108 | + <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEditNum(rawValue as number | string, 1)"> |
| 109 | + <template #icon> |
| 110 | + <VueIcon icon="i-carbon-add" /> |
| 111 | + </template> |
| 112 | + </VueButton> |
| 113 | + <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEditNum(rawValue as number | string, -1)"> |
| 114 | + <template #icon> |
| 115 | + <VueIcon icon="i-carbon-subtract" /> |
| 116 | + </template> |
| 117 | + </VueButton> |
| 118 | + </template> |
| 119 | + </template> |
| 120 | + <!-- delete prop, only appear if depth > 0 --> |
| 121 | + <VueButton v-if="!props.disableEdit && depth > 0" v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEdit(rawValue, true)"> |
| 122 | + <template #icon> |
| 123 | + <VueIcon icon="i-material-symbols-delete-rounded" /> |
| 124 | + </template> |
| 125 | + </VueButton> |
| 126 | + <!-- Copy key/value --> |
| 127 | + <VueDropdown |
| 128 | + :class="{ |
| 129 | + 'opacity-0': !hovering && !popupVisible, |
| 130 | + }" |
| 131 | + :button-props="{ |
| 132 | + flat: true, |
| 133 | + size: 'mini', |
| 134 | + }" |
| 135 | + :disabled="!isSupported" |
| 136 | + @update:visible="v => popupVisible = v" |
| 137 | + > |
| 138 | + <template #popper> |
| 139 | + <div class="w160px py5px"> |
| 140 | + <VueDropdownButton |
| 141 | + @click="copy(typeof rawValue === 'object' ? JSON.stringify(rawValue) : rawValue.toString())" |
| 142 | + > |
| 143 | + <template #icon> |
| 144 | + <VueIcon icon="i-material-symbols-copy-all-rounded" class="mt4px" /> |
| 145 | + Copy Value |
| 146 | + </template> |
| 147 | + </VueDropdownButton> |
| 148 | + <VueDropdownButton |
| 149 | + @click="() => { |
| 150 | + copy(data.key) |
| 151 | + }" |
| 152 | + > |
| 153 | + <template #icon> |
| 154 | + <VueIcon icon="i-material-symbols-copy-all-rounded" class="mt4px" /> |
| 155 | + Copy Path |
| 156 | + </template> |
| 157 | + </VueDropdownButton> |
| 158 | + </div> |
| 159 | + </template> |
| 160 | + <template #button-icon> |
| 161 | + <VueIcon icon="i-material-symbols:more-vert" /> |
| 162 | + </template> |
| 163 | + </VueDropdown> |
| 164 | + </div> |
| 165 | +</template> |
0 commit comments