fron-ui 1.0.0rc2

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

@@ -0,0 +1,46 @@
+module Examples
+  class Contacts < UI::Container
+    # Item
+    class Item < UI::Container
+      include UI::Behaviors::Action
+      include ::Record
+
+      tag 'ui-item'
+
+      component :image, UI::Image, width: 2.em, height: 2.em
+      component :name, UI::Label
+
+      style padding: -> { (theme.spacing / 2).em },
+            lineHeight: 2.em,
+            transition: 'border 200ms',
+            borderLeft: '0em solid transparent',
+            'ui-loader' => { fontSize: 0.6.em },
+            '&.selected' => {
+              borderLeft: -> { "0.4em solid #{colors.primary}" }
+            },
+            '&:focus' => {
+              borderLeft: -> { "0.4em solid #{colors.focus}" }
+            }
+
+      # Initializes the item by setting the direction
+      def initialize
+        super
+        self[:tabindex] = 0
+        self[:direction] = :row
+      end
+
+      # Returns the id of the item
+      #
+      # @return [String] The ID
+      def id
+        @data[:id]
+      end
+
+      # Renders the component
+      def render
+        @image.src = 'http://www.gravatar.com/avatar/' + `md5(#{data[:email] || ''})` + '?s=100&d=identicon'
+        @name.text = data[:name] || ' '
+      end
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+module Examples
+  class Contacts < UI::Container
+    # List
+    class List < UI::List
+      include UI::Behaviors::SelectableChildren
+
+      tag 'ui-list'
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+require_relative 'item'
+require_relative 'list'
+
+module Examples
+  class Contacts < UI::Container
+    # Sidebar
+    class Sidebar < UI::Box
+      extend Forwardable
+
+      tag 'ui-sidebar'
+
+      component :title, UI::Title, text: 'Contacts'
+      component :input, UI::Input, placeholder: 'Search...'
+      component :list, List, empty_message: 'No contacts to display!', flex: 1, base: Item
+      component :button, UI::Button, text: 'Add new contact!', action: :add
+
+      def_delegators :list, :items, :items=, :selected, :deselect
+
+      ensure_styles!
+
+      # Selects the item with the given id
+      #
+      # @param id [String] The ID
+      def select(id)
+        return @list.deselect if id.empty?
+        @list.select @list.children.find { |item| item.data[:id] == id }
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,164 @@
+require 'fron_ui'
+
+URL = 'http://localhost:3000/files'
+
+class Item < UI::Container
+  include UI::Behaviors::Rest
+  include UI::Behaviors::Action
+  include ::Record
+
+  style padding: -> { theme.spacing.em },
+        '> span' => { fontWeight: 600 }
+
+  component :span, :span
+
+  def render
+    @span.text = @data[:filename]
+  end
+
+  def action
+    trigger :dblclick
+  end
+end
+
+class List < UI::List
+  include UI::Behaviors::Rest
+
+  rest url: URL
+
+  def refresh
+    request :get, '' do |items|
+      self.items = items
+    end
+  end
+end
+
+class FileTab < UI::Container
+  include UI::Behaviors::Rest
+  include ::Record
+
+  tag 'ui-file'
+
+  rest url: URL
+
+  component :textarea, UI::Textarea, spellcheck: false
+
+  style position: :relative,
+        textarea: { position: :absolute,
+                    padding: -> { theme.spacing.em },
+                    width: '100%',
+                    height: '100%',
+                    resize: :none }
+
+  on :change, :save
+
+  def render
+    self[:tab_id] = @data[:id]
+    self[:tab_title] = @data[:filename]
+    @textarea.value = @data[:content].to_s
+  end
+
+  def save
+    update content: @textarea.value
+  end
+end
+
+class Handle < UI::Tabs::Handle
+  include UI::Behaviors::Actions
+  include ::Record
+
+  tag 'ui-tab-handle'
+
+  component :span, UI::Label, flex: 1
+  component :action, UI::Action, action: :close do
+    component :icon, UI::Icon, glyph: 'android-close'
+  end
+
+  style display: 'inline-flex',
+        '> ui-action' => {
+          display: :flex,
+          justifyContent: :center,
+          alignItems: :center,
+          width: 1.em,
+          marginLeft: 1.em,
+          pointerEvents: :auto }
+
+  def close
+    trigger :close_tab
+  end
+
+  def render
+    self.tab_id = @data[:id]
+    @span.text = @data[:title]
+  end
+end
+
+class Main < UI::Container
+  include UI::Behaviors::Actions
+  include UI::Behaviors::State
+  include UI::Behaviors::Rest
+
+  component :container, UI::Container, direction: :row, flex: 1 do
+    component :sidebar, UI::Box do
+      component :title, UI::Title, text: 'Files', direction: :row do
+        component :button, UI::Button, type: :success, shape: :square, action: :add do
+          component :icon, UI::Icon, glyph: :plus
+        end
+      end
+      component :list, List, base: Item
+    end
+    component :content, UI::Box, flex: 1 do
+      component :tabs, UI::Tabs, flex: 1, compact: true, base: Handle
+    end
+  end
+
+  rest url: URL
+
+  style padding: -> { theme.spacing.em },
+        boxSizing: 'border-box',
+        height: '100vh',
+        'ui-box:first-child' => {
+          flex: '0 0 10em'
+        }
+
+  on :click, 'item', :open
+  on :close_tab, :close
+
+  state_changed :state_changed
+
+  def state_changed
+  end
+
+  def close(event)
+    @container.content.tabs.find_by_id(event.target.tab_id).remove!
+  end
+
+  def refresh
+    @container.sidebar.list.refresh
+  end
+
+  def add
+    name = prompt 'Name:'
+    return if name.to_s.strip.empty?
+    create id: SecureRandom.uuid, filename: name do
+      refresh
+    end
+  end
+
+  def open(event)
+    request :get, event.target.data[:id] do |data|
+      current = @container.content.tabs.find_by_id(data[:id])
+      break @container.content.tabs.select current if current
+      tab = FileTab.new
+      tab.data = data
+      @container.content.tabs << tab
+      @container.content.tabs.select tab
+    end
+  end
+end
+
+main = Main.new
+main.refresh
+
+DOM::Document.body << main
+Fron::Sheet.render_style_tag

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

@@ -0,0 +1,193 @@
+require 'fron_ui'
+require 'fron-ui/utils/theme_roller'
+
+class String
+  def to_class
+    split('::').inject(Object) do |mod, class_name|
+      mod.const_get(class_name)
+    end
+  end
+end
+
+class Item < UI::Label
+  include Record
+
+  style padding: -> { theme.spacing.em }
+
+  def render
+    self.text = @data[:id]
+  end
+end
+
+class List < UI::List
+  include UI::Behaviors::SelectableChildren
+end
+
+class Demo < UI::Box
+  style display: :flex,
+        justifyContent: :center,
+        alignItems: :center,
+        '> *' => {
+          maxHeight: '85%',
+          maxWidth: '85%'
+        }
+end
+
+class Field < UI::Container
+  extend Forwardable
+
+  component :label, UI::Label, flex: 1
+
+  def_delegators :input, :value, :value=
+  def_delegators :label, :text, :text=
+
+  style width: 20.em
+end
+
+class CheckboxField < Field
+  component :input, UI::Checkbox
+
+  style 'ui-checkbox' => { order: 1,
+                           marginLeft: 0 },
+        'ui-label' => { order: 2,
+                        lineHeight: 2.em,
+                        marginLeft: -> { theme.spacing.em } }
+
+  def initialize
+    super
+    self[:direction] = :row
+    self.compact = true
+  end
+end
+
+class InputField < Field
+  component :input, UI::Input
+end
+
+class RangeField < Field
+  component :input, UI::NumberRange
+end
+
+class Main < UI::Container
+  tag 'main'
+
+  style padding: -> { theme.spacing.em },
+        boxSizing: 'border-box',
+        overflow: :hidden,
+        margin: '0 auto',
+        height: '100vh',
+        '> ui-container > ui-container > ui-box' => {
+          flexWrap: :wrap,
+          height: 10.3.em
+        }
+
+  component :container, UI::Container, direction: :row, flex: 1 do
+    component :sidebar, UI::Box do
+      component :title, UI::Title, text: 'Components'
+      component :list, List, base: ::Item
+    end
+
+    component :demo_container, UI::Container, flex: 1 do
+      component :demo, Demo, flex: 1
+      component :options, UI::Box
+    end
+
+    component :theme, ThemeRoller
+  end
+
+  on :selected_change, 'list', :populate
+
+  def populate(event)
+    data = event.target.selected.data
+    el = data[:id].to_class.new
+    data[:proc].call el if data[:proc]
+    data[:args].to_h.each do |key, value|
+      if el.respond_to?("#{key}=")
+        el.send("#{key}=", value)
+      else
+        el[key] = value
+      end
+    end
+    oc = @container.demo_container.options
+    oc.empty
+    data[:options].to_h.each do |key, value|
+      input = case value
+              when :range
+                RangeField.new
+              when :input
+                InputField.new
+              when :checkbox
+                CheckboxField.new
+              end
+      input.text = key
+      input.value = el.send key
+      input.on :change do
+        el.send("#{key}=", input.value)
+      end
+      oc << input
+    end
+    request_animation_frame do
+      @container.demo_container.demo.empty
+      @container.demo_container.demo << el
+    end
+  end
+end
+
+CHOOSER_ITEMS = [
+  { id: 'en', value: 'English' },
+  { id: 'hu', value: 'Hungarian' },
+  { id: 'fr', value: 'French' },
+  { id: 'gr', value: 'German' },
+  { id: 'aar', value: 'Afar' },
+  { id: 'abk', value: 'Abkhazian' },
+  { id: 'afr', value: 'Afrikaans' },
+  { id: 'aka', value: 'Akan' },
+  { id: 'amh', value: 'Amharic' },
+  { id: 'ara', value: 'Arabic' },
+  { id: 'arg', value: 'Aragonese' },
+  { id: 'asm', value: 'Assamese' },
+  { id: 'ava', value: 'Avaric' },
+  { id: 'ave', value: 'Avestan' },
+  { id: 'aym', value: 'Aymara' },
+  { id: 'aze', value: 'Azerbaijani' },
+  { id: 'bak', value: 'Bashkir' },
+  { id: 'bam', value: 'Bambara' },
+  { id: 'bel', value: 'Belarusian' },
+  { id: 'ben', value: 'Bengali' },
+  { id: 'bih', value: 'Bihari' },
+  { id: 'bis', value: 'Bislama' }
+]
+
+Fron::Sheet.add_rule 'body', { margin: 0, fontSize: 16.px }, '0'
+
+create_tabs = lambda do |tabs|
+  (1..3).each do |index|
+    el = UI::Tabs::Tab.new
+    el[:tab] = "Tab #{index}"
+    el.html = Lorem.paragraph
+    tabs << el
+  end
+end
+
+data = [
+  { id: 'UI::Button', args: { text: 'Button...' }, options: { text: :input } },
+  { id: 'UI::DatePicker' },
+  { id: 'UI::ColorPicker', args: { value: '#328B3F' } },
+  { id: 'UI::Checkbox', args: { checked: true } },
+  { id: 'UI::Calendar' },
+  { id: 'UI::ColorPanel' },
+  { id: 'UI::Slider' },
+  { id: 'UI::Chooser', args: { items: CHOOSER_ITEMS, placeholder: 'Choose language...' }, options: { disabled: :checkbox, multiple: :checkbox, placeholder: :input, searchable: :checkbox, deselectable: :checkbox } },
+  { id: 'UI::Loader', args: { loading: true } },
+  { id: 'UI::Image', args: { src: 'http://m3.i.pbase.com/o6/90/547190/1/116543443.KT2b8KYm.IMG_9562.jpg', width: 800.px, height: 533.px } },
+  { id: 'UI::Progress', args: { value: 0.1 } },
+  { id: 'UI::Tabs', args: {}, proc: create_tabs },
+  { id: 'UI::NumberRange', args: { affix: 'em', label: 'width:', min: 0, max: 10, step: 0.1 }, options: { affix: :input, label: :input, min: :range, max: :range, step: :range, round: :range } }
+]
+
+main = Main.new
+main.container.sidebar.list.items = data
+main.container.sidebar.list.select main.container.sidebar.list.children.last
+
+DOM::Document.body << main
+Fron::Sheet.render_style_tag