@varlet/cli 1.23.11 → 1.24.2-alpha.1640861757955

package/lib/compiler/compileTemplateHighlight.js

@@ -85,17 +85,17 @@ function compileTable(md, titleRe) {
 }
 exports.compileTable = compileTable;
 function compileTags(table, tags, componentName) {
-    tags[(0, lodash_1.get)(varletConfig, 'namespace') + "-" + componentName] = {
+    tags["".concat((0, lodash_1.get)(varletConfig, 'namespace'), "-").concat(componentName)] = {
         attributes: table.attributesTable.map(function (row) { return (0, exports.replaceDot)(row[0]); }),
     };
 }
 exports.compileTags = compileTags;
 function compileAttributes(table, attributes, componentName) {
     table.attributesTable.forEach(function (row) {
-        var attrNamespace = (0, lodash_1.get)(varletConfig, 'namespace') + "-" + componentName + "/" + (0, exports.replaceDot)(row[0]);
+        var attrNamespace = "".concat((0, lodash_1.get)(varletConfig, 'namespace'), "-").concat(componentName, "/").concat((0, exports.replaceDot)(row[0]));
         attributes[attrNamespace] = {
             type: (0, exports.replaceUnderline)(row[2]),
-            description: row[1] + " \u9ED8\u8BA4\u503C\uFF1A" + (0, exports.replaceDot)(row[3]),
+            description: "".concat(row[1], " \u9ED8\u8BA4\u503C\uFF1A").concat((0, exports.replaceDot)(row[3])),
         };
     });
 }
@@ -120,7 +120,7 @@ function compileWebTypes(table, webTypes, componentName) {
         description: row[1],
     }); });
     webTypes.contributions.html.tags.push({
-        name: (0, lodash_1.get)(varletConfig, 'namespace') + "-" + componentName,
+        name: "".concat((0, lodash_1.get)(varletConfig, 'namespace'), "-").concat(componentName),
         attributes: attributes,
         events: events,
         slots: slots,

package/lib/compiler/compileTypes.js

@@ -44,7 +44,7 @@ var path_1 = require("path");
 var varlet_config_1 = require("../config/varlet.config");
 var lodash_1 = require("lodash");
 function generateReference(moduleDir) {
-    (0, fs_extra_1.writeFileSync)((0, path_1.resolve)(moduleDir, 'index.d.ts'), "export * from '" + (0, path_1.relative)(moduleDir, constant_1.TYPES_DIR) + "'\n");
+    (0, fs_extra_1.writeFileSync)((0, path_1.resolve)(moduleDir, 'index.d.ts'), "export * from '".concat((0, path_1.relative)(moduleDir, constant_1.TYPES_DIR), "'\n"));
 }
 exports.generateReference = generateReference;
 function compileTypes() {
@@ -67,13 +67,13 @@ function compileTypes() {
                     declares = [];
                     ignoreEntryDir.forEach(function (filename) {
                         var componentName = filename.slice(0, filename.indexOf('.d.ts'));
-                        exports.push("export * from './" + componentName + "'");
+                        exports.push("export * from './".concat(componentName, "'"));
                         if (!componentName.startsWith(namespace)) {
-                            declares.push("" + (0, fsUtils_1.bigCamelize)(namespace) + (0, fsUtils_1.bigCamelize)(componentName) + ": typeof import('" + name + "')['_" + (0, fsUtils_1.bigCamelize)(componentName) + "Component']");
+                            declares.push("".concat((0, fsUtils_1.bigCamelize)(namespace)).concat((0, fsUtils_1.bigCamelize)(componentName), ": typeof import('").concat(name, "')['_").concat((0, fsUtils_1.bigCamelize)(componentName), "Component']"));
                         }
                     });
-                    template = "import type { App } from 'vue'\n\nexport const install: (app: App) => void\n\n" + exports.join('\n') + "\n";
-                    globalTemplate = "declare module 'vue' {\n  export interface GlobalComponents {\n    " + declares.join('\n    ') + "\n  }\n}\n\nexport {}\n";
+                    template = "import type { App } from 'vue'\n\nexport const install: (app: App) => void\n\n".concat(exports.join('\n'), "\n");
+                    globalTemplate = "declare module 'vue' {\n  export interface GlobalComponents {\n    ".concat(declares.join('\n    '), "\n  }\n}\n\nexport {}\n");
                     return [4 /*yield*/, Promise.all([
                             (0, fs_extra_1.writeFile)((0, path_1.resolve)(constant_1.TYPES_DIR, 'index.d.ts'), template),
                             (0, fs_extra_1.writeFile)((0, path_1.resolve)(constant_1.TYPES_DIR, 'global.d.ts'), globalTemplate),

package/lib/config/jest.config.js

@@ -30,7 +30,7 @@ module.exports = __assign({ moduleNameMapper: {
         '\\.(js|jsx|ts|tsx)$': 'babel-jest',
     }, collectCoverage: true, collectCoverageFrom: [
         'src/**/*.{js,jsx,ts,tsx,vue}',
-        "!**/" + constant_1.EXAMPLE_DIR_NAME + "/**",
-        "!**/" + constant_1.DOCS_DIR_NAME + "/**",
-        "!**/" + constant_1.TESTS_DIR_NAME + "/**",
+        "!**/".concat(constant_1.EXAMPLE_DIR_NAME, "/**"),
+        "!**/".concat(constant_1.DOCS_DIR_NAME, "/**"),
+        "!**/".concat(constant_1.TESTS_DIR_NAME, "/**"),
     ], moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'vue'], transformIgnorePatterns: ['/node_modules/(?!(@varlet/cli))/'] }, getRootConfig());

package/lib/config/vite.config.js

@@ -49,8 +49,8 @@ function getDevConfig(varletConfig) {
             (0, plugin_vue_jsx_1.default)(),
             (0, vite_plugin_html_1.injectHtml)({
                 data: {
-                    pcTitle: (0, lodash_1.get)(varletConfig, "pc.title['" + defaultLanguage + "']"),
-                    mobileTitle: (0, lodash_1.get)(varletConfig, "mobile.title['" + defaultLanguage + "']"),
+                    pcTitle: (0, lodash_1.get)(varletConfig, "pc.title['".concat(defaultLanguage, "']")),
+                    mobileTitle: (0, lodash_1.get)(varletConfig, "mobile.title['".concat(defaultLanguage, "']")),
                     logo: (0, lodash_1.get)(varletConfig, "logo"),
                     baidu: (0, lodash_1.get)(varletConfig, "analysis.baidu", ''),
                 },
@@ -86,8 +86,8 @@ function inlineCSS(fileName, dir) {
             var jsFile = (0, path_1.resolve)(dir, fileName);
             var cssCode = (0, fs_extra_1.readFileSync)(cssFile, 'utf-8');
             var jsCode = (0, fs_extra_1.readFileSync)(jsFile, 'utf-8');
-            var injectCode = ";(function(){var style=document.createElement('style');style.type='text/css';style.rel='stylesheet';style.appendChild(document.createTextNode(`" + cssCode.replace(/\\/g, '\\\\') + "`));var head=document.querySelector('head');head.appendChild(style)})();";
-            (0, fs_extra_1.writeFileSync)(jsFile, "" + injectCode + jsCode);
+            var injectCode = ";(function(){var style=document.createElement('style');style.type='text/css';style.rel='stylesheet';style.appendChild(document.createTextNode(`".concat(cssCode.replace(/\\/g, '\\\\'), "`));var head=document.querySelector('head');head.appendChild(style)})();");
+            (0, fs_extra_1.writeFileSync)(jsFile, "".concat(injectCode).concat(jsCode));
             (0, fs_extra_1.copyFileSync)(cssFile, (0, path_1.resolve)(constant_1.LIB_DIR, 'style.css'));
             (0, fs_extra_1.removeSync)(cssFile);
         },
@@ -104,7 +104,7 @@ function clear() {
 }
 function getUMDConfig(varletConfig) {
     var name = (0, lodash_1.get)(varletConfig, 'name');
-    var fileName = (0, lodash_1.kebabCase)(name) + ".js";
+    var fileName = "".concat((0, lodash_1.kebabCase)(name), ".js");
     return {
         logLevel: 'silent',
         build: {

package/lib/index.js

@@ -30,8 +30,11 @@ var jest_1 = require("./commands/jest");
 var lint_1 = require("./commands/lint");
 var gen_1 = require("./commands/gen");
 var preview_1 = require("./commands/preview");
+var changelog_1 = require("./commands/changelog");
+var release_1 = require("./commands/release");
+var commitLint_1 = require("./commands/commitLint");
 var program = new commander_1.Command();
-program.version("varlet-cli " + require('../package.json').version).usage('<command> [options]');
+program.version("varlet-cli ".concat(require('../package.json').version)).usage('<command> [options]');
 program
     .command('dev')
     .option('-f --force', 'Force dep pre-optimization regardless of whether deps have changed')
@@ -55,10 +58,18 @@ program
     .option('-cc --clearCache', 'Clear test cache')
     .action(jest_1.jest);
 program.command('gen <name>').description('Generate cli application').action(gen_1.gen);
+program
+    .command('changelog')
+    .option('-rc --releaseCount <releaseCount>', 'Release count')
+    .option('-f --file <file>', 'Changelog filename')
+    .description('Generate changelog')
+    .action(changelog_1.changelog);
+program.command('release').description('Release all packages and generate changelogs').action(release_1.release);
+program.command('commit-lint <gitParams>').description('Lint commit message').action(commitLint_1.commitLint);
 program.on('command:*', function (_a) {
     var _b = __read(_a, 1), cmd = _b[0];
     program.outputHelp();
-    logger_1.default.error("\nUnknown command " + cmd + ".\n");
+    logger_1.default.error("\nUnknown command ".concat(cmd, ".\n"));
     process.exitCode = 1;
 });
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.23.11",
+  "version": "1.24.2-alpha.1640861757955",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -27,59 +27,42 @@
   "bugs": {
     "url": "https://github.com/haoziqaq/varlet/issues"
   },
-  "scripts": {
-    "dev": "tsc --watch",
-    "build": "tsc"
-  },
-  "gitHead": "449df88f0ff65a2ad89fa48a5d443ab864bd0bb3",
+  "gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
   "dependencies": {
+    "@varlet/icons": "1.24.2-alpha.1640861757955",
+    "@varlet/markdown-vite-plugin": "1.24.2-alpha.1640861757955",
+    "@varlet/touch-emulator": "1.24.2-alpha.1640861757955",
     "@babel/core": "^7.14.8",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
-    "@commitlint/cli": "^11.0.0",
-    "@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/stylelint-config": "^1.9.0",
-    "@varlet/touch-emulator": "^1.0.1",
+    "@babel/helper-plugin-utils": "^7.14.5",
+    "vue": "3.2.16",
+    "vite": "2.6.5",
     "@vitejs/plugin-vue": "1.9.2",
     "@vitejs/plugin-vue-jsx": "1.1.8",
-    "@vue/babel-plugin-jsx": "^1.0.7",
-    "@vue/compiler-sfc": "3.2.22",
-    "@vue/test-utils": "^2.0.0-rc.6",
-    "babel-jest": "26.6.3",
+    "vite-plugin-html": "^2.1.0",
+    "@vue/babel-plugin-jsx": "1.0.7",
+    "@vue/compiler-sfc": "3.2.16",
+    "conventional-changelog": "^3.1.25",
     "chalk": "^4.1.0",
+    "glob": "^7.2.0",
+    "semver": "^7.3.5",
     "chokidar": "^3.5.2",
-    "clipboard": "^2.0.6",
     "commander": "^8.3.0",
-    "commitizen": "^4.2.2",
-    "conventional-changelog-cli": "^2.1.1",
-    "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.30.0",
     "execa": "^5.0.0",
     "fs-extra": "^9.0.1",
     "hash-sum": "^2.0.0",
-    "husky": "^7.0.1",
     "inquirer": "^8.1.2",
-    "jest": "^26.6.3",
     "less": "^3.12.2",
-    "lint-staged": "^10.5.0",
-    "live-server": "^1.2.1",
     "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
     "ora": "^5.4.0",
-    "prettier": "^2.3.2",
-    "release-it": "^14.11.5",
     "slash": "^3.0.0",
-    "stylelint": "^13.13.1",
-    "ts-jest": "^26.5.1",
     "typescript": "^4.4.4",
-    "vite": "2.6.5",
-    "vite-plugin-html": "^2.1.0",
+    "jest": "^26.6.3",
+    "babel-jest": "26.6.3",
+    "ts-jest": "^26.5.1",
     "vue-jest": "^5.0.0-alpha.8",
-    "vue-router": "4.0.12"
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
@@ -90,6 +73,16 @@
     "@types/lodash-es": "^4.17.5"
   },
   "peerDependencies": {
-    "vue": "3.2.16"
+    "@varlet/touch-emulator": "1.24.2-alpha.1640861757955",
+    "@vue/test-utils": "^2.0.0-rc.6",
+    "vue": "3.2.16",
+    "vue-router": "4.0.12",
+    "live-server": "^1.2.1",
+    "lodash-es": "^4.17.21",
+    "clipboard": "^2.0.6"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "tsc"
   }
-}
+}

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>