neisdev · December 19, 2022 10:31
diff --git a/alpine-js-double-click-to-edit.markdown b/alpine-js-double-click-to-edit.markdown
diff --git a/index.html b/index.html
 <div x-data="data()" class="p-4">
    <a @click.prevent @dblclick="toggleEditingState" x-show="!isEditing" x-text="text" class="select-none cursor-pointer underline text-blue-500"></a>
    <input type="text" x-model="text" x-show="isEditing" @click.away="toggleEditingState" @keydown.enter="disableEditing" @keydown.window.escape="disableEditing" class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 appearance-none leading-normal w-128" x-ref="input">
 </div>
diff --git a/script.js b/script.js
 function data() {
    return {
        text: "Example text. Double click to edit",
        isEditing: false,
        toggleEditingState() {
            this.isEditing = !this.isEditing;

            if (this.isEditing) {
                this.$nextTick(() => {
                    this.$refs.input.focus();
                });
            }
        },
        disableEditing() {
            this.isEditing = false;
        }
    };
 }
diff --git a/scripts b/scripts
 <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js"></script>
diff --git a/style.css b/style.css
 .w-128 {
    width: 32rem;
 }
diff --git a/styles b/styles
 <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css" rel="stylesheet" />
	<div x-data="data()" class="p-4">
	<a @click.prevent @dblclick="toggleEditingState" x-show="!isEditing" x-text="text" class="select-none cursor-pointer underline text-blue-500"></a>
	<input type="text" x-model="text" x-show="isEditing" @click.away="toggleEditingState" @keydown.enter="disableEditing" @keydown.window.escape="disableEditing" class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 appearance-none leading-normal w-128" x-ref="input">
	</div>
	function data() {
	return {
	text: "Example text. Double click to edit",
	isEditing: false,
	toggleEditingState() {
	this.isEditing = !this.isEditing;

	if (this.isEditing) {
	this.$nextTick(() => {
	this.$refs.input.focus();
	});
	}
	},
	disableEditing() {
	this.isEditing = false;
	}
	};
	}