@ulu/frontend-vue 0.5.16 → 0.6.0

package/lib/components/forms/UluFormText.vue

@@ -1,42 +1,24 @@
 <template>
-  <label :class="{ 'hidden-visually' : labelHidden }" :for="id">
-    <slot name="label">
-      {{ label }}<UluFormRequiredChar v-if="required" />
-    </slot>
-  </label>
   <input 
     type="text" 
+    v-bind="fieldAttrs"
     :value="modelValue"
     @input="$emit('update:modelValue', $event.target.value)" 
-    :id="id"
-    :required="required"
   >
 </template>
 
 <script setup>
-  import { newId } from "../../utils/dom.js";
-  import UluFormRequiredChar from "./UluFormRequiredChar.vue";
+  import { inject, computed } from "vue";
 
-  defineProps({
-    /**
-     * The label for the text input.
-     */
-    label: String,
+  const props = defineProps({
     /**
      * The value of the text input (for v-model).
      */
-    modelValue: String,
-    /**
-     * If true, the label will be visually hidden.
-     */
-    labelHidden: Boolean,
-    /**
-     * If true, the field will be required.
-     */
-    required: Boolean
+    modelValue: [String, Number]
   });
 
-  defineEmits(['update:modelValue']);
+  defineEmits(["update:modelValue"]);
 
-  const id = newId();
+  const injectedAttrs = inject("uluFormFieldAttrs", null);
+  const fieldAttrs = computed(() => injectedAttrs ? injectedAttrs.value : {});
 </script>

package/lib/components/forms/UluFormTextarea.vue

@@ -1,41 +1,23 @@
 <template>
-  <label :class="{ 'hidden-visually' : labelHidden }" :for="id">
-    <slot name="label">
-      {{ label }}<UluFormRequiredChar v-if="required" />
-    </slot>
-  </label>
   <textarea
+    v-bind="fieldAttrs"
     :value="modelValue"
     @input="$emit('update:modelValue', $event.target.value)" 
-    :id="id"
-    :required="required"
   ></textarea>
 </template>
 
 <script setup>
-  import { newId } from "../../utils/dom.js";
-  import UluFormRequiredChar from "./UluFormRequiredChar.vue";
+  import { inject, computed } from "vue";
 
-  defineProps({
-    /**
-     * The label for the textarea.
-     */
-    label: String,
+  const props = defineProps({
     /**
      * The value of the textarea (for v-model).
      */
-    modelValue: String,
-    /**
-     * If true, the label will be visually hidden.
-     */
-    labelHidden: Boolean,
-    /**
-     * If true, the field will be required.
-     */
-    required: Boolean
+    modelValue: [String, Number]
   });
 
-  defineEmits(['update:modelValue']);
+  defineEmits(["update:modelValue"]);
 
-  const id = newId();
+  const injectedAttrs = inject("uluFormFieldAttrs", null);
+  const fieldAttrs = computed(() => injectedAttrs ? injectedAttrs.value : {});
 </script>

package/lib/components/forms/UluSearchForm.vue

@@ -1,32 +1,80 @@
 <template>
-  <div class="form-theme search-form type-small">
-    <div class="search-form__field">
-      <label class="hidden-visually">Search</label>
-      <input 
-        class="search-form__input"
-        type="text" 
-        id="example-input" 
-        :placeholder="placeholder"
-      >
+  <form class="form-theme" @submit.prevent="onSubmit">
+    <div class="input-group input-group--joined">
+      <div class="input-group__item input-group__item--field">
+        <label :for="inputId" class="hidden-visually">{{ label }}</label>
+        <input 
+          type="search" 
+          :id="inputId" 
+          class="input-group__input"
+          :placeholder="placeholder"
+          :value="modelValue"
+          @input="$emit('update:modelValue', $event.target.value)"
+        >
+      </div>
+      <div class="input-group__item">
+        <slot name="submit">
+          <UluButton 
+            class="input-group__button"
+            v-bind="submitButtonProps"
+          />
+        </slot>
+      </div>
     </div>
-    <button 
-      class="search-form__submit button button--primary"
-      aria-label="Submit Search"
-    >
-      <UluIcon icon="type:search" />
-    </button>
-  </div>
+  </form>
 </template>
 
 <script setup>
-  import UluIcon from "../elements/UluIcon.vue";
-  defineProps({
+  import { computed } from "vue";
+  import { newId } from "../../utils/dom.js";
+  import UluButton from "../elements/UluButton.vue";
+
+  const props = defineProps({    
+    /**
+     * The search input value (for v-model).
+     */
+    modelValue: {
+      type: String,
+      default: ""
+    },
     /**
      * The placeholder text for the search input.
      */
     placeholder: {
       type: String,
       default: "Titles, keyword…"
-    }
+    },
+    /**
+     * The visually hidden label for the search input.
+     */
+    label: {
+      type: String,
+      default: "Search"
+    },
+    /**
+     * Props to pass to the default UluButton component (used for submit button)
+     * - Alternately use 'submit' slot
+     */
+    submitButtonProps: {
+      type: Object,
+      default: () => ({
+        type: "submit",
+        primary: true,
+        icon: "type:search",
+        ariaLabel: "Submit Search"
+      })
+    },
+    /**
+     * Optional ID for the input element. If not provided, a unique ID is generated.
+     */
+    id: String
   });
+
+  const emit = defineEmits(["update:modelValue", "submit"]);
+
+  const inputId = computed(() => props.id || newId());
+
+  const onSubmit = () => {
+    emit("submit", props.modelValue);
+  };
 </script>

package/lib/components/forms/UluSelectableMenu.vue

@@ -32,75 +32,75 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+  import { computed } from 'vue';
 
-const props = defineProps({
-  /**
-   * The legend for the menu.
-   */
-  legend: String,
-  /**
-   * An array of options for the menu.
-   */
-  options: Array,
-  /**
-   * Use compact modifier on menu stack
-   */
-  compact: Boolean,
-  /**
-   * The type of input to use ('checkbox' or 'radio').
-   */
-  type: {
-    type: String,
-    default: 'checkbox',
-  },
-  /**
-   * The value of the menu (for v-model).
-   */
-  modelValue: [String, Array],
-  /**
-   * If true, the input elements will be visually hidden.
-   */
-  hideInputs: Boolean
-});
+  const props = defineProps({
+    /**
+     * The legend for the menu.
+     */
+    legend: String,
+    /**
+     * An array of options for the menu.
+     */
+    options: Array,
+    /**
+     * Use compact modifier on menu stack
+     */
+    compact: Boolean,
+    /**
+     * The type of input to use ('checkbox' or 'radio').
+     */
+    type: {
+      type: String,
+      default: 'checkbox',
+    },
+    /**
+     * The value of the menu (for v-model).
+     */
+    modelValue: [String, Array],
+    /**
+     * If true, the input elements will be visually hidden.
+     */
+    hideInputs: Boolean
+  });
 
-const emit = defineEmits(['update:modelValue']);
+  const emit = defineEmits(['update:modelValue']);
 
-const name = computed(() => props.legend ? props.legend.toLowerCase().replace(/\s+/g, '-') : `menu-${ Math.random().toString(36).substring(7) }`);
-const legendId = computed(() => name.value ? `${name.value}-legend` : null);
-const groupRole = computed(() => props.type === 'radio' ? 'radiogroup' : 'group');
+  const name = computed(() => props.legend ? props.legend.toLowerCase().replace(/\s+/g, '-') : `menu-${ Math.random().toString(36).substring(7) }`);
+  const legendId = computed(() => name.value ? `${name.value}-legend` : null);
+  const groupRole = computed(() => props.type === 'radio' ? 'radiogroup' : 'group');
 
-const getId = (option) => `${name.value}-${option.uid}`;
+  const getId = (option) => `${name.value}-${option.uid}`;
 
-const isChecked = (option) => {
-  if (props.type === 'radio') {
-    return props.modelValue === option.uid;
-  }
-  if (Array.isArray(props.modelValue)) {
-    return props.modelValue.includes(option.uid);
-  }
-  if (props.type === 'checkbox') {
-    return option.checked || false;
-  }
-  return false;
-};
-
-const handleChange = (option, event) => {
-  if (props.type === 'radio') {
-    emit('update:modelValue', option.uid);
-  } else {
+  const isChecked = (option) => {
+    if (props.type === 'radio') {
+      return props.modelValue === option.uid;
+    }
     if (Array.isArray(props.modelValue)) {
-      const newValue = [...props.modelValue];
-      const index = newValue.indexOf(option.uid);
-      if (index > -1) {
-        newValue.splice(index, 1);
+      return props.modelValue.includes(option.uid);
+    }
+    if (props.type === 'checkbox') {
+      return option.checked || false;
+    }
+    return false;
+  };
+
+  const handleChange = (option, event) => {
+    if (props.type === 'radio') {
+      emit('update:modelValue', option.uid);
+    } else {
+      if (Array.isArray(props.modelValue)) {
+        const newValue = [...props.modelValue];
+        const index = newValue.indexOf(option.uid);
+        if (index > -1) {
+          newValue.splice(index, 1);
+        } else {
+          newValue.push(option.uid);
+        }
+        emit('update:modelValue', newValue);
       } else {
-        newValue.push(option.uid);
+        option.checked = event.target.checked;
       }
-      emit('update:modelValue', newValue);
-    } else {
-      option.checked = event.target.checked;
     }
-  }
-};
+  };
 </script>

package/lib/components/index.js

@@ -56,6 +56,7 @@ export { default as UluFormActions } from './forms/UluFormActions.vue';
 export { default as UluFormCheckbox } from './forms/UluFormCheckbox.vue';
 export { default as UluFormFieldset } from './forms/UluFormFieldset.vue';
 export { default as UluFormItem } from './forms/UluFormItem.vue';
+export { default as UluFormLabel } from './forms/UluFormLabel.vue';
 export { default as UluFormItemsInline } from './forms/UluFormItemsInline.vue';
 export { default as UluFormRadio } from './forms/UluFormRadio.vue';
 export { default as UluFormRequiredChar } from './forms/UluFormRequiredChar.vue';

package/lib/components/systems/facets/UluFacetsFilterSelects.vue

@@ -59,9 +59,6 @@ const props = defineProps({
   },
 });
 
-console.log(props);
-
-
 const emit = defineEmits(['facet-change']);
 
 function onFilterChange(group, event) {
@@ -84,15 +81,15 @@ function onFilterChange(group, event) {
 </script>
 
 <style lang="scss">
-.facets-dropdown-filters {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.facets-dropdown-filters__group {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
+  .facets-dropdown-filters {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .facets-dropdown-filters__group {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
 </style>

package/lib/components/utils/UluAction.vue

@@ -48,7 +48,11 @@
      * Allows passing 'click' as a prop to signify this is an action (used in UluMenu data objects).
      * Note: The actual @click listener should be attached via fallthrough attrs, this is just for logic routing.
      */
-    click: Function
+    click: Function,
+    /**
+     * Button type (e.g. 'submit', 'reset', 'button'). Defaults to 'button' to prevent accidental form submissions.
+     */
+    type: String
   });
 
   const resolvedElement = computed(() => {
@@ -73,7 +77,7 @@
       }
     } else if (!props.element || props.element === "button") {
       // It's a button, ensure it doesn't accidentally submit forms unless requested
-      attrs.type = "button";
+      attrs.type = props.type || "button";
     }
     
     return attrs;

package/lib/plugins/core/index.js

@@ -27,7 +27,8 @@ const defaults = {
     file: "fas fa-file",
     previous: "fas fa-chevron-left",
     next: "fas fa-chevron-right",
-    dropdownExpand: "fas fa-caret-down"
+    dropdownExpand: "fas fa-caret-down",
+    search: "fas fa-search"
   }
 };
 

package/lib/utils/props.js

@@ -5,4 +5,18 @@
  */
 export function isArrayOfObjects(array) {
   return array.every(item => typeof item === "object");
+}
+
+/**
+ * Checks for deprecated props and calls a callback for each match
+ * @param {object} props - The current props object
+ * @param {string[]} deprecatedNames - Array of prop names to check
+ * @param {function} callback - Function called for each match, receiving the prop name
+ */
+export function checkDeprecatedProps(props, deprecatedNames, callback) {
+  deprecatedNames.forEach(name => {
+    if (props[name] !== undefined) {
+      callback(name);
+    }
+  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.5.16",
+  "version": "0.6.0",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [
@@ -65,7 +65,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@headlessui/vue": "^1.7.23",
     "@portabletext/vue": "^1.0.14",
-    "@ulu/frontend": "^0.5.0",
+    "@ulu/frontend": "^0.6.8",
     "@ulu/utils": "^0.0.34",
     "@unhead/vue": "^2.0.11",
     "fuse.js": "^6.6.2",
@@ -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.4.11",
+    "@ulu/frontend": "^0.6.8",
     "@ulu/utils": "^0.0.34",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",