lissio 0.1.0.beta3 → 0.1.0

data/opal/lissio/component/tooltip.rb

@@ -11,7 +11,7 @@ class Tooltip < Lissio::Component
 
 	def initialize(*args, &block)
 		if Lissio::Component === args.first
-			super(args.shift)
+			@parent = args.shift
 		end
 
 		@options = DEFAULTS.merge(args.first)
@@ -151,7 +151,6 @@ private
 
 	def apply(placement)
 		position = offset(placement)
-		size     = element.size
 
 		margin_top  = element.style['margin-top'].to_u
 		margin_left = element.style['margin-left'].to_u
@@ -171,200 +170,189 @@ private
 	end
 
 	css do
-		rule '.tooltip' do
-			position :absolute
-			z index: 9001
+		position :absolute
+		z index: 9001
 
-			display :block
-			visibility :visible
+		display :block
+		visibility :visible
 
-			font size: 12.px
-			line height: 1.4
+		font size: 12.px
+		line height: 1.4
 
-			opacity 0
+		opacity 0
 
-			rule '&.in' do
-				opacity 0.9
-			end
+		rule '&.in' do
+			opacity 0.9
+		end
 
-			rule '&.top' do
-				margin top: -3.px
-				padding 5.px, 0
-			end
+		rule '&.top' do
+			margin top: -3.px
+			padding 5.px, 0
+		end
 
-			rule '&.right' do
-				margin left: 3.px
-				padding 0, 5.px
-			end
+		rule '&.right' do
+			margin left: 3.px
+			padding 0, 5.px
+		end
 
-			rule '&.bottom' do
-				margin top: 3.px
-				padding 5.px, 0
-			end
+		rule '&.bottom' do
+			margin top: 3.px
+			padding 5.px, 0
+		end
 
-			rule '&.left' do
-				margin left: -3.px
-				padding 0, 5.px
-			end
+		rule '&.left' do
+			margin left: -3.px
+			padding 0, 5.px
+		end
 
-			rule '.tooltip-inner' do
-				max width: 200.px
-				padding 3.px, 8.px
-				color '#fff'
+		rule '.tooltip-inner' do
+			max width: 200.px
+			padding 3.px, 8.px
+			color '#fff'
 
-				text align:      :center,
-			       decoration: :none
+			text align:      :center,
+			     decoration: :none
 
-				background color: '#000'
-				border radius: 4.px
-			end
+			background color: '#000'
+			border radius: 4.px
+		end
 
-			rule '.tooltip-arrow' do
-				position :absolute
-				width 0
-				height 0
+		rule '.tooltip-arrow' do
+			position :absolute
+			width 0
+			height 0
 
-				border color: :transparent,
-			         style: :solid
-			end
+			border color: :transparent,
+			       style: :solid
+		end
 
-			rule '&.top .tooltip-arrow' do
-				bottom 0
-				left 50.%
+		rule '&.top .tooltip-arrow' do
+			bottom 0
+			left 50.%
 
-				margin left: -5.px
-				border width: [5.px, 5.px, 0],
-				       color: { top: '#000' }
-			end
+			margin left: -5.px
+			border width: [5.px, 5.px, 0],
+				     color: { top: '#000' }
+		end
 
-			rule '&.top-left .tooltip-arrow' do
-				bottom 0
-				left 5.px
+		rule '&.top-left .tooltip-arrow' do
+			bottom 0
+			left 5.px
 
-				border width: [5.px, 5.px, 0],
-				       color: { top: '#000' }
-			end
+			border width: [5.px, 5.px, 0],
+				     color: { top: '#000' }
+		end
 
-			rule '&.top-right .tooltip-arrow' do
-				bottom 0
-				right 5.px
+		rule '&.top-right .tooltip-arrow' do
+			bottom 0
+			right 5.px
 
-				border width: [5.px, 5.px, 0],
-				       color: { top: '#000' }
-			end
+			border width: [5.px, 5.px, 0],
+				     color: { top: '#000' }
+		end
 
-			rule '&.right .tooltip-arrow' do
-				top 50.%
-				left 0
+		rule '&.right .tooltip-arrow' do
+			top 50.%
+			left 0
 
-				margin top: -5.px
-				border width: [5.px, 5.px, 5.px, 0],
-				       color: { right: '#000' }
-			end
+			margin top: -5.px
+			border width: [5.px, 5.px, 5.px, 0],
+				     color: { right: '#000' }
+		end
 
-			rule '&.left .tooltip-arrow' do
-				top 50.%
-				right 0
+		rule '&.left .tooltip-arrow' do
+			top 50.%
+			right 0
 
-				margin top: -5.px
-				border width: [5.px, 0, 5.px, 5.px],
-				       color: { left: '#000' }
-			end
+			margin top: -5.px
+			border width: [5.px, 0, 5.px, 5.px],
+				     color: { left: '#000' }
+		end
 
-			rule '&.bottom .tooltip-arrow' do
-				top 0
-				left 50.%
+		rule '&.bottom .tooltip-arrow' do
+			top 0
+			left 50.%
 
-				margin left: -5.px
-				border width: [0, 5.px, 5.px],
-				       color: { bottom: '#000' }
-			end
+			margin left: -5.px
+			border width: [0, 5.px, 5.px],
+				     color: { bottom: '#000' }
+		end
 
-			rule '&.bottom-left .tooltip-arrow' do
-				top 0
-				left 5.px
+		rule '&.bottom-left .tooltip-arrow' do
+			top 0
+			left 5.px
 
-				border width: [0, 5.px, 5.px],
-				       color: { bottom: '#000' }
-			end
+			border width: [0, 5.px, 5.px],
+				     color: { bottom: '#000' }
+		end
 
-			rule '&.bottom-right .tooltip-arrow' do
-				top 0
-				right 5.px
+		rule '&.bottom-right .tooltip-arrow' do
+			top 0
+			right 5.px
 
-				border width: [0, 5.px, 5.px],
-				       color: { bottom: '#000' }
-			end
+			border width: [0, 5.px, 5.px],
+				     color: { bottom: '#000' }
 		end
 	end
 
-	def self.customize(*args, &block)
-		if args.length == 1
-			options = args.first
-		else
-			name, options = args
-		end
-
-		name    ||= "tooltip-custom-#{rand(10000)}"
-		options ||= {}
-
+	def self.customize(options = {}, &block)
 		Class.new(self) {
-			tag class: [:tooltip, name]
-
 			css do
-				rule ".tooltip.#{name}" do
-					instance_exec(&block) if block
-
-					if value = options[:opacity]
-						rule '&.in' do
-							opacity value
-						end
+				if value = options[:opacity]
+					rule '&.in' do
+						opacity value
 					end
+				end
 
-					if value = options[:foreground] || options[:fg]
-						rule '.tooltip-inner' do
-							color value
-						end
+				if value = options[:foreground] || options[:fg]
+					rule '.tooltip-inner' do
+						color value
 					end
+				end
 
-					if value = options[:background] || options[:bg]
-						rule '.tooltip-inner' do
-							background color: value
-						end
+				if value = options[:background] || options[:bg]
+					rule '.tooltip-inner' do
+						background color: value
+					end
 
-						rule '&.top .tooltip-arrow' do
-							border color: { top: value }
-						end
+					rule '&.top .tooltip-arrow' do
+						border color: { top: value }
+					end
 
-						rule '&.top-right .tooltip-arrow' do
-							border color: { top: value }
-						end
+					rule '&.top-right .tooltip-arrow' do
+						border color: { top: value }
+					end
 
-						rule '&.top-left .tooltip-arrow' do
-							border color: { top: value }
-						end
+					rule '&.top-left .tooltip-arrow' do
+						border color: { top: value }
+					end
 
-						rule '&.right .tooltip-arrow' do
-							border color: { right: value }
-						end
+					rule '&.right .tooltip-arrow' do
+						border color: { right: value }
+					end
 
-						rule '&.left .tooltip-arrow' do
-							border color: { right: value }
-						end
+					rule '&.left .tooltip-arrow' do
+						border color: { right: value }
+					end
 
-						rule '&.bottom .tooltip-arrow' do
-							border color: { bottom: value }
-						end
+					rule '&.bottom .tooltip-arrow' do
+						border color: { bottom: value }
+					end
 
-						rule '&.bottom-right .tooltip-arrow' do
-							border color: { bottom: value }
-						end
+					rule '&.bottom-right .tooltip-arrow' do
+						border color: { bottom: value }
+					end
 
-						rule '&.bottom-left .tooltip-arrow' do
-							border color: { bottom: value }
-						end
+					rule '&.bottom-left .tooltip-arrow' do
+						border color: { bottom: value }
 					end
 				end
+
+				if block.arity == 0
+					instance_exec(&block)
+				else
+					block.call(self)
+				end if block
 			end
 		}
 	end

data/opal/lissio/model.rb

@@ -15,13 +15,60 @@ module Lissio
 
 class Model
 	class Property
-		attr_reader :name, :as
+		def self.coerce(data, as)
+			return data if !as || as === data
+
+			if Module === as
+				if as.ancestors.include?(Model)
+					if as.primary && as.primary.as === data
+						return data
+					else
+						return as.new(*data)
+					end
+				end
+			end
+
+			case
+			when Proc === as
+				as.call(data)
+
+			when Array === as
+				data.map { |d| coerce(d, as.first) }
+
+			when as == Boolean
+				!!data
+
+			when as == Array
+				Array(data)
+
+			when as == String
+				data.to_s
+
+			when as == Symbol
+				data.to_sym
+
+			when as == Integer
+				data.to_i
+
+			when as == Float
+				data.to_f
+
+			when as == Time
+				Time.parse(data)
+
+			else
+				as.new(*data)
+			end
+		end
+
+		attr_reader :name, :as, :key
 
 		def initialize(name, options)
 			@name    = name
 			@default = options[:default]
 			@primary = options[:primary] || false
 			@as      = options[:as]
+			@key     = options[:key]
 		end
 
 		def primary?
@@ -38,27 +85,8 @@ class Model
 
 		def new(data)
 			return default if data.nil?
-			return data if !@as || @as === data
 
-			if @as.ancestors.include?(Model)
-				if @as.primary.as === data
-					return data
-				else
-					return @as.new(*data)
-				end
-			end
-
-			case
-			when @as == Boolean then !!data
-			when @as == Array   then Array(data)
-			when @as == String  then data.to_s
-			when @as == Symbol  then data.to_sym
-			when @as == Integer then data.to_i
-			when @as == Float   then data.to_f
-			when @as == Time    then Time.parse(data)
-			when Proc === @as   then @as.call(data)
-			else                     @as.new(*data)
-			end
+			Property.coerce(data, @as)
 		end
 
 		def define(klass)
@@ -68,15 +96,27 @@ class Model
 			if Class === @as && @as.ancestors.include?(Model)
 				klass.define_method name do
 					if id = instance_variable_get("@#{name}")
-						as.fetch(id)
+						if as === id
+							Promise.value(id)
+						else
+							as.fetch(id)
+						end
 					end
 				end
 
+				klass.define_method "#{name}!" do
+					instance_variable_get("@#{name}")
+				end
+
 				klass.define_method "#{name}=" do |value|
-					if instance_variable_get("@#{name}") != value.id!
+					if as === value
+						value = value.id!
+					end
+
+					if instance_variable_get("@#{name}") != value
 						@changed << name
 
-						instance_variable_set "@#{name}", value.id!
+						instance_variable_set "@#{name}", value
 					end
 				end
 			else
@@ -156,7 +196,7 @@ class Model
 
 		if data
 			properties.each {|name, property|
-				instance_variable_set "@#{name}", property.new(data[name])
+				instance_variable_set "@#{name}", property.new(data[property.key || name])
 			}
 		end
 	end