@ulu/frontend-vue 0.1.0-beta.7 → 0.1.0-beta.9

package/lib/components/layout/UluAdaptiveLayout.vue

@@ -3,9 +3,7 @@
   <slot v-else name="mobile" />
 </template>
 
-<script>
-  export default {
-    name: "AdaptiveLayout",
-    inject: ["uluIsMobile"],
-  };
+<script setup>
+  import { useRequiredInject } from '../../composables/useRequiredInject.js';
+  const uluIsMobile = useRequiredInject('uluIsMobile');
 </script>

package/lib/components/layout/UluTitleRail.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="rail rail--title-rail">
+  <div 
+    class="rail rail--title-rail"
+    :class="{
+      'rail--rule' : rule
+    }"
+  >
     <div class="rail__item rail__item--title" :class="classes.itemTitle">
       <component 
         class="layout-flex type-max-width-small no-margin" 
@@ -49,6 +54,7 @@
         type: String,
         default: "h2"
       },
+      rule: Boolean
     }
   }
 </script>

package/lib/components/layout/UluWhenBreakpoint.vue

@@ -2,85 +2,79 @@
   <slot v-if="shouldShow" />
 </template>
 
-<script>
-  export default {
-    name: "UluWhenBreakpoint",
-    inject: ["uluBreakpointManager"],
-    props: {
-      max: String,
-      min: String,
-      only: String,
-    },
-    data() {
-      return {
-        conditions: {},
-        handlers: [],
-        handlersSetup: false,
-      };
-    },
-    computed: {
-      shouldShow() {
-        if (!this.handlersSetup) return false;
-        const props = ['max', 'min', 'only'].filter(p => this[p]);
-        if (props.length === 0) {
-          return false;
-        }
-        return Object.values(this.conditions).every(c => c);
-      },
-      propsIdentifier() {
-        return `${this.max || ''}-${this.min || ''}-${this.only || ''}`;
-      }
-    },
-    watch: {
-      uluBreakpointManager: {
-        handler(manager) {
-          if (manager && !this.handlersSetup) {
-            this.setupHandlers(manager);
-          }
-        },
-        immediate: true
-      },
-      propsIdentifier() {
-        if (this.uluBreakpointManager && this.handlersSetup) {
-            this.tearDownHandlers();
-            this.setupHandlers(this.uluBreakpointManager);
-        }
-      }
-    },
-    methods: {
-      setupHandlers(manager) {
-        const setupCondition = (direction) => {
-          const breakpointName = this[direction];
-          if (breakpointName) {
-            this.conditions[direction] = false;
-            const handler = {
-              on: () => { this.conditions[direction] = true; },
-              off: () => { this.conditions[direction] = false; },
-            };
-            manager.at(breakpointName)[direction](handler);
-            this.handlers.push({ name: breakpointName, direction, handler });
-          }
-        };
+<script setup>
+  import { ref, computed, watch, onBeforeUnmount } from 'vue';
+  import { useRequiredInject } from '../../composables/useRequiredInject.js';
+
+  const props = defineProps({
+    max: String,
+    min: String,
+    only: String,
+  });
 
-        setupCondition('max');
-        setupCondition('min');
-        setupCondition('only');
+  const uluBreakpointManager = useRequiredInject('uluBreakpointManager');
 
-        this.handlersSetup = true;
-      },
-      tearDownHandlers() {
-        if (this.uluBreakpointManager) {
-          this.handlers.forEach(({ name, direction, handler }) => {
-            this.uluBreakpointManager.at(name).remove(handler, direction);
-          });
-        }
-        this.handlers = [];
-        this.conditions = {};
-        this.handlersSetup = false;
+  const conditions = ref({});
+  const handlers = ref([]);
+  const handlersSetup = ref(false);
+
+  const shouldShow = computed(() => {
+    if (!handlersSetup.value) return false;
+    const activeProps = ['max', 'min', 'only'].filter(p => props[p]);
+    if (activeProps.length === 0) {
+      return false;
+    }
+    return Object.values(conditions.value).every(c => c);
+  });
+
+  const setupHandlers = (manager) => {
+    const setupCondition = (direction) => {
+      const breakpointName = props[direction];
+      if (breakpointName) {
+        conditions.value[direction] = false;
+        const handler = {
+          on: () => { conditions.value[direction] = true; },
+          off: () => { conditions.value[direction] = false; },
+        };
+        manager.at(breakpointName)[direction](handler);
+        handlers.value.push({ name: breakpointName, direction, handler });
       }
-    },
-    beforeUnmount() {
-      this.tearDownHandlers();
-    },
+    };
+
+    setupCondition('max');
+    setupCondition('min');
+    setupCondition('only');
+
+    handlersSetup.value = true;
+  };
+
+  const tearDownHandlers = () => {
+    if (uluBreakpointManager) {
+      handlers.value.forEach(({ name, direction, handler }) => {
+        uluBreakpointManager.at(name).remove(handler, direction);
+      });
+    }
+    handlers.value = [];
+    conditions.value = {};
+    handlersSetup.value = false;
   };
+
+  watch(uluBreakpointManager, (manager) => {
+    if (manager && !handlersSetup.value) {
+      setupHandlers(manager);
+    }
+  }, { immediate: true });
+
+  // Watch all the props and update if they change
+  // - Using array syntax to avoid "deep" flag
+  watch([() => props.max, () => props.min, () => props.only], () => {
+    if (uluBreakpointManager && handlersSetup.value) {
+      tearDownHandlers();
+      setupHandlers(uluBreakpointManager);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    tearDownHandlers();
+  });
 </script>

package/lib/composables/index.js

@@ -7,4 +7,5 @@
 export { useIcon } from './useIcon.js';
 export { useModifiers } from './useModifiers.js';
 export { useWindowResize } from './useWindowResize.js';
+export { useRequiredInject } from './useRequiredInject.js';
 export { useBreakpointManager } from './useBreakpointManager.js';

package/lib/composables/useRequiredInject.js

@@ -0,0 +1,26 @@
+import { inject } from 'vue';
+import { injectRegistry } from "../meta.js";
+
+// A unique sentinel object to detect if a value was provided.
+// This is used to differentiate between a provider not existing vs.
+// a provider explicitly giving a `null` value.
+const NOT_FOUND = {};
+
+/**
+ * Injects a dependency from a plugin (or other required inject) and throws an error if it's not available.
+ *
+ * @param {string} key - The injection key (e.g., 'uluBreakpointManager').
+ * @returns The injected value.
+ */
+export function useRequiredInject(key) {
+  const dependency = inject(key, NOT_FOUND);
+
+  if (dependency === NOT_FOUND) {
+    const plugin = injectRegistry[key] || '';
+    const pluginInfo = plugin ? ` from the '${ plugin }' plugin` : "";
+    const action = plugin ? "Please install missing plugin." : ""; 
+    throw new Error(`Required inject: '${ key }'${ pluginInfo } was not provided. ${ action }`);
+  }
+
+  return dependency;
+}

package/lib/meta.js

@@ -0,0 +1,14 @@
+/**
+ * @module lib/meta
+ * @description A central lookup for meta like info in the system
+ */
+
+export const injectRegistry = {
+  'uluCore': 'Core',
+  'uluIsMobile': 'Breakpoints',
+  'uluBreakpointActive': 'Breakpoints',
+  'uluBreakpointDirection': 'Breakpoints',
+  'uluBreakpointManager': 'Breakpoints',
+  'uluModals': 'Modals',
+  'uluToast': 'Toast',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.7",
+  "version": "0.1.0-beta.9",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [

package/types/composables/index.d.ts

@@ -1,5 +1,6 @@
 export { useIcon } from "./useIcon.js";
 export { useModifiers } from "./useModifiers.js";
 export { useWindowResize } from "./useWindowResize.js";
+export { useRequiredInject } from "./useRequiredInject.js";
 export { useBreakpointManager } from "./useBreakpointManager.js";
 //# sourceMappingURL=index.d.ts.map

package/types/composables/useRequiredInject.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Injects a dependency from a plugin (or other required inject) and throws an error if it's not available.
+ *
+ * @param {string} key - The injection key (e.g., 'uluBreakpointManager').
+ * @returns The injected value.
+ */
+export function useRequiredInject(key: string): {};
+//# sourceMappingURL=useRequiredInject.d.ts.map

package/types/composables/useRequiredInject.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRequiredInject.d.ts","sourceRoot":"","sources":["../../lib/composables/useRequiredInject.js"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,uCAHW,MAAM,MAchB"}

package/types/meta.d.ts

@@ -0,0 +1,10 @@
+export namespace injectRegistry {
+    let uluCore: string;
+    let uluIsMobile: string;
+    let uluBreakpointActive: string;
+    let uluBreakpointDirection: string;
+    let uluBreakpointManager: string;
+    let uluModals: string;
+    let uluToast: string;
+}
+//# sourceMappingURL=meta.d.ts.map

package/types/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../lib/meta.js"],"names":[],"mappings":""}