add comp-tabs, comp-placeholder; alpha release

Author: ChenYong

calcit.cirru

@@ -20,7 +20,7 @@
   "author": "jiyinyiyong",
   "license": "MIT",
   "devDependencies": {
-    "shadow-cljs": "^2.9.10"
+    "shadow-cljs": "^2.9.12"
   },
   "dependencies": {}
 }

package.json

@@ -1,4 +1,4 @@
-{:version "0.3.14"
+{:version "0.3.15-a1"
  :group-id "respo"
  :artifact-id "ui"
  :description "Tiny collection of styles used in Respo"

release.edn

@@ -3,8 +3,8 @@
   :cache-blockers #{cumulo-util.build}
   :dependencies [
     [mvc-works/hsl "0.1.2"]
-    [mvc-works/shell-page "0.1.10"]
-    [respo "0.12.1"]
+    [mvc-works/shell-page "0.1.13-a3"]
+    [respo "0.12.3-a1"]
     [respo/router "0.4.0"]
     [respo/markdown "0.2.5"]
     [cumulo/util "0.1.12"]

shadow-cljs.edn

@@ -0,0 +1,49 @@
+
+(ns respo-ui.comp
+  (:require [respo.core
+             :refer
+             [defcomp div list-> input textarea button span select option a <>]]
+            [respo.comp.space :refer [=<]]
+            [respo-ui.core :as ui]
+            [hsl.core :refer [hsl]]))
+
+(defcomp
+ comp-placeholder
+ (text)
+ (div
+  {:style (merge
+           ui/center
+           {:padding 16,
+            :font-family ui/font-fancy,
+            :color (hsl 0 0 80),
+            :font-size 12,
+            :font-style :italic})}
+  (<> text)))
+
+(defn comp-sidebar [] )
+
+(defcomp
+ comp-tabs
+ (options tabs on-route)
+ (list->
+  {:style (merge
+           (if (:vertical? options) ui/column ui/row)
+           {:padding "8px 16px 0", :width (:width options)}
+           (:style options))}
+  (->> tabs
+       (map
+        (fn [info]
+          [(:name info)
+           (div
+            {:style (merge
+                     {:padding "0 8px",
+                      :font-family ui/font-fancy,
+                      :font-weight 300,
+                      :cursor :pointer,
+                      :font-size 16,
+                      :color (hsl 0 0 70),
+                      :line-height "32px"}
+                     (if (= (:selected options) (:name info))
+                       {:font-weight 500, :color (hsl 0 0 30)})),
+             :on-click (fn [e d!] (on-route info d!))}
+            (<> (:title info)))])))))

src/respo_ui/comp.cljs

@@ -1,6 +1,74 @@
 
 (ns respo-ui.comp.components
-  (:require [respo.core :refer [defcomp div a <>]] [respo.comp.space :refer [=<]]))
+  (:require [respo.core :refer [defcomp >> div a <> pre code]]
+            [respo.comp.space :refer [=<]]
+            [respo-ui.comp :refer [comp-tabs comp-placeholder]]
+            [respo-ui.core :as ui]
+            [hsl.core :refer [hsl]]))
+
+(defcomp
+ comp-snippet
+ (text)
+ (pre
+  {:style {:font-size 12,
+           :font-family ui/font-code,
+           :color (hsl 0 0 40),
+           :line-height "18px"}}
+  (code {:inner-text text})))
+
+(def style-title
+  {:margin-top 40, :font-size 18, :font-family ui/font-fancy, :color (hsl 0 0 70)})
+
+(defcomp
+ comp-demo-placeholder
+ ()
+ (div
+  {:style style-title}
+  (div {} (<> "Placeholder demo"))
+  (comp-placeholder "This is a demo")
+  (comp-placeholder "中文 Demo")
+  (comp-snippet
+   "respo-ui.comp/comp-placeholder\n\n(comp-placeholder \"demo\")\n(comp-placeholder \"中文\")")))
+
+(defcomp
+ comp-demo-tabs
+ (states)
+ (let [cursor (:cursor states)
+       state (or (:data states) {:selected nil})
+       en-tabs [{:name :book, :title "Book"}
+                {:name :card, :title "Card"}
+                {:name :pl, :title "Programming language"}]]
+   (div
+    {}
+    (div {:style style-title} (<> "Tabs demo"))
+    (comp-tabs
+     {:selected (:selected state)}
+     en-tabs
+     (fn [info d!]
+       (println "selected" info)
+       (d! cursor (assoc state :selected (:name info)))))
+    (comp-tabs
+     {:selected (:selected state)}
+     [{:name :book, :title "书本"} {:name :card, :title "纸牌"} {:name :pl, :title "编程语言"}]
+     (fn [info d!]
+       (println "selected" info)
+       (d! cursor (assoc state :selected (:name info)))))
+    (comp-tabs
+     {:selected (:selected state), :style {:border-bottom (str "1px solid " (hsl 0 0 90))}}
+     en-tabs
+     (fn [info d!]
+       (println "selected" info)
+       (d! cursor (assoc state :selected (:name info)))))
+    (comp-snippet
+     "respo-ui.comp/comp-tabs\n\n(comp-tabs\n {:selected (:selected state) :style {}}\n [{:name :book, :title \"Book\"}\n  {:name :card, :title \"Card\"}\n  {:name :pl, :title \"Programming language\"}]\n (fn [info d!]\n   (println \"selected\" info)\n   (d! cursor (assoc state :selected (:name info)))))")
+    (comp-tabs
+     {:selected (:selected state), :vertical? true, :width 200, :style {}}
+     en-tabs
+     (fn [info d!]
+       (println "selected" info)
+       (d! cursor (assoc state :selected (:name info)))))
+    (comp-snippet
+     "respo-ui.comp/comp-tabs\n\n(comp-tabs\n {:selected (:selected state) :style {}, :vertical? true, :width 200}\n tabs (fn [info d!]))"))))
 
 (defn render-entry [url title] (div {} (a {:href url, :inner-text title})))
 
@@ -9,7 +77,7 @@
  (states)
  (let [state (or (:data states) false)]
    (div
-    {}
+    {:style {:padding-bottom "50vh"}}
     (div
      {}
      (<> "There are also components follow the guidelines of Respo UI:")
@@ -26,4 +94,6 @@
      (a
       {:href "https://github.com/Respo/respo-ui/blob/master/src/respo_ui/comp/components.cljs",
        :target "_blank",
-       :inner-text "Source"})))))
+       :inner-text "Source"}))
+    (comp-demo-placeholder)
+    (comp-demo-tabs (>> states :tabs)))))

src/respo_ui/comp/components.cljs

@@ -20,7 +20,7 @@
    (merge
     base-info
     {:styles [(<< "http://~(get-ip!):8100/main.css") "/entry/main.css"],
-     :scripts ["/client.js"],
+     :scripts [{:src "/client.js", :defer? true}],
      :inline-styles []})))
 
 (def page-routes
@@ -38,7 +38,7 @@
      (merge
       base-info
       {:styles [(:release-ui config/site)],
-       :scripts (map #(-> % :output-name prefix-cdn) assets),
+       :scripts (map #({:src (-> % :output-name prefix-cdn), :defer? true}) assets),
        :ssr "respo-ssr",
        :inline-styles [(slurp "./entry/main.css")]}))))