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

package/lib/components/navigation/UluMenuStack.vue

@@ -1,10 +1,8 @@
 <template>
-  <nav 
+  <component
     class="menu-stack"
-    :class="{
-      'menu-stack--hanging' : hanging,
-      'menu-stack--compact' : compact
-    }"
+    :is="containerElement" 
+    :class="resolvedModifiers"
   >
     <UluMenu 
       :items="items" 
@@ -19,33 +17,52 @@
       }" 
       :noChildren="noChildren"
     />
-  </nav>
+  </component>
 </template>
 
-<script>
+<script setup>
+  import { computed } from "vue";
   import UluMenu from "./UluMenu.vue";
-  export default {
-    name: "UluMenuStack",
-    components: {
-      UluMenu
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  const props = defineProps({
+    /**
+     * Menu item (see UluMenu)
+     */
+    items: Array,
+    /**
+    * The HTML element to use as the container (e.g., 'nav', 'div', 'aside').
+     */
+    containerElement: {
+      type: String,
+      default: "nav"
     },
-    props: {
-      /**
-       * Menu item (see UluMenu)
-       */
-      items: Array,
-      /**
-       * Hanging style menu
-       */
-      hanging: Boolean,
-      /**
-       * Compact style menu
-       */
-      compact: Boolean,
-      /**
-       * Don't include children of menu
-       */
-      noChildren: Boolean
-    }
-  };
+    /**
+     * Hanging style menu
+     */
+    hanging: Boolean,
+    /**
+     * Compact style menu
+     */
+    compact: Boolean,
+    /**
+     * Don't include children of menu
+     */
+    noChildren: Boolean,
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array]
+  });
+
+  const internalModifiers = computed(() => ({
+    'hanging' : props.hanging,
+    'compact' : props.compact,
+  }));
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    internal: internalModifiers,
+    baseClass: "menu-stack"
+  });
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.1-beta.4",
+  "version": "0.1.1-beta.6",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -15,14 +15,22 @@
       "types": "./types/index.d.ts"
     },
     "./*": {
-      "import" : "./lib/*",
-      "types" : "./types/*"
+      "import": "./lib/*",
+      "types": "./types/*"
     },
     "./dist": {
       "import": "./dist/frontend-vue.js"
     },
     "./scss": "./lib/_index.scss"
   },
+  "types": "./types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./types/*"
+      ]
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Jscherbe/frontend-vue.git"

package/types/components/navigation/UluMenuStack.vue.d.ts

@@ -1,138 +1,19 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /**
-     * Menu item (see UluMenu)
-     */
-    items: ArrayConstructor;
-    /**
-     * Hanging style menu
-     */
-    hanging: BooleanConstructor;
-    /**
-     * Compact style menu
-     */
-    compact: BooleanConstructor;
-    /**
-     * Don't include children of menu
-     */
-    noChildren: BooleanConstructor;
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Menu item (see UluMenu)
-     */
-    items: ArrayConstructor;
-    /**
-     * Hanging style menu
-     */
-    hanging: BooleanConstructor;
-    /**
-     * Compact style menu
-     */
-    compact: BooleanConstructor;
-    /**
-     * Don't include children of menu
-     */
-    noChildren: BooleanConstructor;
-}>> & Readonly<{}>, {
+declare const _default: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
     noChildren: boolean;
+    containerElement: string;
     hanging: boolean;
     compact: boolean;
-}, {}, {
-    UluMenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        items: ArrayConstructor;
-        classes: {
-            type: ObjectConstructor;
-            default: () => {};
-        };
-        iconOnly: BooleanConstructor;
-        noChildren: BooleanConstructor;
-    }>, {}, {}, {}, {
-        handleItemClick(event: any, item: any): void;
-    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "item-click"[], "item-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        items: ArrayConstructor;
-        classes: {
-            type: ObjectConstructor;
-            default: () => {};
-        };
-        iconOnly: BooleanConstructor;
-        noChildren: BooleanConstructor;
-    }>> & Readonly<{
-        "onItem-click"?: ((...args: any[]) => any) | undefined;
-    }>, {
-        classes: Record<string, any>;
-        iconOnly: boolean;
-        noChildren: boolean;
-    }, {}, {
-        UluIcon: import("vue").DefineComponent<{}, {
-            $props: Partial<{
-                readonly spaced: boolean;
-                readonly icon?: string | boolean | unknown[] | Record<string, any> | undefined;
-            }>;
-            spaced: boolean;
-            icon?: string | boolean | unknown[] | Record<string, any> | undefined;
-        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-        UluTag: {
-            new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
-                $props: Partial<{
-                    readonly counter: boolean;
-                    readonly size?: string | undefined;
-                    readonly type?: string | undefined;
-                    readonly text?: string | number | undefined;
-                    readonly icon?: string | unknown[] | undefined;
-                    readonly modifiers?: string | unknown[] | undefined;
-                }>;
-                counter: boolean;
-                size?: string | undefined;
-                type?: string | undefined;
-                text?: string | number | undefined;
-                icon?: string | unknown[] | undefined;
-                modifiers?: string | unknown[] | undefined;
-            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<{}> & Readonly<{}>, {
-                $props: Partial<{
-                    readonly counter: boolean;
-                    readonly size?: string | undefined;
-                    readonly type?: string | undefined;
-                    readonly text?: string | number | undefined;
-                    readonly icon?: string | unknown[] | undefined;
-                    readonly modifiers?: string | unknown[] | undefined;
-                }>;
-                counter: boolean;
-                size?: string | undefined;
-                type?: string | undefined;
-                text?: string | number | undefined;
-                icon?: string | unknown[] | undefined;
-                modifiers?: string | unknown[] | undefined;
-            }, {}, {}, {}, {}>;
-            __isFragment?: never;
-            __isTeleport?: never;
-            __isSuspense?: never;
-        } & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
-            $props: Partial<{
-                readonly counter: boolean;
-                readonly size?: string | undefined;
-                readonly type?: string | undefined;
-                readonly text?: string | number | undefined;
-                readonly icon?: string | unknown[] | undefined;
-                readonly modifiers?: string | unknown[] | undefined;
-            }>;
-            counter: boolean;
-            size?: string | undefined;
-            type?: string | undefined;
-            text?: string | number | undefined;
-            icon?: string | unknown[] | undefined;
-            modifiers?: string | unknown[] | undefined;
-        }, {}, {}, {}, 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 () => {
-            $slots: {
-                default?: (props: {}) => any;
-            };
-        });
-    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    modifiers?: string | unknown[] | undefined;
+    items?: unknown[] | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
+declare const props: {
+    readonly noChildren: boolean;
+    readonly containerElement: string;
+    readonly hanging: boolean;
+    readonly compact: boolean;
+    readonly modifiers?: string | unknown[] | undefined;
+    readonly items?: unknown[] | undefined;
+};
 //# sourceMappingURL=UluMenuStack.vue.d.ts.map

package/types/components/navigation/UluMenuStack.vue.d.ts.map

@@ -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"}
+{"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"}