@kupola/kupola 1.2.0

package/dist/utils/utils/Kupola.cs

@@ -0,0 +1,77 @@
+using System;
+
+namespace Kupola
+{
+    public static class Components
+    {
+        public static string Button(string label, string variant = "brand", string size = "md")
+        {
+            return $"<button class=\"ds-btn ds-btn--{variant} ds-btn--{size}\">{label}</button>";
+        }
+
+        public static string Input(string label, string name, string placeholder, string validate = "")
+        {
+            string validateAttr = string.IsNullOrEmpty(validate) ? "" : $" data-validate=\"{validate}\"";
+            return $@"<div class=""ds-form-item"">
+    <label class=""ds-form-item__label"">{label}</label>
+    <input type=""text"" class=""ds-input"" name=""{name}"" placeholder=""{placeholder}""{validateAttr}>
+</div>";
+        }
+
+        public static string Card(string title, string body, string footer = "")
+        {
+            string footerHtml = string.IsNullOrEmpty(footer) ? "" : $"<div class=\"ds-card__footer\">{footer}</div>";
+            return $@"<div class=""ds-card"">
+    <div class=""ds-card__header"">
+        <h3 class=""ds-card__title"">{title}</h3>
+    </div>
+    <div class=""ds-card__body"">{body}</div>
+    {footerHtml}
+</div>";
+        }
+
+        public static string StatCard(string title, string value, string trend = "", string trendType = "up")
+        {
+            string trendHtml = string.IsNullOrEmpty(trend) ? "" : 
+                $"<span class=\"ds-stat-card__trend {(trendType == "down" ? "ds-stat-card__trend--down" : "ds-stat-card__trend--up")}\">{trend}</span>";
+            return $@"<div class=""ds-stat-card"">
+    <div class=""ds-stat-card__title"">{title}</div>
+    <div class=""ds-stat-card__value"">{value}</div>
+    {trendHtml}
+</div>";
+        }
+
+        public static string Badge(string text, string variant = "default")
+        {
+            return $"<span class=\"ds-badge ds-badge--{variant}\">{text}</span>";
+        }
+
+        public static string Avatar(string initials, string size = "md", string variant = "default")
+        {
+            return $"<div class=\"ds-avatar ds-avatar--{size} ds-avatar--{variant}\">{initials}</div>";
+        }
+
+        public static string ThemeScript(string theme = "dark", string brand = "zengqing")
+        {
+            return $@"<script>
+    if (typeof setTheme === 'function') setTheme('{theme}');
+    if (typeof setBrand === 'function') setBrand('{brand}');
+</script>";
+        }
+
+        public static string DataBind(string key, string bindType)
+        {
+            return $"data-bind=\"{key}:{bindType}\"";
+        }
+
+        public static string DataComponent(string name)
+        {
+            return $"data-component=\"{name}\"";
+        }
+
+        public static string DataValidate(string rules)
+        {
+            return $"data-validate=\"{rules}\"";
+        }
+    }
+}

package/dist/utils/utils/Kupola.java

@@ -0,0 +1,104 @@
+package com.kupola;
+
+public class Kupola {
+
+    public static String button(String label, String variant, String size) {
+        if (variant == null || variant.isEmpty()) variant = "brand";
+        if (size == null || size.isEmpty()) size = "md";
+        return String.format(
+            "<button class=\"ds-btn ds-btn--%s ds-btn--%s\">%s</button>",
+            variant, size, label
+        );
+    }
+
+    public static String input(String label, String name, String placeholder, String validate) {
+        String validateAttr = "";
+        if (validate != null && !validate.isEmpty()) {
+            validateAttr = String.format(" data-validate=\"%s\"", validate);
+        }
+        return String.format(
+            "<div class=\"ds-form-item\">\n" +
+            "    <label class=\"ds-form-item__label\">%s</label>\n" +
+            "    <input type=\"text\" class=\"ds-input\" name=\"%s\" placeholder=\"%s\"%s>\n" +
+            "</div>",
+            label, name, placeholder, validateAttr
+        );
+    }
+
+    public static String card(String title, String body, String footer) {
+        String footerHtml = "";
+        if (footer != null && !footer.isEmpty()) {
+            footerHtml = String.format("<div class=\"ds-card__footer\">%s</div>", footer);
+        }
+        return String.format(
+            "<div class=\"ds-card\">\n" +
+            "    <div class=\"ds-card__header\">\n" +
+            "        <h3 class=\"ds-card__title\">%s</h3>\n" +
+            "    </div>\n" +
+            "    <div class=\"ds-card__body\">%s</div>\n" +
+            "    %s\n" +
+            "</div>",
+            title, body, footerHtml
+        );
+    }
+
+    public static String statCard(String title, String value, String trend, String trendType) {
+        String trendHtml = "";
+        if (trend != null && !trend.isEmpty()) {
+            String trendClass = "ds-stat-card__trend--up";
+            if ("down".equals(trendType)) {
+                trendClass = "ds-stat-card__trend--down";
+            }
+            trendHtml = String.format("<span class=\"ds-stat-card__trend %s\">%s</span>", trendClass, trend);
+        }
+        return String.format(
+            "<div class=\"ds-stat-card\">\n" +
+            "    <div class=\"ds-stat-card__title\">%s</div>\n" +
+            "    <div class=\"ds-stat-card__value\">%s</div>\n" +
+            "    %s\n" +
+            "</div>",
+            title, value, trendHtml
+        );
+    }
+
+    public static String badge(String text, String variant) {
+        if (variant == null || variant.isEmpty()) variant = "default";
+        return String.format(
+            "<span class=\"ds-badge ds-badge--%s\">%s</span>",
+            variant, text
+        );
+    }
+
+    public static String avatar(String initials, String size, String variant) {
+        if (size == null || size.isEmpty()) size = "md";
+        if (variant == null || variant.isEmpty()) variant = "default";
+        return String.format(
+            "<div class=\"ds-avatar ds-avatar--%s ds-avatar--%s\">%s</div>",
+            size, variant, initials
+        );
+    }
+
+    public static String themeScript(String theme, String brand) {
+        if (theme == null || theme.isEmpty()) theme = "dark";
+        if (brand == null || brand.isEmpty()) brand = "zengqing";
+        return String.format(
+            "<script>\n" +
+            "    if (typeof setTheme === 'function') setTheme('%s');\n" +
+            "    if (typeof setBrand === 'function') setBrand('%s');\n" +
+            "</script>",
+            theme, brand
+        );
+    }
+
+    public static String dataBind(String key, String bindType) {
+        return String.format("data-bind=\"%s:%s\"", key, bindType);
+    }
+
+    public static String dataComponent(String name) {
+        return String.format("data-component=\"%s\"", name);
+    }
+
+    public static String dataValidate(String rules) {
+        return String.format("data-validate=\"%s\"", rules);
+    }
+}

package/dist/utils/utils/kupola.go

@@ -0,0 +1,120 @@
+package kupola
+
+import (
+	"fmt"
+	"html/template"
+)
+
+func Button(label string, variant string, size string) template.HTML {
+	if variant == "" {
+		variant = "brand"
+	}
+	if size == "" {
+		size = "md"
+	}
+	return template.HTML(fmt.Sprintf(
+		`<button class="ds-btn ds-btn--%s ds-btn--%s">%s</button>`,
+		variant, size, label,
+	))
+}
+
+func Input(label string, name string, placeholder string, validate string) template.HTML {
+	validateAttr := ""
+	if validate != "" {
+		validateAttr = fmt.Sprintf(` data-validate="%s"`, validate)
+	}
+	return template.HTML(fmt.Sprintf(
+		`<div class="ds-form-item">
+			<label class="ds-form-item__label">%s</label>
+			<input type="text" class="ds-input" name="%s" placeholder="%s"%s>
+		</div>`,
+		label, name, placeholder, validateAttr,
+	))
+}
+
+func Card(title string, body string, footer string) template.HTML {
+	footerHTML := ""
+	if footer != "" {
+		footerHTML = fmt.Sprintf(`<div class="ds-card__footer">%s</div>`, footer)
+	}
+	return template.HTML(fmt.Sprintf(
+		`<div class="ds-card">
+			<div class="ds-card__header">
+				<h3 class="ds-card__title">%s</h3>
+			</div>
+			<div class="ds-card__body">%s</div>
+			%s
+		</div>`,
+		title, body, footerHTML,
+	))
+}
+
+func StatCard(title string, value string, trend string, trendType string) template.HTML {
+	trendHTML := ""
+	if trend != "" {
+		trendClass := "ds-stat-card__trend--up"
+		if trendType == "down" {
+			trendClass = "ds-stat-card__trend--down"
+		}
+		trendHTML = fmt.Sprintf(`<span class="ds-stat-card__trend %s">%s</span>`, trendClass, trend)
+	}
+	return template.HTML(fmt.Sprintf(
+		`<div class="ds-stat-card">
+			<div class="ds-stat-card__title">%s</div>
+			<div class="ds-stat-card__value">%s</div>
+			%s
+		</div>`,
+		title, value, trendHTML,
+	))
+}
+
+func Badge(text string, variant string) template.HTML {
+	if variant == "" {
+		variant = "default"
+	}
+	return template.HTML(fmt.Sprintf(
+		`<span class="ds-badge ds-badge--%s">%s</span>`,
+		variant, text,
+	))
+}
+
+func Avatar(initials string, size string, variant string) template.HTML {
+	if size == "" {
+		size = "md"
+	}
+	if variant == "" {
+		variant = "default"
+	}
+	return template.HTML(fmt.Sprintf(
+		`<div class="ds-avatar ds-avatar--%s ds-avatar--%s">%s</div>`,
+		size, variant, initials,
+	))
+}
+
+func ThemeScript(theme string, brand string) template.HTML {
+	if theme == "" {
+		theme = "dark"
+	}
+	if brand == "" {
+		brand = "zengqing"
+	}
+	return template.HTML(fmt.Sprintf(
+		`<script>
+			if (typeof setTheme === 'function') setTheme('%s');
+			if (typeof setBrand === 'function') setBrand('%s');
+		</script>`,
+		theme, brand,
+	))
+}
+
+func DataBind(key string, bindType string) template.HTML {
+	return template.HTML(fmt.Sprintf(`data-bind="%s:%s"`, key, bindType))
+}
+
+func DataComponent(name string) template.HTML {
+	return template.HTML(fmt.Sprintf(`data-component="%s"`, name))
+}
+
+func DataValidate(rules string) template.HTML {
+	return template.HTML(fmt.Sprintf(`data-validate="%s"`, rules))
+}

package/dist/utils/utils/kupola.js

@@ -0,0 +1,63 @@
+export function button(label, variant = 'brand', size = 'md') {
+    return `<button class="ds-btn ds-btn--${variant} ds-btn--${size}">${label}</button>`;
+}
+
+export function input(label, name, placeholder, validate = '') {
+    const validateAttr = validate ? ` data-validate="${validate}"` : '';
+    return `
+<div class="ds-form-item">
+    <label class="ds-form-item__label">${label}</label>
+    <input type="text" class="ds-input" name="${name}" placeholder="${placeholder}"${validateAttr}>
+</div>`;
+}
+
+export function card(title, body, footer = '') {
+    const footerHtml = footer ? `<div class="ds-card__footer">${footer}</div>` : '';
+    return `
+<div class="ds-card">
+    <div class="ds-card__header">
+        <h3 class="ds-card__title">${title}</h3>
+    </div>
+    <div class="ds-card__body">${body}</div>
+    ${footerHtml}
+</div>`;
+}
+
+export function statCard(title, value, trend = '', trendType = 'up') {
+    const trendHtml = trend ? 
+        `<span class="ds-stat-card__trend ${trendType === 'down' ? 'ds-stat-card__trend--down' : 'ds-stat-card__trend--up'}">${trend}</span>` : '';
+    return `
+<div class="ds-stat-card">
+    <div class="ds-stat-card__title">${title}</div>
+    <div class="ds-stat-card__value">${value}</div>
+    ${trendHtml}
+</div>`;
+}
+
+export function badge(text, variant = 'default') {
+    return `<span class="ds-badge ds-badge--${variant}">${text}</span>`;
+}
+
+export function avatar(initials, size = 'md', variant = 'default') {
+    return `<div class="ds-avatar ds-avatar--${size} ds-avatar--${variant}">${initials}</div>`;
+}
+
+export function themeScript(theme = 'dark', brand = 'zengqing') {
+    return `
+<script>
+    if (typeof setTheme === 'function') setTheme('${theme}');
+    if (typeof setBrand === 'function') setBrand('${brand}');
+</script>`;
+}
+
+export function dataBind(key, bindType) {
+    return `data-bind="${key}:${bindType}"`;
+}
+
+export function dataComponent(name) {
+    return `data-component="${name}"`;
+}
+
+export function dataValidate(rules) {
+    return `data-validate="${rules}"`;
+}