Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Dialog and Alert Dialog #2

Merged
merged 9 commits into from
Nov 9, 2023
Merged

Feature: Dialog and Alert Dialog #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
11faf9e
feat: add alert dialog
jorenrui Nov 9, 2023
633ca87
refactor: add decimal number checker and add after hook on push token
jorenrui Nov 9, 2023
727101c
refactor: combine whitespace tokens
jorenrui Nov 9, 2023
20f32fc
feat: detect spread / rest operator in lexer
jorenrui Nov 9, 2023
57aa809
feat: detect object keys
jorenrui Nov 9, 2023
b2b5795
feat: check nested objects and escaped strings
jorenrui Nov 9, 2023
049e353
feat: add dialog example
jorenrui Nov 9, 2023
c3dfe15
refactor: rename nextOf and previousOf to nextItem and previousItem
jorenrui Nov 9, 2023
aca1db9
refactor: remove usage of objects
jorenrui Nov 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
370 changes: 366 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -365,8 +365,8 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
:enter="selectedTags = selectedTags.add(selectedTag);
filteredTags = filteredTags.remove(selectedTag);
selectedTag = filteredTags.first"
:keyup.up="selectedTag = filteredTags.previousOf(selectedTag)"
:keyup.down="selectedTag = filteredTags.nextOf(selectedTag)"
:keyup.up="selectedTag = filteredTags.previousItem(selectedTag)"
:keyup.down="selectedTag = filteredTags.nextItem(selectedTag)"
/>

<div :clickout="filteredTags = []; selectedTag = null" :class="filteredTags.length ? '' : 'hidden'" class="bg-white rounded">
Expand Down Expand Up @@ -423,8 +423,8 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
:enter=&quot;selectedTags = selectedTags.add(selectedTag);
filteredTags = filteredTags.remove(selectedTag);
selectedTag = filteredTags.first&quot;
:keyup.up=&quot;selectedTag = filteredTags.previousOf(selectedTag)&quot;
:keyup.down=&quot;selectedTag = filteredTags.nextOf(selectedTag)&quot;
:keyup.up=&quot;selectedTag = filteredTags.previousItem(selectedTag)&quot;
:keyup.down=&quot;selectedTag = filteredTags.nextItem(selectedTag)&quot;
/&gt;

&lt;div :clickout=&quot;filteredTags = []; selectedTag = null&quot; :class=&quot;filteredTags.length ? '' : 'hidden' &quot; class=&quot;bg-white rounded&quot;&gt;
Expand Down Expand Up @@ -512,6 +512,368 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
</section>
</div>
</section>


<section class="p-5 bg-gray-100 mt-10">
<div class="max-w-5xl mx-auto">
<div class="flex items-center justify-between mb-5">
<h3 class="font-bold font-mono">Alert Dialog:</h3>
<button
:click="showCode5 = !showCode5"
class="px-5 py-2 flex items-center bg-white text-xs uppercase font-bold font-mono border shadow rounded-full hover:bg-blue-50"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-4 h-4 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
</svg>
Show Code
</button>
</div>

<div>
<script>
userId = 1;
</script>

<button
type="button"
class="py-1.5 px-3 text-base text-red-700 rounded-lg shadow-sm bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
:class="userId ? '' : 'hidden'"
:click="document.querySelector('#delete-account-dialog').showModal()"
>
Delete Account
</button>

<p class="text-base text-gray-900" :class="userId == null ? '' : 'hidden'">
Your account has been deleted.

<button
type="button"
:click="userId = 1"
class="py-1.5 px-3 text-base text-gray-900 rounded-lg shadow-sm bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
>
Reset
</button>
</p>

<dialog id="delete-account-dialog" class="p-4 rounded-lg max-w-sm">
<form
class="flex flex-col gap-3"
:submit="event.preventDefault();
userId = null;
this.closest('dialog').close()"
>
<h1 class="text-lg text-gray-900 font-bold">
Are you sure you want to delete your account?
</h1>

<p class="text-base text-gray-700">
This action cannot be undone. This will permanently delete your account and remove all your data.
</p>

<div class="flex justify-end gap-2">
<button
type="button"
:click="this.closest('dialog').close()"
class="py-1.5 px-3 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
>
Cancel
</button>
<button
type="submit"
class="py-1.5 px-3 text-base text-red-700 rounded-lg shadow-sm bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
>
Yes, delete my account
</button>
</div>
</form>
</dialog>
</div>

<div :class="showCode5 ? 'block' : 'hidden'">
<pre>
<code class="language-html text-xs overflow-hidden rounded-lg">
&lt;script&gt;
userId = 1;
&lt;/script&gt;

&lt;button
type=&quot;button&quot;
class=&quot;py-1.5 px-3 text-base text-red-700 rounded-lg shadow-sm bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600&quot;
:class=&quot;userId ? '' : 'hidden'&quot;
:click=&quot;document.querySelector('#dialog').showModal()&quot;
&gt;
Delete Account
&lt;/button&gt;

&lt;p class=&quot;text-base text-gray-900&quot; :class=&quot;userId == null ? '' : 'hidden'&quot;&gt;
Your account has been deleted.
&lt;button
type=&quot;button&quot;
:click=&quot;userId = 1&quot;
class=&quot;py-1.5 px-3 text-base text-gray-900 rounded-lg shadow-sm bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600&quot;
&gt;
Reset
&lt;/button&gt;
&lt;/p&gt;

&lt;dialog id=&quot;dialog&quot; class=&quot;p-4 rounded-lg max-w-sm&quot;&gt;
&lt;form
class=&quot;flex flex-col gap-3&quot;
:submit=&quot;event.preventDefault();
userId = null;
this.closest('dialog').close()&quot;
&gt;
&lt;h1 class=&quot;text-lg text-gray-900 font-bold&quot;&gt;
Are you sure you want to delete your account?
&lt;/h1&gt;
&lt;p class=&quot;text-base text-gray-700&quot;&gt;
This action cannot be undone. This will permanently delete your account and remove all your data.
&lt;/p&gt;
&lt;div class=&quot;flex justify-end gap-2&quot;&gt;
&lt;button
type=&quot;button&quot;
:click=&quot;this.closest('dialog').close()&quot;
class=&quot;py-1.5 px-3 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600&quot;
&gt;
Cancel
&lt;/button&gt;
&lt;button
type=&quot;submit&quot;
class=&quot;py-1.5 px-3 text-base text-red-700 rounded-lg shadow-sm bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600&quot;
&gt;
Yes, delete my account
&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/dialog&gt;
</code>
</pre>
</div>
</div>
</section>

<section class="p-5 bg-gray-100 mt-10">
<div class="max-w-5xl mx-auto">
<div class="flex items-center justify-between mb-5">
<h3 class="font-bold font-mono">Dialog:</h3>
<button
:click="showCode6 = !showCode6"
class="px-5 py-2 flex items-center bg-white text-xs uppercase font-bold font-mono border shadow rounded-full hover:bg-blue-50"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-4 h-4 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
</svg>
Show Code
</button>
</div>

<div>
<script>
firstName = 'John';
lastName = 'Doe';
username = 'johndoe';
</script>

<div class="flex flex-col gap-4 max-w-sm">
<div class="flex justify-between gap-4">
<p :text="`Hello ${firstName}`"></p>

<button
id="edit-profile-btn"
type="button"
class="inline-block w-max py-1.5 px-3 text-base text-indigo-700 rounded-lg shadow-sm bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
:click="document.querySelector('#edit-profile-dialog').showModal()"
>
Edit Profile
</button>
</div>

<dl class="grid grid-cols-2 text-sm text-gray-900">
<dt class="font-bold">Your Name:</dt>
<dt :text="firstName + ' ' + lastName"></dt>
<dt class="font-bold">Username:</dt>
<dt :text="username"></dt>
</dl>
</div>

<dialog
id="edit-profile-dialog"
class="rounded-lg max-w-sm"
:click="if (event.target == this) { this.close() }"
>
<form
class="p-4 flex flex-col gap-4"
:submit="event.preventDefault(); this.closest('dialog').close()"
>
<h1 class="text-xl text-gray-900 font-bold">
Edit Profile
</h1>

<div class="flex flex-col gap-2">
<div class="grid grid-cols-3 items-center gap-4">
<label class="text-right text-base">
First Name
</label>
<input
type="text"
name="first_name"
class="col-span-2 py-1.5 px-2 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
:value="firstName"
:change="firstName = this.value"
/>
</div>

<div class="grid grid-cols-3 items-center gap-4">
<label class="text-right text-base">
Last Name
</label>
<input
type="text"
name="last_name"
class="col-span-2 py-1.5 px-2 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
:value="lastName"
:change="lastName = this.value"
/>
</div>

<div class="grid grid-cols-3 items-center gap-4">
<label class="text-right text-base">
Username
</label>
<input
type="text"
name="username"
class="col-span-2 py-1.5 px-2 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
:value="username"
:change="username = this.value"
/>
</div>
</div>

<div class="flex justify-end gap-2">
<button
type="button"
:click="this.closest('dialog').close()"
class="py-1.5 px-3 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
>
Cancel
</button>
<button
type="submit"
class="py-1.5 px-3 text-base text-indigo-700 rounded-lg shadow-sm bg-indigo-100 hover:bg-indigo-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
>
Update Profile
</button>
</div>
</form>
</dialog>
</div>

<div :class="showCode6 ? 'block' : 'hidden'">
<pre>
<code class="language-html text-xs overflow-hidden rounded-lg">
&lt;script&gt;
firstName = 'John';
lastName = 'Doe';
username = 'johndoe';
&lt;/script&gt;

&lt;div class=&quot;flex flex-col gap-4 max-w-sm&quot;&gt;
&lt;div class=&quot;flex justify-between gap-4&quot;&gt;
&lt;p :text=&quot;`Hello ${firstName}`&quot;&gt;&lt;/p&gt;
&lt;button
id=&quot;edit-profile-btn&quot;
type=&quot;button&quot;
class=&quot;inline-block w-max py-1.5 px-3 text-base text-indigo-700 rounded-lg shadow-sm bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600&quot;
:click=&quot;document.querySelector('#edit-profile-dialog').showModal()&quot;
&gt;
Edit Profile
&lt;/button&gt;
&lt;/div&gt;
&lt;dl class=&quot;grid grid-cols-2 text-sm text-gray-900&quot;&gt;
&lt;dt class=&quot;font-bold&quot;&gt;Your Name:&lt;/dt&gt;
&lt;dt :text=&quot;firstName + ' ' + lastName&quot;&gt;&lt;/dt&gt;
&lt;dt class=&quot;font-bold&quot;&gt;Username:&lt;/dt&gt;
&lt;dt :text=&quot;username&quot;&gt;&lt;/dt&gt;
&lt;/dl&gt;
&lt;/div&gt;

&lt;dialog
id=&quot;edit-profile-dialog&quot;
class=&quot;rounded-lg max-w-sm&quot;
:click=&quot;if (event.target == this) { this.close() }&quot;
&gt;
&lt;form
class=&quot;p-4 flex flex-col gap-4&quot;
:submit=&quot;event.preventDefault(); this.closest('dialog').close()&quot;
&gt;
&lt;h1 class=&quot;text-xl text-gray-900 font-bold&quot;&gt;
Edit Profile
&lt;/h1&gt;
&lt;div class=&quot;flex flex-col gap-2&quot;&gt;
&lt;div class=&quot;grid grid-cols-3 items-center gap-4&quot;&gt;
&lt;label class=&quot;text-right text-base&quot;&gt;
First Name
&lt;/label&gt;
&lt;input
type=&quot;text&quot;
name=&quot;first_name&quot;
class=&quot;col-span-2 py-1.5 px-2 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600&quot;
:value=&quot;firstName&quot;
:change=&quot;firstName = this.value&quot;
/&gt;
&lt;/div&gt;
&lt;div class=&quot;grid grid-cols-3 items-center gap-4&quot;&gt;
&lt;label class=&quot;text-right text-base&quot;&gt;
Last Name
&lt;/label&gt;
&lt;input
type=&quot;text&quot;
name=&quot;last_name&quot;
class=&quot;col-span-2 py-1.5 px-2 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600&quot;
:value=&quot;lastName&quot;
:change=&quot;lastName = this.value&quot;
/&gt;
&lt;/div&gt;
&lt;div class=&quot;grid grid-cols-3 items-center gap-4&quot;&gt;
&lt;label class=&quot;text-right text-base&quot;&gt;
Username
&lt;/label&gt;
&lt;input
type=&quot;text&quot;
name=&quot;username&quot;
class=&quot;col-span-2 py-1.5 px-2 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600&quot;
:value=&quot;username&quot;
:change=&quot;username = this.value&quot;
/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;flex justify-end gap-2&quot;&gt;
&lt;button
type=&quot;button&quot;
:click=&quot;this.closest('dialog').close()&quot;
class=&quot;py-1.5 px-3 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600&quot;
&gt;
Cancel
&lt;/button&gt;
&lt;button
type=&quot;submit&quot;
class=&quot;py-1.5 px-3 text-base text-indigo-700 rounded-lg shadow-sm bg-indigo-100 hover:bg-indigo-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600&quot;
&gt;
Update Profile
&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/dialog&gt;
</code>
</pre>
</div>
</div>
</section>
</body>

</html>
Loading