|
|
@@ -1,131 +1,135 @@ |
|
|
@verbatim |
|
|
<div class="group flex items-center"> |
|
|
<a |
|
|
:style="`margin-left: ${singleData.depth}px;`" |
|
|
@click="alpineState.toggleDataAttribute(singleData)" |
|
|
class="block px-1 rounded hover:bg-blue-100" |
|
|
:class="{ |
|
|
'cursor-pointer': singleData.hasArrow |
|
|
}" |
|
|
x-show="singleData.depth === 0 || singleData.isOpened" |
|
|
> |
|
|
<h5 data-testid="data-property" class="flex items-center relative pl-3 leading-6 text-sm whitespace-nowrap"> |
|
|
<div class="absolute left-0 h-full flex items-center"> |
|
|
<template x-if="singleData.depth === 0 || singleData.isOpened"> |
|
|
<a |
|
|
:style="`margin-left: ${singleData.depth}px;`" |
|
|
@click="alpineState.toggleDataAttribute(singleData)" |
|
|
class="block px-1 rounded hover:bg-blue-100" |
|
|
:class="{ |
|
|
'cursor-pointer': singleData.hasArrow |
|
|
}" |
|
|
> |
|
|
<h5 data-testid="data-property" class="flex items-center relative pl-3 leading-6 text-sm whitespace-nowrap"> |
|
|
<div class="absolute left-0 h-full flex items-center"> |
|
|
<template x-if="singleData.hasArrow"> |
|
|
<span |
|
|
class="arrow" |
|
|
:data-testid="singleData.isArrowDown ? 'arrow-down' : 'arrow-right'" |
|
|
:class="{ |
|
|
'right': !singleData.isArrowDown, |
|
|
'down': singleData.isArrowDown |
|
|
}" |
|
|
></span> |
|
|
</template> |
|
|
</div> |
|
|
|
|
|
<span |
|
|
x-show="singleData.hasArrow" |
|
|
class="arrow" |
|
|
:data-testid="singleData.isArrowDown ? 'arrow-down' : 'arrow-right'" |
|
|
:class="{ |
|
|
'right': !singleData.isArrowDown, |
|
|
'down': singleData.isArrowDown |
|
|
}" |
|
|
class="text-purple" |
|
|
x-text="singleData.attributeName" |
|
|
:data-testid="`data-property-name-${singleData.attributeName}`" |
|
|
></span> |
|
|
</div> |
|
|
|
|
|
<span |
|
|
class="text-purple" |
|
|
x-text="singleData.attributeName" |
|
|
:data-testid="`data-property-name-${singleData.attributeName}`" |
|
|
></span> |
|
|
<span class="text-black">:</span> |
|
|
|
|
|
<span class="text-black">:</span> |
|
|
<div |
|
|
:data-testid="`data-property-value-${singleData.attributeName}`" |
|
|
class="text-black ml-1" |
|
|
x-show="!singleData.inEditingMode" |
|
|
> |
|
|
<template x-if="singleData.dataType === 'string'"> |
|
|
<div> |
|
|
"<span class="text-red-700" x-text="singleData.attributeValue"></span>" |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
<div |
|
|
:data-testid="`data-property-value-${singleData.attributeName}`" |
|
|
class="text-black ml-1" |
|
|
x-show="!singleData.inEditingMode" |
|
|
> |
|
|
<template x-if="singleData.dataType === 'string'"> |
|
|
<div> |
|
|
"<span class="text-red-700" x-text="singleData.attributeValue"></span>" |
|
|
</div> |
|
|
</template> |
|
|
<template x-if="singleData.dataType === 'boolean'"> |
|
|
<div class="flex items-center"> |
|
|
<span |
|
|
class="block pr-1 text-blue-700 cursor-pointer" |
|
|
x-text="singleData.attributeValue" |
|
|
@click="singleData.editAttributeValue = !singleData.editAttributeValue; alpineState.saveEditing(singleData)" |
|
|
></span> |
|
|
|
|
|
<template x-if="singleData.dataType === 'boolean'"> |
|
|
<div class="flex items-center"> |
|
|
<span |
|
|
class="block pr-1 text-blue-700 cursor-pointer" |
|
|
x-text="singleData.attributeValue" |
|
|
@click="singleData.editAttributeValue = !singleData.editAttributeValue, $nextTick(() => alpineState.saveEditing(singleData))" |
|
|
></span> |
|
|
|
|
|
<input |
|
|
type="checkbox" |
|
|
x-model="singleData.editAttributeValue" |
|
|
@change.stop="$nextTick(() => alpineState.saveEditing(singleData))" |
|
|
class="focus:ring-transparent h-4 w-4 text-blue-700 border-gray-300 cursor-pointer rounded transition duration-150 ease-in-out opacity-0 group-hover:opacity-100" |
|
|
/> |
|
|
</div> |
|
|
</template> |
|
|
<input |
|
|
type="checkbox" |
|
|
x-model="singleData.editAttributeValue" |
|
|
@change.stop="alpineState.saveEditing(singleData)" |
|
|
class="focus:ring-transparent h-4 w-4 text-blue-700 border-gray-300 cursor-pointer rounded transition duration-150 ease-in-out opacity-0 group-hover:opacity-100" |
|
|
/> |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
<template x-if="!['string', 'boolean'].includes(singleData.dataType)"> |
|
|
<a |
|
|
:href="singleData.attributeValue === 'Unserializable Value' ? 'https://github.com/alpine-collective/alpinejs-devtools/discussions/new' : null " |
|
|
:title="singleData.attributeValue === 'Unserializable Value' ? 'Click to report this unserializable value' : null" |
|
|
x-text="singleData.attributeValue" |
|
|
></a> |
|
|
</template> |
|
|
</div> |
|
|
</h5> |
|
|
</a> |
|
|
<template x-if="!['string', 'boolean'].includes(singleData.dataType)"> |
|
|
<a |
|
|
:href="singleData.attributeValue === 'Unserializable Value' ? 'https://github.com/alpine-collective/alpinejs-devtools/discussions/new' : null " |
|
|
:title="singleData.attributeValue === 'Unserializable Value' ? 'Click to report this unserializable value' : null" |
|
|
x-text="singleData.attributeValue" |
|
|
></a> |
|
|
</template> |
|
|
</div> |
|
|
</h5> |
|
|
</a> |
|
|
</template> |
|
|
|
|
|
<div |
|
|
class="flex flex-col" |
|
|
x-show="!singleData.hasArrow && !singleData.readOnly && (singleData.depth === 0 || singleData.isOpened)" |
|
|
> |
|
|
<svg |
|
|
fill="currentColor" |
|
|
x-show="!singleData.inEditingMode && singleData.dataType !== 'boolean'" |
|
|
:data-testid="`edit-icon-${singleData.attributeName}`" |
|
|
@click="alpineState.editAttribute(singleData)" |
|
|
viewBox="0 0 20 20" |
|
|
class="w-4 h-4 cursor-pointer opacity-0 group-hover:opacity-100 hover:opacity-75" |
|
|
<template x-if="!singleData.hasArrow && !singleData.readOnly && (singleData.depth === 0 || singleData.isOpened)"> |
|
|
<div |
|
|
class="flex flex-col" |
|
|
> |
|
|
<path |
|
|
d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" |
|
|
></path> |
|
|
</svg> |
|
|
|
|
|
<template x-if="singleData.dataType !== 'boolean'"> |
|
|
<div x-show="singleData.inEditingMode" class="flex flex-row items-center"> |
|
|
<input |
|
|
@keydown.enter.stop="alpineState.saveEditing(singleData)" |
|
|
@keydown.escape.stop="alpineState.cancelEditing(singleData)" |
|
|
class="flex text-gray-700 leading-tight focus:outline-none focus:ring w-2/3 shadow appearance-none border rounded py-1 px-1" |
|
|
:type="singleData.inputType" |
|
|
:data-testid="`input-${singleData.attributeName}`" |
|
|
x-model="singleData.editAttributeValue" |
|
|
/> |
|
|
|
|
|
<template x-if="!singleData.inEditingMode && singleData.dataType !== 'boolean'"> |
|
|
<svg |
|
|
fill="currentColor" |
|
|
data-testid="save-icon" |
|
|
@click="alpineState.saveEditing(singleData)" |
|
|
:data-testid="`edit-icon-${singleData.attributeName}`" |
|
|
@click="alpineState.editAttribute(singleData)" |
|
|
viewBox="0 0 20 20" |
|
|
class="flex w-5 h-5 cursor-pointer ml-2 hover:opacity-75" |
|
|
class="w-4 h-4 cursor-pointer opacity-0 group-hover:opacity-100 hover:opacity-75" |
|
|
> |
|
|
<path |
|
|
fill-rule="evenodd" |
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" |
|
|
clip-rule="evenodd" |
|
|
d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" |
|
|
></path> |
|
|
</svg> |
|
|
</template> |
|
|
|
|
|
<svg |
|
|
fill="currentColor" |
|
|
data-testid="cancel-icon" |
|
|
@click="alpineState.cancelEditing(singleData)" |
|
|
viewBox="0 0 20 20" |
|
|
class="flex w-5 h-5 ml-1 cursor-pointer hover:opacity-75" |
|
|
> |
|
|
<path |
|
|
fill-rule="evenodd" |
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" |
|
|
clip-rule="evenodd" |
|
|
></path> |
|
|
</svg> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
<template x-if="singleData.dataType !== 'boolean'"> |
|
|
<div x-show="singleData.inEditingMode" class="flex flex-row items-center"> |
|
|
<input |
|
|
@keydown.enter.stop="alpineState.saveEditing(singleData)" |
|
|
@keydown.escape.stop="alpineState.cancelEditing(singleData)" |
|
|
class="flex text-gray-700 leading-tight focus:outline-none focus:ring w-2/3 shadow appearance-none border rounded py-1 px-1" |
|
|
:type="singleData.inputType" |
|
|
:data-testid="`input-${singleData.attributeName}`" |
|
|
x-model="singleData.editAttributeValue" |
|
|
/> |
|
|
|
|
|
<svg |
|
|
fill="currentColor" |
|
|
data-testid="save-icon" |
|
|
@click="alpineState.saveEditing(singleData)" |
|
|
viewBox="0 0 20 20" |
|
|
class="flex w-5 h-5 cursor-pointer ml-2 hover:opacity-75" |
|
|
> |
|
|
<path |
|
|
fill-rule="evenodd" |
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" |
|
|
clip-rule="evenodd" |
|
|
></path> |
|
|
</svg> |
|
|
|
|
|
<svg |
|
|
fill="currentColor" |
|
|
data-testid="cancel-icon" |
|
|
@click="alpineState.cancelEditing(singleData)" |
|
|
viewBox="0 0 20 20" |
|
|
class="flex w-5 h-5 ml-1 cursor-pointer hover:opacity-75" |
|
|
> |
|
|
<path |
|
|
fill-rule="evenodd" |
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" |
|
|
clip-rule="evenodd" |
|
|
></path> |
|
|
</svg> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
@endverbatim |