Gallery: composite demos

examples/gallery/nav.go

@@ -11,6 +11,26 @@ import (
 
 const overtureID = "overture"
 
+// composition is one PRD §8 demo that combines components.
+type composition struct {
+	ID, Name, ZhName, About, ZhAbout, Icon string
+}
+
+var compositions = []composition{
+	{settingsID, "Settings", "设置页", "Tabs of labelled controls with save, reset and an unsaved-changes flag.", "分页的带标签控件，可保存、重置，并标出未保存的更改。", "settings"},
+	{filesID, "File list", "文件列表", "Filter, select, rename and delete files; drop or pick files to add them.", "筛选、选择、重命名与删除文件；拖入或选取文件以添加。", "folder"},
+	{formID, "Form submission", "表单提交", "Validated fields, an async name check, a guarded submit and its result.", "带校验的字段、异步名称检查、防重复提交及其结果。", "file-text"},
+}
+
+func compositionOf(id string) composition {
+	for _, cp := range compositions {
+		if cp.ID == id {
+			return cp
+		}
+	}
+	panic("gallery: no composition " + id)
+}
+
 // categoryZh names each PRD group in Chinese.
 var categoryZh = map[string]string{
 	"Layout": "布局与桌面", "Display": "基础展示", "Inputs": "基础输入", "Choices": "选择控件",
@@ -47,6 +67,16 @@ func (g *gallery) sections() []mujica.SidebarSection {
 	out := []mujica.SidebarSection{{Title: g.t("Overture", "序章"), Items: []mujica.SidebarItem{
 		{ID: overtureID, Label: g.t("Overture", "序章"), Icon: icons.Must("house")},
 	}}}
+	var comps []mujica.SidebarItem
+	q := strings.ToLower(strings.TrimSpace(g.query))
+	for _, cp := range compositions {
+		if q == "" || strings.Contains(strings.ToLower(cp.ID+" "+cp.Name+" "+cp.ZhName), q) {
+			comps = append(comps, mujica.SidebarItem{ID: cp.ID, Label: g.t(cp.Name, cp.ZhName), Icon: icons.Must(cp.Icon)})
+		}
+	}
+	if len(comps) > 0 {
+		out = append(out, mujica.SidebarSection{Title: g.t("Compositions", "组合示例"), Items: comps})
+	}
 	index := map[string]int{}
 	for _, p := range g.pages {
 		if !matches(p, g.query) {
@@ -87,6 +117,10 @@ func (g *gallery) commandPalette(c *ui.Context) {
 		{ID: "density", Label: g.t("Cycle density", "切换密度"), Group: g.t("Window", "窗口"), Keywords: []string{"compact", "紧凑"}},
 		{ID: "locale", Label: g.t("Switch to Chinese", "切换到英文"), Group: g.t("Window", "窗口"), Keywords: []string{"language", "语言"}},
 	}
+	for _, cp := range compositions {
+		cmds = append(cmds, mujica.Command{ID: "page:" + cp.ID, Label: g.t(cp.Name, cp.ZhName), Group: g.t("Compositions", "组合示例"),
+			Keywords: []string{cp.Name, cp.ZhName, "composition", "组合"}})
+	}
 	for _, p := range g.pages {
 		cmds = append(cmds, mujica.Command{ID: "page:" + p.ID, Label: p.ID + " " + g.pageName(p), Group: g.categoryName(p.Category),
 			Keywords: []string{p.Name, p.ZhName, p.Category, categoryZh[p.Category]}})