feat(examples): improve ui form and slider examples

romhml · romhml · commit c2edfa5e373f · 2025-03-28T11:39:15.000+01:00
diff --git a/packages/examples/src/assets/ui/index.css b/packages/examples/src/assets/ui/index.css
@@ -52,6 +52,9 @@
 .w-xs {
   width: var(--container-xs);
 }
+.min-w-56 {
+  min-width: calc(var(--spacing) * 56);
+}
 .min-w-60 {
   min-width: calc(var(--spacing) * 60);
 }
diff --git a/packages/examples/src/examples/ui/FormExample.vue b/packages/examples/src/examples/ui/FormExample.vue
@@ -27,7 +27,10 @@ function validate(data: Partial<typeof state>) {
       name="password"
       label="Password"
     >
-      <UInput v-model="state.password" />
+      <UInput
+        v-model="state.password"
+        type="password"
+      />
     </UFormField>
     <UButton type="submit">
       Submit
diff --git a/packages/examples/src/examples/ui/SliderExample.vue b/packages/examples/src/examples/ui/SliderExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    defaultValue: 33
+  }
+})
+</script>
+
+<template>
+  <USlider class="min-w-56" />
+</template>
