Merge pull request #61 from qor5/update-autocomplete

Update autocomplete doc

docsrc/dev.sh

@@ -1,5 +1,5 @@
 goModPath(){
-    echo $GOPATH/pkg/mod/$(grep "\t$1" ../go.mod | awk -F ' ' '{print $1"@"$2}')
+    echo $GOPATH/pkg/mod/$(grep --color=never "\t$1" ../go.mod | awk -F ' ' '{print $1"@"$2}')
 }
 
 snippetDirs=(

docsrc/examples/e10_vuetify_autocomplete/page.go

@@ -15,61 +15,41 @@ import (
 	"gorm.io/gorm"
 )
 
-type myFormValue struct {
-	Values1 []string
-	Values2 []string
-	Value3  string
-}
-
-type User struct {
-	Login string
-	Name  string
-}
-
-var selectedItems1 = []*User{
-	{Login: "sam", Name: "Sam"},
-	{Login: "charles", Name: "Charles"},
-}
-
-var options1 = []*User{
-	{Login: "sam", Name: "Sam"},
-	{Login: "john", Name: "John"},
-	{Login: "charles", Name: "Charles"},
-}
-
-var selectedItems2 = []*User{
-	{Login: "charles", Name: "Charles"},
-}
+type (
+	User struct {
+		Login string
+		Name  string
+	}
 
-var selectedItems3 = []*User{
-	{Login: "charles", Name: "Charles"},
-}
+	UserIcons struct {
+		Login string `json:"text"`
+		Name  string `json:"value"`
+		Icon  string `json:"icon"`
+	}
 
-var options2 = []*User{
-	{Login: "sam", Name: "Sam"},
-	{Login: "john", Name: "John"},
-	{Login: "charles", Name: "Charles"},
-}
+	Product struct {
+		ID   uint `gorm:"primarykey"`
+		Name string
+	}
+)
 
-var globalState = &myFormValue{
-	Values1: []string{
-		"sam",
-		"charles",
-	},
-	Values2: []string{
-		"charles",
-	},
-	Value3: "charles",
-}
+var (
+	options = []*User{
+		{Login: "sam", Name: "Sam"},
+		{Login: "john", Name: "John"},
+		{Login: "charles", Name: "Charles"},
+	}
 
-type Product struct {
-	ID   uint `gorm:"primarykey"`
-	Name string
-}
+	iconOptions = []*UserIcons{
+		{Login: "sam", Name: "Sam", Icon: "https://cdn.vuetifyjs.com/images/lists/1.jpg"},
+		{Login: "john", Name: "John", Icon: "https://cdn.vuetifyjs.com/images/lists/2.jpg"},
+		{Login: "charles", Name: "Charles", Icon: "https://cdn.vuetifyjs.com/images/lists/3.jpg"},
+	}
 
-var loadMoreRes *vuetifyx.AutocompleteDataSource
-var pagingRes *vuetifyx.AutocompleteDataSource
-var ExamplePreset *presets.Builder
+	loadMoreRes   *vuetifyx.AutocompleteDataSource
+	pagingRes     *vuetifyx.AutocompleteDataSource
+	ExamplePreset *presets.Builder
+)
 
 func init() {
 	db, err := gorm.Open(sqlite.Open("/tmp/my.db"), &gorm.Config{})
@@ -91,6 +71,9 @@ func init() {
 		&presets.AutocompleteDataSourceConfig{
 			OptionValue: "ID",
 			OptionText:  "Name",
+			OptionIcon: func(product interface{}) string {
+				return fmt.Sprintf("https://cdn.vuetifyjs.com/images/lists/%d.jpg", product.(*Product).ID%4+1)
+			},
 			KeywordColumns: []string{
 				"Name",
 			},
@@ -103,6 +86,9 @@ func init() {
 		&presets.AutocompleteDataSourceConfig{
 			OptionValue: "ID",
 			OptionText:  "Name",
+			OptionIcon: func(product interface{}) string {
+				return fmt.Sprintf("https://cdn.vuetifyjs.com/images/lists/%d.jpg", product.(*Product).ID%4+1)
+			},
 			KeywordColumns: []string{
 				"Name",
 			},
@@ -116,84 +102,53 @@ func init() {
 }
 
 func VuetifyAutocomplete(ctx *web.EventContext) (pr web.PageResponse, err error) {
-	result := h.Ul()
-	for _, v := range globalState.Values1 {
-		result.AppendChildren(h.Li().Text(v))
-	}
 	pr.Body = VContainer(
-		h.H1("An auto complete that you can select multiple options with static data"),
-		VAutocomplete().
-			Items(options1).
+		h.H1("Select many (default)"),
+		vuetifyx.VXAutocomplete().
+			Label("Load options from a list").
+			Items(options).
 			FieldName("Values1").
 			ItemText("Name").
+			ItemValue("Login"),
+
+		h.H1("Select one"),
+		vuetifyx.VXAutocomplete().
+			FieldName("Values2").
+			Label("Load options from a list").
+			Items(options).
+			ItemText("Name").
 			ItemValue("Login").
-			Label("Static Options").
-			Value(globalState.Values1),
-		result,
+			Multiple(false),
+
+		h.H1("Has icon"),
+		vuetifyx.VXAutocomplete().
+			Label("Load options from a list").
+			Items(iconOptions).
+			HasIcon(true),
 
-		h.H1("An auto complete that you can select multiple options from data source by loading more"),
+		h.H1("Load more from remote resource"),
 		vuetifyx.VXAutocomplete().
 			FieldName("Values2").
 			Label("Load options from data source").
 			SetDataSource(loadMoreRes),
 
-		h.H1("An auto complete that you can select multiple options from data source resource by paging"),
+		h.H1("Paging with remote resource"),
 		vuetifyx.VXAutocomplete().
 			FieldName("Values2").
 			Label("Load options from data source").
 			SetDataSource(pagingRes),
 
-		h.H1("VSelect"),
-		VSelect().
-			Items(options1).    // Items is the data source
-			ItemText("Name").   // ItemText is the value that would be displayed to user. the argument is the corresponding field name in the Items. here is user.Name
-			ItemValue("Login"). // ItemValue is the value that will be passed with the form. same with ItemText, here is user.Login
-			FieldName("Value3").
-			Solo(true).
-			Value(globalState.Value3),
-		h.Pre(globalState.Value3),
-		VBtn("Update").
-			Color("success").
-			OnClick("update"),
+		h.H1("Sorting"),
+		vuetifyx.VXAutocomplete().
+			FieldName("Values2").
+			Label("Load options from data source").
+			Sorting(true).
+			SetDataSource(pagingRes).ChipColor("red"),
 	)
 	return
 }
 
-func update(ctx *web.EventContext) (r web.EventResponse, err error) {
-	globalState = &myFormValue{}
-	ctx.MustUnmarshalForm(globalState)
-
-	selectedItems1 = []*User{}
-	for _, login := range globalState.Values1 {
-		for _, u := range options1 {
-			if u.Login == login {
-				selectedItems1 = append(selectedItems1, u)
-			}
-		}
-	}
-
-	selectedItems2 = []*User{}
-	for _, login := range globalState.Values2 {
-		for _, u := range options2 {
-			if u.Login == login {
-				selectedItems2 = append(selectedItems2, u)
-			}
-		}
-	}
-
-	selectedItems3 = []*User{}
-	for _, u := range options1 {
-		if u.Login == globalState.Value3 {
-			selectedItems3 = append(selectedItems3, u)
-		}
-	}
-	r.Reload = true
-
-	return
-}
-
-var VuetifyAutocompletePB = web.Page(VuetifyAutocomplete).
-	EventFunc("update", update)
+var VuetifyAutocompletePB = web.Page(VuetifyAutocomplete)
 
 const VuetifyAutoCompletePath = "/samples/vuetify-auto-complete"
 const VuetifyAutoCompletePresetPath = "/samples/vuetify-auto-complete-preset"

go.mod

@@ -10,7 +10,7 @@ require (
 	github.com/ory/ladon v1.2.0
 	github.com/qor/oss v0.0.0-20210412121326-3c5583a62015
 	github.com/qor5/admin v0.0.0-20230420031413-a0401013364a
-	github.com/qor5/ui v1.0.1-0.20230323061917-a88f4521ec30
+	github.com/qor5/ui v1.0.1-0.20230518014109-9c84f1e3851f
 	github.com/qor5/web v1.2.4
 	github.com/qor5/x v1.2.1-0.20230420023921-8f986dddfeaf
 	github.com/shurcooL/sanitized_anchor_name v1.0.0

go.sum

@@ -298,6 +298,12 @@ github.com/qor5/admin v0.0.0-20230420031413-a0401013364a h1:H0roJ8yzDYAjkNT/RpWP
 github.com/qor5/admin v0.0.0-20230420031413-a0401013364a/go.mod h1:GUwpp9VtbwITOhE2z+gW0rwmy2IEqg/26d4qNH9zoiM=
 github.com/qor5/ui v1.0.1-0.20230323061917-a88f4521ec30 h1:uoZT2RyVu5l2YqaONRjgsdgx1YLwNYGqV63qeYG+5lQ=
 github.com/qor5/ui v1.0.1-0.20230323061917-a88f4521ec30/go.mod h1:bgBqjIytHRdfTsiZea8df/ltAcyQyuHiLbecgo8Iwgw=
+github.com/qor5/ui v1.0.1-0.20230515062823-c4a7a2e6c94e h1:f5POTr3VQZg1Hr5CqOa4JlTAfj8Nv32ygr8q1ZHBBsE=
+github.com/qor5/ui v1.0.1-0.20230515062823-c4a7a2e6c94e/go.mod h1:bgBqjIytHRdfTsiZea8df/ltAcyQyuHiLbecgo8Iwgw=
+github.com/qor5/ui v1.0.1-0.20230515083007-a78fdeee4431 h1:VQvvpHEvp/D3kpz2XHofFfwN/fYIBYWwAa6tRe6TtrU=
+github.com/qor5/ui v1.0.1-0.20230515083007-a78fdeee4431/go.mod h1:bgBqjIytHRdfTsiZea8df/ltAcyQyuHiLbecgo8Iwgw=
+github.com/qor5/ui v1.0.1-0.20230518014109-9c84f1e3851f h1:QeNdEOKgMnNNO3LjPu7ffk58IaHBXgdrq3IysIxi/ec=
+github.com/qor5/ui v1.0.1-0.20230518014109-9c84f1e3851f/go.mod h1:bgBqjIytHRdfTsiZea8df/ltAcyQyuHiLbecgo8Iwgw=
 github.com/qor5/web v1.2.4 h1:CsChErtiYgaMA7CkqkC7nP2YEAOjDZ7JNrrUJTYGNLc=
 github.com/qor5/web v1.2.4/go.mod h1:4VXydGmy5Uwz8rEeKjcmCetciJo8TpU0mnN7Ca5kMR0=
 github.com/qor5/x v1.2.1-0.20230420023921-8f986dddfeaf h1:vbRMFexTTIUBpWR/0HjB4A4BEijN3rO/fYVmFoj3/PQ=