@varlet/cli 1.23.5 → 1.23.12-alpha.25

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* **cli:** add ts ignore to generate routes ([3363578](https://github.com/haoziqaq/varlet/commit/3363578eb2763282fd3c274ab75374cbff94c92b))
+
+
+
+
+
+## [1.23.7](https://github.com/haoziqaq/varlet/compare/v1.23.6...v1.23.7) (2021-11-23)
+
+
+### Bug Fixes
+
+* **ui/themes, cli:** fix themes types ([f29511a](https://github.com/haoziqaq/varlet/commit/f29511a016edb462bdf578a6b5a19fbe10a22158))
+
+
+
+
+
 ## [1.23.5](https://github.com/haoziqaq/varlet/compare/v1.23.4...v1.23.5) (2021-11-21)
 
 

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/lib/compiler/compileModule.js

@@ -68,7 +68,7 @@ function compileDir(dir) {
                     return [4 /*yield*/, Promise.all(dirs.map(function (filename) {
                             var file = (0, path_1.resolve)(dir, filename);
                             [constant_1.TESTS_DIR_NAME, constant_1.EXAMPLE_DIR_NAME, constant_1.DOCS_DIR_NAME].includes(filename) && (0, fs_extra_1.removeSync)(file);
-                            if (filename === constant_1.STYLE_DIR_NAME) {
+                            if ((0, fsUtils_1.isDTS)(file) || filename === constant_1.STYLE_DIR_NAME) {
                                 return Promise.resolve();
                             }
                             return compileFile(file);

package/lib/compiler/compileSiteEntry.js

@@ -161,7 +161,7 @@ function buildMobileSiteRoutes() {
                 case 0: return [4 /*yield*/, findExamplePaths()];
                 case 1:
                     examplePaths = _a.sent();
-                    routes = examplePaths.map(function (examplePath) { return "\n  {\n    path: '" + getExampleRoutePath(examplePath) + "',\n    component: () => import('" + examplePath + "')\n  }"; });
+                    routes = examplePaths.map(function (examplePath) { return "\n  {\n    path: '" + getExampleRoutePath(examplePath) + "',\n    // @ts-ignore\n    component: () => import('" + examplePath + "')\n  }"; });
                     source = "export default [  " + routes.join(',') + "\n]";
                     return [4 /*yield*/, (0, fsUtils_1.outputFileSyncOnChange)(constant_1.SITE_MOBILE_ROUTES, source)];
                 case 2:

package/lib/shared/fsUtils.d.ts

@@ -4,6 +4,7 @@ export declare const isDir: (file: string) => boolean;
 export declare const isSFC: (file: string) => boolean;
 export declare const isJSX: (file: string) => boolean;
 export declare const isTSX: (file: string) => boolean;
+export declare const isDTS: (file: string) => boolean;
 export declare const isScript: (file: string) => boolean;
 export declare const isLess: (file: string) => boolean;
 export declare const isPublicDir: (dir: string) => boolean;

package/lib/shared/fsUtils.js

@@ -36,7 +36,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outputFileSyncOnChange = exports.smartAppendFileSync = exports.camelize = exports.bigCamelize = exports.replaceExt = exports.isPublicDir = exports.isLess = exports.isScript = exports.isTSX = exports.isJSX = exports.isSFC = exports.isDir = exports.isMD = exports.getPublicDirs = void 0;
+exports.outputFileSyncOnChange = exports.smartAppendFileSync = exports.camelize = exports.bigCamelize = exports.replaceExt = exports.isPublicDir = exports.isLess = exports.isScript = exports.isDTS = exports.isTSX = exports.isJSX = exports.isSFC = exports.isDir = exports.isMD = exports.getPublicDirs = void 0;
 var path_1 = require("path");
 var fs_extra_1 = require("fs-extra");
 var constant_1 = require("./constant");
@@ -64,6 +64,8 @@ var isJSX = function (file) { return (0, fs_extra_1.pathExistsSync)(file) && (0,
 exports.isJSX = isJSX;
 var isTSX = function (file) { return (0, fs_extra_1.pathExistsSync)(file) && (0, path_1.extname)(file) === '.tsx'; };
 exports.isTSX = isTSX;
+var isDTS = function (file) { return (0, fs_extra_1.pathExistsSync)(file) && file.endsWith('.d.ts'); };
+exports.isDTS = isDTS;
 var isScript = function (file) { return (0, fs_extra_1.pathExistsSync)(file) && constant_1.SCRIPTS_EXTENSIONS.includes((0, path_1.extname)(file)); };
 exports.isScript = isScript;
 var isLess = function (file) { return (0, fs_extra_1.pathExistsSync)(file) && (0, path_1.extname)(file) === '.less'; };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.23.5",
+  "version": "1.23.12-alpha.25+4a1d7746",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -31,7 +31,7 @@
     "dev": "tsc --watch",
     "build": "tsc"
   },
-  "gitHead": "013da06688feb68a175e31dc8d91a16071dba461",
+  "gitHead": "4a1d774686bd66a53827bfb64a8495be97f9cf33",
   "dependencies": {
     "@babel/core": "^7.14.8",
     "@babel/preset-env": "^7.14.8",

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>