vp-demo.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <script setup lang="ts">
  2. import { computed, getCurrentInstance, ref, toRef } from 'vue'
  3. import { isClient, useClipboard, useStorage, useToggle } from '@vueuse/core'
  4. import { App, Divider, Tooltip, theme } from 'ant-design-vue'
  5. import { XProvider } from 'ant-design-x-vue'
  6. import { CaretUpFilled, CodepenOutlined, ThunderboltOutlined, FunctionOutlined } from '@ant-design/icons-vue'
  7. // import { useLang } from '../composables/lang'
  8. import { useSourceCode } from '../composables/source-code'
  9. import { usePlayground } from '../composables/use-playground'
  10. // import demoBlockLocale from '../../i18n/component/demo-block.json'
  11. import SourceCode from './demo/vp-source-code.vue'
  12. import { useData } from 'vitepress'
  13. const props = defineProps<{
  14. source: string
  15. sourceSetup: string
  16. path: string
  17. rawSource: string
  18. rawSourceSetup: string
  19. description: string
  20. title: string
  21. }>()
  22. const vm = getCurrentInstance()!
  23. const prefer = useStorage('antdx-docs-preference', 'tsx');
  24. const { isDark } = useData()
  25. const algorithm = computed(() => isDark.value ? theme.darkAlgorithm : theme.defaultAlgorithm)
  26. const { copy, isSupported } = useClipboard({
  27. source: () => decodeURIComponent(prefer.value === 'tsx' ? props.rawSource : props.rawSourceSetup),
  28. read: false,
  29. })
  30. const [sourceVisible, toggleSourceVisible] = useToggle()
  31. // const lang = useLang()
  32. const demoSourceUrl = useSourceCode(toRef(props, 'path'))
  33. const sourceCodeRef = ref<HTMLButtonElement>()
  34. // const locale = computed(() => demoBlockLocale[lang.value])
  35. const locale = computed(() => ({}));
  36. const decodedDescription = computed(() => decodeURIComponent(props.description))
  37. const { onStackblitzPlayBtnClick } = usePlayground({
  38. title: props.title,
  39. rawSource: () => prefer.value === 'tsx' ? props.rawSource : props.rawSourceSetup,
  40. path: props.path,
  41. })
  42. const onSourceVisibleKeydown = (e: KeyboardEvent) => {
  43. if (['Enter', 'Space'].includes(e.code)) {
  44. e.preventDefault()
  45. toggleSourceVisible(false)
  46. sourceCodeRef.value?.focus()
  47. }
  48. }
  49. const copyCode = async () => {
  50. const { $message } = vm.appContext.config.globalProperties
  51. if (!isSupported) {
  52. // $message.error(locale.value['copy-error'])
  53. }
  54. try {
  55. await copy()
  56. // $message.success(locale.value['copy-success'])
  57. } catch (e: any) {
  58. // $message.error(e.message)
  59. }
  60. }
  61. </script>
  62. <template>
  63. <!-- danger here DO NOT USE INLINE SCRIPT TAG -->
  64. <!-- <div style="margin-top: 16px; margin-bottom: 16px;" v-html="decodedDescription" /> -->
  65. <XProvider :theme="{
  66. algorithm,
  67. }">
  68. <div class="example">
  69. <div class="example-showcase">
  70. <template v-if="prefer === 'tsx'">
  71. <slot name="source" />
  72. </template>
  73. <template v-if="prefer === 'setup'">
  74. <slot name="source-setup" />
  75. </template>
  76. </div>
  77. <!-- <Divider style="margin: 0;" /> -->
  78. <!-- <div class="op-btns"> -->
  79. <!-- <Tooltip>
  80. <template #title>在 Stackblitz 中打开</template>
  81. <ThunderboltOutlined tabindex="0" role="link" class="op-btn" @click="onStackblitzPlayBtnClick"
  82. @keydown.prevent.enter="onStackblitzPlayBtnClick" @keydown.prevent.space="onStackblitzPlayBtnClick" />
  83. </Tooltip> -->
  84. <!-- <Tooltip>
  85. <template #title>在 CodePen 中打开</template>
  86. <CodepenOutlined
  87. tabindex="0"
  88. role="link"
  89. class="op-btn"
  90. @click="onPlaygroundClick"
  91. @keydown.prevent.enter="onPlaygroundClick"
  92. @keydown.prevent.space="onPlaygroundClick"
  93. />
  94. </Tooltip> -->
  95. <!-- <Tooltip>
  96. <template #title>查看源代码</template>
  97. <button ref="sourceCodeRef" :aria-label="sourceVisible ? '隐藏源代码' : '查看源代码'
  98. " class="op-btn" @click="toggleSourceVisible()">
  99. <FunctionOutlined />
  100. </button>
  101. </Tooltip> -->
  102. <!-- </div> -->
  103. <Transition name="fade-in-linear">
  104. <SourceCode :visible="sourceVisible" :source="prefer === 'tsx' ? source : sourceSetup" />
  105. </Transition>
  106. <Transition name="fade-in-linear">
  107. <div v-show="sourceVisible" class="example-float-control" tabindex="0" role="button"
  108. @click="toggleSourceVisible(false)" @keydown="onSourceVisibleKeydown">
  109. <CaretUpFilled />
  110. <span>隐藏源代码</span>
  111. </div>
  112. </Transition>
  113. </div>
  114. </XProvider>
  115. </template>
  116. <style lang="scss">
  117. // reset vitepress style
  118. .example {
  119. .example-showcase {
  120. ul {
  121. list-style: none;
  122. }
  123. }
  124. }
  125. </style>
  126. <style scoped lang="scss">
  127. .example {
  128. // border: 1px solid var(--vp-border-color);
  129. border-radius: 8px;
  130. .example-showcase {
  131. padding: 1.5rem;
  132. margin: 0.5px;
  133. :deep(table) {
  134. margin: 0;
  135. tr {
  136. border: unset;
  137. background-color: unset;
  138. td {
  139. border: unset;
  140. }
  141. }
  142. }
  143. }
  144. .op-btns {
  145. padding: 0.5rem;
  146. display: flex;
  147. align-items: center;
  148. justify-content: flex-end;
  149. height: 2.5rem;
  150. .op-btn {
  151. margin: 0 0.5rem;
  152. cursor: pointer;
  153. transition: 0.2s;
  154. }
  155. }
  156. &-float-control {
  157. display: flex;
  158. align-items: center;
  159. justify-content: center;
  160. border-top: 1px solid var(--vp-border-color);
  161. height: 44px;
  162. box-sizing: border-box;
  163. border-bottom-left-radius: 4px;
  164. border-bottom-right-radius: 4px;
  165. margin-top: -1px;
  166. cursor: pointer;
  167. position: sticky;
  168. left: 0;
  169. right: 0;
  170. bottom: 0;
  171. z-index: 10;
  172. span {
  173. font-size: 14px;
  174. margin-left: 10px;
  175. }
  176. }
  177. }
  178. .fade-in-linear-enter-active,
  179. .fade-in-linear-leave-active {
  180. transition: opacity 0.2s linear;
  181. }
  182. .fade-in-linear-enter-from,
  183. .fade-in-linear-leave-to {
  184. opacity: 0;
  185. }
  186. </style>