mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-23 16:26:15 -04:00
refactor(lint): linter auto fix
This commit is contained in:
Corentin Thomasset
parent
8e29a97404
commit
086d31eab5
54 changed files with 1122 additions and 1503 deletions
|
|
@ -3,45 +3,41 @@
|
|||
<template #suffix>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button
|
||||
quaternary
|
||||
circle
|
||||
@click="onCopyClicked"
|
||||
>
|
||||
<n-button quaternary circle @click="onCopyClicked">
|
||||
<n-icon :component="ContentCopyFilled" />
|
||||
</n-button>
|
||||
</template>
|
||||
{{ tooltipText }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</n-input>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel, useClipboard } from '@vueuse/core'
|
||||
import { ContentCopyFilled } from '@vicons/material'
|
||||
import { useVModel, useClipboard } from '@vueuse/core';
|
||||
import { ContentCopyFilled } from '@vicons/material';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const props = defineProps<{ value: string, }>()
|
||||
const emit = defineEmits(['update:value'])
|
||||
const props = defineProps<{ value: string }>();
|
||||
const emit = defineEmits(['update:value']);
|
||||
|
||||
const value = useVModel(props, 'value', emit)
|
||||
const tooltipText = ref('Copy to clipboard')
|
||||
const value = useVModel(props, 'value', emit);
|
||||
const tooltipText = ref('Copy to clipboard');
|
||||
|
||||
const {copy} = useClipboard({source: value})
|
||||
const { copy } = useClipboard({ source: value });
|
||||
|
||||
function onCopyClicked() {
|
||||
copy();
|
||||
tooltipText.value = 'Copied !'
|
||||
copy();
|
||||
tooltipText.value = 'Copied !';
|
||||
|
||||
setTimeout(() => {
|
||||
tooltipText.value = 'Copy to clipboard'
|
||||
}, 2000)
|
||||
setTimeout(() => {
|
||||
tooltipText.value = 'Copy to clipboard';
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep(.n-input-wrapper) {
|
||||
padding-right: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,7 @@
|
|||
</n-layout-sider>
|
||||
<n-layout class="content">
|
||||
<slot name="content" />
|
||||
<div
|
||||
v-show="isSmallScreen && !isMenuCollapsed"
|
||||
class="overlay"
|
||||
@click="isMenuCollapsed = true"
|
||||
/>
|
||||
<div v-show="isSmallScreen && !isMenuCollapsed" class="overlay" @click="isMenuCollapsed = true" />
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</template>
|
||||
|
|
@ -27,9 +23,9 @@
|
|||
import { useStyleStore } from '@/stores/style.store';
|
||||
import { toRefs, computed } from 'vue';
|
||||
|
||||
const styleStore = useStyleStore()
|
||||
const { isMenuCollapsed, isSmallScreen } = toRefs(styleStore)
|
||||
const siderPosition = computed(() => isSmallScreen.value ? 'absolute' : 'static')
|
||||
const styleStore = useStyleStore();
|
||||
const { isMenuCollapsed, isSmallScreen } = toRefs(styleStore);
|
||||
const siderPosition = computed(() => (isSmallScreen.value ? 'absolute' : 'static'));
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -44,7 +40,6 @@ const siderPosition = computed(() => isSmallScreen.value ? 'absolute' : 'static'
|
|||
}
|
||||
|
||||
.content {
|
||||
|
||||
// background-color: #f1f5f9;
|
||||
::v-deep(.n-layout-scroll-container) {
|
||||
padding: 26px;
|
||||
|
|
@ -54,4 +49,4 @@ const siderPosition = computed(() => isSmallScreen.value ? 'absolute' : 'static'
|
|||
.n-layout {
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,7 @@
|
|||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<n-icon
|
||||
size="25"
|
||||
:component="BrandGithub"
|
||||
/>
|
||||
<n-icon size="25" :component="BrandGithub" />
|
||||
</n-button>
|
||||
</template>
|
||||
Github repository
|
||||
|
|
@ -30,36 +27,17 @@
|
|||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<n-icon
|
||||
size="25"
|
||||
:component="BrandTwitter"
|
||||
/>
|
||||
<n-icon size="25" :component="BrandTwitter" />
|
||||
</n-button>
|
||||
</template>
|
||||
Creator twitter
|
||||
</n-tooltip>
|
||||
|
||||
|
||||
<router-link
|
||||
to="/about"
|
||||
#="{ navigate, href }"
|
||||
custom
|
||||
>
|
||||
<router-link to="/about" #="{ navigate, href }" custom>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button
|
||||
tag="a"
|
||||
:href="href"
|
||||
circle
|
||||
quaternary
|
||||
size="large"
|
||||
aria-label="Home"
|
||||
@click="navigate"
|
||||
>
|
||||
<n-icon
|
||||
size="25"
|
||||
:component="InfoCircle"
|
||||
/>
|
||||
<n-button tag="a" :href="href" circle quaternary size="large" aria-label="Home" @click="navigate">
|
||||
<n-icon size="25" :component="InfoCircle" />
|
||||
</n-button>
|
||||
</template>
|
||||
About
|
||||
|
|
@ -67,22 +45,9 @@
|
|||
</router-link>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button
|
||||
size="large"
|
||||
circle
|
||||
quaternary
|
||||
@click="isDarkTheme = !isDarkTheme"
|
||||
>
|
||||
<n-icon
|
||||
v-if="isDarkTheme"
|
||||
size="25"
|
||||
:component="Sun"
|
||||
/>
|
||||
<n-icon
|
||||
v-else
|
||||
size="25"
|
||||
:component="Moon"
|
||||
/>
|
||||
<n-button size="large" circle quaternary @click="isDarkTheme = !isDarkTheme">
|
||||
<n-icon v-if="isDarkTheme" size="25" :component="Sun" />
|
||||
<n-icon v-else size="25" :component="Moon" />
|
||||
</n-button>
|
||||
</template>
|
||||
<span v-if="isDarkTheme">Light mode</span>
|
||||
|
|
@ -93,16 +58,16 @@
|
|||
<script setup lang="ts">
|
||||
import { useStyleStore } from '@/stores/style.store';
|
||||
import { toRefs } from 'vue';
|
||||
import { BrandGithub, BrandTwitter, Moon, Sun, InfoCircle } from '@vicons/tabler'
|
||||
import { BrandGithub, BrandTwitter, Moon, Sun, InfoCircle } from '@vicons/tabler';
|
||||
|
||||
const styleStore = useStyleStore()
|
||||
const { isDarkTheme } = toRefs(styleStore)
|
||||
</script>
|
||||
const styleStore = useStyleStore();
|
||||
const { isDarkTheme } = toRefs(styleStore);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.n-button {
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,33 @@
|
|||
<script lang="ts" setup>
|
||||
import { SearchRound } from '@vicons/material'
|
||||
import { SearchRound } from '@vicons/material';
|
||||
import { computed, ref } from 'vue';
|
||||
import { deburr } from 'lodash'
|
||||
import { deburr } from 'lodash';
|
||||
import { tools } from '@/tools';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter()
|
||||
const queryString = ref('')
|
||||
const router = useRouter();
|
||||
const queryString = ref('');
|
||||
|
||||
const cleanString = (s: string) => deburr(s.trim().toLowerCase())
|
||||
const cleanString = (s: string) => deburr(s.trim().toLowerCase());
|
||||
|
||||
const searchableTools = tools.map(({ name, description, keywords, path }) => ({
|
||||
searchableText: [name, description, ...keywords].map(cleanString).join(' '),
|
||||
path,
|
||||
name
|
||||
}))
|
||||
searchableText: [name, description, ...keywords].map(cleanString).join(' '),
|
||||
path,
|
||||
name,
|
||||
}));
|
||||
|
||||
const options = computed(() => {
|
||||
const query = cleanString(queryString.value)
|
||||
const query = cleanString(queryString.value);
|
||||
|
||||
return searchableTools
|
||||
.filter(({ searchableText }) => searchableText.includes(query))
|
||||
.map(({ name, path }) => ({ label: name, value: path }))
|
||||
})
|
||||
return searchableTools
|
||||
.filter(({ searchableText }) => searchableText.includes(query))
|
||||
.map(({ name, path }) => ({ label: name, value: path }));
|
||||
});
|
||||
|
||||
function onSelect(path: string) {
|
||||
router.push(path)
|
||||
queryString.value = ''
|
||||
router.push(path);
|
||||
queryString.value = '';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -58,9 +57,8 @@ function onSelect(path: string) {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
// ::v-deep(.n-input__border) {
|
||||
// border: none;
|
||||
// }
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,12 @@
|
|||
<template>
|
||||
<router-link :to="tool.path">
|
||||
<n-card class="tool-card">
|
||||
<n-icon
|
||||
class="icon"
|
||||
size="40"
|
||||
:component="tool.icon"
|
||||
/>
|
||||
<n-icon class="icon" size="40" :component="tool.icon" />
|
||||
<n-h3 class="title">
|
||||
<n-ellipsis>{{ tool.name }}</n-ellipsis>
|
||||
</n-h3>
|
||||
<div class="description">
|
||||
<n-ellipsis
|
||||
:line-clamp="2"
|
||||
:tooltip="false"
|
||||
>
|
||||
<n-ellipsis :line-clamp="2" :tooltip="false">
|
||||
{{ tool.description }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
|
|
@ -25,32 +18,31 @@
|
|||
import type { ITool } from '@/tools/Tool';
|
||||
import { toRefs, defineProps } from 'vue';
|
||||
|
||||
const props = defineProps<{ tool: ITool & { category: string } }>()
|
||||
const { tool } = toRefs(props)
|
||||
|
||||
const props = defineProps<{ tool: ITool & { category: string } }>();
|
||||
const { tool } = toRefs(props);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
&:hover {
|
||||
border-color: var(--n-color-target);
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--n-color-target);
|
||||
}
|
||||
|
||||
.icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.title {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
opacity: 0.7;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.description {
|
||||
opacity: 0.7;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue