@ulu/frontend-vue 0.1.0-beta.1

package/lib/components/elements/UluList.vue

@@ -0,0 +1,87 @@
+<template>
+  <component 
+    :is="listElement"
+    :class="[
+      {
+        'list-ordered' : ordered,
+        'list-unordered' : unordered,
+        'list-lines' : lines,
+        'list-compact' : compact,
+      }, 
+      classes.list
+    ]"
+    :style="{ 
+      listStyleType: listStyleType
+    }"
+    :reversed="reversed"
+    :start="start"
+  >
+    <li 
+      v-for="(item, index) in items" 
+      :key="index"
+      :class="classes.listItem"
+    >
+      <slot :item="item" :index="index">
+        {{ item }}
+      </slot>
+    </li>
+  </component>
+</template>
+
+<script>
+  export default {
+    name: "UluList",
+    props: {
+      /**
+       * Array of list items, output as is or use slot to template the item
+       */
+      items: Array,
+      /**
+       * Classes object (keys are list and listItem to be applied to <ul> and <li>)
+       * - Any valid class binding for each
+       */
+      classes: {
+        type: Object,
+        default: () => ({})
+      },
+      /**
+       * Use list-ordered class, and sets element to <ol>
+       */
+      ordered: Boolean,
+      /**
+       * Use list-unordered class
+       */
+      unordered: Boolean,
+      /**
+       * Use list-lines class
+       */
+      lines: Boolean,
+      /**
+       * Use list-compact class
+       */
+      compact: Boolean,
+      /**
+       * If setting up custom ordered list this will ensure the correct element type
+       * - Note: 'ordered' prop sets the ordered list class, this does not
+       */
+      forceOrdered: Boolean,
+      /**
+       * Define the start value for <ol>
+       */
+      start: String,
+      /**
+       * Reverse ordered list
+       */
+      reversed: Boolean,
+      /**
+       * Define list style type (ie. disc, decimal, etc)
+       */
+      listStyleType: String,
+    },
+    computed: {
+      listElement() {
+        return this.ordered || this.forceOrdered ? "ol" : "ul";
+      }
+    }
+  };
+</script>

package/lib/components/elements/UluMain.vue

@@ -0,0 +1,5 @@
+<template>
+  <main id="main-content">
+    <slot/>
+  </main>
+</template>

package/lib/components/elements/UluSpokeSpinner.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="spoke-spinner" :class="modifierClass">
+    <div class="spoke-spinner__spinner">
+      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "UluSpokeSpinner",
+    props: {
+      /**
+       * Type modifier for spinner (ie match scss style name)
+       */
+      type: String
+    },
+    computed: {
+      modifierClass() {
+        const { type } = this;
+        return type ? `spoke-spinner--${ type }` : null;
+      }
+    }
+  };
+</script>

package/lib/components/elements/UluTag.vue

@@ -0,0 +1,53 @@
+<template>
+  <span 
+    class="tag"
+    :class="[
+      {
+        'tag--small' : small,
+        'type-small' : small,
+        [`tag--${ type }`] : type
+      }, 
+      resolvedModifiers
+    ]"
+  >
+    <UluIcon v-if="icon" :definition="icon" />
+    <slot>
+      {{ text }}
+    </slot>
+  </span>
+</template>
+
+<script>
+  import UluIcon from "./UluIcon.vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
+  export default {
+    name: "UluTag",
+    components: {
+      UluIcon
+    },
+    props: {
+      type: [String],
+      /**
+       * Preset to set small modifier and small type size
+       */
+      small: Boolean,
+      /**
+       * Text for tag, or use slot
+       */
+      text: [String, Number],
+      /**
+       * Icon prop, if used will set the icon for the button, will use UluIcon (which uses font-awesome icons conditionally)
+       * - If using custom icons use slot instead
+       */
+      icon: [String, Array],
+      /**
+       * Modifiers for tag class
+       */
+      modifiers: [String, Array]
+    },
+    setup(props) {
+      const { resolvedModifiers } = useModifiers({ props, baseClass: "tag" });
+      return { resolvedModifiers };
+    }
+  };
+</script>

package/lib/components/forms/UluCheckboxMenu.vue

@@ -0,0 +1,36 @@
+<template>
+  <ul class="site-menu site-form">
+    <li
+    class="site-menu__item"
+      v-for="(option, index) in options"
+      :key="index"
+    >
+      <div class="site-menu__checkbox">
+        <input 
+          type="checkbox" 
+          :id="getId(index)" 
+          v-model="option.checked"
+        >
+        <label :for="getId(index)">
+          <slot>
+            {{ option?.title || option?.text }}
+          </slot>
+        </label>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    name: "UluCheckboxMenu",
+    props: {
+      options: Array
+    },
+    methods: {
+      getId(index) {
+        return `checkbox-menu-opt-${ index }`;
+      }
+    }
+  };
+</script>

package/lib/components/forms/UluFileDisplay.vue

@@ -0,0 +1,39 @@
+<template>
+  <a class="layout-flex-baseline" :href="fileUrl" :download="file.name">
+    <FaIcon class="ui-icon" :icon="['far', $site.getIcon('file')]"/>
+    <span class="margin-left-small-x">
+      {{ file.name }}
+      <span class="tag tag--small tag--outline type-small-x">{{ fileSize }}</span>
+    </span>
+  </a>
+</template>
+
+<script>
+  export default {
+    name: "FileDisplay",
+    props: {
+      file: {
+        required: true,
+        type: Object
+      }
+    },
+    computed: {
+      fileUrl() {
+        return window.URL.createObjectURL(this.file);
+      },
+      fileSize() {
+        const { size } = this.file;
+        const Mbs = size / 1000000;
+        const Kbs = size / 1000;
+        const format = n => parseFloat(n.toFixed(2));
+        // Either display Mbs or Kbs if less than 1 Mb
+        /* eslint-disable */
+        return Mbs > 1 ? 
+          `${ format(Mbs) }Mb` : Kbs > 1 ?
+          `${ format(Kbs) }Kb` : 
+          `${ format(size) }B`;
+        /* eslint-enable */
+      }
+    },
+  };
+</script>

package/lib/components/forms/UluFormDropzone.vue

@@ -0,0 +1,62 @@
+<!-- Based on https://react-dropzone.js.org/#section-basic-example -->
+<template>
+  <div 
+    class="site-dropzone site-form__item site-form__item--file"
+    :class="{ 'is-danger' : fileErrors.length }"
+  >
+    <div 
+      class="site-dropzone__target" 
+      :class="{
+        'site-dropzone__target--dropping' : isDragActive
+      }"
+      v-bind="getRootProps()"
+    >
+      <input v-bind="getInputProps()" />
+      <div class="site-dropzone__instructions">
+        <strong class="type-normal">
+          Drag 'n' drop files here, or click to select
+        </strong>
+      </div>
+    </div>
+    <p class="site-form__description">
+      <em>Only images allowed (.jpg, .png)</em>
+    </p>
+    <div v-if="fileErrors.length" class="site-dropzone__errors site-form__description site-form__error">
+      <ul class="list-unordered">
+        <li v-for="(fileErr, index) in fileErrors" :key="index">
+          <strong>{{ fileErr.file.name }}</strong>:
+          <span>{{ fileErr.errors.map(e => e.message).join() }}</span>
+        </li>
+      </ul>
+    </div>
+    <div class="site-dropzone__display margin-top" v-if="files.length">
+      <strong>Files</strong>
+      <FilesDisplay class="site-dropzone__list" :files="files"/>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from "vue";
+  import { useDropzone } from "vue3-dropzone";
+
+  const files = ref([]);
+  const fileErrors = ref([]);
+
+  const $emit = defineEmits(["filesChange"]);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
+    onDrop: (acceptFiles, rejectReasons) => {
+      if (rejectReasons) {
+        fileErrors.value = rejectReasons.map(err => err);
+      } else {
+        fileErrors.value = [];
+      }
+      if (acceptFiles.length) {
+        files.value = acceptFiles.map(file => file);
+        $emit("filesChange", files.value);
+      }
+    },
+    accept: [".png", ".jpg", ".jpeg"]
+  });
+</script>

package/lib/components/forms/UluFormFile.vue

@@ -0,0 +1,47 @@
+<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>
+</template>
+
+<script>
+  let count = 0;
+  export default {
+    name: "FormFile",
+    props: {
+      label: {
+        type: String,
+        default: "Select File"
+      },
+      labelHidden: Boolean,
+      noClasses: Boolean,
+      multiple: Boolean,
+      inputAttrs: Object
+    },
+    emits: ["filesChange"],
+    data() {
+      return {
+        id: `file-input-id-${ ++count }`
+      };
+    },
+    methods: {
+      onChangeFile(event) {
+        this.$emit("filesChange", event.target.files);
+      }
+    }
+  };
+</script>

package/lib/components/forms/UluFormMessage.vue

@@ -0,0 +1,20 @@
+<template>
+  <p class="site-form__description" :class="{
+    'site-form__error' : error,
+    'site-form__warning' : warning
+  }">
+    <FaIcon v-if="error" :icon="$site.getIcon('error')"/>
+    <FaIcon v-if="warning" :icon="$site.getIcon('warning')"/>
+    <slot/>
+  </p>
+</template>
+
+<script>
+  export default {
+    name: "FormMessage",
+    props: {
+      warning: Boolean,
+      error: Boolean,
+    }
+  };
+</script>

package/lib/components/forms/UluFormSelect.vue

@@ -0,0 +1,37 @@
+<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>
+</template>
+
+<script>
+  let count = 0;
+  export default {
+    name: "FormSelect",
+    props: {
+      label: String,
+      modelValue: String,
+      options: Array,
+      labelHidden: Boolean
+    },
+    data() {
+      return {
+        id: `select-id-${ ++count }`
+      };
+    }
+  };
+</script>

package/lib/components/forms/UluFormText.vue

@@ -0,0 +1,32 @@
+<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>
+</template>
+
+<script>
+  let count = 0;
+  export default {
+    name: "FormText",
+    props: {
+      label: String,
+      modelValue: String,
+      labelHidden: Boolean
+    },
+    data() {
+      return {
+        id: `text-input-id-${ ++count }`
+      };
+    }
+  };
+</script>

package/lib/components/forms/UluSearchForm.vue

@@ -0,0 +1,31 @@
+<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"
+      >
+    </div>
+    <button 
+      class="search-form__submit button button--primary"
+      aria-label="Submit Search"
+    >
+      <FaIcon :icon="$site.getIcon('search')"/>
+    </button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "SearchForm",
+    props: {
+      placeholder: {
+        type: String,
+        default: "Titles, keyword…"
+      }
+    }
+  };
+</script>

package/lib/components/index.js

@@ -0,0 +1,54 @@
+/**
+ * @module components/index.js
+ * Responsible for exporting all components
+ * - Used in main plugin and bundle exports
+ */
+export { default as UluAccordion } from './collapsible/UluAccordion.vue';
+export { default as UluCollapsibleRegion } from './collapsible/UluCollapsibleRegion.vue';
+export { default as UluDropdown } from './collapsible/UluDropdown.vue';
+export { default as UluModal } from './collapsible/UluModal.vue';
+export { default as UluOverflowPopover } from './collapsible/UluOverflowPopover.vue';
+export { default as UluTab } from './collapsible/UluTab.vue';
+export { default as UluTabGroup } from './collapsible/UluTabGroup.vue';
+export { default as UluTabList } from './collapsible/UluTabList.vue';
+export { default as UluTabPanel } from './collapsible/UluTabPanel.vue';
+export { default as UluTabPanels } from './collapsible/UluTabPanels.vue';
+export { default as UluAlert } from './elements/UluAlert.vue';
+export { default as UluBadge } from './elements/UluBadge.vue';
+export { default as UluBadgeStack } from './elements/UluBadgeStack.vue';
+export { default as UluButton } from './elements/UluButton.vue';
+export { default as UluCallout } from './elements/UluCallout.vue';
+export { default as UluCard } from './elements/UluCard.vue';
+export { default as UluDefinitionList } from './elements/UluDefinitionList.vue';
+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 UluSpokeSpinner } from './elements/UluSpokeSpinner.vue';
+export { default as UluTag } from './elements/UluTag.vue';
+export { default as UluCheckboxMenu } from './forms/UluCheckboxMenu.vue';
+export { default as UluFileDisplay } from './forms/UluFileDisplay.vue';
+export { default as UluFormDropzone } from './forms/UluFormDropzone.vue';
+export { default as UluFormFile } from './forms/UluFormFile.vue';
+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 UluAdaptiveLayout } from './layout/UluAdaptiveLayout.vue';
+export { default as UluDataGrid } from './layout/UluDataGrid.vue';
+export { default as UluTitleRail } from './layout/UluTitleRail.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';
+export { default as UluNavStrip } from './navigation/UluNavStrip.vue';
+export { default as UluSkipLink } from './navigation/UluSkipLink.vue';
+export { default as UluCondText } from './utils/UluCondText.vue';
+export { default as UluEmpty } from './utils/UluEmpty.vue';
+export { default as UluEmptyView } from './utils/UluEmptyView.vue';
+export { default as UluPlaceholderImage } from './utils/UluPlaceholderImage.vue';
+export { default as UluPlaceholderText } from './utils/UluPlaceholderText.vue';
+export { default as UluRouteAnnouncer } from './utils/UluRouteAnnouncer.vue';
+export { default as UluAnimateNumber } from './visualizations/UluAnimateNumber.vue';
+export { default as UluProgressBar } from './visualizations/UluProgressBar.vue';
+export { default as UluProgressDonut } from './visualizations/UluProgressDonut.vue';
+export * from './systems/index.js';

package/lib/components/layout/UluAdaptiveLayout.vue

@@ -0,0 +1,11 @@
+<template>
+  <slot v-if="!uluIsMobile || !$slots.mobile"/>
+  <slot v-else name="mobile" />
+</template>
+
+<script>
+  export default {
+    name: "AdaptiveLayout",
+    inject: ["uluIsMobile"],
+  };
+</script>

package/lib/components/layout/UluDataGrid.vue

@@ -0,0 +1,41 @@
+<!-- 
+  SSR Version 
+
+  Wrapper for simple CSS data-grid for support in Vue. Works normally 
+  with jQuery plugin for row wrapping information to toggle rule classes. 
+  This code uses a utility script for classes needed
+
+  Purpose:
+  - Print grid container
+  - Initialize a grid on a page
+    * Run the position detection in javascript and add positional classes
+    * Attach handler for resize
+  - Remove handlers on unmount
+    * Resize handler
+  
+-->
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+  import { setPositionClasses } from "@ulu/frontend/js/utils/dom.js";
+  import { debounce } from "@ulu/utils/performance.js";
+  export default {
+    name: "UluDataGrid",
+    async mounted() {
+      const setClasses = () => setPositionClasses(this.$el);
+      setClasses();
+      this.resizeHandler = debounce(setClasses, 200, false, this);
+      window.addEventListener("resize", this.resizeHandler);
+    },
+    beforeUnmount() {
+      if (this.resizeHandler) {
+        window.removeEventListener("resize", this.resizeHandler);
+      }
+    }
+  };
+</script>

package/lib/components/layout/UluTitleRail.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="rail rail--title-rail">
+    <div class="rail__item rail__item--title" :class="classes.itemTitle">
+      <component 
+        class="layout-flex type-max-width-small no-margin" 
+        :is="titleElement"
+        :class="classes.title"
+        :style="{ alignItems: iconAlign }"
+      >
+        <UluIcon 
+          v-if="icon || iconType" 
+          :class="classes.icon"
+          :type="iconType" 
+          :definition="icon"
+        />
+        <slot>
+          {{ title }}
+        </slot>
+      </component>
+    </div>
+    <div v-if="$slots.end" class="rail__item rail__item--pull">
+      <slot name="end"/>
+    </div>
+  </div>
+</template>
+
+<script>
+  import UluIcon from "../elements/UluIcon.vue";
+
+  export default {
+    name: "UluTitleRail",
+    components: {
+      UluIcon
+    },
+    props: {
+      icon: String,
+      iconAlign: {
+        type: String,
+        default: "baseline"
+      },
+      iconType: String,
+      classes: {
+        type: Object,
+        default: () => ({
+          title: "h2",
+          icon: "margin-right-small"
+        })
+      },
+      title: String,
+      titleElement: {
+        type: String,
+        default: "h2"
+      },
+    }
+  }
+</script>