@varlet/cli 2.15.1 → 2.16.0-alpha.1693852004525

package/site/components/button/button.less

@@ -1,183 +0,0 @@
-@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: var(--site-color-text-disabled);
-@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;
-  border-radius: var(--site-button-border-radius);
-  user-select: none;
-  cursor: pointer;
-  font-family: inherit;
-  transition: box-shadow 0.2s, background-color 0.25s;
-  will-change: box-shadow;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  white-space: nowrap;
-  line-height: 1;
-
-  &:active {
-    box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity),
-      0 1px 14px 0 var(--shadow-key-ambient-opacity);
-  }
-
-  &__loading[var-site-button-cover] {
-    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

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

@@ -1,78 +0,0 @@
-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,
-  },
-  autoLoading: {
-    type: Boolean,
-    default: false,
-  },
-  loadingRadius: {
-    type: [Number, String],
-    default: 12,
-  },
-  loadingType: pickProps(loadingProps, 'type'),
-  loadingSize: pickProps(loadingProps, 'size'),
-  loadingColor: {
-    ...pickProps(loadingProps, 'color'),
-    default: 'currentColor',
-  },
-  onClick: {
-    type: Function as PropType<(e: Event) => void | Promise<any>>,
-  },
-  onTouchstart: {
-    type: Function as PropType<(e: Event) => void | Promise<any>>,
-  },
-}

package/site/components/cell/Cell.vue

@@ -1,54 +0,0 @@
-<template>
-  <div :class="classes(n(), [border, n('--border')])">
-    <div :class="classes(n('icon'), [iconClass, iconClass])" v-if="$slots.icon || icon">
-      <slot name="icon">
-        <var-icon class="var--flex" :name="icon" />
-      </slot>
-    </div>
-    <div :class="n('content')">
-      <div :class="classes(n('title'), [titleClass, titleClass])">
-        <slot>{{ title }}</slot>
-      </div>
-      <div
-        :class="classes(n('description'), [descriptionClass, descriptionClass])"
-        v-if="$slots.description || description"
-      >
-        <slot name="description">
-          {{ description }}
-        </slot>
-      </div>
-    </div>
-    <div :class="classes(n('extra'), [extraClass, extraClass])" v-if="$slots.extra">
-      <slot name="extra" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import VarIcon from '../icon'
-import { defineComponent } from 'vue'
-import { props } from './props'
-import { createNamespace } from '../utils/components'
-
-const { n, classes } = createNamespace('cell')
-
-export default defineComponent({
-  name: 'VarCell',
-  components: {
-    VarIcon,
-  },
-  props,
-  setup() {
-    return {
-      n,
-      classes,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import '../icon/icon';
-@import './cell';
-</style>

package/site/components/cell/cell.less

@@ -1,78 +0,0 @@
-@site-cell-color: var(--site-color-text);
-@site-cell-font-size: var(--site-font-size-md);
-@site-cell-description-font-size: var(--site-font-size-sm);
-@site-cell-description-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-color: @site-cell-color;
-  --site-cell-font-size: @site-cell-font-size;
-  --site-cell-description-font-size: @site-cell-description-font-size;
-  --site-cell-description-color: @site-cell-description-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;
-  width: 100%;
-  padding: var(--site-cell-padding);
-  position: relative;
-  box-sizing: border-box;
-  font-size: var(--site-cell-font-size);
-  color: var(--site-cell-color);
-
-  &--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;
-  }
-
-  &__description {
-    font-size: var(--site-cell-description-font-size);
-    color: var(--site-cell-description-color);
-  }
-
-  &__extra {
-    flex: 0;
-    margin-left: var(--site-cell-extra-left);
-  }
-}

package/site/components/cell/index.ts

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

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

package/site/components/context/index.ts

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

package/site/components/context/lock.ts

@@ -1,92 +0,0 @@
-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()
-}
-
-export function useLock(source: any, useSource?: any) {
-  const { uid } = getCurrentInstance() as ComponentInternalInstance
-
-  if (useSource) {
-    watch(useSource, (newValue: boolean) => {
-      if (newValue === false) {
-        // 改变为禁用状态 组件解锁
-        releaseLock(uid)
-      } else if (newValue === true && source() === true) {
-        // 改变为启用状态 并且popup处于开启状态 组件加锁
-        addLock(uid)
-      }
-    })
-  }
-
-  watch(source, (newValue: boolean) => {
-    if (useSource && useSource() === false) {
-      return
-    }
-
-    if (newValue === true) {
-      // popup开启 组件加锁
-      addLock(uid)
-    } else {
-      // popup关闭 组件解锁
-      releaseLock(uid)
-    }
-  })
-
-  onBeforeMount(() => {
-    if (useSource && useSource() === false) {
-      return
-    }
-
-    if (source() === true) {
-      // popup处于开启状态 组件挂载 组件加锁
-      addLock(uid)
-    }
-  })
-
-  onUnmounted(() => {
-    if (useSource && useSource() === false) {
-      return
-    }
-
-    if (source() === true) {
-      // popup处于开启状态 组件卸载 组件解锁
-      releaseLock(uid)
-    }
-  })
-
-  onActivated(() => {
-    if (useSource && useSource() === false) {
-      return
-    }
-
-    if (source() === true) {
-      // popup处于开启状态 组件处于keepalive前台 组件加锁
-      addLock(uid)
-    }
-  })
-
-  onDeactivated(() => {
-    if (useSource && useSource() === false) {
-      return
-    }
-
-    if (source() === true) {
-      // popup处于开启状态 组件处于keepalive后台 组件解锁
-      releaseLock(uid)
-    }
-  })
-}

package/site/components/context/zIndex.ts

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

@@ -1,75 +0,0 @@
-<template>
-  <component
-    :is="isURL(name) ? 'img' : 'i'"
-    :class="
-      classes(
-        n(),
-        `${namespace}--set`,
-        [isURL(name), n('image'), `${namespace}-${nextName}`],
-        [shrinking, n('--shrinking')]
-      )
-    "
-    :style="{
-      color,
-      transition: `transform ${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 '@varlet/shared'
-import { props } from './props'
-import { toSizeUnit } from '../utils/elements'
-import type { Ref } from 'vue'
-import { createNamespace } from '../utils/components'
-
-const { n, classes } = createNamespace('icon')
-
-export default defineComponent({
-  name: 'VarIcon',
-  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 {
-      n,
-      classes,
-      nextName,
-      shrinking,
-      isURL,
-      toNumber,
-      toSizeUnit,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import './icon';
-</style>

package/site/components/icon/icon.less

@@ -1,38 +0,0 @@
-@import '@varlet/icons/dist/css/varlet-icons.less';
-
-@site-icon-size: 20px;
-
-:root {
-  --site-icon-size: @site-icon-size;
-}
-
-.var-site-icon {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--site-icon-size);
-  color: inherit;
-  vertical-align: bottom;
-
-  &::before {
-    position: relative;
-    display: inline-block;
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    font-weight: normal;
-    font-style: normal;
-    line-height: 1;
-  }
-
-  &--shrinking {
-    transform: scale(0);
-  }
-
-  &__image {
-    width: var(--site-icon-size);
-    height: var(--site-icon-size);
-    object-fit: cover;
-  }
-}

package/site/components/icon/index.ts

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