zhui-plus 1.0.0 → 1.0.10

package/packages/components/badge/__tests__/badge.test.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import { ZhBadge } from '../index'
+
+describe('zh-badge.vue', () => {
+  it('should create', function () {
+    const wrapper = mount(ZhBadge)
+    expect(wrapper.classes()).toContain('zh-badge')
+    expect(wrapper.find('sub').classes()).toContain('zh-badge__type--danger')
+  })
+  it('should type', function () {
+    const wrapper = mount(ZhBadge, {
+      props: {
+        type: 'primary',
+        value: 10
+      }
+    })
+    expect(wrapper.find('sub').classes()).toContain('zh-badge__type--primary')
+    expect(wrapper.find('sub').text()).toEqual('10')
+  })
+  it('should max', function () {
+    const wrapper = mount(ZhBadge, {
+      props: {
+        value: 100
+      }
+    })
+    expect(wrapper.find('sub').text()).toEqual('99+')
+  })
+  it('should dot', function () {
+    const wrapper = mount(ZhBadge, {
+      props: {
+        value: 15,
+        isDot: true
+      }
+    })
+    expect(wrapper.find('sub').text()).toEqual('')
+    expect(wrapper.find('sub').classes()).toContain('zh-badge__dot')
+  })
+})

package/packages/components/badge/index.ts

@@ -0,0 +1,10 @@
+import ZhBadge from './src/zh-badge.vue'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component('ZhBadge', ZhBadge)
+  }
+}
+
+export { ZhBadge }

package/packages/components/badge/src/zh-badge.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+
+  const props = defineProps({
+    type: {
+      type: String,
+      default: 'danger',
+      validator: (value: string) => {
+        return ['primary', 'success', 'info', 'warning', 'danger'].includes(value)
+      }
+    },
+    value: {
+      type: [Number, String]
+    },
+    max: {
+      type: Number,
+      default: 99
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    },
+    isDot: {
+      type: Boolean,
+      default: false
+    }
+  })
+  // 内容
+  const content = computed(() => {
+    if (props.isDot) return ''
+    if (typeof props.value === 'number' && typeof props.max === 'number') {
+      return props.max < props.value ? `${props.max}+` : `${props.value}`
+    }
+    return `${props.value}`
+  })
+  const classCom = computed(() => {
+    const isDot = props.isDot ? 'zh-badge__dot' : 'zh-badge__content'
+    const type = props.type ? `zh-badge__type--${props.type}` : ''
+    return [isDot, type]
+  })
+</script>
+
+<template>
+  <div class="zh-badge relative inline-block align-middle">
+    <slot></slot>
+    <sub
+      v-show="!hidden && (content || content === '0' || isDot)"
+      :class="['zh-sup__base', ...classCom]"
+      v-text="content"
+    ></sub>
+  </div>
+</template>
+
+<style lang="scss">
+  @use"../style.scss" as *;
+  .zh-sup__base {
+    transform: translateY(-50%) translate(100%);
+    @apply align-baseline;
+  }
+  .zh-badge__content {
+    padding: 0 6px;
+    height: $badgeSize;
+    right: 1px + ($badgeSize / 2);
+    @apply rounded-full text-white inline-flex justify-center items-center whitespace-nowrap text-xs absolute top-0 border;
+  }
+  .zh-badge__dot {
+    height: 8px;
+    width: 8px;
+    @apply absolute top-0 right-0.5 rounded-full;
+  }
+  .zh-badge__type--primary {
+    @apply bg-primary;
+  }
+  .zh-badge__type--success {
+    @apply bg-success;
+  }
+  .zh-badge__type--warning {
+    @apply bg-warning;
+  }
+  .zh-badge__type--danger {
+    @apply bg-danger;
+  }
+  .zh-badge__type--info {
+    @apply bg-info;
+  }
+</style>

package/packages/components/badge/style.scss

@@ -0,0 +1 @@
+$badgeSize: 19px;

package/packages/components/button/__tests__/button.test.ts

@@ -0,0 +1,94 @@
+import { mount } from '@vue/test-utils'
+import { ZhButton } from '../index'
+import { ZhIcon } from '../../icon'
+
+const DEFAULT_TEXT = 'ZH is the third layer of Taoist sky'
+describe('zh-button.vue', () => {
+  it('create', () => {
+    const wrapper = mount(ZhButton)
+    expect(wrapper.classes()).toContain('zh-button')
+    expect(wrapper.classes()).toContain('zh-button-default')
+  })
+  it('size', function () {
+    const wrapperPrimary = mount(ZhButton, {
+      props: { size: 'large' }
+    })
+    expect(wrapperPrimary.classes()).toContain('zh-is-large')
+  })
+  it('plain', function () {
+    const wrapperPrimary = mount(ZhButton, {
+      props: { plain: true }
+    })
+    expect(wrapperPrimary.classes()).toContain('zh-is-plain')
+  })
+  it('round', function () {
+    const wrapperPrimary = mount(ZhButton, {
+      props: { round: true }
+    })
+    expect(wrapperPrimary.classes()).toContain('zh-is-round')
+  })
+  it('circle', function () {
+    const wrapperPrimary = mount(ZhButton, {
+      props: { circle: true }
+    })
+    expect(wrapperPrimary.classes()).toContain('zh-is-circle')
+  })
+  it('nativeType', function () {
+    const wrapper = mount(ZhButton, {
+      props: { nativeType: 'submit' }
+    })
+    expect(wrapper.attributes('type')).toBe('submit')
+  })
+  it('loading', async function () {
+    const wrapper = mount(ZhButton, {
+      props: { loading: true }
+    })
+    expect(wrapper.classes()).toContain('zh-is-disabled')
+    expect(wrapper.findComponent(ZhIcon).exists()).toBeTruthy()
+  })
+  it('should render text', function () {
+    const wrapper = mount(ZhButton, {
+      slots: {
+        default: DEFAULT_TEXT
+      }
+    })
+    expect(wrapper.text()).toEqual(DEFAULT_TEXT)
+  })
+  it('should handle click', async function () {
+    const wrapper = mount(ZhButton, {
+      slots: {
+        default: DEFAULT_TEXT
+      }
+    })
+    await wrapper.trigger('click')
+    expect(wrapper.emitted()).toBeDefined()
+  })
+  test('handle click inside', async () => {
+    const wrapper = mount(ZhButton, {
+      slots: {
+        default: '<span class="inner-slot"></span>'
+      }
+    })
+    // @ts-ignore
+    wrapper.element.querySelector<HTMLElement>('.inner-slot')!.click()
+    expect(wrapper.emitted()).toBeDefined()
+  })
+  test('loading implies disabled', async () => {
+    const wrapper = mount(ZhButton, {
+      slots: {
+        default: DEFAULT_TEXT
+      },
+      props: { loading: true }
+    })
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+  it('disabled', async () => {
+    const wrapper = mount(ZhButton, {
+      props: { disabled: true }
+    })
+    expect(wrapper.classes()).toContain('zh-is-disabled')
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+})

package/packages/components/button/__tests__/buttonGroup.test.ts

@@ -0,0 +1,46 @@
+import { mount } from '@vue/test-utils'
+import { ZhButton, ZhButtonGroup } from '../index'
+import { nextTick, ref } from 'vue'
+
+describe('Button Group', () => {
+  it('create', () => {
+    const wrapper = mount(ZhButtonGroup, {
+      slots: {
+        default: [ZhButton, ZhButton]
+      }
+    })
+    expect(wrapper.classes()).toContain('zh-button-group')
+    expect(wrapper.findAll('button').length).toBe(2)
+  })
+  it('should button group size', async function () {
+    const size = ref<'default' | 'large' | 'small'>('small')
+    const wrapper = mount(ZhButtonGroup, {
+      props: {
+        size: size.value
+      },
+      slots: {
+        default: [ZhButton, ZhButton]
+      }
+    })
+    expect(wrapper.classes()).toContain('zh-button-group')
+    expect(wrapper.findComponent(ZhButton).classes()).toContain('zh-is-small')
+    size.value = 'large'
+    await nextTick()
+    expect(wrapper.findComponent(ZhButton).classes()).toContain('zh-is-large')
+  })
+  it('should button group type', async function () {
+    const type = ref('default')
+    const wrapper = mount(ZhButtonGroup, {
+      props: {
+        type: type.value
+      },
+      slots: {
+        default: [ZhButton, ZhButton]
+      }
+    })
+    expect(wrapper.findComponent(ZhButton).classes()).toContain('zh-button-default')
+    type.value = 'primary'
+    await nextTick()
+    expect(wrapper.findComponent(ZhButton).classes()).toContain('zh-button-primary')
+  })
+})

package/packages/components/button/index.ts

@@ -0,0 +1,11 @@
+import ZhButton from './src/zh-button.vue'
+import ZhButtonGroup from './src/zh-button-group.vue'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component('ZhButton', ZhButton)
+    app.component('ZhButtonGroup', ZhButtonGroup)
+  }
+}
+export { ZhButtonGroup, ZhButton }

package/packages/components/button/src/zh-button-group.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+  import { provide, toRef } from 'vue'
+  const props = defineProps({
+    size: {
+      type: String,
+      default: 'default',
+      validator: (value: string) => {
+        return ['default', 'large', 'small'].includes(value)
+      }
+    },
+    // 按钮类型
+    type: {
+      type: String,
+      default: 'default',
+      validator: (value: string) => {
+        return ['default', 'primary', 'success', 'info', 'warning', 'danger', 'text'].includes(
+          value
+        )
+      }
+    }
+  })
+  provide('button-group-size', toRef(props, 'size'))
+  provide('button-group-type', toRef(props, 'type'))
+</script>
+
+<template>
+  <div class="zh-button-group inline-block align-middle">
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+  .zh-button-group .zh-button {
+    margin-left: 0 !important;
+  }
+  .zh-button-group .zh-button:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .zh-button-group .zh-button:last-child {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .zh-button-group .zh-button:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+  .zh-button-group .zh-button:not(:last-child) {
+    margin-right: -1px;
+  }
+</style>

package/packages/components/button/src/zh-button.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { computed, inject, ref, Ref } from "vue";
+import ZhIcon from "../../icon/src/zh-icon.vue";
+// 定义名称
+// 定义事件
+const $emit = defineEmits(["click"]);
+// 定义props
+const props = defineProps({
+  size: {
+    type: String,
+    validator: (value: string) => {
+      return ["default", "large", "small"].includes(value);
+    }
+  },
+  // 按钮类型
+  type: {
+    type: String,
+    default: "default",
+    validator: (value: string) => {
+      return ["default", "primary", "success", "info", "warning", "danger", "text"].includes(
+        value
+      );
+    }
+  },
+  // 是否为朴素按钮
+  plain: {
+    type: Boolean,
+    default: false
+  },
+  // 是否为圆形
+  round: {
+    type: Boolean,
+    default: false
+  },
+  // 是否正在加载中
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  // 是否为圆形
+  circle: {
+    type: Boolean,
+    default: false
+  },
+  // 自定义加载中图标
+  loadingIcon: {
+    type: String,
+    default: "Loading"
+  },
+  // 是否禁用状态
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  iconColor: {
+    type: String,
+    default: "white"
+  },
+  // 原生type属性
+  nativeType: {
+    type: String as () => "button" | "reset" | "submit" | undefined,
+    default: "button"
+  }
+});
+// 类名计算属性
+const classComputed = computed(() => {
+  // const sizeInject = inject<Ref<number | undefined>>('button-group-size', ref(undefined))
+  const typeInject = inject<Ref<string | undefined>>("button-group-type", ref(undefined));
+  // const typeClass = props.type ? 'zh-button-' + props.type : 'zh-button-default'
+  const typeClass =
+    props.type === "default" && typeInject.value
+      ? "zh-button-" + typeInject.value
+      : "zh-button-" + props.type;
+  const isPlain = props.plain ? "zh-is-plain" : "";
+  const isRound = props.round ? "zh-is-round" : "";
+  const isLoading = props.loading ? "zh-is-disabled is-Loading" : "";
+  const isDisabled = props.disabled || props.loading ? "zh-is-disabled" : "";
+  const isCircle = props.circle ? "zh-is-circle" : "";
+  const isSize = props.size ? `zh-is-${props.size}` : "";
+  return [typeClass, isPlain, isRound, isDisabled, isLoading, isCircle, isSize];
+});
+// 禁用点击计算属性
+const disabledComputed = computed(() => {
+  const isDisabled = props.disabled || props.loading;
+  return {
+    isDisabled
+  };
+});
+// 接受button-group的注入
+const groupInjectComputed = computed(() => {
+  const sizeInject = inject<Ref<number | undefined>>("button-group-size", ref(undefined));
+  const typeInject = inject<Ref<string | undefined>>("button-group-type", ref(undefined));
+  const classData = <string []>[];
+  if (sizeInject.value) {
+    const size = (props.size ? props.size : sizeInject.value) ?? "";
+    classData.push(`zh-is-${size}`);
+  }
+  if (typeInject.value) {
+    const type = props.type === "default" ? typeInject.value : props.type;
+    classData.push(`zh-button-${type}`);
+  }
+  return classData;
+});
+// 点击事件
+const clickEmit = (event: any) => {
+  const isEmit = props.disabled || props.loading;
+  if (!isEmit) $emit("click", event);
+};
+</script>
+
+<template>
+  <button
+    :class="['zh-button', ...groupInjectComputed, ...classComputed]"
+    :type="nativeType"
+    :disabled="disabledComputed.isDisabled"
+    @click="clickEmit($event)"
+  >
+    <span>
+      <zh-icon v-if="loading" :name="loadingIcon" :color="iconColor" class="animate-spin mr-0.5" />
+      <slot />
+    </span>
+  </button>
+</template>
+
+<style>
+@import '../style/index.css';
+/*自身属性*/
+.zh-button + .zh-button {
+  margin-left: 12px;
+}
+
+.zh-is-large {
+  height: 40px !important;
+  padding: 12px 19px !important;
+}
+
+.zh-is-small {
+  height: 24px !important;
+  padding: 5px 11px !important;
+  font-size: 12px !important;
+}
+
+.zh-is-large.zh-is-circle {
+  width: 40px !important;
+  padding: 12px !important;
+}
+
+.zh-is-small.zh-is-circle {
+  width: 24px;
+  padding: 5px !important;
+}
+</style>

package/packages/components/button/style/index.css

@@ -0,0 +1,140 @@
+/*@layer components {*/
+/*按钮基础属性*/
+.zh-button {
+    /*布局 高度*/
+    @apply inline-flex justify-center items-center h-8;
+    /*边距*/
+    @apply px-3.5 py-2;
+    /*边框*/
+    @apply border rounded;
+    /*字体*/
+    @apply text-sm text-gray-700;
+    @apply transition cursor-pointer whitespace-nowrap;
+}
+
+/*按钮默认属性*/
+/*.button-default {*/
+/*  @apply hover:bg-sky-200 hover:bg-opacity-50 hover:text-sky-400 hover:border-sky-200 active:border-sky-400;*/
+/*}*/
+.zh-button-default:not(.zh-is-disabled) {
+    @apply hover:bg-sky-200 hover:bg-opacity-50 hover:text-sky-400 hover:border-sky-200 active:border-sky-400;
+}
+
+/*primary 类型按钮*/
+.zh-button-primary {
+    @apply bg-primary text-white;
+}
+
+.zh-button-primary:not(.zh-is-disabled) {
+    @apply hover:bg-opacity-80;
+    @apply active:bg-sky-600 !important;
+}
+
+/*primary 类型朴素按钮*/
+.zh-button-primary.zh-is-plain {
+    @apply border-sky-400 text-primary bg-sky-200;
+}
+
+.zh-button-primary.zh-is-plain:not(.zh-is-disabled) {
+    @apply hover:bg-primary hover:text-white;
+}
+
+.zh-button-success {
+    @apply bg-success text-white;
+}
+
+.zh-button-success:not(.zh-is-disabled) {
+    @apply hover:bg-opacity-80;
+    @apply active:bg-green-600 !important;
+}
+
+.zh-button-success.zh-is-plain {
+    @apply text-success bg-green-200 border-green-400;
+}
+
+.zh-button-success.zh-is-plain:not(.zh-is-disabled) {
+    @apply hover:bg-success hover:text-white;
+}
+
+.zh-button-info {
+    @apply bg-info text-white;
+}
+
+.zh-button-info:not(.zh-is-disabled) {
+    @apply hover:bg-opacity-80;
+    @apply active:bg-gray-600;
+}
+
+.zh-button-info.zh-is-plain {
+    @apply text-info bg-gray-200 border-gray-400;
+}
+
+.zh-button-info.zh-is-plain:not(.zh-is-disabled) {
+    @apply hover:bg-info hover:text-white;
+}
+
+.zh-button-warning {
+    @apply bg-warning text-white;
+}
+
+.zh-button-warning:not(.zh-is-disabled) {
+    @apply hover:bg-opacity-80;
+    @apply active:bg-orange-600 !important;
+}
+
+.zh-button-warning.zh-is-plain {
+    @apply text-warning bg-orange-200 border-orange-400;
+}
+
+.zh-button-warning.zh-is-plain:not(.zh-is-disabled) {
+    @apply hover:bg-warning hover:text-white;
+}
+
+.zh-button-danger {
+    @apply bg-danger text-white;
+}
+
+.zh-button-danger:not(.zh-is-disabled) {
+    @apply hover:bg-opacity-80;
+    @apply active:bg-red-600 !important;
+}
+
+.zh-button-danger.zh-is-plain {
+    @apply text-danger bg-red-200 border-red-400;
+}
+
+.zh-button-danger.zh-is-plain:not(.zh-is-disabled) {
+    @apply hover:bg-danger hover:text-white;
+}
+
+/*文字类型按钮*/
+.zh-button-text {
+    @apply bg-transparent text-primary border-none !important;
+}
+
+.zh-button-text.zh-is-disabled {
+    @apply text-gray-400 !important;
+}
+
+.zh-button-text:not(.zh-is-disabled) {
+    @apply hover:text-sky-300 active:text-sky-600 !important;
+}
+
+.zh-is-plain {
+    /*color: deepskyblue;*/
+    @apply bg-opacity-40;
+}
+
+.zh-is-round {
+    @apply rounded-full;
+}
+
+.zh-is-disabled {
+    @apply cursor-not-allowed opacity-70;
+}
+
+.zh-is-circle {
+    @apply rounded-full w-8;
+}
+
+/*}*/