@varlet/cli 1.21.0 → 1.21.1-alpha.64

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;
+  }
+}

package/site/components/button/index.ts

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

package/site/components/button/props.ts

@@ -0,0 +1,70 @@
+import { props as loadingProps } from '../loading/props'
+import { pickProps } from '../utils/components'
+import type { PropType } from 'vue'
+
+function typeValidator(type: string): boolean {
+  return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type)
+}
+
+function sizeValidator(size: string): boolean {
+  return ['normal', 'mini', 'small', 'large'].includes(size)
+}
+
+export const props = {
+  type: {
+    type: String as PropType<'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'>,
+    default: 'default',
+    validator: typeValidator,
+  },
+  size: {
+    type: String as PropType<'normal' | 'mini' | 'small' | 'large'>,
+    default: 'normal',
+    validator: sizeValidator,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  round: {
+    type: Boolean,
+    default: false,
+  },
+  block: {
+    type: Boolean,
+    default: false,
+  },
+  text: {
+    type: Boolean,
+    default: false,
+  },
+  outline: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  ripple: {
+    type: Boolean,
+    default: true,
+  },
+  color: {
+    type: String,
+  },
+  textColor: {
+    type: String,
+  },
+  loadingRadius: {
+    type: [Number, String],
+    default: 12,
+  },
+  loadingType: pickProps(loadingProps, 'type'),
+  loadingSize: pickProps(loadingProps, 'size'),
+  onClick: {
+    type: Function as PropType<(e: Event) => void>,
+  },
+  onTouchstart: {
+    type: Function as PropType<(e: Event) => void>,
+  },
+}

package/site/components/cell/Cell.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="var-site-cell" :class="[border ? 'var-site-cell--border' : null]">
+    <div class="var-site-cell__icon" :class="[iconClass ? iconClass : null]" v-if="$slots.icon || icon">
+      <slot name="icon">
+        <var-site-icon class="var-site--flex" :name="icon" />
+      </slot>
+    </div>
+    <div class="var-site-cell__content">
+      <div class="var-site-cell__title" :class="[titleClass ? titleClass : null]">
+        <slot>{{ title }}</slot>
+      </div>
+      <div class="var-site-cell__desc" :class="[descClass ? descClass : null]" v-if="$slots.desc || desc">
+        <slot name="desc">
+          {{ desc }}
+        </slot>
+      </div>
+    </div>
+    <div class="var-site-cell__extra" :class="[extraClass ? extraClass : null]" v-if="$slots.extra">
+      <slot name="extra" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { props } from './props'
+import Icon from '../icon'
+
+export default defineComponent({
+  name: 'VarSiteCell',
+  components: {
+    [Icon.name]: Icon,
+  },
+  props,
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../icon/icon';
+@import './cell';
+</style>

package/site/components/cell/cell.less

@@ -0,0 +1,74 @@
+@site-cell-font-size: var(--site-font-size-md);
+@site-cell-desc-font-size: var(--site-font-size-sm);
+@site-cell-desc-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-font-size: @site-cell-font-size;
+  --site-cell-desc-font-size: @site-cell-desc-font-size;
+  --site-cell-desc-color: @site-cell-desc-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;
+  padding: var(--site-cell-padding);
+  position: relative;
+  box-sizing: border-box;
+  font-size: var(--site-cell-font-size);
+
+  &--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;
+  }
+
+  &__desc {
+    font-size: var(--site-cell-desc-font-size);
+    color: var(--site-cell-desc-color);
+  }
+
+  &__extra {
+    flex: 0;
+    margin-left: var(--site-cell-extra-left);
+  }
+}

package/site/components/cell/index.ts

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

package/site/components/cell/props.ts

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

package/site/components/context/index.ts

@@ -0,0 +1,17 @@
+import { reactive } from 'vue'
+
+interface Context {
+  locks: Record<any, number>
+  zIndex: number
+  touchmoveForbid: boolean
+}
+
+const context: Context = {
+  locks: {},
+  zIndex: 2000,
+  touchmoveForbid: true,
+}
+
+export const _ContextComponent = reactive<Context>(context)
+
+export default reactive<Context>(context)