fix: typo

docs/props/general-configuration/index.html

@@ -284,7 +284,7 @@
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    shadowDom: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    mobileBreakpoint: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">600</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    setDateOnMenuClose: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ul><li><code>allowStopPropagation</code>: Enable <code>event.sportPropagation</code> on click events</li><li><code>closeOnScroll</code>: Close datepicker menu on page scroll</li><li><code>modeHeight</code>: If you use <a href="/props/modes/#month-picker"><code>month-picker</code></a>, <a href="/props/modes/#time-picker"><code>time-picker</code></a> or <a href="/props/modes/#year-picker"><code>year-picker</code></a>, set custom height of the picker in <code>px</code></li><li><code>allowPreventDefault</code>: Due to the different implementations of how click outside listeners are implemented, you might encounter issues where the menu closes if the picker is used in dialogs when <code>teleport</code> prop is enabled. To prevent this issue, you need to set this option to <code>true</code></li><li><code>closeOnClearValue</code>: Prevent closing the menu on value clear from the input field</li><li><code>closeOnAutoApply</code>: If set to <code>false</code>, clicking on a date value will automatically select the value but will not close the datepicker menu. Closing will be available on a click-away or clicking on the input again</li><li><code>noSwipe</code>: Disable touch events on the calendar</li><li><code>keepActionRow</code>: When enabled, it will keep the action row even if the <a href="#auto-apply"><code>auto-apply</code></a> prop is enabled</li><li><code>onClickOutside</code>: Provide custom click outside handler. Exposed validation function that will return <code>true</code> or <code>false</code> depending on the selected value and pointer event</li><li><code>tabOutClosesMenu</code>: When tabbing out of the picker menu it will close the picker menu (not compatible when using <code>teleport</code>)</li><li><code>arrowLeft</code>: Overrides default arrow position from left side of the menu. To keep it always in the center, set it to <code>50%</code>. Accepts valid <code>CSS</code> value</li><li><code>keepViewOnOffsetClick</code>: When enabled, clicking on the offset date will not change the month that is currently in the view</li><li><code>timeArrowHoldThreshold</code>: When provided with a value <code>&gt; 0</code>, clicking and holding the arrow button in the <code>time-picker</code> will increment/decrement the value. This value represents the <code>setTimeout</code> value, meaning the larger the number, the change will be slower.<code>0</code> disables the hold event</li><li><code>shadowDom</code>: Set to <code>true</code> if you are using the component with web components</li><li><code>mobileBreakpoint</code>: Mobile breakpoint in pixels</li><li><code>setDateOnMenuClose</code>: When enabled, clicking away from the menu will set the selected date if some date is selected. Behaves similar to <code>auto-apply</code>, but it only applies the date on click-away</li></ul><h2 id="loading" tabindex="-1">loading <a class="header-anchor" href="#loading" aria-label="Permalink to &quot;loading&quot;">​</a></h2><p>Adds a loading overlay in the menu</p><ul><li>Type: <code>boolean</code></li><li>Default: <code>false</code></li></ul><div class="demo-wrap"><div class="dp__main dp__theme_light" data-datepicker-instance data-dp-mobile="true"><div><!----><div class="dp__input_wrap"><!----><input data-test-id="dp-input" class="dp__pointer dp__input_readonly dp__input dp__input_icon_pad dp__input_reg" inputmode="none" placeholder value autocomplete="off" aria-label="Datepicker input"><div><!----><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" class="dp__input_icon dp__input_icons" role="img" aria-label="Calendar icon"><path d="M29.333 8c0-2.208-1.792-4-4-4h-18.667c-2.208 0-4 1.792-4 4v18.667c0 2.208 1.792 4 4 4h18.667c2.208 0 4-1.792 4-4v-18.667zM26.667 8v18.667c0 0.736-0.597 1.333-1.333 1.333 0 0-18.667 0-18.667 0-0.736 0-1.333-0.597-1.333-1.333 0 0 0-18.667 0-18.667 0-0.736 0.597-1.333 1.333-1.333 0 0 18.667 0 18.667 0 0.736 0 1.333 0.597 1.333 1.333z"></path><path d="M20 2.667v5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-5.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"></path><path d="M9.333 2.667v5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-5.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"></path><path d="M4 14.667h24c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-24c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333z"></path></svg></div><!----><!----></div></div><div><!----></div></div></div><details class="details custom-block"><summary>Code Example</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ul><li><code>allowStopPropagation</code>: Enable <code>event.stopPropagation</code> on click events</li><li><code>closeOnScroll</code>: Close datepicker menu on page scroll</li><li><code>modeHeight</code>: If you use <a href="/props/modes/#month-picker"><code>month-picker</code></a>, <a href="/props/modes/#time-picker"><code>time-picker</code></a> or <a href="/props/modes/#year-picker"><code>year-picker</code></a>, set custom height of the picker in <code>px</code></li><li><code>allowPreventDefault</code>: Due to the different implementations of how click outside listeners are implemented, you might encounter issues where the menu closes if the picker is used in dialogs when <code>teleport</code> prop is enabled. To prevent this issue, you need to set this option to <code>true</code></li><li><code>closeOnClearValue</code>: Prevent closing the menu on value clear from the input field</li><li><code>closeOnAutoApply</code>: If set to <code>false</code>, clicking on a date value will automatically select the value but will not close the datepicker menu. Closing will be available on a click-away or clicking on the input again</li><li><code>noSwipe</code>: Disable touch events on the calendar</li><li><code>keepActionRow</code>: When enabled, it will keep the action row even if the <a href="#auto-apply"><code>auto-apply</code></a> prop is enabled</li><li><code>onClickOutside</code>: Provide custom click outside handler. Exposed validation function that will return <code>true</code> or <code>false</code> depending on the selected value and pointer event</li><li><code>tabOutClosesMenu</code>: When tabbing out of the picker menu it will close the picker menu (not compatible when using <code>teleport</code>)</li><li><code>arrowLeft</code>: Overrides default arrow position from left side of the menu. To keep it always in the center, set it to <code>50%</code>. Accepts valid <code>CSS</code> value</li><li><code>keepViewOnOffsetClick</code>: When enabled, clicking on the offset date will not change the month that is currently in the view</li><li><code>timeArrowHoldThreshold</code>: When provided with a value <code>&gt; 0</code>, clicking and holding the arrow button in the <code>time-picker</code> will increment/decrement the value. This value represents the <code>setTimeout</code> value, meaning the larger the number, the change will be slower.<code>0</code> disables the hold event</li><li><code>shadowDom</code>: Set to <code>true</code> if you are using the component with web components</li><li><code>mobileBreakpoint</code>: Mobile breakpoint in pixels</li><li><code>setDateOnMenuClose</code>: When enabled, clicking away from the menu will set the selected date if some date is selected. Behaves similar to <code>auto-apply</code>, but it only applies the date on click-away</li></ul><h2 id="loading" tabindex="-1">loading <a class="header-anchor" href="#loading" aria-label="Permalink to &quot;loading&quot;">​</a></h2><p>Adds a loading overlay in the menu</p><ul><li>Type: <code>boolean</code></li><li>Default: <code>false</code></li></ul><div class="demo-wrap"><div class="dp__main dp__theme_light" data-datepicker-instance data-dp-mobile="true"><div><!----><div class="dp__input_wrap"><!----><input data-test-id="dp-input" class="dp__pointer dp__input_readonly dp__input dp__input_icon_pad dp__input_reg" inputmode="none" placeholder value autocomplete="off" aria-label="Datepicker input"><div><!----><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" class="dp__input_icon dp__input_icons" role="img" aria-label="Calendar icon"><path d="M29.333 8c0-2.208-1.792-4-4-4h-18.667c-2.208 0-4 1.792-4 4v18.667c0 2.208 1.792 4 4 4h18.667c2.208 0 4-1.792 4-4v-18.667zM26.667 8v18.667c0 0.736-0.597 1.333-1.333 1.333 0 0-18.667 0-18.667 0-0.736 0-1.333-0.597-1.333-1.333 0 0 0-18.667 0-18.667 0-0.736 0.597-1.333 1.333-1.333 0 0 18.667 0 18.667 0 0.736 0 1.333 0.597 1.333 1.333z"></path><path d="M20 2.667v5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-5.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"></path><path d="M9.333 2.667v5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-5.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"></path><path d="M4 14.667h24c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-24c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333z"></path></svg></div><!----><!----></div></div><div><!----></div></div></div><details class="details custom-block"><summary>Code Example</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">VueDatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"></span>