@ulu/frontend-vue 0.1.2-beta.9 → 0.1.3-beta.10

package/lib/components/forms/UluFormCheckbox.vue

@@ -0,0 +1,38 @@
+<template>
+  <input
+    type="checkbox"
+    :id="id"
+    :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";
+
+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
+});
+
+defineEmits(['update:modelValue']);
+
+const id = newId();
+</script>

package/lib/components/forms/UluFormFieldset.vue

@@ -0,0 +1,15 @@
+<template>
+  <fieldset class="form-theme__fieldset">
+    <legend v-if="legend">{{ legend }}</legend>
+    <slot />
+  </fieldset>
+</template>
+
+<script setup>
+defineProps({
+  /**
+   * The legend for the fieldset.
+   */
+  legend: String
+});
+</script>

package/lib/components/forms/UluFormFile.vue

@@ -1,28 +1,25 @@
 <template>
-  <div class="site-form__item site-form__item--file">
-    <label 
-      :class="{ 'hidden-visually' : labelHidden }" 
-      :for="id"
-    >
-      <slot name="label">
-        {{ label }}
-      </slot>
-    </label>
-    <input 
-      type="file" 
-      @change="onChangeFile" 
-      :multiple="multiple"
-      :id="id"
-      v-bind="inputAttrs"
-    />
-  </div>
+  <label 
+    :class="{ 'hidden-visually' : labelHidden }" 
+    :for="id"
+  >
+    <slot name="label">
+      {{ label }}<UluFormRequiredChar v-if="required" />
+    </slot>
+  </label>
+  <input 
+    type="file" 
+    @change="onChangeFile" 
+    :multiple="multiple"
+    :id="id"
+    v-bind="inputAttrs"
+    :required="required"
+  />
 </template>
 
 <script setup>
-  const getNextId = (() => {
-    let count = 0;
-    return () => `file-input-id-${++count}`;
-  })();
+  import { newId } from "../../utils/dom.js";
+  import UluFormRequiredChar from "./UluFormRequiredChar.vue";
 
   defineProps({
     /**
@@ -47,12 +44,16 @@
     /**
      * Additional attributes to bind to the input element.
      */
-    inputAttrs: Object
+    inputAttrs: Object,
+    /**
+     * If true, the field will be required.
+     */
+    required: Boolean
   });
 
   const emit = defineEmits(["file-change"]);
 
-  const id = getNextId();
+  const id = newId();
 
   const onChangeFile = (event) => {
     emit("file-change", event.target.files);

package/lib/components/forms/UluFormItem.vue

@@ -0,0 +1,49 @@
+<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
+    }]"
+  >
+    <slot />
+  </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
+});
+</script>

package/lib/components/forms/UluFormItemsInline.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="form-theme__items-inline">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// This component doesn't need any script.
+</script>

package/lib/components/forms/UluFormMessage.vue

@@ -1,7 +1,7 @@
 <template>
-  <p class="site-form__description" :class="{
-    'site-form__error' : error,
-    'site-form__warning' : warning
+  <p class="form-theme__description" :class="{
+    'form-theme__error' : error,
+    'form-theme__warning' : warning
   }">
     <UluIcon v-if="error || warning" :icon="`type:${ error ? 'error' : 'warning' }`" />
     <slot/>

package/lib/components/forms/UluFormRadio.vue

@@ -0,0 +1,48 @@
+<template>
+  <input
+    type="radio"
+    :id="id"
+    :name="name"
+    :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";
+
+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
+});
+
+defineEmits(['update:modelValue']);
+
+const id = newId();
+</script>

package/lib/components/forms/UluFormRequiredChar.vue

@@ -0,0 +1,7 @@
+<template>
+  <span class="form-theme__required-char">*</span>
+</template>
+
+<script setup>
+// This component doesn't need any script.
+</script>

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/index.js

@@ -4,6 +4,7 @@
  * - Used in main plugin and bundle exports
  */
 export { default as UluAccordion } from './collapsible/UluAccordion.vue';
+export { default as UluAccordionGroup } from './collapsible/UluAccordionGroup.vue';
 export { default as UluCollapsible } from './collapsible/UluCollapsible.vue';
 export { default as UluDropdown } from './collapsible/UluDropdown.vue';
 export { default as UluModal } from './collapsible/UluModal.vue';
@@ -25,6 +26,7 @@ export { default as UluExternalLink } from './elements/UluExternalLink.vue';
 export { default as UluIcon } from './elements/UluIcon.vue';
 export { default as UluList } from './elements/UluList.vue';
 export { default as UluMain } from './elements/UluMain.vue';
+export { default as UluRule } from './elements/UluRule.vue';
 export { default as UluSpokeSpinner } from './elements/UluSpokeSpinner.vue';
 export { default as UluTag } from './elements/UluTag.vue';
 export { default as UluSelectableMenu } from './forms/UluSelectableMenu.vue';
@@ -34,9 +36,19 @@ export { default as UluFormMessage } from './forms/UluFormMessage.vue';
 export { default as UluFormSelect } from './forms/UluFormSelect.vue';
 export { default as UluFormText } from './forms/UluFormText.vue';
 export { default as UluSearchForm } from './forms/UluSearchForm.vue';
+export { default as UluForm } from './forms/UluForm.vue';
+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 UluFormItemsInline } from './forms/UluFormItemsInline.vue';
+export { default as UluFormRadio } from './forms/UluFormRadio.vue';
+export { default as UluFormRequiredChar } from './forms/UluFormRequiredChar.vue';
+export { default as UluFormTextarea } from './forms/UluFormTextarea.vue';
 export { default as UluAdaptiveLayout } from './layout/UluAdaptiveLayout.vue';
 export { default as UluDataGrid } from './layout/UluDataGrid.vue';
 export { default as UluTitleRail } from './layout/UluTitleRail.vue';
+export { default as UluWhenBreakpoint } from './layout/UluWhenBreakpoint.vue';
 export { default as UluBreadcrumb } from './navigation/UluBreadcrumb.vue';
 export { default as UluMenu } from './navigation/UluMenu.vue';
 export { default as UluMenuStack } from './navigation/UluMenuStack.vue';

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/UluFacetsFilterSelects.vue

@@ -1,26 +1,40 @@
 <template>
-  <div class="facets-dropdown-filters">
+  <div class="facets-dropdown-filters" :class="classes.container">
     <div
       class="facets-dropdown-filters__group"
+      :class="classes.group"
       v-for="group in facets"
       :key="group.uid"
     >
-      <label :for="`facet-dropdown-${group.uid}`" class="facets-dropdown-filters__label">
-        {{ group.name }}
+      <label 
+        :for="`facet-dropdown-${ group.uid }`" 
+        class="facets-dropdown-filters__label"
+        :class="classes.label"
+      >
+        <slot name="label">
+          {{ group.name }}
+        </slot>
       </label>
       <select
         :id="`facet-dropdown-${group.uid}`"
         class="facets-dropdown-filters__select"
+        :class="classes.select"
         @change="onFilterChange(group, $event)"
       >
-        <option value="">All {{ group.name }}s</option>
+        <option value="">
+          <slot name="optionAll" :group="group">
+            All {{ group.name }}s
+          </slot>
+        </option>
         <option
-          v-for="option in group.children"
+          v-for="(option, index) in group.children"
           :key="option.uid"
           :value="option.uid"
           :selected="option.selected"
         >
-          {{ option.label }}
+          <slot name="option" :group="group" :option="option" :index="index">
+            {{ option.label }}
+          </slot>
         </option>
       </select>
     </div>
@@ -29,12 +43,25 @@
 
 <script setup>
 const props = defineProps({
+  /**
+   * Facets Array
+   */
   facets: {
     type: Array,
     default: () => []
-  }
+  },
+  /**
+   * Optional classes bindings for all elements { container, group, label, select }
+   */
+  classes: {
+    type: Object,
+    default: () => ({})
+  },
 });
 
+console.log(props);
+
+
 const emit = defineEmits(['facet-change']);
 
 function onFilterChange(group, event) {

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

@@ -1,11 +1,11 @@
 <template>
-  <div class="facets-search">
-    <label :class="classes.searchLabel" :for="id">
+  <div class="facets-search" :class="classes.container">
+    <label :class="classes.label" :for="id">
       <strong>Search</strong>
     </label>
     <input 
       :id="id" 
-      :class="classes.searchInput" 
+      :class="classes.input" 
       v-model="localValue"
       type="text" 
       :placeholder="placeholder"
@@ -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

@@ -1,8 +1,8 @@
 <template>
-  <div class="facets-sort" :class="classes.sortForm">
+  <div class="facets-sort" :class="classes.container">
     <label 
       :for="sortId" 
-      :class="classes.sortFormLabel"
+      :class="classes.label"
     >
       <slot>Sort:</slot>
     </label>
@@ -10,7 +10,7 @@
       :value="modelValue"
       @change="emit('update:modelValue', $event.target.value)"
       :id="sortId" 
-      :class="classes.sortFormSelect"
+      :class="classes.select"
     >
       <option v-for="(item, key) in sortTypes" :value="key" :key="key">
         {{ item.text }}
@@ -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/scroll-anchors/UluScrollAnchorsNavAnimated.vue

@@ -105,6 +105,9 @@ Changes:
   // User can override these styles
   // - Think this is better than props/etc 
   //   - Refactored from props to just plain css to be overridden
+  .scroll-anchors__nav {
+    position: relative;
+  }
   .scroll-anchors__rail {
     border-left: 3px solid rgb(220, 220, 220);
     padding-left: 1rem;

package/lib/plugins/popovers/defaults.js

@@ -9,16 +9,7 @@ export default {
      * @type {String}
      */
     directiveName: "ulu-tooltip",
-    /**
-     * The element that the tooltip should be rendered within
-     * - Default bottom of the body (on top of everything)
-     * - Doesn't need to be inline for accessibility since tooltips are just an enhancement
-     *   content displayed within them should be hidden for assistive devices, 
-     *   they are not visible to assistive devices
-     * @type {String}
-     */    
-    tooltipTeleportTo: "body",
-  },
+    },
   /**
    * Default Popover Options
    */
@@ -59,6 +50,15 @@ export default {
    * @type {Object}
    */
   tooltip: {
+    /**
+     * The element that the tooltip should be rendered within
+     * - Default bottom of the body if this is unset
+     * - Doesn't need to be inline for accessibility since tooltips are just an enhancement
+     *   content displayed within them should be hidden for assistive devices, 
+     *   they are not visible to assistive devices
+     * @type {String}
+     */    
+    teleportTo: null,
     /**
      * Optional class binding for tooltip element
      * @type {String|Object|Array}