@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/components/code-example/CodeExample.vue

@@ -1,143 +1,137 @@
-<template>
-  <div class="var-site-code-example">
-    <div class="var-site-code-example__toolbar">
-      <var-site-button text round @click="toggle" v-if="fold && !disabledFold">
-        <var-site-icon name="xml" size="18" />
-      </var-site-button>
-
-      <var-site-button
-        :id="`clip-trigger-${cid}`"
-        :data-clipboard-target="`#clip-target-${cid}`"
-        text
-        round
-        v-if="clipboard"
-      >
-        <var-site-icon name="content-copy" size="18" />
-      </var-site-button>
-
-      <var-site-button text round @click="toPlayground" v-if="playground">
-        <var-site-icon name="code-json" size="18" />
-      </var-site-button>
-    </div>
-    <div
-      :id="`clip-target-${cid}`"
-      class="var-site-code-example__code"
-      :class="[disabledFold ? 'var-site-code-example--scroller' : null]"
-      ref="code"
-      :style="{
-        height: height >= 0 ? `${height}px` : undefined,
-      }"
-      >
-      <slot/>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import Icon from '../icon'
-import Button from '../button'
-import Snackbar from '../snackbar'
-import Clipboard from 'clipboard'
-import config from '@config'
-import { defineComponent, nextTick, ref, onMounted } from 'vue'
-import { doubleRaf } from '../utils/elements'
-import { get } from 'lodash-es'
-import { getPCLocationInfo, utoa } from '../../utils'
-import type { Ref } from 'vue'
-
-let clipId = 0
-const offset = 10
-
-export default defineComponent({
-  name: 'VarSiteCodeExample',
-  components: {
-    [Button.name]: Button,
-    [Icon.name]: Icon
-  },
-  props: {
-    playgroundIgnore: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const code: Ref<HTMLElement | null> = ref(null)
-    const cid: Ref<number> = ref(clipId++)
-    const fold: Ref = ref(get(config, 'pc.fold'))
-    const disabledFold: Ref<boolean> = ref(false)
-    const clipboard: Ref = ref(get(config, 'pc.clipboard', {}))
-    const height: Ref<number> = ref(-1)
-    const playground: Ref<string | undefined> = ref(!props.playgroundIgnore ? get(config, 'pc.header.playground') : undefined )
-    let timer: any = null
-
-    const toggle = async () => {
-      const foldHeight = fold.value.foldHeight
-
-      if (height.value === foldHeight) {
-        height.value = -1
-        await nextTick()
-        const { offsetHeight } = code.value as HTMLElement
-        height.value = foldHeight
-        await doubleRaf()
-        height.value = offsetHeight
-
-        timer = setTimeout(() => {
-          height.value = -1
-        }, 250)
-      } else {
-        clearTimeout(timer)
-        const { offsetHeight } = code.value as HTMLElement
-        height.value = offsetHeight
-        await doubleRaf()
-        height.value = foldHeight
-      }
-    }
-
-    const toPlayground = () => {
-      const scriptStart = '<script setup>\n'
-      const scriptEnd = '<\/script>'
-      const injectImport = 'import { installVarletUI } from \'./varlet-repl-plugin.js\'\n'
-      const injectCall = '\ninstallVarletUI()\n'
-      let codeText = code.value?.innerText ?? ''
-
-      if (codeText.includes(scriptStart)) {
-        codeText = codeText.replace(scriptStart, `${scriptStart}${injectImport}`)
-        codeText = codeText.replace(scriptEnd, `${injectCall}${scriptEnd}`)
-      } else {
-        codeText = `${scriptStart}${injectImport}${injectCall}<\/script>\n\n${codeText}`
-      }
-
-      const file = { 'App.vue': codeText }
-      window.open(`${playground.value}/#${utoa(JSON.stringify(file))}`)
-    }
-
-    onMounted(() => {
-      const trigger = new Clipboard(`#clip-trigger-${cid.value}`)
-
-      trigger.on('success', () => {
-        Snackbar.success(clipboard.value[getPCLocationInfo().language])
-      })
-
-      const { offsetHeight } = code.value as HTMLElement
-      disabledFold.value = offsetHeight - fold.value.foldHeight < offset
-      height.value = fold.value?.defaultFold ? fold.value?.foldHeight : -1
-    })
-
-    return {
-      code,
-      height,
-      cid,
-      fold,
-      disabledFold,
-      clipboard,
-      playground,
-      toggle,
-      toPlayground
-    }
-  }
-})
-</script>
-
-<style lang="less">
-@import "./codeExample";
-</style>
+<template>
+  <div class="var-site-code-example">
+    <div class="var-site-code-example__toolbar">
+      <var-button text round @click="toggle" v-if="fold && !disabledFold">
+        <var-icon name="xml" size="18" />
+      </var-button>
+
+      <var-button
+        :id="`clip-trigger-${cid}`"
+        :data-clipboard-target="`#clip-target-${cid}`"
+        text
+        round
+        v-if="clipboard"
+      >
+        <var-icon name="content-copy" size="18" />
+      </var-button>
+
+      <var-button text round @click="toPlayground" v-if="playground">
+        <var-icon name="code-json" size="18" />
+      </var-button>
+    </div>
+    <div
+      :id="`clip-target-${cid}`"
+      class="var-site-code-example__code"
+      :class="[disabledFold ? 'var-site-code-example--scroller' : null]"
+      ref="code"
+      :style="{
+        height: height >= 0 ? `${height}px` : undefined,
+      }"
+      >
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Icon from '../icon'
+import Button from '../button'
+import Snackbar from '../snackbar'
+import Clipboard from 'clipboard'
+import context from '../context'
+import config from '@config'
+import { defineComponent, nextTick, ref, onMounted } from 'vue'
+import { doubleRaf } from '../utils/elements'
+import { get } from 'lodash-es'
+import { getBrowserTheme, getPCLocationInfo, utoa } from "../../utils";
+import type { Ref } from 'vue'
+
+let clipId = 0
+const offset = 10
+
+export default defineComponent({
+  name: 'VarSiteCodeExample',
+  components: {
+    [Button.name]: Button,
+    [Icon.name]: Icon
+  },
+  props: {
+    playgroundIgnore: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const code: Ref<HTMLElement | null> = ref(null)
+    const cid: Ref<number> = ref(clipId++)
+    const fold: Ref = ref(get(config, 'pc.fold'))
+    const disabledFold: Ref<boolean> = ref(false)
+    const clipboard: Ref = ref(get(config, 'pc.clipboard', {}))
+    const height: Ref<number> = ref(-1)
+    const playground: Ref<string | undefined> = ref(!props.playgroundIgnore ? get(config, 'pc.header.playground') : undefined )
+    let timer: any = null
+
+    const toggle = async () => {
+      const foldHeight = fold.value.foldHeight
+
+      if (height.value === foldHeight) {
+        height.value = -1
+        await nextTick()
+        const { offsetHeight } = code.value as HTMLElement
+        height.value = foldHeight
+        await doubleRaf()
+        height.value = offsetHeight
+
+        timer = setTimeout(() => {
+          height.value = -1
+        }, 250)
+      } else {
+        clearTimeout(timer)
+        const { offsetHeight } = code.value as HTMLElement
+        height.value = offsetHeight
+        await doubleRaf()
+        height.value = foldHeight
+      }
+    }
+
+    const toPlayground = () => {
+      const codeText = code.value?.innerText ?? ''
+
+      const file = { 'App.vue': codeText }
+
+      const initialTheme = getBrowserTheme().replace('Theme', '')
+
+      context.showPlayground = true
+      context.playgroundURL = `${playground.value}/?initialTheme=${initialTheme}#${utoa(JSON.stringify(file))}`
+    }
+
+    onMounted(() => {
+      const trigger = new Clipboard(`#clip-trigger-${cid.value}`)
+
+      trigger.on('success', () => {
+        Snackbar.success(clipboard.value[getPCLocationInfo().language])
+      })
+
+      const { offsetHeight } = code.value as HTMLElement
+      disabledFold.value = offsetHeight - fold.value.foldHeight < offset
+      height.value = fold.value?.defaultFold ? fold.value?.foldHeight : -1
+    })
+
+    return {
+      code,
+      height,
+      cid,
+      fold,
+      disabledFold,
+      clipboard,
+      playground,
+      toggle,
+      toPlayground
+    }
+  }
+})
+</script>
+
+<style lang="less">
+@import "./codeExample";
+</style>

package/site/components/code-example/codeExample.less

@@ -1,41 +1,41 @@
-.var-site-code-example {
-  margin-top: 16px;
-  margin-bottom: 4px;
-  position: relative;
-  border: thin solid var(--site-config-color-hl-border);
-  border-radius: 4px;
-  transition: border .25s;
-
-  &:hover {
-    .var-site-code-example__toolbar {
-      opacity: 1;
-    }
-  }
-
-  &__toolbar {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    z-index: 1;
-    right: 10px;
-    top: 10px;
-    opacity: 0;
-    transition: .25s all;
-
-    button {
-      color: var(--site-config-color-hl-code) !important;
-    }
-  }
-
-  &__code {
-    transition: all .25s;
-    overflow: hidden;
-    border-radius: 4px;
-  }
-
-  &--scroller {
-    code {
-      white-space: nowrap;
-    }
-  }
-}
+.var-site-code-example {
+  margin-top: 16px;
+  margin-bottom: 4px;
+  position: relative;
+  border: thin solid var(--site-config-color-hl-border);
+  border-radius: 4px;
+  transition: border .25s;
+
+  &:hover {
+    .var-site-code-example__toolbar {
+      opacity: 1;
+    }
+  }
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    z-index: 1;
+    right: 10px;
+    top: 10px;
+    opacity: 0;
+    transition: .25s all;
+
+    button {
+      color: var(--site-config-color-hl-code) !important;
+    }
+  }
+
+  &__code {
+    transition: all .25s;
+    overflow: hidden;
+    border-radius: 4px;
+  }
+
+  &--scroller {
+    code {
+      white-space: nowrap;
+    }
+  }
+}

package/site/components/code-example/index.ts

@@ -1,10 +1,10 @@
-import type { App } from 'vue'
-import CodeExample from './CodeExample.vue'
-
-CodeExample.install = function (app: App) {
-  app.component(CodeExample.name, CodeExample)
-}
-
-export const _CodeExampleComponent = CodeExample
-
-export default CodeExample
+import type { App } from 'vue'
+import CodeExample from './CodeExample.vue'
+
+CodeExample.install = function (app: App) {
+  app.component(CodeExample.name, CodeExample)
+}
+
+export const _CodeExampleComponent = CodeExample
+
+export default CodeExample

package/site/components/context/index.ts

@@ -1,17 +1,21 @@
-import { reactive } from 'vue'
-
-interface Context {
-  locks: Record<any, number>
-  zIndex: number
-  touchmoveForbid: boolean
-}
-
-const context: Context = {
-  locks: {},
-  zIndex: 2000,
-  touchmoveForbid: true,
-}
-
-export const _ContextComponent = reactive<Context>(context)
-
-export default reactive<Context>(context)
+import { reactive } from 'vue'
+
+interface Context {
+  locks: Record<any, number>
+  zIndex: number
+  touchmoveForbid: boolean
+  showPlayground: boolean,
+  playgroundURL: string
+}
+
+const context: Context = {
+  locks: {},
+  zIndex: 2000,
+  touchmoveForbid: true,
+  showPlayground: false,
+  playgroundURL: ''
+}
+
+export const _ContextComponent = reactive<Context>(context)
+
+export default reactive<Context>(context)

package/site/components/context/lock.ts

@@ -1,103 +1,92 @@
-import { watch, onBeforeMount, onUnmounted, onDeactivated, onActivated, getCurrentInstance } from 'vue'
-import type { ComponentInternalInstance } from 'vue'
-import context from '.'
-
-export function resolveLock() {
-  const lockCounts: number = Object.keys(context.locks).length
-  lockCounts <= 0 ? document.body.classList.remove('var-site--lock') : document.body.classList.add('var-site--lock')
-}
-
-export function addLock(uid: number) {
-  context.locks[uid] = 1
-  resolveLock()
-}
-
-export function releaseLock(uid: number) {
-  delete context.locks[uid]
-  resolveLock()
-}
-
-/**
- * 组件锁操作
- * @param props 组件props
- * @param state 组件props中控制组件加锁的开关对应的key值
- * @param use 组件props中控制组件加锁的开关是否可用对应的key值
- */
-export function useLock(props: any, state: string, use?: string) {
-  const { uid } = getCurrentInstance() as ComponentInternalInstance
-  if (use) {
-    watch(
-      () => props[use],
-      (newValue: boolean) => {
-        if (newValue === false) {
-          // 改变为禁用状态 组件解锁
-          releaseLock(uid)
-        } else if (newValue === true && props[state] === true) {
-          // 改变为启用状态 并且popup处于开启状态 组件加锁
-          addLock(uid)
-        }
-      }
-    )
-  }
-
-  watch(
-    () => props[state],
-    (newValue: boolean) => {
-      if (use && props[use] === false) {
-        return
-      }
-
-      if (newValue === true) {
-        // popup开启 组件加锁
-        addLock(uid)
-      } else {
-        // popup关闭 组件解锁
-        releaseLock(uid)
-      }
-    }
-  )
-
-  onBeforeMount(() => {
-    if (use && props[use] === false) {
-      return
-    }
-
-    if (props[state] === true) {
-      // popup处于开启状态 组件挂载 组件加锁
-      addLock(uid)
-    }
-  })
-
-  onUnmounted(() => {
-    if (use && props[use] === false) {
-      return
-    }
-
-    if (props[state] === true) {
-      // popup处于开启状态 组件卸载 组件解锁
-      releaseLock(uid)
-    }
-  })
-
-  onActivated(() => {
-    if (use && props[use] === false) {
-      return
-    }
-
-    if (props[state] === true) {
-      // popup处于开启状态 组件处于keepalive前台 组件加锁
-      addLock(uid)
-    }
-  })
-
-  onDeactivated(() => {
-    if (use && props[use] === false) {
-      return
-    }
-
-    if (props[state] === true) {
-      // popup处于开启状态 组件处于keepalive后台 组件解锁
-      releaseLock(uid)
-    }
-  })
-}
+import { watch, onBeforeMount, onUnmounted, onDeactivated, onActivated, getCurrentInstance } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+import context from '.'
+
+export function resolveLock() {
+  const lockCounts: number = Object.keys(context.locks).length
+  lockCounts <= 0 ? document.body.classList.remove('var-site--lock') : document.body.classList.add('var-site--lock')
+}
+
+export function addLock(uid: number) {
+  context.locks[uid] = 1
+  resolveLock()
+}
+
+export function releaseLock(uid: number) {
+  delete context.locks[uid]
+  resolveLock()
+}
+
+export function useLock(source: any, useSource?: any) {
+  const { uid } = getCurrentInstance() as ComponentInternalInstance
+
+  if (useSource) {
+    watch(useSource, (newValue: boolean) => {
+      if (newValue === false) {
+        // 改变为禁用状态 组件解锁
+        releaseLock(uid)
+      } else if (newValue === true && source() === true) {
+        // 改变为启用状态 并且popup处于开启状态 组件加锁
+        addLock(uid)
+      }
+    })
+  }
+
+  watch(source, (newValue: boolean) => {
+    if (useSource && useSource() === false) {
+      return
+    }
+
+    if (newValue === true) {
+      // popup开启 组件加锁
+      addLock(uid)
+    } else {
+      // popup关闭 组件解锁
+      releaseLock(uid)
+    }
+  })
+
+  onBeforeMount(() => {
+    if (useSource && useSource() === false) {
+      return
+    }
+
+    if (source() === true) {
+      // popup处于开启状态 组件挂载 组件加锁
+      addLock(uid)
+    }
+  })
+
+  onUnmounted(() => {
+    if (useSource && useSource() === false) {
+      return
+    }
+
+    if (source() === true) {
+      // popup处于开启状态 组件卸载 组件解锁
+      releaseLock(uid)
+    }
+  })
+
+  onActivated(() => {
+    if (useSource && useSource() === false) {
+      return
+    }
+
+    if (source() === true) {
+      // popup处于开启状态 组件处于keepalive前台 组件加锁
+      addLock(uid)
+    }
+  })
+
+  onDeactivated(() => {
+    if (useSource && useSource() === false) {
+      return
+    }
+
+    if (source() === true) {
+      // popup处于开启状态 组件处于keepalive后台 组件解锁
+      releaseLock(uid)
+    }
+  })
+}

package/site/components/context/zIndex.ts

@@ -1,20 +1,20 @@
-import context from './index'
-import { watch, ref } from 'vue'
-import type { Ref } from 'vue'
-
-export function useZIndex(source: any, count: number) {
-  const zIndex: Ref<number> = ref(context.zIndex)
-
-  watch(
-    source,
-    (newValue) => {
-      if (newValue) {
-        context.zIndex += count
-        zIndex.value = context.zIndex
-      }
-    },
-    { immediate: true }
-  )
-
-  return { zIndex }
-}
+import context from './index'
+import { watch, ref } from 'vue'
+import type { Ref } from 'vue'
+
+export function useZIndex(source: any, count: number) {
+  const zIndex: Ref<number> = ref(context.zIndex)
+
+  watch(
+    source,
+    (newValue) => {
+      if (newValue) {
+        context.zIndex += count
+        zIndex.value = context.zIndex
+      }
+    },
+    { immediate: true }
+  )
+
+  return { zIndex }
+}