Skip to content

Commit 91169ae

Browse files
pawelphilipczyk-cloudinarypawelphilipczyk-cloudinary
authored
Merge pull request #202 from cloudinary/vue-reference-docs
Vue reference docs
2 parents 2437331 + b560e95 commit 91169ae

4 files changed

Lines changed: 115 additions & 14 deletions

File tree

‎jsdoc.config.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@
44
"dictionaries": ["jsdoc","closure"]
55
},
66
"source": {
7-
"include": ["packages/html/src", "packages/react/src", "packages/angular/projects/cloudinary-library/src"],
8-
"includePattern": ".+\\.ts(doc|x)?$",
7+
"include": ["packages/html/src", "packages/react/src", "packages/angular/projects/cloudinary-library/src", "packages/vue/src"],
8+
"includePattern": ".+\\.(ts|vue)(doc|x)?$",
99
"excludePattern": "(^|\\/|\\\\)_"
1010
},
1111
"plugins": [
1212
"plugins/markdown",
13+
"node_modules/jsdoc-vuejs",
1314
"node_modules/better-docs/typescript"
1415
],
1516
"typescript": {
@@ -34,7 +35,7 @@
3435
"systemLogo": "__DOC_RESOURCES__/navLogo.png",
3536
"systemSummary": "client side packages & plugins",
3637
"favicon": "__DOC_RESOURCES__/favico.png",
37-
"copyright": "Copyright © 2020 Cloudinary.com"
38+
"copyright": "Copyright © 2023 Cloudinary.com"
3839
},
3940
"opts": {
4041
"recurse": true,

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@
1111
"update:urlgen": "npm install @cloudinary/url-gen@latest --prefix packages/html && npm install @cloudinary/url-gen@latest --prefix packages/react && npm install @cloudinary/url-gen@latest --prefix packages/vue && npm install @cloudinary/url-gen@latest --prefix packages/angular && npm install @cloudinary/url-gen@latest --prefix packages/angular/projects/cloudinary-library"
1212
},
1313
"devDependencies": {
14+
"@vue/compiler-sfc": "^3.2.47",
1415
"better-docs": "2.3.2",
1516
"foodoc": "0.0.9",
1617
"jsdoc": "3.6.4",
1718
"jsdoc-plugin-typescript": "2.0.5",
19+
"jsdoc-vuejs": "^4.0.0",
1820
"lerna": "^4.0.0",
1921
"replace-in-file": "^6.2.0",
2022
"typedoc": "^0.17.8"

‎packages/vue/src/components/AdvancedImage.vue‎

Lines changed: 99 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,109 @@
33
<img v-else :src="getSsrSrc()" />
44
</template>
55

6-
<script setup lang="ts">
6+
<script lang="ts">
7+
/**
8+
* @mixin VueSDK
9+
* @description The Cloudinary Vue SDK contains components like \<AdvancedImage\> to easily render your media assets from Cloudinary.
10+
* The SDK also comes with support for optional JS plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness.
11+
*
12+
* @example
13+
* <caption>
14+
* Please note that the order of the plugins is important. See {@link https://cloudinary.com/documentation/sdks/js/frontend-frameworks/index.html#plugin-order|Plugin Order} for more details.
15+
* </caption>
16+
* // AdvancedImage
17+
* <template>
18+
* <div>
19+
* <AdvancedImage :cldImg="cldImg" :plugins="plugins" />
20+
* </div>
21+
* </template>
22+
*
23+
* <script lang="ts">
24+
* import { defineComponent } from 'vue';
25+
* import { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';
26+
* import { AdvancedImage, responsive } from '@cloudinary/vue';
27+
*
28+
* export default defineComponent({
29+
* name: 'App',
30+
* components: {
31+
* AdvancedImage,
32+
* },
33+
* setup(props) {
34+
* const cldImg = new CloudinaryImage(
35+
* 'sample',
36+
* { cloudName: 'demo' },
37+
* { analytics: false }
38+
* );
39+
*
40+
* const plugins = [responsive({ steps: 100 })];
41+
*
42+
* return {
43+
* cldImg,
44+
* plugins,
45+
* };
46+
* },
47+
* });
48+
* </ script>
49+
*
50+
* @example
51+
* <caption>
52+
* Using `AdvancedVideo` custom defined resources.
53+
* </caption>
54+
*
55+
* // AdvancedVideo
56+
* <template>
57+
* <AdvancedVideo :cldVid="cldVid" :sources="sources" controls width="600" />
58+
* </template>
59+
*
60+
* <script lang="ts">
61+
* import { defineComponent } from "vue";
62+
* import { auto } from "@cloudinary/url-gen/qualifiers/videoCodec";
63+
* import { videoCodec } from "@cloudinary/url-gen/actions/transcode";
64+
* import { AdvancedVideo } from "../dist";
65+
* import { CloudinaryVideo } from "@cloudinary/url-gen/assets/CloudinaryVideo";
66+
*
67+
* export default defineComponent({
68+
* name: "App",
69+
* components: {
70+
* AdvancedVideo,
71+
* },
72+
* setup(props) {
73+
* const cldVid = new CloudinaryVideo(
74+
* "dog",
75+
* { cloudName: "demo" },
76+
* { analytics: false }
77+
* );
78+
*
79+
* const sources = [
80+
* {
81+
* type: "mp4",
82+
* transcode: videoCodec(auto()),
83+
* },
84+
* {
85+
* type: "webm",
86+
* transcode: videoCodec(auto()),
87+
* },
88+
* ];
89+
*
90+
* return {
91+
* cldVid,
92+
* sources,
93+
* };
94+
* },
95+
* });
96+
* </ script>
97+
*/
98+
799
/**
8-
* @memberOf CloudinaryVueSDK
9-
* @type {Component}
100+
* @memberOf VueSDK
101+
* @module AdvancedImage
10102
* @description The Cloudinary image component.
11-
* @prop {CloudinaryImage} cldImg Generated by @cloudinary/url-gen
12-
* @prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()
103+
* @vue-prop {CloudinaryImage} cldImg Generated by @cloudinary/url-gen
104+
* @vue-prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()
13105
*/
106+
</script>
14107

108+
<script setup lang="ts">
15109
import { ref, onMounted, onUpdated, onUnmounted } from "vue";
16110
import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
17111
import {

‎packages/vue/src/components/AdvancedVideo.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,20 @@
22
<video ref="videoRef" />
33
</template>
44

5-
<script setup lang="ts">
5+
<script lang="ts">
66
/**
7-
* @memberOf CloudinaryVueSDK
8-
* @type {Component}
7+
* @memberOf VueSDK
8+
* @module AdvancedVideo
99
* @description The Cloudinary video component.
10-
* @prop {CloudinaryVideo} cldVid Generated by @cloudinary/url-gen
11-
* @prop {VideoPoster} cldPoster Generated by @cloudinary/url-gen
12-
* @prop {Plugins} plugins Advanced video component plugins accessibility(), responsive(), lazyload(), placeholder()
10+
*
11+
* @vue-prop {CloudinaryVideo} cldVid Generated by @cloudinary/url-gen
12+
* @vue-prop {VideoPoster} cldPoster Generated by @cloudinary/url-gen
13+
* @vue-prop {Plugins} plugins Advanced video component plugins accessibility(), responsive(), lazyload(), placeholder()
14+
* @vue-prop {VideoSources} sources Optional sources to generate
1315
*/
16+
</script>
1417

18+
<script setup lang="ts">
1519
import { ref, onMounted, onUpdated, onUnmounted } from "vue";
1620
import { CloudinaryVideo } from "@cloudinary/url-gen";
1721
import {

0 commit comments

Comments
 (0)