feat: update components

Qwizi · Jan 6, 2025 · e6e9939 · e6e9939
1 parent d0dd9d8
commit e6e9939
Show file tree

Hide file tree

Showing 56 changed files with 1,200 additions and 257 deletions.
diff --git a/.idea/material_theme_project_new.xml b/.idea/material_theme_project_new.xml
diff --git a/cotton_daisy/base.py b/cotton_daisy/base.py
@@ -12,8 +12,8 @@ def generate_component(component_name: str):
     if not template_path.exists():
         raise ValueError(f"Component {component_name} does not exist.")
 
-    output_dir = Path.cwd() / "templates/cotton"
-    output_dir.mkdir(exist_ok=True)
+    output_dir = Path.cwd() / "templates/cotton/ui"
+    output_dir.mkdir(parents=True, exist_ok=True)
     output_file = output_dir / f"{component_name}.html"
 
     with open(template_path, "r") as template, open(output_file, "w") as output:

diff --git a/cotton_daisy/templates/alert.html b/cotton_daisy/templates/alert.html
@@ -1,65 +1,87 @@
-<c-vars type title description shadow text="white"/>
-<div role="alert" class="alert{% if type %} alert-{{ type }}{% endif %} shadow-lg{% if text %} text-{{ text }}{% endif %}" {{ attrs }}>
+<c-vars type title description shadow class_name icon/>
+<div role="alert"
+     class="alert{% if type %} alert-{{ type }}{% endif %} shadow-lg{% if class_name %} {{ class_name }}{% endif %}" {{ attrs }}>
     {% if type == "info" %}
-        <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                class="h-6 w-6 shrink-0 stroke-current">
-            <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        </svg>
+        {% if icon %}
+            {{ icon_slot }}
+        {% else %}
+            <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    class="h-6 w-6 shrink-0 stroke-current">
+                <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        {% endif %}
     {% elif type == "success" %}
-        <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6 shrink-0 stroke-current"
-                fill="none"
-                viewBox="0 0 24 24">
-            <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-        </svg>
+        {% if icon %}
+            {{ icon }}
+        {% else %}
+            <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6 shrink-0 stroke-current"
+                    fill="none"
+                    viewBox="0 0 24 24">
+                <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        {% endif %}
     {% elif type == "warning" %}
-        <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6 shrink-0 stroke-current"
-                fill="none"
-                viewBox="0 0 24 24">
-            <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-        </svg>
+        {% if icon %}
+            {{ icon }}
+        {% else %}
+            <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6 shrink-0 stroke-current"
+                    fill="none"
+                    viewBox="0 0 24 24">
+                <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+            </svg>
+        {% endif %}
+
     {% elif type == "error" %}
-        <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6 shrink-0 stroke-current"
-                fill="none"
-                viewBox="0 0 24 24">
-            <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-        </svg>
+        {% if icon %}
+            {{ icon }}
+        {% else %}
+            <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6 shrink-0 stroke-current"
+                    fill="none"
+                    viewBox="0 0 24 24">
+                <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+        {% endif %}
     {% else %}
-        <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                class="stroke-info h-6 w-6 shrink-0">
-            <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        </svg>
+        {% if icon %}
+            {{ icon }}
+        {% else %}
+            <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    class="stroke-info h-6 w-6 shrink-0">
+                <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        {% endif %}
     {% endif %}
     <div>
         {% if title %}

diff --git a/cotton_daisy/templates/avatar.html b/cotton_daisy/templates/avatar.html
@@ -1,7 +1,7 @@
 <c-vars w="16" online_status online rounded src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
-        alt="User avatar"/>
+        alt="User avatar" class_name/>
 
-<div class="avatar{% if online_status %}{% if online %} online{% else %} offline{% endif %}{% endif %}{% if offline %} offline{% endif %}"
+<div class="avatar{% if online_status %}{% if online %} online{% else %} offline{% endif %}{% endif %}{% if offline %} offline{% endif %}{% if class_name %} {{ class_name }}{% endif %}"
      {{ attrs }}
 >
     <div class="w-{{ w }}{% if rounded %} rounded-{{ rounded }}{% endif %}">

diff --git a/cotton_daisy/templates/avatar_group.html b/cotton_daisy/templates/avatar_group.html
@@ -0,0 +1,4 @@
+<c-vars class_name/>
+<div class="avatar-group -space-x-6 rtl:space-x-reverse{% if class_name %} {{ class_name }}{% endif %}">
+    {{ slot }}
+</div>
diff --git a/cotton_daisy/templates/badge.html b/cotton_daisy/templates/badge.html
@@ -1,6 +1,6 @@
-<c-vars type outline size/>
+<c-vars type outline size class_name/>
 
-<span class="badge{% if type %} badge-{{ type }}{% endif %}{% if outline %} badge-outline{% endif %}{% if size %} badge-{{ size }}{% endif %}"
+<span class="badge{% if type %} badge-{{ type }}{% endif %}{% if outline %} badge-outline{% endif %}{% if size %} badge-{{ size }}{% endif %}{% if class_name %} {{ class_name }}{% endif %}"
       {{ attrs }}>
     {{ slot }}
 </span>
diff --git a/cotton_daisy/templates/button.html b/cotton_daisy/templates/button.html
@@ -9,9 +9,10 @@
         circle
         join
         no_animation
+        class_name
 />
 <button
-        class="btn{% if type %} btn-{{ type }}{% endif %}{% if active %} btn-active{% endif %}{% if outline %} btn-outline{% endif %}{% if block %} btn-block{% endif %}{% if size %} btn-{{ size }}{% endif %}{% if wide %} btn-wide{% endif %}{% if square %} btn-square{% endif %}{% if circle %} btn-circle{% endif %}{% if no_animation %} btn-no-animation{% endif %}{% if join %} join-item{% endif %}"
+        class="btn{% if type %} btn-{{ type }}{% endif %}{% if active is True%} btn-active{% endif %}{% if outline is True%} btn-outline{% endif %}{% if block is True%} btn-block{% endif %}{% if size %} btn-{{ size }}{% endif %}{% if wide is True %} btn-wide{% endif %}{% if square is True %} btn-square{% endif %}{% if circle is True %} btn-circle{% endif %}{% if no_animation is True %} btn-no-animation{% endif %}{% if join is True %} join-item{% endif %}{% if class_name %} {{ class_name }}{% endif %}"
         {{ attrs }}
 >
     {{ slot }}

diff --git a/cotton_daisy/templates/card.html b/cotton_daisy/templates/card.html
@@ -1,37 +1,17 @@
 <c-vars
         bg="base-100"
         w="96"
-        title
         shadow
         compact
         image_full
         glass
         side
-        image_src
-        image_alt="Image alternative text"
+        class_name
 />
 <div
-        class="card{% if bg %} bg-{{ bg }}{% endif %}{% if w %} w-{{ w }}{% endif %}{% if shadow %} shadow-{{ shadow }}{% endif %}{% if compact %} card-compact{% endif %}{% if image_full %} image-full{% endif %}{% if glass %} glass{% endif %}{% if side %} lg:card-side{% endif %}"
+        class="card{% if bg %} bg-{{ bg }}{% endif %}{% if w %} w-{{ w }}{% endif %}{% if shadow %} shadow-{{ shadow }}{% endif %}{% if compact %} card-compact{% endif %}{% if image_full %} image-full{% endif %}{% if glass %} glass{% endif %}{% if side %} lg:card-side{% endif %}{% if class_name %} {{ class_name }}{% endif %}"
         {{ attrs }}
 >
-    {% if image_src %}
-    <figure>
-        <img
-                src="{{ image_src }}"
-                alt="{{ image_alt}}"
-        />
-    </figure>
-    {% endif %}
-
-    <div class="card-body">
-        {% if title %}
-            <h2 class="card-title">{{ title }}</h2>
-        {% endif %}
-        {{ slot }}
-        {% if footer %}
-        <div class="card-actions justify-end">
-            {{ footer }}
-        </div>
-        {% endif %}
-    </div>
+    {{ figure }}
+    {{ slot }}
 </div>
diff --git a/cotton_daisy/templates/card_actions.html b/cotton_daisy/templates/card_actions.html
@@ -0,0 +1,4 @@
+<c-vars class_name/>
+<div class="card-actions{% if class_name %} {{ class_name }}{% endif %}">
+    {{ slot }}
+</div>
diff --git a/cotton_daisy/templates/card_body.html b/cotton_daisy/templates/card_body.html
@@ -0,0 +1,7 @@
+<c-vars title class_name/>
+<div class="card-body{% if class_name %} {{ class_name }}{% endif %}">
+    {% if title %}
+        <h2 class="card-title">{{ title }}</h2>
+    {% endif %}
+    {{ slot }}
+</div>
diff --git a/cotton_daisy/templates/divider.html b/cotton_daisy/templates/divider.html
@@ -1,5 +1,5 @@
-<c-vars type position horizontal/>
+<c-vars type position horizontal class_name/>
 
-<div class="divider{% if type %} divider-{{ type }}{% endif %}{% if horizontal %} divider-horizontal{% endif %}{% if position %} divider-{{ position }}{% endif %}">
+<div class="divider{% if type %} divider-{{ type }}{% endif %}{% if horizontal %} divider-horizontal{% endif %}{% if position %} divider-{{ position }}{% endif %}{% if class_name %} {{ class_name }}{% endif %}">
     {{ slot }}
 </div>
diff --git a/cotton_daisy/templates/dropdown.html b/cotton_daisy/templates/dropdown.html
@@ -1,8 +1,6 @@
-<c-vars title bg="base-100" rounded="True" w="52" shadow="True" position align hover open/>
+<c-vars title position align hover open class_name/>
 
-<div class="dropdown{% if position %} dropdown-{{ position }}{% endif %}{% if align %} dropdown-{{ align }}{% endif %}{% if hover %} dropdown-hover{% endif %}{% if open %} dropdown-open{% endif %}" {{ attrs }}>
+<div class="dropdown{% if position %} dropdown-{{ position }}{% endif %}{% if align %} dropdown-{{ align }}{% endif %}{% if hover %} dropdown-hover{% endif %}{% if open %} dropdown-open{% endif %}{% if class_name %} {{ class_name }}{% endif %}" {{ attrs }}>
     <div tabindex="0" role="button" class="btn m-1">{{ title }}</div>
-    <ul tabindex="0" class="dropdown-content menu bg-{{ bg }}{% if rounded %} rounded-box{% endif %} z-[1] w-{{ w }} p-2{% if shadow %} shadow{% endif %}">
-        {{ slot }}
-    </ul>
+    {{ slot }}
 </div>
diff --git a/cotton_daisy/templates/dropdown_content.html b/cotton_daisy/templates/dropdown_content.html
@@ -0,0 +1,4 @@
+<c-vars bg="base-200" rounded="True" w="52" shadow="True" class_name/>
+<ul tabindex="0" class="dropdown-content menu bg-{{ bg }}{% if rounded %} rounded-box{% endif %} z-[1] w-{{ w }} p-2{% if shadow %} shadow{% endif %}{% if class_name %} {{ class_name }}{% endif %}">
+        {{ slot }}
+</ul>
diff --git a/cotton_daisy/templates/figure.html b/cotton_daisy/templates/figure.html
@@ -0,0 +1,8 @@
+<c-vars src alt="Image alternative text" class_name/>
+<figure>
+    <img
+            src="{{ src }}"
+            alt="{{ alt }}"
+            class="{% if class_name %}{{ class_name }}{% endif %}"
+    />
+</figure>
diff --git a/cotton_daisy/templates/kbd.html b/cotton_daisy/templates/kbd.html
@@ -1,5 +1,5 @@
-<c-vars size/>
+<c-vars size class_name/>
 
-<kbd class="kbd{% if size %} kbd-{{ size }}{% endif %}">
+<kbd class="kbd{% if size %} kbd-{{ size }}{% endif %}{% if class_name %} {{ class_name }}{% endif %}">
     {{ slot }}
 </kbd>
diff --git a/cotton_daisy/templates/loading.html b/cotton_daisy/templates/loading.html
@@ -1,4 +1,4 @@
-<c-vars type="spinner" size="md" color="primary"/>
+<c-vars type="spinner" size="md"/>
 
-<span class="loading{%if type %} loading-{{ type }}{% endif %}{% if size %} loading-{{ size }}{% endif %}{% if color %} text-{{ color }}{% endif %}">
+<span class="loading{%if type %} loading-{{ type }}{% endif %}{% if size %} loading-{{ size }}{% endif %}{% if class_name %} {{ class_name }}{% endif %}">
 </span>
diff --git a/cotton_daisy/templates/menu.html b/cotton_daisy/templates/menu.html
@@ -1,11 +1,11 @@
-<c-vars bg="base-200" w="56" size title responsive horizontal/>
+<c-vars bg="base-200" w="56" size title responsive horizontal class_name/>
 
-<ul class="menu{% if responsive is True %} menu-vertical lg:menu-horizontal{% endif %}{% if horizontal %} menu-horizontal{% endif %} bg-{{ bg }} rounded-box w-{{ w }}{% if size %} menu-{{ size }}{% endif %}" {{ attrs }}>
+<ul class="menu{% if responsive is True %} menu-vertical lg:menu-horizontal{% endif %}{% if horizontal %} menu-horizontal{% endif %} bg-{{ bg }} rounded-box w-{{ w }}{% if size %} menu-{{ size }}{% endif %}{% if class_name %} {{ class_name }}{% endif %}" {{ attrs }}>
 {% if title %}
     <li>
         <h2 class="menu-title">{{ title }}</h2>
         <ul>
-            <li>{{ slot }}</li>
+            {{ slot }}
         </ul>
     </li>
 {% else %}

diff --git a/cotton_daisy/templates/navbar.html b/cotton_daisy/templates/navbar.html
@@ -1,20 +1,5 @@
-<c-vars bg="base-100" navbar_start navbar_center navbar_end/>
+<c-vars bg="base-100" class_name/>
 
-<div class="navbar bg-{{ bg }}">
+<div class="navbar bg-{{ bg }}{% if class_name %} {{ class_name }}{% endif %}">
     {{ slot }}
-    {% if navbar_start %}
-        <div class="navbar-start">
-            {{ navbar_start }}
-        </div>
-    {% endif %}
-    {% if navbar_center %}
-        <div class="navbar-center hidden lg:flex">
-            {{ navbar_center }}
-        </div>
-    {% endif %}
-    {% if navbar_end %}
-        <div class="navbar-end">
-            {{ navbar_end }}
-        </div>
-    {% endif %}
 </div>
diff --git a/cotton_daisy/templates/navbar_content.html b/cotton_daisy/templates/navbar_content.html
@@ -0,0 +1,5 @@
+<c-vars align="start" class_name />
+
+<div class="navbar-{{ align }}{% if class_name %} {{ class_name }}{% endif %}">
+    {{ slot }}
+</div>
diff --git a/cotton_daisy/templates/progress.html b/cotton_daisy/templates/progress.html
@@ -1,2 +1,10 @@
-<c-vars w="56" color/>
-<progress class="progress w-{{ w}}{%if color %} progress-{{ color }}{% endif %}" {{attrs }}></progress>
+<c-vars w="56" color radial class_name size thickness/>
+{% if radial is True %}
+    <div class="radial-progress{% if color %} text-{{ color }}{% endif %}{% if class_name %} {{ class_name }}{% endif %}" style="--value:{{ value }};{% if size %} --size:{{ size }};{% endif %}{% if thickness %} --thickness:{{ thickness }};{% endif %}" role="progressbar">
+    {{ slot }}
+    </div>
+{% else %}
+    <progress class="progress w-{{ w }}{% if color %} progress-{{ color }}{% endif %}{% if class_name %} {{ class_name }}{% endif %}" {{ attrs }}>
+    {{ slot }}
+    </progress>
+{% endif %}
diff --git a/example/example/__init__.py b/example/example/__init__.py