codelation_ui 1.0.1 → 1.0.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/codelation_ui/_base_resources/app.js +54 -5
  3. data/app/assets/javascripts/codelation_ui/base.js +1 -0
  4. data/app/assets/javascripts/codelation_ui/extended/checkmark.js +31 -0
  5. data/app/assets/javascripts/codelation_ui/extended/code.js +64 -0
  6. data/app/assets/javascripts/codelation_ui/extended/fail.js +31 -0
  7. data/app/assets/javascripts/codelation_ui/extended/radial_progress_bar.js +267 -0
  8. data/app/assets/javascripts/codelation_ui/extended/slider.js +636 -639
  9. data/app/assets/javascripts/codelation_ui/extended/spinner.js +103 -0
  10. data/app/assets/javascripts/codelation_ui/forms/components/input.js +417 -388
  11. data/app/assets/javascripts/codelation_ui/forms/interfaces/form.js +35 -30
  12. data/app/assets/javascripts/codelation_ui/std.js +3 -1
  13. data/app/assets/javascripts/codelation_ui/std/components/info.js +22 -0
  14. data/app/assets/javascripts/codelation_ui/std/components/transition.js +26 -0
  15. data/app/assets/javascripts/codelation_ui/std/computed_interfaces/mockAPI.js +17 -0
  16. data/app/assets/javascripts/codelation_ui/std/interfaces/array.js +28 -0
  17. data/app/assets/javascripts/codelation_ui/std/interfaces/content_formatters.js +37 -10
  18. data/app/assets/javascripts/codelation_ui/std/interfaces/date.js +8 -0
  19. data/app/assets/javascripts/codelation_ui/std/interfaces/number.js +20 -0
  20. data/app/assets/javascripts/codelation_ui/std/interfaces/rest_api.js +104 -0
  21. data/app/assets/javascripts/codelation_ui/std/interfaces/string.js +29 -0
  22. data/app/assets/javascripts/codelation_ui/vue.js +25 -8
  23. data/app/assets/javascripts/codelation_ui/vue_pages.js +35 -10
  24. data/app/assets/stylesheets/codelation_ui.scss +1 -3
  25. data/app/assets/stylesheets/codelation_ui/_base_resources/_turbolinks.scss +11 -0
  26. data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/button.scss +185 -33
  27. data/app/assets/stylesheets/codelation_ui/base.scss +3 -0
  28. data/app/assets/stylesheets/codelation_ui/colors.scss +2 -0
  29. data/app/assets/stylesheets/codelation_ui/extended/checkmark.scss +53 -0
  30. data/app/assets/stylesheets/codelation_ui/extended/code.scss +153 -0
  31. data/app/assets/stylesheets/codelation_ui/extended/fail.scss +50 -0
  32. data/app/assets/stylesheets/codelation_ui/extended/radial_progress_bar.scss +70 -0
  33. data/app/assets/stylesheets/codelation_ui/extended/slider.scss +2 -2
  34. data/app/assets/stylesheets/codelation_ui/extended/spinner.scss +100 -0
  35. data/app/assets/stylesheets/codelation_ui/std.scss +1 -1
  36. data/app/assets/stylesheets/codelation_ui/std/info.scss +51 -0
  37. data/app/assets/stylesheets/codelation_ui/vue_transitions.scss +94 -0
  38. data/app/helpers/action_view/helpers/url_helper.rb +22 -0
  39. data/lib/generators/ui/component/USAGE +22 -0
  40. data/lib/generators/ui/component/component_generator.rb +41 -0
  41. data/lib/generators/ui/component/templates/javascript.js.erb +20 -0
  42. data/lib/generators/ui/component/templates/page_javascript.js.erb +20 -0
  43. data/lib/generators/ui/component/templates/page_stylesheet.scss.erb +3 -0
  44. data/lib/generators/ui/component/templates/stylesheet.scss.erb +3 -0
  45. data/lib/generators/ui/component/templates/template.html.erb +5 -0
  46. data/lib/generators/ui/mixin/USAGE +8 -0
  47. data/lib/generators/ui/mixin/mixin_generator.rb +11 -0
  48. data/lib/generators/ui/mixin/templates/javascript.js.erb +8 -0
  49. data/lib/generators/ui/pages/USAGE +23 -0
  50. data/lib/generators/ui/pages/pages_generator.rb +48 -0
  51. data/lib/generators/ui/pages/templates/controller.rb +2 -0
  52. data/lib/generators/ui/pages/templates/javascript.js.erb +22 -0
  53. data/lib/generators/ui/pages/templates/stylesheet.scss.erb +3 -0
  54. data/lib/generators/ui/pages/templates/template.html.erb +3 -0
  55. data/vendor/assets/javascripts/highlight.pack.js +2 -0
  56. data/vendor/assets/javascripts/pluralize.js +1 -0
  57. data/vendor/assets/javascripts/vue.js +4 -10232
  58. metadata +107 -11
  59. data/app/assets/javascripts/codelation_ui/std/index.js +0 -2
@@ -0,0 +1,50 @@
1
+ $vue-fail-color: $red !default;
2
+ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
3
+
4
+ .vue-fail {
5
+ border-radius: 50%;
6
+ display: block;
7
+ stroke: #fff;
8
+ stroke-miterlimit: 10;
9
+ margin: 10% auto;
10
+ box-shadow: inset 0px 0px 0px $vue-fail-color;
11
+ @include animation(vue-fail-fill .4s ease-in-out .4s forwards, vue-fail-scale .3s ease-in-out .9s both);
12
+
13
+ .vue-fail-circle {
14
+ stroke-dasharray: 166;
15
+ stroke-dashoffset: 166;
16
+ stroke-miterlimit: 10;
17
+ stroke: $vue-fail-color;
18
+ fill: none;
19
+ @include animation(vue-fail-stroke .6s $curve forwards);
20
+ }
21
+
22
+ .vue-fail-check {
23
+ transform-origin: 50% 50%;
24
+ stroke-dasharray: 48;
25
+ stroke-dashoffset: 48;
26
+ @include animation(vue-fail-stroke .3s $curve .8s forwards);
27
+ }
28
+ }
29
+
30
+
31
+ @keyframes vue-fail-stroke {
32
+ 100% {
33
+ stroke-dashoffset: 0;
34
+ }
35
+ }
36
+
37
+ @keyframes vue-fail-scale {
38
+ 0%, 100% {
39
+ @include transform(none);
40
+ }
41
+ 50% {
42
+ @include transform(scale3d(1.1, 1.1, 1));
43
+ }
44
+ }
45
+
46
+ @keyframes vue-fail-fill {
47
+ 100% {
48
+ box-shadow: inset 0px 0px 0px 30px $vue-fail-color;
49
+ }
50
+ }
@@ -0,0 +1,70 @@
1
+ $vue-radial-progress-bar-color: $default-ui-color !default;
2
+ $vue-radial-progress-bar-start-color: $vue-radial-progress-bar-color !default;
3
+ $vue-radial-progress-bar-stop-color: $vue-radial-progress-bar-color !default;
4
+
5
+ $vue-radial-progress-bar-complete-color: $default-ui-color !default;
6
+ $vue-radial-progress-bar-complete-start-color: $vue-radial-progress-bar-complete-color !default;
7
+ $vue-radial-progress-bar-complete-stop-color: $vue-radial-progress-bar-complete-color !default;
8
+
9
+ $vue-radial-progress-bar-over-color: #ee3128 !default;
10
+ $vue-radial-progress-bar-over-start-color: $vue-radial-progress-bar-over-color !default;
11
+ $vue-radial-progress-bar-over-stop-color: $vue-radial-progress-bar-over-color !default;
12
+
13
+ $vue-radial-progress-bar-track-color: #ececec !default;
14
+ $vue-radial-progress-bar-complete-track-color: #ececec !default;
15
+ $vue-radial-progress-bar-over-track-color: #ececec !default;
16
+
17
+ .vue-radial-progress-bar-container {
18
+ position: relative;
19
+
20
+ .vue-radial-progress-bar-inner {
21
+ position: absolute;
22
+ top: 0; right: 0; bottom: 0; left: 0;
23
+ border-radius: 50%;
24
+ margin: 0 auto;
25
+ @include display(flex);
26
+ @include flex-direction(column);
27
+ @include align-items(center);
28
+ @include justify-content(center);
29
+ }
30
+
31
+ .vue-radial-progress-bar-start-color {
32
+ stop-color: $vue-radial-progress-bar-start-color;
33
+ }
34
+
35
+ .vue-radial-progress-bar-stop-color {
36
+ stop-color: $vue-radial-progress-bar-stop-color;
37
+ }
38
+
39
+ .vue-radial-progress-bar-circle {
40
+ stroke: $vue-radial-progress-bar-track-color;
41
+ }
42
+
43
+ &.vue-radial-progress-bar-complete {
44
+ .vue-radial-progress-bar-start-color {
45
+ stop-color: $vue-radial-progress-bar-complete-start-color;
46
+ }
47
+
48
+ .vue-radial-progress-bar-stop-color {
49
+ stop-color: $vue-radial-progress-bar-complete-stop-color;
50
+ }
51
+
52
+ .vue-radial-progress-bar-circle {
53
+ stroke: $vue-radial-progress-bar-complete-track-color;
54
+ }
55
+ }
56
+
57
+ &.vue-radial-progress-bar-over {
58
+ .vue-radial-progress-bar-start-color {
59
+ stop-color: $vue-radial-progress-bar-over-start-color;
60
+ }
61
+
62
+ .vue-radial-progress-bar-stop-color {
63
+ stop-color: $vue-radial-progress-bar-over-stop-color;
64
+ }
65
+
66
+ .vue-radial-progress-bar-circle {
67
+ stroke: $vue-radial-progress-bar-over-track-color;
68
+ }
69
+ }
70
+ }
@@ -1,5 +1,5 @@
1
- $vue-slider-track-color: #0366d6 !default;
2
- $vue-slider-tool-tip-bg-color: #0366d6 !default;
1
+ $vue-slider-track-color: $default-ui-color !default;
2
+ $vue-slider-tool-tip-bg-color: $default-ui-color !default;
3
3
  $vue-slider-tool-tip-text-color: #ffffff !default;
4
4
 
5
5
  .vue-slider-wrap {
@@ -0,0 +1,100 @@
1
+ $swift-ease-out-duration: .4s !default;
2
+ $swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
3
+ $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
4
+
5
+ $spinner-color: $default-ui-color !default;
6
+
7
+ .vue-spinner {
8
+ display: inline-block;
9
+ position: relative;
10
+ pointer-events: none;
11
+ will-change: transform, opacity;
12
+
13
+ &.vue-indeterminate {
14
+ .vue-spinner-draw {
15
+ @include animation(spinner-rotate 1.9s linear infinite);
16
+ @include transform(rotate(0deg) translateZ(0));
17
+ }
18
+
19
+ .vue-spinner-path {
20
+ stroke-dasharray: 2, 200;
21
+ @include animation(spinner-dash 1.425s ease-in-out infinite);
22
+ }
23
+ }
24
+
25
+ &.vue-spinner-leave-active {
26
+ opacity: 0;
27
+ @include transform(scale(.8) translateZ(0));
28
+ @include transition($swift-ease-out);
29
+ }
30
+
31
+ &:not(.vue-indeterminate) {
32
+ &.vue-spinner-enter-active {
33
+ @include transition-duration(2s);
34
+
35
+ .vue-spinner-draw {
36
+ @include animation(spinner-initial-rotate 1.98s $swift-ease-out-timing-function forwards);
37
+ }
38
+ }
39
+ }
40
+ }
41
+
42
+ .vue-spinner-draw {
43
+ width: 100%;
44
+ height: 100%;
45
+ margin: auto;
46
+ position: absolute;
47
+ top: 0;
48
+ right: 0;
49
+ bottom: 0;
50
+ left: 0;
51
+ @include transform(rotate(270deg) translateZ(0));
52
+ @include transform-origin(center center);
53
+ will-change: transform, opacity;
54
+ }
55
+
56
+ .vue-spinner-path {
57
+ fill: none;
58
+ stroke: $spinner-color;
59
+ stroke-dashoffset: 0;
60
+ stroke-miterlimit: 10;
61
+ @include transition($swift-ease-out);
62
+ }
63
+
64
+ @keyframes spinner-rotate {
65
+ to {
66
+ @include transform(rotate(360deg) translateZ(0));
67
+ }
68
+ }
69
+
70
+ @keyframes spinner-initial-rotate {
71
+ 0% {
72
+ opacity: 0;
73
+ @include transform(rotate(-90deg) translateZ(0));
74
+ }
75
+
76
+ 20% {
77
+ opacity: 1;
78
+ }
79
+
80
+ 100% {
81
+ @include transform(rotate(270deg) translateZ(0));
82
+ }
83
+ }
84
+
85
+ @keyframes spinner-dash {
86
+ 0% {
87
+ stroke-dasharray: 2, 200;
88
+ stroke-dashoffset: 0;
89
+ }
90
+
91
+ 50% {
92
+ stroke-dasharray: 89, 200;
93
+ stroke-dashoffset: -35px;
94
+ }
95
+
96
+ 100% {
97
+ stroke-dasharray: 89, 200;
98
+ stroke-dashoffset: -124px;
99
+ }
100
+ }
@@ -1 +1 @@
1
- //@import "std/**/*";
1
+ @import "std/**/*";
@@ -0,0 +1,51 @@
1
+ .vue-info {
2
+ display: inline-block;
3
+ position: relative;
4
+
5
+ .vue-info-hint {
6
+ @include align-items(center);
7
+ @include display(inline-flex);
8
+ @include justify-content(center);
9
+ background: rgba($black, 0.55);
10
+ border-radius: 100%;
11
+ color: $white;
12
+ cursor: pointer;
13
+ font-weight: normal;
14
+ height: 1.3em;
15
+ width: 1.3em;
16
+
17
+ &:hover ~ .vue-info-message {
18
+ visibility: visible;
19
+ }
20
+ }
21
+
22
+ .vue-info-message {
23
+ background-color: rgba($black, 0.6);
24
+ border-radius: 2px;
25
+ color: $white;
26
+ font-size: 13px;
27
+ font-weight: normal;
28
+ line-height: 22px;
29
+ margin: 15px 10px 0 0;
30
+ padding: 0 8px;
31
+ position: absolute;
32
+ top: 10px;
33
+ visibility: hidden;
34
+ width: 200px;
35
+
36
+ &.left {
37
+ left: auto;
38
+ right: 10px;
39
+ }
40
+
41
+ &.top {
42
+ bottom: 30px;
43
+ top: auto;
44
+ }
45
+
46
+ &.bottom {
47
+ bottom: auto;
48
+ top: 10px;
49
+ }
50
+ }
51
+ }
@@ -0,0 +1,94 @@
1
+ //v-fade-out
2
+ //v-fade-in
3
+ //v-fade-in-out
4
+ //v-appear
5
+ //v-fade-up
6
+ //v-bounce-out
7
+ //v-bounce-in
8
+ //v-bounce-in-out-out
9
+
10
+ .v-fade-up-transition {
11
+ @include animation(v-fade-up .5s);
12
+ }
13
+
14
+ .v-fade-in-transition,
15
+ .v-fade-out-transition,
16
+ .v-appear-transition,
17
+ .v-fade-in-out-transition{
18
+ @include transition(all, .3s);
19
+ opacity: 1;
20
+ }
21
+
22
+ .v-appear-enter {
23
+ @include transform(scale(.99));
24
+ opacity: 0;
25
+ }
26
+
27
+ .v-appear-leave {
28
+ @include transform(scale(.99));
29
+ opacity: 0;
30
+ }
31
+
32
+ .v-fade-in-enter,
33
+ .v-fade-in-out-enter {
34
+ opacity: 0;
35
+ }
36
+
37
+ .v-fade-out-leave,
38
+ .v-fade-in-out-leave {
39
+ opacity: 0;
40
+ }
41
+
42
+ .v-bounce-out-transition,
43
+ .v-bounce-in-transition,
44
+ .v-bounce-in-out-transition {
45
+ display: inline-block; /* otherwise scale animation won't work */
46
+ }
47
+
48
+ .v-bounce-out-leave,
49
+ .v-bounce-in-out-enter {
50
+ @include animation(v-bounce-out .5s);
51
+ }
52
+
53
+ .v-bounce-in-enter,
54
+ .v-bounce-in-out-enter {
55
+ @include animation(v-bounce-in .5s);
56
+ }
57
+
58
+
59
+ @keyframes v-bounce-out {
60
+ 0% {
61
+ @include transform(scale(1));
62
+ }
63
+ 50% {
64
+ @include transform(scale(1.3));
65
+ }
66
+ 100% {
67
+ @include transform(scale(0));
68
+ }
69
+ }
70
+
71
+ @keyframes v-bounce-in {
72
+ 0% {
73
+ @include transform(scale(0));
74
+ }
75
+ 50% {
76
+ @include transform(scale(1.3));
77
+ }
78
+ 100% {
79
+ @include transform(scale(1));
80
+ }
81
+ }
82
+
83
+
84
+ @keyframes v-fade-up {
85
+ from {
86
+ opacity: 0;
87
+ @include transform(translate3d(0, 20px, 0));
88
+ }
89
+
90
+ to {
91
+ opacity: 1;
92
+ @include transform(none);
93
+ }
94
+ }
@@ -0,0 +1,22 @@
1
+ module ActionView
2
+ module Helpers
3
+ module UrlHelper
4
+ def current_link_to(name = nil, options = nil, html_options = nil, &block)
5
+ html_options, options, name = options, name, block if block_given?
6
+ options ||= {}
7
+
8
+ html_options = convert_options_to_data_attributes(options, html_options)
9
+
10
+ url = url_for(options)
11
+
12
+ if current_page?(url)
13
+ html_options["class"] = "current " + (html_options["class"] || "")
14
+ end
15
+
16
+ html_options['href'] ||= url
17
+
18
+ content_tag(:a, name || url, html_options, &block)
19
+ end
20
+ end
21
+ end
22
+ end
@@ -0,0 +1,22 @@
1
+ Description:
2
+ If only providing the name, it will create a vue component in the
3
+ general component folder with all JS, CSS, and HTML boilerplate.
4
+
5
+ If providing a controller plus name like 'users/profile_component', it
6
+ will put the component in the controller's view directory
7
+
8
+ Example:
9
+ rails generate ui:component <name>
10
+
11
+ This will create:
12
+ app/assets/javascripts/application/components/<name>.js
13
+ app/assets/stylesheets/application/components/<name>.scss
14
+ app/views/vue_components/_<name>.html
15
+
16
+
17
+ rails generate ui:component <controller>/<name>
18
+
19
+ This will create:
20
+ app/assets/javascripts/application/views/<controller>/templates/<name>.js
21
+ app/assets/stylesheets/application/views/<controller>/templates/<name>.scss
22
+ app/views/<controller>/templates/_<name>.html
@@ -0,0 +1,41 @@
1
+ module Ui
2
+ class ComponentGenerator < Rails::Generators::NamedBase
3
+ source_root File.expand_path("../templates", __FILE__)
4
+
5
+ def create_component_files
6
+ if class_path.empty?
7
+ destination_js = "app/assets/javascripts/application/components"
8
+ destination_css = "app/assets/stylesheets/application/components"
9
+ destination_html = "app/views/vue_components"
10
+ template_js = "javascript.js.erb"
11
+ template_css = "stylesheet.scss.erb"
12
+ import_path = "vue_components"
13
+ @component_id = "v-comp-#{file_name}-template"
14
+ @component_class = "v-comp-#{file_name}"
15
+ else
16
+ src_folder = class_path.join("/").pluralize
17
+ destination_js = File.join("app/assets/javascripts/application/views", src_folder, "templates")
18
+ destination_css = File.join("app/assets/stylesheets/application/views", src_folder, "templates")
19
+ destination_html = File.join("app/views", src_folder, "templates")
20
+ template_js = "page_javascript.js.erb"
21
+ template_css = "page_stylesheet.scss.erb"
22
+ @page_name = src_folder
23
+ import_path = "#{src_folder}/templates"
24
+ @component_id = "v-#{@page_name}-#{file_name}-template"
25
+ @component_class = "v-#{@page_name}-#{file_name}"
26
+ end
27
+ template_html = "template.html.erb"
28
+
29
+ @component_name = file_name.camelize(:lower)
30
+
31
+
32
+ template template_js, File.join(destination_js, "#{file_name}.js")
33
+ template template_css, File.join(destination_css, "#{file_name}.scss")
34
+ template template_html, File.join(destination_html, "_#{file_name}.html")
35
+
36
+ puts
37
+ puts "\tAdd to your views with: <%= render \"#{import_path}/#{file_name}\" %>"
38
+ puts
39
+ end
40
+ end
41
+ end