Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: demo Composition API #2099

Merged
merged 4 commits into from
May 31, 2021
Merged

feat: demo Composition API #2099

merged 4 commits into from
May 31, 2021

Conversation

0song
Copy link
Collaborator

@0song 0song commented May 28, 2021

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow Element's contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

@0song 0song changed the title feat: demo Composition API [WIP] feat: demo Composition API May 28, 2021
@element-bot
Copy link
Member

@0song 0song changed the title [WIP] feat: demo Composition API feat: demo Composition API May 31, 2021
jw-foss
jw-foss reviewed May 31, 2021
View reviewed changes
website/components/demo-block.vue Outdated
class="control-button"
@click.stop="onSwitchSyntax"
>
{{ showSetup? langConfig['switch-button-option-text'] : langConfig['switch-button-setup-text'] }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a space after showSetup

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1

jw-foss
jw-foss reviewed May 31, 2021
View reviewed changes
website/components/demo-block.vue Outdated
if (result.indexOf('<template>') === 0) {
return result.replace(/^<template>/, '').replace(/<\/template>$/,'')
}
return result
}
const sanitizeHTML = str => {
var temp = document.createElement('div')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe using createDocumentFragment API will be better? This is not a mandatory change though.

jw-foss
jw-foss reviewed May 31, 2021
View reviewed changes
website/components/demo-block.vue
Comment on lines +199 to +204
hlcode.innerHTML = sanitizeHTML(`<template>${this.codepen.html}</template>

<script>
${this.displayDemoCode}
${'</sc' + 'ript>'}
`)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we format this code?

@jw-foss
Copy link
Member

jw-foss commented May 31, 2021

cc @XingXiaoWu, Hi, I'd like you to see the example of how to add Composition API demo into ElementPlus.

@XingXiaoWu
Copy link
Contributor

cc @XingXiaoWu, Hi, I'd like you to see the example of how to add Composition API demo into ElementPlus.

It looks like add a button to change Options API or Composition API, you means I can add Composition API in this new way?

@0song
Copy link
Collaborator Author

0song commented May 31, 2021 •
edited

@XingXiaoWu You can check the first demo here https://preview-2099-element-plus.surge.sh/#/zh-CN/component/radio

We have added a new feature to switch demo code between Composition API / Options API

image

And all we have to do is to add a ` block in the demo code like this

<!--
<setup>

our Composition API code here

</setup>
-->

image

@XingXiaoWu
Copy link
Contributor

@XingXiaoWu You can check the first demo here https://preview-2099-element-plus.surge.sh/#/zh-CN/component/radio

We have added a new feature to switch demo code between Composition API / Options API

image

And all we have to do is to add a ` block in the demo code like this

<!--
<setup>

our Composition API code here

</setup>
-->
image

Wow! It's really a good idea! I wiil change the code for Composition API in free time

@jw-foss
Copy link
Member

jw-foss commented May 31, 2021

@XingXiaoWu Thanks! Shout out for @0song for making such a good contribution!

@jw-foss jw-foss merged commit f4c46c9 into dev May 31, 2021
@jw-foss jw-foss deleted the feat/demo-vca branch May 31, 2021 06:31
hanx316 pushed a commit that referenced this pull request Jun 3, 2021
@jw-foss @msidolphin
@0song @cokemine @bastarder @cs1707 @cbbfcd @zouhangwithsweet @Ryan2128
D2M (#2137)
d2809cb 
* fix: hot reload (#2077) (#2097)

Co-authored-by: yangyu8 <yangyu8@kingsoft.com>

* fix: fix popper in dialog isn't enough space to position problem (#2102)

Co-authored-by: yangyu8 <yangyu8@kingsoft.com>

* feat: demo Composition API (#2099)

* feat: demo Composition API

* chore: update

* chore: update

* chore: update

* chore: update radio VCA doc (#2111)

* fix: ImageViewer isLast attribute calculation error issue (#1902) (#2125)

Co-authored-by: yangyu8 <yangyu8@kingsoft.com>

* fix(col): col should hidden when span is zero (#1769)

* fix: tabindex prop type (#2130)

Co-authored-by: Qian Jie <jie.qian@blockheaders.com>

* fix: week translations for hr locale (#2134)

Co-authored-by: wp178491 <wp178491@alibaba-inc.com>

* feat: use built-in throwError function. (#2131)

* feat: use built-in throwError function.

* Update index.vue

* Update index.vue

* feat(build): esbuild for single component build (#2112)

* feat(input): add input-style prop (#2117)

* feat(input): add input-style prop

* test(input): add test case

* fix: Cascader size issue when filterable and multiple are enabled (#2123)

Co-authored-by: yangyu8 <yangyu8@kingsoft.com>

* build(project): release/1-0-2-beta-46 (#2136)

- Update release change log and update release script

Co-authored-by: msidolphin <msidolphin@outlook.com>
Co-authored-by: yangyu8 <yangyu8@kingsoft.com>
Co-authored-by: 0song <82012629+0song@users.noreply.github.com>
Co-authored-by: 神楽坂みずき <45122329+cokemine@users.noreply.github.com>
Co-authored-by: bastarder <85257684@qq.com>
Co-authored-by: Qian Jie <jie.qian@blockheaders.com>
Co-authored-by: 好多大米 <lost1q84@gmail.com>
Co-authored-by: wp178491 <wp178491@alibaba-inc.com>
Co-authored-by: 波比小金刚 <2890636389@qq.com>
Co-authored-by: hangzou <zouhang@didiglobal.com>
Co-authored-by: Ryan2128 <33176053+Ryan2128@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jw-foss jw-foss jw-foss approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@0song @element-bot @jw-foss @XingXiaoWu