fron-ui 1.0.0rc2

data/opal/fron-ui/components/icon.rb

@@ -0,0 +1,29 @@
+module UI
+  # Simple Icon component
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Icon < UI::Base
+    tag 'ui-icon'
+
+    style justifyContent: :center,
+          display: 'inline-flex',
+          alignItems: :center,
+          fontWeight: :normal,
+          '&:not([clickable])' => { pointerEvents: :none },
+          '&[clickable]' => { cursor: :pointer,
+                              '&:hover' => { color: -> { colors.focus } } }
+
+    # Sets the glyph
+    #
+    # @param value [String] The glyph
+    def glyph=(value)
+      self[:glyph] = value
+      self[:class] = "ion-#{value}"
+    end
+
+    def glyph
+      self[:glyph]
+    end
+  end
+end

data/opal/fron-ui/components/image.rb

@@ -0,0 +1,77 @@
+require 'fron-ui/components/loader'
+
+module UI
+  # Component for displaying an image, with
+  # a transition after it loads.
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Image < Fron::Component
+    tag 'ui-image'
+
+    component :img, :img
+    component :loader, UI::Loader
+
+    style borderRadius: -> { (theme.border_radius * 2).em },
+          background: -> { dampen colors.background, 0.05 },
+          display: 'inline-block',
+          position: :relative,
+          'ui-loader' => { color: -> { dampen colors.background, 0.2 },
+                           position: :absolute,
+                           bottom: 0,
+                           right: 0,
+                           left: 0,
+                           top: 0 },
+          img: { transition: 'opacity 320ms',
+                 borderRadius: :inherit,
+                 height: :inherit,
+                 width: :inherit,
+                 opacity: 0,
+                 '&.loaded' => { opacity: 1 } }
+
+    # Initializes the component
+    # and listens on the load event
+    # because it doesn't bubble.
+    def initialize
+      super
+      @img.on(:load) { loaded }
+    end
+
+    # Adds the loaded class
+    def loaded
+      @img.add_class :loaded
+      @loader.loading = false
+    end
+
+    # Sets the width of the image
+    #
+    # @param value [Numeric] The width
+    def width=(value)
+      @style.width = value
+    end
+
+    # Sets the height of the image
+    #
+    # @param value [Numeric] The height
+    def height=(value)
+      @style.height = value
+    end
+
+    # Returns the src attribute of the image
+    #
+    # @return [String] The attribute
+    def src
+      @img[:src]
+    end
+
+    # Sets the src of the image
+    #
+    # @param value [String] The URL
+    def src=(value)
+      return if !value || @img[:src] == value
+      @img.remove_class :loaded
+      @loader.loading = true
+      timeout(320) { @img[:src] = value }
+    end
+  end
+end

data/opal/fron-ui/components/input.rb

@@ -0,0 +1,30 @@
+module UI
+  # Input component, basically the input element wrapped
+  # and styled.
+  #
+  # @author Gusztáv Szikszai
+  # @since  0.1.0
+  class Input < Base
+    tag 'input'
+
+    defaults type: 'text'
+
+    attribute_accessor :placeholder
+    attribute_accessor :readonly, default: false
+
+    style borderRadius: -> { theme.border_radius.em },
+          color: -> { readable_color(colors.input) },
+          padding: -> { "0 #{theme.spacing.em}" },
+          fontFamily: -> { theme.font_family },
+          lineHeight: -> { theme.size.em },
+          background: -> { colors.input },
+          height: -> { theme.size.em },
+          fontSize: :inherit,
+          border: 0,
+          '&:focus' => {
+            boxShadow: -> { theme.focus_box_shadow.call },
+            borderColor: :transparent,
+            outline: :none
+          }
+  end
+end

data/opal/fron-ui/components/label.rb

@@ -0,0 +1,9 @@
+module UI
+  # Simple label component
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Label < UI::Base
+    tag 'ui-label'
+  end
+end

data/opal/fron-ui/components/list.rb

@@ -0,0 +1,34 @@
+module UI
+  # List component
+  #
+  # Features:
+  # * Empty message display in an :after element
+  # * Striped backgrounds for items
+  # * Overflow auto
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class List < Collection
+    tag 'ui-list'
+
+    style overflow: :auto,
+          display: :block,
+          '> *' => { display: :block,
+                     '& + *' => { borderTop: -> { "1px solid #{dampen colors.background, 0.025}" } } },
+          '&:empty' => { padding: -> { theme.spacing.em },
+                         justifyContent: :center,
+                         alignItems: :center,
+                         textAlign: :center,
+                         display: :flex },
+          '&:empty:after' => { content: 'attr(empty_message)',
+                               fontSize: 2.em,
+                               opacity: 0.25 }
+
+    # Sets the flex value
+    #
+    # @param value [Numeric] The value
+    def flex=(value)
+      @style.flex = value
+    end
+  end
+end

data/opal/fron-ui/components/loader.rb

@@ -0,0 +1,63 @@
+# rubocop:disable DoubleNegation
+
+module UI
+  # Loader component
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Loader < Base
+    tag 'ui-loader'
+
+    component :div, 'ui-loader-div'
+
+    keyframes 'ui-loader', '0%' =>   { transform: 'rotate(0deg)' },
+                           '50%' =>  { transform: 'rotate(179.9deg)' },
+                           '100%' => { transform: 'rotate(359.9deg)' }
+
+    style transition: 'opacity 320ms',
+          justifyContent: :center,
+          alignItems: :center,
+          minHeight: 2.em,
+          minWidth: 2.em,
+          display: :flex,
+          color: -> { colors.primary },
+          opacity: 0,
+          pointerEvents: :none,
+          '&.loading' => {
+            opacity: 1
+          },
+          'ui-loader-div' => {
+            animation: 'ui-loader 1.2s infinite linear',
+            border: '0.15em solid currentColor',
+            borderTop: '0.15em solid transparent',
+            borderBottom: '0.15em solid transparent',
+            display: :flex,
+            justifyContent: :center,
+            alignItems: :center,
+            borderRadius: '50%',
+            height: 2.em,
+            width: 2.em,
+            '&:before' => {
+              content: '""',
+              border: '0.15em solid currentColor',
+              borderRadius: '50%',
+              height: 1.em,
+              width: 1.em
+            }
+          }
+
+    # Sets the loading flag
+    #
+    # @param value [Boolean] The value
+    def loading=(value)
+      toggle_class :loading, !!value
+    end
+
+    # Returns the loading flag
+    #
+    # @return [Boolean] The value
+    def loading
+      has_class(:loading)
+    end
+  end
+end

data/opal/fron-ui/components/notifications.rb

@@ -0,0 +1,73 @@
+module UI
+  # Component for displaying notifications.
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Notifications < Base
+    # Notification component-
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    class Notification < Base
+      include UI::Behaviors::Transition
+
+      tag 'ui-notification'
+
+      style background: -> { rgba colors.primary, 0.85 },
+            borderRadius: -> { theme.border_radius.em },
+            color: -> { readable_color colors.primary },
+            fontSize: 1.2.em,
+            fontWeight: 600,
+            display: :block,
+            lineHeight: 1,
+            span: {
+              display: :block,
+              padding: -> { theme.spacing.em },
+              paddingBottom: -> { (theme.spacing * 1.2).em }
+            }
+
+      component :span, :span
+
+      transition :show, duration: '500ms',
+                        frames: { '0%' =>   { opacity: 0 },
+                                  '100%' => { opacity: 1 } },
+                        callback: :hide
+
+      transition :hide, duration: '500ms',
+                        delay: '3s',
+                        frames: { '0%' => { opacity: 1 },
+                                  '100%' => { opacity: 0 } },
+                        callback: :remove!
+
+      # Initializes the component, starting
+      # the show transition.
+      def initialize
+        super
+        transition! :show
+      end
+
+      # Hides the component with the hide transition.
+      def hide
+        transition! :hide
+      end
+    end
+
+    tag 'ui-notifications'
+
+    style position: :absolute,
+          bottom: 1.5.em,
+          left: 1.5.em,
+          '> * + *' => { marginTop: -> { (theme.spacing / 1.5).em } }
+
+    # Pushes a new notification with the given
+    # message into the queue.
+    #
+    # @param message [String] The message
+    def push(message)
+      noti = Notification.new
+      noti.span.text = message
+      noti >> self
+      noti
+    end
+  end
+end

data/opal/fron-ui/components/number.rb

@@ -0,0 +1,202 @@
+require 'fron/utils/drag'
+
+module UI
+  # Range input element. This element is editable just like a normal
+  # input element can, the difference is that this element is draggable.
+  # When dragging the value is incremeted or decremented depending on the
+  # direction of the drag. The element can be limited to an upper and a lower value.
+  #
+  # @attr_reader drag [Fron::Drag] The drag instance
+  # @attr affix [String] The affix (px, %, em, ...)
+  # @attr label [String] The label to be displayed
+  # @attr step [Float] The step modifier to apply to the step, default to 1
+  # @attr min [Float] The minimal possible value, defaults to -infinity
+  # @attr max [Float] The maximum possible value, defaults to infinity
+  # @attr round [Float] The rounding value, defaults to 2
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class NumberRange < Base
+    # Input component
+    class Input < Fron::Component
+      tag 'ui-number-range-input'
+
+      attribute_accessor :label
+      attribute_accessor :affix
+
+      style borderRadius: -> { theme.border_radius.em },
+            lineHeight: -> { theme.size.em },
+            background: -> { colors.input },
+            height: -> { theme.size.em },
+            textAlign: :center,
+            display: :block,
+            fontWeight: 600,
+            '&:before' => { content: 'attr(label)',
+                            marginRight: 0.2.em,
+                            fontWeight: :normal },
+            '&:after' => { content: 'attr(affix)' },
+            '&:focus' => { boxShadow: -> { theme.focus_box_shadow.call },
+                           outline: :none }
+    end
+
+    extend Forwardable
+
+    attr_reader :drag
+
+    tag 'ui-number-range'
+
+    component :input, Input, contenteditable: true
+
+    def_delegators :@input, :affix=, :affix, :label=, :label
+
+    on :keydown,   :keydown
+    on :input,     :input
+    on :mousemove, :on_mouse_move
+    on :mousedown, :on_mouse_down
+
+    attribute_accessor :step,  default: 1,                coerce: :to_f
+    attribute_accessor :round, default: 1,                coerce: :to_f
+    attribute_accessor :max,   default: Float::INFINITY,  coerce: :to_f
+    attribute_accessor :min,   default: -Float::INFINITY, coerce: :to_f
+
+    style color: -> { readable_color(colors.input) },
+          minWidth: -> { (theme.size * 5).em },
+          display: 'inline-block',
+          position: :relative,
+          '&:after, &:before' => { borderStyle: :solid,
+                                   position: :absolute,
+                                   marginTop: -0.3.em,
+                                   content: "''",
+                                   opacity: 0.5,
+                                   top: '50%',
+                                   height: 0,
+                                   width: 0 },
+          '&:after' => { borderColor: 'transparent currentColor transparent transparent',
+                         borderWidth: '0.35em 0.4em 0.35em 0',
+                         left: 0.75.em },
+          '&:before' => { borderColor: 'transparent transparent transparent currentColor',
+                          borderWidth: '0.35em 0 0.35em 0.4em',
+                          right: 0.75.em }
+
+    # Creates a new instance
+    def initialize
+      super
+      @input.on(:blur) { blur }
+      self.value = 0
+      setup_drag
+    end
+
+    def _attribute_changed
+      reset_value
+    end
+
+    # Returns the value of the field
+    #
+    # @return [Float] The value of the field
+    def value
+      @value.to_f
+    end
+
+    def _value(value)
+      value = value.to_f.clamp(min, max)
+      return if @value == value
+      @value = value
+    end
+
+    # Sets the value of the field
+    #
+    # @param value [Float] The value
+    def value=(value)
+      _value value
+      @input.text = format "%.#{round}f", @value
+      trigger 'change'
+    end
+
+    private
+
+    # Resets the value when attribute changes
+    def reset_value
+      self.value = value
+    end
+
+    # Sets up dragging.
+    def setup_drag
+      @drag = Fron::Drag.new self, 0
+
+      @drag.on('start') { @start_value = value }
+      @drag.on('move')  { on_drag_move  }
+      @drag.on('end')   { on_drag_end   }
+    end
+
+    # Runs when drag end
+    def on_drag_end
+      DOM::Document.body.style.cursor = ''
+      blur
+    end
+
+    # Runs when drag moves
+    def on_drag_move
+      DOM::Document.body.style.cursor = 'move'
+      value = (@start_value - @drag.diff.x * step).round(round)
+      self.value = value if @value != value
+    end
+
+    # Runs when input changes. It sets the value if the emelement
+    # is not empty, otherwise it inserts a non-width space to prevent
+    # caret jumping in chrome.
+    def input
+      @input.html = '&#xfeff;' if text.strip == ''
+      _value @input.html
+    end
+
+    # Runs when key is pressed. Prevents hitting the enter key.
+    #
+    # :reek:FeatureEnvy
+    #
+    # @param event [Event] The event
+    def keydown(event)
+      return unless event.key == :enter
+      event.prevent_default
+      @input.blur
+    end
+
+    # Runs when the element is blurred. Sets the value form
+    # the elements text.
+    def blur
+      self.value = text
+    end
+
+    # Runs on pointer move. Sets the cursor to move when not
+    # in the center of the element
+    #
+    # @param event [Event] The event
+    def on_mouse_move(event)
+      @style.cursor = in_select_region?(event.page_x) ? '' : 'move'
+    end
+
+    # Runs on pointer down. Prevents propagation so dragging
+    # cannot start.
+    #
+    # :reek:FeatureEnvy
+    #
+    # @param event [Event] The event
+    def on_mouse_down(event)
+      @input.focus
+      if in_select_region?(event.page_x)
+        event.stop_immediate_propagation
+      else
+        event.prevent_default
+      end
+    end
+
+    # Returns form to position if it is in the region that
+    # allow selection.
+    #
+    # @param position [type] The position (horizontal) to be checked
+    #
+    # @return [Boolean] True if the position is in the region otherwise false.
+    def in_select_region?(position)
+      (left + width / 2 - position).abs <= width / 4.5
+    end
+  end
+end