@ulu/frontend-vue 0.5.16 → 0.6.1

package/lib/components/forms/UluFormItem.vue

@@ -1,49 +1,160 @@
 <template>
   <div 
     class="form-theme__item"
-    :class="[{
-      'is-danger': error,
-      'is-warning': warning,
-      'form-theme__item--align-top': alignTop,
-      'form-theme__item--text': text,
-      'form-theme__item--file': file,
-      'form-theme__item--select': select,
-      'form-theme__item--textarea': textarea
-    }]"
+    :class="[
+      resolvedModifiers,
+      {
+        'is-danger': hasError,
+        'is-warning': hasWarning
+      }
+    ]"
   >
+    <UluFormLabel 
+      v-if="!isLabelAfter && hasLabel" 
+      :id="internalId" 
+      :labelHidden="labelHidden" 
+      :required="required"
+    >
+      <slot name="label">{{ label }}</slot>
+    </UluFormLabel>
+
     <slot />
+
+    <UluFormLabel 
+      v-if="isLabelAfter && hasLabel" 
+      :id="internalId" 
+      :labelHidden="labelHidden" 
+      :required="required"
+    >
+      <slot name="label">{{ label }}</slot>
+    </UluFormLabel>
+
+    <UluFormMessage 
+      v-if="description || $slots.description" 
+      :id="descriptionId"
+    >
+      <slot name="description">{{ description }}</slot>
+    </UluFormMessage>
+
+    <UluFormMessage 
+      v-if="errorMessage || $slots.errorMessage" 
+      :id="errorId" 
+      error
+    >
+      <slot name="errorMessage">{{ errorMessage }}</slot>
+    </UluFormMessage>
+
+    <UluFormMessage 
+      v-if="warningMessage || $slots.warningMessage" 
+      :id="warningId" 
+      warning
+    >
+      <slot name="warningMessage">{{ warningMessage }}</slot>
+    </UluFormMessage>
   </div>
 </template>
 
 <script setup>
-defineProps({
-  /**
-   * If true, applies the error state styles.
-   */
-  error: Boolean,
-  /**
-   * If true, applies the warning state styles.
-   */
-  warning: Boolean,
-  /**
-   * If true, aligns the item to the top.
-   */
-  alignTop: Boolean,
-  /**
-   * If true, applies the text item styles.
-   */
-  text: Boolean,
-  /**
-   * If true, applies the file item styles.
-   */
-  file: Boolean,
-  /**
-   * If true, applies the select item styles.
-   */
-  select: Boolean,
-  /**
-   * If true, applies the textarea item styles.
-   */
-  textarea: Boolean
-});
+  import { provide, computed, useSlots } from "vue";
+  import { newId } from "../../utils/dom.js";
+  import { useModifiers } from "../../composables/useModifiers.js";
+  import UluFormMessage from "./UluFormMessage.vue";
+  import UluFormLabel from "./UluFormLabel.vue";
+
+  const props = defineProps({
+    /**
+     * The layout variant for this form item (e.g., 'text', 'select', 'textarea', 'checkbox', 'radio', 'file').
+     * This determines the layout and BEM styling of the item container.
+     */
+    layout: String,
+    /**
+     * The ID to use for the form field. If not provided, a unique ID is generated.
+     */
+    fieldId: String,
+    /**
+     * The label for the form field.
+     */
+    label: String,
+    /**
+     * If true, the label will be visually hidden.
+     */
+    labelHidden: Boolean,
+    /**
+     * The description text for the form field.
+     */
+    description: String,
+    /**
+     * The error message text.
+     */
+    errorMessage: String,
+    /**
+     * The warning message text.
+     */
+    warningMessage: String,
+    /**
+     * If true, the field will be marked as required.
+     */
+    required: Boolean,
+    /**
+     * If true, applies the error state styles.
+     */
+    error: Boolean,
+    /**
+     * If true, applies the warning state styles.
+     */
+    warning: Boolean,
+    /**
+     * If true, aligns the item to the top.
+     */
+    alignTop: Boolean,
+    /**
+     * Additional BEM modifiers for the form item.
+     */
+    modifiers: [String, Array]
+  });
+
+  const slots = useSlots();
+
+  const { resolvedModifiers } = useModifiers({
+    props,
+    baseClass: "form-theme__item",
+    internal: computed(() => ({
+      [props.layout]: props.layout,
+      "align-top": props.alignTop
+    }))
+  });
+
+  const internalId = computed(() => props.fieldId || newId());
+  const descriptionId = computed(() => `${ internalId.value }-desc`);
+  const errorId = computed(() => `${ internalId.value }-error`);
+  const warningId = computed(() => `${ internalId.value }-warn`);
+
+  const hasLabel = computed(() => !!props.label || !!slots.label);
+  const hasError = computed(() => props.error || !!props.errorMessage || !!slots.errorMessage);
+  const hasWarning = computed(() => props.warning || !!props.warningMessage || !!slots.warningMessage);
+
+  const isLabelAfter = computed(() => ["checkbox", "radio"].includes(props.layout));
+
+  const fieldAttrs = computed(() => {
+    const attrs = {
+      id: internalId.value
+    };
+
+    const describedBy = [];
+    if (props.description || slots.description) describedBy.push(descriptionId.value);
+    if (props.errorMessage || slots.errorMessage) describedBy.push(errorId.value);
+    if (props.warningMessage || slots.warningMessage) describedBy.push(warningId.value);
+
+    if (describedBy.length > 0) {
+      attrs["aria-describedby"] = describedBy.join(" ");
+    }
+
+    if (hasError.value) {
+      attrs["aria-invalid"] = "true";
+    }
+
+    return attrs;
+  });
+
+  provide("uluFormFieldAttrs", fieldAttrs);
 </script>

package/lib/components/forms/UluFormLabel.vue

@@ -0,0 +1,30 @@
+<template>
+  <label 
+    :for="id" 
+    :class="{ 'hidden-visually': labelHidden }"
+  >
+    <slot></slot><UluFormRequiredChar v-if="required" />
+  </label>
+</template>
+
+<script setup>
+  import UluFormRequiredChar from "./UluFormRequiredChar.vue";
+
+  defineProps({
+    /**
+     * The ID of the input this label is associated with.
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * If true, the label will be visually hidden.
+     */
+    labelHidden: Boolean,
+    /**
+     * If true, appends the required character.
+     */
+    required: Boolean
+  });
+</script>

package/lib/components/forms/UluFormRadio.vue

@@ -1,48 +1,29 @@
 <template>
   <input
     type="radio"
-    :id="id"
-    :name="name"
+    v-bind="fieldAttrs"
     :value="value"
     :checked="modelValue === value"
     @change="$emit('update:modelValue', value)"
-    :required="required"
   >
-  <label :for="id">
-    <slot>
-      {{ label }}<UluFormRequiredChar v-if="required" />
-    </slot>
-  </label>
 </template>
 
 <script setup>
-import { newId } from "../../utils/dom.js";
-import UluFormRequiredChar from "./UluFormRequiredChar.vue";
+  import { inject, computed } from "vue";
 
-defineProps({
-  /**
-   * The label for the radio button.
-   */
-  label: String,
-  /**
-   * The value of the selected radio button in the group (for v-model).
-   */
-  modelValue: [String, Number],
-  /**
-   * The value of this radio button.
-   */
-  value: [String, Number],
-  /**
-   * The name of the radio button group.
-   */
-  name: String,
-  /**
-   * If true, the field will be required.
-   */
-  required: Boolean
-});
+  const props = defineProps({
+    /**
+     * The value of the selected radio button in the group (for v-model).
+     */
+    modelValue: [String, Number, Boolean],
+    /**
+     * The value of this radio button.
+     */
+    value: [String, Number, Boolean]
+  });
 
-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/UluFormSelect.vue

@@ -1,16 +1,16 @@
 <template>
-  <label :class="{ 'hidden-visually' : labelHidden }" :for="id">
-    <slot name="label">
-      {{ label }}<UluFormRequiredChar v-if="required" />
-    </slot>
-  </label>
   <select 
-    :id="id" 
+    v-bind="fieldAttrs" 
     :value="modelValue" 
     @input="$emit('update:modelValue', $event.target.value)"
-    :required="required"
   >
-    <option disabled value="">Please select one</option>
+    <option 
+      v-if="placeholder !== false" 
+      disabled 
+      value=""
+    >
+      {{ placeholder || "Please select one" }}
+    </option>
     <option v-for="(option, index) in options" :key="index" :value="option.value">
       {{ option.text }}
     </option>
@@ -18,33 +18,28 @@
 </template>
 
 <script setup>
-  import { newId } from "../../utils/dom.js";
-  import UluFormRequiredChar from "./UluFormRequiredChar.vue";
+  import { inject, computed } from "vue";
 
-  defineProps({
-    /**
-     * The label for the select input.
-     */
-    label: String,
+  const props = defineProps({
     /**
      * The value of the select input (for v-model).
      */
-    modelValue: String,
+    modelValue: [String, Number, Array],
     /**
      * An array of options for the select input. Each option should be an object with `value` and `text` properties.
      */
     options: Array,
     /**
-     * If true, the label will be visually hidden.
-     */
-    labelHidden: Boolean,
-    /**
-     * If true, the field will be required.
+     * The text for the default disabled option. Pass false to hide it.
      */
-    required: Boolean
+    placeholder: {
+      type: [String, Boolean],
+      default: "Please select one"
+    }
   });
 
-  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/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>