@ulu/frontend-vue 0.1.1-beta.17 → 0.1.1-beta.18

package/lib/components/elements/UluDefinitionList.vue

@@ -1,5 +1,5 @@
 <template>
-  <dl :class="classes.list">
+  <dl class="definition-list" :class="[resolvedModifiers, classes.list]">
     <div 
       v-for="(item, index) in items" 
       :key="index"
@@ -10,6 +10,7 @@
           {{ item.term }}
         </slot>
       </dt>
+      
       <dd :class="classes.description">
         <slot name="description" :item="item" :index="index">
           {{ item.description }}
@@ -20,7 +21,10 @@
 </template>
 
 <script setup>
-  defineProps({
+  import { computed } from 'vue';
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  const props = defineProps({
     /**
      * Array of term, and description (props in object)
      * - Can use slots also
@@ -32,6 +36,54 @@
     classes: {
       type: Object,
       default: () => ({})
-    }
+    },
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array],
+    /**
+     * Displays only the definition descriptions on the same line.
+     */
+    inline: Boolean,
+    /**
+     * Displays both the definition term and its descriptions on the same line.
+     */
+    inlineAll: Boolean,
+    /**
+     * Displays the list in a two-column grid on larger screens.
+     */
+    table: Boolean,
+    /**
+     * Adds a rule between each item.
+     */
+    separated: Boolean,
+    /**
+     * Adds a rule to the top of the first item.
+     */
+    separatedFirst: Boolean,
+    /**
+     * Adds a rule to the bottom of the last item.
+     */
+    separatedLast: Boolean,
+    /**
+     * Reduces the margin between items.
+     */
+    compact: Boolean,
+  });
+
+  const internalModifiers = computed(() => ({
+    "inline" : props.inline,
+    "inline-all" : props.inlineAll,
+    "table" : props.table,
+    "separated" : props.separated,
+    "separated-first" : props.separatedFirst,
+    "separated-last" : props.separatedLast,
+    "compact" : props.compact,
+  }));
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    internal: internalModifiers,
+    baseClass: "definition-list"
   });
 </script>

package/lib/components/navigation/UluMenuStack.vue

@@ -56,8 +56,8 @@
   });
 
   const internalModifiers = computed(() => ({
-    'hanging' : props.hanging,
-    'compact' : props.compact,
+    "hanging" : props.hanging,
+    "compact" : props.compact,
   }));
 
   const { resolvedModifiers } = useModifiers({ 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.1-beta.17",
+  "version": "0.1.1-beta.18",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -63,7 +63,7 @@
   "peerDependencies": {
     "@formkit/auto-animate": "^0.9.0",
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.114",
+    "@ulu/frontend": "^0.1.0-beta.117",
     "@unhead/vue": "^2.0.11",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
@@ -87,7 +87,7 @@
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-links": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.1.0-beta.114",
+    "@ulu/frontend": "^0.1.0-beta.117",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",

package/types/components/elements/UluDefinitionList.vue.d.ts

@@ -4,8 +4,16 @@ type __VLS_WithSlots<T, S> = T & (new () => {
     $slots: S;
 });
 declare const __VLS_component: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
+    $props: Partial<typeof props>;
     classes: Record<string, any>;
+    table: boolean;
+    inline: boolean;
+    compact: boolean;
+    inlineAll: boolean;
+    separated: boolean;
+    separatedFirst: boolean;
+    separatedLast: boolean;
+    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>;
 type __VLS_Slots = {
@@ -19,8 +27,16 @@ type __VLS_Slots = {
         index: number;
     }) => any) | undefined;
 };
-declare const __VLS_props: {
+declare const props: {
     readonly classes: Record<string, any>;
+    readonly table: boolean;
+    readonly inline: boolean;
+    readonly compact: boolean;
+    readonly inlineAll: boolean;
+    readonly separated: boolean;
+    readonly separatedFirst: boolean;
+    readonly separatedLast: boolean;
+    readonly modifiers?: string | unknown[] | undefined;
     readonly items?: unknown[] | undefined;
 };
 //# sourceMappingURL=UluDefinitionList.vue.d.ts.map

package/types/components/elements/UluDefinitionList.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluDefinitionList.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluDefinitionList.vue"],"names":[],"mappings":"wBA4HqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,WAAW,CAAC;;;2OAE3C;;;;;;;;;;;;AArFD;;;EAaG"}
+{"version":3,"file":"UluDefinitionList.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluDefinitionList.vue"],"names":[],"mappings":"wBAsOqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;;;;2OAErC;;;;;;;;;;;;AAxID;;;;;;;;;;;EA6CG"}