item handling

src/components/ui/input/index.vue

@@ -29,8 +29,9 @@
           <label
             class="input-floating-label"
             :for="id"
-            >{{ label }}</label
           >
+            {{ label }}
+          </label>
         </div>
 
         <Icon
@@ -47,7 +48,8 @@
 
       <UiButton
         v-if="withCopyButton"
-        class="btn-outline btn-accent btn-square join-item h-auto"
+        :tooltip="t('copy')"
+        class="btn-outline btn-accent btn-square"
         @click="copy(`${input}`)"
       >
         <Icon :name="copied ? 'mdi:check' : 'mdi:content-copy'" />
@@ -167,4 +169,14 @@ const checkInput = () => {
 }
 
 const { copy, copied } = useClipboard()
+
+const { t } = useI18n()
 </script>
+
+<i18n lang="yaml">
+de:
+  copy: Kopieren
+
+en:
+  copy: Copy
+</i18n>

src/components/ui/input/password.vue

@@ -1,9 +1,21 @@
 <template>
   <UiInput
-v-model="value" :check-input :label="label || t('password')" :placeholder="placeholder || t('password')" :rules
-    :type="type" :autofocus>
+    v-model="value"
+    :autofocus
+    :check-input
+    :label="label || t('password')"
+    :placeholder="placeholder || t('password')"
+    :rules
+    :type="type"
+    :with-copy-button
+  >
     <template #append>
-      <UiButton class="btn-outline btn-accent btn-square h-auto" @click="tooglePasswordType">
+      <slot name="append" />
+
+      <UiButton
+        class="btn-outline btn-accent btn-square join-item"
+        @click="tooglePasswordType"
+      >
         <Icon :name="type === 'password' ? 'mdi:eye-off' : 'mdi:eye'" />
       </UiButton>
     </template>
@@ -11,33 +23,35 @@ v-model="value" :check-input :label="label || t('password')" :placeholder="place
 </template>
 
 <script setup lang="ts">
-import type { ZodSchema } from "zod";
+import type { ZodSchema } from 'zod'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const value = defineModel<string | number | null | undefined>();
+const value = defineModel<string | number | null | undefined>()
 
-defineProps({
-  label: String,
-  placeholder: String,
-  checkInput: Boolean,
-  rules: Object as PropType<ZodSchema>,
-  autofocus: Boolean,
-});
+defineProps<{
+  autofocus?: boolean
+  checkInput?: boolean
+  label?: string
+  placeholder?: string
+  rules?: ZodSchema
+  withCopyButton?: boolean
+}>()
 
-const type = ref<"password" | "text">("password");
+const type = ref<'password' | 'text'>('password')
 
 const tooglePasswordType = () => {
-  type.value = type.value === "password" ? "text" : "password";
-};
-
+  type.value = type.value === 'password' ? 'text' : 'password'
+}
 </script>
 
-<i18n lang="json">{
+<i18n lang="json">
+{
   "de": {
     "password": "Passwort"
   },
   "en": {
     "password": "Password"
   }
-}</i18n>
+}
+</i18n>

src/components/ui/input/url.vue

@@ -0,0 +1,52 @@
+<template>
+  <UiInput
+    :autofocus
+    :check-input="checkInput"
+    :label="label || t('url')"
+    :placeholder="placeholder || t('url')"
+    :read_only
+    :rules
+    :with-copy-button
+    v-model.trim="value"
+  >
+    <template #append>
+      <UiButton
+        :disabled="!value?.length"
+        @click="openUrl(`${value}`)"
+        class="btn-outline btn-accent btn-square"
+      >
+        <Icon name="streamline:web" />
+      </UiButton>
+    </template>
+  </UiInput>
+</template>
+
+<script setup lang="ts">
+import type { ZodSchema } from 'zod'
+import { openUrl } from '@tauri-apps/plugin-opener'
+
+const { t } = useI18n()
+
+const value = defineModel<string | null | undefined>()
+
+defineProps({
+  label: String,
+  placeholder: String,
+  checkInput: Boolean,
+  rules: Object as PropType<ZodSchema>,
+  autofocus: Boolean,
+  withCopyButton: Boolean,
+  read_only: Boolean,
+})
+</script>
+
+<i18n lang="json">
+{
+  "de": {
+    "url": "Url"
+  },
+  "en": {
+    "url": "Url"
+  }
+}
+</i18n>