Skip to content

Commit f60f6f2

Browse files
HetariHetari
committed
refactor: merge files in one file
1 parent b5d4f6f commit f60f6f2

File tree

17 files changed

+65
-244
lines changed

17 files changed

+65
-244
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"type": "module",
33
"private": false,
44
"name": "vuejs-code-block",
5-
"version": "0.0.1-alpha.1",
5+
"version": "0.0.2-alpha.1",
66
"description": "A Vue 3 component of unstyled UI components to build powerful code blocks.",
77
"author": {
88
"name": "Ebraheem Alhetari",

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
class="my-class"
55
id="my-id"
66
:code="code"
7-
language="python"
7+
language="js"
88
code-class="codeClass"
99
:numbered="true"
1010
:lines-highlighted="[1, 2]"

‎src/components/code-block/CodeBlock.vue‎

Lines changed: 47 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,37 @@
11
<template>
2-
<Code
3-
:id="id"
4-
:class="class"
5-
:value="rootContext"></Code>
2+
<!-- Code Block Component -->
3+
<component
4+
:id="props.id"
5+
:class="props.class"
6+
:is="props.asElement || 'pre'"
7+
v-bind="$attrs"
8+
class="code">
9+
<!-- Line Component -->
10+
<template
11+
v-for="(line, i) in code"
12+
:key="i">
13+
<div class="line">
14+
<div class="number-container">
15+
<span
16+
class="number"
17+
v-if="!props.numbered"
18+
>{{ props.number }}</span
19+
>
20+
</div>
21+
<div v-html="line"></div>
22+
</div>
23+
</template>
24+
</component>
625
</template>
726

827
<script setup lang="ts">
9-
import Code from '../code/Code.vue';
10-
import { computed, defineComponent, toRefs } from 'vue';
28+
import { defineComponent, ref, toRefs } from 'vue';
1129
import { codeBlockProps, codeBlockInstance } from './types';
1230
import { useCodeBlock } from './use-code-block';
1331
import { parseCodeIntoLines } from '../utils';
1432
1533
const props = defineProps(codeBlockProps());
16-
17-
// TODO: add theme
18-
// codeClass: props.codeClass,
19-
const rootContext = computed(() => ({
20-
code: parseCodeIntoLines(props.code, props.language),
21-
numbered: props.numbered,
22-
language: props.language,
23-
linesHighlighted: props.linesHighlighted,
24-
wordsHighlighted: props.wordsHighlighted,
25-
asElement: props.asElement
26-
}));
34+
const code = ref<string[]>(parseCodeIntoLines(props.code, props.language));
2735
2836
defineComponent<codeBlockInstance>({
2937
name: 'CodeBlock',
@@ -34,3 +42,25 @@
3442
slots: { default: 'Default' }
3543
});
3644
</script>
45+
46+
<style>
47+
.code {
48+
padding: 1rem 1.5rem;
49+
border-radius: 0.25rem;
50+
background-color: #f5f5f5;
51+
}
52+
/*
53+
.line {
54+
display: flex;
55+
align-items: center;
56+
gap: 1rem;
57+
}
58+
.number-container {
59+
color: #666;
60+
}
61+
62+
.number {
63+
font-size: 0.8rem;
64+
user-select: none;
65+
} */
66+
</style>

‎src/components/code-block/types.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type {
44
MaybeRefOrGetter,
55
PropType
66
} from 'vue';
7-
import { AllLanguagesSupported } from '../utils';
7+
// import { AllLanguagesSupported } from '../utils';
88

99
// Props goes here
1010
export const codeBlockProps = () =>
@@ -24,7 +24,7 @@ export const codeBlockProps = () =>
2424
required: true
2525
},
2626
language: {
27-
type: String as PropType<AllLanguagesSupported>,
27+
type: String as PropType<string>,
2828
required: false,
2929
default: 'markup'
3030
},
@@ -52,6 +52,11 @@ export const codeBlockProps = () =>
5252
type: Boolean as PropType<boolean>,
5353
required: false,
5454
default: false
55+
},
56+
number: {
57+
type: Number as PropType<number>,
58+
required: false,
59+
default: 0
5560
}
5661
} as const);
5762

@@ -80,6 +85,7 @@ export interface UseCodeBlockProps {
8085
wordsHighlighted: MaybeRefOrGetter<string[]>;
8186
asElement: MaybeRefOrGetter<string | null>;
8287
numbered: MaybeRefOrGetter<boolean>;
88+
number: MaybeRefOrGetter<number>;
8389
}
8490

8591
// Props goes here
@@ -98,6 +104,7 @@ export type PublicCodeBlockProps = Partial<
98104
| 'wordsHighlighted'
99105
| 'asElement'
100106
| 'numbered'
107+
| 'number'
101108
>
102109
> &
103110
// Then explicitly pick properties from UseCodeBlockProps to make them required
@@ -112,4 +119,5 @@ export type PublicCodeBlockProps = Partial<
112119
| 'wordsHighlighted'
113120
| 'asElement'
114121
| 'numbered'
122+
| 'number'
115123
>;

‎src/components/code-block/use-code-block.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ const defaultProps = {
1616
codeClass: '',
1717
linesHighlighted: [],
1818
wordsHighlighted: [],
19-
asElement: ''
19+
asElement: '',
20+
numbered: false,
21+
number: 0
2022
};
2123

2224
export function useCodeBlock(props: PublicCodeBlockProps) {

‎src/components/code/Code.vue‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎src/components/code/index.ts‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/components/code/types.ts‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎src/components/code/use-code.ts‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/components/line/Line.vue‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

0 commit comments

Comments
 (0)