@ulu/frontend-vue 0.1.1-beta.5 → 0.1.1-beta.6

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.
@@ -1,10 +1,8 @@
1
1
  <template>
2
- <nav
2
+ <component
3
3
  class="menu-stack"
4
- :class="{
5
- 'menu-stack--hanging' : hanging,
6
- 'menu-stack--compact' : compact
7
- }"
4
+ :is="containerElement"
5
+ :class="resolvedModifiers"
8
6
  >
9
7
  <UluMenu
10
8
  :items="items"
@@ -19,33 +17,52 @@
19
17
  }"
20
18
  :noChildren="noChildren"
21
19
  />
22
- </nav>
20
+ </component>
23
21
  </template>
24
22
 
25
- <script>
23
+ <script setup>
24
+ import { computed } from "vue";
26
25
  import UluMenu from "./UluMenu.vue";
27
- export default {
28
- name: "UluMenuStack",
29
- components: {
30
- UluMenu
26
+ import { useModifiers } from "../../composables/useModifiers.js";
27
+
28
+ const props = defineProps({
29
+ /**
30
+ * Menu item (see UluMenu)
31
+ */
32
+ items: Array,
33
+ /**
34
+ * The HTML element to use as the container (e.g., 'nav', 'div', 'aside').
35
+ */
36
+ containerElement: {
37
+ type: String,
38
+ default: "nav"
31
39
  },
32
- props: {
33
- /**
34
- * Menu item (see UluMenu)
35
- */
36
- items: Array,
37
- /**
38
- * Hanging style menu
39
- */
40
- hanging: Boolean,
41
- /**
42
- * Compact style menu
43
- */
44
- compact: Boolean,
45
- /**
46
- * Don't include children of menu
47
- */
48
- noChildren: Boolean
49
- }
50
- };
40
+ /**
41
+ * Hanging style menu
42
+ */
43
+ hanging: Boolean,
44
+ /**
45
+ * Compact style menu
46
+ */
47
+ compact: Boolean,
48
+ /**
49
+ * Don't include children of menu
50
+ */
51
+ noChildren: Boolean,
52
+ /**
53
+ * Class modifiers (ie. 'transparent', 'secondary', etc)
54
+ */
55
+ modifiers: [String, Array]
56
+ });
57
+
58
+ const internalModifiers = computed(() => ({
59
+ 'hanging' : props.hanging,
60
+ 'compact' : props.compact,
61
+ }));
62
+
63
+ const { resolvedModifiers } = useModifiers({
64
+ props,
65
+ internal: internalModifiers,
66
+ baseClass: "menu-stack"
67
+ });
51
68
  </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ulu/frontend-vue",
3
- "version": "0.1.1-beta.5",
3
+ "version": "0.1.1-beta.6",
4
4
  "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
5
5
  "type": "module",
6
6
  "files": [
@@ -1,138 +1,19 @@
1
- declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
2
- /**
3
- * Menu item (see UluMenu)
4
- */
5
- items: ArrayConstructor;
6
- /**
7
- * Hanging style menu
8
- */
9
- hanging: BooleanConstructor;
10
- /**
11
- * Compact style menu
12
- */
13
- compact: BooleanConstructor;
14
- /**
15
- * Don't include children of menu
16
- */
17
- noChildren: BooleanConstructor;
18
- }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
19
- /**
20
- * Menu item (see UluMenu)
21
- */
22
- items: ArrayConstructor;
23
- /**
24
- * Hanging style menu
25
- */
26
- hanging: BooleanConstructor;
27
- /**
28
- * Compact style menu
29
- */
30
- compact: BooleanConstructor;
31
- /**
32
- * Don't include children of menu
33
- */
34
- noChildren: BooleanConstructor;
35
- }>> & Readonly<{}>, {
1
+ declare const _default: import("vue").DefineComponent<{}, {
2
+ $props: Partial<typeof props>;
36
3
  noChildren: boolean;
4
+ containerElement: string;
37
5
  hanging: boolean;
38
6
  compact: boolean;
39
- }, {}, {
40
- UluMenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
41
- items: ArrayConstructor;
42
- classes: {
43
- type: ObjectConstructor;
44
- default: () => {};
45
- };
46
- iconOnly: BooleanConstructor;
47
- noChildren: BooleanConstructor;
48
- }>, {}, {}, {}, {
49
- handleItemClick(event: any, item: any): void;
50
- }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "item-click"[], "item-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
51
- items: ArrayConstructor;
52
- classes: {
53
- type: ObjectConstructor;
54
- default: () => {};
55
- };
56
- iconOnly: BooleanConstructor;
57
- noChildren: BooleanConstructor;
58
- }>> & Readonly<{
59
- "onItem-click"?: ((...args: any[]) => any) | undefined;
60
- }>, {
61
- classes: Record<string, any>;
62
- iconOnly: boolean;
63
- noChildren: boolean;
64
- }, {}, {
65
- UluIcon: import("vue").DefineComponent<{}, {
66
- $props: Partial<{
67
- readonly spaced: boolean;
68
- readonly icon?: string | boolean | unknown[] | Record<string, any> | undefined;
69
- }>;
70
- spaced: boolean;
71
- icon?: string | boolean | unknown[] | Record<string, any> | undefined;
72
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
73
- UluTag: {
74
- new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
75
- $props: Partial<{
76
- readonly counter: boolean;
77
- readonly size?: string | undefined;
78
- readonly type?: string | undefined;
79
- readonly text?: string | number | undefined;
80
- readonly icon?: string | unknown[] | undefined;
81
- readonly modifiers?: string | unknown[] | undefined;
82
- }>;
83
- counter: boolean;
84
- size?: string | undefined;
85
- type?: string | undefined;
86
- text?: string | number | undefined;
87
- icon?: string | unknown[] | undefined;
88
- modifiers?: string | unknown[] | undefined;
89
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
90
- P: {};
91
- B: {};
92
- D: {};
93
- C: {};
94
- M: {};
95
- Defaults: {};
96
- }, Readonly<{}> & Readonly<{}>, {
97
- $props: Partial<{
98
- readonly counter: boolean;
99
- readonly size?: string | undefined;
100
- readonly type?: string | undefined;
101
- readonly text?: string | number | undefined;
102
- readonly icon?: string | unknown[] | undefined;
103
- readonly modifiers?: string | unknown[] | undefined;
104
- }>;
105
- counter: boolean;
106
- size?: string | undefined;
107
- type?: string | undefined;
108
- text?: string | number | undefined;
109
- icon?: string | unknown[] | undefined;
110
- modifiers?: string | unknown[] | undefined;
111
- }, {}, {}, {}, {}>;
112
- __isFragment?: never;
113
- __isTeleport?: never;
114
- __isSuspense?: never;
115
- } & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
116
- $props: Partial<{
117
- readonly counter: boolean;
118
- readonly size?: string | undefined;
119
- readonly type?: string | undefined;
120
- readonly text?: string | number | undefined;
121
- readonly icon?: string | unknown[] | undefined;
122
- readonly modifiers?: string | unknown[] | undefined;
123
- }>;
124
- counter: boolean;
125
- size?: string | undefined;
126
- type?: string | undefined;
127
- text?: string | number | undefined;
128
- icon?: string | unknown[] | undefined;
129
- modifiers?: string | unknown[] | undefined;
130
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
131
- $slots: {
132
- default?: (props: {}) => any;
133
- };
134
- });
135
- }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
136
- }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
7
+ modifiers?: string | unknown[] | undefined;
8
+ items?: unknown[] | undefined;
9
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
137
10
  export default _default;
11
+ declare const props: {
12
+ readonly noChildren: boolean;
13
+ readonly containerElement: string;
14
+ readonly hanging: boolean;
15
+ readonly compact: boolean;
16
+ readonly modifiers?: string | unknown[] | undefined;
17
+ readonly items?: unknown[] | undefined;
18
+ };
138
19
  //# sourceMappingURL=UluMenuStack.vue.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"UluMenuStack.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation/UluMenuStack.vue"],"names":[],"mappings":";IA2DM;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;IAdH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG"}
1
+ {"version":3,"file":"UluMenuStack.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation/UluMenuStack.vue"],"names":[],"mappings":";YA+LmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;;AAtHtC;;;;;;;EA4BG"}