fron-ui 1.0.0rc2

data/opal/fron-ui/examples/comments/components/comment.rb

@@ -0,0 +1,75 @@
+module Examples
+  class Comments < UI::Container
+    # Comment
+    class Comment < UI::Container
+      # Includes
+      include UI::Behaviors::Confirmation
+      include UI::Behaviors::Actions
+      include UI::Behaviors::Rest
+      include ::Record
+
+      # REST
+      rest url: 'http://localhost:3000/comments'
+
+      # Tagname
+      tag 'ui-comment'
+
+      # Style
+      style 'ui-comment-body' => { borderBottom: -> { "#{(theme.border_size / 2).em} solid #{colors.background}" },
+                                   paddingBottom: -> { theme.spacing.em },
+                                   'p' => { margin: 0,
+                                            '& + p' => { marginTop: -> { theme.spacing.em } } } },
+            '&:hover ui-comment-header ui-action' => { display: :block }
+
+      # Components
+      component :image, UI::Image, width: 4.em, height: 4.em
+      component :box, UI::Container, flex: 1 do
+        component :header, Header, direction: :row
+        component :body, 'ui-comment-body'
+        component :footer, Footer, direction: :row
+      end
+
+      # Confirmation for destroy
+      confirmation :destroy!, 'Are you sure?'
+
+      # Initializes the comment by setting
+      # the direction attribute
+      def initialize
+        super
+        self[:direction] = :row
+      end
+
+      # Votes up the comment
+      def vote_up
+        update_votes(1)
+      end
+
+      # Votes down the comment
+      def vote_down
+        update_votes(-1)
+      end
+
+      # Updates the vote count by the given number
+      #
+      # @param count [Integer] The count
+      def update_votes(count)
+        update votes: @data[:votes] + count do |data|
+          self.data = data
+        end
+      end
+
+      # Destroys the comment and trigger refresh
+      def destroy!
+        destroy { trigger :refresh }
+      end
+
+      # Renders the comment
+      def render
+        @image.src = @data[:user][:image]
+        @box.body.html = @data[:body]
+        @box.header.render @data
+        @box.footer.render @data
+      end
+    end
+  end
+end

data/opal/fron-ui/examples/comments/components/comments.rb

@@ -0,0 +1,93 @@
+require_relative 'header'
+require_relative 'footer'
+require_relative 'comment'
+require_relative 'list'
+
+module Examples
+  # Comments example
+  class Comments < UI::Container
+    # Includes
+    include UI::Behaviors::Actions
+    include UI::Behaviors::Rest
+
+    # Extends
+    extend Forwardable
+
+    tag 'ui-comments'
+
+    # REST
+    rest url: 'http://localhost:3000/comments'
+
+    # Style
+    style margin: '2em auto',
+          maxWidth: 42.em,
+          fontSize: 16.px,
+          '> ui-container' => { borderBottom: -> { "#{(theme.border_size / 1.5).em} dashed #{dampen colors.background, 0.05}" },
+                                paddingBottom: -> { theme.spacing.em },
+                                marginBottom: -> { theme.spacing.em },
+                                'ui-button' => { maxWidth: 10.em,
+                                                 alignSelf: 'flex-end' },
+                                textarea: { border: -> { "#{(theme.border_size / 1.5).em} solid #{dampen colors.background, 0.05}" },
+                                            boxSizing: 'border-box',
+                                            minHeight: 7.em,
+                                            flex: 1 } }
+
+    # Components
+    component :form, UI::Container do
+      component :title, UI::Title, text: 'Leave a comment', flex: '0 0 auto'
+      component :box, UI::Container, direction: :row do
+        component :image, UI::Image, src: Lorem.avatar, width: 4.em, height: 4.em
+        component :input, UI::Textarea, spellcheck: false
+      end
+      component :button, UI::Button, text: 'Comment', action: :add
+    end
+    component :list, List, base: Comment
+
+    # Delegations
+    def_delegators :form, :box
+    def_delegators :box, :image, :input
+
+    # Events
+    on :refresh, :load
+
+    # Adds a new comment
+    def add
+      return if input.value.empty?
+
+      data = {
+        id: SecureRandom.uuid,
+        date: Time.now,
+        votes: 0,
+        user: {
+          name: name,
+          image: image.src
+        },
+        body: input.value.split("\n").map { |paragraph| "<p>#{paragraph}</p>" }.join('')
+      }
+
+      create data do
+        input.value = ''
+        load
+      end
+    end
+
+    # Starts to reply by focusing the input field
+    def reply
+      input.focus
+    end
+
+    # Returns the current users name
+    #
+    # @return [String] The name
+    def name
+      @name ||= Lorem.name
+    end
+
+    # Loads comments from the server
+    def load
+      all do |items|
+        @list.items = items.reverse
+      end
+    end
+  end
+end

data/opal/fron-ui/examples/comments/components/footer.rb

@@ -0,0 +1,36 @@
+module Examples
+  class Comments < UI::Container
+    # Comment footer
+    class Footer < UI::Container
+      # Tagname
+      tag 'ui-comment-footer'
+
+      # Style
+      style color: -> { dampen colors.background, 0.3 },
+            span: { opacity: 0.8 },
+            fontSize: 0.8.em,
+            '&[direction=row]:not([compact]) > * + *' => { marginLeft: -> { (theme.spacing / 2).em } },
+            'ui-label' => { marginRight: -> { (theme.spacing / 2).em } },
+            'ui-action' => { display: :flex, fontWeight: 600 }
+
+      # Components
+      component :vote_up, UI::Action, direction: :row, action: :vote_up do
+        component :label, UI::Label, text: 0
+        component :icon,  UI::Icon, glyph: 'chevron-up'
+      end
+      component :span, :span, text: '|'
+      component :vote_down, UI::Action, action: :vote_down do
+        component :icon, UI::Icon, glyph: 'chevron-down'
+      end
+      component :span, :span, text: '|'
+      component :reply, UI::Action, text: 'Reply', action: :reply
+
+      # Renders the component
+      #
+      # @param data [Hash] The data
+      def render(data)
+        @vote_up.label.text = data[:votes]
+      end
+    end
+  end
+end

data/opal/fron-ui/examples/comments/components/header.rb

@@ -0,0 +1,35 @@
+module Examples
+  class Comments < UI::Container
+    # Comment header
+    class Header < UI::Container
+      # Tagname
+      tag 'ui-comment-header'
+
+      # Style
+      style 'ui-time' => { fontSize: 0.85.em,
+                           lineHeight: 1.5,
+                           opacity: 0.4,
+                           '&:before' => { content: '"-"',
+                                           marginRight: -> { (theme.spacing / 2).em } } },
+            '&[direction=row]:not([compact]) > * + *' => { marginLeft: -> { (theme.spacing / 2).em } },
+            'ui-label' => { fontWeight: 600 },
+            'ui-action' => { display: :none }
+
+      # Components
+      component :user,   UI::Label
+      component :date,   UI::Time, from_now: true
+      component :spacer, UI::Base, flex: 1
+      component :action, UI::Action, action: :confirm_destroy! do
+        component :icon, UI::Icon, glyph: 'android-close'
+      end
+
+      # Renders the component
+      #
+      # @param data [Hash] The data
+      def render(data)
+        @date.value = data[:date]
+        @user.text = data[:user][:name]
+      end
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+module Examples
+  class Comments < UI::Container
+    # Comment List
+    class List < Collection
+      # Tagname
+      tag 'ui-comments-list'
+
+      # Styles
+      style '> * + *' => { marginTop: -> { (theme.spacing * 2).em } }
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+require 'fron_ui'
+require_tree './components'
+comments = Examples::Comments.new
+comments >> DOM::Document.body
+comments.load
+Fron::Sheet.render_style_tag

data/opal/fron-ui/examples/contacts/components/contacts.rb

@@ -0,0 +1,100 @@
+require_relative 'details'
+require_relative 'sidebar'
+
+module Examples
+  # Contacts example
+  class Contacts < UI::Container
+    include UI::Behaviors::Actions
+    include UI::Behaviors::Render
+    include UI::Behaviors::Rest
+    include UI::Behaviors::State
+
+    extend Forwardable
+
+    rest url: 'http://localhost:3000/contacts'
+
+    component :sidebar, Sidebar, flex: '0 0 20em'
+    component :details, Details, flex: 1
+
+    style fontSize: 14.px,
+          width: 67.5.em,
+          margin: '0 auto',
+          height: 57.5.em,
+          padding: -> { theme.spacing.em },
+          boxSizing: 'border-box'
+
+    render :render!
+
+    def_delegators :class, :storage
+
+    on :selected_change, :select
+    on :input, 'ui-sidebar input', :render
+    on :refresh, :refresh
+    on :destroyed, :destroyed
+
+    state_changed :state_changed
+
+    # Initializes the component
+    def initialize
+      super
+      @items = []
+      self[:direction] = :row
+    end
+
+    # Handles state change
+    def state_changed
+      load state
+      render!
+    end
+
+    # Adds a new contact
+    def add
+      data = {
+        id: SecureRandom.uuid
+      }
+
+      create data do |item|
+        refresh do
+          @sidebar.input.value = ''
+          render!
+          self.state = item[:id]
+        end
+      end
+    end
+
+    # Handles item selection from the list
+    def select
+      self.state = @sidebar.selected.data[:id]
+    end
+
+    # Loads the contact with the given id
+    #
+    # @param id [String] The ID
+    def load(id)
+      @details.load id
+      render!
+    end
+
+    # Handles the destroyed event
+    #
+    # @param event [DOM::Event] The event
+    def destroyed(event)
+      self.state = nil if event.target.data[:id] == state
+      refresh
+    end
+
+    # Refreshes the list
+    def refresh
+      all do |items|
+        @items = items
+        render { yield if block_given? }
+      end
+    end
+
+    # Renders the list
+    def render!
+      @sidebar.items = @items.select { |item| item[:name].to_s.match Regexp.new(@sidebar.input.value || '.*', 'i') }
+      @sidebar.select state
+    end
+  end
+end

data/opal/fron-ui/examples/contacts/components/details.rb

@@ -0,0 +1,92 @@
+module Examples
+  class Contacts < UI::Container
+    # Details
+    class Details < UI::Box
+      include UI::Behaviors::Confirmation
+      include UI::Behaviors::Serialize
+      include UI::Behaviors::Actions
+      include UI::Behaviors::Rest
+
+      tag 'ui-details'
+
+      rest url: 'http://localhost:3000/contacts'
+
+      style 'ui-image' => { margin: -> { theme.spacing.em },
+                            height: 15.em,
+                            width: 15.em },
+            'ui-container' => { padding: -> { theme.spacing.em } },
+            'ui-container ui-container' => { maxWidth: 30.em },
+            'ui-label' => { fontWeight: 600 },
+            'input' => { fontSize: 1.2.em },
+            'ui-loader' => { fontSize: 2.em },
+            '&.empty' => {
+              '> ui-container, > ui-button' => {
+                display: :none
+              },
+              '&:after' => {
+                content: "'No contact selected!'",
+                padding: -> { (theme.spacing * 3).em },
+                textAlign: :center,
+                fontSize: 2.em,
+                opacity: 0.25
+              }
+            }
+
+      component :title, UI::Title, text: 'Contact Details'
+
+      component :box, UI::Container, flex: 1, direction: :row do
+        component :image, UI::Image
+        component :form, UI::Container, flex: 1 do
+          component :label, UI::Label, text: 'Full Name:'
+          component :input, UI::Input, placeholder: 'Tony Stark', name: :name
+          component :label, UI::Label, text: 'E-mail:'
+          component :input, UI::Input, placeholder: 'tony@stark-industries.com', name: :email
+          component :label, UI::Label, text: 'Address:'
+          component :input, UI::Input, placeholder: '10880 Malibu Point, Malibu, Calif', name: :address
+          component :label, UI::Label, text: 'Phone:'
+          component :input, UI::Input, placeholder: '+1-202-555-0160', name: :phone
+        end
+      end
+
+      component :button, UI::Button, type: 'danger', text: 'Remove Contact', action: :confirm_destroy!
+
+      confirmation :destroy!, 'Are you sure you want to remove this contact?'
+
+      on :change, :save
+
+      # Loads the contact with the given id
+      #
+      # @param id [String] The ID
+      def load(id)
+        return add_class :empty if id.empty?
+        request :get, id do |data|
+          break add_class :empty unless data
+          super data
+          remove_class :empty
+          render
+        end
+      end
+
+      # Saves the contact
+      def save
+        update data do
+          @data.merge! data
+          render
+          trigger :refresh
+        end
+      end
+
+      # Destroys the contact
+      def destroy!
+        destroy do
+          trigger :destroyed
+        end
+      end
+
+      # Renders the contact image
+      def render
+        @box.image.src = 'http://www.gravatar.com/avatar/' + `md5(#{data[:email] || ''})` + '?s=200&d=identicon'
+      end
+    end
+  end
+end