@ulu/frontend 0.0.3 → 0.0.5

package/trash/vue/ui/CollapsibleRegion/CollapsibleRegion.vue

@@ -1,277 +0,0 @@
-<!-- 
-  Reference:
-  - transitioning from auto: https://codepen.io/brundolf/pen/dvoGyw?editors=0010
--->
-<template>
-  <div 
-    class="CollapsibleRegion"
-    @keydown.esc="handleEscape"
-    :class="{ 
-      'CollapsibleRegion--open' : isOpen,
-      'CollapsibleRegion--closed' : !isOpen,
-      'CollapsibleRegion--transitioning' : isTransitioning
-    }"
-  >
-    <button 
-      class="CollapsibleRegion__toggle"
-      :id="toggleId"
-      :aria-controls="contentId" 
-      :aria-expanded="isOpen"
-      @click="toggle"
-    >
-      <slot name="toggle" :isOpen="isOpen" />
-    </button>
-    <div 
-      class="CollapsibleRegion__content"
-      tabindex="-1"
-      ref="content"
-      :id="contentId"
-      :aria-hidden="!isOpen"
-      :aria-labelledby="toggleId"
-      :style="contentStyles"
-      v-show="!isHidden"
-    >
-      <!-- 
-      Using inner container to allow no styles on content container
-      as they interfere with getting accurate measurements of the content
-      when it's hidden (scrollHeight) 
-      -->
-      <div class="CollapsibleRegion__content-inner">
-        <slot/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  
-  let uid = 0;
-
-  export default {
-    name: 'CollapsibleRegion',
-    props: {
-      closeOnEscape: Boolean,
-      /**
-       * When the component is shown it should start visible or hidden
-       */
-      startOpen: Boolean,
-      /**
-       * Whether or not to transition the show and hide
-       */          
-      transitionHeight: Boolean,
-      /**
-       * Transition should fade as it expands
-       */         
-      transitionFades: Boolean,
-      /**
-       * Transition Timing Function
-       */
-      transitionTiming: {
-        type: String,
-        default: 'ease-out'
-      },
-      /**
-       * Transition Duration (css duration string), use comma seperation if different for opacity (fade).
-       * Note: This is used to calculate a fallback timer if transitions fail
-       */      
-      transitionDuration: {
-        type: String,
-        default: '400ms',
-        validator(value) {
-          // Make sure that it's a valid css duration (ms|s)
-          return value.includes('s')
-        }
-      },
-    },
-    data() {
-      const isOpen = this.startOpen;
-      // Calculate the duration needed for the fallback, 
-      // adding 500 to allow padding for delays in transitioning
-      const transitionTimeout = Math.ceil(
-        this.getUnitlessDuration(this.transitionDuration) + 500
-      );
-      // Note (isOpen vs isHidden): 'isOpen' is the actaul state of the content, 
-      // and 'isHidden' is just used for display none
-      return {
-        isOpen,               
-        toggleId:             this.getUid(),
-        contentId:            this.getUid(),
-        contentHeight:        isOpen ? 'auto' : '0px',
-        contentOpacity:       this.transitionFades && !isOpen ? 0 : 1,
-        transitionsDisabled:  false,
-        transitionTimeout:    Math.ceil(this.getUnitlessDuration(this.transitionDuration) + 500),
-        isTransitioning:      false,
-        isHidden:             isOpen ? false : true,
-        onCleanupTransition:  null, // Transitions add function here used if needing to cancel 
-      };
-
-    },
-    computed: {
-      contentStyles() {
-        if (this.transitionHeight) {
-          return { 
-            overflow:           'hidden',
-            height:             this.contentHeight,
-            transitionDuration: this.transitionDuration,
-            transitionTiming:   this.transitionTiming,
-            opacity:            this.contentOpacity,
-            transitionProperty: this.transitionsDisabled ? "none" : `height${ this.transitionFades ? ",opacity" : "" }`
-          };
-        }
-        return {};
-      }
-    },
-    methods: {
-      
-      /**
-       * Function used to toggle the collapsible 
-       */
-      toggle() {
-        console.log('Toggle Click', this.isOpen);
-        if (this.isOpen && !this.isTransitioning) {
-          this.close();
-        } else {
-          this.open();
-        }
-      },
-      handleEscape() {
-        if (this.closeOnEscape && this.isOpen) {
-          this.close();
-        }
-      },
-      removeTransition(canceled) {
-        if (this.onCleanupTransition) this.onCleanupTransition();
-        this.isTransitioning = false;
-        this.onCleanupTransition = null;
-      },
-      /**
-       * Function that will handle setting the styles in a way that allows for
-       * transitioning from display: none to height: auto. With optional fade.
-       */
-      open() {
-        // If there are no animations
-        if (!this.transitionHeight) {
-          this.isOpen = true;
-          this.isHidden = false;
-          return;
-        }
-
-        this.removeTransition(true);
-
-        let tid;
-        const element = this.$refs.content;
-        // When finished clear the fallback and set the height to auto
-        // incase something else on the page changes this elements layout/height,
-        // remove the one time listener, and call the ending callback 
-        // and user callbacks
-        const complete = () => {
-          this.contentHeight = 'auto';
-          this.isOpen = true;
-          this.removeTransition();
-          this.$emit('collapsible-opened');
-        };
-        this.onCleanupTransition = () => {
-          clearTimeout(tid);
-          element.removeEventListener('transitionend', complete);
-        };
-        // Listen for the end of the transition we are about to trigger on 
-        element.addEventListener('transitionend', complete);
-        this.isHidden = false;
-        this.isTransitioning = true;
-        this.$emit('collapsible-opening');
-        // Waiting for vue to update the elements style.display from none
-        // so we can measure it's hidden height, set it statically,
-        // to then trigger the transition to that static height
-        this.$nextTick(() => {
-          this.contentHeight = element.scrollHeight + 'px';
-          if (this.transitionFades) this.contentOpacity = 1;
-          // Setting a fallback incase anything interupts the browsers 
-          // ability to fire the 'transitionend' event, the element will 
-          // still be functional
-          tid = setTimeout(complete, this.transitionTimeout);
-        });
-      },
-      /**
-       * Function that will handle setting the styles in a way that allows for
-       * transitioning from height: auto to display: none
-       */      
-      close() {
-        // If there are no animations
-        if (!this.transitionHeight) {
-          this.isOpen = false;
-          this.isHidden = true;
-          return;
-        }
-
-        this.removeTransition(true);
-
-        let tid;
-        // Measure the elements height, to set it from auto  
-        // to static so that we can transtion it
-        const element = this.$refs.content;
-        const height = element.scrollHeight;
-        // Set the elements height to a static value so we can transition it
-        // then on next tick when that value is set, start the transition
-        const setup = () => {
-          element.addEventListener('transitionend', complete);
-          this.contentHeight = height + 'px';
-          this.$nextTick(init);
-        };
-        // Enable transitions and then on next update start it
-        // by setting the height to 0
-        const init = () => {
-          this.transitionsDisabled = false;
-          this.$nextTick(() => {
-            requestAnimationFrame(transition);
-          });
-        };
-        const transition = () => {
-          this.contentHeight = '0px';
-          if (this.transitionFades) this.contentOpacity = 0;
-        };
-        const complete = () => {
-          this.isOpen = false;
-          this.isHidden = true;
-          this.removeTransition();
-          this.$emit('collapsible-closed');
-        };
-        const fallback = () => {
-          transition();
-          complete();
-        };
-        this.onCleanupTransition = () => {
-          clearTimeout(tid);
-          element.removeEventListener('transitionend', complete);
-        };
-        // Temporarily disable the transitions on the element,
-        // on next tick when transistions are disabled (removing transiton-property) 
-        // attach the fallback and setup the transition
-        this.transitionsDisabled = true;
-        this.isTransitioning = true;
-        this.$emit('collapsible-closing');
-        this.$nextTick(() => {
-          requestAnimationFrame(setup);
-          tid = setTimeout(fallback, this.transitionTimeout);
-        });
-      },
-      /**
-       * Returns unitless duration
-       * @param {String} duration - Css duration string
-       */
-      getUnitlessDuration(value) {
-        // Grab only first value in string
-        let duration = parseFloat( value.split(',')[0] );
-        // If not milliseconds we need to convert assumed if 
-        // not milliseconds it's seconds (only other valid duration)
-        return value.includes('ms') ? duration : duration * 1000;
-      },
-      /**
-       * Recursive function to generate and test id uniqueness
-       */
-      getUid() {
-        const id = `Ulu-C-${ ++uid }`;
-        return document.getElementById(id) ? this.getUid() : id;
-      }
-    },
-  }
-</script>

package/trash/vue/ui/CollapsibleRegion/Demo.vue

@@ -1,101 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Vue Collapsibles</h1>
-    <h2>Without Transitions (closes on escape)</h2>
-    <CollapsibleRegion close-on-escape>
-      <template #toggle="{ isOpen }">
-        Click Me {{ isOpen }}
-      </template>
-      This is the hidden content
-    </CollapsibleRegion>
-    <h3>Start Visible</h3>
-    <CollapsibleRegion start-open>
-      <template #toggle>
-        Click Me
-      </template>
-      This is the hidden content
-    </CollapsibleRegion>
-    <h2>With Transitions</h2>
-    <CollapsibleRegion 
-      transition-height 
-      transition-fades 
-      transition-duration="200ms"
-    >
-      <template #toggle>
-        Click Me
-      </template>
-      <p>
-        {{ placeholder }}
-      </p>
-      <p>
-        {{ placeholder }}
-      </p>
-    </CollapsibleRegion>
-    <CollapsibleRegion 
-      transition-height 
-      transition-fades 
-      transition-duration="200ms"
-    >
-      <template #toggle>
-        Click Me
-      </template>
-      <p>
-        {{ placeholder }}
-      </p>
-      <p>
-        {{ placeholder }}
-      </p>
-    </CollapsibleRegion>
-  </div>
-</template>
-
-<script>
-import CollapsibleRegion from '@/CollapsibleRegion.vue';
-// import placeholder from "@/assets/text-placeholder.js";
-export default {
-  name: 'App',
-  components: {
-    CollapsibleRegion
-  },
-  data() {
-    return {
-      placeholder: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque quam eget dui fringilla, non fringilla mi eleifend. Vivamus non ex urna. Pellentesque lacinia tortor id dapibus volutpat. Morbi et ante non tortor eleifend dapibus. Ut vitae pulvinar sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sollicitudin, ante sed venenatis vestibulum, est elit dapibus ex, sed vulputate leo ante et ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam consequat imperdiet ligula facilisis gravida."
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-body, html {
-  padding: 0;
-  margin: 0;
-  background-color: rgb(23, 22, 27);
-}
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-  color: rgba(255, 255, 255, 0.795);
-}
-.CollapsibleRegion {
-  margin: 3em;
-}
-  // background-color: rgb(224, 226, 226);
-.CollapsibleRegion__toggle {
-  padding: 1em 3em;
-  // outline: none;
-  border: none;
-  background-color: rgb(29, 103, 199);
-  
-  width: 100%;
-  font-weight: bold;
-}
-.CollapsibleRegion__content-inner {
-  padding: 3em;
-  background-color: rgb(39, 36, 49);
-}
-
-</style>

package/trash/vue/ui/Dropdown/Dropdown.vue

@@ -1,184 +0,0 @@
-<!-- 
-Dependencies: 
-- vue-click-outside (npm)
- -->
-<template>
-  <div 
-    class="dropdown" 
-    :class="{
-      'dropdown--select-style' : selectStyle,
-      'dropdown--select-style-inline' : selectStyleInline
-    }" 
-    :data-dropdown-state="currentState" 
-    v-click-outside="hide"
-  >
-    <span 
-      class="dropdown__toggle"
-      id="toggleId"
-      :data-dropdown-state="currentState"
-      :aria-controls="contentId"
-      :aria-expanded="isOpen"
-      @click="toggle"
-    >
-      <span class="dropdown__toggle-content">
-        <slot name="button" />
-      </span>
-      <span class="dropdown__toggle-icon" v-if="selectStyle">
-        <i class="dropdown__toggle-icon-glyph fas fa-caret-down"></i>
-      </span>
-    </span>
-    <div 
-      class="dropdown__content" 
-      :id="contentId"
-      :data-dropdown-state="currentState"
-      :data-dropdown-position-x="positionX"
-      :data-dropdown-position-y="positionY"
-      :aria-labeledby="toggleId"
-      :aria-hidden="!isOpen"
-      :style="{ width: contentWidth }"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-  import ClickOutside from 'vue-click-outside';
-
-  export default {
-    name: 'dropdown',
-    props: {
-      positionX: {
-        type: String,
-        default: 'center'
-      },
-      positionY: {
-        type: String,
-        default: 'center'
-      },
-      selectStyle: {
-        required: false,
-        type: Boolean,
-        default: false
-      },
-      selectStyleInline: {
-        required: false,
-        type: Boolean,
-        default: false
-      },
-      contentWidth: {
-        type: String,
-        required: false,
-        default: '200px'
-      }
-    },
-    directives: {
-      ClickOutside
-    },
-    data() {
-      return {
-        isOpen: false
-      }
-    },
-    computed: {
-      id() {
-        return this._uid;
-      },
-      currentState() {
-        return this.isOpen ? 'open' : 'closed';
-      },
-      toggleId() {
-        return `dropown__toggle--id-${ this.id }`;
-      },
-      contentId() {
-        return `dropown__content--id-${ this.id }`;
-      }
-    },
-    methods: {
-      toggle() {
-        this.isOpen = !this.isOpen;
-      },
-      hide() {
-        this.isOpen = false;
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-  $dropdown--border-radius: 6px !default;
-  $dropdown--color: black !default;
-  $dropdown--font-size: 1rem !default;
-  .dropdown {
-    position: relative;
-
-    display: inline-block;
-    &--select-style {
-      padding: 0.35em 1em;
-      background-color: white;
-      border-radius: $dropdown--border-radius;
-      color: $dropdown--color;
-      margin: 0.5em 0;
-      max-width: 15em;
-      display: inline-block;
-    }
-    &--select-style-inline {
-      background-color: transparent;
-      font-size: $dropdown--font-size;
-      color: inherit;
-    }
-    &__toggle {
-      cursor: pointer;
-      .dropdown--select-style & {
-        display: flex;
-        justify-content: space-between;
-      }
-      &-content {
-        // display: block;
-        // flex: 1 1;
-      }
-      &-icon {
-        display: block;
-        margin-left: 1em;
-        .dropdown--select-style & {
-          margin-left: 0.5em;
-        }
-      }
-    }
-    &__content {
-      display: none;
-      position: absolute;
-      z-index: 2;
-      top: 100%;
-      margin-top: 0.3rem;
-      background-color: white;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.4);
-      border-radius: 6px;
-      // overflow: auto;
-      max-height: 300px;
-      &[data-dropdown-position-x="center"] {
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      &[data-dropdown-position-x="left"] {
-        left: 0;
-      }
-      &[data-dropdown-position-x="right"] {
-        right: 0;
-      }
-      &[data-dropdown-position-y="top"] {
-        bottom: 100%;
-        top: auto;
-        margin-bottom: 0.3rem;
-      }
-      &[data-dropdown-state="open"] {
-        display: block;
-      }
-    }
-
-    // Contextually style certain global styles
-    .button {
-      margin: 0;
-    }
-  }
-</style>

package/trash/vue/ui/Modals/components/Modal.vue

@@ -1,49 +0,0 @@
-<template>
-  <!-- Note: The top level is used for click outside -->
-  <div class="modal">
-    <div class="modal__panel">
-      <div class="modal__header" id="modal__label">
-        <span 
-          v-if="icon" 
-          class="modal__icon" 
-          :data-icon-name="icon" 
-          aria-hidden="true"
-        ></span>
-        <!-- Optionally use the title (pre-templated with prop) or pass markup using slot -->
-        <span 
-          class="modal__title" 
-          v-if="title && title.length" key="title"
-        >
-          {{ title }}
-        </span>
-        <span 
-          class="modal__title" 
-          v-else key="title-slotted"
-        >
-          <slot name="title"></slot>
-        </span>
-      </div>
-      <div class="modal__body">
-        <!-- Default Slot -->
-        <slot></slot>
-      </div>
-      <div class="modal__footer">
-        <slot name="footer"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-  export default {
-    name: 'modal',
-    props: {
-      title: String,
-      icon: String
-    },
-  }
-</script>
-
-<style lang="scss">
-</style>

package/trash/vue/ui/Modals/components/Modals.vue

@@ -1,103 +0,0 @@
-<!-- 
-  Version: 1.0.3
-
-  Changes:
-    - 1.0.1 | CSS Tweaks
-    - 1.0.3 | Optional Click Outside Close
- -->
-<template>
-  <div class="modals" v-if="Boolean(this.$root.active)">
-    <div class="modals__back-drop" @click.self.prevent="closeModals">
-      <div 
-        class="modals__modal" 
-        id="modals__modal"
-        role="dialog" 
-        :aria-labelledby="labeledBy"
-      >
-        <component 
-          v-if="this.$root.active" 
-          :is="this.$root.active.component"
-          @hook:mounted="modalMounted"
-          @hook:destroyed="modalDestroy"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'modals',
-    data() {
-      return {
-        pageScrollY: 0
-      }
-    },
-    computed: {
-      labeledBy() {
-        return this.$root.active && this.$root.active.labeledBy;
-      },
-      // modalState() {
-      //   return this.$root.active ? 'open' : 'closed'
-      // }
-    },
-    methods: {
-      modalMounted() {
-        this.pageScrollY = window.pageYOffset || document.documentElement.scrollTop;
-        window.addEventListener('scroll', this.disableScroll);
-        this.$nextTick(() => {
-          this.$root.$emit('modal-mount');
-        });
-      },
-      modalDestroy() {
-        window.removeEventListener('scroll', this.disableScroll);
-        this.$nextTick(() => {
-          this.$root.$emit('modal-destroy');
-        });
-      },
-      closeModals() {
-        if (this.$root.active.clickOutsideCloses) {
-          this.$root.close();
-        }
-      },
-      disableScroll() { 
-        window.scrollTo(0, this.scrollTop); 
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-  .modals {
-    box-sizing: border-box;
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    background: rgba(black, 0.5);
-    z-index: 1000;
-    opacity: 1;
-    display: flex;
-    backdrop-filter: blur(4px);
-  }
-  .modals__back-drop {
-    flex: 1 1;
-    box-sizing: border-box;
-    // padding: 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .modals__modal {
-    // flex: 0 0;
-    box-sizing: border-box;
-    // background: white;
-    position: relative;
-    // max-height: 75%;
-    // transform: translateY((25% / 2)); // Half of 10% left
-    // border-radius: 10px;
-    // overflow: auto;
-    // box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
-  }
-</style>