@varlet/cli 2.0.0-alpha.1663499244572 → 2.0.0-alpha.1664031123039

package/site/components/button/button.less

@@ -1,183 +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: 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;
-  }
-}
+@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 +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
+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 +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,
-  },
-  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>>,
-  },
-}
+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 +1,54 @@
-<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>
+<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>