finish dialog example

holtwick · Apr 26, 2024 · 6c100e7 · 6c100e7
1 parent a25205d
commit 6c100e7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git 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
@@ -1,26 +1,32 @@
 <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 })
 
 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
@@ -2,14 +2,16 @@
 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
 }>()
 
 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">