@ulu/frontend-vue 0.1.0-beta.1

package/lib/plugins/popovers/manager.js

@@ -0,0 +1,54 @@
+import { ref } from "vue";
+import defaults from "./defaults.js";
+
+export const options = {
+  plugin: { ...defaults.plugin },
+  popover: { ...defaults.popover },
+  tooltip: { ...defaults.tooltip, ...defaults.popover },
+};
+
+/**
+ * Whether or not the tooltip is active
+ */
+export const active = ref(false);
+/**
+ * Current tooltip config
+ */
+export const activeConfig = ref(null);
+
+/**
+ * Setup the store options 
+ * @param {Object} userOptions
+ * @param {Object} options Resolved options
+ */
+export function init(userOptions = {}) {
+  Object.assign(options.popover, userOptions.popover);
+  Object.assign(options.tooltip, userOptions.tooltip);
+  Object.assign(options.plugin, userOptions.plugin);
+  return options;
+}
+
+/**
+   * Config for a single tooltip instance
+   */
+export function createConfig(userConfig) {
+  return Object.assign({}, options.tooltip, userConfig);
+} 
+
+/**
+ * Show a tooltip
+ * - Set by directive
+ */
+export function show(config) {
+  active.value = true;
+  activeConfig.value = config;
+}
+
+/**
+ * Hide a tooltip
+ * - Set by directive
+ */
+export function hide() {
+  active.value = false;
+  activeConfig.value = null;
+}

package/lib/plugins/popovers/useFollow.js

@@ -0,0 +1,80 @@
+import { ref } from "vue";
+import { show, hide, createConfig } from "./manager.js";
+
+const defaults = {
+  content: null
+};
+
+export default function useFollowPoint(userOptions) {
+  if (!userOptions.content) {
+    console.warn("Missing content for 'useFollowPoint' tooltip", userOptions);
+  }
+  const options = Object.assign({}, defaults, userOptions);
+
+  let _update;
+
+  const x = ref(0);
+  const y = ref(0);
+
+  const config = createConfig({
+    trigger: ref({
+      getBoundingClientRect() {
+        const currentX = x.value;
+        const currentY = y.value;
+        return {
+          width: 0,
+          height: 0,
+          x: currentX,
+          left: currentX,
+          right: currentX,
+          y: currentY,
+          top: currentY,
+          bottom: currentY,
+        };
+      }
+    }),
+    content: options.content,
+    inline: false,
+    onReady({ update }) {
+      _update = update;
+    }
+  });
+
+  return {
+    /**
+     * Reactive X value
+     * @type {Object}
+     */
+    x,
+    /**
+     * Reactive Y value
+     * @type {Object}
+     */
+    y,
+    /**
+     * Show follow tooltip
+     */
+    show() {
+      show(config);
+    },
+    /**
+     * Hide follow tooltip
+     */
+    hide() {
+      hide(config);
+    },
+    /**
+     * 
+     * @param {Object} changes Updates for virtual element
+     * @param {Object} changes.x New 'x' value
+     * @param {Object} changes.y New 'y' value
+     */
+    update(changes) {
+      x.value = changes.x;
+      y.value = changes.y;
+      if (_update) {
+        _update();
+      }
+    },
+  };
+}

package/lib/plugins/popovers/utils.js

@@ -0,0 +1,5 @@
+let uidCount = 0;
+
+export function newUid() {
+  return `ulu-popovers-uid-${ ++uidCount }`;
+}

package/lib/plugins/toast/UluToast.vue

@@ -0,0 +1,87 @@
+<!-- 
+  Using slots so that user can wrap component for custom displays within default template (ie. to render a badge, etc) 
+-->
+<template>
+  <div 
+    class="toast"
+    :class="[
+      {
+        'toast--persistent' : !toast.duration
+      },
+      toast?.class
+    ]"
+  >
+    <div v-if="toast.icon || $slots.icon" class="toast__icon" :class="classes.icon">
+      <slot name="icon" :toast="toast">
+        <FaIcon v-if="toast.icon" :icon="toast.icon"/>
+      </slot>
+    </div>
+    <div class="toast__content" :class="classes.content">
+      <slot name="content" :toast="toast">
+        <div v-if="toast.title" class="toast__header" :class="classes.header">
+          <strong class="toast__title" :class="classes.title">
+            {{ toast.title }}
+          </strong>
+          <span v-if="toast.date" class="toast__date" :class="classes.date">
+            {{ toast.date }}
+          </span>
+        </div>
+        <div v-if="toast.description" class="toast__body" :class="classes.body">
+          {{ toast.description }}
+        </div>
+      </slot>
+    </div>
+    <div v-if="toast.actions?.length" class="toast__actions" :class="classes.actions">
+      <button 
+        v-for="(action, index) in toast.actions"
+        :key="index"
+        class="toast__action" 
+        :class="classes.action"
+        @click="handleAction($event, action)"
+      >
+        {{ action.label }}
+      </button>
+    </div>
+    <button class="toast__close" :class="classes.closeButton" @click="toast.close">
+      <UluIcon type="close"/>
+    </button>
+  </div>
+</template>
+
+<script>
+  import UluIcon from "../../components/elements/UluIcon.vue";
+  export default {
+    name: 'UluToast',
+    components: {
+      UluIcon
+    },
+    props: {
+      /**
+       * Toast configuration
+       */
+      toast: Object,
+      /**
+       * Icons for each element { icon, header, content, date, actions, action, closeButton, title, body, closeButton }
+       */
+      classes: {
+        type: Object,
+        default: () => ({
+          content: "type-small",
+          date: "type-small-x",
+          actions: "type-small-x",
+          action: "button button--small button--outline",
+          closeButton: "button button--icon button--transparent"
+        })
+      }
+    },
+    methods: {
+      handleAction(event, action) {
+        const { toast } = this;
+        this.toast.close();
+        this.$nextTick(() => {
+          action(event, toast, action);
+        });
+      }
+    }
+  }
+</script>

package/lib/plugins/toast/UluToastDisplay.vue

@@ -0,0 +1,35 @@
+<template>
+  <Teleport :to="pluginOptions.teleportTo">
+    <TransitionGroup 
+      class="toast-container"
+      :class="classes"
+      name="toast" 
+      tag="div"
+    >
+      <component
+        v-for="toast in toasts"
+        :key="toast.uid"
+        :is="toast.component"
+        :toast="toast"
+      />
+    </TransitionGroup>
+  </Teleport>
+</template>
+
+<script>
+  import { store } from "./store.js";
+  export default {
+    name: 'UluTooltipDisplay',
+    data() {
+      const { toasts, pluginOptions } = store;
+      return { toasts, pluginOptions };
+    },
+    computed: {
+      classes() {
+        const { position } = this.pluginOptions;
+        const positionClasses = position.map(p => `toast-container--${ p }`);
+        return positionClasses;
+      }
+    }
+  }
+</script>

package/lib/plugins/toast/_toast.scss

@@ -0,0 +1,198 @@
+////
+/// @group toast
+/// Toast notifications
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "@ulu/frontend/scss/selector";
+@use "@ulu/frontend/scss/utils";
+@use "@ulu/frontend/scss/color";
+@use "@ulu/frontend/scss/element";
+@use "@ulu/frontend/scss/layout";
+@use "@ulu/frontend/scss/button";
+@use "@ulu/frontend/scss/typography";
+@use "@ulu/frontend/scss/cssvar";
+
+// Used for function fallback
+$-fallbacks: (
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow-above"
+  ),
+  "border-radius": (
+    "function": meta.get-function("get", false, "button"),
+    "property": "border-radius"
+  ),
+  "z-index": (
+    "function": meta.get-function("get", false, "layout"),
+    "property": "z-index-fixed"
+  ),
+  "date-font-weight": (
+    "function": meta.get-function("get", false, "typography"),
+    "property": "font-weight-light"
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue} z-index [true] - Z-index of the toast container
+/// @prop {CssValue} box-shadow [true] - Box shadow for the toast
+/// @prop {Color} background-color [white] - Background color of the toast
+/// @prop {CssValue} border-radius [true] - Border radius of the toast
+/// @prop {CssValue} border-width [5px] - Border width of the toast
+/// @prop {Color} border-color [transparent] - Border color of the toast
+/// @prop {CssValue} padding [0 0 0 1rem] - Padding of the toast
+/// @prop {CssValue} line-height [1] - Line height of the toast
+/// @prop {CssValue} margin-bottom [0.5rem] - Margin bottom of the toast
+/// @prop {CssValue} container-top [1rem] - Top position of the toast container
+/// @prop {CssValue} container-right [1rem] - Right position of the toast container
+/// @prop {CssValue} container-width [min(24rem, 100vw - 2rem)] - Width of the toast container
+/// @prop {Color} date-color ["type-tertiary"] - Color of the date
+/// @prop {CssValue} date-font-weight [true] - Font weight of the date
+/// @prop {CssValue} icon-margin-right [0.7rem] - Margin right of the icon
+/// @prop {CssValue} icon-font-size [1.2rem] - Font size of the icon
+/// @prop {CssValue} actions-margin-right [3px] - Margin right of the actions container
+/// @prop {CssValue} action-margin-top [3px] - Margin top of the action buttons
+/// @prop {CssValue} content-padding [0.25rem 0.5rem 0.25rem 0] - Padding of the content
+/// @prop {CssValue} persistent-animation [UluWiggle 4s infinite] - Animation for persistent toasts
+
+$config: (
+  "z-index": true,
+  "box-shadow": true,
+  "background-color": white,
+  "border-radius": true,
+  "border-width": 5px,
+  "border-color": transparent,
+  "padding": 0 0 0 1rem,
+  "line-height": 1,
+  "margin-bottom": 0.5rem,
+  "container-top": 1rem,
+  "container-right": 1rem,
+  "container-width": min(24rem, 100vw - 2rem),
+  "date-color": "type-tertiary",
+  "date-font-weight": true,
+  "icon-margin-right": 0.7rem,
+  "icon-font-size": 1.2rem,
+  "actions-margin-right": 3px,
+  "action-margin-top": 3px,
+  "content-padding": (0.25rem 0.5rem 0.25rem 0),
+  "persistent-animation": (UluWiggle 4s infinite),
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu-vue.toast-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.toast-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "toast [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo toast
+/// @example scss
+///  @include ulu.toast-styles();
+
+@mixin styles {
+  $prefix: selector.class("toast");
+
+  #{ $prefix }-container {
+    position: fixed;
+    top: get("container-top");
+    right: get("container-right");
+    width: get("container-width");
+    z-index: get("z-index");
+  }
+
+  #{ $prefix } {
+    box-shadow: get("box-shadow");
+    background-color: get("background-color");
+    border-radius: get("border-radius");
+    border: get("border-width") solid get("border-color");
+    padding: get("padding");
+    line-height: get("line-height");
+    margin-bottom: get("margin-bottom");
+    display: flex;
+    align-items: center;
+  }
+
+  #{ $prefix }__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  #{ $prefix }__date {
+    color: get("date-color");
+    font-weight: get("date-font-weight");
+    margin-left: 1em;
+  }
+
+  #{ $prefix }__icon {
+    margin-right: get("icon-margin-right");
+    font-size: get("icon-font-size");
+  }
+
+  #{ $prefix }__actions {
+    flex-basis: min-content;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-right: get("actions-margin-right");
+  }
+
+  #{ $prefix }__action {
+    width: 100%;
+    margin: 0;
+    & + & {
+      margin-top: get("action-margin-top");
+    }
+  }
+
+  #{ $prefix }__close {
+    margin: 0;
+  }
+
+  #{ $prefix }__content {
+    margin-right: auto;
+    flex-grow: 1;
+    padding: get("content-padding");
+  }
+
+  #{ $prefix }--persistent {
+    animation: get("persistent-animation");
+    &:hover,
+    &:focus-within {
+      animation: none;
+    }
+  }
+
+  // Vue animation
+  #{ $prefix }--animation-move, 
+  #{ $prefix }--animation-enter-active,
+  #{ $prefix }--animation-leave-active {
+    transition: all 0.3s ease;
+  }
+  #{ $prefix }--animation-enter-from,
+  #{ $prefix }--animation-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  #{ $prefix }--animation-leave-active {
+    position: absolute;
+    width: 100%;
+  }
+}

package/lib/plugins/toast/defaults.js

@@ -0,0 +1,30 @@
+import { markRaw } from "vue";
+import ToastComponent from "./UluToast.vue";
+/**
+ * Default plugin options
+ */
+export default {
+  toastOptions: {
+    /**
+     * Component used to render the toast in the display
+     */
+    component: markRaw(ToastComponent),
+    /**
+     * Duration of toast
+     */
+    duration: 6000, // 8.5s
+    /**
+     * Array of actions { label, click }
+     */
+    actions: [],
+  },
+  pluginOptions: {
+    componentName: "UluToast",
+    componentNameDisplay: "UluToastDisplay",
+    teleportTo: "body",
+    /**
+     * Position of the toast container (holds toasts)
+     */
+    position: ["top", "right"],
+  }
+};

package/lib/plugins/toast/index.js

@@ -0,0 +1,17 @@
+import { store, api } from "./store.js";
+import UluToast from "./UluToast.vue";
+import UluToastDisplay from "./UluToastDisplay.vue";
+
+/**
+ * Install plugin
+ */
+export default function install(app, userOptions = {}) {
+  const options = store.setPluginOptions(userOptions?.plugin);
+  store.setToastOptions(userOptions?.toast);
+
+  app.component(options.componentName, UluToast);
+  app.component(options.componentNameDisplay, UluToastDisplay);
+
+  app.config.globalProperties.$uluToast = api;
+  app.provide('uluToast', api);
+}

package/lib/plugins/toast/store.js

@@ -0,0 +1,71 @@
+import { reactive } from "vue";
+import defaults from "./defaults.js";
+
+const { assign: merge } = Object;
+let counter = 0;
+
+/**
+ * Reactive State Object (used inside global components, and as API globally)
+ */
+export const store = reactive({
+  toasts: [],
+  /**
+   * Saveable 
+   */
+  pluginOptions: defaults.pluginOptions,
+  toastOptions: defaults.toastOptions,
+  setToastOptions(options) {
+    this.toastOptions = merge({}, this.toastOptions, options);
+    return this.pluginOptions;
+  },
+  setPluginOptions(options) {
+    this.pluginOptions = merge({}, this.pluginOptions, options);
+    return this.pluginOptions;
+  },
+  createToast(options) {
+    const uid = `toast-${ ++counter }`;
+    return merge({}, this.toastOptions, options, { 
+      uid,
+      close() {
+        api.remove(uid);
+      }
+    });
+  }
+});
+
+/**
+ * Public API
+ */
+export const api = {
+  /**
+   * 
+   * @param {Object} options Toast options
+   * @returns Toast object (to be used to remove)
+   */
+  add(options) {
+    const toast = store.createToast(options);
+    store.toasts.unshift(toast);
+    if (toast.duration) {
+      setTimeout(() => {
+        this.remove(toast.uid);
+      }, toast.duration);
+    }
+    return toast;
+  },
+  /**
+   * 
+   * @param {Object} toast Toast uid
+   */
+  remove(uid) {
+    const index = store.toasts.findIndex(t => t.uid === uid);
+    if (index > -1) {
+      store.toasts.splice(index, 1);
+    }
+  },
+  /**
+   * Remove all toasts
+   */
+  removeAll() {
+    store.toasts = [];
+  },
+};

package/lib/plugins/toast/useToast.js

@@ -0,0 +1,18 @@
+import { inject } from 'vue';
+
+/**
+ * Composable for accessing the toast API.
+ * @returns {object} The toast API.
+ * @throws {Error} If the toast plugin is not installed.
+ * @example
+ * import { useToast } from './useToast';
+ * const toast = useToast();
+ * toast.add({ title: 'Hello World' });
+ */
+export const useToast = () => {
+  const toast = inject('uluToast');
+  if (!toast) {
+    throw new Error('Toast plugin not installed');
+  }
+  return toast;
+};