forma 0.0.0 → 0.1.0

data/vendor/assets/stylesheets/forma.css

@@ -1,8 +1,328 @@
-/**
- * forma.less
- * ==========
- * (C) 2013 Dimitri Kurashvili
- */
-.ff {
+.user-select-none {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+.ff-form,
+.ff-table {
+  margin-bottom: 16px;
+}
+.ff-form .ff-action,
+.ff-table .ff-action {
+  margin-left: 4px;
+}
+.ff-form .ff-action:first-child,
+.ff-table .ff-action:first-child {
+  margin-left: 0;
+}
+.ff-form .ff-action img,
+.ff-table .ff-action img {
+  padding-right: 4px;
+  height: 16px;
+  width: 16px;
+}
+.ff-form .ff-title,
+.ff-table .ff-title {
+  position: relative;
+}
+.ff-form .ff-title .ff-active-title,
+.ff-table .ff-title .ff-active-title {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  cursor: pointer;
+  display: inline-block;
+  padding: 4px 8px;
+  font-weight: bold;
   font-size: 14px;
 }
+.ff-form .ff-title .ff-active-title .ff-collapse,
+.ff-table .ff-title .ff-active-title .ff-collapse {
+  display: inline-block;
+  height: 14px;
+  width: 14px;
+  margin-right: 4px;
+  margin-top: 2px;
+}
+.ff-form .ff-title .ff-active-title img,
+.ff-table .ff-title .ff-active-title img {
+  height: 16px;
+  width: 16px;
+  overflow: hidden;
+  margin-right: 4px;
+}
+.ff-form .ff-title .ff-title-actions,
+.ff-table .ff-title .ff-title-actions {
+  position: absolute;
+  right: 0;
+  top: 4px;
+  padding: 0 8px;
+}
+.ff-form .ff-collapse,
+.ff-table .ff-collapse {
+  background: url(/assets/glyphicons-halflings.png) -313px -119px;
+}
+.ff-form .ff-collapsed.ff-collapse,
+.ff-table .ff-collapsed.ff-collapse {
+  background: url(/assets/glyphicons-halflings.png) -456px -72px;
+}
+.ff-form .ff-field-hint,
+.ff-table .ff-field-hint {
+  background: url(/assets/glyphicons-halflings.png) -456px -72px;
+}
+.ff-form .ff-tabs,
+.ff-table .ff-tabs {
+  padding: 4px 0;
+}
+.ff-form .ff-tabs ul.ff-tabs-header,
+.ff-table .ff-tabs ul.ff-tabs-header {
+  list-style-type: none;
+  margin: 0;
+  position: relative;
+  border-bottom: 1px solid #b1b1b1;
+}
+.ff-form .ff-tabs ul.ff-tabs-header li,
+.ff-table .ff-tabs ul.ff-tabs-header li {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  cursor: pointer;
+  display: inline-block;
+  padding: 4px 8px;
+  margin-left: 8px;
+  margin-bottom: -1px;
+  border: 1px solid transparent;
+}
+.ff-form .ff-tabs ul.ff-tabs-header li img,
+.ff-table .ff-tabs ul.ff-tabs-header li img {
+  margin: 0 4px;
+  height: 16px;
+  width: 16px;
+}
+.ff-form .ff-tabs ul.ff-tabs-header li.ff-selected,
+.ff-table .ff-tabs ul.ff-tabs-header li.ff-selected {
+  background: #ffffcc;
+  border: 1px solid #b1b1b1;
+  border-bottom: 1px solid #ffffcc;
+}
+.ff-form .ff-tabs .ff-tab-actions,
+.ff-table .ff-tabs .ff-tab-actions {
+  padding: 4px 8px;
+  background: #ffffcc;
+  border: 1px solid #b1b1b1;
+  margin-top: -1px;
+}
+.ff-form .ff-tabs .ff-cols,
+.ff-table .ff-tabs .ff-cols {
+  margin: 4px 0 0 0;
+  position: relative;
+  font-size: 13px;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-100,
+.ff-table .ff-tabs .ff-cols .ff-col-100 {
+  width: 100%;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-50,
+.ff-table .ff-tabs .ff-cols .ff-col-50 {
+  width: 50%;
+  float: left;
+}
+.ff-form .ff-tabs .ff-cols .ff-col:first-child .ff-col-inner,
+.ff-table .ff-tabs .ff-cols .ff-col:first-child .ff-col-inner {
+  padding-right: 4px;
+}
+.ff-form .ff-tabs .ff-cols .ff-col:last-child .ff-col-inner,
+.ff-table .ff-tabs .ff-cols .ff-col:last-child .ff-col-inner {
+  padding-left: 4px;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner,
+.ff-table .ff-tabs .ff-cols .ff-col-inner {
+  padding: 0;
+  position: relative;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field {
+  position: relative;
+  border-bottom: 1px solid #b1b1b1;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field:first-child,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field:first-child {
+  border-top: 1px solid #b1b1b1;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label {
+  display: table-cell;
+  vertical-align: top;
+  position: relative;
+  width: 150px;
+  padding: 4px 4px 4px 8px;
+  background-color: #c8ffb0;
+  border-right: 3px solid transparent;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label.ff-required,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label.ff-required {
+  border-right: 3px solid #cf0000;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label .ff-field-hint,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label .ff-field-hint {
+  display: block;
+  height: 16px;
+  width: 16px;
+  position: absolute;
+  right: 0;
+  top: 8px;
+  background-position: -96px -96px;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value {
+  display: table-cell;
+  padding: 4px;
+  vertical-align: top;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value .ff-field-actions,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value .ff-field-actions {
+  display: inline-block;
+  border-left: 1px solid #b1b1b1;
+  padding-left: 8px;
+  margin-left: 8px;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-before,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-before {
+  padding-right: 8px;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-after,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-after {
+  padding-left: 8px;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-complex-part,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-complex-part {
+  display: inline-block;
+  padding-right: 8px;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-field,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-field {
+  display: inline-block;
+  border: none;
+  padding-right: 8px;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-link,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-link {
+  margin-left: 8px;
+}
+.ff-form .ff-tabs .ff-cols:after,
+.ff-table .ff-tabs .ff-cols:after {
+  content: ".";
+  display: block;
+  clear: both;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+.ff-form .ff-tabs input,
+.ff-table .ff-tabs input {
+  padding: 4px;
+  margin: 0;
+  font-size: 13px;
+}
+.ff-form .ff-tabs select,
+.ff-table .ff-tabs select {
+  padding: 4px;
+  margin: 0;
+  font-size: 13px;
+  width: auto;
+}
+.ff-form .ff-tabs .ff-error input,
+.ff-table .ff-tabs .ff-error input {
+  border: 1px solid red;
+  color: red;
+  background: #fff8f8;
+}
+.ff-form .ff-form-errors,
+.ff-table .ff-form-errors {
+  margin: 8px;
+  padding: 8px;
+  border: 1px solid red;
+  background: #fee;
+  color: red;
+}
+.ff-form ul.ff-form-errors li,
+.ff-table ul.ff-form-errors li {
+  margin-left: 16px;
+}
+.ff-form .ff-field-errors,
+.ff-table .ff-field-errors {
+  color: red;
+  padding: 4px 0;
+}
+.ff-form .ff-bottom-actions,
+.ff-table .ff-bottom-actions {
+  padding: 8px;
+  border-top: 1px solid #b1b1b1;
+  background: #e0e0e0;
+}
+.ff-form table.ff-common-table,
+.ff-table table.ff-common-table {
+  margin-top: 8px;
+  width: 100%;
+  border-collapse: collapse;
+}
+.ff-form table.ff-common-table thead,
+.ff-table table.ff-common-table thead {
+  text-align: left;
+  border-top: 1px solid #3316ff;
+  border-bottom: 1px solid #3316ff;
+  background: #c8ffb0;
+}
+.ff-form table.ff-common-table thead th,
+.ff-table table.ff-common-table thead th {
+  font-weight: normal;
+  padding: 4px 8px;
+}
+.ff-form table.ff-common-table thead .ff-field-hint,
+.ff-table table.ff-common-table thead .ff-field-hint {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  background-position: -96px -96px;
+}
+.ff-form table.ff-common-table tbody td,
+.ff-table table.ff-common-table tbody td {
+  padding: 4px 8px;
+  border-bottom: 1px solid #3316ff;
+}
+.ff-empty {
+  color: #a0a0a0;
+}
+.ff-table-empty {
+  padding: 32px;
+  text-align: center;
+  background-color: #f6f6f6;
+  border: 1px solid #a0a0a0;
+  border-top: none;
+}
+.ff-map {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.ff-map img {
+  max-width: none;
+}
+.ff-form .ff-title,
+.ff-table .ff-title {
+  background-color: #cfc8ff;
+  border-bottom: 2px solid #3316ff;
+  border-top: 2px solid #3316ff;
+}
+.tooltip-inner {
+  white-space: pre;
+  max-width: none;
+}

data/vendor/less/forma.less

@@ -1,11 +1,141 @@
-/**
- * forma.less
- * ==========
- * (C) 2013 Dimitri Kurashvili
- */
+.user-select-none { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
+.rounded-corners(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; }
 
-@font-size: 14px;
+@halflings: url(/assets/glyphicons-halflings.png);
+@halflings-white: url(/assets/glyphicons-halflings-white.png);
+@border-color: #b1b1b1;
+@selected-tab-color: #ffffcc;
+@base-font-size: 13px;
+@blue-theme: #cfc8ff;
+@blue-theme-border: darken(@blue-theme, 35%);
+@label-background: #c8ffb0;
+// form
 
-.ff {
-  font-size: @font-size;
+.ff-form, .ff-table {
+  margin-bottom: 16px;
+  .ff-action {
+    margin-left: 4px;
+    &:first-child { margin-left: 0; };
+    img { padding-right: 4px; height: 16px; width: 16px; }
+  }
+  .ff-title {
+    position: relative;
+    .ff-active-title { .user-select-none; cursor: pointer; display: inline-block; padding: 4px 8px;
+      font-weight: bold; font-size: 14px;
+      .ff-collapse { display: inline-block; height: 14px; width: 14px; margin-right: 4px; margin-top: 2px; }
+      img { height: 16px; width: 16px; overflow: hidden; margin-right: 4px; }
+    }
+    .ff-title-actions { position: absolute; right: 0; top: 4px; padding: 0 8px; }
+  }
+  .ff-collapse { background:  @halflings -313px -119px }
+  .ff-collapsed.ff-collapse { background: @halflings -456px -72px }
+  .ff-field-hint { background: @halflings -456px -72px }
+  .ff-tabs {
+    padding: 4px 0;
+    ul.ff-tabs-header {
+      list-style-type: none; margin: 0; position: relative;
+      border-bottom: 1px solid @border-color;
+      li { .user-select-none; cursor: pointer; display: inline-block;
+        padding: 4px 8px; margin-left: 8px; margin-bottom: -1px;
+        border: 1px solid transparent;
+        img { margin: 0 4px; height: 16px; width: 16px; }}
+      li.ff-selected {
+        background: @selected-tab-color;
+        border: 1px solid @border-color;
+        border-bottom: 1px solid @selected-tab-color;
+      }
+    }
+    .ff-tab-actions {
+      padding: 4px 8px; background: @selected-tab-color;
+      border: 1px solid @border-color;
+      margin-top: -1px;
+    }
+    .ff-cols {
+      margin: 4px 0 0 0;
+      position: relative;
+      font-size: @base-font-size;
+      .ff-col-100 { width: 100%; }
+      .ff-col-50 { width: 50%; float: left; }
+      .ff-col {
+        &:first-child { .ff-col-inner { padding-right: 4px; } }
+        &:last-child { .ff-col-inner { padding-left: 4px; } }
+      }
+      .ff-col-inner {
+        padding: 0; position: relative;
+        .ff-field {
+          position: relative;
+          border-bottom: 1px solid @border-color;
+          &:first-child { border-top: 1px solid @border-color; }
+          .ff-label { display: table-cell; vertical-align: top;
+            position: relative; width: 150px; padding: 4px 4px 4px 8px;
+            background-color: @label-background; border-right: 3px solid transparent;
+            &.ff-required { border-right: 3px solid #cf0000; }
+            .ff-field-hint { display: block; height: 16px; width: 16px; position: absolute; right: 0; top: 8px; background-position: -96px -96px; }} 
+          .ff-value {
+            display: table-cell; padding: 4px; vertical-align: top;
+            .ff-field-actions { display: inline-block; border-left: 1px solid @border-color; padding-left: 8px; margin-left: 8px; }
+          }
+          .ff-field-before { padding-right: 8px; }
+          .ff-field-after { padding-left: 8px; }
+          .ff-complex-field {
+            .ff-complex-part { display: inline-block; padding-right: 8px; }
+            .ff-field { display: inline-block; border: none; padding-right: 8px; }
+          }
+          .ff-select-field {
+            .ff-select-link { margin-left: 8px; }
+          }
+        }
+      }
+      &:after { content: "."; display: block; clear: both;  width: 0; height: 0; overflow: hidden; }
+    }
+    input { padding: 4px; margin: 0; font-size: @base-font-size; }
+    select { padding: 4px; margin: 0; font-size: @base-font-size; width: auto; }
+    .ff-error input { border: 1px solid red; color: red; background: #fff8f8; }
+  }
+  .ff-form-errors { margin: 8px; padding: 8px; border: 1px solid red; background: #fee; color: red;}
+  ul.ff-form-errors { li { margin-left: 16px; } }
+  .ff-field-errors { color: red; padding: 4px 0;}
+  .ff-bottom-actions { padding: 8px; border-top: 1px solid @border-color; background: #e0e0e0; }
+  table.ff-common-table {
+    margin-top: 8px; width: 100%; border-collapse: collapse;
+    thead { text-align: left;
+      border-top: 1px solid @blue-theme-border;
+      border-bottom: 1px solid @blue-theme-border;
+      background: @label-background;
+      th { font-weight: normal; padding: 4px 8px; } 
+      .ff-field-hint { display: inline-block; height: 16px; width: 16px; background-position: -96px -96px; }
+    }
+    tbody {
+      td { padding: 4px 8px; border-bottom: 1px solid @blue-theme-border; }
+    }
+  }
 }
+.ff-empty { color: #a0a0a0; }
+.ff-table-empty { padding: 32px; text-align: center; background-color: #f6f6f6; border: 1px solid #a0a0a0; border-top: none; }
+
+.ff-map {
+  width:100%; height:100%; overflow:hidden; position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  img { max-width: none; }
+}
+
+// themes
+
+// @red-theme: #ffc8c8;
+
+// @yellow-theme: #efe300;
+// @green-theme: #c8f0c3;
+
+// .form-theme(@theme-color) { .ff-title { background-color: @theme-color; border-bottom: 3px solid darken(@theme-color, 35%); } }
+// .ff-theme-red { .form-theme(@red-theme); }
+// .ff-theme-blue { .form-theme(@blue-theme); }
+// .ff-theme-yellow { .form-theme(@yellow-theme) }
+// .ff-theme-green { .form-theme(@green-theme) }
+.ff-form, .ff-table { .ff-title { background-color: @blue-theme;
+  border-bottom: 2px solid @blue-theme-border;
+  border-top: 2px solid @blue-theme-border;
+} }
+
+// bootstrap fixes
+
+.tooltip-inner { white-space: pre; max-width: none; }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: forma
 version: !ruby/object:Gem::Version
-  version: 0.0.0
+  version: 0.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-03-21 00:00:00.000000000 Z
+date: 2013-05-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -131,7 +131,6 @@ extensions: []
 extra_rdoc_files: []
 files:
 - .gitignore
-- .rspec
 - .travis.yml
 - Gemfile
 - LICENSE.txt
@@ -139,13 +138,27 @@ files:
 - Rakefile
 - forma.gemspec
 - lib/forma.rb
+- lib/forma/action.rb
+- lib/forma/config.rb
+- lib/forma/field.rb
+- lib/forma/form.rb
+- lib/forma/helpers.rb
 - lib/forma/html.rb
-- lib/forma/html/attributes.rb
-- lib/forma/html/element.rb
+- lib/forma/railtie.rb
+- lib/forma/table.rb
+- lib/forma/utils.rb
 - lib/forma/version.rb
-- spec/html/attributes_spec.rb
-- spec/html/element_spec.rb
+- spec/config_spec.rb
+- spec/field_spec.rb
+- spec/form_spec.rb
+- spec/helpers_spec.rb
+- spec/html_spec.rb
 - spec/spec_helper.rb
+- test/field_test.rb
+- test/form_test.rb
+- test/test_helper.rb
+- vendor/assets/images/ff-icons.png
+- vendor/assets/javascripts/forma.js
 - vendor/assets/stylesheets/forma-min.css
 - vendor/assets/stylesheets/forma.css
 - vendor/less/forma.less
@@ -175,6 +188,12 @@ signing_key:
 specification_version: 3
 summary: highly informative and flexible forms with ruby
 test_files:
-- spec/html/attributes_spec.rb
-- spec/html/element_spec.rb
+- spec/config_spec.rb
+- spec/field_spec.rb
+- spec/form_spec.rb
+- spec/helpers_spec.rb
+- spec/html_spec.rb
 - spec/spec_helper.rb
+- test/field_test.rb
+- test/form_test.rb
+- test/test_helper.rb

data/.rspec

@@ -1 +0,0 @@
---color

data/lib/forma/html/attributes.rb

@@ -1,104 +0,0 @@
-# -*- encoding : utf-8 -*-
-module Forma::Html
-
-  class Attributes
-
-    def initialize(attrs = {})
-      self.update_attributes(attrs) if attrs.present?
-    end
-
-    def update_attributes(attrs)
-      attrs.each { |k, v| self[k] = v }
-    end
-
-    def [](k)
-      k = k.to_s
-      v = attributes[k.to_s]
-      case k
-      when 'class' then v = @klass ||= []
-      when 'style' then v = @style ||= {}
-      end
-      v
-    end
-
-    def []=(k,v)
-      k = k.to_s
-      case k
-      when 'class' then assign_class(v)
-      when 'style' then assign_style(v)
-      else attributes[k] = v
-      end
-    end
-
-    def add_class(k)
-      klass << k
-    end
-
-    def add_style(k,v)
-      style[k] = v
-    end
-
-    def klass
-      self[:class]
-    end
-
-    def style
-      self[:style]
-    end
-
-    def empty?
-      attributes.empty? and klass.empty? and style.empty?
-    end
-
-    def html
-      generate_html unless empty?
-    end
-
-    private
-
-    def attributes
-      @attributes ||= {}
-    end
-
-    def assign_class(v)
-      if v.is_a? Array
-        @klass = v
-      elsif v.nil?
-        @klass = []
-      else
-        @klass = [ v ]
-      end
-    end
-
-    def assign_style(v)
-      raise 'style should be a hash' unless v.is_a? Hash
-      @style = v
-    end
-
-    def generate_html
-      h = ''
-      h << ' ' << generate_class_html unless klass.empty?
-      h << ' ' << generate_style_html unless style.empty?
-      h << ' ' << generate_attributes_html unless attributes.empty?
-      h.strip
-    end
-
-    def generate_class_html
-      %Q{class="#{klass.join(' ')}"}
-    end
-
-    def generate_style_html
-      st = []
-      style.each { |k,v| st << "#{k}:#{v}" }
-      %Q{style="#{st.join(';')}"}
-    end
-
-    def generate_attributes_html
-      s = []
-      attributes.each { |k,v| s << %Q{#{k}="#{v}"} }
-      s.join(' ')
-    end
-
-  end
-
-end