From 6c100e7739151ec76efe909b85e65ec3a86c8175 Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Fri, 26 Apr 2024 13:17:34 +0200
Subject: [PATCH] finish dialog example

---
 lib/basic/oui-input.vue          |  1 -
 lib/basic/oui-stars.vue          | 34 +++++++++++++++++++-------------
 lib/modal/oui-dialog.example.vue |  7 +++++--
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/lib/basic/oui-input.vue b/lib/basic/oui-input.vue
index 3149c81..c489c37 100644
--- a/lib/basic/oui-input.vue
+++ b/lib/basic/oui-input.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { uuid } from 'zeed'
 import OuiFormItem from './oui-form-item.vue'
 
 import './oui-form.styl'
diff --git a/lib/basic/oui-stars.vue b/lib/basic/oui-stars.vue
index 742c1d3..5d2ef71 100644
--- a/lib/basic/oui-stars.vue
+++ b/lib/basic/oui-stars.vue
@@ -1,10 +1,14 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+import OuiFormItem from './oui-form-item.vue'
+
 import './oui-stars.styl'
 
-// withDefaults(defineProps<{
-// }>(), {
-// })
+withDefaults(defineProps<{
+  title?: string
+  required?: boolean
+}>(), {
+})
 
 const model = defineModel({ required: true, default: 0 })
 
@@ -12,15 +16,17 @@ const hover = ref(0)
 </script>
 
 <template>
-  <div class="oui-stars">
-    <template v-for="i in 5" :key="i">
-      <div :class="{ _active: model >= i, _hover: hover >= i }" @click="model = i" @mouseover="hover = i">
-        <slot name="icon">
-          <svg viewBox="0 0 512 512" fill="currentColor">
-            <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-18.08L153 310.35 23 221.2a16 16 0 019-29.2h160.38l48.4-148.95a16 16 0 0130.44 0l48.4 149H480a16 16 0 019.05 29.2L359 310.35l50.13 148.53A16 16 0 01394 480z" />
-          </svg>
-        </slot>
-      </div>
-    </template>
-  </div>
+  <OuiFormItem :title="title" :required="required">
+    <div class="oui-stars">
+      <template v-for="i in 5" :key="i">
+        <div :class="{ _active: model >= i, _hover: hover >= i }" @click="model = i" @mouseover="hover = i">
+          <slot name="icon">
+            <svg viewBox="0 0 512 512" fill="currentColor">
+              <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-18.08L153 310.35 23 221.2a16 16 0 019-29.2h160.38l48.4-148.95a16 16 0 0130.44 0l48.4 149H480a16 16 0 019.05 29.2L359 310.35l50.13 148.53A16 16 0 01394 480z" />
+            </svg>
+          </slot>
+        </div>
+      </template>
+    </div>
+  </OuiFormItem>
 </template>
diff --git a/lib/modal/oui-dialog.example.vue b/lib/modal/oui-dialog.example.vue
index 85b7cf2..d95a576 100644
--- a/lib/modal/oui-dialog.example.vue
+++ b/lib/modal/oui-dialog.example.vue
@@ -2,7 +2,7 @@
 import { nextTick, reactive, ref } from 'vue'
 import { cloneObject, sleep } from 'zeed'
 import OuiModal from './oui-modal.vue'
-import { OuiButton, OuiInput, OuiSelect, OuiText, OuiWait } from '@/lib'
+import { OuiButton, OuiInput, OuiSelect, OuiStars, OuiText, OuiWait } from '@/lib'
 
 const props = defineProps<{
   done?: any
@@ -10,6 +10,8 @@ const props = defineProps<{
 
 const item = reactive({
   name: '',
+  gender: '',
+  rating: 0,
 })
 
 const wait = ref(false)
@@ -34,7 +36,8 @@ async function doCancel() {
     <OuiText>
       <b>Lorem ipsum</b>, dolor sit amet consectetur adipisicing elit. Deserunt delectus illum tenetur sint atque unde, voluptates facere assumenda in repellendus! Cupiditate laborum recusandae facere dicta reiciendis odio enim dolorum illum!
       <OuiInput v-model="item.name" title="Your Name" required />
-      <OuiSelect v-model="item.name" title="Your Name" required />
+      <OuiSelect v-model="item.gender" title="Your Gender" :options="['Female', 'Male', 'Other']" />
+      <OuiStars v-model="item.rating" title="Did you like Oui so far?" />
     </OuiText>
     <template #footer>
       <div class="_stack_x _center">