@varlet/cli 1.23.8 → 1.24.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.24.0](https://github.com/haoziqaq/varlet/compare/v1.23.11...v1.24.0) (2021-12-27)
+
+
+### Bug Fixes
+
+* **cli/site:** adjust z-index of the sidebar and code toolbar for site ([5b81918](https://github.com/haoziqaq/varlet/commit/5b8191822305e5a485003223d3109a6554b33251))
+* **site:** modify code example style ([bb33910](https://github.com/haoziqaq/varlet/commit/bb3391008bdafbf052b8485b79bb54270ca27771))
+* fix test fail ([78f20ec](https://github.com/haoziqaq/varlet/commit/78f20ec46bea357fd12c1da68b02ce7dc9cc2918))
+* **cli:** fix icon vertical-align ([f015092](https://github.com/haoziqaq/varlet/commit/f0150923b9d33c6f61c9810887ea294015a35621))
+* **site:** add types ([6520984](https://github.com/haoziqaq/varlet/commit/6520984af6eb13b772783540aa72427cf1e4403e))
+* **site:** fix mobile style ([3189225](https://github.com/haoziqaq/varlet/commit/31892257a3611e2c6fa39d01cd0d87d4cc2d5ebb))
+
+
+### Features
+
+* **cli:** add clipboard and fold tool for site ([5298c99](https://github.com/haoziqaq/varlet/commit/5298c996a6ea890ee29c01c254704f06d157df4c))
+
+
+### Reverts
+
+* revert fix mobile style ([22d9da9](https://github.com/haoziqaq/varlet/commit/22d9da9beaf88fa1a29394bc07141e5ec3355c42))
+
+
+
+
+
+## [1.23.11](https://github.com/haoziqaq/varlet/compare/v1.23.10...v1.23.11) (2021-12-10)
+
+**Note:** Version bump only for package @varlet/cli
+
+
+
+
+
 ## [1.23.8](https://github.com/haoziqaq/varlet/compare/v1.23.7...v1.23.8) (2021-11-24)
 
 

package/generators/{tsx → base}/.prettierignore

@@ -3,6 +3,5 @@ es/**
 umd/**
 site/**
 public/**
-src/*/__tests__/**
 *.md
 

package/lib/commands/dev.js

@@ -99,7 +99,7 @@ function startServer(force) {
                         watcher = chokidar_1.default.watch(constant_1.VARLET_CONFIG);
                         watcher.on('change', function () { return startServer(force); });
                     }
-                    logger_1.default.info((isRestart ? 'Res' : 'S') + "tart successfully!!!");
+                    logger_1.default.success("\n" + (isRestart ? 'Res' : 'S') + "tart successfully!!!");
                     return [2 /*return*/];
             }
         });

package/lib/commands/gen.js

@@ -46,7 +46,7 @@ var path_1 = require("path");
 var fs_extra_1 = require("fs-extra");
 var constant_1 = require("../shared/constant");
 function removeFiles(dest) {
-    var files = ['es', 'umd', 'highlight', 'types/index.d.ts', '.varlet', 'node_modules'];
+    var files = ['es', 'lib', 'umd', 'highlight', 'types/index.d.ts', '.varlet', 'node_modules'];
     files.forEach(function (filename) { return (0, fs_extra_1.removeSync)((0, path_1.resolve)(dest, filename)); });
 }
 function syncVersion(name) {
@@ -59,7 +59,7 @@ function syncVersion(name) {
 }
 function gen(name) {
     return __awaiter(this, void 0, void 0, function () {
-        var dest, ret, choice, generator;
+        var dest, ret, choice, generator, base;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -79,8 +79,12 @@ function gen(name) {
                     ret = _a.sent();
                     choice = ret['Please select your component library programming style'];
                     generator = (0, path_1.resolve)(constant_1.GENERATORS_DIR, choice);
-                    return [4 /*yield*/, (0, fs_extra_1.copy)(generator, dest)];
+                    base = (0, path_1.resolve)(constant_1.GENERATORS_DIR, 'base');
+                    return [4 /*yield*/, (0, fs_extra_1.copy)(base, dest)];
                 case 2:
+                    _a.sent();
+                    return [4 /*yield*/, (0, fs_extra_1.copy)(generator, dest)];
+                case 3:
                     _a.sent();
                     removeFiles(dest);
                     syncVersion(name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.23.8",
+  "version": "1.24.0",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -31,7 +31,7 @@
     "dev": "tsc --watch",
     "build": "tsc"
   },
-  "gitHead": "7962430948d06d391cc52d22f87cb4d304d8c2b5",
+  "gitHead": "859769307c762134844c0ddfdb69452631f76d62",
   "dependencies": {
     "@babel/core": "^7.14.8",
     "@babel/preset-env": "^7.14.8",
@@ -40,8 +40,8 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@release-it/conventional-changelog": "^3.3.0",
     "@varlet/eslint-config": "^1.13.0",
-    "@varlet/icons": "^1.23.0",
-    "@varlet/markdown-vite-plugin": "^1.22.0",
+    "@varlet/icons": "^1.24.0",
+    "@varlet/markdown-vite-plugin": "^1.24.0",
     "@varlet/stylelint-config": "^1.9.0",
     "@varlet/touch-emulator": "^1.0.1",
     "@vitejs/plugin-vue": "1.9.2",

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

@@ -0,0 +1,107 @@
+<template>
+  <div class="var-site-code-example">
+    <div class="var-site-code-example__toolbar">
+      <var-site-button text round @click="toggle" v-if="fold">
+        <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>
+    </div>
+    <div
+      :id="`clip-target-${cid}`"
+      class="var-site-code-example__code"
+      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 } 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
+  },
+  setup() {
+    const code: Ref<HTMLElement | null> = ref(null)
+    const cid: Ref<number> = ref(clipId++)
+    const fold: Ref = ref(get(config, 'pc.fold'))
+    const clipboard: Ref = ref(get(config, 'pc.clipboard', {}))
+    const height: Ref<number> = ref(fold.value?.defaultFold ? fold.value?.foldHeight : -1)
+
+    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()
+
+        if (offsetHeight - foldHeight < offset) {
+          Snackbar(get(config, `pc.fold.message.${getPCLocationInfo().language}`))
+          height.value = foldHeight
+        } else {
+          height.value = offsetHeight
+        }
+      } else {
+        const { offsetHeight } = code.value as HTMLElement
+
+        height.value = offsetHeight
+        await doubleRaf()
+        height.value = foldHeight
+      }
+    }
+
+    onMounted(() => {
+      const trigger = new Clipboard(`#clip-trigger-${cid.value}`)
+
+      trigger.on('success', () => {
+        Snackbar.success(clipboard.value[getPCLocationInfo().language])
+      })
+    })
+
+    return {
+      code,
+      height,
+      cid,
+      fold,
+      clipboard,
+      toggle
+    }
+  }
+})
+</script>
+
+<style lang="less">
+@import "./codeExample";
+</style>

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

@@ -0,0 +1,23 @@
+.var-site-code-example {
+  margin-top: 12px;
+  position: relative;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    z-index: 1;
+    right: 10px;
+    top: 20px;
+
+    button {
+      color: white !important;
+    }
+  }
+
+  &__code {
+    transition: all .25s;
+    overflow: hidden;
+    border-radius: 4px;
+  }
+}

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

@@ -0,0 +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

package/site/components/icon/icon.less

@@ -12,6 +12,7 @@
   align-items: center;
   font-size: var(--site-icon-size);
   color: inherit;
+  vertical-align: bottom;
 
   &--shrinking {
     transform: scale(0);

package/site/components/loading/props.ts

@@ -1,8 +1,8 @@
 import type { PropType } from 'vue'
 
-type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
+export type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
 
-type LoadingSize = 'normal' | 'mini' | 'small' | 'large'
+export type LoadingSize = 'normal' | 'mini' | 'small' | 'large'
 
 export function typeValidator(type: string): boolean {
   return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type)

package/site/components/snackbar/Snackbar.vue

@@ -0,0 +1,38 @@
+<template>
+  <teleport :to="teleport" :disabled="disabled">
+    <transition name="var-site-snackbar-fade" @after-enter="onOpened" @after-leave="onClosed">
+      <var-site-snackbar-core v-bind="$props" class="var-site-snackbar-transition">
+        <slot>{{ content }}</slot>
+        <template #action>
+          <slot name="action" />
+        </template>
+      </var-site-snackbar-core>
+    </transition>
+  </teleport>
+</template>
+
+<script>
+import VarSiteSnackbarCore from './core'
+import { defineComponent } from 'vue'
+import { useTeleport } from '../utils/components'
+import { props } from './props'
+
+export default defineComponent({
+  name: 'VarSiteSnackbar',
+  components: {
+    VarSiteSnackbarCore,
+  },
+  props,
+  setup() {
+    const { disabled } = useTeleport()
+
+    return {
+      disabled,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+</style>

package/site/components/snackbar/core.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="var-site-snackbar" :style="{ pointerEvents: isForbidClick ? 'auto' : 'none', zIndex }" v-show="show">
+    <div :class="snackbarClass" :style="{ zIndex }">
+      <div class="var-site-snackbar__content" :class="[contentClass]">
+        <slot>{{ content }}</slot>
+      </div>
+      <div class="var-site-snackbar__action">
+        <var-site-icon v-if="iconName" :name="iconName" />
+        <var-site-loading v-if="type === 'loading'" :type="loadingType" :size="loadingSize" />
+        <slot name="action" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, ref, onMounted, computed } from 'vue'
+import VarSiteLoading from '../loading'
+import VarSiteIcon from '../icon'
+import { useZIndex } from '../context/zIndex'
+import { props } from './props'
+import { useLock } from '../context/lock'
+import { SNACKBAR_TYPE } from './index'
+import type { Ref, ComputedRef } from 'vue'
+import type { SnackbarType } from './index'
+
+const ICON_TYPE_DICT: Record<SnackbarType, string> = {
+  success: 'checkbox-marked-circle',
+  warning: 'warning',
+  info: 'information',
+  error: 'error',
+  loading: '',
+}
+
+export default defineComponent({
+  name: 'VarSiteSnackbarCore',
+  components: {
+    VarSiteLoading,
+    VarSiteIcon,
+  },
+  props,
+  setup(props) {
+    const timer: Ref = ref(null)
+    const { zIndex } = useZIndex(() => props.show, 1)
+
+    useLock(props, 'show', 'lockScroll')
+
+    const snackbarClass: ComputedRef<string> = computed(() => {
+      const { position, vertical, type } = props
+
+      const baseClass = `var-site-snackbar__wrapper var-site-snackbar__wrapper-${position} var-site-elevation--4`
+      const verticalClass = vertical ? ' var-site-snackbar__vertical' : ''
+      const typeClass = type && SNACKBAR_TYPE.includes(type) ? ` var-site-snackbar__wrapper-${type}` : ''
+
+      return `${baseClass}${verticalClass}${typeClass}`
+    })
+
+    const isForbidClick: ComputedRef<boolean> = computed(() => props.type === 'loading' || props.forbidClick)
+
+    const iconName: ComputedRef<string> = computed(() => {
+      if (!props.type) return ''
+
+      return ICON_TYPE_DICT[props.type]
+    })
+
+    const updateAfterDuration = () => {
+      timer.value = setTimeout(() => {
+        props.type !== 'loading' && props['onUpdate:show']?.(false)
+      }, props.duration)
+    }
+
+    watch(
+      () => props.show,
+      (show) => {
+        if (show) {
+          props.onOpen?.()
+          updateAfterDuration()
+        } else if (show === false) {
+          clearTimeout(timer.value)
+          props.onClose?.()
+        }
+      }
+    )
+
+    watch(
+      () => props._update,
+      () => {
+        clearTimeout(timer.value)
+        updateAfterDuration()
+      }
+    )
+
+    onMounted(() => {
+      if (props.show) {
+        props.onOpen?.()
+        updateAfterDuration()
+      }
+    })
+
+    return {
+      zIndex,
+      snackbarClass,
+      iconName,
+      isForbidClick,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../styles/elevation';
+@import '../loading/loading';
+@import '../button/button';
+@import '../icon/icon';
+@import './snackbar';
+</style>