mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-23 08:43:50 +02:00
replace el-input with InputGroup
This commit is contained in:
pa
Natsumi
@@ -27,9 +27,8 @@
|
||||
</Select>
|
||||
</div>
|
||||
<div class="favorites-toolbar__right">
|
||||
<el-input
|
||||
<InputGroupSearch
|
||||
v-model="avatarFavoriteSearch"
|
||||
clearable
|
||||
class="favorites-toolbar__search"
|
||||
:placeholder="t('view.favorite.avatars.search')"
|
||||
@input="searchAvatarFavorites" />
|
||||
@@ -280,11 +279,11 @@
|
||||
<span>{{ t('view.favorite.avatars.new_group') }}</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-else
|
||||
ref="newLocalGroupInput"
|
||||
v-model="newLocalGroupName"
|
||||
size="small"
|
||||
size="sm"
|
||||
class="group-item__input"
|
||||
:placeholder="t('view.favorite.avatars.new_group')"
|
||||
@keyup.enter="handleLocalGroupCreationConfirm"
|
||||
@@ -515,6 +514,7 @@
|
||||
import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
|
||||
import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
|
||||
import { Loader } from 'lucide-vue-next';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
@@ -27,9 +27,8 @@
|
||||
</Select>
|
||||
</div>
|
||||
<div class="favorites-toolbar__right">
|
||||
<el-input
|
||||
<InputGroupSearch
|
||||
v-model="friendFavoriteSearch"
|
||||
clearable
|
||||
class="favorites-toolbar__search"
|
||||
:placeholder="t('view.favorite.worlds.search')"
|
||||
@input="searchFriendFavorites" />
|
||||
@@ -297,6 +296,7 @@
|
||||
import { computed, onBeforeMount, ref, watch } from 'vue';
|
||||
import { MoreFilled, Refresh } from '@element-plus/icons-vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupSearch } from '@/components/ui/input-group';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { Ellipsis } from 'lucide-vue-next';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
|
||||
@@ -27,9 +27,8 @@
|
||||
</Select>
|
||||
</div>
|
||||
<div class="favorites-toolbar__right">
|
||||
<el-input
|
||||
<InputGroupSearch
|
||||
v-model="worldFavoriteSearch"
|
||||
clearable
|
||||
class="favorites-toolbar__search"
|
||||
:placeholder="t('view.favorite.worlds.search')"
|
||||
@input="searchWorldFavorites" />
|
||||
@@ -266,11 +265,11 @@
|
||||
<el-icon><Plus /></el-icon>
|
||||
<span>{{ t('view.favorite.worlds.new_group') }}</span>
|
||||
</div>
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-else
|
||||
ref="newLocalGroupInput"
|
||||
v-model="newLocalGroupName"
|
||||
size="small"
|
||||
size="sm"
|
||||
class="group-item__input"
|
||||
:placeholder="t('view.favorite.worlds.new_group')"
|
||||
@keyup.enter="handleLocalGroupCreationConfirm"
|
||||
@@ -428,6 +427,7 @@
|
||||
import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
|
||||
import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
@@ -47,15 +47,13 @@
|
||||
</Select>
|
||||
</div>
|
||||
<br />
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="avatarExportContent"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="15"
|
||||
resize="none"
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
@click="handleCopyAvatarExportData"></el-input>
|
||||
input-class="resize-none"
|
||||
@click="handleCopyAvatarExportData" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -63,6 +61,7 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -20,13 +20,11 @@
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="avatarImportDialog.input"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="10"
|
||||
resize="none"
|
||||
style="margin-top: 10px"></el-input>
|
||||
style="margin-top: 10px"
|
||||
input-class="resize-none" />
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -163,6 +161,7 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { Loading } from '@element-plus/icons-vue';
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
@@ -21,15 +21,13 @@
|
||||
|
||||
<br />
|
||||
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="friendExportContent"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="15"
|
||||
resize="none"
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
@click="handleCopyFriendExportData"></el-input>
|
||||
input-class="resize-none"
|
||||
@click="handleCopyFriendExportData" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -37,6 +35,7 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
||||
@@ -20,13 +20,11 @@
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="friendImportDialog.input"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="10"
|
||||
resize="none"
|
||||
style="margin-top: 10px" />
|
||||
style="margin-top: 10px"
|
||||
input-class="resize-none" />
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
|
||||
<div>
|
||||
<Select
|
||||
@@ -121,6 +119,7 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { Loading } from '@element-plus/icons-vue';
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
@@ -44,15 +44,13 @@
|
||||
|
||||
<br />
|
||||
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="worldExportContent"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="15"
|
||||
resize="none"
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
@click="handleCopyWorldExportData"></el-input>
|
||||
input-class="resize-none"
|
||||
@click="handleCopyWorldExportData" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -60,6 +58,7 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -21,13 +21,11 @@
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="worldImportDialog.input"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="10"
|
||||
resize="none"
|
||||
style="margin-top: 10px"></el-input>
|
||||
style="margin-top: 10px"
|
||||
input-class="resize-none" />
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -165,6 +163,7 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { Loading } from '@element-plus/icons-vue';
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
@@ -27,13 +27,13 @@
|
||||
:label="t('view.feed.filters.' + type)"
|
||||
:value="type"></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="feedTable.search"
|
||||
:placeholder="t('view.feed.search_placeholder')"
|
||||
clearable
|
||||
style="flex: 0.4; margin-left: 10px"
|
||||
@keyup.enter="feedTableLookup"
|
||||
@change="feedTableLookup"></el-input>
|
||||
@change="feedTableLookup" />
|
||||
</div>
|
||||
</template>
|
||||
</DataTableLayout>
|
||||
@@ -46,6 +46,7 @@
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useAppearanceSettingsStore, useFeedStore, useVrcxStore } from '../../stores';
|
||||
import { InputGroupField } from '../../components/ui/input-group';
|
||||
import { DataTableLayout } from '../../components/ui/data-table';
|
||||
import { Switch } from '../../components/ui/switch';
|
||||
import { columns as baseColumns } from './columns.jsx';
|
||||
|
||||
@@ -20,12 +20,12 @@
|
||||
:label="type"
|
||||
:value="type"></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="friendsListSearch"
|
||||
:placeholder="t('view.friend_list.search_placeholder')"
|
||||
clearable
|
||||
style="width: 250px"
|
||||
@change="friendsListSearchChange"></el-input>
|
||||
@change="friendsListSearchChange" />
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div v-if="friendsListBulkUnfriendMode" class="inline-block mr-10">
|
||||
@@ -261,6 +261,7 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, reactive, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
:label="t('view.friend_log.filters.' + type)"
|
||||
:value="type" />
|
||||
</el-select>
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="friendLogTable.filters[1].value"
|
||||
:placeholder="t('view.friend_log.search_placeholder')"
|
||||
style="flex: 0.4; margin-left: 10px" />
|
||||
@@ -48,6 +48,7 @@
|
||||
|
||||
import { useAppearanceSettingsStore, useFriendStore, useVrcxStore } from '../../stores';
|
||||
import { DataTableLayout } from '../../components/ui/data-table';
|
||||
import { InputGroupField } from '../../components/ui/input-group';
|
||||
import { createColumns } from './columns.jsx';
|
||||
import { database } from '../../service/database';
|
||||
import { removeFromArray } from '../../shared/utils';
|
||||
|
||||
@@ -3,12 +3,10 @@
|
||||
<div v-if="settingsReady" class="friend-view__toolbar">
|
||||
<el-segmented v-model="activeSegment" :options="segmentedOptions" />
|
||||
<div class="friend-view__actions">
|
||||
<el-input
|
||||
<InputGroupSearch
|
||||
v-model="searchTerm"
|
||||
class="friend-view__search"
|
||||
:prefix-icon="Search"
|
||||
clearable
|
||||
placeholder="Search Friend"></el-input>
|
||||
placeholder="Search Friend" />
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<div>
|
||||
@@ -163,8 +161,9 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { Loading, Search } from '@element-plus/icons-vue';
|
||||
import { Loading } from '@element-plus/icons-vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupSearch } from '@/components/ui/input-group';
|
||||
import { Settings } from 'lucide-vue-next';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -36,13 +36,13 @@
|
||||
:label="t('view.game_log.filters.' + type)"
|
||||
:value="type"></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="gameLogTable.search"
|
||||
:placeholder="t('view.game_log.search_placeholder')"
|
||||
clearable
|
||||
style="flex: 0.4; margin-left: 10px"
|
||||
@keyup.enter="gameLogTableLookup"
|
||||
@change="gameLogTableLookup"></el-input>
|
||||
@change="gameLogTableLookup" />
|
||||
</div>
|
||||
</template>
|
||||
</DataTableLayout>
|
||||
@@ -60,6 +60,7 @@
|
||||
|
||||
import { useAppearanceSettingsStore, useGameLogStore, useVrcxStore } from '../../stores';
|
||||
import { DataTableLayout } from '../../components/ui/data-table';
|
||||
import { InputGroupField } from '../../components/ui/input-group';
|
||||
import { createColumns } from './columns.jsx';
|
||||
import { database } from '../../service/database';
|
||||
import { removeFromArray } from '../../shared/utils';
|
||||
|
||||
@@ -26,24 +26,24 @@
|
||||
prop="username"
|
||||
required
|
||||
style="display: block">
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="loginForm.username"
|
||||
name="username"
|
||||
:placeholder="t('view.login.field.username')"
|
||||
clearable></el-input>
|
||||
clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('view.login.field.password')"
|
||||
prop="password"
|
||||
required
|
||||
style="display: block; margin-top: 10px">
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
name="password"
|
||||
:placeholder="t('view.login.field.password')"
|
||||
clearable
|
||||
show-password></el-input>
|
||||
show-password />
|
||||
</el-form-item>
|
||||
<label class="inline-flex items-center gap-2 mr-2">
|
||||
<Checkbox v-model="loginForm.saveCredentials" />
|
||||
@@ -58,22 +58,22 @@
|
||||
:label="t('view.login.field.endpoint')"
|
||||
prop="endpoint"
|
||||
style="margin-top: 10px">
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="loginForm.endpoint"
|
||||
name="endpoint"
|
||||
:placeholder="AppDebug.endpointDomainVrchat"
|
||||
clearable></el-input>
|
||||
clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="enableCustomEndpoint"
|
||||
:label="t('view.login.field.websocket')"
|
||||
prop="websocket"
|
||||
style="margin-top: 10px">
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="loginForm.websocket"
|
||||
name="websocket"
|
||||
:placeholder="AppDebug.websocketDomainVrchat"
|
||||
clearable></el-input>
|
||||
clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Button class="mt-2" type="submit" size="lg" style="width: 100%">{{
|
||||
@@ -151,6 +151,7 @@
|
||||
import { CircleArrowDown, Route } from 'lucide-vue-next';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
:label="t('view.moderation.filters.' + item)"
|
||||
:value="item" />
|
||||
</el-select>
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="playerModerationTable.filters[1].value"
|
||||
:placeholder="t('view.moderation.search_placeholder')"
|
||||
class="filter-input" />
|
||||
@@ -44,6 +44,7 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
:label="t('view.notification.filters.' + type)"
|
||||
:value="type" />
|
||||
</el-select>
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="notificationTable.filters[1].value"
|
||||
:placeholder="t('view.notification.search_placeholder')"
|
||||
clearable
|
||||
@@ -75,6 +75,7 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
|
||||
@@ -9,13 +9,13 @@
|
||||
<div style="font-size: 12px">
|
||||
<span>{{ t('dialog.edit_send_invite_response_message.description') }}</span>
|
||||
</div>
|
||||
<InputGroupCharCount
|
||||
<InputGroupTextareaField
|
||||
v-model="editAndSendInviteResponseDialog.newMessage"
|
||||
:maxlength="64"
|
||||
multiline
|
||||
rows="2"
|
||||
:rows="2"
|
||||
class="mt-2.5"
|
||||
placeholder="" />
|
||||
placeholder=""
|
||||
show-count />
|
||||
<template #footer>
|
||||
<Button variant="secondary" class="mr-2" @click="cancelEditAndSendInviteResponse">{{
|
||||
t('dialog.edit_send_invite_response_message.cancel')
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
<script setup>
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupCharCount } from '@/components/ui/input-group';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -156,6 +156,7 @@ export const createColumns = ({
|
||||
class={[
|
||||
'x-user-status',
|
||||
'shrink-0',
|
||||
'mr-1',
|
||||
status ? statusClass(status) : null
|
||||
]}
|
||||
></i>
|
||||
@@ -339,7 +340,7 @@ export const createColumns = ({
|
||||
const userRef = row.original?.ref;
|
||||
const langs = userRef?.$languages ?? [];
|
||||
return (
|
||||
<div>
|
||||
<div class="flex items-center gap-0.5">
|
||||
{langs.map((item) => (
|
||||
<TooltipWrapper
|
||||
key={item.key}
|
||||
|
||||
@@ -19,12 +19,12 @@
|
||||
}}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="photonEventTableFilter"
|
||||
:placeholder="t('view.player_list.photon.search_placeholder')"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
@input="photonEventTableFilterChange"></el-input>
|
||||
@input="photonEventTableFilterChange" />
|
||||
<Button variant="outline" @click="emitShowChatboxBlacklist">{{
|
||||
t('view.player_list.photon.chatbox_blacklist')
|
||||
}}</Button>
|
||||
@@ -390,6 +390,7 @@
|
||||
<script setup>
|
||||
import { ArrowRight, Download } from '@element-plus/icons-vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
width="600px">
|
||||
<div v-if="chatboxBlacklistDialog.visible" v-loading="chatboxBlacklistDialog.loading">
|
||||
<h2>{{ t('dialog.chatbox_blacklist.keyword_blacklist') }}</h2>
|
||||
<el-input
|
||||
<InputGroupAction
|
||||
v-for="(item, index) in chatboxBlacklist"
|
||||
:key="index"
|
||||
v-model="chatboxBlacklist[index]"
|
||||
size="small"
|
||||
size="sm"
|
||||
style="margin-top: 5px"
|
||||
@change="saveChatboxBlacklist">
|
||||
<template #append>
|
||||
<template #actions>
|
||||
<Button
|
||||
variant="outline"
|
||||
@click="
|
||||
@@ -22,7 +22,7 @@
|
||||
">
|
||||
</Button>
|
||||
</template>
|
||||
</el-input>
|
||||
</InputGroupAction>
|
||||
<Button size="sm" variant="outline" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
|
||||
{{ t('dialog.chatbox_blacklist.add_item') }}
|
||||
</Button>
|
||||
@@ -56,6 +56,7 @@
|
||||
|
||||
<script setup>
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupAction } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="x-container">
|
||||
<div style="margin: 0 0 10px; display: flex; align-items: center">
|
||||
<el-input
|
||||
<InputGroupField
|
||||
:model-value="searchText"
|
||||
:placeholder="t('view.search.search_placeholder')"
|
||||
style="flex: 1"
|
||||
clearable
|
||||
@input="updateSearchText"
|
||||
@keyup.enter="search"></el-input>
|
||||
@keyup.enter="search" />
|
||||
<TooltipWrapper side="bottom" :content="t('view.search.clear_results_tooltip')">
|
||||
<Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="handleClearSearch"
|
||||
><Trash2
|
||||
@@ -347,6 +347,7 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ButtonGroup } from '@/components/ui/button-group';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
import { ref } from 'vue';
|
||||
|
||||
@@ -256,12 +256,12 @@
|
||||
:value="isTestTTSVisible"
|
||||
@change="isTestTTSVisible = !isTestTTSVisible" />
|
||||
<div v-if="isTestTTSVisible" style="margin-top: 5px">
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="notificationTTSTest"
|
||||
type="textarea"
|
||||
:placeholder="t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder')"
|
||||
:rows="1"
|
||||
style="width: 175px; display: inline-block"></el-input>
|
||||
style="width: 175px; display: inline-block"
|
||||
input-class="resize-none min-h-0" />
|
||||
<Button size="sm" variant="outline" style="margin-left: 10px" @click="testNotificationTTS">{{
|
||||
t('view.settings.notifications.notifications.text_to_speech.play')
|
||||
}}</Button>
|
||||
@@ -276,6 +276,7 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
||||
@@ -6,15 +6,19 @@
|
||||
width="600px"
|
||||
@close="closeDialog">
|
||||
<div>
|
||||
<el-input
|
||||
<InputGroupAction
|
||||
v-for="(provider, index) in avatarRemoteDatabaseProviderList"
|
||||
:key="index"
|
||||
v-model="avatarRemoteDatabaseProviderList[index]"
|
||||
size="small"
|
||||
size="sm"
|
||||
style="margin-top: 5px"
|
||||
@change="saveAvatarProviderList">
|
||||
<Button variant="outline" size="icon" @click="removeAvatarProvider(provider)"><Trash2 /></Button>
|
||||
</el-input>
|
||||
<template #actions>
|
||||
<Button variant="outline" size="icon" @click="removeAvatarProvider(provider)">
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</template>
|
||||
</InputGroupAction>
|
||||
|
||||
<Button size="sm" style="margin-top: 5px" @click="avatarRemoteDatabaseProviderList.push('')">
|
||||
{{ t('dialog.avatar_database_provider.add_provider') }}
|
||||
@@ -25,6 +29,7 @@
|
||||
|
||||
<script setup>
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupAction } from '@/components/ui/input-group';
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -13,28 +13,25 @@
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="launchOptionsDialog.launchArguments"
|
||||
type="textarea"
|
||||
size="small"
|
||||
show-word-limit
|
||||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||||
:rows="2"
|
||||
placeholder=""
|
||||
style="margin-top: 10px">
|
||||
</el-input>
|
||||
style="margin-top: 10px"
|
||||
input-class="resize-none" />
|
||||
|
||||
<template v-if="!isLinux">
|
||||
<div style="font-size: 12px; margin-top: 10px">
|
||||
{{ t('dialog.launch_options.path_override') }}
|
||||
</div>
|
||||
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="launchOptionsDialog.vrcLaunchPathOverride"
|
||||
type="textarea"
|
||||
placeholder="C:\Program Files (x86)\Steam\steamapps\common\VRChat"
|
||||
:rows="1"
|
||||
style="display: block; margin-top: 10px">
|
||||
</el-input>
|
||||
style="display: block; margin-top: 10px"
|
||||
input-class="resize-none min-h-0" />
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
@@ -63,6 +60,7 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -6,24 +6,22 @@
|
||||
:close-on-click-modal="false"
|
||||
:title="t('dialog.primary_password.header')"
|
||||
width="400px">
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="enablePrimaryPasswordDialog.password"
|
||||
:placeholder="t('dialog.primary_password.password_placeholder')"
|
||||
type="password"
|
||||
size="small"
|
||||
size="sm"
|
||||
maxlength="32"
|
||||
show-password
|
||||
autofocus>
|
||||
</el-input>
|
||||
<el-input
|
||||
autofocus />
|
||||
<InputGroupField
|
||||
v-model="enablePrimaryPasswordDialog.rePassword"
|
||||
:placeholder="t('dialog.primary_password.re_input_placeholder')"
|
||||
type="password"
|
||||
style="margin-top: 5px"
|
||||
size="small"
|
||||
size="sm"
|
||||
maxlength="32"
|
||||
show-password>
|
||||
</el-input>
|
||||
show-password />
|
||||
<template #footer>
|
||||
<Button
|
||||
:disabled="
|
||||
@@ -39,6 +37,7 @@
|
||||
|
||||
<script setup>
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
||||
@@ -44,10 +44,9 @@
|
||||
<template v-if="form.translationApiType === 'google'">
|
||||
<el-form label-position="top" label-width="120px" size="small">
|
||||
<el-form-item :label="t('dialog.translation_api.description')">
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="form.translationApiKey"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="AIzaSy..."
|
||||
clearable />
|
||||
@@ -58,29 +57,27 @@
|
||||
<template v-if="form.translationApiType === 'openai'">
|
||||
<el-form label-position="top" label-width="120px" size="small">
|
||||
<el-form-item :label="t('dialog.translation_api.openai.endpoint')">
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="form.translationApiEndpoint"
|
||||
placeholder="https://api.openai.com/v1/chat/completions"
|
||||
clearable
|
||||
textarea />
|
||||
clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="t('dialog.translation_api.openai.api_key')">
|
||||
<el-input
|
||||
<InputGroupField
|
||||
v-model="form.translationApiKey"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="sk-..."
|
||||
clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="t('dialog.translation_api.openai.model')">
|
||||
<el-input v-model="form.translationApiModel" clearable />
|
||||
<InputGroupField v-model="form.translationApiModel" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="t('dialog.translation_api.openai.prompt_optional')">
|
||||
<el-input v-model="form.translationApiPrompt" type="textarea" :rows="3" clearable />
|
||||
<InputGroupTextareaField v-model="form.translationApiPrompt" :rows="3" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -118,6 +115,7 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { reactive, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -46,23 +46,24 @@
|
||||
<div v-for="(item, value) in VRChatConfigList" :key="value" style="display: block; margin-top: 10px">
|
||||
<span style="word-break: keep-all">{{ item.name }}:</span>
|
||||
<div style="display: flex">
|
||||
<el-input
|
||||
<InputGroupAction
|
||||
v-model="VRChatConfigFile[value]"
|
||||
:placeholder="item.default"
|
||||
size="small"
|
||||
size="sm"
|
||||
:type="item.type ? item.type : 'text'"
|
||||
:min="item.min"
|
||||
:max="item.max"
|
||||
@input="refreshDialogValues"
|
||||
style="flex: 1; margin-top: 5px">
|
||||
<template #append>
|
||||
<template #actions>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
v-if="item.folderBrowser"
|
||||
@click="openConfigFolderBrowser(value)"></Button>
|
||||
@click="openConfigFolderBrowser(value)">
|
||||
</Button>
|
||||
</template>
|
||||
</el-input>
|
||||
</InputGroupAction>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -172,6 +173,7 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupAction } from '@/components/ui/input-group';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
|
||||
@@ -7,13 +7,13 @@
|
||||
@close="closeDialog">
|
||||
<div style="font-size: 12px">{{ t('dialog.youtube_api.description') }} <br /></div>
|
||||
|
||||
<InputGroupCharCount
|
||||
<InputGroupTextareaField
|
||||
v-model="youTubeApiKey"
|
||||
:placeholder="t('dialog.youtube_api.placeholder')"
|
||||
:maxlength="39"
|
||||
multiline
|
||||
rows="2"
|
||||
class="mt-2.5" />
|
||||
:rows="2"
|
||||
class="mt-2.5"
|
||||
show-count />
|
||||
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between">
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
<script setup>
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupCharCount } from '@/components/ui/input-group';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -418,15 +418,13 @@
|
||||
{{ t('dialog.gallery_icons.upload') }}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<el-input
|
||||
type="textarea"
|
||||
<InputGroupTextareaField
|
||||
v-model="printUploadNote"
|
||||
size="small"
|
||||
:rows="1"
|
||||
resize="none"
|
||||
maxlength="32"
|
||||
style="margin-left: 10px; width: 300px"
|
||||
:placeholder="t('dialog.gallery_icons.note')"></el-input>
|
||||
:placeholder="t('dialog.gallery_icons.note')"
|
||||
input-class="resize-none min-h-0" />
|
||||
<label class="inline-flex items-center gap-2" style="margin-left: 10px; margin-right: 10px">
|
||||
<Checkbox v-model="printCropBorder" />
|
||||
<span>{{ t('dialog.gallery_icons.crop_print_border') }}</span>
|
||||
@@ -556,6 +554,7 @@
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import { Maximize2, Trash2 } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { ButtonGroup } from '@/components/ui/button-group';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
|
||||
@@ -7,7 +7,13 @@
|
||||
@close="closeDialog">
|
||||
<div style="font-size: 12px">
|
||||
<span>{{ t('dialog.edit_invite_message.description') }}</span>
|
||||
<InputGroupCharCount v-model="message" :maxlength="64" multiline rows="2" class="mt-2.5" placeholder="" />
|
||||
<InputGroupTextareaField
|
||||
v-model="message"
|
||||
:maxlength="64"
|
||||
:rows="2"
|
||||
class="mt-2.5"
|
||||
placeholder=""
|
||||
show-count />
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button variant="secondary" class="mr-2" @click="closeDialog">{{
|
||||
@@ -21,7 +27,7 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupCharCount } from '@/components/ui/input-group';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
<template>
|
||||
<el-dialog v-model="isVisible" :title="t('dialog.export_own_avatars.header')" width="650px">
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="exportAvatarsListCsv"
|
||||
v-loading="loading"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="15"
|
||||
resize="none"
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
input-class="resize-none"
|
||||
@click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
@@ -16,6 +14,7 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useAvatarStore, useUserStore } from '../../../stores';
|
||||
|
||||
@@ -8,20 +8,19 @@
|
||||
<div style="font-size: 12px">
|
||||
{{ t('dialog.discord_names.description') }}
|
||||
</div>
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="discordNamesContent"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="15"
|
||||
resize="none"
|
||||
readonly
|
||||
style="margin-top: 15px" />
|
||||
style="margin-top: 15px"
|
||||
input-class="resize-none" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useUserStore } from '../../../stores';
|
||||
|
||||
@@ -2,25 +2,21 @@
|
||||
<el-dialog :title="t('dialog.export_friends_list.header')" v-model="isVisible" width="650px">
|
||||
<el-tabs>
|
||||
<el-tab-pane :label="t('dialog.export_friends_list.csv')">
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="exportFriendsListCsv"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="15"
|
||||
resize="none"
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
input-class="resize-none"
|
||||
@click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="t('dialog.export_friends_list.json')">
|
||||
<el-input
|
||||
<InputGroupTextareaField
|
||||
v-model="exportFriendsListJson"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="15"
|
||||
resize="none"
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
input-class="resize-none"
|
||||
@click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -30,6 +26,7 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useUserStore } from '../../../stores';
|
||||
|
||||
@@ -76,12 +76,10 @@
|
||||
</div>
|
||||
<div v-else key="grid" class="grid-view">
|
||||
<div class="search-container">
|
||||
<el-input
|
||||
<InputGroupSearch
|
||||
v-model="searchQuery"
|
||||
size="sm"
|
||||
:placeholder="t('dialog.group_calendar.search_placeholder')"
|
||||
clearable
|
||||
size="small"
|
||||
prefix-:icon="Search"
|
||||
class="search-input" />
|
||||
</div>
|
||||
|
||||
@@ -127,6 +125,7 @@
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { ArrowRight } from '@element-plus/icons-vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupSearch } from '@/components/ui/input-group';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
@@ -70,12 +70,12 @@
|
||||
|
||||
<el-table-column :label="t('table.import.note')" prop="memo">
|
||||
<template #default="{ row }">
|
||||
<InputGroupCharCount
|
||||
<InputGroupTextareaField
|
||||
v-model="row.memo"
|
||||
:maxlength="256"
|
||||
multiline
|
||||
rows="2"
|
||||
input-class="min-h-0 py-1 resize-none" />
|
||||
:rows="2"
|
||||
input-class="min-h-0 py-1 resize-none"
|
||||
show-count />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupCharCount } from '@/components/ui/input-group';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { Loading } from '@element-plus/icons-vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -56,10 +56,9 @@
|
||||
|
||||
<div class="flex items-center">
|
||||
<!-- Search bar input -->
|
||||
<el-input
|
||||
<InputGroupSearch
|
||||
v-model="screenshotMetadataDialog.search"
|
||||
placeholder="Search"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@input="screenshotMetadataSearch" />
|
||||
<!-- Search type dropdown -->
|
||||
@@ -167,6 +166,7 @@
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupSearch } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
Reference in New Issue
Block a user