Merge remote-tracking branch 'origin/main'

Jaspero · Jan 10, 2025 · faad5da · faad5da
2 parents ac1e7a4 + e45d0ca
commit faad5da
Show file tree

Hide file tree

Showing 12 changed files with 313 additions and 117 deletions.
diff --git a/docs/docs/Form fields/date-range.md b/docs/docs/Form fields/date-range.md
@@ -25,10 +25,10 @@ import '../../static/c/date-range.css';
 |   displayFormatFunction   | if `displayFormat` <br></br> is `custom` |                       `(date:Date) => string`                       |                 custom display format function                  |
 |           minDate         |                                          |                          `string \| Date `                          |        earliest date that can be selected by the user.          |
 |           maxDate         |                                          |                          `string \| Date `                          |          last date that can be selected by the user.            |
-|     maxSelectibleDays     |                                          |                                `number`                             |               number of days that can be in range               |
-|     minSelectibleDays     |                                          |                                `number`                             |              number of days that must be in range               |
-|     maxDateSelectible     |                                          |                                 `Date`                              |    Automatically set based on the value of maxSelectibleDays    |
-|     minDateSelectible     |                                          |                                 `Date`                              |    Automatically set based on the value of maxSelectibleDays    |
+|     maxSelectableDays     |                                          |                                `number`                             |               number of days that can be in range               |
+|     minSelectableDays     |                                          |                                `number`                             |              number of days that must be in range               |
+|     maxDateSelectable     |                                          |                                 `Date`                              |    Automatically set based on the value of maxSelectableDays    |
+|     minDateSelectable     |                                          |                                 `Date`                              |    Automatically set based on the value of maxSelectableDays    |
 <br></br>
 ****
 

diff --git a/packages/demo/src/FormFieldDemos/DateRangeDemo.svelte b/packages/demo/src/FormFieldDemos/DateRangeDemo.svelte
@@ -26,8 +26,8 @@
   <jp-date-range label="datepicker display format medium" displayFormat="medium" />
   <jp-date-range label="datepicker display format long" displayFormat="long" />
   <jp-date-range label="datepicker display format full" displayFormat="full" />
-  <jp-date-range minSelectibleDays="2" label="minSelectibleDays" />
-  <jp-date-range maxSelectibleDays="10" label="maxSelectibleDays" />
+  <jp-date-range minSelectableDays="2" label="minSelectableDays" />
+  <jp-date-range maxSelectableDays="10" label="maxSelectableDays" />
   <jp-date-range minDate="2024-10-2" label="minDate string format" />
   <jp-date-range {minDate} label="minDate date format" />
   <jp-date-range maxDate="2024-10-2" label="maxDate string format" />

diff --git a/packages/demo/src/FormFieldDemos/RangeDemo.svelte b/packages/demo/src/FormFieldDemos/RangeDemo.svelte
@@ -15,4 +15,4 @@
   <jp-range label="range"></jp-range>
 
   <button type="submit">submit</button>
-</form>
+</form>
diff --git a/packages/demo/src/FormFieldDemos/SliderDemo.svelte b/packages/demo/src/FormFieldDemos/SliderDemo.svelte
@@ -4,14 +4,17 @@
 </script>
 
 <form>
+  <jp-slider showValue=true/>
+  <jp-slider label="slider" showValue=true />
+  <jp-slider label="slider disabled" disabled="true" showValue=true />
+  <jp-slider label="slider required" required="true" showValue=true />
+  <jp-slider label="slider max" max="70" showValue=true />
+  <jp-slider label="slider min" min="20" showValue=true />
+  <jp-slider label="slider step" step="10" showValue=true />
+  <jp-slider label="slider discrete" discrete="true" showValue=true />
+  <jp-slider />
+  <jp-slider />
   <jp-slider />
-  <jp-slider label="slider" />
-  <jp-slider label="slider disabled" disabled="true" />
-  <jp-slider label="slider required" required="true" />
-  <jp-slider label="slider max" max="70" />
-  <jp-slider label="slider min" min="20" />
-  <jp-slider label="slider step" step="10" />
-  <jp-slider label="slider discrele" discrete="true" />
 
   <button type="submit">submit</button>
 </form>
diff --git a/packages/lib/src/form-fields/date-range/Day.svelte b/packages/lib/src/form-fields/date-range/Day.svelte
@@ -12,11 +12,11 @@
   export let firstInternalValue = '';
   export let secondInternalValue = '';
   export let selectingFirst: boolean;
-  export let maxSelectibleDays: number;
-  export let minSelectibleDays: number;
-  export let maxDateSelectible: Date;
-  export let minDateSelectible: Date;
-  let isOutOfBonuds: boolean;
+  export let maxSelectableDays: number;
+  export let minSelectableDays: number;
+  export let maxDateSelectable: Date;
+  export let minDateSelectable: Date;
+  let isOutOfBounds: boolean;
 
   const dispatch = createEventDispatcher();
 
@@ -62,9 +62,9 @@
     day: number,
     selectingFirst: boolean
   ) {
-    if (!selectingFirst && maxSelectibleDays) {
+    if (!selectingFirst && maxSelectableDays) {
       const potentialDate = new Date(year, month, day);
-      if (potentialDate > maxDateSelectible || potentialDate < minDateSelectible) {
+      if (potentialDate > maxDateSelectable || potentialDate < minDateSelectable) {
         return true;
       }
     }
@@ -83,18 +83,18 @@
       if (
         ((potentialDate < minDateAfter && potentialDate > datePicked) ||
           (potentialDate > minDateBefore && potentialDate < datePicked)) &&
-        minSelectibleDays
+        minSelectableDays
       ) {
         return true;
       }
     }
     return false;
   }
 
-  $: minDateBefore = calculateLimits.calculateRequiredBefore(firstInternalValue, minSelectibleDays);
-  $: minDateAfter = calculateLimits.calculateRequiredAfter(firstInternalValue, minSelectibleDays);
+  $: minDateBefore = calculateLimits.calculateRequiredBefore(firstInternalValue, minSelectableDays);
+  $: minDateAfter = calculateLimits.calculateRequiredAfter(firstInternalValue, minSelectableDays);
 
-  $: isOutOfBonuds =
+  $: isOutOfBounds =
     isDateOutOfSelectableBounds(col.year, col.month, col.day, selectingFirst) ||
     isDateOutOfMinRequiredBounds(col.year, col.month, col.day, selectingFirst);
   $: isOutOfMax = calculateLimits.isOutOfMaxBounds(internalMaxDate, col.year, col.month, col.day);
@@ -137,8 +137,8 @@
     class:jp-date-range-table-cell-lastValue={isLastValue && !isOnlyValue}
     class:jp-date-range-table-cell-onlyValue={isOnlyValue}
     on:click|preventDefault={handleClick}
-    class:jp-date-range-table-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
-    disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
+    class:jp-date-range-table-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
+    disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
   >
     {col.day}
   </button>

diff --git a/packages/lib/src/form-fields/date-range/Month.svelte b/packages/lib/src/form-fields/date-range/Month.svelte
@@ -12,9 +12,9 @@
   export let secondMonthSelected: number | string | null;
   export let firstMonthSelected: number | string | null;
   export let selectingFirst: boolean;
-  export let maxSelectibleDays: number;
-  export let maxDateSelectible: Date;
-  export let minDateSelectible: Date;
+  export let maxSelectableDays: number;
+  export let maxDateSelectable: Date;
+  export let minDateSelectable: Date;
 
   const dispatch = createEventDispatcher();
   function handleClick() {
@@ -28,18 +28,18 @@
     month: number,
     selectingFirst: boolean
   ): boolean {
-    if (!selectingFirst && maxSelectibleDays) {
+    if (!selectingFirst && maxSelectableDays) {
       if (
-        (year >= maxDateSelectible.getFullYear() && month > maxDateSelectible.getMonth()) ||
-        (month < minDateSelectible.getMonth() && year <= minDateSelectible.getFullYear())
+        (year >= maxDateSelectable.getFullYear() && month > maxDateSelectable.getMonth()) ||
+        (month < minDateSelectable.getMonth() && year <= minDateSelectable.getFullYear())
       ) {
         return true;
       }
     }
     return false;
   }
 
-  $: isOutOfBonuds = isMonthOutOfSelectableBounds(pickerYear, index, selectingFirst);
+  $: isOutOfBounds = isMonthOutOfSelectableBounds(pickerYear, index, selectingFirst);
   $: isOutOfMax = calculateLimits.isOutOfMaxBounds(internalMaxDate, pickerYear, index, 1);
   $: isOutOfMin = calculateLimits.isOutOfMinBounds(internalMinDate, pickerYear, index, 31);
 </script>
@@ -58,8 +58,8 @@
       ) >= parseInt(`${pickerYear}${index + 1 < 10 ? '0' : ''}${index + 1}`, 10)
     : firstMonthSelected == (index < 0 ? '11' : index > 11 ? '0' : index) &&
       firstYearSelected == pickerYear + (index < 0 ? -1 : index > 11 ? 1 : 0)}
-  class:jp-date-range-menu-month-grid-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
-  disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
+  class:jp-date-range-menu-month-grid-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
+  disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
 >
   {month}
 </button>
diff --git a/packages/lib/src/form-fields/date-range/Year.svelte b/packages/lib/src/form-fields/date-range/Year.svelte
@@ -9,9 +9,9 @@
   export let firstYearSelected: number | null;
   export let secondYearSelected: number | null;
   export let selectingFirst: boolean;
-  export let maxSelectibleDays: number;
-  export let maxDateSelectible: Date;
-  export let minDateSelectible: Date;
+  export let maxSelectableDays: number;
+  export let maxDateSelectable: Date;
+  export let minDateSelectable: Date;
 
   const dispatch = createEventDispatcher();
   function handleClick() {
@@ -21,15 +21,15 @@
   }
 
   function isYearOutOfSelectableBounds(year: number, selectingFirst: boolean): boolean {
-    if (!selectingFirst && maxSelectibleDays) {
-      if (year > maxDateSelectible.getFullYear() || year < minDateSelectible.getFullYear()) {
+    if (!selectingFirst && maxSelectableDays) {
+      if (year > maxDateSelectable.getFullYear() || year < minDateSelectable.getFullYear()) {
         return true;
       }
     }
     return false;
   }
 
-  $: isOutOfBonuds = isYearOutOfSelectableBounds(year, selectingFirst);
+  $: isOutOfBounds = isYearOutOfSelectableBounds(year, selectingFirst);
   $: isOutOfMax = calculateLimits.isOutOfMaxBounds(internalMaxDate, year, 0, 1);
   $: isOutOfMin = calculateLimits.isOutOfMinBounds(internalMinDate, year, 11, 31);
 </script>
@@ -40,8 +40,8 @@
     ? Number(firstYearSelected) <= year && secondYearSelected >= year
     : firstYearSelected == year}
   on:click|preventDefault={handleClick}
-  class:jp-date-range-menu-year-row-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
-  disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
+  class:jp-date-range-menu-year-row-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
+  disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
 >
   {year}
 </button>
diff --git a/packages/lib/src/form-fields/date-range/date-range.wc.svelte b/packages/lib/src/form-fields/date-range/date-range.wc.svelte
@@ -52,10 +52,10 @@
   export let minDate: string | Date;
   export let maxDate: string | Date;
   export let selectingFirst = true;
-  export let maxSelectibleDays: number;
-  export let minSelectibleDays: number;
-  export let maxDateSelectible: Date;
-  export let minDateSelectible: Date;
+  export let maxSelectableDays: number;
+  export let minSelectableDays: number;
+  export let maxDateSelectable: Date;
+  export let minDateSelectable: Date;
 
   let firstSelectedDateObject = new Date();
   let secondSelectedDateObject = new Date();
@@ -217,7 +217,7 @@
   ) {
     return (
       isOutOfMinBounds(internalMinDate, year, month, day) ||
-      (minDateAllowed > new Date(year, month, day) && !selectingFirst && maxSelectibleDays)
+      (minDateAllowed > new Date(year, month, day) && !selectingFirst && maxSelectableDays)
     );
   }
 
@@ -231,7 +231,7 @@
   ) {
     return (
       isOutOfMaxBounds(internalMaxDate, year, month, day) ||
-      (maxDateAllowed < new Date(year, month, day) && !selectingFirst && maxSelectibleDays)
+      (maxDateAllowed < new Date(year, month, day) && !selectingFirst && maxSelectableDays)
     );
   }
 
@@ -261,8 +261,8 @@
     openPicker = !openPicker;
   }
 
-  $: maxDateSelectible = calculateMaxDate(firstInternalValue, maxSelectibleDays);
-  $: minDateSelectible = calculateMinDate(firstInternalValue, maxSelectibleDays);
+  $: maxDateSelectable = calculateMaxDate(firstInternalValue, maxSelectableDays);
+  $: minDateSelectable = calculateMinDate(firstInternalValue, maxSelectableDays);
 
   $: internalMinDate = minDate ? (minDate instanceof Date ? minDate : new Date(minDate)) : null;
   $: internalMaxDate = maxDate ? (maxDate instanceof Date ? maxDate : new Date(maxDate)) : null;
@@ -272,15 +272,15 @@
     pickerYear,
     pickerMonth,
     1,
-    minDateSelectible,
+    minDateSelectable,
     selectingFirst
   );
   $: internalMaxMonthCheck = checkMaxBounds(
     internalMaxDate,
     pickerYear,
     pickerMonth,
     31,
-    maxDateSelectible,
+    maxDateSelectable,
     selectingFirst
   );
 
@@ -289,15 +289,15 @@
     pickerYear,
     0,
     1,
-    minDateSelectible,
+    minDateSelectable,
     selectingFirst
   );
   $: internalMaxYearCheck = checkMaxBounds(
     internalMaxDate,
     pickerYear,
     11,
     31,
-    maxDateSelectible,
+    maxDateSelectable,
     selectingFirst
   );
 
@@ -306,15 +306,15 @@
     2024 + yearPickerIndex * 4 * 6,
     0,
     1,
-    minDateSelectible,
+    minDateSelectable,
     selectingFirst
   );
   $: internalMaxYearPageCheck = checkMaxBounds(
     internalMaxDate,
     2024 + yearPickerIndex * 4 * 6,
     11,
     31,
-    maxDateSelectible,
+    maxDateSelectable,
     selectingFirst
   );
 
@@ -512,11 +512,11 @@
             <div class="jp-date-range-table-row">
               {#each row as col}
                 <Day
-                  {minDateSelectible}
-                  {maxDateSelectible}
+                  {minDateSelectable}
+                  {maxDateSelectable}
                   {col}
-                  {minSelectibleDays}
-                  {maxSelectibleDays}
+                  {minSelectableDays}
+                  {maxSelectableDays}
                   {selectingFirst}
                   {firstDateSelected}
                   {internalMaxDate}
@@ -577,15 +577,15 @@
               {#each row as year}
                 <div class="jp-date-range-menu-year-row-cell">
                   <Year
-                    {minDateSelectible}
-                    {maxDateSelectible}
+                    {minDateSelectable}
+                    {maxDateSelectable}
                     {internalMaxDate}
                     {internalMinDate}
                     {firstYearSelected}
                     {secondYearSelected}
                     {year}
                     {selectingFirst}
-                    {maxSelectibleDays}
+                    {maxSelectableDays}
                     on:yearSelected={handleYearSelected}
                   />
                 </div>
@@ -632,8 +632,8 @@
             {#each monthMap as month, index}
               <div class="jp-date-range-menu-month-grid-cell">
                 <Month
-                  {minDateSelectible}
-                  {maxDateSelectible}
+                  {minDateSelectable}
+                  {maxDateSelectable}
                   {index}
                   {month}
                   {pickerYear}
@@ -644,7 +644,7 @@
                   {firstYearSelected}
                   {secondYearSelected}
                   {selectingFirst}
-                  {maxSelectibleDays}
+                  {maxSelectableDays}
                   on:monthSelected={handleMonthSelected}
                 />
               </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,4 +15,4 @@ @@
       <jp-range label="range"></jp-range>
       <button type="submit">submit</button>
-    </form>
+    </form>