@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/components/button/props.ts

@@ -1,70 +1,78 @@
-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>,
-  },
-}
+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,42 +1,54 @@
-<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>
+<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,74 +1,78 @@
-@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);
-  }
-}
+@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 +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
+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 +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,
-  },
-}
+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,
+  },
+}