SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: run linter

Browse source
This commit is contained in:
Sebin Nyshkim 2023-04-03 00:55:28 +02:00
parent de3862bf77
commit 4853e1ec63
26 changed files with 502 additions and 631 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/AttackList.vue
View file

@ -13,7 +13,6 @@
width: 100%;
max-width: var(--attack-list-max-width);
margin: auto;
padding: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
}
</style>

6
src/components/ButtonGroup.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts">
interface Props {
col?: boolean;
grid?: boolean;
col?: boolean
grid?: boolean
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>

11
src/components/ColorTable.vue
View file

@ -1,11 +1,11 @@
<script setup lang="ts">
import type { ColorDict } from "@/interfaces";
import type { ColorDict } from '@/interfaces'
interface Props {
colors: ColorDict[];
colors: ColorDict[]
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>
@ -21,10 +21,7 @@ defineProps<Props>();
<tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
<td class="color-table__cell name">{{ color.name }}</td>
<td class="color-table__cell value">{{ color.value }}</td>
<td
class="color-table__cell color"
:style="{ 'background-color': color.value }"
></td>
<td class="color-table__cell color" :style="{ 'background-color': color.value }"></td>
</tr>
</tbody>
</table>

12
src/components/DataTable.vue
View file

@ -1,21 +1,17 @@
<script setup lang="ts">
interface Props {
headings: string[];
data: string[][];
headings: string[]
data: string[][]
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>
<table class="data-table">
<thead class="data-table__head">
<tr class="data-table__row">
<th
class="data-table__heading"
v-for="(heading, idx) in headings"
:key="idx"
>
<th class="data-table__heading" v-for="(heading, idx) in headings" :key="idx">
{{ heading }}
</th>
</tr>

6
src/components/QuickFacts.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts">
interface Props {
cols?: number;
cols?: number
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>
@ -32,7 +32,7 @@ defineProps<Props>();
&:before {
display: block;
content: "";
content: '';
position: absolute;
top: 1.375rem;
right: 1.375rem;

10
src/components/RefButton.vue
View file

@ -1,12 +1,12 @@
<script setup lang="ts">
interface Props {
positive?: boolean;
negative?: boolean;
href?: string;
download?: boolean | any;
positive?: boolean
negative?: boolean
href?: string
download?: boolean | any
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>

35
src/components/RefFigure.vue
View file

@ -1,32 +1,26 @@
<script setup lang="ts">
import { inject } from "vue";
import { nsfwKey, showModalKey } from "@/keys";
import RefToggle from "@/components/RefToggle.vue";
import { inject } from 'vue'
import { nsfwKey, showModalKey } from '@/keys'
import RefToggle from '@/components/RefToggle.vue'
interface Props {
polaroidBorder?: boolean;
dropshadow?: boolean;
nsfw?: boolean;
id: string;
polaroidBorder?: boolean
dropshadow?: boolean
nsfw?: boolean
id: string
}
const isNsfw = inject<boolean>(nsfwKey, false);
const showModal = inject<Function>(showModalKey, Function);
const isNsfw = inject<boolean>(nsfwKey, false)
const showModal = inject<Function>(showModalKey, Function)
defineProps<Props>();
defineProps<Props>()
</script>
<template>
<figure class="figure">
<div
class="figure__border"
:class="{ 'figure__border--polaroid': polaroidBorder }"
>
<div class="figure__border" :class="{ 'figure__border--polaroid': polaroidBorder }">
<template v-if="!nsfw || isNsfw">
<div
class="figure__image"
:class="{ 'figure__image--dropshadow': dropshadow }"
>
<div class="figure__image" :class="{ 'figure__image--dropshadow': dropshadow }">
<slot name="img"></slot>
</div>
</template>
@ -79,8 +73,7 @@ defineProps<Props>();
text-align: center;
margin: 1em auto;
padding: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
&__border {
display: flex;
@ -101,7 +94,7 @@ defineProps<Props>();
}
&__border--polaroid &__meta {
font-family: "Permanent Marker", fantasy;
font-family: 'Permanent Marker', fantasy;
color: var(--color-figure-polaroid-text);
max-width: 35rem;

72
src/components/RefGallery.vue
View file

@ -1,78 +1,68 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { debounce } from "@/helpers";
import { ref, onMounted } from 'vue'
import { debounce } from '@/helpers'
const activeImage = ref(0);
const images = ref<Element[]>([]);
const element = document.createElement("div");
const galleryViewport = ref<HTMLElement>(element);
const galleryItemWidth = ref<number>(1);
const activeImage = ref(0)
const images = ref<Element[]>([])
const element = document.createElement('div')
const galleryViewport = ref<HTMLElement>(element)
const galleryItemWidth = ref<number>(1)
const resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {
for (const entry of entries) {
galleryItemWidth.value = entry.contentRect.width;
galleryItemWidth.value = entry.contentRect.width
}
};
}
const resizeObserver = new ResizeObserver(
debounce(resizeObserverCallback, 1000)
);
const resizeObserver = new ResizeObserver(debounce(resizeObserverCallback, 1000))
const setActiveImage = (index: number): void => {
activeImage.value = index;
activeImage.value = index
galleryViewport.value.scrollTo({
left: galleryItemWidth.value * index,
behavior: "smooth",
});
};
behavior: 'smooth'
})
}
const getActiveImage = (gallery: HTMLElement, itemWidth: number): number => {
return gallery.scrollLeft / itemWidth;
};
return gallery.scrollLeft / itemWidth
}
const prev = (): void => {
if (activeImage.value > 0) {
galleryViewport.value.scrollBy({
left: galleryItemWidth.value * -1,
behavior: "smooth",
});
behavior: 'smooth'
})
}
};
}
const next = (): void => {
if (activeImage.value < images.value.length - 1) {
galleryViewport.value.scrollBy({
left: galleryItemWidth.value,
behavior: "smooth",
});
behavior: 'smooth'
})
}
};
}
const onScroll = (): void => {
const newImg = Math.floor(
getActiveImage(galleryViewport.value, galleryItemWidth.value)
);
setActiveImage(newImg);
};
const newImg = Math.floor(getActiveImage(galleryViewport.value, galleryItemWidth.value))
setActiveImage(newImg)
}
onMounted(() => {
resizeObserver.observe(galleryViewport.value);
images.value = Array.from(galleryViewport.value.children);
galleryItemWidth.value =
galleryViewport.value.scrollWidth / images.value.length;
galleryViewport.value.addEventListener("scroll", debounce(onScroll, 500));
});
resizeObserver.observe(galleryViewport.value)
images.value = Array.from(galleryViewport.value.children)
galleryItemWidth.value = galleryViewport.value.scrollWidth / images.value.length
galleryViewport.value.addEventListener('scroll', debounce(onScroll, 500))
})
</script>
<template>
<div class="gallery">
<div class="gallery__images">
<a
href="#"
class="gallery__prev"
@click.prevent="prev()"
v-show="activeImage > 0"
></a>
<a href="#" class="gallery__prev" @click.prevent="prev()" v-show="activeImage > 0"></a>
<a
href="#"
class="gallery__next"

26
src/components/RefModal.vue
View file

@ -1,27 +1,27 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref } from 'vue'
interface Props {
id: string;
id: string
}
defineProps<Props>();
defineProps<Props>()
const modal = ref<HTMLDialogElement>();
const modal = ref<HTMLDialogElement>()
const showModal = () => {
modal.value?.showModal();
document.body.inert = true;
document.body.classList.add("scroll-lock");
};
modal.value?.showModal()
document.body.inert = true
document.body.classList.add('scroll-lock')
}
const close = () => {
modal.value?.close();
document.body.inert = false;
document.body.classList.remove("scroll-lock");
};
modal.value?.close()
document.body.inert = false
document.body.classList.remove('scroll-lock')
}
defineExpose({ showModal, close });
defineExpose({ showModal, close })
</script>
<template>

27
src/components/RefToggle.vue
View file

@ -1,23 +1,23 @@
<script setup lang="ts">
import { computed } from "vue";
import { computed } from 'vue'
interface Props {
modelValue: boolean;
id: string;
name?: string;
modelValue: boolean
id: string
name?: string
}
const props = defineProps<Props>();
const emit = defineEmits(["update:modelValue"]);
const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const checked = computed({
get() {
return props.modelValue;
return props.modelValue
},
set(value) {
emit("update:modelValue", value);
},
});
emit('update:modelValue', value)
}
})
</script>
<template>
@ -37,9 +37,8 @@ const checked = computed({
<style lang="scss">
.toggle {
font-family: "apple color emoji", "noto color emoji", "segoe ui emoji",
"android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
"segoe ui symbol";
font-family: 'apple color emoji', 'noto color emoji', 'segoe ui emoji', 'android emoji',
'emojisymbols', 'emojione mozilla', 'twemoji mozilla', 'segoe ui symbol';
padding: 0.5em;
@ -84,7 +83,7 @@ const checked = computed({
&:before,
&:after {
content: "";
content: '';
position: absolute;
left: 0;
height: 1.1em;

12
src/components/SiteNavigation.vue
View file

@ -1,16 +1,12 @@
<script setup lang="ts">
import { RouterLink } from "vue-router";
import router from "@/router";
import { RouterLink } from 'vue-router'
import router from '@/router'
</script>
<template>
<nav class="nav">
<ul class="nav__list">
<li
class="nav__item"
v-for="(route, idx) in router.options.routes"
:key="idx"
>
<li class="nav__item" v-for="(route, idx) in router.options.routes" :key="idx">
<RouterLink class="nav__link" :to="route.path">
{{ route.name }}
</RouterLink>
@ -75,7 +71,7 @@ import router from "@/router";
&:before,
&:after {
content: "";
content: '';
position: absolute;
bottom: 0;

2
src/components/WelcomeHeader.vue
View file

@ -68,7 +68,7 @@
&__mainline,
&__subline {
font-family: "Exo", sans-serif;
font-family: 'Exo', sans-serif;
text-align: center;
font-style: italic;
margin: 0;