implemented search

src/components/ui/dialog/index.vue

@@ -13,53 +13,55 @@
     </slot>
   </button>
 
-  <Teleport to="body">
-    <div
-      :id
-      ref="modalRef"
-      class="overlay modal overlay-open:opacity-100 overlay-open:duration-300 hidden modal-middle p-0 xs:p-2 --prevent-on-load-init pointer-events-auto max-w-none"
-      role="dialog"
-      tabindex="-1"
-    >
+  <div class="hidden">
+    <Teleport to="body">
       <div
-        class="overlay-animation-target overlay-open:duration-300 overlay-open:opacity-100 transition-all ease-out modal-dialog"
+        :id
+        ref="modalRef"
+        class="overlay modal overlay-open:opacity-100 overlay-open:duration-300 hidden modal-middle p-0 xs:p-2 --prevent-on-load-init pointer-events-auto max-w-none"
+        role="dialog"
+        tabindex="-1"
       >
-        <div class="modal-content justify-between">
-          <div class="modal-header py-0 sm:py-4">
-            <div
-              v-if="title || $slots.title"
-              class="modal-title py-4 break-all"
-            >
-              <slot name="title">
-                {{ title }}
-              </slot>
+        <div
+          class="overlay-animation-target overlay-open:duration-300 overlay-open:opacity-100 transition-all ease-out modal-dialog"
+        >
+          <div class="modal-content justify-between">
+            <div class="modal-header py-0 sm:py-4">
+              <div
+                v-if="title || $slots.title"
+                class="modal-title py-4 break-all"
+              >
+                <slot name="title">
+                  {{ title }}
+                </slot>
+              </div>
+
+              <button
+                type="button"
+                class="btn btn-text btn-circle btn-sm absolute end-3 top-3"
+                :aria-label="t('close')"
+                tabindex="1"
+                @click="open = false"
+              >
+                <Icon
+                  name="mdi:close"
+                  size="18"
+                />
+              </button>
             </div>
 
-            <button
-              type="button"
-              class="btn btn-text btn-circle btn-sm absolute end-3 top-3"
-              :aria-label="t('close')"
-              tabindex="1"
-              @click="open = false"
-            >
-              <Icon
-                name="mdi:close"
-                size="18"
-              />
-            </button>
-          </div>
+            <div class="modal-body text-sm sm:text-base grow mt-0 pt-0">
+              <slot />
+            </div>
 
-          <div class="modal-body text-sm sm:text-base grow mt-0 pt-0">
-            <slot />
-          </div>
-
-          <div class="modal-footer flex-col sm:flex-row">
-            <slot name="buttons" />
+            <div class="modal-footer flex-col sm:flex-row">
+              <slot name="buttons" />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </Teleport>
+    </Teleport>
+  </div>
 </template>
 
 <script setup lang="ts">

src/components/ui/dropdown/index.vue

@@ -32,7 +32,7 @@
       >
         <li
           :is="itemIs"
-          @click="$emit('select', item)"
+          @click="read_only ? '' : $emit('select', item)"
           class="dropdown-item"
           v-for="item in items"
         >
@@ -59,6 +59,7 @@ const { itemIs = 'li', offset = '[--offset:0]' } = defineProps<{
   itemIs?: string
   activatorClass?: string
   offset?: string
+  read_only?: boolean
 }>()
 
 defineEmits<{ select: [T] }>()

src/components/ui/input/password.vue

@@ -8,6 +8,7 @@
     :rules
     :type="type"
     :with-copy-button
+    @keyup="(e) => $emit('keyup', e)"
   >
     <template #append>
       <slot name="append" />
@@ -38,6 +39,10 @@ defineProps<{
   withCopyButton?: boolean
 }>()
 
+defineEmits<{
+  keyup: [KeyboardEvent]
+}>()
+
 const type = ref<'password' | 'text'>('password')
 
 const tooglePasswordType = () => {

src/components/ui/input/url.vue

@@ -8,6 +8,7 @@
     :rules
     :with-copy-button
     v-model.trim="value"
+    @keyup="(e) => $emit('keyup', e)"
   >
     <template #append>
       <UiButton
@@ -38,6 +39,10 @@ defineProps({
   withCopyButton: Boolean,
   read_only: Boolean,
 })
+
+defineEmits<{
+  keyup: [KeyboardEvent]
+}>()
 </script>
 
 <i18n lang="json">

src/components/ui/select/icon.vue

@@ -3,6 +3,7 @@
     :items="icons"
     class="btn"
     @select="(newIcon) => (iconName = newIcon)"
+    :read_only
   >
     <template #activator>
       <Icon :name="iconName ? iconName : defaultIcon || icons.at(0)" />
@@ -13,7 +14,7 @@
         <li
           class="dropdown-item"
           v-for="item in items"
-          @click="iconName = item"
+          @click="read_only ? '' : (iconName = item)"
         >
           <Icon
             :name="item"
@@ -73,5 +74,5 @@ const icons = [
 
 const iconName = defineModel<string | undefined | null>()
 
-defineProps<{ defaultIcon?: string }>()
+defineProps<{ defaultIcon?: string; read_only?: boolean }>()
 </script>