Skip to content

Commit 94acc2b

Browse files
luthfimasruriluthfimasruri
committed
docs: 📝 Merge branch 'docs' into beta
2 parents d108913 + 246853e commit 94acc2b

File tree

21 files changed

+1929
-2426
lines changed

21 files changed

+1929
-2426
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ explorations
77
TODOs.md
88
*.log
99
.env
10+
.nuxt

‎docs/components/TextReplacer.vue‎

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,50 @@
1-
<template></template>
2-
3-
<script>
4-
import { watch, defineComponent, onMounted } from "vue";
1+
<script setup type="ts">
2+
import { watch, onMounted } from "vue";
53
import { escapeRegExp } from "../utils/regex";
6-
7-
export default defineComponent({
8-
props: {
9-
container: {
10-
type: String,
11-
default: "body",
12-
},
13-
pattern: {
14-
type: String,
15-
required: true,
16-
},
17-
replacement: {
18-
type: String,
19-
required: true,
20-
},
21-
prefix: {
22-
type: String,
23-
default: "",
24-
},
25-
suffix: {
26-
type: String,
27-
default: "",
28-
},
4+
const props = defineProps({
5+
container: {
6+
type: String,
7+
default: "body",
298
},
30-
setup: (props) => {
31-
const replaceDomText = (container, pattern, replacement) => {
32-
pattern = new RegExp(escapeRegExp(pattern), "g");
33-
document.querySelectorAll(container).forEach((el) => {
34-
el.innerHTML = el.innerHTML.replace(pattern, replacement);
35-
});
36-
};
37-
38-
let replacedText;
39-
onMounted(() => {
40-
watch(
41-
() => props.replacement,
42-
(value) => {
43-
if (props.replacement && props.replacement !== "") {
44-
const pattern = replacedText ? replacedText : props.pattern;
45-
const replacement = props.prefix + value + props.suffix;
46-
replaceDomText(props.container, pattern, replacement);
47-
replacedText = replacement;
48-
}
49-
},
50-
{ immediate: true }
51-
);
52-
});
9+
pattern: {
10+
type: String,
11+
required: true,
12+
},
13+
replacement: {
14+
type: String,
15+
required: true,
16+
},
17+
prefix: {
18+
type: String,
19+
default: "",
20+
},
21+
suffix: {
22+
type: String,
23+
default: "",
5324
},
25+
})
26+
const replaceDomText = (container, pattern, replacement) => {
27+
pattern = new RegExp(escapeRegExp(pattern), "g");
28+
document.querySelectorAll(container).forEach((el) => {
29+
el.innerHTML = el.innerHTML.replace(pattern, replacement);
30+
});
31+
};
32+
33+
let replacedText;
34+
onMounted(() => {
35+
watch(
36+
() => props.replacement,
37+
(value) => {
38+
if (props.replacement && props.replacement !== "") {
39+
const pattern = replacedText ? replacedText : props.pattern;
40+
const replacement = props.prefix + value + props.suffix;
41+
replaceDomText(props.container, pattern, replacement);
42+
replacedText = replacement;
43+
}
44+
},
45+
{ immediate: true }
46+
);
5447
});
5548
</script>
49+
50+
<template></template>

‎docs/components/VOptions.vue‎

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

docs/content/.vitepress/config.js renamed to docs/content/.vitepress/config.ts

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
// @ts-check
1+
import { defineConfig } from 'vitepress'
22

3-
/**
4-
* @type {import('vitepress').UserConfig}
5-
*/
6-
module.exports = {
3+
export default defineConfig({
74
base: '/vue-quill/',
85
lang: 'en-US',
96
title: 'VueQuill',
@@ -15,23 +12,33 @@ module.exports = {
1512
],
1613
],
1714
themeConfig: {
18-
repo: 'vueup/vue-quill',
1915
logo: '/logo.svg',
20-
docsDir: 'docs/content',
21-
docsBranch: 'beta',
22-
editLinks: true,
23-
editLinkText: 'Suggest changes to this page',
24-
25-
algolia: {
26-
apiKey: '05a276b73b9dd064f0788b9669751f46',
27-
indexName: 'vue-quill',
16+
editLink: {
17+
pattern:
18+
'https://github.com/vueup/vue-quill/edit/beta/docs/content/:path',
19+
text: 'Edit this page on GitHub',
2820
},
2921

22+
// algolia: {
23+
// appId: 'RG6O6WKY7G',
24+
// apiKey: '627e271ff72d4d685d49f21f5f25d425',
25+
// indexName: 'vue-quill',
26+
// searchParameters: {
27+
// facetFilters: ['tags:en'],
28+
// },
29+
// },
30+
3031
// carbonAds: {
3132
// carbon: 'CEBIEK3N',
3233
// placement: 'vuequilldev'
3334
// },
3435

36+
footer: {
37+
message: 'Released under the MIT License.',
38+
copyright:
39+
'Copyright © 2020-present Luthfi Masruri & VueQuill Contributors',
40+
},
41+
3542
nav: [
3643
{ text: 'Guide', link: '/guide/' },
3744
{ text: 'API Reference', link: '/api/' },
@@ -53,13 +60,13 @@ module.exports = {
5360
],
5461

5562
sidebar: {
56-
'/config/': 'auto',
57-
'/plugins': 'auto',
63+
// '/config/': 'auto',
64+
// '/plugins': 'auto',
5865
// catch-all fallback
5966
'/': [
6067
{
6168
text: 'Guide',
62-
children: [
69+
items: [
6370
{
6471
text: 'Introduction',
6572
link: '/guide/',
@@ -92,7 +99,7 @@ module.exports = {
9299
},
93100
{
94101
text: 'APIs',
95-
children: [
102+
items: [
96103
{
97104
text: 'Props',
98105
link: '/api/',
@@ -118,4 +125,4 @@ module.exports = {
118125
],
119126
},
120127
},
121-
}
128+
})

‎docs/content/.vitepress/theme/components/HomeDemo.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup lang="ts">
2+
import DemoEditor from './demo/DemoEditor.vue'
3+
</script>
4+
5+
<template>
6+
<div class="VPHomeDemo">
7+
<div class="wrapper">
8+
<div class="container">
9+
<div class="block py-4">
10+
<header class="text-center pb-5">
11+
<h2 id="demo" class="font-semibold border-none mb-2">Interactive Demo</h2>
12+
<p class="mx-auto max-w-lg my-2">
13+
What you see is what you get. Try out our interactive demo and discover all the features packed into VueQuill.
14+
</p>
15+
</header>
16+
<ClientOnly>
17+
<DemoEditor></DemoEditor>
18+
</ClientOnly>
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
</template>
24+
25+
<style scoped>
26+
.VPHomeDemo {
27+
margin-top: 112px;
28+
margin-bottom: -128px;
29+
border-top: 1px solid var(--vp-c-divider-light);
30+
padding: 88px 24px 96px;
31+
background-color: var(--vp-c-bg);
32+
}
33+
.container {
34+
margin: 0 auto;
35+
max-width: 1152px;
36+
}
37+
</style>

docs/components/demo/DemoEditor.vue renamed to docs/content/.vitepress/theme/components/demo/DemoEditor.vue

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
<script setup lang="ts">
2+
import { defineComponent, watch, ref } from 'vue'
3+
import VOptions from './VOptions.vue'
4+
import { deltaContent } from './delta-content'
5+
6+
const myEditor = ref()
7+
const myContent = ref(deltaContent)
8+
9+
// ============ OPTIONS =====================
10+
const selectedTheme = ref<string>('snow')
11+
const selectedToolbar = ref<string>('essential')
12+
13+
watch([selectedTheme, selectedToolbar], () => {
14+
myEditor.value.reinit()
15+
})
16+
</script>
17+
118
<template>
219
<div class="flex flex-col md:flex-row md:gap-3">
320
<!-- Theme and Toolbar menu -->
@@ -41,39 +58,11 @@
4158
</div>
4259
</template>
4360

44-
<script lang="ts">
45-
import { defineComponent, watch, ref } from 'vue'
46-
import VOptions from '../VOptions.vue'
47-
import { deltaContent } from './delta-content'
48-
49-
export default defineComponent({
50-
components: { VOptions },
51-
setup: () => {
52-
const myEditor = ref()
53-
const myContent = ref(deltaContent)
54-
55-
// ============ OPTIONS =====================
56-
const selectedTheme = ref<string>('snow')
57-
const selectedToolbar = ref<string>('essential')
58-
59-
watch([selectedTheme, selectedToolbar], () => {
60-
myEditor.value.reinit()
61-
})
62-
63-
return {
64-
selectedTheme,
65-
selectedToolbar,
66-
// handleReady,
67-
// ---------------
68-
myEditor,
69-
myContent,
70-
}
71-
},
72-
})
73-
</script>
74-
7561
<style>
7662
.ql-editor h2 {
7763
border: none;
7864
}
79-
</style>
65+
img {
66+
display: inline-block !important;
67+
}
68+
</style>

‎docs/content/.vitepress/theme/components/demo/VOptions.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
const props = defineProps({
4+
selected: {
5+
type: String,
6+
},
7+
name: {
8+
type: String,
9+
required: true,
10+
default: 'option',
11+
},
12+
options: {
13+
type: Array,
14+
default: [{ value: '1', label: 'Option 1' }],
15+
},
16+
})
17+
18+
const emit = defineEmits(['update:selected'])
19+
20+
const localValue = computed({
21+
get: () => props.selected,
22+
set: (value) => emit('update:selected', value),
23+
})
24+
</script>
25+
26+
<template>
27+
<div v-for="(option, index) in options" :key="index">
28+
<label class="inline-flex items-center cursor-pointer w-full">
29+
<input
30+
type="radio"
31+
class="form-radio bg-gray-200"
32+
v-bind="$attrs"
33+
:name="name"
34+
:value="option.value"
35+
:checked="option.value === localValue"
36+
v-model="localValue"
37+
/>
38+
<span class="ml-2">{{ option.label }}</span>
39+
</label>
40+
</div>
41+
</template>

docs/components/demo/delta-content.ts renamed to docs/content/.vitepress/theme/components/demo/delta-content.ts

File renamed without changes.

0 commit comments

Comments
 (0)