foucui 1.0.1 → 2.0.0

package/components/QiuTag/index.vue

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

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