Merge remote-tracking branch 'central/main'
This commit is contained in:
@@ -54,7 +54,7 @@
|
||||
"io-ts": "^2.2.16",
|
||||
"jest": "^27.5.1",
|
||||
"lodash": "^4.17.21",
|
||||
"prettier": "^2.6.2",
|
||||
"prettier": "^2.8.4",
|
||||
"qs": "^6.10.3",
|
||||
"ts-jest": "^27.1.4",
|
||||
"tsup": "^5.12.7",
|
||||
|
||||
@@ -34,7 +34,7 @@ input::placeholder,
|
||||
textarea::placeholder,
|
||||
.cm-placeholder {
|
||||
@apply text-secondary;
|
||||
@apply opacity-35;
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
input,
|
||||
@@ -416,7 +416,6 @@ pre.ace_editor {
|
||||
|
||||
.smart-splitter .splitpanes__splitter {
|
||||
@apply relative;
|
||||
@apply bg-primaryLight;
|
||||
@apply before:absolute;
|
||||
@apply before:inset-0;
|
||||
@apply before:bg-accentLight;
|
||||
@@ -424,48 +423,39 @@ pre.ace_editor {
|
||||
@apply before:z-20;
|
||||
@apply before:transition;
|
||||
@apply before:content-DEFAULT;
|
||||
@apply after:absolute;
|
||||
@apply after:inset-0;
|
||||
@apply after:z-20;
|
||||
@apply after:transition;
|
||||
@apply after:flex;
|
||||
@apply after:items-center;
|
||||
@apply after:justify-center;
|
||||
@apply after:text-dividerDark;
|
||||
@apply after:font-icon;
|
||||
@apply hover:before:opacity-100;
|
||||
@apply hover:after:text-accentDark;
|
||||
}
|
||||
|
||||
.no-splitter .splitpanes__splitter {
|
||||
@apply relative;
|
||||
@apply bg-primaryLight;
|
||||
}
|
||||
|
||||
.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
|
||||
@apply w-1;
|
||||
@apply w-0;
|
||||
@apply before:-left-0.5;
|
||||
@apply before:-right-0.5;
|
||||
@apply before:h-full;
|
||||
@apply after:content-["\e5d4"];
|
||||
@apply bg-divider;
|
||||
}
|
||||
|
||||
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
|
||||
@apply h-1;
|
||||
@apply h-0;
|
||||
@apply before:-top-0.5;
|
||||
@apply before:-bottom-0.5;
|
||||
@apply before:w-full;
|
||||
@apply after:content-["\e5d3"];
|
||||
@apply bg-divider;
|
||||
}
|
||||
|
||||
.no-splitter.splitpanes--vertical > .splitpanes__splitter {
|
||||
@apply w-0.5;
|
||||
@apply w-0;
|
||||
@apply pointer-events-none;
|
||||
@apply bg-dividerLight;
|
||||
}
|
||||
|
||||
.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
|
||||
@apply h-0.5;
|
||||
@apply h-0;
|
||||
@apply pointer-events-none;
|
||||
@apply bg-dividerLight;
|
||||
}
|
||||
|
||||
.cm-focused {
|
||||
|
||||
@@ -6,16 +6,19 @@
|
||||
}
|
||||
|
||||
@mixin dark-theme {
|
||||
--primary-color: theme("colors.neutral.900");
|
||||
--primary-color: theme("colors.dark.800");
|
||||
--primary-light-color: theme("colors.dark.600");
|
||||
--primary-dark-color: theme("colors.neutral.800");
|
||||
--primary-contrast-color: #161616;
|
||||
--primary-contrast-color: theme("colors.neutral.900");
|
||||
|
||||
--secondary-color: theme("colors.neutral.400");
|
||||
--secondary-light-color: theme("colors.neutral.500");
|
||||
--secondary-dark-color: theme("colors.neutral.100");
|
||||
--secondary-dark-color: theme("colors.neutral.50");
|
||||
|
||||
--divider-color: theme("colors.neutral.800");
|
||||
--divider-light-color: theme("colors.dark.500");
|
||||
--divider-dark-color: theme("colors.dark.300");
|
||||
|
||||
--error-color: theme("colors.stone.800");
|
||||
--tooltip-color: theme("colors.neutral.100");
|
||||
--popover-color: theme("colors.dark.700");
|
||||
@@ -24,15 +27,18 @@
|
||||
|
||||
@mixin light-theme {
|
||||
--primary-color: theme("colors.white");
|
||||
--primary-light-color: theme("colors.neutral.50");
|
||||
--primary-dark-color: theme("colors.neutral.100");
|
||||
--primary-contrast-color: #fefefe;
|
||||
--secondary-color: theme("colors.neutral.500");
|
||||
--secondary-light-color: theme("colors.neutral.400");
|
||||
--secondary-dark-color: theme("colors.neutral.900");
|
||||
--primary-light-color: theme("colors.gray.50");
|
||||
--primary-dark-color: theme("colors.gray.100");
|
||||
--primary-contrast-color: theme("colors.light.50");
|
||||
|
||||
--secondary-color: theme("colors.gray.500");
|
||||
--secondary-light-color: theme("colors.gray.400");
|
||||
--secondary-dark-color: theme("colors.gray.900");
|
||||
|
||||
--divider-color: theme("colors.gray.100");
|
||||
--divider-light-color: theme("colors.neutral.100");
|
||||
--divider-dark-color: theme("colors.neutral.300");
|
||||
--divider-light-color: theme("colors.gray.100");
|
||||
--divider-dark-color: theme("colors.gray.300");
|
||||
|
||||
--error-color: theme("colors.yellow.100");
|
||||
--tooltip-color: theme("colors.neutral.800");
|
||||
--popover-color: theme("colors.white");
|
||||
@@ -43,16 +49,19 @@
|
||||
--primary-color: theme("colors.dark.900");
|
||||
--primary-light-color: theme("colors.neutral.900");
|
||||
--primary-dark-color: theme("colors.dark.800");
|
||||
--primary-contrast-color: #0e0e0e;
|
||||
--primary-contrast-color: theme("colors.dark.900");
|
||||
|
||||
--secondary-color: theme("colors.neutral.400");
|
||||
--secondary-light-color: theme("colors.neutral.500");
|
||||
--secondary-dark-color: theme("colors.neutral.100");
|
||||
--divider-color: theme("colors.neutral.800");
|
||||
|
||||
--divider-color: theme("colors.dark.600");
|
||||
--divider-light-color: theme("colors.dark.800");
|
||||
--divider-dark-color: theme("colors.dark.300");
|
||||
--divider-dark-color: theme("colors.dark.200");
|
||||
|
||||
--error-color: theme("colors.stone.900");
|
||||
--tooltip-color: theme("colors.neutral.100");
|
||||
--popover-color: theme("colors.dark.600");
|
||||
--popover-color: theme("colors.dark.900");
|
||||
--editor-theme: "twilight";
|
||||
}
|
||||
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
"@vue/runtime-core": "^3.2.39",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.24.0",
|
||||
"eslint-plugin-prettier": "^4.2.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-vue": "^9.5.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"openapi-types": "^12.0.0",
|
||||
|
||||
@@ -69,7 +69,7 @@ const interceptors = computed(() => [
|
||||
},
|
||||
])
|
||||
|
||||
type InterceptorMode = typeof interceptors["value"][number]["value"]
|
||||
type InterceptorMode = (typeof interceptors)["value"][number]["value"]
|
||||
|
||||
const interceptorSelection = computed<InterceptorMode>({
|
||||
get() {
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
</div>
|
||||
<div v-if="showChildren || isFiltered" class="flex">
|
||||
<div
|
||||
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
|
||||
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
|
||||
@click="toggleShowChildren()"
|
||||
></div>
|
||||
<div class="flex flex-col flex-1 truncate">
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
</div>
|
||||
<div v-if="showChildren || isFiltered" class="flex">
|
||||
<div
|
||||
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
|
||||
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
|
||||
@click="toggleShowChildren()"
|
||||
></div>
|
||||
<div class="flex flex-col flex-1 truncate">
|
||||
|
||||
@@ -284,7 +284,7 @@ const filters = computed(() => [
|
||||
{ value: "STARRED" as const, label: t("filter.starred") },
|
||||
])
|
||||
|
||||
type FilterMode = typeof filters["value"][number]["value"]
|
||||
type FilterMode = (typeof filters)["value"][number]["value"]
|
||||
|
||||
const filterSelection = ref<FilterMode>("ALL")
|
||||
|
||||
@@ -293,7 +293,7 @@ const groups = computed(() => [
|
||||
{ value: "URL" as const, label: t("group.url") },
|
||||
])
|
||||
|
||||
type GroupMode = typeof groups["value"][number]["value"]
|
||||
type GroupMode = (typeof groups)["value"][number]["value"]
|
||||
|
||||
const groupSelection = ref<GroupMode>("TIME")
|
||||
|
||||
|
||||
@@ -130,9 +130,7 @@
|
||||
</template>
|
||||
</tippy>
|
||||
</span>
|
||||
<span
|
||||
class="flex ml-2 transition border rounded border-dividerLight hover:border-dividerDark"
|
||||
>
|
||||
<span class="flex ml-2 transition border rounded border-divider">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
|
||||
:title="`${t(
|
||||
|
||||
@@ -3,40 +3,32 @@
|
||||
<HttpResponseMeta :response="response" />
|
||||
<LensesResponseBodyRenderer
|
||||
v-if="!loading && hasResponse"
|
||||
v-model:selected-tab-preference="selectedTabPreference"
|
||||
:response="response"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, watch } from "vue"
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue"
|
||||
import { startPageProgress, completePageProgress } from "@modules/loadingbar"
|
||||
import { useReadonlyStream } from "@composables/stream"
|
||||
import { restResponse$ } from "~/newstore/RESTSession"
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const response = useReadonlyStream(restResponse$, null)
|
||||
const selectedTabPreference = ref<string | null>(null)
|
||||
|
||||
const hasResponse = computed(
|
||||
() =>
|
||||
response.value?.type === "success" || response.value?.type === "fail"
|
||||
)
|
||||
const response = useReadonlyStream(restResponse$, null)
|
||||
|
||||
const loading = computed(
|
||||
() => response.value === null || response.value.type === "loading"
|
||||
)
|
||||
const hasResponse = computed(
|
||||
() => response.value?.type === "success" || response.value?.type === "fail"
|
||||
)
|
||||
|
||||
watch(response, () => {
|
||||
if (response.value?.type === "loading") startPageProgress()
|
||||
else completePageProgress()
|
||||
})
|
||||
const loading = computed(
|
||||
() => response.value === null || response.value.type === "loading"
|
||||
)
|
||||
|
||||
return {
|
||||
hasResponse,
|
||||
response,
|
||||
loading,
|
||||
}
|
||||
},
|
||||
watch(response, () => {
|
||||
if (response.value?.type === "loading") startPageProgress()
|
||||
else completePageProgress()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -107,7 +107,7 @@ const t = useI18n()
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const props = defineProps<{
|
||||
response: HoppRESTResponse
|
||||
response: HoppRESTResponse | null
|
||||
}>()
|
||||
|
||||
/**
|
||||
@@ -118,6 +118,7 @@ const props = defineProps<{
|
||||
*/
|
||||
const readableResponseSize = computed(() => {
|
||||
if (
|
||||
props.response === null ||
|
||||
props.response.type === "loading" ||
|
||||
props.response.type === "network_fail" ||
|
||||
props.response.type === "script_fail" ||
|
||||
@@ -135,6 +136,7 @@ const readableResponseSize = computed(() => {
|
||||
|
||||
const statusCategory = computed(() => {
|
||||
if (
|
||||
props.response === null ||
|
||||
props.response.type === "loading" ||
|
||||
props.response.type === "network_fail" ||
|
||||
props.response.type === "script_fail" ||
|
||||
|
||||
@@ -27,18 +27,18 @@
|
||||
<script setup lang="ts">
|
||||
import IconCopy from "~icons/lucide/copy"
|
||||
import IconCheck from "~icons/lucide/check"
|
||||
import { HoppRESTHeader } from "@hoppscotch/data"
|
||||
import { refAutoReset } from "@vueuse/core"
|
||||
import { copyToClipboard } from "~/helpers/utils/clipboard"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import { useToast } from "@composables/toast"
|
||||
import type { HoppRESTResponseHeader } from "~/helpers/types/HoppRESTResponse"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const props = defineProps<{
|
||||
headers: Array<HoppRESTHeader>
|
||||
headers: HoppRESTResponseHeader[]
|
||||
}>()
|
||||
|
||||
const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
import IconCopy from "~icons/lucide/copy"
|
||||
import IconCheck from "~icons/lucide/check"
|
||||
import { refAutoReset } from "@vueuse/core"
|
||||
import type { HoppRESTHeader } from "@hoppscotch/data"
|
||||
import type { HoppRESTResponseHeader } from "~/helpers/types/HoppRESTResponse"
|
||||
import { copyToClipboard } from "~/helpers/utils/clipboard"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import { useToast } from "@composables/toast"
|
||||
@@ -40,7 +40,7 @@ const t = useI18n()
|
||||
const toast = useToast()
|
||||
|
||||
defineProps<{
|
||||
header: HoppRESTHeader
|
||||
header: HoppRESTResponseHeader
|
||||
}>()
|
||||
|
||||
const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
|
||||
|
||||
@@ -11,16 +11,16 @@
|
||||
:label="t(lens.lensName)"
|
||||
class="flex flex-col flex-1 w-full h-full"
|
||||
>
|
||||
<component :is="lens.renderer" :response="response" />
|
||||
<component :is="lensRendererFor(lens.renderer)" :response="response" />
|
||||
</SmartTab>
|
||||
<SmartTab
|
||||
v-if="headerLength"
|
||||
v-if="maybeHeaders"
|
||||
id="headers"
|
||||
:label="t('response.headers')"
|
||||
:info="`${headerLength}`"
|
||||
:info="`${maybeHeaders.length}`"
|
||||
class="flex flex-col flex-1"
|
||||
>
|
||||
<LensesHeadersRenderer :headers="response.headers" />
|
||||
<LensesHeadersRenderer :headers="maybeHeaders" />
|
||||
</SmartTab>
|
||||
<SmartTab
|
||||
id="results"
|
||||
@@ -42,54 +42,77 @@
|
||||
</SmartTabs>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue"
|
||||
import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from "vue"
|
||||
import {
|
||||
getSuitableLenses,
|
||||
getLensRenderers,
|
||||
Lens,
|
||||
} from "~/helpers/lenses/lenses"
|
||||
import { useReadonlyStream } from "@composables/stream"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
|
||||
import { restTestResults$ } from "~/newstore/RESTSession"
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
// Lens Renderers
|
||||
...getLensRenderers(),
|
||||
},
|
||||
props: {
|
||||
response: { type: Object, default: () => ({}) },
|
||||
},
|
||||
setup() {
|
||||
const testResults = useReadonlyStream(restTestResults$, null)
|
||||
const props = defineProps<{
|
||||
response: HoppRESTResponse | null
|
||||
selectedTabPreference: string | null
|
||||
}>()
|
||||
|
||||
return {
|
||||
testResults,
|
||||
t: useI18n(),
|
||||
const emit = defineEmits<{
|
||||
(e: "update:selectedTabPreference", newTab: string): void
|
||||
}>()
|
||||
|
||||
const allLensRenderers = getLensRenderers()
|
||||
|
||||
function lensRendererFor(name: string) {
|
||||
return allLensRenderers[name]
|
||||
}
|
||||
|
||||
const testResults = useReadonlyStream(restTestResults$, null)
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
const selectedLensTab = ref("")
|
||||
|
||||
const maybeHeaders = computed(() => {
|
||||
if (
|
||||
!props.response ||
|
||||
!(props.response.type === "success" || props.response.type === "fail")
|
||||
)
|
||||
return null
|
||||
return props.response.headers
|
||||
})
|
||||
|
||||
const validLenses = computed(() => {
|
||||
if (!props.response) return []
|
||||
return getSuitableLenses(props.response)
|
||||
})
|
||||
|
||||
watch(
|
||||
validLenses,
|
||||
(newLenses: Lens[]) => {
|
||||
if (newLenses.length === 0) return
|
||||
|
||||
const validRenderers = [
|
||||
...newLenses.map((x) => x.renderer),
|
||||
"headers",
|
||||
"results",
|
||||
]
|
||||
|
||||
if (
|
||||
props.selectedTabPreference &&
|
||||
validRenderers.includes(props.selectedTabPreference)
|
||||
) {
|
||||
selectedLensTab.value = props.selectedTabPreference
|
||||
} else {
|
||||
selectedLensTab.value = newLenses[0].renderer
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedLensTab: "",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
headerLength() {
|
||||
if (!this.response || !this.response.headers) return 0
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
return Object.keys(this.response.headers).length
|
||||
},
|
||||
validLenses() {
|
||||
if (!this.response) return []
|
||||
|
||||
return getSuitableLenses(this.response)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
validLenses: {
|
||||
handler(newValue) {
|
||||
if (newValue.length === 0) return
|
||||
this.selectedLensTab = newValue[0].renderer
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
watch(selectedLensTab, (newLensID) => {
|
||||
emit("update:selectedTabPreference", newLensID)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -112,7 +112,7 @@ const emit = defineEmits<{
|
||||
(e: "submit", body: MQTTTopic): void
|
||||
}>()
|
||||
|
||||
const QoS = ref<typeof QOS_VALUES[number]>(2)
|
||||
const QoS = ref<(typeof QOS_VALUES)[number]>(2)
|
||||
const name = ref("")
|
||||
const color = ref("#f58290")
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
-->
|
||||
<div v-if="childrenRendered" v-show="showChildren" class="flex">
|
||||
<div
|
||||
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
|
||||
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
|
||||
@click="toggleNodeChildren"
|
||||
></div>
|
||||
<div
|
||||
|
||||
@@ -185,7 +185,7 @@ export const CodegenDefinitions = [
|
||||
/**
|
||||
* A type which defines all the valid code generators
|
||||
*/
|
||||
export type CodegenName = typeof CodegenDefinitions[number]["name"]
|
||||
export type CodegenName = (typeof CodegenDefinitions)[number]["name"]
|
||||
|
||||
/**
|
||||
* Generates Source Code for the given codgen
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { HoppRESTRequest } from "@hoppscotch/data"
|
||||
|
||||
export type HoppRESTResponseHeader = { key: string; value: string }
|
||||
|
||||
export type HoppRESTResponse =
|
||||
| { type: "loading"; req: HoppRESTRequest }
|
||||
| {
|
||||
type: "fail"
|
||||
headers: { key: string; value: string }[]
|
||||
headers: HoppRESTResponseHeader[]
|
||||
body: ArrayBuffer
|
||||
statusCode: number
|
||||
|
||||
@@ -27,7 +29,7 @@ export type HoppRESTResponse =
|
||||
}
|
||||
| {
|
||||
type: "success"
|
||||
headers: { key: string; value: string }[]
|
||||
headers: HoppRESTResponseHeader[]
|
||||
body: ArrayBuffer
|
||||
statusCode: number
|
||||
meta: {
|
||||
|
||||
@@ -7,7 +7,7 @@ import type { KeysMatching } from "~/types/ts-utils"
|
||||
|
||||
export const HoppBgColors = ["system", "light", "dark", "black"] as const
|
||||
|
||||
export type HoppBgColor = typeof HoppBgColors[number]
|
||||
export type HoppBgColor = (typeof HoppBgColors)[number]
|
||||
|
||||
export const HoppAccentColors = [
|
||||
"green",
|
||||
@@ -21,11 +21,11 @@ export const HoppAccentColors = [
|
||||
"pink",
|
||||
] as const
|
||||
|
||||
export type HoppAccentColor = typeof HoppAccentColors[number]
|
||||
export type HoppAccentColor = (typeof HoppAccentColors)[number]
|
||||
|
||||
export const HoppFontSizes = ["small", "medium", "large"] as const
|
||||
|
||||
export type HoppFontSize = typeof HoppFontSizes[number]
|
||||
export type HoppFontSize = (typeof HoppFontSizes)[number]
|
||||
|
||||
export type SettingsType = {
|
||||
syncCollections: boolean
|
||||
|
||||
@@ -44,7 +44,7 @@ const REALTIME_NAVIGATION = [
|
||||
},
|
||||
] as const
|
||||
|
||||
type RealtimeNavTab = typeof REALTIME_NAVIGATION[number]["target"]
|
||||
type RealtimeNavTab = (typeof REALTIME_NAVIGATION)[number]["target"]
|
||||
|
||||
const currentTab = ref<RealtimeNavTab>("websocket")
|
||||
|
||||
|
||||
@@ -55,11 +55,11 @@
|
||||
"@typescript-eslint/eslint-plugin": "^5.19.0",
|
||||
"@typescript-eslint/parser": "^5.19.0",
|
||||
"eslint": "^8.13.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"io-ts": "^2.2.16",
|
||||
"jest": "^27.5.1",
|
||||
"prettier": "^2.6.2",
|
||||
"prettier": "^2.8.4",
|
||||
"ts-jest": "^27.1.4",
|
||||
"typescript": "^4.6.3"
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
"@vue/runtime-core": "^3.2.39",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.24.0",
|
||||
"eslint-plugin-prettier": "^4.2.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-vue": "^9.5.1",
|
||||
"histoire": "^0.12.4",
|
||||
"npm-run-all": "^4.1.5",
|
||||
|
||||
@@ -34,7 +34,7 @@ input::placeholder,
|
||||
textarea::placeholder,
|
||||
.cm-placeholder {
|
||||
@apply text-secondary;
|
||||
@apply opacity-35;
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
input,
|
||||
@@ -135,7 +135,7 @@ a {
|
||||
@apply shadow-none;
|
||||
@apply fixed;
|
||||
@apply inline-flex;
|
||||
@apply -mt-6;
|
||||
@apply -mt-8;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -416,7 +416,6 @@ pre.ace_editor {
|
||||
|
||||
.smart-splitter .splitpanes__splitter {
|
||||
@apply relative;
|
||||
@apply bg-primaryLight;
|
||||
@apply before:absolute;
|
||||
@apply before:inset-0;
|
||||
@apply before:bg-accentLight;
|
||||
@@ -424,48 +423,39 @@ pre.ace_editor {
|
||||
@apply before:z-20;
|
||||
@apply before:transition;
|
||||
@apply before:content-DEFAULT;
|
||||
@apply after:absolute;
|
||||
@apply after:inset-0;
|
||||
@apply after:z-20;
|
||||
@apply after:transition;
|
||||
@apply after:flex;
|
||||
@apply after:items-center;
|
||||
@apply after:justify-center;
|
||||
@apply after:text-dividerDark;
|
||||
@apply after:font-icon;
|
||||
@apply hover:before:opacity-100;
|
||||
@apply hover:after:text-accentDark;
|
||||
}
|
||||
|
||||
.no-splitter .splitpanes__splitter {
|
||||
@apply relative;
|
||||
@apply bg-primaryLight;
|
||||
}
|
||||
|
||||
.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
|
||||
@apply w-1;
|
||||
@apply w-0;
|
||||
@apply before:-left-0.5;
|
||||
@apply before:-right-0.5;
|
||||
@apply before:h-full;
|
||||
@apply after:content-["\e5d4"];
|
||||
@apply bg-divider;
|
||||
}
|
||||
|
||||
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
|
||||
@apply h-1;
|
||||
@apply h-0;
|
||||
@apply before:-top-0.5;
|
||||
@apply before:-bottom-0.5;
|
||||
@apply before:w-full;
|
||||
@apply after:content-["\e5d3"];
|
||||
@apply bg-divider;
|
||||
}
|
||||
|
||||
.no-splitter.splitpanes--vertical > .splitpanes__splitter {
|
||||
@apply w-0.5;
|
||||
@apply w-0;
|
||||
@apply pointer-events-none;
|
||||
@apply bg-dividerLight;
|
||||
}
|
||||
|
||||
.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
|
||||
@apply h-0.5;
|
||||
@apply h-0;
|
||||
@apply pointer-events-none;
|
||||
@apply bg-dividerLight;
|
||||
}
|
||||
|
||||
.cm-focused {
|
||||
@@ -538,8 +528,16 @@ details[open] summary .indicator {
|
||||
}
|
||||
|
||||
.env-highlight {
|
||||
* {
|
||||
@apply text-accentContrast;
|
||||
@apply text-accentContrast;
|
||||
|
||||
&.env-found {
|
||||
@apply bg-accentDark;
|
||||
@apply hover:bg-accent;
|
||||
}
|
||||
|
||||
&.env-not-found {
|
||||
@apply bg-red-500;
|
||||
@apply hover:bg-red-600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,16 +6,19 @@
|
||||
}
|
||||
|
||||
@mixin dark-theme {
|
||||
--primary-color: theme("colors.neutral.900");
|
||||
--primary-color: theme("colors.dark.800");
|
||||
--primary-light-color: theme("colors.dark.600");
|
||||
--primary-dark-color: theme("colors.neutral.800");
|
||||
--primary-contrast-color: #161616;
|
||||
--primary-contrast-color: theme("colors.neutral.900");
|
||||
|
||||
--secondary-color: theme("colors.neutral.400");
|
||||
--secondary-light-color: theme("colors.neutral.500");
|
||||
--secondary-dark-color: theme("colors.neutral.100");
|
||||
--secondary-dark-color: theme("colors.neutral.50");
|
||||
|
||||
--divider-color: theme("colors.neutral.800");
|
||||
--divider-light-color: theme("colors.dark.500");
|
||||
--divider-dark-color: theme("colors.dark.300");
|
||||
|
||||
--error-color: theme("colors.stone.800");
|
||||
--tooltip-color: theme("colors.neutral.100");
|
||||
--popover-color: theme("colors.dark.700");
|
||||
@@ -24,15 +27,18 @@
|
||||
|
||||
@mixin light-theme {
|
||||
--primary-color: theme("colors.white");
|
||||
--primary-light-color: theme("colors.neutral.50");
|
||||
--primary-dark-color: theme("colors.neutral.100");
|
||||
--primary-contrast-color: #fefefe;
|
||||
--secondary-color: theme("colors.neutral.500");
|
||||
--secondary-light-color: theme("colors.neutral.400");
|
||||
--secondary-dark-color: theme("colors.neutral.900");
|
||||
--primary-light-color: theme("colors.gray.50");
|
||||
--primary-dark-color: theme("colors.gray.100");
|
||||
--primary-contrast-color: theme("colors.light.50");
|
||||
|
||||
--secondary-color: theme("colors.gray.500");
|
||||
--secondary-light-color: theme("colors.gray.400");
|
||||
--secondary-dark-color: theme("colors.gray.900");
|
||||
|
||||
--divider-color: theme("colors.gray.100");
|
||||
--divider-light-color: theme("colors.neutral.100");
|
||||
--divider-dark-color: theme("colors.neutral.300");
|
||||
--divider-light-color: theme("colors.gray.100");
|
||||
--divider-dark-color: theme("colors.gray.300");
|
||||
|
||||
--error-color: theme("colors.yellow.100");
|
||||
--tooltip-color: theme("colors.neutral.800");
|
||||
--popover-color: theme("colors.white");
|
||||
@@ -43,16 +49,19 @@
|
||||
--primary-color: theme("colors.dark.900");
|
||||
--primary-light-color: theme("colors.neutral.900");
|
||||
--primary-dark-color: theme("colors.dark.800");
|
||||
--primary-contrast-color: #0e0e0e;
|
||||
--primary-contrast-color: theme("colors.dark.900");
|
||||
|
||||
--secondary-color: theme("colors.neutral.400");
|
||||
--secondary-light-color: theme("colors.neutral.500");
|
||||
--secondary-dark-color: theme("colors.neutral.100");
|
||||
--divider-color: theme("colors.neutral.800");
|
||||
|
||||
--divider-color: theme("colors.dark.600");
|
||||
--divider-light-color: theme("colors.dark.800");
|
||||
--divider-dark-color: theme("colors.dark.300");
|
||||
--divider-dark-color: theme("colors.dark.200");
|
||||
|
||||
--error-color: theme("colors.stone.900");
|
||||
--tooltip-color: theme("colors.neutral.100");
|
||||
--popover-color: theme("colors.dark.600");
|
||||
--popover-color: theme("colors.dark.900");
|
||||
--editor-theme: "twilight";
|
||||
}
|
||||
|
||||
@@ -305,7 +314,3 @@
|
||||
:root[data-font-size="large"] {
|
||||
@include font-large;
|
||||
}
|
||||
|
||||
.generic {
|
||||
@apply text-primary text-primaryLight bg-primary;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user