@ditojs/ui 2.71.0 → 2.73.0

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 (19) hide show
  1. package/dist/dito-ui.css +1 -1
  2. package/dist/dito-ui.es.js +547 -477
  3. package/dist/dito-ui.umd.js +2 -2
  4. package/package.json +5 -5
  5. package/src/components/DitoButton.vue +55 -0
  6. package/src/components/{DatePicker.vue → DitoDatePicker.vue} +14 -15
  7. package/src/components/{DateTimePicker.vue → DitoDateTimePicker.vue} +17 -16
  8. package/src/components/{Icon.vue → DitoIcon.vue} +16 -11
  9. package/src/components/{InputField.vue → DitoInput.vue} +26 -9
  10. package/src/components/{Pagination.vue → DitoPagination.vue} +11 -13
  11. package/src/components/{SwitchButton.vue → DitoSwitch.vue} +20 -17
  12. package/src/components/{TimePicker.vue → DitoTimePicker.vue} +12 -13
  13. package/src/components/index.js +10 -9
  14. package/src/styles/components/_button.scss +31 -10
  15. package/src/styles/components/_chevron.scss +1 -1
  16. package/src/styles/mixins/_field.scss +2 -2
  17. package/src/styles/mixins/_input.scss +2 -5
  18. /package/src/components/{Calendar.vue → DitoCalendar.vue} +0 -0
  19. /package/src/components/{Trigger.vue → DitoTrigger.vue} +0 -0
package/src/styles/components/_button.scss CHANGED
@@ -17,6 +17,27 @@
17
17
  min-height: 1.5em;
18
18
  @include user-select(none);
19
19
 
20
+ &--affixed {
21
+ display: inline-grid;
22
+ grid-template-columns: 1fr auto 1fr;
23
+ }
24
+
25
+ &__text,
26
+ &__prefix,
27
+ &__suffix {
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ }
32
+
33
+ &__prefix {
34
+ justify-content: flex-start;
35
+ }
36
+
37
+ &__suffix {
38
+ justify-content: flex-end;
39
+ }
40
+
20
41
  &:focus {
21
42
  border-color: $color-active;
22
43
  }
@@ -31,7 +52,7 @@
31
52
  box-shadow: inset 0 1px 2px 0 $color-shadow;
32
53
  }
33
54
 
34
- &.dito-selected {
55
+ &--selected {
35
56
  background: $button-color-active;
36
57
 
37
58
  &:hover {
@@ -39,7 +60,7 @@
39
60
  }
40
61
  }
41
62
 
42
- &.dito-active,
63
+ &--active,
43
64
  &[type='submit'] {
44
65
  color: $color-text-inverted;
45
66
  background: $color-active;
@@ -58,7 +79,7 @@
58
79
  }
59
80
  }
60
81
 
61
- &.dito-disabled,
82
+ &--disabled,
62
83
  &[disabled] {
63
84
  @extend %button-disabled;
64
85
  }
@@ -72,7 +93,7 @@
72
93
  white-space: nowrap;
73
94
 
74
95
  &,
75
- .dito-button-group {
96
+ &__group {
76
97
  > * {
77
98
  margin-left: var(--button-margin);
78
99
 
@@ -82,11 +103,11 @@
82
103
  }
83
104
  }
84
105
 
85
- .dito-button-group + .dito-button-group {
106
+ &__group + &__group {
86
107
  margin-left: 1.5em;
87
108
  }
88
109
 
89
- &.dito-buttons-round {
110
+ &--round {
90
111
  .dito-button {
91
112
  padding: $button-round-padding;
92
113
  min-width: $input-height;
@@ -95,16 +116,16 @@
95
116
  }
96
117
  }
97
118
 
98
- &.dito-buttons-small {
119
+ &--small {
99
120
  --button-margin: 1px;
100
121
  }
101
122
 
102
- &.dito-buttons-round,
103
- &.dito-buttons-small {
123
+ &--round,
124
+ &--small {
104
125
  line-height: 1em;
105
126
  }
106
127
 
107
- &.dito-buttons-toolbar {
128
+ &--toolbar {
108
129
  justify-content: flex-start;
109
130
 
110
131
  .dito-button {
package/src/styles/components/_chevron.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  transition: transform 0.1s ease;
13
13
  }
14
14
 
15
- &.dito-open::before {
15
+ &--open::before {
16
16
  transform: rotate(90deg);
17
17
  }
18
18
 
package/src/styles/mixins/_field.scss CHANGED
@@ -6,12 +6,12 @@
6
6
  padding: $input-padding;
7
7
  background: $color-white;
8
8
 
9
- .dito-has-errors & {
9
+ .dito-container--has-errors & {
10
10
  border-color: $color-error;
11
11
  }
12
12
 
13
13
  &:disabled,
14
- .dito-disabled & {
14
+ .dito-container--disabled & {
15
15
  color: $color-disabled;
16
16
  pointer-events: none;
17
17
  cursor: text;
package/src/styles/mixins/_input.scss CHANGED
@@ -9,11 +9,8 @@
9
9
 
10
10
  &:focus,
11
11
  &:focus-within,
12
- &.dito-focus {
13
- &,
14
- .dito-inherit-focus {
15
- border-color: $color-active;
16
- }
12
+ &.dito-input--focus {
13
+ border-color: $color-active;
17
14
  }
18
15
  }
19
16
 
/package/src/components/{Trigger.vue → DitoTrigger.vue} RENAMED
File without changes