mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
refactor: 🔥 Remove more old code
This commit is contained in:
parent
ee8c543cd9
commit
fc768f6d36
10 changed files with 4 additions and 133 deletions
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
<p class="text-base/6 disabled:opacity-50 sm:text-sm/6 text-red-500">
|
||||
<slot />
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
<div class="mt-3 flex flex-col gap-2">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-1">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<div class="flex flex-row justify-between">
|
||||
<label v-bind="$attrs"
|
||||
class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-gray-100">
|
||||
<slot />
|
||||
</label>
|
||||
<div :id="`${$attrs.for}-label-slot`"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { LabelHTMLAttributes } from "vue";
|
||||
|
||||
interface Props extends /* @vue-ignore */ LabelHTMLAttributes {}
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
});
|
||||
const props = defineProps<Props>();
|
||||
</script>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<template>
|
||||
<TextInput @input="e => content = (e.target as HTMLInputElement).value" v-bind="$attrs, $props" v-model="content"
|
||||
:type="showPassword ? 'text' : 'password'" :spellcheck="false" />
|
||||
<Progress.Root class="flex flex-row items-center gap-x-2" v-if="showStrength">
|
||||
<Progress.Label class="text-xs text-gray-300 font-semibold w-12">
|
||||
{{ text }}
|
||||
</Progress.Label>
|
||||
<Progress.Track class="rounded-sm w-full h-2 duration-300" :style="{
|
||||
backgroundColor: color,
|
||||
}">
|
||||
<Progress.Range />
|
||||
</Progress.Track>
|
||||
</Progress.Root>
|
||||
<Teleport :to="`#${$attrs.id}-label-slot`" v-if="teleport">
|
||||
<button type="button" @click="showPassword = !showPassword"
|
||||
class="text-xs ml-auto block mt-2 font-semibold text-gray-400">
|
||||
<iconify-icon icon="tabler:eye" class="size-4 align-text-top" height="none" />
|
||||
{{ showPassword ? "Hide password" : "Show password" }}
|
||||
</button>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Progress } from "@ark-ui/vue";
|
||||
import { passwordStrength } from "~/utils/passwords";
|
||||
const showPassword = ref(false);
|
||||
const content = ref("");
|
||||
|
||||
import type { InputHTMLAttributes } from "vue";
|
||||
import TextInput from "./text-input.vue";
|
||||
|
||||
interface Props extends /* @vue-ignore */ InputHTMLAttributes {
|
||||
isInvalid?: boolean;
|
||||
showStrength?: boolean;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
});
|
||||
defineProps<Props>();
|
||||
|
||||
const teleport = ref(false);
|
||||
const strength = computed(() => passwordStrength(content.value ?? ""));
|
||||
const text = computed(() => {
|
||||
if (strength.value < 6) {
|
||||
return "Weak";
|
||||
}
|
||||
if (strength.value < 7) {
|
||||
return "Fair";
|
||||
}
|
||||
if (strength.value < 11) {
|
||||
return "Good";
|
||||
}
|
||||
return "Strong";
|
||||
});
|
||||
const color = computed(() => {
|
||||
if (strength.value < 6) {
|
||||
return "red";
|
||||
}
|
||||
if (strength.value < 7) {
|
||||
return "pink";
|
||||
}
|
||||
if (strength.value < 11) {
|
||||
return "yellow";
|
||||
}
|
||||
return "green";
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// Workaround to make sure the teleport is rendered after the parent component
|
||||
teleport.value = true;
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue