Skip to content

Commit 2094647

Browse files
IgorShevchikIgorShevchik
committed
feat(prose): new prose components
1 parent b95ce8c commit 2094647

File tree

24 files changed

+506
-10
lines changed

24 files changed

+506
-10
lines changed

‎docs/.vitepress/config/en.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
7878
base: '/components/composables/',
7979
items: [
8080
{ text: 'defineShortcuts', link: 'define-shortcuts' },
81-
{ text: 'useConfetti💡', link: 'use-confetti' },
82-
{ text: 'useOverlay💡', link: 'use-overlay' },
81+
{ text: 'useConfetti', link: 'use-confetti' },
82+
{ text: 'useOverlay', link: 'use-overlay' },
8383
{ text: 'useFormField', link: 'use-form-field' },
8484
{ text: 'useToast', link: 'use-toast' }
8585
]
@@ -99,7 +99,7 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
9999
{ text: 'ButtonGroup', link: 'button-group' },
100100
{ text: 'DropdownMenu', link: 'dropdown-menu' },
101101
{ text: 'Modal', link: 'modal' },
102-
{ text: 'Slideover💡', link: 'slideover' }
102+
{ text: 'Slideover', link: 'slideover' }
103103
]
104104
},
105105
{

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"types": "./vue-plugin.d.ts"
3737
},
3838
"./runtime/*": "./dist/runtime/*",
39+
"./prose/*": "./dist/runtime/prose/*",
3940
"./components/*": "./dist/runtime/components/*",
4041
"./composables/*": "./dist/runtime/composables/*",
4142
"./types/*": "./dist/runtime/types/*",

‎playground/app/composables/usePageMeta.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,11 @@ const components: IComponentInfo[] = [
7070
{ id: 'slideover', description: 'A dialog that slides in from any side of the screen.', icon: GroupIcon },
7171
{ id: 'switch', description: 'A control that toggles between two states.', icon: FormIcon },
7272
{ id: 'tabs', description: 'A set of tab panels that are displayed one at a time.', icon: FolderEmptyIcon },
73-
{ id: 'content/table-wrapper', description: 'Wrapper for displaying a table.', icon: GroupIcon },
7473
{ id: 'textarea', description: 'A textarea element to input multi-line text.', icon: FormIcon },
7574
{ id: 'toast', description: 'A succinct message to provide information or feedback to the user.', icon: GroupIcon },
76-
{ id: 'tooltip', description: 'A popup that reveals information when hovering over an element.', icon: GroupIcon }
75+
{ id: 'tooltip', description: 'A popup that reveals information when hovering over an element.', icon: GroupIcon },
76+
{ id: 'content/table-wrapper', description: 'Wrapper for displaying a table.', icon: GroupIcon },
77+
{ id: 'prose/show', description: 'Show same prose', icon: GroupIcon }
7778
]
7879

7980
const groups: IPageGroup[] = [

‎playground/app/pages/components/prose/show.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<script setup lang="ts">
2+
import usePageMeta from './../../../composables/usePageMeta'
3+
import ExampleGrid from '../../../components/ExampleGrid.vue'
4+
import ExampleCard from '../../../components/ExampleCard.vue'
5+
// import ExampleCardSubTitle from '../../../components/ExampleCardSubTitle.vue'
6+
7+
usePageMeta.setPageTitle('Prose')
8+
</script>
9+
10+
<template>
11+
<ExampleGrid v-once>
12+
<ExampleCard title="simple" class="col-span-2">
13+
<B24Separator class="my-3" type="dotted" />
14+
<div class="mb-4">
15+
<ProseH1>
16+
Some H1
17+
</ProseH1>
18+
<ProseH2>
19+
Some H2
20+
</ProseH2>
21+
<ProseH3>
22+
Some H2
23+
</ProseH3>
24+
<B24Separator class="my-3" type="dotted" />
25+
<ProseP>
26+
Some p
27+
</ProseP>
28+
<B24Separator class="my-3" type="dotted" />
29+
<ProseUl>
30+
<ProseLi>Some ul/li</ProseLi>
31+
<ProseLi>
32+
Some ul/li
33+
<ProseOl>
34+
<ProseLi>Some ul/li/ol/li</ProseLi>
35+
<ProseLi>Some ul/li/ol/li</ProseLi>
36+
<ProseLi>Some ul/li/ol/li</ProseLi>
37+
</ProseOl>
38+
</ProseLi>
39+
<ProseLi>Some ul/li</ProseLi>
40+
<ProseLi>
41+
Some ul/li
42+
<ProseUl>
43+
<ProseLi>Some ul/li/ul/li</ProseLi>
44+
<ProseLi>Some ul/li/ul/li</ProseLi>
45+
<ProseLi>Some ul/li/ul/li</ProseLi>
46+
</ProseUl>
47+
</ProseLi>
48+
<ProseLi>Some ul/li</ProseLi>
49+
</ProseUl>
50+
<B24Separator class="my-3" type="dotted" />
51+
<ProseOl>
52+
<ProseLi>Some ol/li</ProseLi>
53+
<ProseLi>Some ol/li</ProseLi>
54+
<ProseLi>Some ol/li</ProseLi>
55+
</ProseOl>
56+
</div>
57+
</ExampleCard>
58+
</ExampleGrid>
59+
</template>

‎src/module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,12 @@ export default defineNuxtModule<ModuleOptions>({
6767
pathPrefix: false
6868
})
6969

70+
addComponentsDir({
71+
path: resolve('./runtime/prose'),
72+
prefix: '',
73+
pathPrefix: false
74+
})
75+
7076
addImportsDir(resolve('./runtime/composables'))
7177

7278
addTemplates(options, nuxt, resolve)

‎src/plugins/components.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ export default function ComponentImportPlugin(
2121
const componentsContent = globSync('**/*.vue', { cwd: join(runtimeDir, 'components/content') })
2222
const componentContentNames = new Set(componentsContent.map(c => `B24${c.replace(/\.vue$/, '')}`))
2323

24-
const componentsProse = globSync('**/*.vue', { cwd: join(runtimeDir, 'components/prose') })
25-
const componentProseNames = new Set(componentsProse.map(c => `B24${c.replace(/\.vue$/, '')}`))
24+
const componentsProse = globSync('**/*.vue', { cwd: join(runtimeDir, 'prose') })
25+
const componentProseNames = new Set(componentsProse.map(c => `${c.replace(/\.vue$/, '')}`))
2626

2727
const overrides = globSync('**/*.vue', { cwd: join(runtimeDir, 'vue/components') })
2828
const overrideNames = new Set(overrides.map(c => `B24${c.replace(/\.vue$/, '')}`))
@@ -35,7 +35,7 @@ export default function ComponentImportPlugin(
3535
if (overrideNames.has(componentName))
3636
return { name: 'default', from: join(runtimeDir, 'vue/components', `${componentName.slice('B24'.length)}.vue`) }
3737
if (componentProseNames.has(componentName))
38-
return { name: 'default', from: join(runtimeDir, 'components/prose', `${componentName.slice('B24'.length)}.vue`) }
38+
return { name: 'default', from: join(runtimeDir, 'prose', `${componentName.slice(0)}.vue`) }
3939
if (componentContentNames.has(componentName))
4040
return { name: 'default', from: join(runtimeDir, 'components/content', `${componentName.slice('B24'.length)}.vue`) }
4141
if (componentNames.has(componentName))

‎src/runtime/index.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,15 @@
1414

1515
.dark {}
1616

17+
--b24ui-header-height: calc(var(--spacing)*16);
18+
1719
.scrollbar-thin {
1820
scrollbar-width: thin;
1921
}
2022
}
23+
24+
@layer theme {
25+
:host,:root {
26+
--spacing: .25rem;
27+
}
28+
}

‎src/runtime/prose/ProseH1.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts">
2+
import type { AppConfig } from '@nuxt/schema'
3+
import _appConfig from '#build/app.config'
4+
import theme from '#build/b24ui/prose/prose-h1'
5+
import { tv } from '../utils/tv'
6+
7+
const appConfigProseH1 = _appConfig as AppConfig & { b24ui: { prose: { h1: Partial<typeof theme> } } }
8+
9+
const proseH1 = tv({ extend: tv(theme), ...(appConfigProseH1.b24ui?.prose?.h1 || {}) })
10+
11+
export interface proseH1Props {
12+
class?: any
13+
b24ui?: Partial<typeof proseH1.slots>
14+
}
15+
16+
export interface proseH1Slots {
17+
default(props?: {}): any
18+
}
19+
</script>
20+
21+
<script setup lang="ts">
22+
defineOptions({ inheritAttrs: false })
23+
24+
const props = defineProps<proseH1Props>()
25+
26+
// eslint-disable-next-line vue/no-dupe-keys
27+
const b24ui = proseH1({})
28+
</script>
29+
30+
<template>
31+
<h1
32+
:class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
33+
>
34+
<slot />
35+
</h1>
36+
</template>

‎src/runtime/prose/ProseH2.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts">
2+
import type { AppConfig } from '@nuxt/schema'
3+
import _appConfig from '#build/app.config'
4+
import theme from '#build/b24ui/prose/prose-h2'
5+
import { tv } from '../utils/tv'
6+
7+
const appConfigProseH2 = _appConfig as AppConfig & { b24ui: { prose: { h2: Partial<typeof theme> } } }
8+
9+
const proseH2 = tv({ extend: tv(theme), ...(appConfigProseH2.b24ui?.prose?.h2 || {}) })
10+
11+
export interface proseH2Props {
12+
class?: any
13+
b24ui?: Partial<typeof proseH2.slots>
14+
}
15+
16+
export interface proseH2Slots {
17+
default(props?: {}): any
18+
}
19+
</script>
20+
21+
<script setup lang="ts">
22+
defineOptions({ inheritAttrs: false })
23+
24+
const props = defineProps<proseH2Props>()
25+
26+
// eslint-disable-next-line vue/no-dupe-keys
27+
const b24ui = proseH2({})
28+
</script>
29+
30+
<template>
31+
<h2
32+
:class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
33+
>
34+
<slot />
35+
</h2>
36+
</template>

‎src/runtime/prose/ProseH3.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts">
2+
import type { AppConfig } from '@nuxt/schema'
3+
import _appConfig from '#build/app.config'
4+
import theme from '#build/b24ui/prose/prose-h3'
5+
import { tv } from '../utils/tv'
6+
7+
const appConfigProseH3 = _appConfig as AppConfig & { b24ui: { prose: { h3: Partial<typeof theme> } } }
8+
9+
const proseH3 = tv({ extend: tv(theme), ...(appConfigProseH3.b24ui?.prose?.h3 || {}) })
10+
11+
export interface proseH3Props {
12+
class?: any
13+
b24ui?: Partial<typeof proseH3.slots>
14+
}
15+
16+
export interface proseH3Slots {
17+
default(props?: {}): any
18+
}
19+
</script>
20+
21+
<script setup lang="ts">
22+
defineOptions({ inheritAttrs: false })
23+
24+
const props = defineProps<proseH3Props>()
25+
26+
// eslint-disable-next-line vue/no-dupe-keys
27+
const b24ui = proseH3({})
28+
</script>
29+
30+
<template>
31+
<h3
32+
:class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
33+
>
34+
<slot />
35+
</h3>
36+
</template>

0 commit comments

Comments
 (0)