fron-ui 1.0.0rc2

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

@@ -0,0 +1,52 @@
+module UI
+  # Simple progressbar
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Progress < Base
+    tag 'ui-progress'
+
+    component :bar, 'ui-progress-bar'
+
+    style borderRadius: -> { theme.border_radius.em },
+          minWidth: -> { (theme.size * 6).em },
+          background: -> { colors.input },
+          height: -> { 0.8.em },
+          'ui-progress-bar' => {
+            borderRadius: -> { theme.border_radius.em },
+            background: -> { colors.primary },
+            transition: 'width 320ms',
+            height: :inherit,
+            display: :block
+          }
+
+    # Initializes the component and sets default value
+    def initialize
+      super
+      self.value = 0
+    end
+
+    # Sets the color of the bar
+    #
+    # @param color [String, Symbol] The color
+    def color=(color)
+      @bar.style.backgroundColor = color
+    end
+
+    # Sets the value
+    #
+    # @param value [Float] The value (0..1)
+    def value=(value)
+      value = value.clamp(0, 1) * 100
+      @bar.style.width = "#{value}%"
+      self[:percent] = "#{value}%"
+    end
+
+    # Returns the value
+    #
+    # @return [Float] The value
+    def value
+      @bar.style.width.to_i / 100
+    end
+  end
+end

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

@@ -0,0 +1,47 @@
+module UI
+  # Horizontal range / slider component
+  #
+  # @attr value [Float] The value
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Slider < Drag
+    tag 'ui-slider'
+
+    style minWidth: -> { (theme.size * 6).em },
+          height: -> { theme.size.em },
+          background: :transparent,
+          cursor: :pointer,
+          'ui-drag-handle' => { borderRadius: -> { theme.border_radius.em },
+                                background: -> { colors.primary },
+                                pointerEvents: :auto,
+                                height: 1.5.em,
+                                width: 1.5.em,
+                                top: '50%' },
+          '&:focus' => { outline: :none,
+                         '&:before' => { boxShadow: -> { theme.focus_box_shadow.call } } },
+          '&:before' => { borderRadius: -> { theme.border_radius.em },
+                          background: -> { colors.input },
+                          position: :absolute,
+                          marginTop: -0.4.em,
+                          height: 0.8.em,
+                          content: "''",
+                          top: '50%',
+                          right: 0,
+                          left: 0 }
+
+    on :mousedown, :focus
+
+    # Initailizes the component by
+    # seting tabindex and restricting
+    # it to be horizontal
+    def initialize
+      super
+      @vertical = false
+      self[:tabindex] ||= 0
+    end
+
+    alias value value_x
+    alias value= value_x=
+  end
+end

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

@@ -0,0 +1,149 @@
+module UI
+  # Component for tabular UI.
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Tabs < UI::Container
+    # Component for the handle.
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    class Handle < Action
+      include ::Record
+
+      tag 'ui-tab-handle'
+
+      attribute_accessor :tab_id
+
+      style padding: -> { theme.spacing.em },
+            top: -> { theme.border_size.em },
+            display: 'inline-block',
+            position: :relative,
+            fontWeight: 600,
+            opacity: 0.5,
+            '&.selected' => { borderBottom: -> { "#{theme.border_size.em} solid #{colors.primary}" },
+                              color: -> { colors.primary } },
+            '&:focus' => { borderBottom: -> { "#{theme.border_size.em} solid #{colors.focus}" },
+                           color: -> { colors.focus } },
+            '&:hover, &.selected, &:focus' => { opacity: 1 }
+
+      # Renders the component
+      def render
+        self.tab_id = @data[:id]
+        self.text = @data[:title]
+      end
+    end
+
+    # Tab handle container.
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    class Handles < Collection
+      include UI::Behaviors::SelectableChildren
+
+      tag 'ui-tab-handles'
+
+      style display: :block,
+            flex: '0 0 auto',
+            minHeight: 3.em,
+            borderBottom: -> { "#{theme.border_size.em} solid #{dampen colors.background, 0.05}" }
+    end
+
+    # Basic tab container.
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    class Tab < Base
+      tag 'ui-tab'
+
+      style padding: -> { theme.spacing.em }
+    end
+
+    extend Forwardable
+
+    tag 'ui-tabs'
+
+    component :handles, Handles, base: Handle
+
+    def_delegators :handles, :base, :base=
+
+    style '> *:not(ui-tab-handles):not(.active)' => { visibility: :hidden,
+                                                      overflow: :hidden,
+                                                      display: :block,
+                                                      padding: 0,
+                                                      height: 0 },
+          '> .active' => { visibility: :visible,
+                           overflow: :auto,
+                           display: :block,
+                           height: :auto,
+                           flex: 1 }
+
+    on :selected_change, :select_tab
+
+    # Monkeypatch to update tabs
+    def <<
+      super
+      update_tabs
+    end
+
+    # Monkeypatch to update tabs
+    def insert_before
+      super
+      update_tabs
+    end
+
+    # Monkeypatch to update tabs
+    def remove
+      super
+      update_tabs
+    end
+
+    # Activates the currently selected tab
+    def select_tab
+      select find_by_id(handles.selected.tab_id)
+    end
+
+    # Selects the given tab.
+    #
+    # @param tab [UI::Tabs::Tab, Fron::Component] The tab
+    def select(tab)
+      return unless tab
+      return if active_tab == tab
+      active_tab.remove_class(:active) if active_tab
+      handles.select handles.find("[tab_id='#{tab[:tab_id]}']")
+      tab.add_class(:active)
+    end
+
+    # Returns the active tab
+    #
+    # @return [UI::Tabs::Tab, Fron::Component] The tab
+    def active_tab
+      children.find { |child| child.has_class(:active) }
+    end
+
+    # Returns the tab by the given id
+    #
+    # @param id [String] The id
+    #
+    # @return [UI::Tabs::Tab, Fron::Component] The tab
+    def find_by_id(id)
+      children.find { |child| child[:tab_id] == id }
+    end
+
+    # Updates tab handles to reflect the content.
+    def update_tabs
+      return unless @handles
+      handles.items = tabs.map { |item| { id: item[:tab_id], title: item[:tab_title] } }.uniq
+      return if handles.selected || handles.children.empty?
+      handles.select_first
+      select_tab
+    end
+
+    # Returns all tabs
+    #
+    # @return [Array<UI::Tabs::Tab>] The tabs
+    def tabs
+      find_all('[tab_id][tab_title]')
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module UI
+  # Textarea component.
+  #
+  # @author Gusztáv Szikszai
+  # @since  0.1.0
+  class Textarea < Input
+    tag 'textarea'
+
+    style padding: -> { (theme.spacing / 2).em },
+          lineHeight: -> { 1.5.em },
+          boxSizing: 'border-box'
+  end
+end

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

@@ -0,0 +1,65 @@
+module UI
+  # Time component to display static times or
+  # times that counts upwards (fromNow), using [Moment.js](http://momentjs.com/).
+  #
+  # @attr from_now [Bolean] The use the fromNow or not
+  # @attr format [String] The format to display
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Time < Fron::Component
+    tag 'ui-time'
+
+    attr_accessor :from_now, :format
+
+    # Initializes the component
+    def initialize
+      super
+      render
+    end
+
+    # Sets the value (time) of the component
+    #
+    # @param value [Date, String] The value
+    def value=(value)
+      @value = if value.is_a? Date
+                 Native(`moment(#{value}.date)`)
+               else
+                 Native(`moment(#{value})`)
+               end
+    rescue
+      @value = nil
+    ensure
+      render
+    end
+
+    # Returns the value
+    #
+    # @return [Native] The moment wrapped value
+    def value
+      (@value || Native(`moment()`))
+    end
+
+    # Renders the component
+    def render
+      clear_timeout @id
+      request_animation_frame do
+        self.text = if @from_now
+                      value.fromNow
+                    else
+                      value.format(@format || 'YYYY-MM-DD')
+                    end
+      end
+      recall
+    end
+
+    private
+
+    # Periodically calls render
+    def recall
+      @id = timeout 1000 do
+        render
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+module UI
+  # Title component
+  #
+  # Features:
+  # * Align text (left / center / right )
+  # * Bottom border
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Title < UI::Container
+    extend Forwardable
+
+    tag 'ui-title'
+
+    style borderBottom: -> { "#{theme.border_size.em} solid #{dampen colors.background, 0.05}" },
+          paddingBottom: -> { theme.spacing.em },
+          fontFamily: -> { theme.font_family },
+          height: 2.em,
+          '> span' => { fontSize: '1.6em',
+                        fontWeight: 600,
+                        flex: 1 }
+
+    component :span, :span
+
+    def_delegators :span, :text, :text=
+
+    # Sets the text align of the component
+    #
+    # @param value [Symbol] The alignment
+    def align=(value)
+      @style.textAlign = value
+    end
+  end
+end

data/opal/fron-ui/examples/blog/index.rb

@@ -0,0 +1,289 @@
+require 'fron_ui'
+
+class Item < UI::Container
+  include UI::Behaviors::Rest
+  include ::Record
+
+  style padding: -> { theme.spacing.em },
+        '> span' => { fontWeight: 600 },
+        small: { opacity: 0.5 },
+        '&.selected' => {
+          color: -> { colors.focus }
+        }
+
+  component :span, :span
+  component :small, :small do
+    component :span, :span, text: 'Created '
+    component :time, UI::Time, from_now: true
+  end
+
+  def render
+    @span.text = @data[:title]
+  end
+end
+
+class List < UI::List
+  include UI::Behaviors::SelectableChildren
+  include UI::Behaviors::Rest
+
+  rest url: 'http://localhost:3000/posts'
+
+  def refresh
+    request :get, '' do |items|
+      self.items = items
+      yield
+    end
+  end
+end
+
+class Header < UI::Box
+  tag 'ui-header[direction=row]'
+
+  style '> *' => { padding: -> { "0 #{theme.spacing.em}" } }
+
+  component :brand, 'ui-brand', text: 'Blog'
+  component :posts, UI::Action, text: 'Content', action: :content
+  component :posts, UI::Action, text: 'New Post', action: :create
+end
+
+class Posts < UI::Container
+  extend Forwardable
+
+  tag 'ui-posts'
+
+  style 'ui-box:last-of-type ui-icon' => { marginRight: -> { theme.spacing.em } },
+        'ui-body' => { overflow: :auto },
+        'ui-title' => {
+          flex: '0 0 2em',
+          '> span' => {
+            overflow: :hidden,
+            textOverflow: :ellipsis,
+            whiteSpace: :nowrap
+          }
+        }
+
+  component :box, UI::Box, flex: '0 0 15em' do
+    component :title, UI::Title, text: 'Posts', direction: :row do
+      component :button, UI::Button, type: :success, shape: :square, action: :create do
+        component :icon, UI::Icon, glyph: :plus
+      end
+    end
+    component :list, List, base: Item, flex: 1
+  end
+
+  component :preview, UI::Box, flex: 1 do
+    component :title, UI::Title, direction: :row do
+      component :button, UI::Button, action: :edit do
+        component :icon, UI::Icon, glyph: :edit
+        component :span, :span, text: 'Edit'
+      end
+      component :button, UI::Button, action: :confirm_destroy!, type: :danger do
+        component :icon, UI::Icon, glyph: 'trash-b'
+        component :span, :span, text: 'Delete'
+      end
+    end
+    component :body, 'ui-body'
+  end
+
+  on :selected_change, :select
+
+  def_delegators :box, :list
+  def_delegators :list, :selected, :select_first
+
+  def refresh
+    list.refresh do
+      break if selected
+      select_first
+    end
+  end
+
+  def select
+    self.selected = selected.data
+  end
+
+  def selected=(data)
+    @preview.title.text = data[:title]
+    @preview.body.html = `marked(#{data[:body].to_s}, { gfm: true, breaks: true })`
+  end
+end
+
+class Form < UI::Container
+  include UI::Behaviors::Serialize
+  include UI::Behaviors::Actions
+  include UI::Behaviors::Rest
+
+  extend Forwardable
+
+  tag 'ui-form'
+
+  rest url: 'http://localhost:3000/posts'
+
+  style 'input[type=text]' => { fontSize: 2.em,
+                                flex: '0 0 auto',
+                                borderRadius: 0,
+                                borderBottom: -> { "#{theme.border_size.em} solid #{dampen colors.background, 0.05}" } },
+        'ui-container:first-of-type' => {
+          position: :relative,
+          paddingLeft: '50%',
+          marginTop: '0 !important'
+        },
+        'ui-base, textarea' => {
+          boxSizing: 'border-box',
+          fontSize: 16.px,
+          padding: 20.px
+        },
+        'ui-base' => {
+          borderLeft: -> { "#{theme.border_size.em} solid #{dampen colors.background, 0.05}" },
+          overflow: :auto,
+          div: {
+            maxWidth: 800.px,
+            margin: '0 auto',
+            '> *' => {
+              margin: 0,
+              marginBottom: 0.6.em
+            }
+          }
+        },
+        'input, textarea' => {
+          '&:focus' => {
+            boxShadow: :none
+          }
+        },
+        textarea: {
+          position: :absolute,
+          resize: :none,
+          top: 0,
+          left: 0,
+          width: '50%',
+          height: '100%'
+        }
+
+  component :title, UI::Input, name: :title, placeholder: 'Post title...'
+  component :container, UI::Container, flex: 1, direction: :row, compact: true do
+    component :textarea, UI::Textarea, name: :body, placeholder: 'Post body...', spellcheck: false
+    component :preview, UI::Base, flex: 1 do
+      component :div, :div
+    end
+  end
+  component :statusbar, UI::Container, direction: :row, align: :end, flex: '0 0 auto' do
+    component :button, UI::Button, text: 'Save', action: :save
+  end
+
+  def_delegators :container, :preview, :textarea
+
+  on :keyup, :render
+
+  def initialize
+    super
+    textarea.on :scroll do
+      sync
+    end
+  end
+
+  def sync
+    preview.scroll_top = preview.scroll_height * (textarea.scroll_top / textarea.scroll_height)
+  end
+
+  def load(id, defaults = { title: '', body: '' })
+    if id
+      request :get, id do |data|
+        super data
+        render
+        yield if block_given?
+      end
+    else
+      super defaults
+      render
+      yield if block_given?
+    end
+  end
+
+  def save
+    if data[:id]
+      update data
+    else
+      create data do |item|
+        trigger :created, id: item[:id]
+      end
+    end
+  end
+
+  def render
+    preview.div.html = `marked(#{data[:body].to_s}, { gfm: true, breaks: true })`
+  end
+end
+
+class Main < UI::Container
+  extend Forwardable
+  include UI::Behaviors::Actions
+  include UI::Behaviors::Rest
+  include UI::Behaviors::State
+  include UI::Behaviors::Confirmation
+
+  rest url: 'http://localhost:3000/posts'
+
+  tag 'main'
+
+  style height: '100vh',
+        boxSizing: 'border-box',
+        fontSize: 14.px,
+        padding: -> { theme.spacing.em }
+
+  component :header, Header
+  component :content, UI::Container, direction: :row, flex: 1, compact: true do
+    component :posts, Posts, flex: 1, direction: :row
+    component :form, Form, flex: 1
+  end
+
+  state_changed :state_changed
+
+  confirmation :destroy!, 'Are you sure you want to remove this post?'
+
+  on :created, :created
+
+  def state_changed
+    if state.key?(:id)
+      load(state[:id])
+    else
+      @content.posts.refresh
+      @content.posts.show
+      @content.form.hide
+    end
+  end
+
+  def state
+    super.to_h
+  end
+
+  def content
+    self.state = {}
+  end
+
+  def destroy!
+    request :delete, @content.posts.selected.data[:id] do
+      @content.posts.refresh
+    end
+  end
+
+  def edit
+    self.state = state.merge!(id: @content.posts.selected.data[:id])
+  end
+
+  def load(id)
+    @content.form.load id do
+      @content.posts.hide
+      @content.form.show
+    end
+  end
+
+  def create
+    self.state = { id: nil }
+  end
+
+  def created(event)
+    self.state = { id: event.id }
+  end
+end
+
+Fron::Sheet.render_style_tag
+DOM::Document.body << Main.new