refactor: sort windi class names
This commit is contained in:
liyasthomas
@@ -3,17 +3,19 @@
|
||||
<div
|
||||
class="
|
||||
bg-primary
|
||||
border-b border-dividerLight
|
||||
flex flex-1
|
||||
pl-4
|
||||
border-dividerLight
|
||||
sticky
|
||||
top-0
|
||||
z-10
|
||||
sticky
|
||||
flex
|
||||
items-center
|
||||
justify-between
|
||||
flex-1
|
||||
pl-4
|
||||
border-b
|
||||
"
|
||||
>
|
||||
<label for="log" class="font-semibold text-secondaryLight py-2">
|
||||
<label for="log" class="py-2 font-semibold text-secondaryLight">
|
||||
{{ title }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -12,9 +12,9 @@
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="request">
|
||||
<div
|
||||
class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky"
|
||||
class="sticky top-0 z-10 flex flex-col p-4 bg-primary space-y-4"
|
||||
>
|
||||
<div class="space-x-2 flex-1 inline-flex">
|
||||
<div class="inline-flex flex-1 space-x-2">
|
||||
<input
|
||||
id="mqtt-url"
|
||||
v-model="url"
|
||||
@@ -23,15 +23,16 @@
|
||||
spellcheck="false"
|
||||
class="
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
rounded
|
||||
border-divider
|
||||
text-secondaryDark
|
||||
w-full
|
||||
py-2
|
||||
px-4
|
||||
hover:border-dividerDark
|
||||
focus-visible:bg-transparent
|
||||
focus-visible:border-dividerDark
|
||||
w-full
|
||||
px-4
|
||||
py-2
|
||||
border
|
||||
rounded
|
||||
"
|
||||
:placeholder="$t('mqtt.url')"
|
||||
:disabled="connectionState"
|
||||
@@ -85,7 +86,7 @@
|
||||
class="hide-scrollbar !overflow-auto"
|
||||
>
|
||||
<AppSection label="messages">
|
||||
<div class="flex flex-col flex-1 p-4 inline-flex">
|
||||
<div class="flex inline-flex flex-col flex-1 p-4">
|
||||
<label for="pub_topic" class="font-semibold text-secondaryLight">
|
||||
{{ $t("mqtt.topic") }}
|
||||
</label>
|
||||
@@ -101,12 +102,12 @@
|
||||
spellcheck="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-1 p-4 items-center justify-between">
|
||||
<div class="flex items-center justify-between flex-1 p-4">
|
||||
<label for="mqtt-message" class="font-semibold text-secondaryLight">
|
||||
{{ $t("mqtt.communication") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex space-x-2 px-4">
|
||||
<div class="flex px-4 space-x-2">
|
||||
<input
|
||||
id="mqtt-message"
|
||||
v-model="msg"
|
||||
@@ -126,18 +127,21 @@
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
border-t border-dividerLight
|
||||
flex flex-col flex-1
|
||||
mt-4
|
||||
p-4
|
||||
flex-col
|
||||
border-dividerLight
|
||||
flex
|
||||
inline-flex
|
||||
flex-1
|
||||
p-4
|
||||
mt-4
|
||||
border-t
|
||||
"
|
||||
>
|
||||
<label for="sub_topic" class="font-semibold text-secondaryLight">
|
||||
{{ $t("mqtt.topic") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex space-x-2 px-4">
|
||||
<div class="flex px-4 space-x-2">
|
||||
<input
|
||||
id="sub_topic"
|
||||
v-model="sub_topic"
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="request">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="space-x-2 flex-1 inline-flex">
|
||||
<div class="sticky top-0 z-10 flex p-4 bg-primary">
|
||||
<div class="inline-flex flex-1 space-x-2">
|
||||
<div class="flex flex-1">
|
||||
<label for="client-version">
|
||||
<tippy
|
||||
@@ -30,18 +30,19 @@
|
||||
title="socket.io-client version"
|
||||
class="
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
rounded-l
|
||||
cursor-pointer
|
||||
flex
|
||||
font-semibold
|
||||
border-divider
|
||||
text-secondaryDark
|
||||
py-2
|
||||
px-4
|
||||
w-26
|
||||
hover:border-dividerDark
|
||||
focus-visible:bg-transparent
|
||||
focus-visible:border-dividerDark
|
||||
flex
|
||||
px-4
|
||||
py-2
|
||||
font-semibold
|
||||
border
|
||||
rounded-l
|
||||
cursor-pointer
|
||||
"
|
||||
:value="`Client ${clientVersion}`"
|
||||
readonly
|
||||
@@ -65,16 +66,18 @@
|
||||
spellcheck="false"
|
||||
:class="{ error: !urlValid }"
|
||||
class="
|
||||
flex
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
flex flex-1
|
||||
border-divider
|
||||
text-secondaryDark
|
||||
w-full
|
||||
py-2
|
||||
px-4
|
||||
hover:border-dividerDark
|
||||
focus-visible:bg-transparent
|
||||
focus-visible:border-dividerDark
|
||||
flex-1
|
||||
w-full
|
||||
px-4
|
||||
py-2
|
||||
border
|
||||
"
|
||||
:placeholder="$t('socketio.url')"
|
||||
:disabled="connectionState"
|
||||
@@ -84,17 +87,19 @@
|
||||
id="socketio-path"
|
||||
v-model="path"
|
||||
class="
|
||||
flex
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
rounded-r
|
||||
flex flex-1
|
||||
border-divider
|
||||
text-secondaryDark
|
||||
w-full
|
||||
py-2
|
||||
px-4
|
||||
hover:border-dividerDark
|
||||
focus-visible:bg-transparent
|
||||
focus-visible:border-dividerDark
|
||||
flex-1
|
||||
w-full
|
||||
px-4
|
||||
py-2
|
||||
border
|
||||
rounded-r
|
||||
"
|
||||
spellcheck="false"
|
||||
:disabled="connectionState"
|
||||
@@ -132,7 +137,7 @@
|
||||
class="hide-scrollbar !overflow-auto"
|
||||
>
|
||||
<AppSection label="messages">
|
||||
<div class="flex flex-col flex-1 p-4 inline-flex">
|
||||
<div class="flex inline-flex flex-col flex-1 p-4">
|
||||
<label for="events" class="font-semibold text-secondaryLight">
|
||||
{{ $t("socketio.events") }}
|
||||
</label>
|
||||
@@ -149,7 +154,7 @@
|
||||
:disabled="!connectionState"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-1 p-4 items-center justify-between">
|
||||
<div class="flex items-center justify-between flex-1 p-4">
|
||||
<label class="font-semibold text-secondaryLight">
|
||||
{{ $t("socketio.communication") }}
|
||||
</label>
|
||||
@@ -163,7 +168,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-2 px-4 pb-4">
|
||||
<div class="flex flex-col px-4 pb-4 space-y-2">
|
||||
<div
|
||||
v-for="(input, index) of communication.inputs"
|
||||
:key="`input-${index}`"
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="space-x-2 flex-1 inline-flex">
|
||||
<div class="sticky top-0 z-10 flex p-4 bg-primary">
|
||||
<div class="inline-flex flex-1 space-x-2">
|
||||
<div class="flex flex-1">
|
||||
<input
|
||||
id="server"
|
||||
@@ -11,16 +11,18 @@
|
||||
autocomplete="off"
|
||||
:class="{ error: !serverValid }"
|
||||
class="
|
||||
flex
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
rounded-l
|
||||
flex flex-1
|
||||
border-divider
|
||||
text-secondaryDark
|
||||
w-full
|
||||
py-2
|
||||
px-4
|
||||
hover:border-dividerDark
|
||||
focus-visible:bg-transparent focus-visible:border-dividerDark
|
||||
flex-1
|
||||
w-full
|
||||
px-4
|
||||
py-2
|
||||
border
|
||||
rounded-l
|
||||
"
|
||||
:placeholder="$t('sse.url')"
|
||||
:disabled="connectionSSEState"
|
||||
@@ -29,13 +31,15 @@
|
||||
<label
|
||||
for="event-type"
|
||||
class="
|
||||
border-t
|
||||
bg-primaryLight
|
||||
border-t border-b border-divider
|
||||
font-semibold
|
||||
border-divider
|
||||
text-secondaryLight
|
||||
py-2
|
||||
px-4
|
||||
py-2
|
||||
font-semibold
|
||||
truncate
|
||||
border-b
|
||||
"
|
||||
>
|
||||
{{ $t("sse.event_type") }}
|
||||
@@ -44,16 +48,18 @@
|
||||
id="event-type"
|
||||
v-model="eventType"
|
||||
class="
|
||||
flex
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
rounded-r
|
||||
flex flex-1
|
||||
border-divider
|
||||
text-secondaryDark
|
||||
w-full
|
||||
py-2
|
||||
px-4
|
||||
hover:border-dividerDark
|
||||
focus-visible:bg-transparent focus-visible:border-dividerDark
|
||||
flex-1
|
||||
w-full
|
||||
px-4
|
||||
py-2
|
||||
border
|
||||
rounded-r
|
||||
"
|
||||
spellcheck="false"
|
||||
:disabled="connectionSSEState"
|
||||
|
||||
@@ -11,22 +11,23 @@
|
||||
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="request">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="space-x-2 flex-1 inline-flex">
|
||||
<div class="sticky top-0 z-10 flex p-4 bg-primary">
|
||||
<div class="inline-flex flex-1 space-x-2">
|
||||
<input
|
||||
id="websocket-url"
|
||||
v-model="url"
|
||||
class="
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
rounded
|
||||
border-divider
|
||||
text-secondaryDark
|
||||
w-full
|
||||
py-2
|
||||
px-4
|
||||
hover:border-dividerDark
|
||||
focus-visible:bg-transparent
|
||||
focus-visible:border-dividerDark
|
||||
w-full
|
||||
px-4
|
||||
py-2
|
||||
border
|
||||
rounded
|
||||
"
|
||||
type="url"
|
||||
autocomplete="off"
|
||||
@@ -54,14 +55,16 @@
|
||||
<div
|
||||
class="
|
||||
bg-primary
|
||||
border-b border-dividerLight
|
||||
flex flex-1
|
||||
border-dividerLight
|
||||
top-upperPrimaryStickyFold
|
||||
pl-4
|
||||
z-10
|
||||
sticky
|
||||
z-10
|
||||
flex
|
||||
items-center
|
||||
justify-between
|
||||
flex-1
|
||||
pl-4
|
||||
border-b
|
||||
"
|
||||
>
|
||||
<label class="font-semibold text-secondaryLight">
|
||||
@@ -86,14 +89,16 @@
|
||||
v-for="(protocol, index) of protocols"
|
||||
:key="`protocol-${index}`"
|
||||
class="
|
||||
divide-x divide-dividerLight
|
||||
border-b border-dividerLight
|
||||
divide-dividerLight
|
||||
border-dividerLight
|
||||
flex
|
||||
border-b
|
||||
divide-x
|
||||
"
|
||||
>
|
||||
<input
|
||||
v-model="protocol.value"
|
||||
class="bg-transparent flex flex-1 py-2 px-4"
|
||||
class="flex flex-1 px-4 py-2 bg-transparent"
|
||||
:placeholder="$t('count.protocol', { count: index + 1 })"
|
||||
name="message"
|
||||
type="text"
|
||||
@@ -137,27 +142,29 @@
|
||||
<div
|
||||
v-if="protocols.length === 0"
|
||||
class="
|
||||
flex flex-col
|
||||
flex
|
||||
text-secondaryLight
|
||||
p-4
|
||||
flex-col
|
||||
items-center
|
||||
justify-center
|
||||
p-4
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="`/images/states/${$colorMode.value}/add_category.svg`"
|
||||
loading="lazy"
|
||||
class="
|
||||
flex-col
|
||||
my-4
|
||||
object-contain object-center
|
||||
h-16
|
||||
w-16
|
||||
object-contain
|
||||
inline-flex
|
||||
flex-col
|
||||
object-center
|
||||
w-16
|
||||
h-16
|
||||
my-4
|
||||
"
|
||||
:alt="$t('empty.protocols')"
|
||||
/>
|
||||
<span class="text-center mb-4">
|
||||
<span class="mb-4 text-center">
|
||||
{{ $t("empty.protocols") }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -180,7 +187,7 @@
|
||||
class="hide-scrollbar !overflow-auto"
|
||||
>
|
||||
<AppSection label="messages">
|
||||
<div class="flex flex-col flex-1 p-4 inline-flex">
|
||||
<div class="flex inline-flex flex-col flex-1 p-4">
|
||||
<label
|
||||
for="websocket-message"
|
||||
class="font-semibold text-secondaryLight"
|
||||
@@ -188,7 +195,7 @@
|
||||
{{ $t("websocket.communication") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex space-x-2 px-4">
|
||||
<div class="flex px-4 space-x-2">
|
||||
<input
|
||||
id="websocket-message"
|
||||
v-model="communication.input"
|
||||
|
||||
Reference in New Issue
Block a user