@kubex/zinc 1.0.25 → 1.0.99

package/docs/pages/components/inline-edit.md

@@ -1,41 +1,809 @@
 ---
 meta:
   title: Inline Edit
-  description:
+  description: Inline edit allows users to edit content directly in place, switching between view and edit modes.
 layout: component
 ---
 
+Inline edit components provide a seamless way for users to edit content without leaving the current context or
+navigating to a separate form. They display content normally and reveal input controls when the user clicks an edit
+button or the content area itself.
+
 ```html:preview
+<div class="form-spacing">
+  <zn-inline-edit name="title" value="Click edit to change this text" placeholder="Enter title"></zn-inline-edit>
 
-<zn-sp>
-  <form action="#" method="get">
-    <zn-inline-edit caption="Something" name="something" value="Awesome" edit-text="Edit"></zn-inline-edit>
-  </form>
-  <zn-inline-edit caption="Something" value="1" action="#" method="GET"
-                  options="{&quot;1&quot;: &quot;Option 1&quot;,&quot;2&quot;: &quot;Option 2&quot;}">
+  <zn-inline-edit name="description" value="This example uses a textarea input type" input-type="textarea" placeholder="Enter description"></zn-inline-edit>
+
+  <zn-inline-edit
+    name="status"
+    value="active"
+    options='{"active": "Active", "inactive": "Inactive", "pending": "Pending"}'>
   </zn-inline-edit>
-  <zn-inline-edit provider="color" caption="Something" name="something" value="gb" edit-text="Edit"></zn-inline-edit>
-</zn-sp>
+</div>
 ```
 
+:::tip
+This component works with standard `<form>` elements. Please refer to the section
+on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
+:::
+
 ## Examples
 
-### Inline Example
+### Basic Text Input
+
+The default input type is text. Click the edit button to activate edit mode.
 
 ```html:preview
+<div class="form-spacing">
+  <zn-inline-edit name="username" value="john.doe" placeholder="Enter username"></zn-inline-edit>
 
-<zn-sp>
-  <form action="#" method="get">
-    <zn-inline-edit caption="Something" name="something" value="Awesome" inline></zn-inline-edit>
-  </form>
-  <zn-inline-edit caption="Something" value="1" action="#" method="GET" inline
-                  options="{&quot;1&quot;: &quot;Option 1&quot;,&quot;2&quot;: &quot;Option 2&quot;}">
+  <zn-inline-edit name="email" value="john.doe@example.com" placeholder="Enter email"></zn-inline-edit>
+</div>
+```
+
+### Custom Edit Button Text
+
+Use the `edit-text` attribute to customize the edit button text instead of showing the default edit icon.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit name="title" value="Custom edit button" edit-text="Edit"></zn-inline-edit>
+
+  <zn-inline-edit name="description" value="Another example" edit-text="Modify"></zn-inline-edit>
+</div>
+```
+
+### Textarea Input Type
+
+Use `input-type="textarea"` for multi-line text content.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="bio"
+    value="This is a longer piece of text that spans multiple lines. Click edit to modify this content in a textarea."
+    input-type="textarea"
+    placeholder="Enter your bio">
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="notes"
+    value="Short note"
+    input-type="textarea"
+    edit-text="Edit notes">
+  </zn-inline-edit>
+</div>
+```
+
+### Number Input Type
+
+Use `input-type="number"` for numeric values.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="quantity"
+    value="42"
+    input-type="number"
+    placeholder="Enter quantity">
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="price"
+    value="99.99"
+    input-type="number"
+    edit-text="Edit price">
+  </zn-inline-edit>
+</div>
+```
+
+### Select Input with Options
+
+Provide an `options` object to automatically create a select input. The object uses values as keys and labels as values.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="status"
+    value="active"
+    options='{"active": "Active", "inactive": "Inactive", "pending": "Pending", "archived": "Archived"}'>
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="priority"
+    value="medium"
+    edit-text="Change"
+    options='{"low": "Low Priority", "medium": "Medium Priority", "high": "High Priority", "urgent": "Urgent"}'>
+  </zn-inline-edit>
+</div>
+```
+
+### Searchable Select
+
+Add the `search` attribute to enable filtering on select inputs. Users can type to narrow down the list of options.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="country"
+    value="us"
+    input-type="select"
+    search>
+    <zn-option value="au">Australia</zn-option>
+    <zn-option value="br">Brazil</zn-option>
+    <zn-option value="ca">Canada</zn-option>
+    <zn-option value="fr">France</zn-option>
+    <zn-option value="de">Germany</zn-option>
+    <zn-option value="in">India</zn-option>
+    <zn-option value="jp">Japan</zn-option>
+    <zn-option value="mx">Mexico</zn-option>
+    <zn-option value="uk">United Kingdom</zn-option>
+    <zn-option value="us">United States</zn-option>
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="department"
+    value="engineering"
+    search
+    options='{"engineering": "Engineering", "design": "Design", "marketing": "Marketing", "sales": "Sales", "finance": "Finance", "hr": "Human Resources", "legal": "Legal", "operations": "Operations"}'>
+  </zn-inline-edit>
+</div>
+```
+
+### Data Select with Provider
+
+Use the `provider` attribute to integrate with data select providers like countries, currencies, or colors.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="country"
+    value="gb"
+    provider="country"
+    edit-text="Change country">
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="currency"
+    value="usd"
+    provider="currency">
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="color"
+    value="blue"
+    provider="color"
+    edit-text="Pick color">
+  </zn-inline-edit>
+</div>
+```
+
+### Data Select with Icon Position
+
+When using a data select provider, you can control the icon position with the `icon-position` attribute.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="country"
+    value="us"
+    provider="country"
+    icon-position="start">
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="country2"
+    value="fr"
+    provider="country"
+    icon-position="end">
+  </zn-inline-edit>
+</div>
+```
+
+### Help Text
+
+Add descriptive help text to guide users with the `help-text` attribute. The help text appears below the input when in
+edit mode.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="username"
+    value="john_doe"
+    help-text="Username must be lowercase with no spaces"
+    placeholder="Enter username">
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="slug"
+    value="my-page-title"
+    help-text="Use hyphens to separate words"
+    input-type="text"
+    edit-text="Edit slug">
+  </zn-inline-edit>
+</div>
+```
+
+### Placeholders
+
+Use the `placeholder` attribute to show placeholder text when the value is empty.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="title"
+    value=""
+    placeholder="Click edit to add a title">
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="description"
+    value=""
+    input-type="textarea"
+    placeholder="Add a description..."
+    edit-text="Add">
+  </zn-inline-edit>
+</div>
+```
+
+### Required Fields
+
+Use the `required` attribute to make the field required for form submission.
+
+```html:preview
+<form class="inline-edit-form">
+  <div class="form-spacing">
+    <zn-inline-edit
+      name="firstName"
+      value=""
+      required
+      placeholder="First name (required)"
+      help-text="This field is required">
+    </zn-inline-edit>
+
+    <zn-inline-edit
+      name="lastName"
+      value=""
+      required
+      placeholder="Last name (required)"
+      edit-text="Edit">
+    </zn-inline-edit>
+
+    <zn-button type="submit" variant="primary">Submit Form</zn-button>
+  </div>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.inline-edit-form');
+
+  await customElements.whenDefined('zn-button');
+  await customElements.whenDefined('zn-inline-edit');
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData);
+    alert('Form submitted!\n\n' + JSON.stringify(data, null, 2));
+  });
+</script>
+```
+
+### Pattern Validation
+
+Use the `pattern` attribute to validate input against a regular expression.
+
+```html:preview
+<form class="pattern-form">
+  <div class="form-spacing">
+    <zn-inline-edit
+      name="zipCode"
+      value="12345"
+      pattern="[0-9]{5}"
+      help-text="Must be a 5-digit ZIP code">
+    </zn-inline-edit>
+
+    <zn-inline-edit
+      name="productCode"
+      value="ABC-123"
+      pattern="[A-Z]{3}-[0-9]{3}"
+      help-text="Format: ABC-123"
+      edit-text="Edit">
+    </zn-inline-edit>
+
+    <zn-button type="submit" variant="primary">Validate</zn-button>
+  </div>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.pattern-form');
+
+  await customElements.whenDefined('zn-button');
+  await customElements.whenDefined('zn-inline-edit');
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    if (form.checkValidity()) {
+      alert('All fields are valid!');
+    }
+  });
+</script>
+```
+
+### Sizes
+
+Use the `size` attribute to change the inline edit size. Available sizes are `small`, `medium` (default), and `large`.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="small"
+    value="Small size"
+    size="small">
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="medium"
+    value="Medium size (default)"
+    size="medium">
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="large"
+    value="Large size"
+    size="large">
+  </zn-inline-edit>
+</div>
+```
+
+### Disabled State
+
+Use the `disabled` attribute to disable the inline edit component.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="disabled1"
+    value="This field is disabled"
+    disabled>
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="disabled2"
+    value="Cannot edit this"
+    disabled
+    edit-text="Edit">
+  </zn-inline-edit>
+</div>
+```
+
+### Inline Layout
+
+Use the `inline` attribute to display the inline edit component in a more compact, inline layout.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="title"
+    value="Inline layout example"
+    inline>
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="status"
+    value="active"
+    inline
+    options='{"active": "Active", "inactive": "Inactive"}'>
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="description"
+    value="Short description"
+    input-type="textarea"
+    inline
+    edit-text="Edit">
+  </zn-inline-edit>
+</div>
+```
+
+### Padded Layout
+
+Use the `padded` attribute to add padding around the component.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="padded1"
+    value="This has padding"
+    padded>
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="padded2"
+    value="Another padded example"
+    padded
+    edit-text="Edit">
+  </zn-inline-edit>
+</div>
+```
+
+### Text Direction
+
+Use the `dir` attribute to control text direction. Useful for right-to-left languages.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    name="rtl"
+    value="مرحبا بك"
+    dir="rtl"
+    placeholder="أدخل النص">
+  </zn-inline-edit>
+
+  <zn-inline-edit
+    name="ltr"
+    value="Hello world"
+    dir="ltr"
+    placeholder="Enter text">
+  </zn-inline-edit>
+</div>
+```
+
+### Form Integration
+
+Inline edit components work seamlessly with standard HTML forms. Multiple inline edits can be used together in a form.
+
+```html:preview
+<form id="profile-form">
+  <div class="form-spacing">
+    <zn-inline-edit
+      name="fullName"
+      value="John Doe"
+      required
+      placeholder="Full name"
+      help-text="Your full legal name">
+    </zn-inline-edit>
+
+    <zn-inline-edit
+      name="jobTitle"
+      value="Senior Developer"
+      placeholder="Job title">
+    </zn-inline-edit>
+
+    <zn-inline-edit
+      name="department"
+      value="engineering"
+      options='{"engineering": "Engineering", "design": "Design", "marketing": "Marketing", "sales": "Sales"}'>
+    </zn-inline-edit>
+
+    <zn-inline-edit
+      name="location"
+      value="us"
+      provider="country"
+      icon-position="start">
+    </zn-inline-edit>
+
+    <zn-inline-edit
+      name="bio"
+      value="I love building great software and working with talented teams."
+      input-type="textarea"
+      placeholder="Short bio">
+    </zn-inline-edit>
+
+    <zn-button type="submit" variant="primary">Save Profile</zn-button>
+    <zn-button type="reset">Reset</zn-button>
+  </div>
+</form>
+
+<script type="module">
+  const form = document.getElementById('profile-form');
+
+  await customElements.whenDefined('zn-button');
+  await customElements.whenDefined('zn-inline-edit');
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData);
+    alert('Profile saved!\n\n' + JSON.stringify(data, null, 2));
+  });
+</script>
+```
+
+### Keyboard Interactions
+
+The inline edit component supports several keyboard interactions for better accessibility:
+
+- **Enter** - When in edit mode (not textarea), submits the changes and exits edit mode
+- **Shift + Enter** - In edit mode, allows Enter to be used for its normal purpose (like line breaks in textarea)
+- **Escape** - Cancels editing and reverts to the original value
+- **Click outside** - Commits changes and exits edit mode
+
+```html:preview
+<div class="form-spacing">
+  <p><strong>Try these keyboard shortcuts:</strong></p>
+  <ul style="margin-bottom: 1rem;">
+    <li>Click edit, then press <kbd>Enter</kbd> to save</li>
+    <li>Click edit, then press <kbd>Escape</kbd> to cancel</li>
+    <li>Click edit, make changes, then click outside to save</li>
+  </ul>
+
+  <zn-inline-edit
+    name="keyboardDemo"
+    value="Edit me and try the keyboard shortcuts"
+    help-text="Press Enter to save, Escape to cancel">
   </zn-inline-edit>
-</zn-sp>
+
+  <zn-inline-edit
+    name="textareaDemo"
+    value="For textareas, use Shift+Enter or click the check button to save"
+    input-type="textarea"
+    help-text="Enter adds new lines, use check button to save">
+  </zn-inline-edit>
+</div>
 ```
 
-### Second Example
+### Events
+
+The inline edit component emits several events you can listen to:
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    id="event-example"
+    name="eventDemo"
+    value="Interact with this field to see events">
+  </zn-inline-edit>
+
+  <div style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-100); border-radius: 4px;">
+    <strong>Event Log:</strong>
+    <div id="event-log" style="margin-top: 0.5rem; font-family: monospace; font-size: 0.875rem;"></div>
+  </div>
+</div>
+
+<script type="module">
+  const inlineEdit = document.getElementById('event-example');
+  const eventLog = document.getElementById('event-log');
 
-TODO
+  await customElements.whenDefined('zn-inline-edit');
+
+  function logEvent(eventName, detail) {
+    const time = new Date().toLocaleTimeString();
+    const message = `[${time}] ${eventName}${detail ? ': ' + JSON.stringify(detail) : ''}`;
+    eventLog.innerHTML = message + '<br>' + eventLog.innerHTML;
+    const lines = eventLog.innerHTML.split('<br>');
+    if (lines.length > 5) {
+      eventLog.innerHTML = lines.slice(0, 5).join('<br>');
+    }
+  }
+
+  inlineEdit.addEventListener('zn-input', (e) => logEvent('zn-input'));
+  inlineEdit.addEventListener('zn-change', (e) => logEvent('zn-change', { value: e.target.value }));
+  inlineEdit.addEventListener('zn-submit', (e) => logEvent('zn-submit', { value: e.detail.value }));
+  inlineEdit.addEventListener('zn-blur', (e) => logEvent('zn-blur'));
+</script>
+```
 
+### Practical Use Cases
+
+#### Editable Profile Information
+
+```html:preview
+<div style="max-width: 600px; padding: 1.5rem; border: 1px solid var(--zn-color-neutral-200); border-radius: 8px;">
+  <h3 style="margin-top: 0;">User Profile</h3>
+
+  <form id="user-profile">
+    <div class="form-spacing">
+      <div style="display: grid; gap: 0.5rem;">
+        <div style="display: flex; gap: 1rem; align-items: center;">
+          <strong style="min-width: 120px;">Name:</strong>
+          <zn-inline-edit name="name" value="Sarah Johnson" inline></zn-inline-edit>
+        </div>
+
+        <div style="display: flex; gap: 1rem; align-items: center;">
+          <strong style="min-width: 120px;">Email:</strong>
+          <zn-inline-edit name="email" value="sarah.j@example.com" inline></zn-inline-edit>
+        </div>
+
+        <div style="display: flex; gap: 1rem; align-items: center;">
+          <strong style="min-width: 120px;">Role:</strong>
+          <zn-inline-edit
+            name="role"
+            value="developer"
+            inline
+            options='{"developer": "Developer", "designer": "Designer", "manager": "Manager", "admin": "Administrator"}'>
+          </zn-inline-edit>
+        </div>
+
+        <div style="display: flex; gap: 1rem; align-items: center;">
+          <strong style="min-width: 120px;">Country:</strong>
+          <zn-inline-edit
+            name="country"
+            value="us"
+            provider="country"
+            icon-position="start"
+            inline>
+          </zn-inline-edit>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+```
+
+#### Editable Table Cells
+
+```html:preview
+<table style="width: 100%; border-collapse: collapse;">
+  <thead>
+    <tr style="background: var(--zn-color-neutral-100); border-bottom: 2px solid var(--zn-color-neutral-300);">
+      <th style="padding: 0.75rem; text-align: left;">Product</th>
+      <th style="padding: 0.75rem; text-align: left;">Status</th>
+      <th style="padding: 0.75rem; text-align: left;">Quantity</th>
+      <th style="padding: 0.75rem; text-align: left;">Notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr style="border-bottom: 1px solid var(--zn-color-neutral-200);">
+      <td style="padding: 0.75rem;">
+        <zn-inline-edit name="product1" value="Widget A" inline></zn-inline-edit>
+      </td>
+      <td style="padding: 0.75rem;">
+        <zn-inline-edit
+          name="status1"
+          value="active"
+          inline
+          options='{"active": "Active", "inactive": "Inactive", "discontinued": "Discontinued"}'>
+        </zn-inline-edit>
+      </td>
+      <td style="padding: 0.75rem;">
+        <zn-inline-edit name="qty1" value="150" input-type="number" inline></zn-inline-edit>
+      </td>
+      <td style="padding: 0.75rem;">
+        <zn-inline-edit name="notes1" value="In stock" inline></zn-inline-edit>
+      </td>
+    </tr>
+    <tr style="border-bottom: 1px solid var(--zn-color-neutral-200);">
+      <td style="padding: 0.75rem;">
+        <zn-inline-edit name="product2" value="Widget B" inline></zn-inline-edit>
+      </td>
+      <td style="padding: 0.75rem;">
+        <zn-inline-edit
+          name="status2"
+          value="inactive"
+          inline
+          options='{"active": "Active", "inactive": "Inactive", "discontinued": "Discontinued"}'>
+        </zn-inline-edit>
+      </td>
+      <td style="padding: 0.75rem;">
+        <zn-inline-edit name="qty2" value="45" input-type="number" inline></zn-inline-edit>
+      </td>
+      <td style="padding: 0.75rem;">
+        <zn-inline-edit name="notes2" value="Low stock" inline></zn-inline-edit>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
 
+#### Settings Panel
+
+```html:preview
+<div style="max-width: 700px; padding: 1.5rem; border: 1px solid var(--zn-color-neutral-200); border-radius: 8px; background: var(--zn-color-neutral-50);">
+  <h3 style="margin-top: 0;">Application Settings</h3>
+
+  <form id="settings-form">
+    <div class="form-spacing">
+      <div style="margin-bottom: 1.5rem;">
+        <h4 style="margin-bottom: 0.5rem;">General</h4>
+        <zn-inline-edit
+          name="appName"
+          value="My Application"
+          placeholder="Application name"
+          padded>
+        </zn-inline-edit>
+
+        <zn-inline-edit
+          name="tagline"
+          value="The best app for your needs"
+          placeholder="Tagline"
+          padded>
+        </zn-inline-edit>
+      </div>
+
+      <div style="margin-bottom: 1.5rem;">
+        <h4 style="margin-bottom: 0.5rem;">Localization</h4>
+        <zn-inline-edit
+          name="language"
+          value="en"
+          provider="country"
+          icon-position="start"
+          edit-text="Change"
+          padded>
+        </zn-inline-edit>
+
+        <zn-inline-edit
+          name="currency"
+          value="usd"
+          provider="currency"
+          icon-position="start"
+          padded>
+        </zn-inline-edit>
+      </div>
+
+      <div>
+        <h4 style="margin-bottom: 0.5rem;">Description</h4>
+        <zn-inline-edit
+          name="description"
+          value="A comprehensive solution for managing your business operations efficiently."
+          input-type="textarea"
+          placeholder="Enter a description"
+          edit-text="Edit"
+          padded>
+        </zn-inline-edit>
+      </div>
+
+      <zn-button type="submit" variant="primary" style="margin-top: 1rem;">Save Settings</zn-button>
+    </div>
+  </form>
+</div>
+
+<script type="module">
+  const form = document.getElementById('settings-form');
+
+  await customElements.whenDefined('zn-button');
+  await customElements.whenDefined('zn-inline-edit');
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData);
+    alert('Settings saved!\n\n' + JSON.stringify(data, null, 2));
+  });
+</script>
+```
+
+### Programmatic Control
+
+You can control the inline edit component programmatically using its methods:
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit
+    id="programmatic-demo"
+    name="demo"
+    value="Control me programmatically">
+  </zn-inline-edit>
+
+  <div style="margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
+    <zn-button id="check-validity-btn" size="small">Check Validity</zn-button>
+    <zn-button id="set-value-btn" size="small">Set Value</zn-button>
+    <zn-button id="focus-btn" size="small">Focus</zn-button>
+    <zn-button id="get-value-btn" size="small">Get Value</zn-button>
+  </div>
+</div>
+
+<script type="module">
+  const inlineEdit = document.getElementById('programmatic-demo');
+
+  await customElements.whenDefined('zn-button');
+  await customElements.whenDefined('zn-inline-edit');
+
+  document.getElementById('check-validity-btn').addEventListener('click', () => {
+    const isValid = inlineEdit.checkValidity();
+    alert('Valid: ' + isValid);
+  });
+
+  document.getElementById('set-value-btn').addEventListener('click', () => {
+    inlineEdit.value = 'New value set at ' + new Date().toLocaleTimeString();
+  });
+
+  document.getElementById('focus-btn').addEventListener('click', () => {
+    inlineEdit.focus();
+  });
+
+  document.getElementById('get-value-btn').addEventListener('click', () => {
+    alert('Current value: ' + inlineEdit.value);
+  });
+</script>
+```