Skip to content

Commit 4f37ef4

Browse files
javadbatjavadbat
committed
minor bug fix
1 parent a324892 commit 4f37ef4

File tree

5 files changed

+51
-116
lines changed

5 files changed

+51
-116
lines changed

‎CHANGELOG.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
## [5.0.0] - 2024-7-2
44
### Breaking changes:
5-
- refactor popover and separate it from inside popover to jb-popover web-component
6-
- refactor input and use jb-input instead of inner input code and handlers so all styles related to the input need to be refactored
5+
- refactor popover and separate it from inside popover to jb-popover web-component.
6+
- refactor input and use jb-input instead of inner input code and handlers so all styles related to the input need to be refactored.
7+
- change `use-persian-number` to `show-persian-number` to make all jb-design-system use the same names and approach.
78
### new features
89
- better focus and caret pos handling
910
- less package size

‎README.md

Lines changed: 24 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,9 @@ web component date input (picker) to get date (jalali & gregorian) from user.
3434

3535
- compatible with native HTML `form` element to send data to server.
3636

37-
Demo & Sample
38-
in github: <https://javadbat.github.io/jb-date-input/>
37+
Demo & Sample:
38+
39+
in github pages: <https://javadbat.github.io/jb-date-input/>
3940
in codepen: <https://codepen.io/javadbat/pen/qBRyYKY>
4041

4142
## instructions
@@ -228,11 +229,11 @@ note that providing & getting value with `Date` is faster and more perfomant tha
228229

229230

230231
## show persian number
231-
if you want to show persian number instead of English number char you just have to set `use-persian-number` attribute like this:
232+
if you want to show persian number instead of English number char you just have to set `show-persian-number` attribute like this:
232233
```javascript
233-
<jb-date-input use-persian-number></jb-date-input >
234+
<jb-date-input show-persian-number></jb-date-input >
234235
//or
235-
<jb-date-input use-persian-number="true"></jb-date-input >
236+
<jb-date-input show-persian-number="true"></jb-date-input >
236237
```
237238
## customize calendar button trigger
238239

@@ -285,47 +286,25 @@ body{
285286
/* if you need more margin */
286287
--jb-date-input-margin: 16px 32px;
287288
/* if you dont want rounded corner */
288-
--jb-date-input-border-radius:0px;
289+
--jb-input-border-radius:0px;
289290
/* if you want different text color*/
290-
--jb-date-input-value-color:red;
291+
--jb-input-value-color:red;
291292
}
292293
```
294+
295+
you can customize jb-date-input look by setting css variable in your app.
296+
jb-date-input use [jb-input](https://github.com/javadbat/jb-input) and [jb-calendar](https://github.com/javadbat/jb-calendar) and [jb-popover](https://github.com/javadbat/jb-popover) underneath so to change the styles of your component read custom style section of these components and set their css variable.
297+
more than above here is the css variable that we use in jb-date-input itself:
298+
293299
#### variable list
294300

295301
| css variable name | description |
296302
| ------------- | ------------- |
297303
| --jb-date-input-margin | web-component margin default is `0 0` |
298-
| --jb-date-input-border-radius | web-component border-radius default is `16px` |
299-
| --jb-date-input-border-color | border color of select in normal mode |
300-
| --jb-date-input-border-color-focus | border color when user focus on input |
301-
| --jb-date-input-bgcolor | background color of input |
302-
| --jb-date-input-message-box-display | default is block but if you set it to none message box will be hidden |
303-
| --jb-date-input-message-box-color | change color of message under box |
304-
| --jb-date-input-message-box-color-error | change color of message under box |
305-
| --jb-date-input-message-box-font-size | font-size of message box under the input box |
306-
| --jb-date-input-message-box-font-weight | font-weight of message box under the input box |
307-
| --jb-date-input-message-box-padding | font-size of message box under the input box |
308-
| --jb-date-input-text-align | text align of input |
309-
| --jb-date-input-box-height | height of input box |
310-
| --jb-date-input-border-width | general border width default is `1px` |
311-
| --jb-date-input-border-bottom-width | border bottom width default is `3px` |
312-
| --jb-date-input-label-font-size | font size of date input label default is `0.8em` |
313-
| --jb-date-input-label-margin | change label margin default is `0 4px` |
314-
| --jb-date-input-label-weight | label font-weight default is normal |
315-
| --jb-date-input-placeholder-color | input placeholder color default is `initial` |
316-
| --jb-date-input-placeholder-font-size | place holder font size default is `1.1em` |
317-
| --jb-date-input-value-color | date input value color default is `#1f1735` |
318-
| --jb-date-input-value-font-size | date input value font-size |
319-
| --jb-date-input-calender-wrapper-bg-color | calender background color default color is `#fff` |
320-
| --jb-date-input-calendar-wrapper-z-index | opend calendar `z-index` is `10` but you can change it to number you want |
321-
| --jb-date-input-calender-wrapper-border-radius| calendar border radius default is `24px` |
322-
| --jb-date-input-input-margin | input margin default is `4px 0` |
323-
| --jb-date-input-box-shadow | input box-shadow default is none |
324-
| --jb-date-input-box-shadow-focus | input box-shadow when input is focused default is none |
325304
| --jb-date-input-calendar-trigger-display | set it no none to hide calendar icon |
305+
| --jb-date-input-calendar-trigger-width | set calendar icon width |
306+
| --jb-date-input-calendar-trigger-height | set calendar icon height |
326307

327-
328-
if you want to change opened date picker style please read [jb-calendar](https://github.com/javadbat/jb-calendar) readme file
329308
## add custom element in input box
330309

331310
in jb-input you can put icon or any other custom html DOM in input box. to doing so you just have to place custom DOM in `jb-date-input` tag and add `slot="start-section"` or `slot="end-section"` to place it before or after input field.
@@ -336,4 +315,12 @@ example:
336315
<div slot="end-section">after</div>
337316
<div slot="start-section">before</div>
338317
</jb-date-input>
339-
```
318+
```
319+
320+
## Other Related Docs:
321+
322+
- see [jb-date-input-react](https://github.com/javadbat/jb-date-input-react) if you want to use this component in react
323+
324+
- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/master/docs/component-list.md) for more components
325+
326+
- use [Contribution Guide](https://github.com/javadbat/design-system/blob/master/docs/contribution-guide.md) if you want to contribute in this component.

‎lib/jb-date-input.scss

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -13,61 +13,6 @@
1313
&:focus-visible {
1414
outline: none;
1515
}
16-
17-
//TODO: remove this styles and replace it with jb-popover
18-
// .calendar-container {
19-
// position: absolute;
20-
// display: none;
21-
// inset-block-start: 64px;
22-
// inset-inline-start: 0;
23-
// z-index: var(--jb-date-input-calendar-wrapper-z-index, 10);
24-
// will-change: transform;
25-
// transition: transform 0.3s 0s ease;
26-
// @include mobile{
27-
// inset-block-start: 0;
28-
// inset-inline-start: 0;
29-
// bottom: 0;
30-
// position: fixed;
31-
// width: 100vw;
32-
// height: 100vh;
33-
// background-color: rgba(0,0,0,0.5);
34-
// backdrop-filter: blur(5px);
35-
// display: none;
36-
// grid-template-rows: 1fr auto;
37-
// grid-template-columns: 1fr;
38-
// grid-template-areas: "." "calendar-wrapper";
39-
// overflow-x: hidden;
40-
// }
41-
// &.--show {
42-
// display: grid;
43-
// }
44-
// .calendar-wrapper{
45-
// background-color: var(--jb-date-input-calender-wrapper-bg-color,#fff);
46-
// border-radius: var(--jb-date-input-calender-wrapper-border-radius, 24px);
47-
// padding: 16px;
48-
// box-shadow:
49-
// 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
50-
// -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
51-
// display: grid;
52-
// align-items: center;
53-
// justify-content: center;
54-
// box-sizing: border-box;
55-
// @include mobile{
56-
// border-radius: var(--jb-date-input-calender-wrapper-border-radius, 24px) var(--jb-date-input-calender-wrapper-border-radius, 24px) 0 0;
57-
// grid-area: calendar-wrapper;
58-
// padding: 0;
59-
// padding: 32px 0;
60-
// }
61-
// }
62-
// jb-calendar {
63-
// &:focus {
64-
// outline: none;
65-
// }
66-
// }
67-
68-
// }
69-
70-
// }
7116
.calendar-trigger {
7217
display: var(--jb-date-input-calendar-trigger-display, block);
7318
width: var(--jb-date-input-calendar-trigger-width, 1.5rem);

‎lib/jb-date-input.ts

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export class JBDateInputWebComponent extends HTMLElement implements WithValidati
110110
//standardized input value
111111
get #sInputValue(): string {
112112
let value = this.#inputValue;
113-
if (this.#usePersianDigits) {
113+
if (this.#showPersianNumber) {
114114
value = faToEnDigits(value);
115115
}
116116
return value;
@@ -128,6 +128,8 @@ export class JBDateInputWebComponent extends HTMLElement implements WithValidati
128128
set showCalendar(value) {
129129
this.#showCalendar = value;
130130
if (value == true) {
131+
//we have to do it because js dont tell us when dir change so we have to check and set it every time we open calendar
132+
this.elements.calendar.setupStyleBaseOnCssDirection();
131133
this.elements.popover.open();
132134
this.elements.calendarTriggerButton.classList.add('--active');
133135
} else {
@@ -282,12 +284,12 @@ export class JBDateInputWebComponent extends HTMLElement implements WithValidati
282284
get valueFormat() {
283285
return this.#dateFactory.valueFormat;
284286
}
285-
#usePersianDigits = false;
286-
get usePersianDigits() {
287-
return this.#usePersianDigits;
287+
#showPersianNumber = false;
288+
get showPersianNumber() {
289+
return this.#showPersianNumber;
288290
}
289-
set usePersianDigits(value) {
290-
this.#usePersianDigits = value;
291+
set showPersianNumber(value) {
292+
this.#showPersianNumber = value;
291293
this.#updateInputTextFromValue();
292294
}
293295
constructor() {
@@ -393,7 +395,7 @@ export class JBDateInputWebComponent extends HTMLElement implements WithValidati
393395
});
394396
}
395397
static get dateInputObservedAttributes() {
396-
return ['value-type', 'value', 'name', 'format', 'min', 'max', 'required', 'input-type', 'direction', 'use-persian-number', 'placeholder'];
398+
return ['value-type', 'value', 'name', 'format', 'min', 'max', 'required', 'input-type', 'direction', 'show-persian-number', 'placeholder'];
397399
}
398400
static get observedAttributes() {
399401
return [...JBInputWebComponent.observedAttributes, ...JBDateInputWebComponent.dateInputObservedAttributes];
@@ -440,14 +442,14 @@ export class JBDateInputWebComponent extends HTMLElement implements WithValidati
440442
case 'direction':
441443
this.elements.calendar.setAttribute('direction', value);
442444
break;
443-
case 'use-persian-number':
445+
case 'show-persian-number':
444446
if (value == 'true' || value == '') {
445-
this.usePersianDigits = true;
446-
this.elements.calendar.usePersianNumber = true;
447+
this.showPersianNumber = true;
448+
this.elements.calendar.showPersianNumber = true;
447449
}
448450
if (value == 'false' || value == null) {
449-
this.usePersianDigits = false;
450-
this.elements.calendar.usePersianNumber = false;
451+
this.showPersianNumber = false;
452+
this.elements.calendar.showPersianNumber = false;
451453
}
452454
break;
453455
case 'placeholder':
@@ -522,7 +524,7 @@ export class JBDateInputWebComponent extends HTMLElement implements WithValidati
522524
}
523525
this.#inputRegex.lastIndex = 0;
524526
const newValueArr = this.#inputValue.split('');
525-
if (this.#usePersianDigits) {
527+
if (this.#showPersianNumber) {
526528
char = enToFaDigits(char);
527529
}
528530
newValueArr[pos] = char;
@@ -838,7 +840,7 @@ export class JBDateInputWebComponent extends HTMLElement implements WithValidati
838840
}
839841
}
840842
//convert to fa char if needed
841-
if (this.#usePersianDigits) {
843+
if (this.#showPersianNumber) {
842844
yearString = enToFaDigits(yearString);
843845
monthString = enToFaDigits(monthString);
844846
dayString = enToFaDigits(dayString);
@@ -1056,11 +1058,11 @@ export class JBDateInputWebComponent extends HTMLElement implements WithValidati
10561058
/**
10571059
* set opened calendar date when date input value is empty
10581060
* @public
1059-
* @param {number} year which year you want to show in empty state in calendar.
1060-
* @param {number} month which month you want to show in empty state in calendar.
1061-
* @param {InputTypes} dateType default is your configured input-type but you can set it otherwise if you want to change other type of calendar in case of change in input-type.
1061+
* @param year which year you want to show in empty state in calendar.
1062+
* @param month which month you want to show in empty state in calendar.
1063+
* @param dateType default is your configured input-type but you can set it otherwise if you want to change other type of calendar in case of change in input-type.
10621064
*/
1063-
setCalendarDefaultDateView(year: number, month: number, dateType: InputTypes | undefined) {
1065+
setCalendarDefaultDateView(year: number, month: number, dateType: InputType | undefined) {
10641066
if (year && month) {
10651067
this.#dateFactory.setCalendarDefaultDateView(year, month, dateType);
10661068
this.#updateCalendarView();

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"jalali web-component",
2929
"jalali web component"
3030
],
31-
"version": "5.0.0-beta.0",
31+
"version": "5.0.0",
3232
"bugs": "https://github.com/javadbat/jb-date-input/issues",
3333
"license": "MIT",
3434
"files": [
@@ -64,9 +64,9 @@
6464
},
6565
"dependencies": {
6666
"date-fns": "^2.28.0",
67-
"date-fns-jalali": "^2.28.0",
68-
"jb-calendar": ">=4.1.2",
69-
"jb-popover":">=0.0.3",
67+
"date-fns-jalali": "^2.28.0-1",
68+
"jb-calendar": ">=4.1.5",
69+
"jb-popover":">=1.0.0",
7070
"jb-validation":">=0.0.2",
7171
"jb-input":">=3.1.0"
7272
}

0 commit comments

Comments
 (0)