chore: rename
This commit is contained in:
Neko Ayaka
@@ -1,45 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
label?: string
|
||||
description?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const value = computed({
|
||||
get: () => props.modelValue,
|
||||
set: val => emit('update:modelValue', val),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div max-w-full>
|
||||
<label flex="~ col gap-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-1 text-sm font-medium">
|
||||
{{ label || 'Account ID' }}
|
||||
<span v-if="required !== false" class="text-red-500">*</span>
|
||||
</div>
|
||||
<div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
|
||||
{{ description || 'Account ID' }}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
v-model="value"
|
||||
type="text"
|
||||
border="neutral-200 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
|
||||
transition="all duration-250 ease-in-out"
|
||||
w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
|
||||
bg="neutral-100 dark:neutral-800 focus:white dark:focus:neutral-700"
|
||||
:placeholder="placeholder"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,38 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Collapsable } from '@proj-airi/stage-ui/components'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
title?: string
|
||||
initialVisible?: boolean
|
||||
}>()
|
||||
|
||||
const visible = ref(props.initialVisible || false)
|
||||
|
||||
function toggleVisible() {
|
||||
visible.value = !visible.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Collapsable w-full>
|
||||
<template #trigger="slotProps">
|
||||
<button
|
||||
transition="all ease-in-out duration-250"
|
||||
w-full flex items-center gap-1.5 outline-none
|
||||
class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
|
||||
@click="() => slotProps.setVisible(!slotProps.visible) && toggleVisible()"
|
||||
>
|
||||
<h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
|
||||
<span>{{ title || 'Advanced' }}</span>
|
||||
</h2>
|
||||
<div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
|
||||
<div i-solar:alt-arrow-down-bold-duotone />
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
<div mt-4>
|
||||
<slot />
|
||||
</div>
|
||||
</Collapsable>
|
||||
</template>
|
||||
@@ -1,46 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
providerName: string
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
label?: string
|
||||
description?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const value = computed({
|
||||
get: () => props.modelValue,
|
||||
set: val => emit('update:modelValue', val),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div max-w-full>
|
||||
<label flex="~ col gap-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-1 text-sm font-medium">
|
||||
{{ label || 'API Key' }}
|
||||
<span v-if="required !== false" class="text-red-500">*</span>
|
||||
</div>
|
||||
<div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
|
||||
{{ description || `API Key for ${providerName}` }}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
v-model="value"
|
||||
type="password"
|
||||
border="neutral-200 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
|
||||
transition="all duration-250 ease-in-out"
|
||||
w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
|
||||
bg="neutral-100 dark:neutral-800 focus:white dark:focus:neutral-700"
|
||||
:placeholder="placeholder"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,43 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
label?: string
|
||||
description?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const value = computed({
|
||||
get: () => props.modelValue,
|
||||
set: val => emit('update:modelValue', val),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label flex="~ col gap-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-1 text-sm font-medium">
|
||||
{{ label || 'Base URL' }}
|
||||
<span v-if="required" class="text-red-500">*</span>
|
||||
</div>
|
||||
<div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
|
||||
{{ description || 'Custom base URL (optional)' }}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
v-model="value"
|
||||
type="text"
|
||||
border="neutral-200 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
|
||||
transition="all duration-250 ease-in-out"
|
||||
w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
|
||||
bg="neutral-100 dark:neutral-800 focus:white dark:focus:neutral-700"
|
||||
:placeholder="placeholder"
|
||||
>
|
||||
</label>
|
||||
</template>
|
||||
@@ -1,34 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title?: string
|
||||
description?: string
|
||||
onReset?: () => void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ col gap-6">
|
||||
<div flex="~ row" items-center justify-between>
|
||||
<div>
|
||||
<h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
|
||||
{{ title || 'Basic' }}
|
||||
</h2>
|
||||
<div text="neutral-400 dark:neutral-500">
|
||||
<span>{{ description || 'Essential settings' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-if="onReset"
|
||||
title="Reset settings"
|
||||
flex items-center justify-center rounded-full p-2
|
||||
transition="all duration-250 ease-in-out"
|
||||
text="neutral-500 dark:neutral-400"
|
||||
bg="transparent dark:transparent hover:neutral-200 dark:hover:neutral-800 active:neutral-300 dark:active:neutral-700"
|
||||
@click="onReset"
|
||||
>
|
||||
<div i-solar:refresh-bold-duotone text-xl />
|
||||
</button>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,37 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
label?: string
|
||||
description?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
const value = computed({
|
||||
get: () => props.modelValue,
|
||||
set: val => emit('update:modelValue', val),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label flex="~ col gap-4">
|
||||
<div flex="~ row" items-center gap-2>
|
||||
<div flex="1">
|
||||
<div class="flex items-center gap-1 text-sm font-medium">
|
||||
{{ label }}
|
||||
</div>
|
||||
<div class="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
{{ description }}
|
||||
</div>
|
||||
</div>
|
||||
<span font-mono>{{ value ? 'On' : 'Off' }}</span>
|
||||
</div>
|
||||
<div flex="~ row" items-center gap-2>
|
||||
<input v-model="value" type="checkbox">
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
@@ -1,9 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
// No props needed for this container component
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div bg="neutral-50 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4 flex="~ col gap-6">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,35 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
providerName: string
|
||||
providerIcon?: string
|
||||
providerIconColor?: string
|
||||
onBack?: () => void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-motion
|
||||
flex="~ row" items-center gap-2
|
||||
:initial="{ opacity: 0, x: 10 }"
|
||||
:enter="{ opacity: 1, x: 0 }"
|
||||
:leave="{ opacity: 0, x: -10 }"
|
||||
:duration="250"
|
||||
>
|
||||
<button @click="onBack">
|
||||
<div i-solar:alt-arrow-left-line-duotone text-2xl />
|
||||
</button>
|
||||
<h1 relative>
|
||||
<div absolute left-0 top-0 translate-y="[-80%]">
|
||||
<span text="neutral-300 dark:neutral-500">Provider</span>
|
||||
</div>
|
||||
<div text-3xl font-semibold>
|
||||
{{ providerName }}
|
||||
</div>
|
||||
</h1>
|
||||
</div>
|
||||
<slot />
|
||||
<div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
|
||||
<div text="40" :class="providerIcon || providerIconColor" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,55 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Range } from '@proj-airi/stage-ui/components'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: number
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
label?: string
|
||||
description?: string
|
||||
formatValue?: (value: number) => string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: number): void
|
||||
}>()
|
||||
|
||||
const value = computed({
|
||||
get: () => props.modelValue,
|
||||
set: val => emit('update:modelValue', val),
|
||||
})
|
||||
|
||||
const formattedValue = computed(() => {
|
||||
if (props.formatValue) {
|
||||
return props.formatValue(value.value)
|
||||
}
|
||||
return value.value.toFixed(2)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label flex="~ col gap-4">
|
||||
<div flex="~ row" items-center gap-2>
|
||||
<div flex="1">
|
||||
<div class="flex items-center gap-1 text-sm font-medium">
|
||||
{{ label }}
|
||||
</div>
|
||||
<div class="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
{{ description }}
|
||||
</div>
|
||||
</div>
|
||||
<span font-mono>{{ formattedValue }}</span>
|
||||
</div>
|
||||
<div flex="~ row" items-center gap-2>
|
||||
<Range
|
||||
v-model="value"
|
||||
:min="min || 0"
|
||||
:max="max || 1"
|
||||
:step="step || 0.01"
|
||||
w-full
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
@@ -1,9 +0,0 @@
|
||||
export { default as ProviderAccountIdInput } from './ProviderAccountIdInput.vue'
|
||||
export { default as ProviderAdvancedSettings } from './ProviderAdvancedSettings.vue'
|
||||
export { default as ProviderApiKeyInput } from './ProviderApiKeyInput.vue'
|
||||
export { default as ProviderBaseUrlInput } from './ProviderBaseUrlInput.vue'
|
||||
export { default as ProviderBasicSettings } from './ProviderBasicSettings.vue'
|
||||
export { default as ProviderCheckboxInput } from './ProviderCheckboxInput.vue'
|
||||
export { default as ProviderSettingsContainer } from './ProviderSettingsContainer.vue'
|
||||
export { default as ProviderSettingsLayout } from './ProviderSettingsLayout.vue'
|
||||
export { default as ProviderSliderInput } from './ProviderSliderInput.vue'
|
||||
Reference in New Issue
Block a user