Add steps

This commit is contained in:
Eric Fennis
2023-05-02 21:18:47 +02:00
parent 63e7d6959c
commit 8b3b14221d
5 changed files with 53 additions and 153 deletions
+2 -1
View File
@@ -5,7 +5,7 @@ interface Props {
modelValue: number;
min?: number;
max?: number;
steps?: number;
step?: number;
}
const props = withDefaults(defineProps<Props>(), {
@@ -28,6 +28,7 @@ const percentage = computed<string>(() => `${((props.modelValue - props.min) / (
v-on:input="$emit('update:modelValue', Number($event.target.value))"
:min="min"
:max="max"
:step="step"
/>
<div class="bar"></div>
</div>
@@ -83,9 +83,9 @@ function resetStyle () {
id="stroke-width"
name="stroke-width"
v-model="strokeWidth"
:min="1"
:min="0.5"
:max="4"
:steps="0.5"
:step="0.5"
/>
</InputField>
@@ -102,6 +102,7 @@ function resetStyle () {
v-model="size"
:min="16"
:max="48"
:step="4"
/>
</InputField>
</div>
+48 -1
View File
@@ -40,6 +40,28 @@ export default defineConfig({
{ text: 'Installation', link: '/guide/installation' }
]
},
// {
// test: 'Using Icons',
// items: [
// {
// text: 'How to use icons',
// link: 'how-to-use-icons'
// },
// {
// text: 'Styling icons',
// link: 'styling-icons'
// },
// {
// text: 'Accessibility',
// link: 'accessibility'
// },
// {
// text: 'What should I use',
// link: 'what-should-i-use'
// },
// ]
// },
{
text: 'Packages',
items: [
@@ -67,6 +89,10 @@ export default defineConfig({
text: 'Lucide Svelte',
link: '/guide/packages/lucide-svelte'
},
{
text: 'Lucide Solid',
link: '/guide/packages/lucide-solid'
},
{
text: 'Lucide Preact',
link: '/guide/packages/lucide-preact'
@@ -84,7 +110,28 @@ export default defineConfig({
link: '/guide/packages/lucide-flutter'
},
]
}
},
{
text: 'Contributing',
items: [
{
text: 'Icon Design Principles',
link: '/guide/design/icon-design-guide'
},
{
text: 'Designing in Illustrator',
link: '/guide/design/illustrator-guide'
},
{
text: 'Designing in InkScape',
link: '/guide/design/inkscape-guide'
},
{
text: 'Designing in Figma',
link: '/guide/design/figma-guide'
},
]
},
],
'icons': [
{ text: '', link: '/' },
-136
View File
@@ -1,136 +0,0 @@
const docsMenuTree = [
{
section: 'Getting Started',
items: [
{
title: 'Introduction',
href: ''
},
{
title: 'Installation',
href: 'installation'
},
{
title: 'Comparison',
href: 'comparison'
},
// {
// title: 'Examples',
// href: 'examples'
// }
]
},
// {
// section: 'Using Icons',
// items: [
// {
// title: 'What should I use',
// href: 'what-should-i-use'
// },
// {
// title: 'For Web (Vanilla)',
// href: 'lucide-with-web'
// },
// {
// title: 'React',
// href: 'lucide-with-react'
// },
// {
// title: 'Vue',
// href: 'lucide-with-vue'
// },
// {
// title: 'Angular',
// href: 'lucide-with-angular'
// },
// {
// title: 'Preact',
// href: 'lucide-with-preact'
// },
// {
// title: 'nodejs',
// href: 'lucide-with-nodejs'
// },
// {
// title: 'Flutter',
// href: 'lucide-with-flutter'
// },
// {
// title: 'Figma',
// href: 'lucide-with-figma'
// },
// {
// title: 'Other Design programs',
// href: 'lucide-with-design-programs'
// },
// ]
// },
{
section: 'Packages',
items: [
{
title: 'Lucide',
href: 'lucide'
},
{
title: 'Lucide React',
href: 'lucide-react'
},
{
title: 'Lucide React Native',
href: 'lucide-react-native'
},
{
title: 'Lucide Vue',
href: 'lucide-vue'
},
{
title: 'Lucide Vue Next (Vue 3)',
href: 'lucide-vue-next'
},
{
title: 'Lucide Svelte',
href: 'lucide-svelte'
},
{
title: 'Lucide Preact',
href: 'lucide-preact'
},
{
title: 'Lucide Angular',
href: 'lucide-angular'
},
{
title: 'Lucide Static',
href: 'lucide-static'
},
{
title: 'Lucide Flutter',
href: 'lucide-flutter'
},
]
},
{
section: 'Contributing',
items: [
{
title: 'Icon Design Principles',
href: 'icon-design-guide'
},
{
title: 'Designing in Illustrator',
href: 'illustrator-guide'
},
{
title: 'Designing in InkScape',
href: 'inkscape-guide'
},
{
title: 'Designing in Figma',
href: 'figma-guide'
},
]
},
]
export default docsMenuTree;
-13
View File
@@ -1,13 +0,0 @@
import NextCache from './nextCache';
import {getAllData} from './icons';
export type Tags = {[iconName: string]: string[]};
export function fetchTags(writeCache = true): Promise<Tags> {
return NextCache.resolve('api-tags', async () => {
return (await getAllData()).reduce((acc, icon) => {
acc[icon.name] = icon.tags;
return acc;
}, {});
}, writeCache);
}