Skip to content

Commit 73272b4

Browse files
hawkeye64hawkeye64
committed
Merge branch 'dev'
2 parents aaed020 + 1fd59d7 commit 73272b4

17 files changed

+207
-296
lines changed

‎.npmignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
demo
22
docs
3+
npm-debug.log*
4+
yarn-debug.log*
5+
yarn-error.log*

‎README.md‎

Lines changed: 4 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -29,112 +29,9 @@ quasar ext remove @quasar/qmarkdown
2929
# Describe
3030
You can use `quasar describe QMarkdown`
3131

32-
# Test Project
33-
In **demo** folder of **app-extension-qmarkdown**.
32+
# Demo Project
33+
Can be found [here](https://github.com/quasarframework/app-extension-qmarkdown/tree/master/demo).
3434

35-
# Demo
36-
Can be found [here](https://quasarframework.github.io/app-extension-qmarkdown/demo/dist/spa/#/).
37-
38-
# Example Code
39-
Be sure to check out the Test Project for more examples.
40-
```
41-
<q-markdown>
42-
Classic markup: :wink: :joy: :cry: :angel: :heart: :beers: :laughing: :yum:
43-
44-
Shortcuts (emoticons): :-) :-( 8-) ;)
45-
</q-markdown>
46-
```
47-
48-
# Imports
49-
QMarkdown now allows you to import markdown files into your Vue files.
50-
51-
```
52-
import markdown from '../markdown/calendar.md'
53-
```
54-
55-
then,
56-
57-
```
58-
data () {
59-
return {
60-
markdown: markdown
61-
}
62-
},
63-
```
64-
65-
and finally:
66-
67-
```
68-
<q-markdown :src="markdown" />
69-
```
70-
71-
# QMarkdown Vue Properties
72-
| Vue&nbsp;Property | Type | Description |
73-
|---|---|---|
74-
| src | String | Pass the markdown as a string instead of a slot |
75-
| no-html | Boolean | Disable HTML tags in source |
76-
| no-link | Boolean | Disable conversion of links |
77-
| no-linkify | Boolean | Disable auto-convert URL-like text to links |
78-
| no-typographer | Boolean | Disable language-neutral replacement + quotes beautification |
79-
| no-breaks | Boolean | Disable conversion of '\\n' into <br> |
80-
| no-highlight | Boolean | Disable code highlighter |
81-
| no-emoji | Boolean | Disable emojie conversion |
82-
| no-subscript | Boolean | Disable subscript conversion |
83-
| no-superscript | Boolean | Disable superscript conversion |
84-
| no-footnote | Boolean | Disable footnote conversion |
85-
| no-deflist | Boolean | Disable definition list conversion |
86-
| no-abbreviation | Boolean | Disable abbreviation conversion |
87-
| no-insert | Boolean | Disable insert conversion |
88-
| no-mark | Boolean | Disable mark conversion |
89-
| no-image | Boolean | Disable image conversion |
90-
| no-tasklist | Boolean | Disable tasklist conversion |
91-
| no-container | Boolean | Disable container conversion |
92-
| toc | Boolean | Generate a TOC; received with `toc` event |
93-
| toc-start | Number | [1-5] The number defines the starting header (ex: 1 == h1, 2 == h2, etc) |
94-
| toc-end | Number | [2-6] The number defines the ending header (ex: 3 == h3, 4 == h4, etc). This number must be greater than the `startingToc` property or it will be ignored |
95-
| task-lists-enable | Boolean | set to true to enable task lists checkboxes (not read-only) |
96-
| task-lists-label | Boolean | to wrap the rendered list items in a <label> element for UX purposes |
97-
| task-lists-enable-after | Boolean | to add the label after the checkbox |
98-
| content-class | [String, Object, Array] | Style definitions to be attributed to the markdown |
99-
| content-style | [String, Object, Array] | Style definitions to be attributed to the markdown |
100-
101-
# QMarkdown Vue Events
102-
| Vue&nbsp;Event | Description |
103-
|---|---|
104-
| data | If the `toc` proerty is set to `true`, this event will occur containing any TOC data, if there is any. This is an array of flat data |
105-
106-
Given markdown that looks like this:
107-
```
108-
## h2 Heading
109-
110-
### h3 Heading
111-
```
112-
113-
The TOC data looks like this:
114-
```
115-
[
116-
{id: 'h2-Heading', title: 'h2 Heading', level: 2, children: []},
117-
{id: 'h3-Heading', title: 'h3 Heading', level: 3, children: []}
118-
]
119-
```
120-
121-
# QMarkdown Vue Methods
122-
| Vue&nbsp;Method | Description |
123-
|---|---|
124-
| makeTree | Pass into this function the results from the @data to have the data array transformed into a hieracrhial tree. |
125-
126-
The TOC data will be transformed to the following:
127-
```
128-
[
129-
{id: 'h2-Heading', title: 'h2 Heading', level: 2, children: [
130-
{id: 'h3-Heading', title: 'h3 Heading', level: 3, children: []}
131-
]}
132-
133-
]
134-
```
135-
136-
# QMarkdown Vue Slots
137-
| Vue&nbsp;Slot | Description |
138-
|---|---|
139-
| default | The default slot - this slot overrides anything that may be passed in via the `src` property. |
14035

36+
# Documentation
37+
Can be found [here](https://quasarframework.github.io/app-extension-qmarkdown/).

‎demo/dist/spa/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html><head><title>Quasar App</title><meta charset=utf-8><meta name=description content="A Quasar Framework app for QMarkdown"><meta name=format-detection content="telephone=no"><meta name=msapplication-tap-highlight content=no><meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><link rel=icon href=statics/quasar-logo.png type=image/x-icon><link rel=icon type=image/png sizes=32x32 href=statics/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=statics/icons/favicon-16x16.png><link href=css/08989596.c28a14a7.css rel=prefetch><link href=css/68acfaa0.3a6cc955.css rel=prefetch><link href=css/9cc1d7f6.b0325cfb.css rel=prefetch><link href=js/08989596.63ce8d90.js rel=prefetch><link href=js/2d0d5fdf.ab27c292.js rel=prefetch><link href=js/2d20f31c.1088b1a1.js rel=prefetch><link href=js/2d21adb6.ba544d3a.js rel=prefetch><link href=js/3eb6c62d.07d8e8e5.js rel=prefetch><link href=js/3eb766dc.bcc03206.js rel=prefetch><link href=js/3eb7d5d0.ff375b3e.js rel=prefetch><link href=js/3eb8558b.336fa42c.js rel=prefetch><link href=js/3eb88521.c3323a4d.js rel=prefetch><link href=js/3eb8b8ca.055466e1.js rel=prefetch><link href=js/3eb8c0d7.f116f630.js rel=prefetch><link href=js/3eb965b4.3c880384.js rel=prefetch><link href=js/3eb9f08a.064f6176.js rel=prefetch><link href=js/3ebabb00.fdfd5285.js rel=prefetch><link href=js/3ebacae0.456faf6e.js rel=prefetch><link href=js/3ebad1d9.1d6daa0f.js rel=prefetch><link href=js/3ebb0643.aab65232.js rel=prefetch><link href=js/3ebb0657.d27b66ae.js rel=prefetch><link href=js/3ebb06e0.95a10c5f.js rel=prefetch><link href=js/3ebb8248.1e8bd414.js rel=prefetch><link href=js/3ecd6824.ab165506.js rel=prefetch><link href=js/3ece5315.b66aead6.js rel=prefetch><link href=js/3ece9c14.0f0db7b4.js rel=prefetch><link href=js/4b47640d.d1278a00.js rel=prefetch><link href=js/68acfaa0.c3534299.js rel=prefetch><link href=js/9cc1d7f6.81e973fb.js rel=prefetch><link href=css/app.fe2e3696.css rel=preload as=style><link href=js/app.2719ed2b.js rel=preload as=script><link href=js/runtime.dbb1419e.js rel=preload as=script><link href=js/vendor.ec40544d.js rel=preload as=script><link href=css/app.fe2e3696.css rel=stylesheet></head><body><div id=q-app></div><script type=text/javascript src=js/app.2719ed2b.js></script><script type=text/javascript src=js/runtime.dbb1419e.js></script><script type=text/javascript src=js/vendor.ec40544d.js></script></body></html>
1+
<!DOCTYPE html><html><head><title>Quasar App</title><meta charset=utf-8><meta name=description content="A Quasar Framework app for QMarkdown"><meta name=format-detection content="telephone=no"><meta name=msapplication-tap-highlight content=no><meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><link rel=icon href=statics/quasar-logo.png type=image/x-icon><link rel=icon type=image/png sizes=32x32 href=statics/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=statics/icons/favicon-16x16.png><link href=css/08989596.c28a14a7.css rel=prefetch><link href=css/68acfaa0.3a6cc955.css rel=prefetch><link href=css/9cc1d7f6.b0325cfb.css rel=prefetch><link href=js/08989596.63ce8d90.js rel=prefetch><link href=js/2d0d5fdf.ab27c292.js rel=prefetch><link href=js/2d20f31c.a1f41558.js rel=prefetch><link href=js/2d21adb6.b4cdcb7a.js rel=prefetch><link href=js/3eb6c62d.07d8e8e5.js rel=prefetch><link href=js/3eb766dc.bcc03206.js rel=prefetch><link href=js/3eb7d5d0.ff375b3e.js rel=prefetch><link href=js/3eb8558b.336fa42c.js rel=prefetch><link href=js/3eb88521.c3323a4d.js rel=prefetch><link href=js/3eb8b8ca.055466e1.js rel=prefetch><link href=js/3eb8c0d7.f116f630.js rel=prefetch><link href=js/3eb965b4.3c880384.js rel=prefetch><link href=js/3eb9f08a.064f6176.js rel=prefetch><link href=js/3ebabb00.fdfd5285.js rel=prefetch><link href=js/3ebacae0.456faf6e.js rel=prefetch><link href=js/3ebad1d9.1d6daa0f.js rel=prefetch><link href=js/3ebb0643.aab65232.js rel=prefetch><link href=js/3ebb0657.d27b66ae.js rel=prefetch><link href=js/3ebb06e0.95a10c5f.js rel=prefetch><link href=js/3ebb8248.1e8bd414.js rel=prefetch><link href=js/3ecd6824.ab165506.js rel=prefetch><link href=js/3ece5315.b66aead6.js rel=prefetch><link href=js/3ece9c14.0f0db7b4.js rel=prefetch><link href=js/4b47640d.d1278a00.js rel=prefetch><link href=js/68acfaa0.ac380452.js rel=prefetch><link href=js/9cc1d7f6.81e973fb.js rel=prefetch><link href=css/app.fe2e3696.css rel=preload as=style><link href=js/app.2719ed2b.js rel=preload as=script><link href=js/runtime.9f891ce2.js rel=preload as=script><link href=js/vendor.ec40544d.js rel=preload as=script><link href=css/app.fe2e3696.css rel=stylesheet></head><body><div id=q-app></div><script type=text/javascript src=js/app.2719ed2b.js></script><script type=text/javascript src=js/runtime.9f891ce2.js></script><script type=text/javascript src=js/vendor.ec40544d.js></script></body></html>

‎demo/src/components/MarkdownTypes.vue‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<template>
2+
<q-list dense>
3+
<q-item-label header>Supported Markdown</q-item-label>
4+
<q-item to="/demo/abbreviations" exact>
5+
<q-item-section class="ellipsis">
6+
Abbreviations
7+
</q-item-section>
8+
</q-item>
9+
<q-item to="/demo/blockquotes" exact>
10+
<q-item-section class="ellipsis">
11+
Blockquotes
12+
</q-item-section>
13+
</q-item>
14+
<q-item to="/demo/code" exact>
15+
<q-item-section class="ellipsis">
16+
Code
17+
</q-item-section>
18+
</q-item>
19+
<q-item to="/demo/containers" exact>
20+
<q-item-section class="ellipsis">
21+
Containers
22+
</q-item-section>
23+
</q-item>
24+
<q-item to="/demo/deflists" exact>
25+
<q-item-section class="ellipsis">
26+
Definition Lists
27+
</q-item-section>
28+
</q-item>
29+
<q-item to="/demo/emojies" exact>
30+
<q-item-section class="ellipsis">
31+
Emojies
32+
</q-item-section>
33+
</q-item>
34+
<q-item to="/demo/emphasis" exact>
35+
<q-item-section class="ellipsis">
36+
Emphasis
37+
</q-item-section>
38+
</q-item>
39+
<q-item to="/demo/footnotes" exact>
40+
<q-item-section class="ellipsis">
41+
Footnotes
42+
</q-item-section>
43+
</q-item>
44+
<q-item to="/demo/heading" exact>
45+
<q-item-section class="ellipsis">
46+
Heading
47+
</q-item-section>
48+
</q-item>
49+
<q-item to="/demo/rules" exact>
50+
<q-item-section class="ellipsis">
51+
Horizontal Rules
52+
</q-item-section>
53+
</q-item>
54+
<q-item to="/demo/images" exact>
55+
<q-item-section class="ellipsis">
56+
Images
57+
</q-item-section>
58+
</q-item>
59+
<q-item to="/demo/insert" exact>
60+
<q-item-section class="ellipsis">
61+
Insert
62+
</q-item-section>
63+
</q-item>
64+
<q-item to="/demo/links" exact>
65+
<q-item-section class="ellipsis">
66+
Links
67+
</q-item-section>
68+
</q-item>
69+
<q-item to="/demo/lists" exact>
70+
<q-item-section class="ellipsis">
71+
Lists
72+
</q-item-section>
73+
</q-item>
74+
<q-item to="/demo/mark" exact>
75+
<q-item-section class="ellipsis">
76+
Mark
77+
</q-item-section>
78+
</q-item>
79+
<q-item to="/demo/subsuper" exact>
80+
<q-item-section class="ellipsis">
81+
Subscript/Superscript
82+
</q-item-section>
83+
</q-item>
84+
<q-item to="/demo/tables" exact>
85+
<q-item-section class="ellipsis">
86+
Tables
87+
</q-item-section>
88+
</q-item>
89+
<q-item to="/demo/tasklists" exact>
90+
<q-item-section class="ellipsis">
91+
Task Lists
92+
</q-item-section>
93+
</q-item>
94+
<q-item to="/demo/titles" exact>
95+
<q-item-section class="ellipsis">
96+
Titles
97+
</q-item-section>
98+
</q-item>
99+
<q-item to="/demo/typographic" exact>
100+
<q-item-section class="ellipsis">
101+
Typographic
102+
</q-item-section>
103+
</q-item>
104+
<q-item to="/demo/editor" exact>
105+
<q-item-section class="ellipsis">
106+
Editor
107+
</q-item-section>
108+
</q-item>
109+
</q-list>
110+
</template>
111+
112+
<script>
113+
export default {
114+
name: 'Menu',
115+
data () {
116+
return {}
117+
}
118+
}
119+
</script>
120+
121+
<style>
122+
</style>

‎demo/src/layouts/MarkdownLayout.vue‎

Lines changed: 8 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<q-layout view="HHh Lpr lFf">
3-
<q-header elevated class="glossy">
2+
<q-layout view="HHh LpR fFf">
3+
<q-header elevated>
44
<q-toolbar>
55
<q-btn
66
flat
@@ -26,65 +26,9 @@
2626
<q-drawer
2727
v-model="leftDrawerOpen"
2828
bordered
29-
content-class="bg-grey-2"
29+
content-style="background-color: #f8f8ff"
3030
>
31-
<q-list>
32-
<q-item-label header>Essential Links</q-item-label>
33-
<q-item clickable tag="a" target="_blank" href="http://v1.quasar-framework.org">
34-
<q-item-section avatar>
35-
<q-icon name="school" />
36-
</q-item-section>
37-
<q-item-section>
38-
<q-item-label>Docs</q-item-label>
39-
<q-item-label caption>v1.quasar-framework.org</q-item-label>
40-
</q-item-section>
41-
</q-item>
42-
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
43-
<q-item-section avatar>
44-
<q-icon name="code" />
45-
</q-item-section>
46-
<q-item-section>
47-
<q-item-label>Github</q-item-label>
48-
<q-item-label caption>github.com/quasarframework</q-item-label>
49-
</q-item-section>
50-
</q-item>
51-
<q-item clickable tag="a" target="_blank" href="http://chat.quasar-framework.org">
52-
<q-item-section avatar>
53-
<q-icon name="chat" />
54-
</q-item-section>
55-
<q-item-section>
56-
<q-item-label>Discord Chat Channel</q-item-label>
57-
<q-item-label caption>chat.quasar-framework.org</q-item-label>
58-
</q-item-section>
59-
</q-item>
60-
<q-item clickable tag="a" target="_blank" href="https://forum.quasar-framework.org">
61-
<q-item-section avatar>
62-
<q-icon name="record_voice_over" />
63-
</q-item-section>
64-
<q-item-section>
65-
<q-item-label>Forum</q-item-label>
66-
<q-item-label caption>forum.quasar-framework.org</q-item-label>
67-
</q-item-section>
68-
</q-item>
69-
<q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
70-
<q-item-section avatar>
71-
<q-icon name="rss_feed" />
72-
</q-item-section>
73-
<q-item-section>
74-
<q-item-label>Twitter</q-item-label>
75-
<q-item-label caption>@quasarframework</q-item-label>
76-
</q-item-section>
77-
</q-item>
78-
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/app-extension-qmarkdown">
79-
<q-item-section avatar>
80-
<q-icon name="bolt" />
81-
</q-item-section>
82-
<q-item-section>
83-
<q-item-label>QMarkdown home</q-item-label>
84-
<q-item-label caption>@quasar/qmarkdown</q-item-label>
85-
</q-item-section>
86-
</q-item>
87-
</q-list>
31+
<markdown-types />
8832
</q-drawer>
8933

9034
<q-page-container>
@@ -95,9 +39,13 @@
9539

9640
<script>
9741
import { openURL } from 'quasar'
42+
import MarkdownTypes from '../components/MarkdownTypes'
9843
9944
export default {
10045
name: 'MarkdownLayout',
46+
components: {
47+
MarkdownTypes
48+
},
10149
data () {
10250
return {
10351
leftDrawerOpen: this.$q.platform.is.desktop

0 commit comments

Comments
 (0)