@dolanske/vui 0.3.2 → 0.3.4

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 (108) hide show
  1. package/LICENSE +673 -673
  2. package/README.md +40 -40
  3. package/dist/components/Avatar/Avatar.vue.d.ts +1 -0
  4. package/dist/style.css +1 -1
  5. package/dist/vui.js +825 -809
  6. package/package.json +68 -68
  7. package/src/App.vue +175 -160
  8. package/src/components/Accordion/Accordion.vue +91 -91
  9. package/src/components/Accordion/AccordionGroup.vue +43 -43
  10. package/src/components/Accordion/accordion.scss +80 -80
  11. package/src/components/Alert/Alert.vue +53 -53
  12. package/src/components/Alert/alert.scss +80 -80
  13. package/src/components/Avatar/Avatar.vue +50 -43
  14. package/src/components/Avatar/avatar.scss +52 -50
  15. package/src/components/Badge/Badge.vue +21 -21
  16. package/src/components/Badge/badge.scss +89 -89
  17. package/src/components/Breadcrumbs/BreadcrumbItem.vue +26 -26
  18. package/src/components/Breadcrumbs/Breadcrumbs.vue +33 -33
  19. package/src/components/Breadcrumbs/breadcrumbs.scss +30 -30
  20. package/src/components/Button/Button.vue +90 -90
  21. package/src/components/Button/button.scss +176 -176
  22. package/src/components/ButtonGroup/ButtonGroup.vue +25 -25
  23. package/src/components/ButtonGroup/button-group.scss +51 -51
  24. package/src/components/Calendar/Calendar.vue +60 -60
  25. package/src/components/Calendar/calendar.scss +56 -56
  26. package/src/components/Card/Card.vue +48 -48
  27. package/src/components/Card/card.scss +53 -53
  28. package/src/components/Checkbox/Checkbox.vue +52 -52
  29. package/src/components/Checkbox/checkbox.scss +66 -66
  30. package/src/components/CopyClipboard/CopyClipboard.vue +82 -82
  31. package/src/components/CopyClipboard/copy-clipboard.scss +17 -17
  32. package/src/components/Divider/Divider.vue +44 -44
  33. package/src/components/Divider/divider.scss +35 -35
  34. package/src/components/Drawer/Drawer.vue +97 -97
  35. package/src/components/Drawer/drawer.scss +36 -36
  36. package/src/components/Dropdown/Dropdown.vue +111 -110
  37. package/src/components/Dropdown/DropdownItem.vue +29 -29
  38. package/src/components/Dropdown/DropdownTitle.vue +8 -8
  39. package/src/components/Dropdown/dropdown.scss +117 -116
  40. package/src/components/Flex/Flex.vue +106 -106
  41. package/src/components/Grid/Grid.vue +54 -54
  42. package/src/components/Input/Counter.vue +70 -70
  43. package/src/components/Input/Dropzone.vue +65 -65
  44. package/src/components/Input/File.vue +15 -15
  45. package/src/components/Input/Input.vue +121 -121
  46. package/src/components/Input/Password.vue +47 -47
  47. package/src/components/Input/Textarea.vue +76 -76
  48. package/src/components/Input/input.scss +208 -208
  49. package/src/components/Kbd/Kbd.vue +48 -48
  50. package/src/components/Kbd/KbdGroup.vue +31 -31
  51. package/src/components/Kbd/kbd.scss +18 -18
  52. package/src/components/Modal/Confirm.vue +56 -56
  53. package/src/components/Modal/Modal.vue +91 -91
  54. package/src/components/Modal/modal.scss +49 -49
  55. package/src/components/OTP/OTP.vue +133 -133
  56. package/src/components/OTP/OTPItem.vue +37 -37
  57. package/src/components/OTP/otp.scss +83 -83
  58. package/src/components/Pagination/Pagination.vue +74 -74
  59. package/src/components/Pagination/pagination.ts +78 -78
  60. package/src/components/Popout/Popout.vue +42 -39
  61. package/src/components/Popout/popout.scss +8 -8
  62. package/src/components/Progress/Progress.vue +90 -90
  63. package/src/components/Progress/progress.scss +41 -41
  64. package/src/components/Radio/Radio.vue +36 -36
  65. package/src/components/Radio/RadioGroup.vue +40 -40
  66. package/src/components/Radio/radio.scss +59 -59
  67. package/src/components/Select/Select.vue +180 -180
  68. package/src/components/Select/select.scss +44 -44
  69. package/src/components/Sheet/Sheet.vue +92 -92
  70. package/src/components/Sheet/sheet.scss +60 -60
  71. package/src/components/Skeleton/Skeleton.vue +43 -43
  72. package/src/components/Skeleton/skeleton.scss +14 -14
  73. package/src/components/Spinner/Spinner.vue +42 -42
  74. package/src/components/Spinner/spinner.scss +46 -46
  75. package/src/components/Switch/Switch.vue +30 -30
  76. package/src/components/Switch/switch.scss +52 -52
  77. package/src/components/Table/Cell.vue +23 -23
  78. package/src/components/Table/Header.vue +59 -59
  79. package/src/components/Table/Row.vue +9 -9
  80. package/src/components/Table/SelectAll.vue +23 -23
  81. package/src/components/Table/SelectRow.vue +29 -29
  82. package/src/components/Table/Table.vue +66 -66
  83. package/src/components/Table/table.scss +134 -134
  84. package/src/components/Table/table.ts +244 -244
  85. package/src/components/Tabs/Tab.vue +27 -27
  86. package/src/components/Tabs/Tabs.vue +82 -80
  87. package/src/components/Tabs/tabs.scss +79 -79
  88. package/src/components/Toast/Toasts.vue +47 -47
  89. package/src/components/Toast/toast.scss +41 -41
  90. package/src/components/Toast/toast.ts +68 -68
  91. package/src/components/Tooltip/Tooltip.vue +86 -84
  92. package/src/components/Tooltip/tooltip.scss +4 -4
  93. package/src/index.scss +1 -1
  94. package/src/index.ts +119 -119
  95. package/src/internal/Backdrop/Backdrop.vue +22 -22
  96. package/src/internal/Backdrop/backdrop.scss +28 -28
  97. package/src/main.ts +5 -5
  98. package/src/shared/helpers.ts +74 -74
  99. package/src/shared/types.ts +29 -29
  100. package/src/style/animation.scss +21 -21
  101. package/src/style/core.scss +148 -146
  102. package/src/style/fonts.scss +53 -53
  103. package/src/style/layout.scss +136 -136
  104. package/src/style/media-query.scss +29 -29
  105. package/src/style/reset.scss +135 -135
  106. package/src/style/tooltip.scss +128 -128
  107. package/src/style/typography.scss +338 -338
  108. package/src/style/utils.scss +36 -36
package/src/style/tooltip.scss CHANGED
@@ -1,128 +1,128 @@
1
- /*
2
- This is a trick in which you can add simply tooltips to an element without any additional html.
3
- Simple add data-title-_position_="Hello world" and hover the element.
4
-
5
- Available tooltip positions:
6
- */
7
-
8
- [data-title-left],
9
- [data-title-right],
10
- [data-title-bottom],
11
- [data-title-bottom-left],
12
- [data-title-bottom-right],
13
- [data-title-top],
14
- [data-title-top-left],
15
- [data-title-top-right] {
16
- position: relative;
17
-
18
- &:before {
19
- font-family: var(--global-font);
20
- font-weight: 400;
21
- background-color: var(--color-bg-raised);
22
- color: var(--color-text);
23
-
24
- font-size: var(--font-size-ms);
25
- position: absolute;
26
- padding: 4px 8px;
27
- line-height: 1.3em;
28
- border-radius: var(--border-radius-m);
29
- transition: var(--transition);
30
-
31
- max-width: 512px;
32
- opacity: 0;
33
- cursor: default;
34
- z-index: -1;
35
- visibility: hidden;
36
- pointer-events: none;
37
- }
38
-
39
- &:hover {
40
- &:before {
41
- visibility: visible;
42
- opacity: 1;
43
- z-index: 99999;
44
- }
45
- }
46
- }
47
-
48
- [data-title-left]:before {
49
- content: attr(data-title-left);
50
- top: 50%;
51
- transform: translateY(-50%);
52
- z-index: 99999;
53
- right: calc(100% + 4px);
54
- }
55
-
56
- [data-title-right]:before {
57
- content: attr(data-title-right);
58
- top: 50%;
59
- transform: translateY(-50%);
60
- z-index: 99999;
61
- left: calc(100% + 4px);
62
- }
63
-
64
- [data-title-bottom]:before,
65
- [data-title-bottom-left]:before,
66
- [data-title-bottom-right]:before {
67
- content: attr(data-title-bottom);
68
- top: calc(100% + 4px);
69
- transform: translateX(-50%);
70
- left: 50%;
71
- }
72
-
73
- [data-title-bottom-left]:before {
74
- content: attr(data-title-bottom-left);
75
- transform: unset;
76
- left: 0;
77
- }
78
-
79
- [data-title-bottom-right]:before {
80
- content: attr(data-title-bottom-right);
81
- transform: unset;
82
- left: unset;
83
- right: 0;
84
- }
85
-
86
- [data-title-top]:before,
87
- [data-title-top-left]:before,
88
- [data-title-top-right]:before {
89
- content: attr(data-title-top);
90
- bottom: calc(100% + 4px);
91
- transform: translateX(-50%);
92
- left: 50%;
93
- }
94
-
95
- [data-title-top-left]:before {
96
- content: attr(data-title-top-left);
97
- transform: unset;
98
- left: 0;
99
- }
100
-
101
- [data-title-top-right]:before {
102
- content: attr(data-title-top-right);
103
- transform: unset;
104
- left: unset;
105
- right: 0;
106
- }
107
-
108
- // Hover
109
-
110
- [data-title-left]:hover:before {
111
- right: calc(100% + 10px);
112
- }
113
-
114
- [data-title-right]:hover:before {
115
- left: calc(100% + 10px);
116
- }
117
-
118
- [data-title-top]:hover:before,
119
- [data-title-top-left]:hover:before,
120
- [data-title-top-right]:hover:before {
121
- bottom: calc(100% + 10px);
122
- }
123
-
124
- [data-title-bottom]:hover:before,
125
- [data-title-bottom-left]:hover:before,
126
- [data-title-bottom-right]:hover:before {
127
- top: calc(100% + 10px);
128
- }
1
+ /*
2
+ This is a trick in which you can add simply tooltips to an element without any additional html.
3
+ Simple add data-title-_position_="Hello world" and hover the element.
4
+
5
+ Available tooltip positions:
6
+ */
7
+
8
+ [data-title-left],
9
+ [data-title-right],
10
+ [data-title-bottom],
11
+ [data-title-bottom-left],
12
+ [data-title-bottom-right],
13
+ [data-title-top],
14
+ [data-title-top-left],
15
+ [data-title-top-right] {
16
+ position: relative;
17
+
18
+ &:before {
19
+ font-family: var(--global-font);
20
+ font-weight: 400;
21
+ background-color: var(--color-bg-raised);
22
+ color: var(--color-text);
23
+
24
+ font-size: var(--font-size-ms);
25
+ position: absolute;
26
+ padding: 4px 8px;
27
+ line-height: 1.3em;
28
+ border-radius: var(--border-radius-m);
29
+ transition: var(--transition);
30
+
31
+ max-width: 512px;
32
+ opacity: 0;
33
+ cursor: default;
34
+ z-index: -1;
35
+ visibility: hidden;
36
+ pointer-events: none;
37
+ }
38
+
39
+ &:hover {
40
+ &:before {
41
+ visibility: visible;
42
+ opacity: 1;
43
+ z-index: 99999;
44
+ }
45
+ }
46
+ }
47
+
48
+ [data-title-left]:before {
49
+ content: attr(data-title-left);
50
+ top: 50%;
51
+ transform: translateY(-50%);
52
+ z-index: 99999;
53
+ right: calc(100% + 4px);
54
+ }
55
+
56
+ [data-title-right]:before {
57
+ content: attr(data-title-right);
58
+ top: 50%;
59
+ transform: translateY(-50%);
60
+ z-index: 99999;
61
+ left: calc(100% + 4px);
62
+ }
63
+
64
+ [data-title-bottom]:before,
65
+ [data-title-bottom-left]:before,
66
+ [data-title-bottom-right]:before {
67
+ content: attr(data-title-bottom);
68
+ top: calc(100% + 4px);
69
+ transform: translateX(-50%);
70
+ left: 50%;
71
+ }
72
+
73
+ [data-title-bottom-left]:before {
74
+ content: attr(data-title-bottom-left);
75
+ transform: unset;
76
+ left: 0;
77
+ }
78
+
79
+ [data-title-bottom-right]:before {
80
+ content: attr(data-title-bottom-right);
81
+ transform: unset;
82
+ left: unset;
83
+ right: 0;
84
+ }
85
+
86
+ [data-title-top]:before,
87
+ [data-title-top-left]:before,
88
+ [data-title-top-right]:before {
89
+ content: attr(data-title-top);
90
+ bottom: calc(100% + 4px);
91
+ transform: translateX(-50%);
92
+ left: 50%;
93
+ }
94
+
95
+ [data-title-top-left]:before {
96
+ content: attr(data-title-top-left);
97
+ transform: unset;
98
+ left: 0;
99
+ }
100
+
101
+ [data-title-top-right]:before {
102
+ content: attr(data-title-top-right);
103
+ transform: unset;
104
+ left: unset;
105
+ right: 0;
106
+ }
107
+
108
+ // Hover
109
+
110
+ [data-title-left]:hover:before {
111
+ right: calc(100% + 10px);
112
+ }
113
+
114
+ [data-title-right]:hover:before {
115
+ left: calc(100% + 10px);
116
+ }
117
+
118
+ [data-title-top]:hover:before,
119
+ [data-title-top-left]:hover:before,
120
+ [data-title-top-right]:hover:before {
121
+ bottom: calc(100% + 10px);
122
+ }
123
+
124
+ [data-title-bottom]:hover:before,
125
+ [data-title-bottom-left]:hover:before,
126
+ [data-title-bottom-right]:hover:before {
127
+ top: calc(100% + 10px);
128
+ }