hipowered.dev/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2026-11-12 13:38:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): use the same camel/pascal same conversion as when releasing packages (#2509)

Browse Source
This commit is contained in:
Karsa
2024-10-08 10:36:35 +02:00
committed by GitHub
parent 13cea45e8b
commit 6588971ead
3 changed files with 53 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/icons/CopyCodeButton.vue
+38 -38
View File
@@ -1,98 +1,98 @@
<script setup lang="ts">
import { computed } from 'vue';
import { startCase, camelCase } from 'lodash-es'
import ButtonMenu from '../base/ButtonMenu.vue'
import { toPascalCase } from '@lucide/shared';
import ButtonMenu from '../base/ButtonMenu.vue';
import { useIconStyleContext } from '../../composables/useIconStyle';
import useConfetti from '../../composables/useConfetti';
const props = defineProps<{
name: string
popoverPosition?: 'top' | 'bottom'
}>()
const { size, color, strokeWidth, absoluteStrokeWidth } = useIconStyleContext()
const { animate, confetti } = useConfetti()
name: string;
popoverPosition?: 'top' | 'bottom';
}>();
const { size, color, strokeWidth, absoluteStrokeWidth } = useIconStyleContext();
const { animate, confetti } = useConfetti();
const componentName = computed(() => {
return startCase(camelCase(props.name)).replace(/\s/g, '')
})
return (toPascalCase(props.name) as string).replace(/\s/g, '');
});
function copyJSX() {
let attrs = ['']
let attrs = [''];
if (size.value && size.value !== 24) {
attrs.push(`size={${size.value}}`)
attrs.push(`size={${size.value}}`);
}
if (color.value && color.value !== 'currentColor') {
attrs.push(`color="${color.value}"`)
attrs.push(`color="${color.value}"`);
}
if (strokeWidth.value && strokeWidth.value !== 2) {
attrs.push(`strokeWidth={${strokeWidth.value}}`)
attrs.push(`strokeWidth={${strokeWidth.value}}`);
}
if (absoluteStrokeWidth.value) {
attrs.push(`absoluteStrokeWidth`)
attrs.push(`absoluteStrokeWidth`);
}
const code = `<${componentName.value}${attrs.join(' ')} />`
const code = `<${componentName.value}${attrs.join(' ')} />`;
navigator.clipboard.writeText(code)
navigator.clipboard.writeText(code);
}
function copyComponentName() {
const code = componentName.value
const code = componentName.value;
navigator.clipboard.writeText(code)
navigator.clipboard.writeText(code);
}
function copyVue() {
let attrs = ['']
let attrs = [''];
if (size.value && size.value !== 24) {
attrs.push(`:size="${size.value}"`)
attrs.push(`:size="${size.value}"`);
}
if (color.value && color.value !== 'currentColor') {
attrs.push(`color="${color.value}"`)
attrs.push(`color="${color.value}"`);
}
if (strokeWidth.value && strokeWidth.value !== 2) {
attrs.push(`:stroke-width="${strokeWidth.value}"`)
attrs.push(`:stroke-width="${strokeWidth.value}"`);
}
if (absoluteStrokeWidth.value) {
attrs.push(`absoluteStrokeWidth`)
attrs.push(`absoluteStrokeWidth`);
}
const code = `<${componentName.value}${attrs.join(' ')} />`
const code = `<${componentName.value}${attrs.join(' ')} />`;
navigator.clipboard.writeText(code)
navigator.clipboard.writeText(code);
}
function copyAngular() {
let attrs = ['']
let attrs = [''];
attrs.push(`name="${props.name}"`)
attrs.push(`name="${props.name}"`);
if (size.value && size.value !== 24) {
attrs.push(`[size]="${size.value}"`)
attrs.push(`[size]="${size.value}"`);
}
if (color.value && color.value !== 'currentColor') {
attrs.push(`color="${color.value}"`)
attrs.push(`color="${color.value}"`);
}
if (strokeWidth.value && strokeWidth.value !== 2) {
attrs.push(`[strokeWidth]="${strokeWidth.value}"`)
attrs.push(`[strokeWidth]="${strokeWidth.value}"`);
}
if (absoluteStrokeWidth.value) {
attrs.push(`[absoluteStrokeWidth]="true"`)
attrs.push(`[absoluteStrokeWidth]="true"`);
}
const code = `<lucide-icon${attrs.join(' ')}></lucide-icon>`
const code = `<lucide-icon${attrs.join(' ')}></lucide-icon>`;
navigator.clipboard.writeText(code)
navigator.clipboard.writeText(code);
}
</script>
@@ -106,11 +106,11 @@ function copyAngular() {
data-confetti-text="Copied!"
:popoverPosition="popoverPosition"
:options="[
{ text: 'Copy JSX' , onClick: copyJSX },
{ text: 'Copy Component Name' , onClick: copyComponentName },
{ text: 'Copy Vue' , onClick: copyVue },
{ text: 'Copy Svelte' , onClick: copyJSX },
{ text: 'Copy Angular' , onClick: copyAngular },
{ text: 'Copy JSX', onClick: copyJSX },
{ text: 'Copy Component Name', onClick: copyComponentName },
{ text: 'Copy Vue', onClick: copyVue },
{ text: 'Copy Svelte', onClick: copyJSX },
{ text: 'Copy Angular', onClick: copyAngular },
]"
/>
</template>
docs/icons/[name].md
+3 -4
View File
@@ -18,9 +18,8 @@ import RelatedIcons from '~/.vitepress/theme/components/icons/RelatedIcons.vue'
import CodeGroup from '~/.vitepress/theme/components/base/CodeGroup.vue'
import Badge from '~/.vitepress/theme/components/base/Badge.vue'
import Label from '~/.vitepress/theme/components/base/Label.vue'
import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
import { data } from './codeExamples.data'
import { camelCase, startCase } from 'lodash-es'
import { toCamelCase, toPascalCase } from '@lucide/shared'
import { satisfies } from 'semver'
const { params } = useData()
@@ -31,8 +30,8 @@ const tabs = computed(() => data.codeExamples?.map(
const codeExample = computed(() => data.codeExamples?.map(
(codeExample) => {
const pascalCaseName = startCase(camelCase( params.value.name)).replace(/\s/g, '')
const camelCaseName = camelCase(params.value.name)
const pascalCaseName = toPascalCase( params.value.name)
const camelCaseName = toCamelCase(params.value.name)
return codeExample.code
.replace(/\$(?:<[^>]+>)*PascalCase/g, pascalCaseName)
packages/shared/src/utils.ts
+12 -3
View File
@@ -9,6 +9,17 @@ import { CamelToPascal } from './utility-types';
export const toKebabCase = (string: string) =>
string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
/**
* Converts string to camel case
*
* @param {string} string
* @returns {string} A camelized string
*/
export const toCamelCase = <T extends string>(string: T) =>
string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) =>
p2 ? p2.toUpperCase() : p1.toLowerCase(),
);
/**
* Converts string to pascal case
*
@@ -16,9 +27,7 @@ export const toKebabCase = (string: string) =>
* @returns {string} A pascalized string
*/
export const toPascalCase = <T extends string>(string: T): CamelToPascal<T> => {
const camelCase = string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) =>
p2 ? p2.toUpperCase() : p1.toLowerCase(),
);
const camelCase = toCamelCase(string);
return (camelCase.charAt(0).toUpperCase() + camelCase.slice(1)) as CamelToPascal<T>;
};