klemek/legume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(prettier): run tool

Browse Source
This commit is contained in:
klemek
2025-12-20 16:08:45 +01:00
parent 07b35aad8e
commit f324854d42
3 changed files with 87 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+47 -47
View File
@@ -1,70 +1,70 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import LucideIcon from "./components/LucideIcon.vue"; import LucideIcon from "./components/LucideIcon.vue";
import CustomButton from "./components/CustomButton.vue" import CustomButton from "./components/CustomButton.vue";
const visible = ref<boolean>(false); const visible = ref<boolean>(false);
onMounted(() => { onMounted(() => {
setTimeout(() => { setTimeout(() => {
visible.value = true; visible.value = true;
}); });
}); });
</script> </script>
<template> <template>
<main :style="{ display: visible ? 'inherit' : 'none' }"> <main :style="{ display: visible ? 'inherit' : 'none' }">
<!-- TODO: 1. rename app --> <!-- TODO: 1. rename app -->
<h1> <h1>
<LucideIcon name="package" /> <LucideIcon name="package" />
Vue-Boilerplate Vue-Boilerplate
</h1> </h1>
<br /> <br />
<p> <p>
Fill this page with <i>whatever</i> you're going to develop. Fill this page with <i>whatever</i> you're going to develop.
<br> <br />
<b>Then enjoy!</b> <b>Then enjoy!</b>
</p> </p>
<CustomButton> <CustomButton>
<LucideIcon name="square-arrow-right"/> This is a sample button yay <LucideIcon name="square-arrow-right" /> This is a sample button yay
</CustomButton> </CustomButton>
<br /> <br />
<hr /> <hr />
<small class="footer"> <small class="footer">
<LucideIcon name="at-sign" /> <LucideIcon name="at-sign" />
&nbsp; &nbsp;
<a href="https://github.com/klemek" target="_blank">klemek</a> <a href="https://github.com/klemek" target="_blank">klemek</a>
- -
<!-- TODO: 1. rename app --> <!-- TODO: 1. rename app -->
<LucideIcon name="github" /> <LucideIcon name="github" />
&nbsp; &nbsp;
<a href="https://github.com/klemek/vue-boilerplate" target="_blank"> <a href="https://github.com/klemek/vue-boilerplate" target="_blank">
Repository Repository
</a> </a>
- 2025 - 2025
</small> </small>
</main> </main>
</template> </template>
<style scoped> <style scoped>
.button { .button {
display: block; display: block;
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
padding: 1em; padding: 1em;
margin-bottom: 0.75em; margin-bottom: 0.75em;
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary);
border-radius: 0.5em; border-radius: 0.5em;
background-color: var(--background); background-color: var(--background);
cursor: pointer; cursor: pointer;
font-size: 1.333em; font-size: 1.333em;
} }
.button:hover { .button:hover {
background-color: var(--background-secondary); background-color: var(--background-secondary);
} }
.footer { .footer {
opacity: 50%; opacity: 50%;
} }
</style> </style>
src/components/CustomButton.vue
+19 -19
View File
@@ -1,36 +1,36 @@
<script setup lang="ts"> <script setup lang="ts">
interface Props { interface Props {
href?: string; href?: string;
color?: string; color?: string;
} }
defineProps<Props>(); defineProps<Props>();
</script> </script>
<template> <template>
<component <component
:is="href ? 'a' : 'div'" :is="href ? 'a' : 'div'"
:class="`button ${color ? 'b-' + color + ' ' + color : ''}`" :class="`button ${color ? 'b-' + color + ' ' + color : ''}`"
> >
<slot></slot> <slot></slot>
</component> </component>
</template> </template>
<style scoped> <style scoped>
.button { .button {
display: block; display: block;
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
padding: 1em; padding: 1em;
margin-bottom: 0.75em; margin-bottom: 0.75em;
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary);
border-radius: 0.5em; border-radius: 0.5em;
background-color: var(--background); background-color: var(--background);
cursor: pointer; cursor: pointer;
font-size: 1.333em; font-size: 1.333em;
} }
.button:hover { .button:hover {
background-color: var(--background-secondary); background-color: var(--background-secondary);
} }
</style> </style>
src/components/LucideIcon.vue
+21 -18
View File
@@ -3,27 +3,30 @@ import { computed, onMounted } from "vue";
import * as icons from "lucide-vue-next"; import * as icons from "lucide-vue-next";
interface Props { interface Props {
name: string; name: string;
color?: string; color?: string;
strokeWidth?: string; strokeWidth?: string;
defaultClass?: string; defaultClass?: string;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
color: "currentColor", color: "currentColor",
strokeWidth: "2", strokeWidth: "2",
defaultClass: "lucide", defaultClass: "lucide",
}); });
function kebab2camel(kebab: string): string { function kebab2camel(kebab: string): string {
return kebab return kebab
.split("-") .split("-")
.map((item) => item.charAt(0).toUpperCase() + item.slice(1).toLowerCase()) .map(
.join(""); (item) =>
item.charAt(0).toUpperCase() + item.slice(1).toLowerCase(),
)
.join("");
} }
onMounted(() => { onMounted(() => {
console.log(kebab2camel(props.name)); console.log(kebab2camel(props.name));
}); });
// @ts-expect-error: cannot infer type of all exported data // @ts-expect-error: cannot infer type of all exported data
@@ -31,10 +34,10 @@ const icon = computed(() => icons[kebab2camel(props.name)]);
</script> </script>
<template> <template>
<component <component
:is="icon" :is="icon"
:color="color" :color="color"
:stroke-width="strokeWidth" :stroke-width="strokeWidth"
:default-class="defaultClass" :default-class="defaultClass"
/> />
</template> </template>