@ulu/frontend-vue 0.5.15 → 0.6.0

package/lib/components/forms/UluForm.vue

@@ -14,29 +14,29 @@
 </template>
 
 <script setup>
-defineProps({
-  /**
-   * The HTML element to use for the form.
-   */
-  element: {
-    type: String,
-    default: 'form'
-  },
-  /**
-   * If true, applies the full-width styles to text inputs.
-   */
-  fullWidth: Boolean,
-  /**
-   * If true, applies the full-width styles to select inputs.
-   */
-  fullWidthSelect: Boolean,
-  /**
-   * If true, hides all labels in the form.
-   */
-  hideLabels: Boolean,
-  /**
-   * If true, right-aligns the form actions.
-   */
-  actionsRight: Boolean
-});
+  defineProps({
+    /**
+     * The HTML element to use for the form.
+     */
+    element: {
+      type: String,
+      default: 'form'
+    },
+    /**
+     * If true, applies the full-width styles to text inputs.
+     */
+    fullWidth: Boolean,
+    /**
+     * If true, applies the full-width styles to select inputs.
+     */
+    fullWidthSelect: Boolean,
+    /**
+     * If true, hides all labels in the form.
+     */
+    hideLabels: Boolean,
+    /**
+     * If true, right-aligns the form actions.
+     */
+    actionsRight: Boolean
+  });
 </script>

package/lib/components/forms/UluFormCheckbox.vue

@@ -1,38 +1,24 @@
 <template>
   <input
     type="checkbox"
-    :id="id"
+    v-bind="fieldAttrs"
     :checked="modelValue"
     @change="$emit('update:modelValue', $event.target.checked)"
-    :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 checkbox.
-   */
-  label: String,
-  /**
-   * The value of the checkbox (for v-model).
-   */
-  modelValue: Boolean,
-  /**
-   * If true, the field will be required.
-   */
-  required: Boolean
-});
+  const props = defineProps({
+    /**
+     * The value of the checkbox (for v-model).
+     */
+    modelValue: 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/UluFormFieldset.vue

@@ -6,10 +6,10 @@
 </template>
 
 <script setup>
-defineProps({
-  /**
-   * The legend for the fieldset.
-   */
-  legend: String
-});
+  defineProps({
+    /**
+     * The legend for the fieldset.
+     */
+    legend: String
+  });
 </script>

package/lib/components/forms/UluFormFile.vue

@@ -1,59 +1,29 @@
 <template>
-  <label 
-    :class="{ 'hidden-visually' : labelHidden }" 
-    :for="id"
-  >
-    <slot name="label">
-      {{ label }}<UluFormRequiredChar v-if="required" />
-    </slot>
-  </label>
   <input 
     type="file" 
-    @change="onChangeFile" 
+    v-bind="fieldAttrs"
     :multiple="multiple"
-    :id="id"
-    v-bind="inputAttrs"
-    :required="required"
+    @change="onChangeFile" 
   />
 </template>
 
 <script setup>
-  import { newId } from "../../utils/dom.js";
-  import UluFormRequiredChar from "./UluFormRequiredChar.vue";
+  import { inject, computed } from "vue";
 
-  defineProps({
-    /**
-     * The label for the file input.
-     */
-    label: {
-      type: String,
-      default: "Select File"
-    },
-    /**
-     * If true, the label will be visually hidden.
-     */
-    labelHidden: Boolean,
-    /**
-     * If true, default classes will not be applied.
-     */
-    noClasses: Boolean,
+  const props = defineProps({
     /**
      * If true, allows multiple file selection.
      */
-    multiple: Boolean,
-    /**
-     * Additional attributes to bind to the input element.
-     */
-    inputAttrs: Object,
-    /**
-     * If true, the field will be required.
-     */
-    required: Boolean
+    multiple: Boolean
   });
 
   const emit = defineEmits(["file-change"]);
 
-  const id = newId();
+  const injectedAttrs = inject("uluFormFieldAttrs", null);
+  const fieldAttrs = computed(() => {
+    const attrs = injectedAttrs ? { ...injectedAttrs.value } : {};
+    return attrs;
+  });
 
   const onChangeFile = (event) => {
     emit("file-change", event.target.files);

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>