fron-ui 1.0.0rc2

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

@@ -0,0 +1,57 @@
+module UI
+  # Checkbox component.
+  #
+  # Features:
+  # * checked and checked=
+  # * actionable
+  #
+  # @attr value [Boolean] The value
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Checkbox < Action
+    extend Forwardable
+
+    tag 'ui-checkbox'
+
+    def_delegators :@input, :checked, :checked=
+
+    component :input, :input, tabindex: -1, type: :checkbox
+    component :label, :label, tabindex: -1 do
+      component :icon, UI::Icon, glyph: :checkmark
+    end
+
+    style height: -> { theme.size.em },
+          width: -> { theme.size.em },
+          display: 'inline-block',
+          input: { display: :none,
+                   '&:checked + label' => { 'ui-icon' => { transform: 'scale(1)',
+                                                           opacity: 1 } } },
+          label: { transition: 'opacity 320ms, transform 320ms',
+                   borderRadius: -> { theme.border_radius.em },
+                   color: -> { readable_color colors.input },
+                   background: -> { colors.input },
+                   justifyContent: :center,
+                   alignItems: :center,
+                   cursor: :pointer,
+                   height: :inherit,
+                   display: :flex,
+                   width: :inherit,
+                   'ui-icon' => { transform: 'scale(0.4) rotate(45deg)',
+                                  transition: :inherit,
+                                  fontSize: 1.em,
+                                  opacity: 0 } },
+          '&:focus label' => { boxShadow: -> { theme.focus_box_shadow.call } }
+
+    on :click, :action
+
+    # Toggles the checkbox
+    def action
+      self.checked = !checked
+      trigger :change
+    end
+
+    alias value= checked=
+    alias value checked
+  end
+end

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

@@ -0,0 +1,246 @@
+require 'fron-ui/components/dropdown'
+require 'fron-ui/components/input'
+
+module UI
+  # Chooser component
+  #
+  # Features
+  # * Select an item from the dropdown
+  # * Allows multiple selection (multiple attribute)
+  # * Search the items from the input
+  # * Navigate / select with keyboard
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Chooser < Base
+    # Item for the chooser
+    class Item < Fron::Component
+      include ::Record
+
+      tag 'ui-chooser-item'
+
+      style display: :block,
+            padding: -> { (theme.spacing / 2).em }
+
+      # Renders the item
+      def render
+        self.text = label
+      end
+
+      def label
+        @data[:value]
+      end
+
+      # Retunrs the value
+      #
+      # @return [String] The value
+      def value
+        text
+      end
+    end
+
+    # List for the chooser
+    class List < Collection
+      include UI::Behaviors::SelectableChildren
+      include UI::Behaviors::IntendableChildren
+
+      tag 'ui-chooser-list'
+
+      style background: -> { colors.input },
+            borderRadius: -> { theme.border_radius.em },
+            color: -> { readable_color colors.input },
+            overflow: :auto,
+            '> *.selected' => { background: -> { colors.primary },
+                                color: -> { readable_color colors.primary },
+                                '&:first-child' => { borderTopLeftRadius: :inherit,
+                                                     borderTopRightRadius: :inherit },
+                                '&:last-child' => { borderBottomLeftRadius: :inherit,
+                                                    borderBottomRightRadius: :inherit } }
+
+      # Selects the currently intended item
+      def select_intended
+        select intended
+      end
+    end
+
+    include UI::Behaviors::Dropdown
+    include UI::Behaviors::Keydown
+    extend Forwardable
+
+    tag 'ui-chooser'
+
+    component :input, UI::Input
+    component :dropdown, UI::Dropdown do
+      component :list, List, base: Item, deselectable: true
+    end
+
+    dropdown :input, :dropdown
+
+    def_delegators :dropdown, :list
+    def_delegators :input, :placeholder, :placeholder=, :blur, :active?, :focus
+    def_delegators :list, :base, :base=, :key, :key=, :multiple, :multiple=,
+                   :intend_next, :intend_previous, :select_intended, :items,
+                   :select_first, :select_last, :deselectable, :deselectable=
+
+    style position: :relative,
+          color: -> { readable_color colors.input },
+          input: { cursor: :pointer,
+                   width: '100%' },
+          'ui-dropdown' => { left: 0,
+                             right: 0,
+                             maxHeight: 300.px,
+                             overflowY: :auto },
+          '&:not([focused]):after,
+           &:not([searchable]):after' => { background: -> { "linear-gradient(90deg, #{rgba(colors.input, 0)}, #{colors.input} 70%)" },
+                                           borderBottomRightRadius: :inherit,
+                                           borderTopRightRadius: :inherit,
+                                           pointerEvents: :none,
+                                           position: :absolute,
+                                           content: '""',
+                                           width: 4.em,
+                                           bottom: 0.15.em,
+                                           right: 0.15.em,
+                                           top: 0.15.em },
+          '&:before' => { borderStyle: :solid,
+                          position: :absolute,
+                          marginTop: -0.2.em,
+                          content: "''",
+                          opacity: 0.5,
+                          top: '50%',
+                          height: 0,
+                          pointerEvents: :none,
+                          width: 0,
+                          borderColor: 'currentColor transparent transparent transparent',
+                          borderWidth: '0.4em 0.35em 0 0.35em',
+                          right: 0.75.em,
+                          zIndex: 1 }
+
+    keydown :esc,  :blur
+    keydown :up,   :intend_previous
+    keydown :down, :intend_next
+
+    on :input, :filter
+    on :selected_change, :selected_changed
+    on :keydown, :keydown
+
+    # Initilaizes the component, setting
+    # up not bubbling events on the input
+    def initialize
+      super
+      @dropdown.on :mousedown, &:prevent_default
+
+      self.searchable = true
+      @input.on(:focus) do
+        self[:focused] = ''
+        show_items
+        empty_input
+      end
+      @input.on(:blur) do
+        remove_attribute :focused
+        update_input
+      end
+    end
+
+    def keydown(event)
+      return unless [:space, :enter].include?(event.key)
+      result = select_intended
+      event.stop if result
+    end
+
+    # Sets the searchable value, by setting
+    # the inputs to read only attribute.
+    #
+    # @param value [Boolean] The value
+    def searchable=(value)
+      @input.readonly = !value
+      if @input.readonly
+        remove_attribute :searchable
+      else
+        self[:searchable] = ''
+      end
+    end
+
+    # Returns if the component is searchable or not
+    #
+    # @return [Boolean] The value
+    def searchable
+      !@input.readonly
+    end
+
+    # Sets the items
+    #
+    # @param items [Array<Hash>] The items
+    def items=(items)
+      items = items.each_with_index.map { |item, index| { id: index, value: item } } unless items[0].is_a?(Hash)
+      list.items = items
+      update_input
+    end
+
+    # Empties the input
+    def empty_input
+      return if @input.readonly
+      @input.value = ''
+    end
+
+    # Updates the input after
+    # an item has been selected
+    def selected_changed
+      return if searchable
+      update_input
+      trigger :change
+      @input.blur unless multiple
+    end
+
+    # Updates the input text with
+    # the selected items values
+    def update_input
+      timeout(320) { show_items }
+      @input.value = Array(label).join(', ')
+    end
+
+    # Shows the items
+    def show_items
+      list.children.each { |item| item.remove_class :hidden }
+    end
+
+    # Filters the items by the input label
+    def filter
+      list.children.each do |item|
+        item.toggle_class :hidden, !(item.label =~ Regexp.new(@input.value, 'i'))
+      end
+    end
+
+    # Returns the value
+    #
+    # @return The value
+    def value
+      selected_items(:value)
+    end
+
+    def selected_items(property)
+      selected = list.selected
+      return nil unless selected
+      if selected.is_a?(Array)
+        return nil if selected.empty?
+        selected.map { |item| item.send(property) }
+      else
+        selected.send(property)
+      end
+    end
+
+    def label
+      selected_items(:label)
+    end
+
+    def value=(new_value)
+      return if attribute?(:focused)
+      values = Array(new_value)
+      return if Array(value) == values
+      list.deselect
+      values.each do |val|
+        list.select list.children.find { |child| child.value == val }
+      end
+      update_input
+    end
+  end
+end

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

@@ -0,0 +1,235 @@
+require 'fron-ui/components/container'
+require 'fron-ui/components/drag'
+
+require 'native'
+
+module Color
+  class RGB
+    def css_rgba(alpha)
+      alpha = format('%.1f', alpha)
+      "rgba(#{red.round},#{green.round},#{blue.round},#{alpha})"
+    end
+  end
+end
+
+module UI
+  # Color selector component with a draggable field for
+  # selecting the saturation / value and
+  # a slider for selecting hue.
+  #
+  # @attr_reader [Integer] hue The hue of the represented color
+  # @attr_reader [Integer] value The value of the represented color
+  # @attr_reader [Integer] saturation The saturation of the represented color
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class ColorPanel < UI::Container
+    extend Forwardable
+
+    CHECKER = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wkUCDAEK+8FsQAAADNJREFUKM9jPHPmDAM2YGxsjFWciYFEMKqBGMD4//9/rBJnz54d8p7G5TecGhgZGQfIDwBAQAuAAa2FpwAAAABJRU5ErkJggg=='
+
+    tag 'ui-color-wheel'
+
+    defaults direction: :column
+
+    style borderRadius: -> { theme.border_radius.em },
+          padding: -> { (theme.spacing * 2).em },
+          background: -> { colors.input },
+          'ui-drag' => { boxShadow: '0 0 1px 1px rgba(0,0,0,0.2) inset',
+                         cursor: :pointer },
+          '> ui-drag' => {
+            backgroundPosition: :center,
+            height: 1.2.em,
+            'ui-drag-handle' => { transform: 'translateX(-50%)',
+                                  borderRadius: 0.5.em,
+                                  top: -0.25.em,
+                                  bottom: -0.25.em,
+                                  width: 0.5.em,
+                                  height: 'auto' }
+          },
+          'ui-container' => {
+            'ui-drag:first-of-type' => { backgroundImage: 'linear-gradient(0deg, #000 0%, transparent 100%),
+                                                           linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%)',
+                                         width: 14.em,
+                                         height: 14.em },
+            'ui-drag:last-of-type' => { backgroundImage: 'linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%,
+                                                                          #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)',
+                                        width: 1.2.em,
+                                        'ui-drag-handle' => { transform: 'translateY(-50%)',
+                                                              borderRadius: 0.5.em,
+                                                              right: -0.25.em,
+                                                              left: -0.25.em,
+                                                              height: 0.5.em,
+                                                              width: 'auto' } }
+          }
+
+    component :container, UI::Container, direction: :row do
+      component :recta, UI::Drag
+      component :hued, UI::Drag, horizontal: false
+    end
+    component :alphad, UI::Drag, vertical: false
+
+    on :change, 'ui-drag', :change
+    on :mousedown, :stop
+
+    def_delegators :container, :recta, :hued
+
+    attr_reader :hue, :saturation, :value
+
+    # Initializes the component with default
+    # values for hue, value and saturation
+    def initialize
+      super
+
+      @hue = 0
+      @value = 100
+      @saturation = 0
+      @alpha = 0
+
+      render
+    end
+
+    def stop(event)
+      event.stop
+    end
+
+    # Handles changes from the fields, sets the
+    # hue, value and saturation from on the fields.
+    #
+    # @param event [DOM::Event] The event
+    def change(event)
+      event.stop
+      hue = hued.value_y * 360
+      value = (1 - recta.value_y) * 100
+      saturation = recta.value_x * 100
+      alpha = @alphad.value_x * 100
+      return if hue == @hue &&
+                value == @value &&
+                saturation == @saturation &&
+                alpha == @alpha
+      @hue = hue
+      @value = value
+      @saturation = saturation
+      @alpha = alpha
+      render
+      trigger :change
+    end
+
+    # Sets the hue to the given value
+    #
+    # @param value [Integer] Integer between 0 and 360
+    def hue=(value)
+      @hue = value
+      hued.value_y = value / 360
+      render
+    end
+
+    # Sets the saturation to the given value
+    #
+    # @param value [Integer] Integer between 0 and 100
+    def saturation=(value)
+      @saturation = value
+      recta.value_x = value / 100
+      render
+    end
+
+    # Sets the value to the given value
+    #
+    # @param value [Integer] Integer between 0 and 100
+    def value=(value)
+      @value = value
+      recta.value_y = (100 - value) / 100
+      render
+    end
+
+    def alpha=(value)
+      @alpha = value
+      @alphad.value_x = value / 100
+      render
+    end
+
+    def to_css
+      if @alpha.round == 100
+        '#' + color.hex.upcase
+      else
+        color.css_rgba(@alpha / 100)
+      end
+    end
+
+    private
+
+    # Returns the color
+    #
+    # :reek:UncommunicativeVariableName
+    #
+    # @return [Color::RGB] The color
+    def color
+      s = saturation / 100
+      v = value / 100
+      h = hue
+
+      c = v * s
+      x = c * (1 - ((h / 60).modulo(2) - 1).abs)
+      m = v - c
+
+      r, g, b = if (0...60).cover?(h)
+                  [c, x, 0]
+                elsif (60...120).cover?(h)
+                  [x, c, 0]
+                elsif (120...180).cover?(h)
+                  [0, c, x]
+                elsif (180...240).cover?(h)
+                  [0, x, c]
+                elsif (240...300).cover?(h)
+                  [x, 0, c]
+                elsif (300..360).cover?(h)
+                  [c, 0, x]
+                end
+
+      Color::RGB.from_fraction(r + m, g + m, b + m)
+    end
+
+    # Sets the color from a string
+    #
+    # :reek:UncommunicativeVariableName
+    #
+    # @param color [String] The hex or CSS representation
+    def color=(color)
+      if (md = color.match(/rgba\((\d{1,3}),(\d{1,3}),(\d{1,3}),(\d+\.\d+)\)/))
+        color = Color::RGB.new(md[1].to_i, md[2].to_i, md[3].to_i)
+        alpha = md[4].to_f * 100
+      else
+        alpha = 100
+      end
+      color = Color::RGB.by_css(color) unless color.is_a? Color
+      rgb = color.to_rgb.to_a
+      r, g, b = rgb
+
+      cmax = rgb.max
+      cmin = rgb.min
+
+      delta = cmax - cmin
+
+      self.hue = if delta == 0
+                   0
+                 elsif cmax == r
+                   60 * ((g - b) / delta).modulo(6)
+                 elsif cmax == g
+                   60 * (((b - r) / delta) + 2)
+                 elsif cmax == b
+                   60 * (((r - g) / delta) + 4)
+                 end
+
+      self.saturation = (cmax == 0 ? 0 : delta / cmax) * 100
+      self.value = cmax * 100
+      self.alpha = alpha
+    end
+
+    # Renders the component
+    def render
+      rgb = "#{color.red.round}, #{color.green.round}, #{color.blue.round}"
+      alphad.style.background = "linear-gradient(90deg, rgba(#{rgb},0), rgba(#{rgb},1)), url(#{CHECKER})"
+      recta.style.backgroundColor = "hsl(#{hue}, 100%, 50%)"
+    end
+  end
+end