move to penguinui continues3

assets/views/admin/catalog/category_form.html

@@ -16,43 +16,47 @@
   action="{% if category %}/admin/catalog/categories/{{ category.id }}{% else %}/admin/catalog/categories{% endif %}"
   class="mt-6 space-y-5 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
 
+  {% if category %}
+    {% set v_name = category.name %}{% set v_slug = category.slug %}{% set v_pos = category.position %}{% set v_desc = category.description | default(value="") %}{% set v_pub = category.published %}
+  {% else %}
+    {% set v_name = "" %}{% set v_slug = "" %}{% set v_pos = 0 %}{% set v_desc = "" %}{% set v_pub = false %}
+  {% endif %}
+
   <div class="space-y-1.5">
     <label for="name" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="name", lang=lang | default(value='sk')) }}</label>
-    <input id="name" name="name" type="text" required value="{% if category %}{{ category.name }}{% endif %}"
-      class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+    {{ ui::input(name="name", id="name", required=true, value=v_name) }}
   </div>
 
   <div class="grid gap-5 sm:grid-cols-2">
     <div class="space-y-1.5">
       <label for="slug" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="slug", lang=lang | default(value='sk')) }}</label>
-      <input id="slug" name="slug" type="text" value="{% if category %}{{ category.slug }}{% endif %}"
-        placeholder="{{ t(key='slug-auto', lang=lang | default(value='sk')) }}"
-        class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      {{ ui::input(name="slug", id="slug", value=v_slug, placeholder=t(key='slug-auto', lang=lang | default(value='sk'))) }}
     </div>
     <div class="space-y-1.5">
       <label for="position" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="position", lang=lang | default(value='sk')) }}</label>
-      <input id="position" name="position" type="number" value="{% if category %}{{ category.position }}{% else %}0{% endif %}"
-        class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      {{ ui::input(name="position", id="position", type="number", value=v_pos) }}
     </div>
   </div>
 
   <div class="space-y-1.5">
     <label for="parent_id" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="parent-category", lang=lang | default(value='sk')) }}</label>
-    <select id="parent_id" name="parent_id"
-      class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
-      <option value="">{{ t(key="no-parent", lang=lang | default(value='sk')) }}</option>
-      {% for parent in parents %}
-      <option value="{{ parent.id }}" {% if category and category.parent_id == parent.id %}selected{% endif %}>
-        {% if parent.depth > 0 %}{% for _ in range(end=parent.depth) %}—&nbsp;{% endfor %}{% endif %}{{ parent.name }}
-      </option>
-      {% endfor %}
-    </select>
+    <div class="relative">
+      <select id="parent_id" name="parent_id"
+        class="w-full appearance-none rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark">
+        <option value="">{{ t(key="no-parent", lang=lang | default(value='sk')) }}</option>
+        {% for parent in parents %}
+        <option value="{{ parent.id }}" {% if category and category.parent_id == parent.id %}selected{% endif %}>
+          {% if parent.depth > 0 %}{% for _ in range(end=parent.depth) %}—&nbsp;{% endfor %}{% endif %}{{ parent.name }}
+        </option>
+        {% endfor %}
+      </select>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="pointer-events-none absolute right-3 top-1/2 size-5 -translate-y-1/2 text-on-surface/60 dark:text-on-surface-dark/60"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
+    </div>
   </div>
 
   <div class="space-y-1.5">
     <label for="description" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="description", lang=lang | default(value='sk')) }}</label>
-    <textarea id="description" name="description" rows="4"
-      class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">{% if category and category.description %}{{ category.description }}{% endif %}</textarea>
+    {{ ui::textarea(name="description", id="description", rows="4", value=v_desc) }}
   </div>
 
   <div class="space-y-1.5">
@@ -60,15 +64,10 @@
     {% if category and category.image_id %}
     <img src="/images/{{ category.image_id }}" alt="" class="size-24 rounded-radius object-cover">
     {% endif %}
-    <input id="image" name="image" type="file" accept="image/*"
-      class="block w-full text-sm text-on-surface file:mr-3 file:rounded-radius file:border-0 file:bg-primary file:px-3 file:py-2 file:text-sm file:font-medium file:text-on-primary dark:text-on-surface-dark dark:file:bg-primary-dark dark:file:text-on-primary-dark">
+    {{ ui::file_input(name="image", id="image", accept="image/*") }}
   </div>
 
-  <label class="flex items-center gap-2">
-    <input type="checkbox" name="published" value="on" {% if category and category.published %}checked{% endif %}
-      class="size-4 rounded border-outline text-primary focus:ring-primary dark:border-outline-dark">
-    <span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="published", lang=lang | default(value='sk')) }}</span>
-  </label>
+  {{ ui::checkbox(name="published", id="published", label=t(key="published", lang=lang | default(value='sk')), checked=v_pub) }}
 
   <div class="flex gap-3 pt-2">
     {{ ui::button(label=t(key="save", lang=lang | default(value='sk')), type="submit") }}

assets/views/admin/catalog/product_form.html

@@ -16,61 +16,61 @@
   action="{% if product %}/admin/catalog/products/{{ product.id }}{% else %}/admin/catalog/products{% endif %}"
   class="mt-6 space-y-5 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
 
+  {% if product %}
+    {% set v_name = product.name %}{% set v_price = product.price %}{% set v_currency = product.currency %}{% set v_stock = product.stock %}{% set v_sku = product.sku | default(value="") %}{% set v_slug = product.slug %}{% set v_desc = product.description | default(value="") %}{% set v_pub = product.published %}
+  {% else %}
+    {% set v_name = "" %}{% set v_price = "" %}{% set v_currency = "EUR" %}{% set v_stock = 0 %}{% set v_sku = "" %}{% set v_slug = "" %}{% set v_desc = "" %}{% set v_pub = false %}
+  {% endif %}
+
   <div class="space-y-1.5">
     <label for="name" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="name", lang=lang | default(value='sk')) }}</label>
-    <input id="name" name="name" type="text" required value="{% if product %}{{ product.name }}{% endif %}"
-      class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+    {{ ui::input(name="name", id="name", required=true, value=v_name) }}
   </div>
 
   <div class="grid gap-5 sm:grid-cols-2">
     <div class="space-y-1.5">
       <label for="price" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="price", lang=lang | default(value='sk')) }}</label>
-      <input id="price" name="price" type="text" inputmode="decimal" required value="{% if product %}{{ product.price }}{% endif %}"
-        placeholder="0.00"
-        class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      {{ ui::input(name="price", id="price", required=true, value=v_price, placeholder="0.00", attrs='inputmode="decimal"') }}
     </div>
     <div class="space-y-1.5">
       <label for="currency" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="currency", lang=lang | default(value='sk')) }}</label>
-      <input id="currency" name="currency" type="text" maxlength="3" value="{% if product %}{{ product.currency }}{% else %}EUR{% endif %}"
-        class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm uppercase text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      {{ ui::input(name="currency", id="currency", value=v_currency, attrs='maxlength="3"', extra="uppercase") }}
     </div>
   </div>
 
   <div class="grid gap-5 sm:grid-cols-2">
     <div class="space-y-1.5">
       <label for="stock" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="stock", lang=lang | default(value='sk')) }}</label>
-      <input id="stock" name="stock" type="number" min="0" value="{% if product %}{{ product.stock }}{% else %}0{% endif %}"
-        class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      {{ ui::input(name="stock", id="stock", type="number", value=v_stock, attrs='min="0"') }}
     </div>
     <div class="space-y-1.5">
       <label for="sku" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="sku", lang=lang | default(value='sk')) }}</label>
-      <input id="sku" name="sku" type="text" value="{% if product and product.sku %}{{ product.sku }}{% endif %}"
-        class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      {{ ui::input(name="sku", id="sku", value=v_sku) }}
     </div>
   </div>
 
   <div class="space-y-1.5">
     <label for="category_id" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="category", lang=lang | default(value='sk')) }}</label>
-    <select id="category_id" name="category_id"
-      class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
-      <option value="">{{ t(key="no-category", lang=lang | default(value='sk')) }}</option>
-      {% for category in categories %}
-      <option value="{{ category.id }}" {% if product and product.category_id == category.id %}selected{% endif %}>{{ category.name }}</option>
-      {% endfor %}
-    </select>
+    <div class="relative">
+      <select id="category_id" name="category_id"
+        class="w-full appearance-none rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark">
+        <option value="">{{ t(key="no-category", lang=lang | default(value='sk')) }}</option>
+        {% for category in categories %}
+        <option value="{{ category.id }}" {% if product and product.category_id == category.id %}selected{% endif %}>{{ category.name }}</option>
+        {% endfor %}
+      </select>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="pointer-events-none absolute right-3 top-1/2 size-5 -translate-y-1/2 text-on-surface/60 dark:text-on-surface-dark/60"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
+    </div>
   </div>
 
   <div class="space-y-1.5">
     <label for="slug" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="slug", lang=lang | default(value='sk')) }}</label>
-    <input id="slug" name="slug" type="text" value="{% if product %}{{ product.slug }}{% endif %}"
-      placeholder="{{ t(key='slug-auto', lang=lang | default(value='sk')) }}"
-      class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+    {{ ui::input(name="slug", id="slug", value=v_slug, placeholder=t(key='slug-auto', lang=lang | default(value='sk'))) }}
   </div>
 
   <div class="space-y-1.5">
     <label for="description" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="description", lang=lang | default(value='sk')) }}</label>
-    <textarea id="description" name="description" rows="5"
-      class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">{% if product and product.description %}{{ product.description }}{% endif %}</textarea>
+    {{ ui::textarea(name="description", id="description", rows="5", value=v_desc) }}
   </div>
 
   <div class="space-y-1.5">
@@ -78,15 +78,10 @@
     {% if product and product.image %}
     <img src="/images/{{ product.image }}" alt="" class="size-24 rounded-radius object-cover">
     {% endif %}
-    <input id="image" name="image" type="file" accept="image/*"
-      class="block w-full text-sm text-on-surface file:mr-3 file:rounded-radius file:border-0 file:bg-primary file:px-3 file:py-2 file:text-sm file:font-medium file:text-on-primary dark:text-on-surface-dark dark:file:bg-primary-dark dark:file:text-on-primary-dark">
+    {{ ui::file_input(name="image", id="image", accept="image/*") }}
   </div>
 
-  <label class="flex items-center gap-2">
-    <input type="checkbox" name="published" value="on" {% if product and product.published %}checked{% endif %}
-      class="size-4 rounded border-outline text-primary focus:ring-primary dark:border-outline-dark">
-    <span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="published", lang=lang | default(value='sk')) }}</span>
-  </label>
+  {{ ui::checkbox(name="published", id="published", label=t(key="published", lang=lang | default(value='sk')), checked=v_pub) }}
 
   <div class="flex gap-3 pt-2">
     {{ ui::button(label=t(key="save", lang=lang | default(value='sk')), type="submit") }}

assets/views/admin/login.html

@@ -30,9 +30,7 @@
             class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
             {{ t(key="login-email", lang=lang | default(value='sk')) }}
           </label>
-          <input type="email" id="email" name="email" required autofocus
-            autocomplete="email"
-            class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark dark:focus:ring-primary-dark">
+          {{ ui::input(name="email", id="email", type="email", required=true, autocomplete="email", attrs="autofocus") }}
         </div>
 
         <div class="flex flex-col gap-1">
@@ -40,9 +38,7 @@
             class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
             {{ t(key="login-password", lang=lang | default(value='sk')) }}
           </label>
-          <input type="password" id="password" name="password" required
-            autocomplete="current-password"
-            class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark dark:focus:ring-primary-dark">
+          {{ ui::input(name="password", id="password", type="password", required=true, autocomplete="current-password") }}
         </div>
 
         {{ ui::button(label=t(key="login-auth", lang=lang | default(value='sk')), type="submit", extra="mt-1 w-full") }}

assets/views/admin/orders/show.html

@@ -102,12 +102,15 @@
 
     <form method="post" action="/admin/orders/{{ order.id }}/status" class="space-y-3 rounded-radius border border-outline bg-surface p-5 dark:border-outline-dark dark:bg-surface-dark-alt">
       <label for="status" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="order-status", lang=lang | default(value='sk')) }}</label>
-      <select id="status" name="status"
-        class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
-        {% for status in statuses %}
-        <option value="{{ status }}" {% if order.status == status %}selected{% endif %}>{{ t(key="order-status-" ~ status, lang=lang | default(value='sk')) }}</option>
-        {% endfor %}
-      </select>
+      <div class="relative">
+        <select id="status" name="status"
+          class="w-full appearance-none rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark">
+          {% for status in statuses %}
+          <option value="{{ status }}" {% if order.status == status %}selected{% endif %}>{{ t(key="order-status-" ~ status, lang=lang | default(value='sk')) }}</option>
+          {% endfor %}
+        </select>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="pointer-events-none absolute right-3 top-1/2 size-5 -translate-y-1/2 text-on-surface/60 dark:text-on-surface-dark/60"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
+      </div>
       {{ ui::button(label=t(key="order-update-status", lang=lang | default(value='sk')), type="submit", extra="w-full") }}
     </form>
   </aside>

assets/views/admin/shipping/index.html

@@ -20,14 +20,9 @@
     </div>
     <div class="space-y-1.5">
       <label for="price-{{ method.id }}" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="price", lang=lang | default(value='sk')) }}</label>
-      <input id="price-{{ method.id }}" name="price" type="text" inputmode="decimal" value="{{ method.price }}"
-        class="w-28 rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      {{ ui::input(name="price", id="price-" ~ method.id, value=method.price, width="w-28", attrs='inputmode="decimal"') }}
     </div>
-    <label class="flex items-center gap-2 pb-2">
-      <input type="checkbox" name="enabled" value="on" {% if method.enabled %}checked{% endif %}
-        class="size-4 rounded border-outline text-primary focus:ring-primary dark:border-outline-dark">
-      <span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shipping-enabled", lang=lang | default(value='sk')) }}</span>
-    </label>
+    <div class="pb-2">{{ ui::checkbox(name="enabled", label=t(key="shipping-enabled", lang=lang | default(value='sk')), checked=method.enabled) }}</div>
     {{ ui::button(label=t(key="save", lang=lang | default(value='sk')), type="submit", extra="ml-auto") }}
   </form>
   {% endfor %}