foucui 1.0.1

package/components/QiuTag/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <span
+    class="qiu-tag"
+    :class="[
+      `qiu-tag--${type}`,
+      `qiu-tag--${effect}`,
+      `qiu-tag--${size}`,
+      { 'is-closable': closable },
+    ]"
+  >
+    <span class="qiu-tag__content">
+      <slot />
+    </span>
+    <button
+      v-if="closable"
+      type="button"
+      class="qiu-tag__close"
+      aria-label="close"
+      @click="onClose"
+    >
+      ×
+    </button>
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuTag' })
+
+type TagType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+type TagEffect = 'plain' | 'dark' | 'light'
+type TagSize = 'large' | 'default' | 'small'
+
+const props = withDefaults(
+  defineProps<{
+    type?: TagType
+    effect?: TagEffect
+    size?: TagSize
+    closable?: boolean
+  }>(),
+  {
+    type: 'primary',
+    effect: 'light',
+    size: 'default',
+    closable: false,
+  }
+)
+
+const emit = defineEmits<{
+  close: [MouseEvent]
+}>()
+
+const onClose = (e: MouseEvent) => {
+  e.stopPropagation()
+  emit('close', e)
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-tag {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  box-sizing: border-box;
+
+  &--default,
+  &--large {
+    height: 24px;
+    padding: 0 8px;
+  }
+
+  &--small {
+    height: 20px;
+    padding: 0 6px;
+    font-size: 11px;
+  }
+
+  &.is-closable {
+    padding-right: 4px;
+  }
+}
+
+.qiu-tag__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.qiu-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 4px;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.06);
+  }
+}
+
+@mixin tag-variant($name) {
+  .qiu-tag--#{$name}.qiu-tag--light {
+    color: var(--qiu-color-#{$name}, var(--qiu-color-#{$name}));
+    background: color-mix(in srgb, var(--qiu-color-#{$name}, var(--qiu-color-#{$name})) 12%, transparent);
+    border-color: color-mix(in srgb, var(--qiu-color-#{$name}, var(--qiu-color-#{$name})) 25%, transparent);
+  }
+
+  .qiu-tag--#{$name}.qiu-tag--plain {
+    color: var(--qiu-color-#{$name}, var(--qiu-color-#{$name}));
+    background: transparent;
+    border-color: color-mix(in srgb, var(--qiu-color-#{$name}, var(--qiu-color-#{$name})) 40%, transparent);
+  }
+
+  .qiu-tag--#{$name}.qiu-tag--dark {
+    color: #fff;
+    background: var(--qiu-color-#{$name}, var(--qiu-color-#{$name}));
+    border-color: var(--qiu-color-#{$name}, var(--qiu-color-#{$name}));
+
+    .qiu-tag__close:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+
+@include tag-variant(primary);
+@include tag-variant(success);
+@include tag-variant(warning);
+@include tag-variant(danger);
+@include tag-variant(info);
+</style>

package/components/QiuText/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <component
+    :is="tag"
+    class="qiu-text"
+    :class="textClass"
+    :style="textStyle"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuText' })
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | ''
+    size?: 'large' | 'default' | 'small'
+    truncated?: boolean
+    lineClamp?: number
+    tag?: string
+  }>(),
+  {
+    type: '',
+    size: 'default',
+    truncated: false,
+    lineClamp: 0,
+    tag: 'span',
+  }
+)
+
+const textClass = computed(() => [
+  props.type ? `qiu-text--${props.type}` : '',
+  props.size !== 'default' ? `qiu-text--${props.size}` : '',
+  {
+    'is-truncated': props.truncated,
+    'is-line-clamp': props.lineClamp > 0,
+  },
+])
+
+const textStyle = computed(() => {
+  if (props.lineClamp > 0) {
+    return {
+      WebkitLineClamp: String(props.lineClamp),
+    }
+  }
+  return undefined
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-text {
+  margin: 0;
+  font-size: var(--qiu-font-size, 14px);
+  line-height: 1.6;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+
+  &--large {
+    font-size: 16px;
+  }
+
+  &--small {
+    font-size: 12px;
+  }
+
+  &--primary {
+    color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
+  }
+
+  &--success {
+    color: var(--qiu-color-success, var(--qiu-color-success, #67c23a));
+  }
+
+  &--warning {
+    color: var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c));
+  }
+
+  &--danger {
+    color: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
+  }
+
+  &--info {
+    color: var(--qiu-color-info, var(--qiu-color-info, #909399));
+  }
+
+  &.is-truncated {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &.is-line-clamp {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+  }
+}
+</style>