tao_form 0.1.9 → 0.1.10

data/lib/assets/stylesheets/tao/form/mobile/fields/moment_picker/segments/minute_segment.scss

@@ -1,7 +1,7 @@
 @import 'tao/form/mobile/globals';
 @import 'tao/form/shared/fields/moment_picker/segments/minute_segment';
 
-tao-moment-picker-minute-segment {
+.tao-moment-picker-minute-segment {
   .minutes {
     margin: 1rem 0 0 0;
 

data/lib/assets/stylesheets/tao/form/mobile/fields/moment_picker/segments/month_segment.scss

@@ -1,7 +1,7 @@
 @import 'tao/form/mobile/globals';
 @import 'tao/form/shared/fields/moment_picker/segments/month_segment';
 
-tao-moment-picker-month-segment {
+.tao-moment-picker-month-segment {
   .month-list {
     margin: 1rem 0 0 0;
 

data/lib/assets/stylesheets/tao/form/mobile/fields/moment_picker/segments/year_segment.scss

@@ -1,7 +1,7 @@
 @import 'tao/form/mobile/globals';
 @import 'tao/form/shared/fields/moment_picker/segments/year_segment';
 
-tao-moment-picker-year-segment {
+.tao-moment-picker-year-segment {
   .year-list {
     margin: 1rem 0 0 0;
 

data/lib/assets/stylesheets/tao/form/mobile/fields/select/index.scss

@@ -3,7 +3,7 @@
 
 @import 'tao/form/mobile/globals';
 
-tao-select {
+.tao-select {
   display: inline-block;
 
   .select-result-delegate {

data/lib/assets/stylesheets/tao/form/mobile/fields/select/list.scss

@@ -1,7 +1,7 @@
 @import 'tao/form/mobile/globals';
 @import 'tao/form/shared/fields/select/list';
 
-tao-select-list {
+.tao-select-list {
   display: block;
 
   &[empty] .list-wrapper {

data/lib/assets/stylesheets/tao/form/mobile/fields/select/multiple_result.scss

@@ -1,7 +1,7 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/select/multiple_result';
 
-tao-multiple-select-result {
+.tao-multiple-select-result {
   display: none;
   padding: 0.75rem 0.75rem 0.25rem 0.75rem;
   border-bottom: 1px solid $border-color;

data/lib/assets/stylesheets/tao/form/mobile/fields/select/result.scss

@@ -1,6 +1,6 @@
 @import 'tao/form/mobile/globals';
 
-tao-select-result {
+.tao-select-result {
   select {
     display: none;
   }

data/lib/assets/stylesheets/tao/form/mobile/inputs/boolean.scss

@@ -1,7 +1,7 @@
 @import 'tao/form/mobile/globals';
 @import 'tao/form/shared/inputs/boolean';
 
-tao-form .boolean-field {
+.tao-form .boolean-field {
   justify-content: flex-end;
   padding: 0 $form-field-padding-h;
 }

data/lib/assets/stylesheets/tao/form/mobile/inputs/group.scss

@@ -1,6 +1,6 @@
 @import 'tao/form/mobile/globals';
 @import 'tao/form/shared/inputs/group';
 
-tao-form .group-field {
+.tao-form .group-field {
   justify-content: flex-end;
 }

data/lib/assets/stylesheets/tao/form/mobile/layout.scss

@@ -67,8 +67,8 @@
 
         & > textarea,
         .text-field input,
-        tao-select .select-result-delegate,
-        .moment-picker tao-moment-picker-result {
+        .tao-select .select-result-delegate,
+        .tao-moment-picker .tao-moment-picker-result {
           text-align: right;
         }
 

data/lib/assets/stylesheets/tao/form/reset.scss

@@ -6,6 +6,7 @@
 
 textarea,
 input[type=text],
+input[type=search],
 input[type=tel],
 input[type=email],
 input[type=number],

data/lib/assets/stylesheets/tao/form/shared/fields/_checkbox.scss

@@ -1,4 +1,4 @@
-tao-check-box {
+.tao-check-box {
   display: inline-block;
   vertical-align: middle;
   user-select: none;

data/lib/assets/stylesheets/tao/form/shared/fields/_radio.scss

@@ -1,4 +1,4 @@
-tao-radio-button {
+.tao-radio-button {
   display: inline-block;
   vertical-align: middle;
   user-select: none;

data/lib/assets/stylesheets/tao/form/shared/fields/_switch.scss

@@ -2,7 +2,7 @@ $switch-width: 3.75rem;
 $switch-height: 1.75rem;
 $switch-slot-height: 1.375rem;
 
-tao-switch {
+.tao-switch {
   display: inline-block;
 
   .switch-wrapper {

data/lib/assets/stylesheets/tao/form/shared/fields/moment_picker/_result.scss

@@ -1,4 +1,4 @@
-tao-moment-picker-result {
+.tao-moment-picker-result {
   display: flex;
   align-items: center;
 

data/lib/assets/stylesheets/tao/form/shared/fields/moment_picker/_segment_list.scss

@@ -1,4 +1,4 @@
-tao-moment-picker-segment-list {
+.tao-moment-picker-segment-list {
 
   .segment-labels {
     padding: $moment-picker-segment-labels-padding;
@@ -51,7 +51,7 @@ tao-moment-picker-segment-list {
   }
 
   .segments {
-    .segment {
+    .tao-moment-picker-segment {
       display: none;
       justify-content: center;
       align-items: center;

data/lib/assets/stylesheets/tao/form/shared/fields/moment_picker/segments/_date_segment.scss

@@ -1,4 +1,4 @@
-tao-moment-picker-date-segment {
+.tao-moment-picker-date-segment {
   .calendar {
     .weekdays {
       display: flex;
@@ -33,7 +33,7 @@ tao-moment-picker-date-segment {
         outline: none;
 
         &.outside {
-          color: $lightest-grey-color;
+          color: $lighter-grey-color;
         }
 
         &.today {
@@ -44,6 +44,12 @@ tao-moment-picker-date-segment {
           background: $green-bg-color !important;
           color: $green-color !important;
         }
+
+        &.disabled {
+          color: $lightest-grey-color;
+          background: none !important;
+          cursor: default;
+        }
       }
     }
   }

data/lib/assets/stylesheets/tao/form/shared/fields/moment_picker/segments/_hour_segment.scss

@@ -1,4 +1,4 @@
-tao-moment-picker-hour-segment {
+.tao-moment-picker-hour-segment {
   .hours {
     .morning-hours,
     .afternoon-hours {

data/lib/assets/stylesheets/tao/form/shared/fields/moment_picker/segments/_minute_segment.scss

@@ -1,4 +1,4 @@
-tao-moment-picker-minute-segment {
+.tao-moment-picker-minute-segment {
   .minutes {
     display: flex;
     justify-content: center;

data/lib/assets/stylesheets/tao/form/shared/fields/moment_picker/segments/_month_segment.scss

@@ -1,4 +1,4 @@
-tao-moment-picker-month-segment {
+.tao-moment-picker-month-segment {
   .month-list {
     display: flex;
     justify-content: center;

data/lib/assets/stylesheets/tao/form/shared/fields/moment_picker/segments/_year_segment.scss

@@ -1,4 +1,4 @@
-tao-moment-picker-year-segment {
+.tao-moment-picker-year-segment {
   .year-list {
     display: flex;
     justify-content: center;

data/lib/assets/stylesheets/tao/form/shared/fields/select/_list.scss

@@ -1,4 +1,4 @@
-tao-select-list {
+.tao-select-list {
   background: $white-color;
 
   .search-input {
@@ -48,7 +48,7 @@ tao-select-list {
       padding: $select-option-padding;
       font-size: $select-option-font-size;
       line-height: $select-option-line-height;
-      border-bottom: 1px solid $border-color;
+      border-bottom: 1px solid $light-border-color;
       justify-content: space-between;
       align-items: center;
       cursor: pointer;
@@ -61,6 +61,10 @@ tao-select-list {
         border-bottom: none;
       }
 
+      &.selected .name {
+        color: $ui-color;
+      }
+
       .hint {
         font-size: $font-size-xs;
         color: $lightest-grey-color;

data/lib/assets/stylesheets/tao/form/shared/fields/select/_multiple_result.scss

@@ -1,4 +1,4 @@
-tao-multiple-select-result {
+.tao-multiple-select-result {
   display: flex;
   align-items: flex-start;
   align-content: flex-start;

data/lib/assets/stylesheets/tao/form/shared/inputs/_boolean.scss

@@ -1,4 +1,4 @@
-tao-form .boolean-field {
+.tao-form .boolean-field {
   height: $form-field-height;
   display: flex;
   align-items: center;

data/lib/assets/stylesheets/tao/form/shared/inputs/_group.scss

@@ -1,4 +1,4 @@
-tao-form .group-field {
+.tao-form .group-field {
   display: flex;
   align-items: flex-start;
   align-content: flex-start;

data/lib/assets/stylesheets/tao/form/shared/inputs/_text.scss

@@ -1,4 +1,4 @@
-tao-form .text-field {
+.tao-form .text-field {
   position: relative;
 
   .prefix, .suffix {
@@ -24,10 +24,10 @@ tao-form .text-field {
   }
 
   &.text-field-with-prefix .input-field {
-    padding-left: $form-field-height;
+    padding-left: $form-field-line-height + $form-field-padding-v * 2;
   }
 
   &.text-field-with-suffix .input-field {
-    padding-right: $form-field-height;
+    padding-left: $form-field-line-height + $form-field-padding-v * 2;
   }
 }

data/lib/tao_form/components.rb

@@ -8,3 +8,4 @@ require 'tao_form/components/date_picker_component'
 require 'tao_form/components/time_picker_component'
 require 'tao_form/components/datetime_picker_component'
 require 'tao_form/components/month_picker_component'
+require 'tao_form/components/date_range_picker_component'

data/lib/tao_form/components/check_box_component.rb

@@ -34,6 +34,10 @@ module TaoForm
 
       private
 
+      def default_options
+        {class: 'tao-check-box'}
+      end
+
       def init_field_options
         @field_options = {
           disabled: disabled

data/lib/tao_form/components/date_picker_component.rb

@@ -20,6 +20,12 @@ module TaoForm
         :date_picker
       end
 
+      private
+
+      def default_options
+        merge_options(super, {class: 'tao-date-picker'})
+      end
+
     end
   end
 end

data/lib/tao_form/components/date_range_picker_component.rb

@@ -0,0 +1,64 @@
+module TaoForm
+  module Components
+    class DateRangePickerComponent < FieldComponent
+
+      attr_reader :disabled, :value, :date_picker_options
+
+      def initialize view, builder, attribute_name, options = {}
+        super view, builder, attribute_name, options
+        @value = @options.delete(:value)
+        @disabled = @options[:disabled].presence || false
+
+        init_date_picker_options
+      end
+
+      def render &block
+        if block_given?
+          super
+        else
+          super {
+            builder.hidden_field attribute_name, field_options
+          }
+        end
+      end
+
+      def render_date_picker name
+        opts = merge_options date_picker_options, {
+          class: "#{name}-date-picker",
+          placeholder: t("#{name}_placeholder")
+        }
+        view.tao_date_picker opts do
+          view.date_field_tag nil, nil, class: "#{name}-date-field", disabled: disabled
+        end
+      end
+
+      def self.component_name
+        :date_range_picker
+      end
+
+      private
+
+      def init_date_picker_options
+        @date_picker_options = {
+          placeholder: options.delete(:date_placeholder),
+          disabled: disabled
+        }
+
+        if options.key?(:date_icon)
+          @date_picker_options[:date_icon] = options.delete(:date_icon)
+        end
+      end
+
+      def default_options
+        {class: 'tao-date-range-picker'}
+      end
+
+      def field_options
+        opts = {disabled: disabled}
+        opts[:value] = value if value.present?
+        opts
+      end
+
+    end
+  end
+end

data/lib/tao_form/components/datetime_picker_component.rb

@@ -18,7 +18,7 @@ module TaoForm
           super
         else
           super {
-            builder.send :datetime_field, attribute_name, {disabled: disabled, value: value}
+            builder.send :datetime_field, attribute_name, field_options
           }
         end
       end
@@ -71,6 +71,12 @@ module TaoForm
         {class: 'tao-datetime-picker'}
       end
 
+      def field_options
+        opts = {disabled: disabled}
+        opts[:value] = value if value.present?
+        opts
+      end
+
     end
   end
 end

data/lib/tao_form/components/form_component.rb

@@ -4,10 +4,10 @@ module TaoForm
 
       attr_reader :record, :html_options
 
-      def initialize view, record, options
+      def initialize view, record, options = {}
         super view, options
         @record = record
-        @html_options = transform_html_options(@options.delete(:html) || {}, default_html_options)
+        @html_options = transform_html_options(default_html_options, @options.delete(:html) || {})
       end
 
       def render &block

data/lib/tao_form/components/moment_picker/base.rb

@@ -7,11 +7,12 @@ module TaoForm
     module MomentPicker
       class Base < TaoForm::Components::FieldComponent
 
-        attr_reader :block_for_render, :result_options
+        attr_reader :block_for_render, :result_options, :list_options
 
         def initialize view, builder = nil, attribute_name = nil, options = {}
           super view, builder, attribute_name, options
           init_result_options
+          init_list_options
         end
 
 
@@ -39,8 +40,7 @@ module TaoForm
         end
 
         def render_segment_list
-          view.tao_moment_picker_segment_list segments: segments,
-            default_segment: default_segment
+          view.tao_moment_picker_segment_list list_options
         end
 
         def placeholder
@@ -59,8 +59,17 @@ module TaoForm
           }
         end
 
+        def init_list_options
+          @list_options = {
+            segments: segments,
+            default_segment: default_segment,
+            disable_before: options.delete(:disable_before),
+            disable_after: options.delete(:disable_after)
+          }
+        end
+
         def default_options
-          {icon: :calendar, class: 'moment-picker'}
+          {icon: :calendar, class: 'tao-moment-picker'}
         end
 
       end