@mantine-vue/spotlight 1.1.2

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 (24) hide show
  1. package/cjs/index.cjs +1007 -0
  2. package/cjs/index.cjs.map +1 -0
  3. package/esm/index.mjs +991 -0
  4. package/esm/index.mjs.map +1 -0
  5. package/lib/Spotlight.context.d.ts +10 -0
  6. package/lib/Spotlight.d.ts +932 -0
  7. package/lib/SpotlightAction.d.ts +131 -0
  8. package/lib/SpotlightActionsGroup.d.ts +50 -0
  9. package/lib/SpotlightActionsList.d.ts +50 -0
  10. package/lib/SpotlightEmpty.d.ts +40 -0
  11. package/lib/SpotlightFooter.d.ts +40 -0
  12. package/lib/SpotlightRoot.d.ts +192 -0
  13. package/lib/SpotlightSearch.d.ts +81 -0
  14. package/lib/default-spotlight-filter.d.ts +2 -0
  15. package/lib/get-hotkeys.d.ts +3 -0
  16. package/lib/index.d.mts +12 -0
  17. package/lib/index.d.ts +12 -0
  18. package/lib/is-actions-group.d.ts +2 -0
  19. package/lib/limit-actions.d.ts +2 -0
  20. package/lib/spotlight.store.d.ts +54 -0
  21. package/lib/style-api.d.ts +3 -0
  22. package/package.json +44 -0
  23. package/styles.css +153 -0
  24. package/styles.layer.css +155 -0
package/lib/style-api.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare function mergeClassNames(...items: any[]): Record<string, any>;
2
+ export declare function mergeStyles(...items: any[]): Record<string, any>;
3
+ export declare function renderContent(value: any): any;
package/package.json ADDED
@@ -0,0 +1,44 @@
1
+ {
2
+ "name": "@mantine-vue/spotlight",
3
+ "version": "1.1.2",
4
+ "description": "Vue command center components equivalent to @mantine/spotlight",
5
+ "license": "MIT",
6
+ "files": [
7
+ "cjs",
8
+ "esm",
9
+ "lib",
10
+ "styles.css",
11
+ "styles.layer.css",
12
+ "styles"
13
+ ],
14
+ "sideEffects": false,
15
+ "main": "./cjs/index.cjs",
16
+ "module": "./esm/index.mjs",
17
+ "types": "./lib/index.d.ts",
18
+ "exports": {
19
+ ".": {
20
+ "import": {
21
+ "types": "./lib/index.d.mts",
22
+ "default": "./esm/index.mjs"
23
+ },
24
+ "require": {
25
+ "types": "./lib/index.d.ts",
26
+ "default": "./cjs/index.cjs"
27
+ }
28
+ }
29
+ },
30
+ "devDependencies": {
31
+ "@mantine-vue/core": "workspace:*",
32
+ "@mantine-vue/hooks": "workspace:*",
33
+ "@mantine-vue/store": "workspace:*",
34
+ "@vue/compiler-dom": "^3.5.0",
35
+ "@vue/test-utils": "^2.4.6",
36
+ "vue": "^3.5.0"
37
+ },
38
+ "peerDependencies": {
39
+ "@mantine-vue/core": "1.1.1",
40
+ "@mantine-vue/hooks": "1.1.2",
41
+ "@mantine-vue/store": "1.1.1",
42
+ "vue": "^3.5.0"
43
+ }
44
+ }
package/styles.css ADDED
@@ -0,0 +1,153 @@
1
+ ._root_87n7g_1[data-scrollable] {
2
+ --spotlight-content-height: 100%;
3
+ }
4
+
5
+ ._content_87n7g_7 {
6
+ overflow: hidden;
7
+ height: var(--spotlight-content-height, auto);
8
+ max-height: var(--spotlight-max-height);
9
+ }
10
+
11
+ ._body_87n7g_13 {
12
+ display: flex;
13
+ flex-direction: column;
14
+ height: var(--spotlight-content-height, auto);
15
+ }
16
+
17
+ ._search_87n7g_19 {
18
+ border: 0;
19
+ background-color: transparent;
20
+ }
21
+
22
+ ._actionsList_87n7g_24 {
23
+ --spotlight-actions-list-padding: calc(0.25rem * var(--mantine-scale));
24
+
25
+ border-top: calc(0.0625rem * var(--mantine-scale)) solid;
26
+ flex: 1;
27
+ padding: var(--spotlight-actions-list-padding);
28
+ max-height: calc(100vh - 15rem);
29
+ margin-inline-end: calc(var(--spotlight-actions-list-padding) * -1);
30
+ width: 100%;
31
+ }
32
+
33
+ :where([data-mantine-color-scheme='light']) ._actionsList_87n7g_24 {
34
+ border-color: var(--mantine-color-gray-2);
35
+ }
36
+
37
+ :where([data-mantine-color-scheme='dark']) ._actionsList_87n7g_24 {
38
+ border-color: var(--mantine-color-dark-4);
39
+ }
40
+
41
+ ._action_87n7g_24 {
42
+ display: flex;
43
+ align-items: center;
44
+ width: 100%;
45
+ padding: 7px var(--mantine-spacing-md);
46
+ border-radius: var(--mantine-radius-default);
47
+ background-color: transparent;
48
+ color: inherit;
49
+ text-align: start;
50
+ }
51
+
52
+ @media (hover: hover) {
53
+ :where([data-mantine-color-scheme='light']) ._action_87n7g_24:where(:not([data-selected])):hover {
54
+ background-color: var(--mantine-color-gray-0);
55
+ }
56
+
57
+ :where([data-mantine-color-scheme='dark']) ._action_87n7g_24:where(:not([data-selected])):hover {
58
+ background-color: var(--mantine-color-dark-6);
59
+ }
60
+ }
61
+
62
+ @media (hover: none) {
63
+ :where([data-mantine-color-scheme='light']) ._action_87n7g_24:where(:not([data-selected])):active {
64
+ background-color: var(--mantine-color-gray-0);
65
+ }
66
+
67
+ :where([data-mantine-color-scheme='dark']) ._action_87n7g_24:where(:not([data-selected])):active {
68
+ background-color: var(--mantine-color-dark-6);
69
+ }
70
+ }
71
+
72
+ ._action_87n7g_24:where([data-selected]) {
73
+ background-color: var(--mantine-primary-color-filled);
74
+ color: var(--mantine-primary-color-contrast, var(--mantine-color-white));
75
+ --action-description-color: var(--mantine-primary-color-contrast, var(--mantine-color-white));
76
+ --action-description-opacity: 0.7;
77
+ }
78
+
79
+ ._actionBody_87n7g_73 {
80
+ flex: 1;
81
+ }
82
+
83
+ ._actionSection_87n7g_77 {
84
+ opacity: 1;
85
+ color: inherit;
86
+ }
87
+
88
+ ._actionSection_87n7g_77:where([data-dimmed]) {
89
+ opacity: var(--action-description-opacity, 1);
90
+ color: var(--action-description-color, var(--mantine-color-dimmed));
91
+ }
92
+
93
+ ._actionSection_87n7g_77:where([data-position='left']) {
94
+ margin-inline-end: var(--mantine-spacing-md);
95
+ }
96
+
97
+ ._actionSection_87n7g_77:where([data-position='right']) {
98
+ margin-inline-start: var(--mantine-spacing-md);
99
+ }
100
+
101
+ ._actionSection_87n7g_77 > svg {
102
+ display: block;
103
+ }
104
+
105
+ ._actionLabel_87n7g_99 {
106
+ display: block;
107
+ }
108
+
109
+ ._actionDescription_87n7g_103 {
110
+ display: block;
111
+ font-size: var(--mantine-font-size-xs);
112
+ opacity: var(--action-description-opacity, 1);
113
+ color: var(--action-description-color, var(--mantine-color-dimmed));
114
+ }
115
+
116
+ ._empty_87n7g_110 {
117
+ color: var(--mantine-color-dimmed);
118
+ padding: var(--mantine-spacing-md);
119
+ text-align: center;
120
+ }
121
+
122
+ ._footer_87n7g_116 {
123
+ padding: var(--mantine-spacing-xs) calc(var(--mantine-spacing-md) + calc(0.25rem * var(--mantine-scale)));
124
+ border-top: calc(0.0625rem * var(--mantine-scale)) solid;
125
+ }
126
+
127
+ :where([data-mantine-color-scheme='light']) ._footer_87n7g_116 {
128
+ border-color: var(--mantine-color-gray-2);
129
+ }
130
+
131
+ :where([data-mantine-color-scheme='dark']) ._footer_87n7g_116 {
132
+ border-color: var(--mantine-color-dark-4);
133
+ }
134
+
135
+ ._actionsGroup_87n7g_129 {
136
+ display: flex;
137
+ flex-direction: column;
138
+ margin-top: var(--mantine-spacing-md);
139
+ }
140
+
141
+ ._actionsGroup_87n7g_129::before {
142
+ content: var(--spotlight-label);
143
+ text-transform: uppercase;
144
+ font-size: var(--mantine-font-size-xs);
145
+ font-weight: var(--mantine-font-weight-bold);
146
+ color: var(--mantine-color-dimmed);
147
+ padding-inline-start: var(--mantine-spacing-md);
148
+ }
149
+
150
+ ._actionsGroup_87n7g_129:empty {
151
+ display: none;
152
+ }
153
+ /*$vite$:1*/
package/styles.layer.css ADDED
@@ -0,0 +1,155 @@
1
+ @layer mantine {
2
+ ._root_87n7g_1[data-scrollable] {
3
+ --spotlight-content-height: 100%;
4
+ }
5
+
6
+ ._content_87n7g_7 {
7
+ overflow: hidden;
8
+ height: var(--spotlight-content-height, auto);
9
+ max-height: var(--spotlight-max-height);
10
+ }
11
+
12
+ ._body_87n7g_13 {
13
+ display: flex;
14
+ flex-direction: column;
15
+ height: var(--spotlight-content-height, auto);
16
+ }
17
+
18
+ ._search_87n7g_19 {
19
+ border: 0;
20
+ background-color: transparent;
21
+ }
22
+
23
+ ._actionsList_87n7g_24 {
24
+ --spotlight-actions-list-padding: calc(0.25rem * var(--mantine-scale));
25
+
26
+ border-top: calc(0.0625rem * var(--mantine-scale)) solid;
27
+ flex: 1;
28
+ padding: var(--spotlight-actions-list-padding);
29
+ max-height: calc(100vh - 15rem);
30
+ margin-inline-end: calc(var(--spotlight-actions-list-padding) * -1);
31
+ width: 100%;
32
+ }
33
+
34
+ :where([data-mantine-color-scheme='light']) ._actionsList_87n7g_24 {
35
+ border-color: var(--mantine-color-gray-2);
36
+ }
37
+
38
+ :where([data-mantine-color-scheme='dark']) ._actionsList_87n7g_24 {
39
+ border-color: var(--mantine-color-dark-4);
40
+ }
41
+
42
+ ._action_87n7g_24 {
43
+ display: flex;
44
+ align-items: center;
45
+ width: 100%;
46
+ padding: 7px var(--mantine-spacing-md);
47
+ border-radius: var(--mantine-radius-default);
48
+ background-color: transparent;
49
+ color: inherit;
50
+ text-align: start;
51
+ }
52
+
53
+ @media (hover: hover) {
54
+ :where([data-mantine-color-scheme='light']) ._action_87n7g_24:where(:not([data-selected])):hover {
55
+ background-color: var(--mantine-color-gray-0);
56
+ }
57
+
58
+ :where([data-mantine-color-scheme='dark']) ._action_87n7g_24:where(:not([data-selected])):hover {
59
+ background-color: var(--mantine-color-dark-6);
60
+ }
61
+ }
62
+
63
+ @media (hover: none) {
64
+ :where([data-mantine-color-scheme='light']) ._action_87n7g_24:where(:not([data-selected])):active {
65
+ background-color: var(--mantine-color-gray-0);
66
+ }
67
+
68
+ :where([data-mantine-color-scheme='dark']) ._action_87n7g_24:where(:not([data-selected])):active {
69
+ background-color: var(--mantine-color-dark-6);
70
+ }
71
+ }
72
+
73
+ ._action_87n7g_24:where([data-selected]) {
74
+ background-color: var(--mantine-primary-color-filled);
75
+ color: var(--mantine-primary-color-contrast, var(--mantine-color-white));
76
+ --action-description-color: var(--mantine-primary-color-contrast, var(--mantine-color-white));
77
+ --action-description-opacity: 0.7;
78
+ }
79
+
80
+ ._actionBody_87n7g_73 {
81
+ flex: 1;
82
+ }
83
+
84
+ ._actionSection_87n7g_77 {
85
+ opacity: 1;
86
+ color: inherit;
87
+ }
88
+
89
+ ._actionSection_87n7g_77:where([data-dimmed]) {
90
+ opacity: var(--action-description-opacity, 1);
91
+ color: var(--action-description-color, var(--mantine-color-dimmed));
92
+ }
93
+
94
+ ._actionSection_87n7g_77:where([data-position='left']) {
95
+ margin-inline-end: var(--mantine-spacing-md);
96
+ }
97
+
98
+ ._actionSection_87n7g_77:where([data-position='right']) {
99
+ margin-inline-start: var(--mantine-spacing-md);
100
+ }
101
+
102
+ ._actionSection_87n7g_77 > svg {
103
+ display: block;
104
+ }
105
+
106
+ ._actionLabel_87n7g_99 {
107
+ display: block;
108
+ }
109
+
110
+ ._actionDescription_87n7g_103 {
111
+ display: block;
112
+ font-size: var(--mantine-font-size-xs);
113
+ opacity: var(--action-description-opacity, 1);
114
+ color: var(--action-description-color, var(--mantine-color-dimmed));
115
+ }
116
+
117
+ ._empty_87n7g_110 {
118
+ color: var(--mantine-color-dimmed);
119
+ padding: var(--mantine-spacing-md);
120
+ text-align: center;
121
+ }
122
+
123
+ ._footer_87n7g_116 {
124
+ padding: var(--mantine-spacing-xs) calc(var(--mantine-spacing-md) + calc(0.25rem * var(--mantine-scale)));
125
+ border-top: calc(0.0625rem * var(--mantine-scale)) solid;
126
+ }
127
+
128
+ :where([data-mantine-color-scheme='light']) ._footer_87n7g_116 {
129
+ border-color: var(--mantine-color-gray-2);
130
+ }
131
+
132
+ :where([data-mantine-color-scheme='dark']) ._footer_87n7g_116 {
133
+ border-color: var(--mantine-color-dark-4);
134
+ }
135
+
136
+ ._actionsGroup_87n7g_129 {
137
+ display: flex;
138
+ flex-direction: column;
139
+ margin-top: var(--mantine-spacing-md);
140
+ }
141
+
142
+ ._actionsGroup_87n7g_129::before {
143
+ content: var(--spotlight-label);
144
+ text-transform: uppercase;
145
+ font-size: var(--mantine-font-size-xs);
146
+ font-weight: var(--mantine-font-weight-bold);
147
+ color: var(--mantine-color-dimmed);
148
+ padding-inline-start: var(--mantine-spacing-md);
149
+ }
150
+
151
+ ._actionsGroup_87n7g_129:empty {
152
+ display: none;
153
+ }
154
+ /*$vite$:1*/
155
+ }