@dolanske/vui 0.3.4 → 0.5.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 (114) hide show
  1. package/LICENSE +673 -673
  2. package/README.md +41 -40
  3. package/dist/components/Dropdown/DropdownItem.vue.d.ts +1 -0
  4. package/dist/components/Flex/Flex.vue.d.ts +3 -1
  5. package/dist/components/Grid/Grid.vue.d.ts +3 -1
  6. package/dist/components/Tabs/Tabs.vue.d.ts +4 -0
  7. package/dist/style.css +1 -1
  8. package/dist/vui.js +1547 -1534
  9. package/package.json +68 -68
  10. package/src/App.vue +176 -175
  11. package/src/components/Accordion/Accordion.vue +91 -91
  12. package/src/components/Accordion/AccordionGroup.vue +43 -43
  13. package/src/components/Accordion/accordion.scss +81 -80
  14. package/src/components/Alert/Alert.vue +53 -53
  15. package/src/components/Alert/alert.scss +80 -80
  16. package/src/components/Avatar/Avatar.vue +50 -50
  17. package/src/components/Avatar/avatar.scss +52 -52
  18. package/src/components/Badge/Badge.vue +21 -21
  19. package/src/components/Badge/badge.scss +89 -89
  20. package/src/components/Breadcrumbs/BreadcrumbItem.vue +26 -26
  21. package/src/components/Breadcrumbs/Breadcrumbs.vue +33 -33
  22. package/src/components/Breadcrumbs/breadcrumbs.scss +30 -30
  23. package/src/components/Button/Button.vue +90 -90
  24. package/src/components/Button/button.scss +178 -176
  25. package/src/components/ButtonGroup/ButtonGroup.vue +25 -25
  26. package/src/components/ButtonGroup/button-group.scss +51 -51
  27. package/src/components/Calendar/Calendar.vue +63 -60
  28. package/src/components/Calendar/calendar.scss +60 -56
  29. package/src/components/Card/Card.vue +48 -48
  30. package/src/components/Card/card.scss +53 -53
  31. package/src/components/Checkbox/Checkbox.vue +51 -52
  32. package/src/components/Checkbox/checkbox.scss +75 -66
  33. package/src/components/CopyClipboard/CopyClipboard.vue +82 -82
  34. package/src/components/CopyClipboard/copy-clipboard.scss +17 -17
  35. package/src/components/Divider/Divider.vue +44 -44
  36. package/src/components/Divider/divider.scss +35 -35
  37. package/src/components/Drawer/Drawer.vue +97 -97
  38. package/src/components/Drawer/drawer.scss +36 -36
  39. package/src/components/Dropdown/Dropdown.vue +111 -111
  40. package/src/components/Dropdown/DropdownItem.vue +33 -29
  41. package/src/components/Dropdown/DropdownTitle.vue +8 -8
  42. package/src/components/Dropdown/dropdown-item.scss +77 -0
  43. package/src/components/Dropdown/dropdown.scss +39 -117
  44. package/src/components/Flex/Flex.vue +113 -106
  45. package/src/components/Grid/Grid.vue +60 -54
  46. package/src/components/Input/Counter.vue +70 -70
  47. package/src/components/Input/Dropzone.vue +65 -65
  48. package/src/components/Input/File.vue +15 -15
  49. package/src/components/Input/Input.vue +121 -121
  50. package/src/components/Input/Password.vue +47 -47
  51. package/src/components/Input/Textarea.vue +76 -76
  52. package/src/components/Input/input.scss +208 -208
  53. package/src/components/Kbd/Kbd.vue +48 -48
  54. package/src/components/Kbd/KbdGroup.vue +31 -31
  55. package/src/components/Kbd/kbd.scss +18 -18
  56. package/src/components/Modal/Confirm.vue +56 -56
  57. package/src/components/Modal/Modal.vue +91 -91
  58. package/src/components/Modal/modal.scss +49 -49
  59. package/src/components/OTP/OTP.vue +133 -133
  60. package/src/components/OTP/OTPItem.vue +37 -37
  61. package/src/components/OTP/otp.scss +83 -83
  62. package/src/components/Pagination/Pagination.vue +74 -74
  63. package/src/components/Pagination/pagination.ts +78 -78
  64. package/src/components/Popout/Popout.vue +42 -42
  65. package/src/components/Popout/popout.scss +8 -8
  66. package/src/components/Progress/Progress.vue +90 -90
  67. package/src/components/Progress/progress.scss +41 -41
  68. package/src/components/Radio/Radio.vue +36 -36
  69. package/src/components/Radio/RadioGroup.vue +40 -40
  70. package/src/components/Radio/radio.scss +68 -59
  71. package/src/components/Select/Select.vue +180 -180
  72. package/src/components/Select/select.scss +44 -44
  73. package/src/components/Sheet/Sheet.vue +92 -92
  74. package/src/components/Sheet/sheet.scss +60 -60
  75. package/src/components/Sidebar/Sidebar.vue +102 -0
  76. package/src/components/Sidebar/sidebar.scss +123 -0
  77. package/src/components/Skeleton/Skeleton.vue +43 -43
  78. package/src/components/Skeleton/skeleton.scss +14 -14
  79. package/src/components/Spinner/Spinner.vue +42 -42
  80. package/src/components/Spinner/spinner.scss +46 -46
  81. package/src/components/Switch/Switch.vue +30 -30
  82. package/src/components/Switch/switch.scss +60 -52
  83. package/src/components/Table/Cell.vue +23 -23
  84. package/src/components/Table/Header.vue +59 -59
  85. package/src/components/Table/Row.vue +9 -9
  86. package/src/components/Table/SelectAll.vue +23 -23
  87. package/src/components/Table/SelectRow.vue +29 -29
  88. package/src/components/Table/Table.vue +66 -66
  89. package/src/components/Table/table.scss +134 -134
  90. package/src/components/Table/table.ts +244 -244
  91. package/src/components/Tabs/Tab.vue +27 -27
  92. package/src/components/Tabs/Tabs.vue +89 -82
  93. package/src/components/Tabs/tabs.scss +80 -79
  94. package/src/components/Toast/Toasts.vue +47 -47
  95. package/src/components/Toast/toast.scss +41 -41
  96. package/src/components/Toast/toast.ts +68 -68
  97. package/src/components/Tooltip/Tooltip.vue +86 -86
  98. package/src/components/Tooltip/tooltip.scss +4 -4
  99. package/src/index.scss +1 -1
  100. package/src/index.ts +119 -119
  101. package/src/internal/Backdrop/Backdrop.vue +22 -22
  102. package/src/internal/Backdrop/backdrop.scss +28 -28
  103. package/src/main.ts +5 -5
  104. package/src/shared/helpers.ts +74 -74
  105. package/src/shared/types.ts +29 -29
  106. package/src/style/animation.scss +21 -21
  107. package/src/style/core.scss +150 -148
  108. package/src/style/layout.scss +168 -136
  109. package/src/style/media-query.scss +29 -29
  110. package/src/style/reset.scss +135 -135
  111. package/src/style/{fonts.scss → text.scss} +74 -53
  112. package/src/style/tooltip.scss +128 -128
  113. package/src/style/typography.scss +338 -338
  114. package/src/style/utils.scss +36 -36
package/src/components/Table/table.scss CHANGED
@@ -1,134 +1,134 @@
1
- .vui-table-container {
2
- display: block;
3
- width: 100%;
4
- border-radius: var(--border-radius-m);
5
-
6
- &.fixed table {
7
- table-layout: fixed;
8
- }
9
-
10
- &.outer-border {
11
- border: 1px solid var(--color-border);
12
- }
13
-
14
- &.nowrap table tr {
15
- td {
16
- white-space: nowrap;
17
- overflow: hidden;
18
- text-overflow: ellipsis;
19
- }
20
- }
21
-
22
- &.separated-rows table {
23
- th,
24
- td {
25
- border-bottom: 1px solid var(--color-border);
26
- }
27
- }
28
-
29
- &.separated-cells table {
30
- th,
31
- td {
32
- border-right: 1px solid var(--color-border);
33
-
34
- &:last-of-type {
35
- border-right: none;
36
- }
37
- }
38
- }
39
-
40
- table {
41
- width: 100%;
42
- border-collapse: collapse;
43
- text-indent: 0;
44
- border: none;
45
- overflow: unset;
46
-
47
- tr {
48
- border: none;
49
-
50
- &:has(.vui-table-interactive-cell.selected) {
51
- td {
52
- background-color: var(--color-bg-raised);
53
- }
54
- }
55
- }
56
-
57
- th,
58
- td {
59
- font-size: var(--font-size-ms);
60
- border: none;
61
- border-left: none !important;
62
- transition: var(--transition-fast);
63
- position: relative;
64
- z-index: 1;
65
-
66
- // Fixed width, only houses a checkbox component
67
- &.vui-table-interactive-cell {
68
- --checkbox-cell-width: calc(calc(var(--space-xs) * 2) + 32px);
69
- width: var(--checkbox-cell-width);
70
- min-width: var(--checkbox-cell-width);
71
- max-width: var(--checkbox-cell-width);
72
- height: auto;
73
- padding-inline: var(--space-xs);
74
- padding-block: 0;
75
-
76
- &.selected .vui-button.icon .vui-button-slot svg path {
77
- color: var(--color-text) !important;
78
- }
79
-
80
- .vui-button {
81
- vertical-align: middle;
82
- display: inline-flex;
83
-
84
- &.icon .vui-button-slot svg {
85
- width: 22px !important;
86
- height: 22px !important;
87
-
88
- path {
89
- color: var(--color-text-light);
90
- }
91
- }
92
- }
93
- }
94
-
95
- .vui-cell-context {
96
- display: flex;
97
- align-items: center;
98
- justify-content: center;
99
- z-index: 2;
100
- position: absolute;
101
- inset: 0;
102
- padding: var(--space-xs);
103
- background-color: var(--color-bg);
104
- left: unset;
105
- }
106
- }
107
-
108
- th {
109
- .vui-table-th-content {
110
- color: var(--color-text-light);
111
- font-size: var(--font-size-xs);
112
- text-transform: uppercase;
113
- font-weight: 500;
114
- display: flex;
115
- justify-content: flex-start;
116
- align-items: center;
117
- gap: var(--space-xs);
118
-
119
- .vui-table-sort-button:not(.active) svg path {
120
- color: var(--color-text-lighter);
121
- }
122
- }
123
- }
124
- }
125
-
126
- .vui-table-pagination-wrap {
127
- padding: var(--space-s) var(--space-m);
128
-
129
- p {
130
- font-size: var(--font-size-s);
131
- color: var(--color-text-lighter);
132
- }
133
- }
134
- }
1
+ .vui-table-container {
2
+ display: block;
3
+ width: 100%;
4
+ border-radius: var(--border-radius-m);
5
+
6
+ &.fixed table {
7
+ table-layout: fixed;
8
+ }
9
+
10
+ &.outer-border {
11
+ border: 1px solid var(--color-border);
12
+ }
13
+
14
+ &.nowrap table tr {
15
+ td {
16
+ white-space: nowrap;
17
+ overflow: hidden;
18
+ text-overflow: ellipsis;
19
+ }
20
+ }
21
+
22
+ &.separated-rows table {
23
+ th,
24
+ td {
25
+ border-bottom: 1px solid var(--color-border);
26
+ }
27
+ }
28
+
29
+ &.separated-cells table {
30
+ th,
31
+ td {
32
+ border-right: 1px solid var(--color-border);
33
+
34
+ &:last-of-type {
35
+ border-right: none;
36
+ }
37
+ }
38
+ }
39
+
40
+ table {
41
+ width: 100%;
42
+ border-collapse: collapse;
43
+ text-indent: 0;
44
+ border: none;
45
+ overflow: unset;
46
+
47
+ tr {
48
+ border: none;
49
+
50
+ &:has(.vui-table-interactive-cell.selected) {
51
+ td {
52
+ background-color: var(--color-bg-raised);
53
+ }
54
+ }
55
+ }
56
+
57
+ th,
58
+ td {
59
+ font-size: var(--font-size-ms);
60
+ border: none;
61
+ border-left: none !important;
62
+ transition: var(--transition-fast);
63
+ position: relative;
64
+ z-index: 1;
65
+
66
+ // Fixed width, only houses a checkbox component
67
+ &.vui-table-interactive-cell {
68
+ --checkbox-cell-width: calc(calc(var(--space-xs) * 2) + 32px);
69
+ width: var(--checkbox-cell-width);
70
+ min-width: var(--checkbox-cell-width);
71
+ max-width: var(--checkbox-cell-width);
72
+ height: auto;
73
+ padding-inline: var(--space-xs);
74
+ padding-block: 0;
75
+
76
+ &.selected .vui-button.icon .vui-button-slot svg path {
77
+ color: var(--color-text) !important;
78
+ }
79
+
80
+ .vui-button {
81
+ vertical-align: middle;
82
+ display: inline-flex;
83
+
84
+ &.icon .vui-button-slot svg {
85
+ width: 22px !important;
86
+ height: 22px !important;
87
+
88
+ path {
89
+ color: var(--color-text-light);
90
+ }
91
+ }
92
+ }
93
+ }
94
+
95
+ .vui-cell-context {
96
+ display: flex;
97
+ align-items: center;
98
+ justify-content: center;
99
+ z-index: 2;
100
+ position: absolute;
101
+ inset: 0;
102
+ padding: var(--space-xs);
103
+ background-color: var(--color-bg);
104
+ left: unset;
105
+ }
106
+ }
107
+
108
+ th {
109
+ .vui-table-th-content {
110
+ color: var(--color-text-light);
111
+ font-size: var(--font-size-xs);
112
+ text-transform: uppercase;
113
+ font-weight: 500;
114
+ display: flex;
115
+ justify-content: flex-start;
116
+ align-items: center;
117
+ gap: var(--space-xs);
118
+
119
+ .vui-table-sort-button:not(.active) svg path {
120
+ color: var(--color-text-lighter);
121
+ }
122
+ }
123
+ }
124
+ }
125
+
126
+ .vui-table-pagination-wrap {
127
+ padding: var(--space-s) var(--space-m);
128
+
129
+ p {
130
+ font-size: var(--font-size-s);
131
+ color: var(--color-text-lighter);
132
+ }
133
+ }
134
+ }