@teammodlr/ui-kit 2.2.1 → 2.3.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 (25) hide show
  1. package/lib/components/dialog/Dialog.vue.d.ts +1 -1
  2. package/lib/components/dropdown/Dropdown.vue.d.ts +16 -27
  3. package/lib/components/dropdown/DropdownItem.vue.d.ts +1 -2
  4. package/lib/components/index.d.ts +1 -2
  5. package/lib/components/messageprovider/Message.vue.d.ts +1 -1
  6. package/lib/components/modal/Modal.vue.d.ts +1 -1
  7. package/lib/components/primative/primitive.d.ts +1 -1
  8. package/lib/index.cjs.js +10 -8
  9. package/lib/index.es.js +8345 -4237
  10. package/lib/style.css +1 -1
  11. package/package.json +2 -1
  12. package/src/components/dropdown/Dropdown.vue +203 -329
  13. package/src/components/dropdown/DropdownHeading.vue +23 -23
  14. package/src/components/dropdown/DropdownItem.vue +116 -151
  15. package/src/components/dropdown/examples/basic.vue +126 -119
  16. package/src/components/dropdown/examples/context.vue +52 -71
  17. package/src/components/dropdown/style/Dropdown.css.ts +159 -158
  18. package/src/components/index.ts +1 -2
  19. package/src/components/tooltip/Tooltip.vue +1 -1
  20. package/lib/components/dropdown/DropdownSeperator.vue.d.ts +0 -4
  21. package/lib/components/dropdown/DropdownTrigger.vue.d.ts +0 -11
  22. package/lib/components/dropdown/DropdownWrapper.vue.d.ts +0 -2
  23. package/src/components/dropdown/DropdownSeperator.vue +0 -23
  24. package/src/components/dropdown/DropdownTrigger.vue +0 -20
  25. package/src/components/dropdown/DropdownWrapper.vue +0 -18
package/src/components/dropdown/DropdownItem.vue CHANGED
@@ -1,151 +1,116 @@
1
- <template>
2
- <component
3
- :is="computedType"
4
- :href="href"
5
- ref="wrapper"
6
- :class="computedWrapperClasses"
7
- role="menuitem"
8
- tabindex="0"
9
- @click="handleSelect"
10
- v-bind="$attrs">
11
- <div v-if="hasIconLeft" :class="style.menuItemIcon">
12
- <slot name="icon-left" />
13
- </div>
14
- <div :class="style.menuItemTextContainer">
15
- <span :class="style.menuItemText"><slot /></span>
16
- </div>
17
- <!-- <div v-if="hotkey" class="m-dropdown__hotkeys">
18
- <template v-for="key in hotkey.split('+')">
19
- <kbd>{{ key }}</kbd>
20
- </template>
21
- </div> -->
22
- <div v-if="hasIconRight" :class="style.menuItemIcon">
23
- <slot name="icon-right" />
24
- </div>
25
- </component>
26
- </template>
27
-
28
- <script lang="ts">
29
- import {
30
- computed,
31
- defineComponent,
32
- inject,
33
- type PropType,
34
- ref,
35
- toRef
36
- } from 'vue';
37
- import { useLabel } from './hooks';
38
- import * as style from './style';
39
- import type { Variant } from '../../types/props';
40
-
41
- export default defineComponent({
42
- name: 'DropdownItem',
43
- props: {
44
- label: {
45
- type: [String, Number],
46
- default: null
47
- },
48
- disabled: {
49
- type: Boolean,
50
- default: false
51
- },
52
- reference: {
53
- type: Boolean,
54
- default: false
55
- },
56
- onSelect: {
57
- type: Function as PropType<(label: string | number) => void>,
58
- default: () => {}
59
- },
60
- hotkey: {
61
- type: String,
62
- default: null
63
- },
64
- description: {
65
- type: String,
66
- default: null
67
- },
68
- href: {
69
- type: String,
70
- default: null
71
- },
72
- variant: {
73
- type: String as PropType<Variant>,
74
- default: 'default'
75
- }
76
- },
77
- emits: [],
78
- setup(props, { slots }) {
79
- const parentSelect = inject('dropdown-select', null);
80
- // const state = inject(DROPDOWN_STATE, null);
81
- // const keys = useMagicKeys({
82
- // passive: false,
83
- // onEventFired: (event) => {
84
-
85
- // // only fire when the dropdown is open
86
- // if (state?.isOpen.value) {
87
- // event.preventDefault();
88
- // }
89
- // }
90
- // });
91
-
92
- const hasIconLeft = computed(() => !!slots['icon-left']);
93
- const hasIconRight = computed(() => !!slots['icon-right']);
94
-
95
- const wrapper = ref(null);
96
- const label = toRef(props, 'label');
97
- const isReference = ref(props.reference);
98
- const currentLabel = useLabel(label, wrapper);
99
- function handleSelect() {
100
- if (props.disabled || isReference.value) {
101
- return;
102
- }
103
-
104
- if (typeof parentSelect === 'function') {
105
- // @ts-ignore
106
- parentSelect([currentLabel.value!]);
107
- }
108
-
109
- props.onSelect(currentLabel.value!);
110
- }
111
-
112
- // const isOpen = computed(() => {
113
- // return state?.isOpen.value;
114
- // });
115
-
116
- const computedWrapperClasses = computed(() => {
117
- return [style.menuItem, style.variant[props.variant]];
118
- });
119
-
120
- const computedType = computed(() => {
121
- if (props.href) {
122
- return 'a';
123
- }
124
-
125
- return 'li';
126
- });
127
-
128
- // onMounted(() => {
129
- // if (props.hotkey) {
130
- // const combination = keys[props.hotkey];
131
-
132
- // whenever(combination, (v) => {
133
- // if (v && isOpen.value) {
134
- // handleSelect();
135
- // }
136
- // })
137
- // }
138
- // })
139
-
140
- return {
141
- wrapper,
142
- hasIconLeft,
143
- hasIconRight,
144
- handleSelect,
145
- computedWrapperClasses,
146
- style,
147
- computedType
148
- };
149
- }
150
- });
151
- </script>
1
+ <template>
2
+ <DropdownMenuItem :class="computedWrapperClasses" :as="computedType" :href="href">
3
+ <div :class="style.menuItemIcon">
4
+ <slot name="icon-left" />
5
+ </div>
6
+ <div :class="style.menuItemTextContainer">
7
+ <span :class="style.menuItemText"><slot /></span>
8
+ </div>
9
+ <slot name="keyboard" />
10
+ </DropdownMenuItem>
11
+ <!-- <component
12
+ :is="computedType"
13
+ :href="href"
14
+ ref="wrapper"
15
+ :class="computedWrapperClasses"
16
+ role="menuitem"
17
+ tabindex="0"
18
+ @click="handleSelect"
19
+ v-bind="$attrs">
20
+ <div v-if="hasIconLeft" :class="style.menuItemIcon">
21
+ <slot name="icon-left" />
22
+ </div>
23
+ <div :class="style.menuItemTextContainer">
24
+ <span :class="style.menuItemText"><slot /></span>
25
+ </div>
26
+ <!-- <div v-if="hotkey" class="m-dropdown__hotkeys">
27
+ <template v-for="key in hotkey.split('+')">
28
+ <kbd>{{ key }}</kbd>
29
+ </template>
30
+ </div> -->
31
+ <!-- <div v-if="hasIconRight" :class="style.menuItemIcon">
32
+ <slot name="icon-right" />
33
+ </div>
34
+ </component> -->
35
+ </template>
36
+
37
+ <script lang="ts">
38
+ import {
39
+ computed,
40
+ defineComponent,
41
+ type PropType,
42
+ ref
43
+ } from 'vue';
44
+ import { DropdownMenuItem } from "radix-vue";
45
+ import * as style from './style';
46
+ import type { Variant } from '../../types/props';
47
+
48
+ export default defineComponent({
49
+ name: 'DropdownItem',
50
+ components: {
51
+ DropdownMenuItem
52
+ },
53
+ props: {
54
+ label: {
55
+ type: [String, Number],
56
+ default: null
57
+ },
58
+ disabled: {
59
+ type: Boolean,
60
+ default: false
61
+ },
62
+ reference: {
63
+ type: Boolean,
64
+ default: false
65
+ },
66
+ onSelect: {
67
+ type: Function as PropType<(label: string | number) => void>,
68
+ default: () => {}
69
+ },
70
+ hotkey: {
71
+ type: String,
72
+ default: null
73
+ },
74
+ description: {
75
+ type: String,
76
+ default: null
77
+ },
78
+ href: {
79
+ type: String,
80
+ default: null
81
+ },
82
+ variant: {
83
+ type: String as PropType<Variant>,
84
+ default: 'default'
85
+ }
86
+ },
87
+ emits: [],
88
+ setup(props, { slots }) {
89
+
90
+ const hasIconLeft = computed(() => !!slots['icon-left']);
91
+ const hasIconRight = computed(() => !!slots['icon-right']);
92
+
93
+ const wrapper = ref(null);
94
+ const computedWrapperClasses = computed(() => {
95
+ return [style.menuItem, style.variant[props.variant]];
96
+ });
97
+
98
+ const computedType = computed(() => {
99
+ if (props.href) {
100
+ return 'a';
101
+ }
102
+
103
+ return 'div';
104
+ });
105
+
106
+ return {
107
+ wrapper,
108
+ hasIconLeft,
109
+ hasIconRight,
110
+ computedWrapperClasses,
111
+ style,
112
+ computedType
113
+ };
114
+ }
115
+ });
116
+ </script>
package/src/components/dropdown/examples/basic.vue CHANGED
@@ -1,119 +1,126 @@
1
- <template>
2
- <MDropdown>
3
- <MButton> Menu </MButton>
4
-
5
- <template #menu>
6
- <MDropdownList>
7
- <MDropdownHeading> Hello </MDropdownHeading>
8
- <MDropdownItem hotkey="Ctrl+L" @click="handleClick">
9
- Item One
10
- </MDropdownItem>
11
- <MDropdownSeperator />
12
- <MDropdownItem
13
- variant="error"
14
- href="https://google.com"
15
- target="_blank">
16
- Item Two
17
- </MDropdownItem>
18
- <MDropdownItem href="https://google.com" target="_blank">
19
- Item Two
20
- </MDropdownItem>
21
- <MDropdownItem href="https://google.com" target="_blank">
22
- Item Two
23
- </MDropdownItem>
24
- <MDropdownItem href="https://google.com" target="_blank">
25
- Item Two
26
- </MDropdownItem>
27
- <MDropdownItem href="https://google.com" target="_blank">
28
- Item Two
29
- </MDropdownItem>
30
- <MDropdownItem href="https://google.com" target="_blank">
31
- Item Two
32
- </MDropdownItem>
33
- <MDropdownItem href="https://google.com" target="_blank">
34
- Item Two
35
- </MDropdownItem>
36
- <MDropdownItem href="https://google.com" target="_blank">
37
- Item Two
38
- </MDropdownItem>
39
- <MDropdownItem href="https://google.com" target="_blank">
40
- Item Two
41
- </MDropdownItem>
42
- <MDropdownItem href="https://google.com" target="_blank">
43
- Item Two
44
- </MDropdownItem>
45
- <MDropdownItem href="https://google.com" target="_blank">
46
- Item Two
47
- </MDropdownItem>
48
- <MDropdownItem href="https://google.com" target="_blank">
49
- Item Two
50
- </MDropdownItem>
51
- <MDropdownItem href="https://google.com" target="_blank">
52
- Item Two
53
- </MDropdownItem>
54
-
55
- <MDropdown>
56
- <MDropdownItem>
57
- <template #icon-right>
58
- <svg
59
- style="width: 16px; height: 16px"
60
- xmlns="http://www.w3.org/2000/svg"
61
- viewBox="0 0 20 20"
62
- fill="currentColor"
63
- class="w-5 h-5">
64
- <path
65
- fill-rule="evenodd"
66
- d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
67
- clip-rule="evenodd" />
68
- </svg>
69
- </template>
70
- Item Three (Parent)
71
- </MDropdownItem>
72
-
73
- <template #menu>
74
- <MDropdownList>
75
- <MDropdownItem @click="handleClick">
76
- Child One
77
- </MDropdownItem>
78
- <MDropdown>
79
- <MDropdownItem>
80
- <template #icon-right>
81
- <svg
82
- style="width: 16px; height: 16px"
83
- xmlns="http://www.w3.org/2000/svg"
84
- viewBox="0 0 20 20"
85
- fill="currentColor"
86
- class="w-5 h-5">
87
- <path
88
- fill-rule="evenodd"
89
- d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
90
- clip-rule="evenodd" />
91
- </svg>
92
- </template>
93
- Item Three (Parent)
94
- </MDropdownItem>
95
-
96
- <template #menu>
97
- <MDropdownList>
98
- <MDropdownItem @click="handleClick">
99
- Child One
100
- </MDropdownItem>
101
- <MDropdownItem>
102
- Child Two
103
- </MDropdownItem>
104
- </MDropdownList>
105
- </template>
106
- </MDropdown>
107
- </MDropdownList>
108
- </template>
109
- </MDropdown>
110
- </MDropdownList>
111
- </template>
112
- </MDropdown>
113
- </template>
114
-
115
- <script lang="ts" setup>
116
- const handleClick = () => {
117
- alert('hi');
118
- };
119
- </script>
1
+ <template>
2
+ <MDropdown>
3
+ <MButton> Menu </MButton>
4
+
5
+ <template #menu>
6
+ <MDropdownList>
7
+ <MDropdownHeading> Hello </MDropdownHeading>
8
+ <MDropdownItem hotkey="Ctrl+L" @click="handleClick">
9
+ Item One
10
+ </MDropdownItem>
11
+ <MDropdownSeperator />
12
+ <MDropdownItem
13
+ variant="error"
14
+ href="https://google.com"
15
+ target="_blank">
16
+ Item Two
17
+ </MDropdownItem>
18
+ <MDropdownItem href="https://google.com" target="_blank">
19
+ Item Two
20
+ <template #keyboard>
21
+ <div
22
+ class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
23
+ >
24
+ ⌘+S
25
+ </div>
26
+ </template>
27
+ </MDropdownItem>
28
+ <MDropdownItem href="https://google.com" target="_blank">
29
+ Item Two
30
+ </MDropdownItem>
31
+ <MDropdownItem href="https://google.com" target="_blank">
32
+ Item Two
33
+ </MDropdownItem>
34
+ <MDropdownItem href="https://google.com" target="_blank">
35
+ Item Two
36
+ </MDropdownItem>
37
+ <MDropdownItem href="https://google.com" target="_blank">
38
+ Item Two
39
+ </MDropdownItem>
40
+ <MDropdownItem href="https://google.com" target="_blank">
41
+ Item Two
42
+ </MDropdownItem>
43
+ <MDropdownItem href="https://google.com" target="_blank">
44
+ Item Two
45
+ </MDropdownItem>
46
+ <MDropdownItem href="https://google.com" target="_blank">
47
+ Item Two
48
+ </MDropdownItem>
49
+ <MDropdownItem href="https://google.com" target="_blank">
50
+ Item Two
51
+ </MDropdownItem>
52
+ <MDropdownItem href="https://google.com" target="_blank">
53
+ Item Two
54
+ </MDropdownItem>
55
+ <MDropdownItem href="https://google.com" target="_blank">
56
+ Item Two
57
+ </MDropdownItem>
58
+ <MDropdownItem href="https://google.com" target="_blank">
59
+ Item Two
60
+ </MDropdownItem>
61
+
62
+ <MDropdown>
63
+ <MDropdownItem>
64
+ <template #icon-right>
65
+ <svg
66
+ style="width: 16px; height: 16px"
67
+ xmlns="http://www.w3.org/2000/svg"
68
+ viewBox="0 0 20 20"
69
+ fill="currentColor"
70
+ class="w-5 h-5">
71
+ <path
72
+ fill-rule="evenodd"
73
+ d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
74
+ clip-rule="evenodd" />
75
+ </svg>
76
+ </template>
77
+ Item Three (Parent)
78
+ </MDropdownItem>
79
+
80
+ <template #menu>
81
+ <MDropdownList>
82
+ <MDropdownItem @click="handleClick">
83
+ Child One
84
+ </MDropdownItem>
85
+ <MDropdown>
86
+ <MDropdownItem>
87
+ <template #icon-right>
88
+ <svg
89
+ style="width: 16px; height: 16px"
90
+ xmlns="http://www.w3.org/2000/svg"
91
+ viewBox="0 0 20 20"
92
+ fill="currentColor"
93
+ class="w-5 h-5">
94
+ <path
95
+ fill-rule="evenodd"
96
+ d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
97
+ clip-rule="evenodd" />
98
+ </svg>
99
+ </template>
100
+ Item Three (Parent)
101
+ </MDropdownItem>
102
+
103
+ <template #menu>
104
+ <MDropdownList>
105
+ <MDropdownItem @click="handleClick">
106
+ Child One
107
+ </MDropdownItem>
108
+ <MDropdownItem>
109
+ Child Two
110
+ </MDropdownItem>
111
+ </MDropdownList>
112
+ </template>
113
+ </MDropdown>
114
+ </MDropdownList>
115
+ </template>
116
+ </MDropdown>
117
+ </MDropdownList>
118
+ </template>
119
+ </MDropdown>
120
+ </template>
121
+
122
+ <script lang="ts" setup>
123
+ const handleClick = () => {
124
+ alert('hi');
125
+ };
126
+ </script>
package/src/components/dropdown/examples/context.vue CHANGED
@@ -1,71 +1,52 @@
1
- <template>
2
- <div>
3
- <div style="background: #eee; width: 500px; height: 500px;" @contextmenu="handleContextMenu">
4
-
5
- </div>
6
-
7
- <MDropdown :virtual="position" :open="showing">
8
- <template #menu>
9
- <MDropdownList>
10
- <MDropdownItem>
11
- Item One
12
- </MDropdownItem>
13
- <MDropdownItem>
14
- Item Two
15
- </MDropdownItem>
16
-
17
- <MDropdown>
18
- <MDropdownItem>
19
- <template #icon-right>
20
- <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
21
- viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
22
- <path fill-rule="evenodd"
23
- d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
24
- clip-rule="evenodd" />
25
- </svg>
26
-
27
- </template>
28
- Item Three (Parent)
29
- </MDropdownItem>
30
-
31
- <template #menu>
32
- <MDropdownList>
33
- <MDropdownItem @click="handleClick">
34
- Child One
35
- </MDropdownItem>
36
- <MDropdownItem>
37
- Child Two
38
- </MDropdownItem>
39
- </MDropdownList>
40
- </template>
41
- </MDropdown>
42
- </MDropdownList>
43
- </template>
44
- </MDropdown>
45
- </div>
46
- </template>
47
-
48
- <script lang="ts" setup>
49
- import { nextTick, ref, reactive } from 'vue';
50
-
51
- const showing = ref(false);
52
- const position = reactive({
53
- x: 0,
54
- y: 0
55
- })
56
-
57
- const handleContextMenu = (e: MouseEvent) => {
58
- e.preventDefault();
59
- showing.value = false;
60
- nextTick().then(() => {
61
- showing.value = true;
62
-
63
- position.x = e.clientX;
64
- position.y = e.clientY;
65
- })
66
- }
67
-
68
- const handleClick = () => {
69
- alert('hi');
70
- }
71
- </script>
1
+ <template>
2
+ <div>
3
+
4
+
5
+ <MDropdown contextMenu>
6
+ <div style="background: #eee; width: 500px; height: 500px;">
7
+ </div>
8
+ <template #menu>
9
+ <MDropdownList>
10
+ <MDropdownItem>
11
+ Item One
12
+ </MDropdownItem>
13
+ <MDropdownItem>
14
+ Item Two
15
+ </MDropdownItem>
16
+
17
+ <MDropdown>
18
+ <MDropdownItem>
19
+ <template #icon-right>
20
+ <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
21
+ viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
22
+ <path fill-rule="evenodd"
23
+ d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
24
+ clip-rule="evenodd" />
25
+ </svg>
26
+
27
+ </template>
28
+ Item Three (Parent)
29
+ </MDropdownItem>
30
+
31
+ <template #menu>
32
+ <MDropdownList>
33
+ <MDropdownItem @click="handleClick">
34
+ Child One
35
+ </MDropdownItem>
36
+ <MDropdownItem>
37
+ Child Two
38
+ </MDropdownItem>
39
+ </MDropdownList>
40
+ </template>
41
+ </MDropdown>
42
+ </MDropdownList>
43
+ </template>
44
+ </MDropdown>
45
+ </div>
46
+ </template>
47
+
48
+ <script lang="ts" setup>
49
+ const handleClick = () => {
50
+ alert('hi');
51
+ }
52
+ </script>