@varlet/cli 2.0.0-alpha.1663499244572 → 2.0.0-alpha.1664031123039

package/site/components/cell/cell.less

@@ -1,78 +1,78 @@
-@site-cell-color: var(--site-color-text);
-@site-cell-font-size: var(--site-font-size-md);
-@site-cell-description-font-size: var(--site-font-size-sm);
-@site-cell-description-color: rgba(0, 0, 0, 0.6);
-@site-cell-padding: 10px 12px;
-@site-cell-min-height: 40px;
-@site-cell-border-color: #bcc2cb;
-@site-cell-border-left: 12px;
-@site-cell-border-right: 12px;
-@site-cell-icon-right: 8px;
-@site-cell-extra-left: 8px;
-
-:root {
-  --site-cell-color: @site-cell-color;
-  --site-cell-font-size: @site-cell-font-size;
-  --site-cell-description-font-size: @site-cell-description-font-size;
-  --site-cell-description-color: @site-cell-description-color;
-  --site-cell-padding: @site-cell-padding;
-  --site-cell-min-height: @site-cell-min-height;
-  --site-cell-border-color: @site-cell-border-color;
-  --site-cell-border-left: @site-cell-border-left;
-  --site-cell-border-right: @site-cell-border-right;
-  --site-cell-icon-right: @site-cell-icon-right;
-  --site-cell-extra-left: @site-cell-extra-left;
-}
-
-.var-site-cell {
-  align-items: center;
-  display: flex;
-  min-height: var(--site-cell-min-height);
-  outline: none;
-  width: 100%;
-  padding: var(--site-cell-padding);
-  position: relative;
-  box-sizing: border-box;
-  font-size: var(--site-cell-font-size);
-  color: var(--site-cell-color);
-
-  &--border {
-    &::after {
-      position: absolute;
-      box-sizing: border-box;
-      content: ' ';
-      pointer-events: none;
-      right: var(--site-cell-border-right);
-      bottom: 0;
-      left: var(--site-cell-border-left);
-      border-bottom: 1px solid var(--site-cell-border-color);
-      transform: scaleY(0.5);
-    }
-  }
-
-  &__icon {
-    margin-right: var(--site-cell-icon-right);
-    flex: 0;
-  }
-
-  &__content {
-    flex: 1;
-    overflow: hidden;
-  }
-
-  &__title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__description {
-    font-size: var(--site-cell-description-font-size);
-    color: var(--site-cell-description-color);
-  }
-
-  &__extra {
-    flex: 0;
-    margin-left: var(--site-cell-extra-left);
-  }
-}
+@site-cell-color: var(--site-color-text);
+@site-cell-font-size: var(--site-font-size-md);
+@site-cell-description-font-size: var(--site-font-size-sm);
+@site-cell-description-color: rgba(0, 0, 0, 0.6);
+@site-cell-padding: 10px 12px;
+@site-cell-min-height: 40px;
+@site-cell-border-color: #bcc2cb;
+@site-cell-border-left: 12px;
+@site-cell-border-right: 12px;
+@site-cell-icon-right: 8px;
+@site-cell-extra-left: 8px;
+
+:root {
+  --site-cell-color: @site-cell-color;
+  --site-cell-font-size: @site-cell-font-size;
+  --site-cell-description-font-size: @site-cell-description-font-size;
+  --site-cell-description-color: @site-cell-description-color;
+  --site-cell-padding: @site-cell-padding;
+  --site-cell-min-height: @site-cell-min-height;
+  --site-cell-border-color: @site-cell-border-color;
+  --site-cell-border-left: @site-cell-border-left;
+  --site-cell-border-right: @site-cell-border-right;
+  --site-cell-icon-right: @site-cell-icon-right;
+  --site-cell-extra-left: @site-cell-extra-left;
+}
+
+.var-site-cell {
+  align-items: center;
+  display: flex;
+  min-height: var(--site-cell-min-height);
+  outline: none;
+  width: 100%;
+  padding: var(--site-cell-padding);
+  position: relative;
+  box-sizing: border-box;
+  font-size: var(--site-cell-font-size);
+  color: var(--site-cell-color);
+
+  &--border {
+    &::after {
+      position: absolute;
+      box-sizing: border-box;
+      content: ' ';
+      pointer-events: none;
+      right: var(--site-cell-border-right);
+      bottom: 0;
+      left: var(--site-cell-border-left);
+      border-bottom: 1px solid var(--site-cell-border-color);
+      transform: scaleY(0.5);
+    }
+  }
+
+  &__icon {
+    margin-right: var(--site-cell-icon-right);
+    flex: 0;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__description {
+    font-size: var(--site-cell-description-font-size);
+    color: var(--site-cell-description-color);
+  }
+
+  &__extra {
+    flex: 0;
+    margin-left: var(--site-cell-extra-left);
+  }
+}

package/site/components/cell/index.ts

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

package/site/components/cell/props.ts

@@ -1,27 +1,27 @@
-export const props = {
-  title: {
-    type: [Number, String],
-  },
-  icon: {
-    type: String,
-  },
-  description: {
-    type: String,
-  },
-  border: {
-    type: Boolean,
-    default: false,
-  },
-  iconClass: {
-    type: String,
-  },
-  titleClass: {
-    type: String,
-  },
-  descriptionClass: {
-    type: String,
-  },
-  extraClass: {
-    type: String,
-  },
-}
+export const props = {
+  title: {
+    type: [Number, String],
+  },
+  icon: {
+    type: String,
+  },
+  description: {
+    type: String,
+  },
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  iconClass: {
+    type: String,
+  },
+  titleClass: {
+    type: String,
+  },
+  descriptionClass: {
+    type: String,
+  },
+  extraClass: {
+    type: String,
+  },
+}

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

@@ -1,137 +1,137 @@
-<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>
+<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,21 +1,21 @@
-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)
+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)