codelation_ui 1.0.1 → 1.0.57

data/app/assets/stylesheets/codelation_ui/extended/fail.scss

@@ -0,0 +1,50 @@
+$vue-fail-color: $red !default;
+$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
+
+.vue-fail {
+  border-radius: 50%;
+  display: block;
+  stroke: #fff;
+  stroke-miterlimit: 10;
+  margin: 10% auto;
+  box-shadow: inset 0px 0px 0px $vue-fail-color;
+  @include animation(vue-fail-fill .4s ease-in-out .4s forwards, vue-fail-scale .3s ease-in-out .9s both);
+
+  .vue-fail-circle {
+    stroke-dasharray: 166;
+    stroke-dashoffset: 166;
+    stroke-miterlimit: 10;
+    stroke: $vue-fail-color;
+    fill: none;
+    @include animation(vue-fail-stroke .6s $curve forwards);
+  }
+
+  .vue-fail-check {
+    transform-origin: 50% 50%;
+    stroke-dasharray: 48;
+    stroke-dashoffset: 48;
+    @include animation(vue-fail-stroke .3s $curve .8s forwards);
+  }
+}
+
+
+@keyframes vue-fail-stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes vue-fail-scale {
+  0%, 100% {
+    @include transform(none);
+  }
+  50% {
+    @include transform(scale3d(1.1, 1.1, 1));
+  }
+}
+
+@keyframes vue-fail-fill {
+  100% {
+    box-shadow: inset 0px 0px 0px 30px $vue-fail-color;
+  }
+}

data/app/assets/stylesheets/codelation_ui/extended/radial_progress_bar.scss

@@ -0,0 +1,70 @@
+$vue-radial-progress-bar-color: $default-ui-color !default;
+$vue-radial-progress-bar-start-color: $vue-radial-progress-bar-color !default;
+$vue-radial-progress-bar-stop-color: $vue-radial-progress-bar-color !default;
+
+$vue-radial-progress-bar-complete-color: $default-ui-color !default;
+$vue-radial-progress-bar-complete-start-color: $vue-radial-progress-bar-complete-color !default;
+$vue-radial-progress-bar-complete-stop-color: $vue-radial-progress-bar-complete-color !default;
+
+$vue-radial-progress-bar-over-color: #ee3128 !default;
+$vue-radial-progress-bar-over-start-color: $vue-radial-progress-bar-over-color !default;
+$vue-radial-progress-bar-over-stop-color: $vue-radial-progress-bar-over-color !default;
+
+$vue-radial-progress-bar-track-color: #ececec !default;
+$vue-radial-progress-bar-complete-track-color: #ececec !default;
+$vue-radial-progress-bar-over-track-color: #ececec !default;
+
+.vue-radial-progress-bar-container {
+  position: relative;
+  
+  .vue-radial-progress-bar-inner {
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    border-radius: 50%;
+    margin: 0 auto;
+    @include display(flex);
+    @include flex-direction(column);
+    @include align-items(center);
+    @include justify-content(center);
+  }
+  
+  .vue-radial-progress-bar-start-color {
+    stop-color: $vue-radial-progress-bar-start-color;
+  }
+  
+  .vue-radial-progress-bar-stop-color {
+    stop-color: $vue-radial-progress-bar-stop-color;
+  }
+  
+  .vue-radial-progress-bar-circle {
+    stroke: $vue-radial-progress-bar-track-color;
+  }
+  
+  &.vue-radial-progress-bar-complete {
+    .vue-radial-progress-bar-start-color {
+      stop-color: $vue-radial-progress-bar-complete-start-color;
+    }
+
+    .vue-radial-progress-bar-stop-color {
+      stop-color: $vue-radial-progress-bar-complete-stop-color;
+    }
+
+    .vue-radial-progress-bar-circle {
+      stroke: $vue-radial-progress-bar-complete-track-color;
+    }
+  }
+  
+   &.vue-radial-progress-bar-over {
+    .vue-radial-progress-bar-start-color {
+      stop-color: $vue-radial-progress-bar-over-start-color;
+    }
+
+    .vue-radial-progress-bar-stop-color {
+      stop-color: $vue-radial-progress-bar-over-stop-color;
+    }
+
+    .vue-radial-progress-bar-circle {
+      stroke: $vue-radial-progress-bar-over-track-color;
+    }
+  }
+}

data/app/assets/stylesheets/codelation_ui/extended/slider.scss

@@ -1,5 +1,5 @@
-$vue-slider-track-color: #0366d6 !default;
-$vue-slider-tool-tip-bg-color: #0366d6 !default;
+$vue-slider-track-color: $default-ui-color !default;
+$vue-slider-tool-tip-bg-color: $default-ui-color !default;
 $vue-slider-tool-tip-text-color: #ffffff !default;
 
 .vue-slider-wrap {

data/app/assets/stylesheets/codelation_ui/extended/spinner.scss

@@ -0,0 +1,100 @@
+$swift-ease-out-duration: .4s !default;
+$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+
+$spinner-color: $default-ui-color !default;
+
+.vue-spinner {
+  display: inline-block;
+  position: relative;
+  pointer-events: none;
+  will-change: transform, opacity;
+
+  &.vue-indeterminate {
+    .vue-spinner-draw {
+      @include animation(spinner-rotate 1.9s linear infinite);
+      @include transform(rotate(0deg) translateZ(0));
+    }
+
+    .vue-spinner-path {
+      stroke-dasharray: 2, 200;
+      @include animation(spinner-dash 1.425s ease-in-out infinite);
+    }
+  }
+
+  &.vue-spinner-leave-active {
+    opacity: 0;
+    @include transform(scale(.8) translateZ(0));
+    @include transition($swift-ease-out);
+  }
+
+  &:not(.vue-indeterminate) {
+    &.vue-spinner-enter-active {
+      @include transition-duration(2s);
+
+      .vue-spinner-draw {
+        @include animation(spinner-initial-rotate 1.98s $swift-ease-out-timing-function forwards);
+      }
+    }
+  }
+}
+
+.vue-spinner-draw {
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  @include transform(rotate(270deg) translateZ(0));
+  @include transform-origin(center center);
+  will-change: transform, opacity;
+}
+
+.vue-spinner-path {
+  fill: none;
+  stroke: $spinner-color;
+  stroke-dashoffset: 0;
+  stroke-miterlimit: 10;
+  @include transition($swift-ease-out);
+}
+
+@keyframes spinner-rotate {
+  to {
+    @include transform(rotate(360deg) translateZ(0));
+  }
+}
+
+@keyframes spinner-initial-rotate {
+  0% {
+    opacity: 0;
+    @include transform(rotate(-90deg) translateZ(0));
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  100% {
+    @include transform(rotate(270deg) translateZ(0));
+  }
+}
+
+@keyframes spinner-dash {
+  0% {
+    stroke-dasharray: 2, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}

data/app/assets/stylesheets/codelation_ui/std.scss

@@ -1 +1 @@
-//@import "std/**/*";
+@import "std/**/*";

data/app/assets/stylesheets/codelation_ui/std/info.scss

@@ -0,0 +1,51 @@
+.vue-info {
+  display: inline-block;
+  position: relative;
+
+  .vue-info-hint {
+    @include align-items(center);
+    @include display(inline-flex);
+    @include justify-content(center);
+    background: rgba($black, 0.55);
+    border-radius: 100%;
+    color: $white;
+    cursor: pointer;
+    font-weight: normal;
+    height: 1.3em;
+    width: 1.3em;
+
+    &:hover ~ .vue-info-message {
+      visibility: visible;
+    }
+  }
+
+  .vue-info-message {
+    background-color: rgba($black, 0.6);
+    border-radius: 2px;
+    color: $white;
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 22px;
+    margin: 15px 10px 0 0;
+    padding: 0 8px;
+    position: absolute;
+    top: 10px;
+    visibility: hidden;
+    width: 200px;
+
+    &.left {
+      left: auto;
+      right: 10px;
+    }
+
+    &.top {
+      bottom: 30px;
+      top: auto;
+    }
+
+    &.bottom {
+      bottom: auto;
+      top: 10px;
+    }
+  }
+}

data/app/assets/stylesheets/codelation_ui/vue_transitions.scss

@@ -0,0 +1,94 @@
+//v-fade-out
+//v-fade-in
+//v-fade-in-out
+//v-appear
+//v-fade-up
+//v-bounce-out
+//v-bounce-in
+//v-bounce-in-out-out
+
+.v-fade-up-transition {
+  @include animation(v-fade-up .5s);
+}
+
+.v-fade-in-transition,
+.v-fade-out-transition,
+.v-appear-transition,
+.v-fade-in-out-transition{
+  @include transition(all, .3s);
+  opacity: 1;
+}
+
+.v-appear-enter {
+  @include transform(scale(.99));
+  opacity: 0;
+}
+
+.v-appear-leave {
+  @include transform(scale(.99));
+  opacity: 0;
+}
+
+.v-fade-in-enter,
+.v-fade-in-out-enter {
+  opacity: 0;
+}
+
+.v-fade-out-leave,
+.v-fade-in-out-leave {
+  opacity: 0;
+}
+
+.v-bounce-out-transition,
+.v-bounce-in-transition,
+.v-bounce-in-out-transition {
+  display: inline-block; /* otherwise scale animation won't work */
+}
+
+.v-bounce-out-leave,
+.v-bounce-in-out-enter {
+  @include animation(v-bounce-out .5s);
+}
+
+.v-bounce-in-enter,
+.v-bounce-in-out-enter {
+  @include animation(v-bounce-in .5s);
+}
+
+
+@keyframes v-bounce-out {
+  0% {
+    @include transform(scale(1));
+  }
+  50% {
+    @include transform(scale(1.3));
+  }
+  100% {
+    @include transform(scale(0));
+  }
+}
+
+@keyframes v-bounce-in {
+  0% {
+    @include transform(scale(0));
+  }
+  50% {
+    @include transform(scale(1.3));
+  }
+  100% {
+    @include transform(scale(1));
+  }
+}
+
+
+@keyframes v-fade-up {
+  from {
+    opacity: 0;
+    @include transform(translate3d(0, 20px, 0));
+  }
+
+  to {
+    opacity: 1;
+    @include transform(none);
+  }
+}

data/app/helpers/action_view/helpers/url_helper.rb

@@ -0,0 +1,22 @@
+module ActionView
+  module Helpers
+    module UrlHelper
+      def current_link_to(name = nil, options = nil, html_options = nil, &block)
+        html_options, options, name = options, name, block if block_given?
+        options ||= {}
+
+        html_options = convert_options_to_data_attributes(options, html_options)
+
+        url = url_for(options)
+
+        if current_page?(url)
+          html_options["class"] = "current " + (html_options["class"] || "")
+        end
+
+        html_options['href'] ||= url
+
+        content_tag(:a, name || url, html_options, &block)
+      end
+    end
+  end
+end

data/lib/generators/ui/component/USAGE

@@ -0,0 +1,22 @@
+Description:
+    If only providing the name, it will create a vue component in the
+    general component folder with all JS, CSS, and HTML boilerplate.
+
+    If providing a controller plus name like 'users/profile_component',  it
+    will put the component in the controller's view directory
+
+Example:
+    rails generate ui:component <name>
+
+    This will create:
+        app/assets/javascripts/application/components/<name>.js
+        app/assets/stylesheets/application/components/<name>.scss
+        app/views/vue_components/_<name>.html
+
+
+    rails generate ui:component <controller>/<name>
+
+    This will create:
+        app/assets/javascripts/application/views/<controller>/templates/<name>.js
+        app/assets/stylesheets/application/views/<controller>/templates/<name>.scss
+        app/views/<controller>/templates/_<name>.html

data/lib/generators/ui/component/component_generator.rb

@@ -0,0 +1,41 @@
+module Ui
+  class ComponentGenerator < Rails::Generators::NamedBase
+    source_root File.expand_path("../templates", __FILE__)
+
+    def create_component_files
+      if class_path.empty?
+        destination_js = "app/assets/javascripts/application/components"
+        destination_css = "app/assets/stylesheets/application/components"
+        destination_html = "app/views/vue_components"
+        template_js = "javascript.js.erb"
+        template_css = "stylesheet.scss.erb"
+        import_path = "vue_components"
+        @component_id = "v-comp-#{file_name}-template"
+        @component_class = "v-comp-#{file_name}"
+      else
+        src_folder = class_path.join("/").pluralize
+        destination_js = File.join("app/assets/javascripts/application/views", src_folder, "templates")
+        destination_css = File.join("app/assets/stylesheets/application/views", src_folder, "templates")
+        destination_html = File.join("app/views", src_folder, "templates")
+        template_js = "page_javascript.js.erb"
+        template_css = "page_stylesheet.scss.erb"
+        @page_name = src_folder
+        import_path = "#{src_folder}/templates"
+        @component_id = "v-#{@page_name}-#{file_name}-template"
+        @component_class = "v-#{@page_name}-#{file_name}"
+      end
+      template_html = "template.html.erb"
+
+      @component_name = file_name.camelize(:lower)
+
+
+      template template_js, File.join(destination_js, "#{file_name}.js")
+      template template_css, File.join(destination_css, "#{file_name}.scss")
+      template template_html, File.join(destination_html, "_#{file_name}.html")
+
+      puts
+      puts "\tAdd to your views with: <%= render \"#{import_path}/#{file_name}\" %>"
+      puts
+    end
+  end
+end