Merge pull request #51 from vuejs-br/update-codepen-snippet

Update "codepen-snippet.vue"

Author: GuiDevloper

src/.vuepress/components/common/codepen-snippet.vue

@@ -1,48 +1,99 @@
 <template>
- <p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-preview="true" data-editable="true"
- :data-user="user.slug"
- :data-slug-hash="slug"
- :data-pen-title="title">
- <span>Veja o exemplo <a :href="`https://codepen.io/${user.slug}/pen/${slug}`">
- {{ title }}</a> por {{ user.name }} (<a :href="`https://codepen.io/${user.slug}`">@${user.slug}</a>)
- no <a href="https://codepen.io">CodePen</a>.</span>
+ <p
+ class="codepen"
+ :data-theme-id="theme"
+ :data-preview="preview || null"
+ :data-editable="editable || null"
+ :data-height="height"
+ :data-default-tab="tab"
+ :data-user="user"
+ :data-slug-hash="slug"
+ :data-pen-title="title"
+ :data-embed-version="version"
+ :style="`height: ${height}px`">
+ <span>See the Pen <a :href="href">{{ title }}</a>
+ by {{ name || user }} (<a :href="`https://codepen.io/${user}`">@{{user}}</a>)
+ on <a href="https://codepen.io">CodePen</a>.</span>
  </p>
 </template>
 
 <script>
 export default {
  props: {
- user: {
- type: Object,
- default: () => ({
- slug: 'vuejs-br',
- name: 'Vue.js Brasil'
- }),
- },
-
  title: {
  type: String,
  default: null,
+ required: true,
  },
 
  slug: {
  type: String,
  default: null,
+ required: true,
+ },
+
+ tab: {
+ type: String,
+ default: 'result',
+ },
+
+ team: {
+ type: Boolean,
+ default: true,
+ },
+
+ user: {
+ type: String,
+ default: 'Vue',
+ },
+
+ name: {
+ type: String,
+ default: null,
+ },
+
+ height: {
+ type: Number,
+ default: 300,
+ },
+
+ theme: {
+ type: String,
+ default: '39028',
+ },
+
+ preview: {
+ type: Boolean,
+ default: true,
  },
+
+ editable: {
+ type: Boolean,
+ default: true,
+ },
+
+ version: {
+ type: String,
+ default: null,
+ }
  },
  mounted() {
  const codepenScript = document.createElement('script')
  codepenScript.setAttribute('src', 'https://static.codepen.io/assets/embed/ei.js')
  codepenScript.async = true
  this.$el.appendChild(codepenScript)
- }
+ },
+ computed: {
+ href() {
+ return `https://codepen.io/${this.team ? 'team' : ''}${this.user}/pen/${this.slug}`
+ }
+ },
 }
 </script>
 
 <style lang="scss">
 .codepen {
  box-sizing: border-box;
- height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;