@ulu/frontend 0.0.3 → 0.0.6

package/trash/scss-old-230729/components/_rule.scss

@@ -1,93 +0,0 @@
-////
-/// @group rule
-////
-
-@use "sass:map";
-@use "../utils";
-@use "../element";
-@use "../color";
-@use "../selector";
-
-/// Module Settings
-/// @type Map
-/// @prop {Number} $config.short-width Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output
-/// @prop {Number} $config.short-border-width Short rule width of border
-
-$config: (
-  "short-width" : 2.75rem,
-  "short-border-width" : 4px,
-  "short-modifiers" : false
-) !default;
-
-/// Change modules $config
-/// @param {Map} $changes Map of changes
-/// @example scss - General example, replace module-name with module's name
-///   @include module-name.set(( "property" : value ));
-
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
-}
-
-/// Get a config option
-/// @param {Map} $name Name of property
-/// @example scss - General example, replace module-name with module's name
-///   @include module-name.get("property");
-
-@function get($name) {
-  @return utils.require-map-get($config, $name, "rule [config]");
-}
-
-/// Output styles
-
-@mixin styles {
-
-  $class: selector.class("rule");
-  
-  #{ $class } {
-    @include element.rule();
-  }
-  #{ $class }--content-on-top {
-    position: relative;
-    > * {
-      background-color: white; // User woud need to specific per context needed or something
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      max-width: 100%;
-      padding: 0.5em;
-      margin: 0;
-    }
-  }
-
-  // Output user's styles presets
-  @each $name, $value in element.$rule-styles {
-    #{ $class }--#{ $name } {
-      @include element.rule-style($name);
-    }
-  }
-  // Output user's margin presets
-  @each $name, $value in element.$rule-margins {
-    #{ $class }--margin-#{ $name } {
-      @include element.rule-margin($name);
-    }
-  }
-
-  // Meant to be user by tself without content
-  $short-width: get("short-width");
-  @if ($short-width) {
-    #{ $class }--short {
-      width: $short-width;
-      max-width: 100%;
-      border-bottom-width: get("short-border-width");
-    }
-    @if get("short-modifiers") {
-      @each $mod, $opts in get("short-modifiers") {
-        #{ $class }--short {
-          width: map.get($opts, "width");
-          border-bottom-width: map.get($opts, "border-width");
-        }
-      }
-    }
-  }
-}

package/trash/scss-old-230729/helpers/_color.scss

@@ -1,14 +0,0 @@
-////
-/// @group color
-////
-
-@use "../utils";
-@use "../color";
-
-/// Prints color-context and color-[name] styles as helper classes (bottom of stylesheet)
-
-@mixin styles {
-  @include utils.file-header('helpers', 'color');
-  @include color.all-context-styles("helper-class");
-  @include color.all-color-class-styles();
-}

package/trash/scss-old-230729/helpers/_display.scss

@@ -1,73 +0,0 @@
-////
-/// @group display
-////
-
-@use "sass:map";
-
-@use "../utils";
-@use "../utility";
-@use "../layout";
-@use "../element";
-@use "../breakpoint";
-@use "../selector";
-
-/// Print utilities helper styles
-/// @example scss
-///  @include ulu.helper-display-styles();
-
-@mixin styles {
-
-  @include utils.file-header('helpers', 'display');
-
-  $hiddenVisuallyPrefix: selector.class("hidden-visually");
-
-  #{ $hiddenVisuallyPrefix } {
-    @include element.hidden-visually();
-  }
-  #{ $hiddenVisuallyPrefix }--focusable {
-    &:active,
-    &:focus {
-      @include element.hidden-visually(false);
-    }
-  }
-  // Consider removing
-  .clearfix,
-  .cf { 
-    @include layout.clearfix();
-  }
-  .display-block {
-    display: block;
-  }
-  .display-flex {
-    display: flex;
-  }
-  .display-inline-flex {
-    display: inline-flex;
-  }
-  .display-inline {
-    display: inline;
-  }
-  .display-inline-all * {
-    display: inline;
-  }
-  .display-inline-block {
-    display: inline-block;
-  }
-  .hidden {
-    display: none;
-  }
-
-  // Display none per breakpoint
-  @each $name in map.keys(breakpoint.$sizes) {
-    @include breakpoint.min($name) {
-      .hidden-min-#{ $name } {
-        display: none;
-      }
-    }
-    @include breakpoint.max($name) {
-      .hidden-max-#{ $name } {
-        display: none;
-      }
-    }
-  }
-}

package/trash/scss-old-230729/helpers/_index.scss

@@ -1,67 +0,0 @@
-////
-/// @group all
-////
-
-@forward "typography" as typography-*;
-@forward "display"  as display-*;
-@forward "utilities"  as utilities-*;
-@forward "print"  as print-*;
-@forward "units"  as units-*;
-@forward "color"  as color-*;
-
-@use "sass:map";
-@use "../utils";
-@use "typography";
-@use "display";
-@use "utilities";
-@use "units";
-@use "print";
-@use "color";
-
-// Used to check against user's includes
-
-$-all-includes: (
-  "typography" : true, 
-  "units" : true,
-  "display" : true,
-  "utilities" : true, 
-  "print" : true,
-  "color" : true
-);
-
-/// Prints all Helper styles
-/// @name helper-styles
-/// @param {List} $includes AA list of changes to this module's includes
-/// @example scss
-///  @include ulu.helper-styles();
-
-@mixin styles($includes: null) {
-  @include utils.file-header("helpers");
-  @if $includes {
-    @include utils.require-list-contains($-all-includes, $includes);
-    $-all-includes: map.merge($-all-includes, $includes) !global;
-  }
-  @if (map.get($-all-includes, "typography")) {
-    @include typography.styles;
-  }
-  @if (map.get($-all-includes, "units")) {
-    @include units.styles;
-  }
-  @if (map.get($-all-includes, "display")) {
-    @include display.styles;
-  }
-  @if (map.get($-all-includes, "utilities")) {
-    @include utilities.styles;
-  }
-  @if (map.get($-all-includes, "print")) {
-    @include print.styles;
-  }
-  @if (map.get($-all-includes, "color")) {
-    @include color.styles;
-  }
-}
-
-
-
-
-

package/trash/scss-old-230729/helpers/_print.scss

@@ -1,58 +0,0 @@
-////
-/// @group print
-////
-
-/// Printed Media Styles 
-/// @example scss
-///  @include ulu.helper-print-styles();
-
-@mixin styles {
-  // Note: this is an old framework stylesheet (may be outdated)
-  @media (print) {
-    .no-print { 
-      display: none; 
-    }
-    * {
-      background: transparent !important;
-      color: black !important;
-      box-shadow: none !important;
-      text-shadow: none !important;
-      filter: none !important;
-    }
-  
-    /* Black prints faster: h5bp.com/s */
-    a, 
-    a:visited {
-      text-decoration: underline;
-    }
-  
-    /* Don't show links for images, or javascript/internal links */
-    pre, 
-    blockquote {
-      border: 1px solid #999;
-      page-break-inside: avoid;
-    }
-  
-    /*thead {
-      display: table-header-group;
-    }*/
-  
-    /* h5bp.com/t */
-    tr, img {
-      page-break-inside: avoid;
-    }
-    img {
-      max-width: 100% !important;
-    }
-    p, 
-    h2, 
-    h3 {
-      orphans: 3;
-      widows: 3;
-    }
-    h2, 
-    h3 {
-      page-break-after: avoid;
-    }
-  }
-}

package/trash/scss-old-230729/helpers/_typography.scss

@@ -1,72 +0,0 @@
-////
-/// @group typography
-////
-
-@use "sass:map";
-@use "../utils";
-@use "../selector";
-@use "../typography";
-
-/// Prints Typography Helper styles
-/// @example scss
-///  @include ulu.helper-typography-styles();
-/// @example raw Example of type size as helper prefixed
-///  <span class="type-large-xxx">A</span>
-///  <span class="type-large-xx">A</span>
-///  <span class="type-large-x">A</span>
-///  <span class="type-large">A</span>
-///  <span class="type-base">A</span>
-///  <span class="type-small">A</span>
-///  <span class="type-small-x">A</span>
-
-@mixin styles {
-  
-  @include utils.file-header('helpers', 'typography');
-
-  $prefix: selector.class("type");
-
-  @each $size, $values in typography.$sizes {
-    @if (map.get($values, "helper-class")) {
-      @if (map.get($values, "helper-class-prefixed")) {
-        #{ $prefix }-#{$size} {
-          @include typography.size($size);
-        }
-      } @else {
-        .#{$size} {
-          @include typography.size($size);
-        }
-      }
-    }
-  }
-  
-  #{ $prefix }-light    { font-weight: typography.get("font-weight-light"); }
-  #{ $prefix }-normal   { font-weight: typography.get("font-weight-normal"); }
-  #{ $prefix }-semibold { font-weight: typography.get("font-weight-semibold"); }
-  #{ $prefix }-bold     { font-weight: typography.get("font-weight-bold"); }
-  
-  #{ $prefix }-italic   { font-style: italic; }
-
-  #{ $prefix }-center   { text-align: center; }
-  #{ $prefix }-left     { text-align: left; }
-  #{ $prefix }-right    { text-align: right; }
-
-  #{ $prefix }-upper    { 
-    text-transform: uppercase; 
-    letter-spacing: typography.get("letter-spacing-uppercase");
-  }
-  #{ $prefix }-lower    { text-transform: lowercase; }
-  #{ $prefix }-title    { text-transform: capitalize; }
-
-  #{ $prefix }-family { font-family: typography.get("font-family"); }
-  #{ $prefix }-family-sans { font-family: typography.get("font-family-sans"); }
-  #{ $prefix }-family-serif { font-family: typography.get("font-family-serif"); }
-  #{ $prefix }-family-mono { font-family: typography.get("font-family-monospace"); }
-
-  #{ $prefix }-word-break { @include typography.word-break(); }
-  #{ $prefix }-word-break-all { @include typography.word-break(true); }
-
-  #{ $prefix }-max-width { max-width: typography.get("max-width"); }
-  #{ $prefix }-max-width-small { max-width: typography.get("max-width-small"); }
-  #{ selector.class("line-height") }-dense { line-height: typography.get("line-height-dense"); }
-  #{ selector.class("line-height") }-spaced { line-height: typography.get("line-height-spaced"); }
-}

package/trash/scss-old-230729/helpers/_units.scss

@@ -1,68 +0,0 @@
-////
-/// @group units
-////
-
-@use "sass:map";
-@use "../units";
-@use "../utils";
-@use "../selector";
-
-
-/// Module Settings
-/// @type Map
-/// @prop {Number} $config.sides Sides to print for helper classes (ie. reduce output of uneeded sides)
-
-$config: (
-  "sides": ("top", "bottom", "left", "right")
-) !default;
-
-/// Change modules $config
-/// @param {Map} $changes Map of changes
-/// @example scss - General example, replace module-name with module's name
-///   @include module-name.set(( "property" : value ));
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
-}
-
-/// Get a config option
-/// @param {Map} $name Name of property
-/// @example scss - General example, replace module-name with module's name
-///   @include module-name.get("property");
-
-@function get($name) {
-  @return utils.require-map-get($config, $name, "units [config]");
-}
-
-/// Prints all unit helper classes
-
-@mixin styles {
-  @include utils.file-header('helpers', 'leading');
-  @include create-property-classes("margin", selector.class("margin"));
-  @include create-property-classes("padding", selector.class("padding"));
-}
-
-/// Creates the unit classes with all variations (from unit presets)
-/// - This can be used by itself if not outputing .styles() or if you wanted to change the default prefixes
-@mixin create-property-classes($property, $prefix) {
-  // On all sides
-  #{ $prefix } {
-    #{ $property } : units.get(1);
-  }
-  @each $name, $value in units.$config {
-    #{ $prefix }-#{ $name } {
-      #{ $property }: units.get($name);
-    }
-  }
-  // Individual sides
-  @each $side in get("sides") {
-    $full-prop: #{ $property }-#{ $side };
-    #{ $prefix }-#{ $side } {
-      #{ $full-prop }: units.get(1);
-    }
-    @each $name, $value in units.$config {
-      #{ $prefix }-#{ $side }-#{ $name } {
-        #{ $full-prop }: units.get($name);
-      }
-    }
-  }
-}

package/trash/scss-old-230729/helpers/_utilities.scss

@@ -1,87 +0,0 @@
-////
-/// @group utilities
-////
-
-@use "../utils";
-@use "../utility";
-@use "../layout";
-
-/// Print utilities helper styles
-/// @example scss
-///  @include ulu.helper-utilities-styles();
-
-@mixin styles {
-
-  @include utils.file-header('helpers', 'utilities');
-  
-  // Consider removing
-  .no-scroll-y { 
-    overflow-y: hidden; 
-  }
-  .no-scroll-x { 
-    overflow-x: hidden; 
-  }
-  .full-height {
-    height: 100%;
-  }
-  .full-width {
-    width: 100%;
-  }
-  .flex-basis-full {
-    flex-basis: 100%;
-  }
-  .full-min-height {
-    min-height: 100%;
-  }
-  .image-fill {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .image-full-width img,
-  .image-full-width {
-    width: 100%;
-    height: auto;
-  }
-  .margin-auto,
-  .center {
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .margin-left-auto {
-    margin-left: auto;
-  }
-  .margin-right-auto {
-    margin-right: auto;
-  }
-  .no-margin {
-    margin: 0;
-  }
-  .no-margin-top {
-    margin-top: 0;
-  }
-  .no-margin-bottom {
-    margin-bottom: 0;
-  }
-  .no-margin-left {
-    margin-left: 0;
-  }
-  .no-margin-right {
-    margin-right: 0;
-  }
-  .no-padding {
-    padding: 0;
-  }
-  .no-padding-top {
-    padding-top: 0;
-  }
-  .no-padding-bottom {
-    padding-bottom: 0;
-  }
-  .no-padding-left {
-    padding-left: 0;
-  }
-  .no-padding-right {
-    padding-right: 0;
-  }
-}

package/trash/scss-old-230729/packages/README.md

@@ -1,3 +0,0 @@
-# About Packages
-
-Packages are imports than bring in certain sets of stylesheets or libraries.

package/trash/scss-old-230729/packages/everything.scss

@@ -1,17 +0,0 @@
-////
-/// @group packages
-////
-
-/// Stylesheet includes everything user just imports it
-/// - Note: Not configurable as far as output of styles (use minimal)
-
-@forward "../";
-
-@use "../base";
-@use "../components";
-@use "../helpers";
-
-// Output all stylesheets
-@include base.styles();
-@include components.styles();
-@include helpers.styles();

package/trash/vue/directives/background-image-url.js

@@ -1,12 +0,0 @@
-
-/**
- * Background-image: url() directive
- * - Note: Using functional shorthand
- * @example
- *   Vue.directive('background-image-url', backgroundImageUrl);
- */
-export function backgroundImageUrl(el, b) {
-  if (b.value !== b.oldValue && b.value) {
-    el.style.backgroundImage = "url(" + b.value + ")";
-  }
-}

package/trash/vue/helpers/add-required-components.js

@@ -1,14 +0,0 @@
-import Vue from 'vue';
-
-const requiredComponent = require.context("@/components/global/", true, /\.vue$/);
-
-requiredComponent
-  .keys()
-  .forEach(filename => {
-    let config = requiredComponent(filename);
-    config = config.default || config;
-    Vue.component(
-      config.name || (filename.replace(/^.+\//, '').replace(/\.\w+$/, '')), 
-      config
-    );
-});