@itfin/components 1.2.10 → 1.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/package.json +1 -1
  2. package/src/components/datepicker/DatePickerInline.vue +1 -1
  3. package/src/components/datepicker/DateRangePicker.vue +1 -1
  4. package/src/components/datepicker/DateRangePickerInline.vue +1 -1
  5. package/src/components/datepicker/MonthPicker.vue +3 -1
  6. package/src/components/datepicker/PeriodPicker.vue +1 -1
  7. package/src/components/overlay/SensitiveOverlay.vue +10 -1
  8. package/src/components/pdf-viewer/PdfViewerSpa.vue +1 -1
  9. package/src/components/popover/Popover.vue +1 -1
  10. package/src/helpers/validators.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itfin/components",
3
- "version": "1.2.10",
3
+ "version": "1.2.13",
4
4
  "author": "Vitalii Savchuk <esvit666@gmail.com>",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/components/datepicker/DatePickerInline.vue CHANGED
@@ -33,7 +33,7 @@
33
33
  display: inline-block !important;
34
34
  }
35
35
 
36
- @media (prefers-color-scheme: notdark) {
36
+ [data-theme="dark"] & {
37
37
  .btn-outline-primary {
38
38
  &.active {
39
39
  color: $dark-body-bg;
package/src/components/datepicker/DateRangePicker.vue CHANGED
@@ -99,7 +99,7 @@
99
99
  .form-control.focused, .form-control.focused input.form-control {
100
100
  background-color: $input-focus-border-color;
101
101
  }
102
- @media (prefers-color-scheme: notdark) {
102
+ [data-theme="dark"] & {
103
103
  &__dropdown {
104
104
  box-shadow: 0 0 0 2px $dark-input-focus-border;
105
105
  }
package/src/components/datepicker/DateRangePickerInline.vue CHANGED
@@ -29,7 +29,7 @@
29
29
  .itf-datepicker-inline {
30
30
  display: inline-flex;
31
31
 
32
- @media (prefers-color-scheme: notdark) {
32
+ [data-theme="dark"] & {
33
33
  .btn-outline-primary {
34
34
  &.active {
35
35
  color: $dark-body-bg;
package/src/components/datepicker/MonthPicker.vue CHANGED
@@ -8,6 +8,7 @@
8
8
  <input
9
9
  ref="input"
10
10
  readonly
11
+ :disabled="disabled"
11
12
  class="form-control"
12
13
  :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
13
14
  @focus="onFocus"
@@ -56,7 +57,7 @@
56
57
  box-shadow: $input-btn-focus-box-shadow;
57
58
  }
58
59
 
59
- @media (prefers-color-scheme: notdark) {
60
+ [data-theme="dark"] & {
60
61
  background-color: $dark-body-bg;
61
62
  border-color: $dark-border-color;
62
63
  box-shadow: 0 0 0 2px $dark-input-focus-border;
@@ -82,6 +83,7 @@ class itfMonthPicker extends Vue {
82
83
  @Inject({ default: null }) itemLabel;
83
84
 
84
85
  @Prop({ type: String }) value;
86
+ @Prop({ type: Boolean }) disabled;
85
87
  @Prop({ type: String, default: 'ISO' }) valueFormat;
86
88
  @Prop({ type: String, default: 'MMMM, yyyy' }) displayFormat;
87
89
  @Prop({ type: String, default: '' }) placeholder;
package/src/components/datepicker/PeriodPicker.vue CHANGED
@@ -157,7 +157,7 @@
157
157
  box-shadow: $input-btn-focus-box-shadow;
158
158
  }
159
159
 
160
- @media (prefers-color-scheme: notdark) {
160
+ [data-theme="dark"] & {
161
161
  background-color: $dark-body-bg;
162
162
  border-color: $dark-border-color;
163
163
  box-shadow: 0 0 0 2px $dark-input-focus-border;
package/src/components/overlay/SensitiveOverlay.vue CHANGED
@@ -61,7 +61,7 @@
61
61
  left: 0;
62
62
  right: 0;
63
63
  bottom: 0;
64
- background-color: rgba(255, 255, 255);
64
+ background-color: rgb(255, 255, 255);
65
65
  transition: opacity .25s;
66
66
 
67
67
  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
@@ -71,6 +71,15 @@
71
71
  }
72
72
  }
73
73
  }
74
+ [data-theme="dark"] {
75
+ .itf-sensitive-overlay__cover {
76
+ background-color: rgb(46, 49, 54);
77
+
78
+ @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
79
+ background-color: rgba(46, 49, 54, 0.5);
80
+ }
81
+ }
82
+ }
74
83
  </style>
75
84
  <script>
76
85
  import { Vue, Prop, Component } from 'vue-property-decorator';
package/src/components/pdf-viewer/PdfViewerSpa.vue CHANGED
@@ -1336,7 +1336,7 @@ html {
1336
1336
  }
1337
1337
  }
1338
1338
 
1339
- @media (prefers-color-scheme: notdark) {
1339
+ @media (prefers-color-scheme: dark) {
1340
1340
  html {
1341
1341
  content: "dark";
1342
1342
  }
package/src/components/popover/Popover.vue CHANGED
@@ -26,7 +26,7 @@
26
26
  display: inline-block;
27
27
  }
28
28
 
29
- @media (prefers-color-scheme: notdark) {
29
+ [data-theme="dark"] {
30
30
  .itf-popover {
31
31
  .border-right {
32
32
  border-color: $dark-border-color;
package/src/helpers/validators.js CHANGED
@@ -8,7 +8,7 @@ const LINKED_IN_REGEXP = /(http(s)?:\/\/)?([\w]+\.)?linkedin\.com\/(pub|in|profi
8
8
  const SPECIAL_CHARS_REGEXP = /^[\w_\-+~,/\\:'"().&*|[\]?# ]+$/i;
9
9
  const GREETINGS_REGEXP = /\b(dr|mr|mister|mrs|ms|miss|sir|hello|hi)\b/i;
10
10
  const PHONE_REGEXP = /(\+?\(?\+?[0-9]{1,3}\)?[-. ]+([0-9]{2,4})[-. ]?([0-9]{3,5}))|\+?[0-9]{7,}/gi;
11
- const DOUBLE_REGEXP = /^-?\d{0,11}(\.\d{0,2}){0,1}$/;
11
+ const DOUBLE_REGEXP = /^-?\d{0,11}(\.\d{0,4}){0,1}$/;
12
12
  const EMAIL_REGEXP = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;
13
13
  const EMAIL_LIST_REGEXP = /^(\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]{2,4}\s*?,?\s*?)+$/g;
14
14
  const HEX_REGEXP = /[0-9A-Fa-f]{6}/;