@ulu/frontend-vue 0.1.2-beta.8 → 0.1.3-beta.1

package/lib/components/forms/UluFormSelect.vue

@@ -1,28 +1,25 @@
 <template>
-  <div class="site-form__item site-form__item--select">
-    <label :class="{ 'hidden-visually' : labelHidden }" :for="id">
-      <slot>
-        {{ label }}
-      </slot>
-    </label>
-    <select 
-      :id="id" 
-      :value="modelValue" 
-      @input="$emit('update:modelValue', $event.target.value)" 
-    >
-      <option disabled value="">Please select one</option>
-      <option v-for="(option, index) in options" :key="index" :value="option.value">
-        {{ option.text }}
-      </option>
-    </select>
-  </div>
+  <label :class="{ 'hidden-visually' : labelHidden }" :for="id">
+    <slot name="label">
+      {{ label }}<UluFormRequiredChar v-if="required" />
+    </slot>
+  </label>
+  <select 
+    :id="id" 
+    :value="modelValue" 
+    @input="$emit('update:modelValue', $event.target.value)"
+    :required="required"
+  >
+    <option disabled value="">Please select one</option>
+    <option v-for="(option, index) in options" :key="index" :value="option.value">
+      {{ option.text }}
+    </option>
+  </select>
 </template>
 
 <script setup>
-  const getNextId = (() => {
-    let count = 0;
-    return () => `select-id-${++count}`;
-  })();
+  import { newId } from "../../utils/dom.js";
+  import UluFormRequiredChar from "./UluFormRequiredChar.vue";
 
   defineProps({
     /**
@@ -40,10 +37,14 @@
     /**
      * If true, the label will be visually hidden.
      */
-    labelHidden: Boolean
+    labelHidden: Boolean,
+    /**
+     * If true, the field will be required.
+     */
+    required: Boolean
   });
 
   defineEmits(['update:modelValue']);
 
-  const id = getNextId();
+  const id = newId();
 </script>

package/lib/components/forms/UluFormText.vue

@@ -1,24 +1,21 @@
 <template>
-  <div class="site-form__item site-form__item--text">
-    <label :class="{ 'hidden-visually' : labelHidden }" :for="id">
-      <slot>
-        {{ label }}
-      </slot>
-    </label>
-    <input 
-      type="text" 
-      :value="modelValue"
-      @input="$emit('update:modelValue', $event.target.value)" 
-      :id="id"
-    >
-  </div>
+  <label :class="{ 'hidden-visually' : labelHidden }" :for="id">
+    <slot name="label">
+      {{ label }}<UluFormRequiredChar v-if="required" />
+    </slot>
+  </label>
+  <input 
+    type="text" 
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)" 
+    :id="id"
+    :required="required"
+  >
 </template>
 
 <script setup>
-  const getNextId = (() => {
-    let count = 0;
-    return () => `text-input-id-${++count}`;
-  })();
+  import { newId } from "../../utils/dom.js";
+  import UluFormRequiredChar from "./UluFormRequiredChar.vue";
 
   defineProps({
     /**
@@ -32,10 +29,14 @@
     /**
      * If true, the label will be visually hidden.
      */
-    labelHidden: Boolean
+    labelHidden: Boolean,
+    /**
+     * If true, the field will be required.
+     */
+    required: Boolean
   });
 
   defineEmits(['update:modelValue']);
 
-  const id = getNextId();
+  const id = newId();
 </script>

package/lib/components/forms/UluFormTextarea.vue

@@ -0,0 +1,41 @@
+<template>
+  <label :class="{ 'hidden-visually' : labelHidden }" :for="id">
+    <slot name="label">
+      {{ label }}<UluFormRequiredChar v-if="required" />
+    </slot>
+  </label>
+  <textarea
+    :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";
+
+  defineProps({
+    /**
+     * The label for the textarea.
+     */
+    label: String,
+    /**
+     * 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
+  });
+
+  defineEmits(['update:modelValue']);
+
+  const id = newId();
+</script>

package/lib/components/navigation/UluPager.vue

@@ -55,8 +55,7 @@
 
 <script setup>
 import UluIcon from '../elements/UluIcon.vue';
-
-let pagerCounter = 0;
+import { newId } from '../../utils/dom.js';
 
 const props = defineProps({
   /**
@@ -89,7 +88,7 @@ const props = defineProps({
   }
 });
 
-const headingId = `ulu-pager-${ pagerCounter++ }`;
+const headingId = newId('ulu-pager');
 
 /**
  * Generates the title for a page link.

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

@@ -15,6 +15,7 @@
 
 <script setup>
   import { computed } from 'vue';
+  import { newId } from '../../../utils/dom.js';
 
   const props = defineProps({
     classes: {
@@ -30,8 +31,7 @@
 
   const emit = defineEmits(['update:modelValue']);
 
-  let uid = 0;
-  const id = `facet-view-keyword-${++uid}`;
+  const id = newId('facet-view-keyword');
 
   const localValue = computed({
     get() {

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

@@ -20,9 +20,7 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue';
-
-  let idCounter = 0;
+  import { newId } from '../../../utils/dom.js';
 
   defineProps({
     classes: {
@@ -41,5 +39,5 @@
 
   const emit = defineEmits(['update:modelValue']);
 
-  const sortId = ref(`ulu-facet-sort-${++idCounter}`);
+  const sortId = newId('ulu-facet-sort');
 </script>

package/lib/components/systems/facets/useFacets.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick } from 'vue';
+import { ref, computed, watch, nextTick, watchPostEffect } from 'vue';
 import Fuse from 'fuse.js';
 
 /**
@@ -455,12 +455,12 @@ export function useFacets(allItems, options = {}) {
     };
 
     // Initial sync from URL
-    const stopInitWatcher = watch(facets, (newFacets) => {
-      if (newFacets && newFacets.length > 0) {
+    const stopInitWatcher = watchPostEffect(() => {
+      if (facets.value && facets.value.length > 0) {
         updateStateFromUrl();
         stopInitWatcher();
       }
-    }, { deep: true, immediate: true });
+    });
 
     // Sync state changes TO the URL
     watch([selectedSort, searchValue, selectedFacets], updateUrlFromState, { deep: true });

package/package.json

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