lkt-menu 2.0.3 → 2.0.5

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 (8) hide show
  1. package/README.md +0 -250
  2. package/dist/build.js +63 -64
  3. package/dist/components/MenuItem.vue.d.ts +28 -997
  4. package/dist/lib-components/LktMenu.vue.d.ts +12 -658
  5. package/package.json +2 -2
  6. package/src/components/MenuItem.vue +106 -107
  7. package/src/lib-components/LktMenu.vue +1 -1
  8. package/theme/default.css +0 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lkt-menu",
3
- "version": "2.0.3",
3
+ "version": "2.0.5",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "lkt",
@@ -50,7 +50,7 @@
50
50
  "vue-tsc": "^2.2.0"
51
51
  },
52
52
  "peerDependencies": {
53
- "lkt-anchor": "^2.0.1",
53
+ "lkt-anchor": "^2.0.4",
54
54
  "lkt-data-state": "^1.0.11",
55
55
  "lkt-http-client": "^1.0.34",
56
56
  "lkt-i18n": "^1.1.0",
package/src/components/MenuItem.vue CHANGED
@@ -6,111 +6,105 @@
6
6
  import { Settings } from '../settings/Settings';
7
7
 
8
8
  const emit = defineEmits([
9
- 'update:modelValue'
10
- ]);
11
-
12
- const props = withDefaults(defineProps<{
13
- modelValue?: MenuEntryConfig
14
- }>(), {
15
- modelValue: () => ({})
16
- });
17
-
18
- const entry = ref(<MenuEntryConfig>props.modelValue),
19
- slots = useSlots(),
20
- router = useRouter(),
21
- isActive = ref(false);
22
-
23
- const onClickToggle = () => {
24
- entry.value.isOpened = !entry.value.isOpened;
25
- },
26
- onClick = () => {
27
- if (typeof entry.value.children !== 'undefined' && entry.value.children?.length > 0) onClickToggle();
28
-
29
- if (typeof entry.value.events?.click === 'function') {
30
- entry.value.events.click({
31
- entry: entry.value
32
- });
33
- return 1;
34
- }
9
+ 'update:modelValue',
10
+ ]);
35
11
 
36
- if (typeof entry.value.onClick === 'function') {
37
- entry.value.onClick({
38
- entry: entry.value
39
- });
40
- }
41
- return 1;
42
- };
43
-
44
- const canRenderIcon = computed(() => {
45
- return slots['icon-' + entry.value.key]
46
- || entry.value.icon !== '';
47
- }),
48
- classes = computed(() => {
49
- let r = [];
50
- if (canRenderIcon.value) r.push('has-icon');
51
- if (isActive.value) r.push('is-active');
52
- if (entry.value.type) r.push(`is-${entry.value.type}`);
53
- return r.join(' ');
12
+ const props = withDefaults(defineProps<{
13
+ modelValue?: MenuEntryConfig
14
+ }>(), {
15
+ modelValue: () => ({}),
54
16
  });
55
17
 
56
- const availableKeys = computed(() => {
57
- let r: string[] = [];
58
- return fetchKeys(r, entry.value?.children ?? []);
59
- }),
60
- entryIconSlots = computed((): Array<string> => {
61
- let r = [];
62
- for (let k in slots) {
63
- if (k.startsWith('icon-')) {
64
- if (availableKeys.value.includes(k.substring(5))) {
65
- r.push(k);
18
+ const entry = ref(<MenuEntryConfig>props.modelValue),
19
+ slots = useSlots(),
20
+ router = useRouter(),
21
+ isActive = ref(false);
22
+
23
+ const onClickToggle = () => {
24
+ entry.value.isOpened = !entry.value.isOpened;
25
+ },
26
+ onClick = () => {
27
+ if (typeof entry.value.children !== 'undefined' && entry.value.children?.length > 0 && !entry.value.keepOpenOnChildClick) onClickToggle();
28
+
29
+ if (typeof entry.value.events?.click === 'function') {
30
+ entry.value.events.click({
31
+ entry: entry.value,
32
+ });
33
+ return 1;
34
+ }
35
+ return 1;
36
+ };
37
+
38
+ const canRenderIcon = computed(() => {
39
+ return slots['icon-' + entry.value.key]
40
+ || entry.value.icon !== '';
41
+ }),
42
+ classes = computed(() => {
43
+ let r = [];
44
+ if (canRenderIcon.value) r.push('has-icon');
45
+ if (isActive.value) r.push('is-active');
46
+ if (entry.value.type) r.push(`is-${entry.value.type}`);
47
+ return r.join(' ');
48
+ });
49
+
50
+ const availableKeys = computed(() => {
51
+ let r: string[] = [];
52
+ return fetchKeys(r, entry.value?.children ?? []);
53
+ }),
54
+ entryIconSlots = computed((): Array<string> => {
55
+ let r = [];
56
+ for (let k in slots) {
57
+ if (k.startsWith('icon-')) {
58
+ if (availableKeys.value.includes(k.substring(5))) {
59
+ r.push(k);
60
+ }
66
61
  }
67
62
  }
68
- }
69
- return r;
70
- }),
71
- computedIsActive = computed(() => {
72
- if (entry.value.isActive) return true;
73
-
74
- if (typeof entry.value.isActiveChecker === 'function') {
75
- let r = entry.value.isActiveChecker({
76
- entry: entry.value
77
- });
78
- return !!r;
79
- }
63
+ return r;
64
+ }),
65
+ computedIsActive = computed(() => {
66
+ if (entry.value.isActive) return true;
67
+
68
+ if (typeof entry.value.isActiveChecker === 'function') {
69
+ let r = entry.value.isActiveChecker({
70
+ entry: entry.value,
71
+ });
72
+ return !!r;
73
+ }
80
74
 
81
- return false;
82
- }),
83
- hasToggleSlot = computed(() => {
84
- return !!Settings.toggleSlot;
85
- }),
86
- toggleSlot = computed(() => {
87
- return Settings.toggleSlot;
75
+ return false;
76
+ }),
77
+ hasToggleSlot = computed(() => {
78
+ return !!Settings.toggleSlot;
79
+ }),
80
+ toggleSlot = computed(() => {
81
+ return Settings.toggleSlot;
82
+ });
83
+
84
+ watch(() => props.modelValue, (v) => {
85
+ entry.value = v;
86
+ }, { deep: true });
87
+
88
+ watch(entry, (v) => {
89
+ emit('update:modelValue', v);
90
+ }, { deep: true });
91
+
92
+ onMounted(() => {
93
+ let currentRoute = router?.currentRoute;
94
+ if (currentRoute) {
95
+ if (currentRoute.value.path === entry.value.anchor?.to) {
96
+ entry.value.isOpened = true;
97
+
98
+ } else if (typeof entry.value.children !== 'undefined' && entry.value.children?.length > 0) {
99
+ let opened = false;
100
+ entry.value.children?.forEach((child) => {
101
+ if (currentRoute.value.path === child.anchor?.to) opened = true;
102
+ });
103
+
104
+ if (opened) entry.value.isOpened = true;
105
+ }
106
+ }
88
107
  });
89
-
90
- watch(() => props.modelValue, (v) => {
91
- entry.value = v
92
- }, {deep: true});
93
-
94
- watch(entry, (v) => {
95
- emit('update:modelValue', v)
96
- }, {deep: true});
97
-
98
- onMounted(() => {
99
- let currentRoute = router?.currentRoute;
100
- if (currentRoute) {
101
- if (currentRoute.value.path === entry.value.anchor?.to) {
102
- entry.value.isOpened = true;
103
-
104
- } else if (typeof entry.value.children !== 'undefined' && entry.value.children?.length > 0) {
105
- let opened = false;
106
- entry.value.children?.forEach((child) => {
107
- if (currentRoute.value.path === child.anchor?.to) opened = true;
108
- });
109
-
110
- if (opened) entry.value.isOpened = true;
111
- }
112
- }
113
- });
114
108
  </script>
115
109
 
116
110
  <template>
@@ -121,10 +115,10 @@ onMounted(() => {
121
115
  v-bind="entry.button"
122
116
  >
123
117
  <template v-if="slots.tooltip" #tooltip>
124
- <slot name="tooltip"/>
118
+ <slot name="tooltip" />
125
119
  </template>
126
120
  <template v-if="slots.split" #split>
127
- <slot name="split"/>
121
+ <slot name="split" />
128
122
  </template>
129
123
  </lkt-button>
130
124
 
@@ -145,10 +139,10 @@ onMounted(() => {
145
139
  <template v-if="slots['icon-'+entry.key]">
146
140
  <slot :name="'icon-'+entry.key"
147
141
  :key="entry.key"
148
- :entry="entry"/>
142
+ :entry="entry" />
149
143
  </template>
150
144
  <template v-else-if="entry.icon !== ''">
151
- <i :class="entry.icon"/>
145
+ <i :class="entry.icon" />
152
146
  </template>
153
147
  </div>
154
148
  <div class="lkt-menu-entry-text" v-if="text !== ''">
@@ -158,19 +152,24 @@ onMounted(() => {
158
152
  </template>
159
153
  </lkt-anchor>
160
154
 
161
- <div class="lkt-menu-entry-toggle" v-if="entry.type !== MenuEntryType.Button && entry.children && entry.children?.length > 0" @click="onClickToggle">
155
+ <div class="lkt-menu-entry-toggle"
156
+ v-if="entry.type !== MenuEntryType.Button && entry.children && entry.children?.length > 0"
157
+ @click="onClickToggle">
162
158
  <template v-if="hasToggleSlot">
163
- <component :is="toggleSlot" class="lkt-menu-entry-toggle-inner" :class="entry.isOpened ? 'is-opened' : '' "/>
159
+ <component :is="toggleSlot" class="lkt-menu-entry-toggle-inner"
160
+ :class="entry.isOpened ? 'is-opened' : '' " />
164
161
  </template>
165
162
  <div v-else class="lkt-menu-entry-toggle-inner" :class="entry.isOpened ? 'is-opened' : '' ">
166
- <i class="lkt-icn-angle-bottom"/>
163
+ <i class="lkt-icn-angle-bottom" />
167
164
  </div>
168
165
  </div>
169
166
  </div>
170
167
  <div class="lkt-menu-entry-children" v-if="entry.isOpened">
171
- <menu-item v-for="(_, i) in entry.children" v-model="entry.children[i]" :key="entry.children[i].key">
168
+ <menu-item v-for="(_, i) in entry.children"
169
+ v-model="entry.children[i]"
170
+ :key="entry.children[i].key">
172
171
  <template v-for="slot in entryIconSlots" v-slot:[slot]>
173
- <slot :name="slot"/>
172
+ <slot :name="slot" />
174
173
  </template>
175
174
  </menu-item>
176
175
  </div>
package/src/lib-components/LktMenu.vue CHANGED
@@ -87,7 +87,7 @@
87
87
  <template>
88
88
  <div class="lkt-menu-container">
89
89
  <div class="lkt-menu">
90
- <menu-item v-for="(entry, i) in entries" v-model="entries[i]" :key="entry.key">
90
+ <menu-item v-for="(entry, i) in entries" v-model="entries[i]" :key="entry.key" :class="entry.class">
91
91
  <template v-for="slot in entryIconSlots" v-slot:[slot]>
92
92
  <slot :name="slot" />
93
93
  </template>
package/theme/default.css CHANGED
@@ -2,16 +2,12 @@
2
2
  --lkt-menu--display: flex;
3
3
  --lkt-menu--flex-direction: column;
4
4
  --lkt-menu--align-items: stretch;
5
-
6
- /** Font */
7
5
  --lkt-menu--font-family: system-ui, Helvetica;
8
6
  --lkt-menu--font-size: 16px;
9
7
  --lkt-menu--font-weight: 400;
10
8
  --lkt-menu--line-height: 1;
11
9
  --lkt-menu--text-align: left;
12
10
  --lkt-menu--text-decoration: none;
13
-
14
- /** Sizing */
15
11
  --lkt-menu--width: 100%;
16
12
  --lkt-menu--min-width: 0;
17
13
  --lkt-menu--max-width: initial;
@@ -19,8 +15,6 @@
19
15
  --lkt-menu--padding: 15px;
20
16
  --lkt-menu--gap: 15px;
21
17
  --lkt-menu--entry--gap: 0;
22
-
23
- /** Colors */
24
18
  --lkt-menu--background: #ffffff;
25
19
  --lkt-menu--toggle--color: #444444;
26
20