make snippets more flexible and easier to work with

mskocik · Dec 17, 2024 · 3795208 · 3795208
1 parent 3c56c84
commit 3795208
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 31 deletions.
diff --git a/src/lib/components/SveltyPicker.svelte b/src/lib/components/SveltyPicker.svelte
@@ -50,18 +50,11 @@
    *  ce_displayElement?: HTMLInputElement|null,
    *  positionResolver?: Function,
    *  onChange?: (value: string|string[]|null) => void,
-   *  onDateChange?: (prop: {
-   *    value: string|string[]|null,
-   *    dateValue: Date|Date[]|null,
-   *    displayValue: string,
-   *    valueFormat: string,
-   *    displayFormat: string | null,
-   *    event: 'date'|'hour'|'minute'|'datetime'
-   *  }) => void,
+   *  onDateChange?: (prop: import('$lib/types/internal.js').DateChange) => void,
    *  onCancel?: () => void,
    *  onBlur?: () => void,
    *  onInput?: (currentValue: string|null) => void,
-   *  actionRow?: import('svelte').Snippet<[
+   *  actionRow?: import('svelte').Snippet<[props: {
    *    autocloseSupported: boolean,
    *    todayBtnClasses: string,
    *    clearBtnClasses: string,
@@ -72,8 +65,9 @@
    *    isTodayDisabled: boolean|null,
    *    i18n: import('$lib/i18n/index.js').i18nType,
    *    currentMode: string
-   *  ]>}
-   * } */
+   *  } ]>,
+   *  children?: import('svelte').Snippet
+   * }} */
   let {
     inputId = '',
     name = "date",
@@ -114,7 +108,8 @@
     onCancel,
     onInput,
     onBlur,
-    actionRow = action_row
+    actionRow = action_row,
+    children
   } = $props();
 
   if (isRange && Array.isArray(value) === false) console.warn('[svelty-picker] value property must be an array for range picker');
@@ -584,7 +579,18 @@
   $effect(() => watch_formats(format, displayFormat));
 </script>
 
-{#snippet action_row(autocloseSupported, todayBtnClasses, clearBtnClasses, onCancel, onConfirm, onClear, onToday, isTodayDisabled, i18n, currentMode)}
+{#snippet action_row({
+  autocloseSupported,
+  todayBtnClasses,
+  clearBtnClasses,
+  onCancel,
+  onConfirm,
+  onClear,
+  onToday,
+  isTodayDisabled,
+  i18n,
+  currentMode
+})}
   {#if !autocloseSupported || true}
     <div class="sdt-btn-row">
       {#if !autocloseSupported}
@@ -632,7 +638,15 @@
   {/if}
 {/snippet}
 
-<span class="sdt-component-wrap">
+<div
+  class="sdt-component-wrap"
+  class:picker-active={pickerVisible}
+>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="sdt-input-wrap" style="border: 3px dashed orange; position: relative"
+    onclick={onInputClick}
+  >
   {#if !ce_displayElement}
     <input type="hidden" {name} {value}>
     {#if !pickerOnly}
@@ -652,12 +666,13 @@
       oninput={manualInput ? onManualInput : () => {}}
       onfocus={onInputFocus}
       onblur={onInputBlur}
-      onclick={onInputClick}
       onkeydown={onKeyDown}
       use:inputAction={inputActionParams}
     />
     {/if}
   {/if}
+  {@render children?.()}
+  </div>
 {#if pickerVisible && isFocused }
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
@@ -708,16 +723,20 @@
     </div>
     {/each}
   </div>
-  {@render actionRow(autocloseSupported, todayBtnClasses, clearBtnClasses, onCancelFn, onConfirm, onClear, onToday, isTodayDisabled, i18n, currentMode)}
+  {@render actionRow({ autocloseSupported, todayBtnClasses, clearBtnClasses, onCancel: onCancelFn, onConfirm, onClear, onToday, isTodayDisabled, i18n, currentMode })}
   </div> <!-- END: popup -->
 {/if}
-</span>
+</div>
 
 
 <style>
   .sdt-component-wrap {
     position: relative;
-    display: inline;
+    display: inline-block;
+  }
+  .sdt-input-wrap {
+    position: relative;
+    display: contents;
   }
   .sdt-calendar-wrap {
     width: 280px;

diff --git a/src/lib/types/internal.d.ts b/src/lib/types/internal.d.ts
@@ -4,3 +4,12 @@ export type UpdateProp = {
     isKeyboard: boolean,
     dateIndex?: number
 }
+
+export type DateChange = {
+    value: string|string[]|null,
+    dateValue: Date|Date[]|null,
+    displayValue: string,
+    valueFormat: string,
+    displayFormat: string | null,
+    event: 'date'|'hour'|'minute'|'datetime'
+}
diff --git a/src/lib/utils/actions.js b/src/lib/utils/actions.js
@@ -5,11 +5,11 @@ import { computePosition, autoUpdate, shift, flip } from '@floating-ui/dom';
  * @returns void
  */
 export function usePosition(node) {
-  if (node?.previousElementSibling === null) return;
-  /** @type Element */
-  const prevElement = node?.previousElementSibling;
-  const removeFloating = autoUpdate(prevElement, node, () =>
-    computePosition(prevElement, node, {
+  const inputElement = node.parentElement?.querySelector('input[type=text]');
+  if (!inputElement) return;
+
+  const removeFloating = autoUpdate(inputElement, node, () =>
+    computePosition(inputElement, node, {
       placement: 'bottom-start',
       middleware: [
         shift({

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -53,7 +53,8 @@
       newNav.push({
         // @ts-ignore
         anchor: link.href,
-        text: link.textContent
+        text: link.textContent,
+        sublink: link.parentElement?.tagName === 'H3'
       });
     });
     page_nav = newNav
@@ -163,7 +164,7 @@
             On this page
             <ul class="nav">
               {#each page_nav as link}
-              <li class="link-item"><a href="{link.anchor}" class="link">{link.text}</a></li>
+              <li class="link-item" class:sublink={link.sublink}><a href="{link.anchor}" class="link">{link.text}</a></li>
               {/each}
 
             </ul>
@@ -216,6 +217,9 @@
   .link-item {
     padding: 4px 10px;
   }
+  .sublink {
+    padding-left: 20px;
+  }
   .link {
     font-weight: 500;
     color: var(--vp-c-text-2);

diff --git a/src/routes/snippets/+page.svelte.md b/src/routes/snippets/+page.svelte.md
@@ -1,12 +1,115 @@
+<script>
+  import SveltyPicker from "$lib/components/SveltyPicker.svelte";
+
+  /**
+   *
+   * @param {import('$lib/types/internal').DateChange} prop
+   */
+  function setDate({ dateValue }) {
+    var time = /** @type {Date|null} */ (dateValue);
+    var locale = "en-gb";
+
+    var DD   = time?.getDate();
+    var DDD  = time?.toLocaleString(locale, {weekday: "long" });
+    var MMM  = time?.toLocaleString(locale, {month:   "short"}).toUpperCase();
+
+    // @ts-ignore
+    document.getElementById("day").textContent= DD ?? '?';
+    // @ts-ignore
+    document.getElementById("weekday").textContent= DDD ?? 'No date';
+    // @ts-ignore
+    document.getElementById("month").textContent= MMM ?? 'Pick';
+  }
+</script>
+
 # Snippets
 
-There is 1 available snippet `actionRow` to override. Event handlers have prefix `on`.
+There are 2 available snippets to override/customize.
+
+
+## children
+
+This snippet can be used for adding icon. Don't forget to position your icon absolutely. Or move your styling to `<input>`'s parent element `.sdt-input-wrap`.
+
+Example of custom interactive svg icon showing currently selected date:
+
+<SveltyPicker inputId="picker-el" inputClasses="my-input" onDateChange={setDate} clearBtn={false}>
+  <!-- code borrowed from https://github.com/edent/Dynamic-SVG-Calendar-Icon -->
+  <svg
+    class="calendar-icon"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-label="Calendar"
+    role="img"
+    viewBox="0 0 512 512"
+  >
+    <path
+      d="M512 455c0 32-25 57-57 57H57c-32 0-57-25-57-57V128c0-31 25-57 57-57h398c32 0 57 26 57 57z"
+      fill="#e0e7ec"
+    />
+    <path
+      d="M484 0h-47c2 4 4 9 4 14a28 28 0 1 1-53-14H124c3 4 4 9 4 14A28 28 0 1 1 75 0H28C13 0 0 13 0 28v157h512V28c0-15-13-28-28-28z"
+      fill="#dd2f45"
+    />
+
+    <g fill="#f3aab9">
+      <circle cx="470" cy="142" r="14" />
+      <circle cx="470" cy="100" r="14" />
+      <circle cx="427" cy="142" r="14" />
+      <circle cx="427" cy="100" r="14" />
+      <circle cx="384" cy="142" r="14" />
+      <circle cx="384" cy="100" r="14" />
+    </g>
 
+    <text
+      id="month"
+      x="32"
+      y="164"
+      fill="#fff"
+      font-family="monospace"
+      font-size="140px"
+      style="text-anchor: left">Pick</text
+    >
 
-### Snipett type
+    <text
+      id="day"
+      x="256"
+      y="400"
+      fill="#66757f"
+      font-family="monospace"
+      font-size="256px"
+      style="text-anchor: middle">?</text
+    >
+
+    <text
+      id="weekday"
+      x="256"
+      y="480"
+      fill="#66757f"
+      font-family="monospace"
+      font-size="64px"
+      style="text-anchor: middle">Date</text
+    >
+  </svg>
+</SveltyPicker>
+
+```svelte
+<SveltyPicker>
+  <svg ... />
+</SveltyPicker>
+```
+
+## actionRow
+
+Snippet represents row below calendar/time picker. By default showing ***Today*** and ***Clear*** buttons. And if `autocommit`=`false` also
+***Ok*** and ***Cancel*** buttons.
+
+💡 If you just want to hide  ***Today*** or ***Clear*** buttons, use controlling props and provide appropriate `i18n` message
+instead of overriding `actionRow` snippet.
+
+### Snipet type
 
 ```ts
-Snippet<[
+Snippet<[ prop: {
   autocloseSupported: boolean,
   todayBtnClasses: string,
   clearBtnClasses: string,
@@ -15,9 +118,9 @@ Snippet<[
   onClear: function,
   onToday: function,
   isTodayDisabled: boolean,
-  i18n: import('$lib/i18n/index.js').i18nType,
+  i18n: import('svelty-picker/i18n').i18nType,
   currentMode: string
-]>
+}]>
 ```
 
 Parameter description:
@@ -36,7 +139,18 @@ Parameter description:
 ### Default implementation
 
 ```svelte
-{#snippet action_row(autocloseSupported, todayBtnClasses, clearBtnClasses, onCancel, onConfirm, onClear, onToday, isTodayDisabled, i18n, currentMode)}
+{#snippet action_row({
+  autocloseSupported,
+  todayBtnClasses,
+  clearBtnClasses,
+  onCancel,
+  onConfirm,
+  onClear,
+  onToday,
+  isTodayDisabled,
+  i18n,
+  currentMode
+})}
   {#if !autocloseSupported || true}
     <div class="sdt-btn-row">
       {#if !autocloseSupported}
@@ -84,3 +198,25 @@ Parameter description:
   {/if}
 {/snippet}
 ```
+
+<style>
+  :global(.my-input) {
+    min-height: 40px;
+    padding: 6px;
+    line-height: 28px;
+    font-size: 18px;
+  }
+  .calendar-icon {
+    cursor: pointer;
+    width: 33px;
+    height: 33px;
+    right: 4px;
+    top: 4px;
+    position: absolute;
+    display: inline;
+  }
+  :global(.picker-active) .calendar-icon {
+    opacity: 0.75;
+    filter: sepia(0.5);
+  }
+</style>