added radio card, progress bar, datepicker

.github/workflows/test.yml

@@ -39,7 +39,7 @@ jobs:
 
       - name: Install templ
         run: |
-          go install github.com/a-h/templ/cmd/[email protected].819
+          go install github.com/a-h/templ/cmd/[email protected].856
           templ --help
 
       - name: Install TailwindCSS

Dockerfile.test

@@ -3,7 +3,7 @@ FROM golang:1.23.2
 WORKDIR /build
 
 COPY scripts/install.sh .
-RUN chmod +x install.sh && ./install.sh && go install github.com/a-h/templ/cmd/[email protected].819
+RUN chmod +x install.sh && ./install.sh && go install github.com/a-h/templ/cmd/[email protected].856
 
 RUN curl -sSfL https://raw.githubusercontent.com/golangci/golangci-lint/master/install.sh | sh -s -- -b $(go env GOPATH)/bin v1.61.0
 

components/base/input/datepicker.templ

@@ -0,0 +1,92 @@
+package input
+
+import "fmt"
+import "github.com/iota-uz/iota-sdk/pkg/composables"
+
+type DatePickerMode string
+type DateSelectorType string
+
+const (
+	DatePickerModeSingle   = DatePickerMode("single")
+	DatePickerModeMultiple = DatePickerMode("multiple")
+	DatePickerModeRange    = DatePickerMode("range")
+)
+
+const (
+	DateSelectorTypeDay   = DateSelectorType("day")
+	DateSelectorTypeMonth = DateSelectorType("month")
+	DateSelectorTypeWeek  = DateSelectorType("week")
+	DateSelectorTypeYear  = DateSelectorType("year")
+)
+
+type DatePickerProps struct {
+	Label        string
+	Placeholder  string
+	Mode         DatePickerMode
+	SelectorType DateSelectorType
+	Attrs        templ.Attributes
+	DateFormat   string
+	LabelFormat  string
+	MinDate      string
+	MaxDate      string
+	Selected     []string
+	Name         string
+	EndName      string
+	StartName    string
+	Form         string
+}
+
+templ DatePicker(props DatePickerProps) {
+	{{ pageCtx := composables.UsePageCtx(ctx) }}
+	{{ selected, _ := templ.JSONString(props.Selected) }}
+	<div x-data={ fmt.Sprintf("datePicker({locale: '%s', mode: '%s', dateFormat: '%s', labelFormat: '%s', minDate: '%s', maxDate: '%s', selectorType: '%s', selected: %s})", pageCtx.Locale.String(), props.Mode, props.DateFormat, props.LabelFormat, props.MinDate, props.MaxDate, props.SelectorType, selected) }>
+		@Text(&Props{
+			Label:       props.Label,
+			Placeholder: props.Placeholder,
+			Attrs: templ.Attributes{
+				"x-ref": "input",
+			},
+		})
+		if props.Mode == DatePickerModeRange {
+			<template x-if="selected.length === 2">
+				<div class="contents">
+					<input
+						type="hidden"
+						x-model="selected[0]"
+						if props.Form != "" {
+							form={ props.Form }
+						}
+						if props.StartName != "" {
+							name={ props.StartName }
+						} else {
+							name={ props.Name }
+						}
+					/>
+					<input
+						type="hidden"
+						x-model="selected[1]"
+						if props.Form != "" {
+							form={ props.Form }
+						}
+						if props.EndName != "" {
+							name={ props.EndName }
+						} else {
+							name={ props.Name }
+						}
+					/>
+				</div>
+			</template>
+		} else {
+			<template x-for="date in selected">
+				<input
+					type="hidden"
+					name={ props.Name }
+					x-model="date"
+					if props.Form != "" {
+						form={ props.Form }
+					}
+				/>
+			</template>
+		}
+	</div>
+}