@varlet/cli 1.22.0-alpha.6 → 1.22.0-alpha.64

package/lib/site/useProgress.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProgress = void 0;
+var progress_1 = __importDefault(require("./components/progress"));
+var vue_1 = require("vue");
+// @ts-ignore
+var _config_1 = __importDefault(require("@config"));
+// @ts-ignore
+var utils_1 = require("./utils");
+var lodash_es_1 = require("lodash-es");
+function useProgress() {
+    var timer;
+    var trackColor = lodash_es_1.get(_config_1.default, 'themes.color-progress-track');
+    var color = lodash_es_1.get(_config_1.default, 'themes.color-progress');
+    var props = vue_1.reactive({
+        style: {
+            position: 'fixed',
+            width: '100%',
+            left: 0,
+            top: 0,
+            zIndex: 10086,
+        },
+        trackColor: trackColor,
+        color: color,
+        lineWidth: 3,
+        value: 0,
+    });
+    var changeValue = function () {
+        timer = window.setTimeout(function () {
+            if (props.value >= 95)
+                return;
+            var num = Math.random();
+            if (props.value < 70)
+                num = Math.round(5 * Math.random());
+            props.value += num;
+            changeValue();
+        }, 200);
+    };
+    var start = function () {
+        props.value = 0;
+        setTimeout(function () { return (props.color = color); }, 200);
+        changeValue();
+    };
+    var end = function () {
+        props.value = 100;
+        setTimeout(function () { return (props.color = trackColor); }, 300);
+        window.clearTimeout(timer);
+    };
+    utils_1.mountInstance(progress_1.default, props);
+    return {
+        start: start,
+        end: end,
+    };
+}
+exports.useProgress = useProgress;

package/lib/site/utils.d.ts

@@ -0,0 +1,24 @@
+export * from './components/utils/components';
+export * from './components/utils/elements';
+export * from './components/utils/shared';
+export declare type StyleVars = Record<string, string>;
+export declare function camelize(str: string): string;
+export declare function bigCamelize(str: string): string;
+export interface PCLocationInfo {
+    language: string;
+    menuName: string;
+}
+export declare function getPCLocationInfo(): PCLocationInfo;
+export declare function isPhone(): boolean;
+export declare enum MenuTypes {
+    TITLE = 1,
+    COMPONENT = 2,
+    DOCUMENTATION = 3
+}
+export declare function inIframe(): boolean;
+export declare function removeEmpty(object?: Record<string, string>): Record<string, string>;
+export declare function getHashSearch(): URLSearchParams;
+export declare function watchLang(cb: (lang: string) => void, platform?: 'pc' | 'mobile'): void;
+export declare function watchPlatform(cb: (platform: string) => void): void;
+export declare function addRouteListener(cb: () => void): void;
+export declare function setThemes(config: Record<string, any>): void;

package/lib/site/utils.js

@@ -0,0 +1,133 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setThemes = exports.addRouteListener = exports.watchPlatform = exports.watchLang = exports.getHashSearch = exports.removeEmpty = exports.inIframe = exports.MenuTypes = exports.isPhone = exports.getPCLocationInfo = exports.bigCamelize = exports.camelize = void 0;
+var vue_1 = require("vue");
+var lodash_es_1 = require("lodash-es");
+var elements_1 = require("./components/utils/elements");
+__exportStar(require("./components/utils/components"), exports);
+__exportStar(require("./components/utils/elements"), exports);
+__exportStar(require("./components/utils/shared"), exports);
+function StyleProvider(styleVars) {
+    if (styleVars === void 0) { styleVars = {}; }
+    var styles = elements_1.formatStyleVars(styleVars);
+    Object.entries(styles).forEach(function (_a) {
+        var _b = __read(_a, 2), key = _b[0], value = _b[1];
+        return document.documentElement.style.setProperty(key, value);
+    });
+}
+function camelize(str) {
+    return str.replace(/-(\w)/g, function (_, p) { return p.toUpperCase(); });
+}
+exports.camelize = camelize;
+function bigCamelize(str) {
+    return camelize(str).replace(str.charAt(0), str.charAt(0).toUpperCase());
+}
+exports.bigCamelize = bigCamelize;
+function getPCLocationInfo() {
+    var _a = __read(window.location.hash.split('/'), 3), language = _a[1], menuName = _a[2];
+    return {
+        language: language,
+        menuName: menuName
+    };
+}
+exports.getPCLocationInfo = getPCLocationInfo;
+function isPhone() {
+    return /Android|webOS|iPhone|iPod|BlackBerry|Pad/i.test(navigator.userAgent);
+}
+exports.isPhone = isPhone;
+var MenuTypes;
+(function (MenuTypes) {
+    MenuTypes[MenuTypes["TITLE"] = 1] = "TITLE";
+    MenuTypes[MenuTypes["COMPONENT"] = 2] = "COMPONENT";
+    MenuTypes[MenuTypes["DOCUMENTATION"] = 3] = "DOCUMENTATION";
+})(MenuTypes = exports.MenuTypes || (exports.MenuTypes = {}));
+function inIframe() {
+    return window.self !== window.top;
+}
+exports.inIframe = inIframe;
+function removeEmpty(object) {
+    if (object === void 0) { object = {}; }
+    return Object.keys(object).reduce(function (record, key) {
+        var value = object[key];
+        value && (record[key] = value);
+        return record;
+    }, {});
+}
+exports.removeEmpty = removeEmpty;
+function getHashSearch() {
+    var href = window.location.href;
+    var hashSearch = href.slice(href.indexOf('?'));
+    return new URLSearchParams(hashSearch);
+}
+exports.getHashSearch = getHashSearch;
+function watchLang(cb, platform) {
+    if (platform === void 0) { platform = 'mobile'; }
+    var handleHashchange = function () {
+        var _a;
+        var language = platform === 'mobile'
+            ? ((_a = getHashSearch().get('language')) !== null && _a !== void 0 ? _a : 'zh-CN')
+            : getPCLocationInfo().language;
+        cb(language);
+    };
+    addRouteListener(handleHashchange);
+    handleHashchange();
+}
+exports.watchLang = watchLang;
+function watchPlatform(cb) {
+    var handleHashchange = function () {
+        var _a;
+        var platform = (_a = getHashSearch().get('platform')) !== null && _a !== void 0 ? _a : 'mobile';
+        cb(platform);
+    };
+    addRouteListener(handleHashchange);
+    handleHashchange();
+}
+exports.watchPlatform = watchPlatform;
+function addRouteListener(cb) {
+    vue_1.onMounted(function () {
+        window.addEventListener('hashchange', cb);
+        window.addEventListener('popstate', cb);
+    });
+    vue_1.onUnmounted(function () {
+        window.removeEventListener('hashchange', cb);
+        window.removeEventListener('popstate', cb);
+    });
+}
+exports.addRouteListener = addRouteListener;
+function setThemes(config) {
+    var themes = lodash_es_1.get(config, 'themes', {});
+    Object.keys(themes).forEach(function (key) {
+        var _a;
+        var theme = themes[key];
+        StyleProvider((_a = {},
+            _a["--site-config-" + key] = theme,
+            _a));
+    });
+}
+exports.setThemes = setThemes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.22.0-alpha.6+b3e8d150",
+  "version": "1.22.0-alpha.64+4e9f81da",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -31,7 +31,7 @@
     "dev": "tsc --watch",
     "build": "tsc"
   },
-  "gitHead": "b3e8d150b843c603b090d8e2da3ec05e02f2a32e",
+  "gitHead": "4e9f81dabf854961e3bd99c445a0a8566b26db66",
   "dependencies": {
     "@babel/core": "^7.14.8",
     "@babel/preset-env": "^7.14.8",
@@ -44,14 +44,14 @@
     "@varlet/markdown-vite-plugin": "^1.20.0",
     "@varlet/stylelint-config": "^1.9.0",
     "@varlet/touch-emulator": "^1.0.1",
-    "@varlet/ui": "^1.22.0-alpha.6+b3e8d150",
     "@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.16",
     "@vue/test-utils": "^2.0.0-rc.6",
+    "address": "^1.1.2",
     "babel-jest": "26.6.3",
     "chalk": "^4.1.0",
-    "chokidar": "^3.5.2",
     "clipboard": "^2.0.6",
     "commander": "^6.2.0",
     "commitizen": "^4.2.2",
@@ -66,6 +66,7 @@
     "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",
@@ -75,10 +76,9 @@
     "stylelint": "^13.13.1",
     "ts-jest": "^26.5.1",
     "typescript": "^4.3.5",
-    "vite": "2.5.10",
+    "vite": "2.6.2",
     "vite-plugin-html": "^2.1.0",
     "vue-jest": "^5.0.0-alpha.8",
-    "vue-loader": "16.5.0",
     "vue-router": "4.0.0-rc.1"
   },
   "devDependencies": {
@@ -86,10 +86,10 @@
     "@types/fs-extra": "^9.0.2",
     "@types/hash-sum": "^1.0.0",
     "@types/jest": "^26.0.15",
-    "@types/lodash": "^4.14.174"
+    "@types/lodash": "^4.14.174",
+    "@types/lodash-es": "^4.17.5"
   },
   "peerDependencies": {
-    "@vue/compiler-sfc": "3.2.17",
-    "vue": "3.2.17"
+    "vue": "3.2.16"
   }
 }

package/site/components/app-bar/AppBar.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="var-site-app-bar"
+    :class="{ 'var-site-elevation--3': elevation }"
+    :style="{
+      background: color,
+      color: textColor,
+    }"
+  >
+    <div class="var-site-app-bar__left" v-if="$slots.left">
+      <slot name="left" />
+    </div>
+
+    <div
+      class="var-site-app-bar__title"
+      :class="`var-site-app-bar__title-${titlePosition}`"
+      :style="{
+        paddingLeft: $slots.left && titlePosition !== 'center' ? '30px' : '10px',
+        paddingRight: $slots.right && titlePosition !== 'center' ? '30px' : '10px',
+      }"
+    >
+      <slot>{{ title }}</slot>
+    </div>
+
+    <div class="var-site-app-bar__right" v-if="$slots.right">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { props } from './props'
+
+export default defineComponent({
+  name: 'VarSiteAppBar',
+  props,
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../styles/elevation';
+@import './appBar';
+</style>

package/site/components/app-bar/appBar.less

@@ -0,0 +1,66 @@
+@site-app-bar-color: var(--site-color-primary);
+@site-app-bar-text-color: #fff;
+@site-app-bar-height: 50px;
+@site-app-bar-padding: 0 10px;
+@site-app-bar-title-line-height: 50px;
+
+:root {
+  --site-app-bar-color: @site-app-bar-color;
+  --site-app-bar-text-color: #fff;
+  --site-app-bar-height: @site-app-bar-height;
+  --site-app-bar-padding: @site-app-bar-padding;
+  --site-app-bar-title-line-height: @site-app-bar-title-line-height;
+}
+
+.var-site-app-bar {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--site-app-bar-height);
+  padding: var(--site-app-bar-padding);
+  background: var(--site-app-bar-color);
+  color: var(--site-app-bar-text-color);
+
+  &__title {
+    flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: var(--site-app-bar-title-line-height);
+    display: flex;
+  }
+
+  &__title-center {
+    justify-content: center;
+  }
+
+  &__title-left {
+    justify-content: flex-start;
+  }
+
+  &__title-right {
+    justify-content: flex-end;
+  }
+
+  &__left,
+  &__right {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100%;
+    z-index: 2;
+  }
+
+  &__left {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &__right {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}

package/site/components/app-bar/index.ts

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

package/site/components/app-bar/props.ts

@@ -0,0 +1,25 @@
+export function positionValidator(position: string): boolean {
+  const validPositions = ['left', 'center', 'right']
+  return validPositions.includes(position)
+}
+
+export const props = {
+  color: {
+    type: String,
+  },
+  textColor: {
+    type: String,
+  },
+  title: {
+    type: String,
+  },
+  titlePosition: {
+    type: String,
+    default: 'left',
+    validator: positionValidator,
+  },
+  elevation: {
+    type: Boolean,
+    default: true,
+  },
+}

package/site/components/button/Button.vue

@@ -0,0 +1,84 @@
+<template>
+  <button
+    v-ripple="{ disabled: disabled || !ripple }"
+    class="var-site-button var-site--box"
+    :class="[
+      `var-site-button--${size}`,
+      block ? 'var-site--flex var-site-button--block' : 'var-site--inline-flex',
+      disabled ? 'var-site-button--disabled' : null,
+      text ? `var-site-button--text-${type}` : `var-site-button--${type}`,
+      text ? 'var-site-button--text' : 'var-elevation--1',
+      text && disabled ? 'var-site-button--text-disabled' : null,
+      round ? 'var-site-button--round' : null,
+      outline ? 'var-site-button--outline' : null,
+    ]"
+    :style="{
+      color: textColor,
+      background: color,
+    }"
+    :disabled="disabled"
+    @click="handleClick"
+    @touchstart="handleTouchstart"
+  >
+    <var-site-loading
+      class="var-site-button__loading"
+      :type="loadingType"
+      :size="loadingSize"
+      :radius="loadingRadius"
+      v-if="loading"
+    />
+    <div class="var-site-button__content" :class="[loading ? 'var-site-button--hidden' : null]">
+      <slot />
+    </div>
+  </button>
+</template>
+
+<script lang="ts">
+import Ripple from '../ripple'
+import Loading from '../loading'
+import { defineComponent } from 'vue'
+import { props } from './props'
+
+export default defineComponent({
+  name: 'VarSiteButton',
+  components: {
+    [Loading.name]: Loading,
+  },
+  directives: { Ripple },
+  props,
+  setup(props) {
+    const handleClick = (e: Event) => {
+      const { loading, disabled, onClick } = props
+
+      if (loading || disabled) {
+        return
+      }
+
+      onClick?.(e)
+    }
+
+    const handleTouchstart = (e: Event) => {
+      const { loading, disabled, onTouchstart } = props
+
+      if (loading || disabled) {
+        return
+      }
+
+      onTouchstart?.(e)
+    }
+
+    return {
+      handleClick,
+      handleTouchstart,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../styles/elevation';
+@import '../ripple/ripple';
+@import '../loading/loading';
+@import './button';
+</style>

package/site/components/button/button.less

@@ -0,0 +1,183 @@
+@site-button-default-color: #f5f5f5;
+@site-button-primary-color: var(--site-color-primary);
+@site-button-danger-color: var(--site-color-danger);
+@site-button-success-color: var(--site-color-success);
+@site-button-warning-color: var(--site-color-warning);
+@site-button-info-color: var(--site-color-info);
+@site-button-disabled-color: var(--site-color-disabled);
+@site-button-disabled-text-color: #bdbdbd;
+@site-button-border-radius: 4px;
+@site-button-mini-padding: 0 9px;
+@site-button-small-padding: 0 11px;
+@site-button-normal-padding: 0 15px;
+@site-button-large-padding: 0 22px;
+@site-button-round-padding: 6px;
+@site-button-mini-height: 20px;
+@site-button-small-height: 28px;
+@site-button-normal-height: 36px;
+@site-button-large-height: 44px;
+
+:root {
+  --site-button-default-color: @site-button-default-color;
+  --site-button-primary-color: @site-button-primary-color;
+  --site-button-danger-color: @site-button-danger-color;
+  --site-button-success-color: @site-button-success-color;
+  --site-button-warning-color: @site-button-warning-color;
+  --site-button-info-color: @site-button-info-color;
+  --site-button-disabled-color: @site-button-disabled-color;
+  --site-button-disabled-text-color: @site-button-disabled-text-color;
+  --site-button-border-radius: @site-button-border-radius;
+  --site-button-mini-padding: @site-button-mini-padding;
+  --site-button-small-padding: @site-button-small-padding;
+  --site-button-normal-padding: @site-button-normal-padding;
+  --site-button-large-padding: @site-button-large-padding;
+  --site-button-round-padding: @site-button-round-padding;
+  --site-button-mini-height: @site-button-mini-height;
+  --site-button-small-height: @site-button-small-height;
+  --site-button-normal-height: @site-button-normal-height;
+  --site-button-large-height: @site-button-large-height;
+}
+
+.var-site-button {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  border: none;
+  line-height: 1.2;
+  border-radius: var(--site-button-border-radius);
+  user-select: none;
+  cursor: pointer;
+  font-family: inherit;
+  transition: box-shadow 0.2s;
+  will-change: box-shadow;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  white-space: nowrap;
+
+  &:active {
+    box-shadow: 0 3px 5px -1px var(--site-shadow-key-umbra-opacity), 0 5px 8px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 14px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &__loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &--default {
+    color: inherit;
+    background-color: var(--site-button-default-color);
+  }
+
+  &--primary {
+    color: #fff;
+    background-color: var(--site-button-primary-color);
+  }
+
+  &--info {
+    color: #fff;
+    background-color: var(--site-button-info-color);
+  }
+
+  &--success {
+    color: #fff;
+    background-color: var(--site-button-success-color);
+  }
+
+  &--warning {
+    color: #fff;
+    background-color: var(--site-button-warning-color);
+  }
+
+  &--danger {
+    color: #fff;
+    background-color: var(--site-button-danger-color);
+  }
+
+  &--disabled {
+    background-color: var(--site-button-disabled-color);
+    color: var(--site-button-disabled-text-color);
+    cursor: not-allowed;
+    box-shadow: none !important;
+  }
+
+  &--block {
+    width: 100%;
+  }
+
+  &--text {
+    background-color: transparent;
+
+    &:active {
+      box-shadow: none;
+    }
+  }
+
+  &--text-default {
+    color: inherit;
+  }
+
+  &--text-primary {
+    color: var(--site-button-primary-color);
+  }
+
+  &--text-info {
+    color: var(--site-button-info-color);
+  }
+
+  &--text-success {
+    color: var(--site-button-success-color);
+  }
+
+  &--text-warning {
+    color: var(--site-button-warning-color);
+  }
+
+  &--text-danger {
+    color: var(--site-button-danger-color);
+  }
+
+  &--text-disabled {
+    color: var(--site-button-disabled-text-color);
+  }
+
+  &--normal {
+    height: var(--site-button-normal-height);
+    padding: var(--site-button-normal-padding);
+    font-size: var(--site-font-size-md);
+  }
+
+  &--large {
+    height: var(--site-button-large-height);
+    padding: var(--site-button-large-padding);
+    font-size: var(--site-font-size-lg);
+  }
+
+  &--small {
+    height: var(--site-button-small-height);
+    padding: var(--site-button-small-padding);
+    font-size: var(--site-font-size-sm);
+  }
+
+  &--mini {
+    height: var(--site-button-mini-height);
+    padding: var(--site-button-mini-padding);
+    font-size: var(--site-font-size-xs);
+  }
+
+  &--round {
+    padding: var(--site-button-round-padding);
+    border-radius: 50%;
+    height: auto;
+  }
+
+  &--outline {
+    border: thin solid currentColor;
+  }
+
+  &--hidden {
+    opacity: 0;
+  }
+}