feat(core): change default values for datepicker attributes

haiilo · Apr 24, 2024 · c67bcb2 · c67bcb2
1 parent 5f67d5a
commit c67bcb2
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 29 deletions.
diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts
@@ -368,15 +368,15 @@ export declare interface CatDate extends Components.CatDate {
 }
 
 @ProxyCmp({
-  inputs: ['max', 'min', 'noClear', 'noHint', 'noToday', 'noWeeks', 'range', 'size', 'value'],
+  inputs: ['hint', 'max', 'min', 'noClear', 'noToday', 'range', 'size', 'value', 'weeks'],
   methods: ['select', 'clear', 'resetView']
 })
 @Component({
   selector: 'cat-date-inline',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['max', 'min', 'noClear', 'noHint', 'noToday', 'noWeeks', 'range', 'size', 'value']
+  inputs: ['hint', 'max', 'min', 'noClear', 'noToday', 'range', 'size', 'value', 'weeks']
 })
 export class CatDateInline {
   protected el: HTMLElement;

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -421,6 +421,10 @@ export namespace Components {
           * Clear the picker.
          */
         "clear": () => Promise<void>;
+        /**
+          * Shows an arrow keys navigation hint.
+         */
+        "hint": boolean;
         /**
           * A maximum value for the date, given in local ISO 8601 date format YYYY-MM-DD.
          */
@@ -433,18 +437,10 @@ export namespace Components {
           * Hides the clear button.
          */
         "noClear": boolean;
-        /**
-          * Hides the arrow navigation hint.
-         */
-        "noHint": boolean;
         /**
           * Hides the today button.
          */
         "noToday": boolean;
-        /**
-          * Hides the week numbers.
-         */
-        "noWeeks": boolean;
         /**
           * Allow the selection of a range of dates, i.e. start and end date.
          */
@@ -466,6 +462,10 @@ export namespace Components {
           * The value of the control, given in local ISO 8601 date format YYYY-MM-DD.
          */
         "value"?: string;
+        /**
+          * Show week numbers.
+         */
+        "weeks": boolean;
     }
     interface CatDatepicker {
         /**
@@ -2541,6 +2541,10 @@ declare namespace LocalJSX {
      * An inline date picker component to select a date.
      */
     interface CatDateInline {
+        /**
+          * Shows an arrow keys navigation hint.
+         */
+        "hint"?: boolean;
         /**
           * A maximum value for the date, given in local ISO 8601 date format YYYY-MM-DD.
          */
@@ -2553,18 +2557,10 @@ declare namespace LocalJSX {
           * Hides the clear button.
          */
         "noClear"?: boolean;
-        /**
-          * Hides the arrow navigation hint.
-         */
-        "noHint"?: boolean;
         /**
           * Hides the today button.
          */
         "noToday"?: boolean;
-        /**
-          * Hides the week numbers.
-         */
-        "noWeeks"?: boolean;
         /**
           * Emitted when the value is changed.
          */
@@ -2581,6 +2577,10 @@ declare namespace LocalJSX {
           * The value of the control, given in local ISO 8601 date format YYYY-MM-DD.
          */
         "value"?: string;
+        /**
+          * Show week numbers.
+         */
+        "weeks"?: boolean;
     }
     interface CatDatepicker {
         /**

diff --git a/core/src/components/cat-date-inline/cat-date-inline.tsx b/core/src/components/cat-date-inline/cat-date-inline.tsx
@@ -27,19 +27,19 @@ export class CatDateInline {
   @Prop() noClear = false;
 
   /**
-   * Hides the arrow navigation hint.
+   * Shows an arrow keys navigation hint.
    */
-  @Prop() noHint = false;
+  @Prop() hint = false;
 
   /**
    * Hides the today button.
    */
   @Prop() noToday = false;
 
   /**
-   * Hides the week numbers.
+   * Show week numbers.
    */
-  @Prop() noWeeks = false;
+  @Prop() weeks = false;
 
   /**
    * The size of the date picker.
@@ -182,7 +182,7 @@ export class CatDateInline {
     const [dateStart, dateEnd] = this.getValue();
     return (
       <Host>
-        <div class={{ picker: true, 'picker-small': this.size === 's', 'picker-weeks': !this.noWeeks }}>
+        <div class={{ picker: true, 'picker-small': this.size === 's', 'picker-weeks': this.weeks }}>
           <div class="picker-head">
             <cat-button
               icon="$cat:datepicker-year-prev"
@@ -232,7 +232,7 @@ export class CatDateInline {
                 <abbr title={this.locale.days.long[i]}>{this.locale.days.short[i]}</abbr>
               ))}
             </div>
-            {!this.noWeeks && (
+            {this.weeks && (
               <div class="picker-grid-weeks">
                 {dateGrid
                   .filter((_, i) => i % 7 === 0)
@@ -281,7 +281,7 @@ export class CatDateInline {
                 {this.locale.today}
               </cat-button>
             )}
-            {!this.noHint && <p class="cursor-help">{this.locale.arrowKeys}</p>}
+            {this.hint && <p class="cursor-help">{this.locale.arrowKeys}</p>}
             {!this.noClear && (
               <cat-button size="s" disabled={!this.value} data-dropdown-no-close onClick={() => this.clear()}>
                 {this.locale.clear}

diff --git a/core/src/components/cat-date-inline/readme.md b/core/src/components/cat-date-inline/readme.md
@@ -13,15 +13,15 @@ An inline date picker component to select a date.
 
 | Property  | Attribute  | Description                                                                   | Type                  | Default     |
 | --------- | ---------- | ----------------------------------------------------------------------------- | --------------------- | ----------- |
+| `hint`    | `hint`     | Shows an arrow keys navigation hint.                                          | `boolean`             | `false`     |
 | `max`     | `max`      | A maximum value for the date, given in local ISO 8601 date format YYYY-MM-DD. | `string \| undefined` | `undefined` |
 | `min`     | `min`      | A minimum value for the date, given in local ISO 8601 date format YYYY-MM-DD. | `string \| undefined` | `undefined` |
 | `noClear` | `no-clear` | Hides the clear button.                                                       | `boolean`             | `false`     |
-| `noHint`  | `no-hint`  | Hides the arrow navigation hint.                                              | `boolean`             | `false`     |
 | `noToday` | `no-today` | Hides the today button.                                                       | `boolean`             | `false`     |
-| `noWeeks` | `no-weeks` | Hides the week numbers.                                                       | `boolean`             | `false`     |
 | `range`   | `range`    | Allow the selection of a range of dates, i.e. start and end date.             | `boolean`             | `false`     |
 | `size`    | `size`     | The size of the date picker.                                                  | `"m" \| "s"`          | `'m'`       |
 | `value`   | `value`    | The value of the control, given in local ISO 8601 date format YYYY-MM-DD.     | `string \| undefined` | `undefined` |
+| `weeks`   | `weeks`    | Show week numbers.                                                            | `boolean`             | `false`     |
 
 
 ## Events

diff --git a/core/src/components/cat-date/cat-date.tsx b/core/src/components/cat-date/cat-date.tsx
@@ -297,6 +297,8 @@ export class CatDate {
                 min={this.min}
                 max={this.max}
                 value={this.value}
+                hint
+                weeks
                 noClear
                 onCatChange={this.onDateChange.bind(this)}
               ></cat-date-inline>

diff --git a/vue/src/components.ts b/vue/src/components.ts
@@ -127,9 +127,9 @@ export const CatDate = /*@__PURE__*/ defineContainer<JSX.CatDate>('cat-date', un
 
 export const CatDateInline = /*@__PURE__*/ defineContainer<JSX.CatDateInline>('cat-date-inline', undefined, [
   'noClear',
-  'noHint',
+  'hint',
   'noToday',
-  'noWeeks',
+  'weeks',
   'size',
   'min',
   'max',