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

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)

package/site/components/context/lock.ts

@@ -0,0 +1,103 @@
+import { watch, onBeforeMount, onUnmounted, onDeactivated, onActivated, getCurrentInstance } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+import context from '.'
+
+export function resolveLock() {
+  const lockCounts: number = Object.keys(context.locks).length
+  lockCounts <= 0 ? document.body.classList.remove('var-site--lock') : document.body.classList.add('var-site--lock')
+}
+
+export function addLock(uid: number) {
+  context.locks[uid] = 1
+  resolveLock()
+}
+
+export function releaseLock(uid: number) {
+  delete context.locks[uid]
+  resolveLock()
+}
+
+/**
+ * 组件锁操作
+ * @param props 组件props
+ * @param state 组件props中控制组件加锁的开关对应的key值
+ * @param use 组件props中控制组件加锁的开关是否可用对应的key值
+ */
+export function useLock(props: any, state: string, use?: string) {
+  const { uid } = getCurrentInstance() as ComponentInternalInstance
+  if (use) {
+    watch(
+      () => props[use],
+      (newValue: boolean) => {
+        if (newValue === false) {
+          // 改变为禁用状态 组件解锁
+          releaseLock(uid)
+        } else if (newValue === true && props[state] === true) {
+          // 改变为启用状态 并且popup处于开启状态 组件加锁
+          addLock(uid)
+        }
+      }
+    )
+  }
+
+  watch(
+    () => props[state],
+    (newValue: boolean) => {
+      if (use && props[use] === false) {
+        return
+      }
+
+      if (newValue === true) {
+        // popup开启 组件加锁
+        addLock(uid)
+      } else {
+        // popup关闭 组件解锁
+        releaseLock(uid)
+      }
+    }
+  )
+
+  onBeforeMount(() => {
+    if (use && props[use] === false) {
+      return
+    }
+
+    if (props[state] === true) {
+      // popup处于开启状态 组件挂载 组件加锁
+      addLock(uid)
+    }
+  })
+
+  onUnmounted(() => {
+    if (use && props[use] === false) {
+      return
+    }
+
+    if (props[state] === true) {
+      // popup处于开启状态 组件卸载 组件解锁
+      releaseLock(uid)
+    }
+  })
+
+  onActivated(() => {
+    if (use && props[use] === false) {
+      return
+    }
+
+    if (props[state] === true) {
+      // popup处于开启状态 组件处于keepalive前台 组件加锁
+      addLock(uid)
+    }
+  })
+
+  onDeactivated(() => {
+    if (use && props[use] === false) {
+      return
+    }
+
+    if (props[state] === true) {
+      // popup处于开启状态 组件处于keepalive后台 组件解锁
+      releaseLock(uid)
+    }
+  })
+}

package/site/components/context/zIndex.ts

@@ -0,0 +1,20 @@
+import context from './index'
+import { watch, ref } from 'vue'
+import type { Ref } from 'vue'
+
+export function useZIndex(source: any, count: number) {
+  const zIndex: Ref<number> = ref(context.zIndex)
+
+  watch(
+    source,
+    (newValue) => {
+      if (newValue) {
+        context.zIndex += count
+        zIndex.value = context.zIndex
+      }
+    },
+    { immediate: true }
+  )
+
+  return { zIndex }
+}

package/site/components/icon/Icon.vue

@@ -0,0 +1,68 @@
+<template>
+  <component
+    class="var-site-icon"
+    :is="isURL(name) ? 'img' : 'i'"
+    :class="[
+      `${namespace}--set`,
+      isURL(name) ? 'var-site-icon__image' : `${namespace}-${nextName}`,
+      shrinking ? 'var-site-icon--shrinking' : null,
+    ]"
+    :style="{
+      color,
+      transition: `all ${toNumber(transition)}ms`,
+      width: isURL(name) ? toSizeUnit(size) : null,
+      height: isURL(name) ? toSizeUnit(size) : null,
+      fontSize: toSizeUnit(size),
+    }"
+    :src="isURL(name) ? nextName : null"
+    @click="onClick"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, ref, nextTick } from 'vue'
+import { isURL, toNumber } from '../utils/shared'
+import { toSizeUnit } from '../utils/elements'
+import { props } from './props'
+import type { Ref } from 'vue'
+
+export default defineComponent({
+  name: 'VarSiteIcon',
+  props,
+  setup(props) {
+    const nextName: Ref<string | undefined> = ref('')
+    const shrinking: Ref<boolean> = ref(false)
+
+    const handleNameChange = async (newName: string | undefined, oldName: string | undefined) => {
+      const { transition } = props
+
+      if (oldName == null || toNumber(transition) === 0) {
+        nextName.value = newName
+        return
+      }
+
+      shrinking.value = true
+      await nextTick()
+      setTimeout(() => {
+        oldName != null && (nextName.value = newName)
+        shrinking.value = false
+      }, toNumber(transition))
+    }
+
+    watch(() => props.name, handleNameChange, { immediate: true })
+
+    return {
+      nextName,
+      shrinking,
+      isURL,
+      toNumber,
+      toSizeUnit,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './icon';
+</style>

package/site/components/icon/icon.less

@@ -0,0 +1,25 @@
+@import '@varlet/icons/dist/css/varlet-icons.less';
+
+@site-icon-size: 20px;
+
+:root {
+  --site-icon-size: @site-icon-size;
+}
+
+.var-site-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--site-icon-size);
+  color: inherit;
+
+  &--shrinking {
+    transform: scale(0);
+  }
+
+  &__image {
+    width: var(--site-icon-size);
+    height: var(--site-icon-size);
+    object-fit: cover;
+  }
+}

package/site/components/icon/index.ts

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

package/site/components/icon/props.ts

@@ -0,0 +1,24 @@
+import type { PropType } from 'vue'
+
+export const props = {
+  name: {
+    type: String,
+  },
+  size: {
+    type: [Number, String],
+  },
+  color: {
+    type: String,
+  },
+  namespace: {
+    type: String,
+    default: 'var-icon',
+  },
+  transition: {
+    type: [Number, String],
+    default: 0,
+  },
+  onClick: {
+    type: Function as PropType<(event: Event) => void>,
+  },
+}