hy-app 0.1.1 → 0.1.3

package/components/hy-tag/hy-tag.vue

@@ -11,7 +11,7 @@
             :customStyle="{ marginRight: '3px' }"
           ></HyIcon>
         </slot>
-        <text :class="textClass">
+        <text :class="textClass" :style="{ color: color }">
           <slot>
             {{ text }}
           </slot>
@@ -34,9 +34,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, toRefs } from "vue";
+import { computed, type CSSProperties, toRefs } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import HyTransition from "../hy-transition/hy-transition.vue";
 import HyIcon from "../hy-icon/hy-icon.vue";
 import { IconConfig } from "../../config";
@@ -55,7 +55,8 @@ const {
   color,
   borderColor,
   iconColor,
-  disabled
+  disabled,
+  customStyle,
 } = toRefs(props);
 const emit = defineEmits(["click", "close"]);
 
@@ -70,7 +71,7 @@ const tagClass = computed((): string[] => {
     const arr = [
       !plain.value && `hy-tag--${type.value}`,
       plain.value && `hy-tag--${type.value}--plain`,
-      plain.value && plainFill.value && `hy-tag--${type.value}--plain--fill`
+      plain.value && plainFill.value && `hy-tag--${type.value}--plain--fill`,
     ].filter(Boolean);
     classes = classes.concat(arr as string[]);
   }
@@ -81,19 +82,16 @@ const tagClass = computed((): string[] => {
  * */
 const tagStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    marginRight: closable ? "10px" : 0,
-    marginTop: closable ? "10px" : 0
+    marginRight: closable.value ? "10px" : 0,
+    marginTop: closable.value ? "10px" : 0,
   };
   if (bgColor.value) {
-    style.backgroundColor = bgColor.value;
-  }
-  if (color.value) {
-    style.color = color.value;
+    style.background = bgColor.value;
   }
   if (borderColor.value) {
     style.borderColor = borderColor.value;
   }
-  return style;
+  return Object.assign(style, customStyle.value);
 });
 
 /**
@@ -104,7 +102,7 @@ const textClass = computed((): string[] => {
     `hy-tag__text`,
     `hy-tag__text--${type.value}`,
     plain.value && `hy-tag__text--${type.value}--plain`,
-    `hy-tag__text--${size.value}`
+    `hy-tag__text--${size.value}`,
   ].filter(Boolean) as string[];
 });
 
@@ -131,8 +129,8 @@ const hyIconColor = computed(() => {
   return iconColor.value
     ? iconColor.value
     : plain.value
-    ? type.value
-    : "#ffffff";
+      ? type.value
+      : "#ffffff";
 });
 
 /**
@@ -150,225 +148,12 @@ const clickHandler = () => {
   if (!disabled.value) {
     emit("click", {
       value: text.value,
-      name: name.value
+      name: name.value,
     });
   }
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-tag {
-  @include flex;
-  align-items: center;
-  border-style: solid;
-
-  &__wrapper {
-    position: relative;
-  }
-
-  /*禁用*/
-  &--disabled {
-    background-color: $hy-color-disable-bg;
-    color: $hy-text-color-disable;
-    border: 1px solid $hy-color-disable-icon;
-  }
-
-  &--circle {
-    border-radius: 100px;
-  }
-
-  &--square {
-    border-radius: 3px;
-  }
-
-  &__icon {
-    margin-right: 4px;
-  }
-
-  &__text {
-    &--small {
-      font-size: $hy-font-size-sm;
-      line-height: $hy-font-size-sm;
-    }
-
-    &--medium {
-      font-size: $hy-font-size-base;
-      line-height: $hy-font-size-base;
-    }
-
-    &--large {
-      font-size: $hy-font-size-lg;
-      line-height: $hy-font-size-lg;
-    }
-  }
-
-  &--small {
-    height: 22px;
-    line-height: 22px;
-    padding: 0 5px;
-  }
-
-  &--medium {
-    height: 26px;
-    line-height: 22px;
-    padding: 0 10px;
-  }
-
-  &--large {
-    height: 32px;
-    line-height: 32px;
-    padding: 0 15px;
-  }
-
-  &--primary {
-    background-color: $hy-primary;
-    border-width: 1px;
-    border-color: $hy-primary;
-  }
-
-  &--primary--plain {
-    border-width: 1px;
-    border-color: $hy-primary;
-  }
-
-  &--primary--plain--fill {
-    background-color: #ecf5ff;
-  }
-
-  &__text--primary {
-    color: #ffffff;
-  }
-
-  &__text--primary--plain {
-    color: $hy-primary;
-  }
-
-  &--error {
-    background-color: $hy-error;
-    border-width: 1px;
-    border-color: $hy-error;
-  }
-
-  &--error--plain {
-    border-width: 1px;
-    border-color: $hy-error;
-  }
-
-  &--error--plain--fill {
-    background-color: #fef0f0;
-  }
-
-  &__text--error {
-    color: #ffffff;
-  }
-
-  &__text--error--plain {
-    color: $hy-error;
-  }
-
-  &--warning {
-    background-color: $hy-warning;
-    border-width: 1px;
-    border-color: $hy-warning;
-  }
-
-  &--warning--plain {
-    border-width: 1px;
-    border-color: $hy-warning;
-  }
-
-  &--warning--plain--fill {
-    background-color: #fdf6ec;
-  }
-
-  &__text--warning {
-    color: #ffffff;
-  }
-
-  &__text--warning--plain {
-    color: $hy-warning;
-  }
-
-  &--success {
-    background-color: $hy-success;
-    border-width: 1px;
-    border-color: $hy-success;
-  }
-
-  &--success--plain {
-    border-width: 1px;
-    border-color: $hy-success;
-  }
-
-  &--success--plain--fill {
-    background-color: #f5fff0;
-  }
-
-  &__text--success {
-    color: #ffffff;
-  }
-
-  &__text--success--plain {
-    color: $hy-success;
-  }
-
-  &--info {
-    background-color: $hy-info;
-    border-width: 1px;
-    border-color: $hy-info;
-  }
-
-  &--info--plain {
-    border-width: 1px;
-    border-color: $hy-info;
-  }
-
-  &--info--plain--fill {
-    background-color: #f4f4f5;
-  }
-
-  &__text--info {
-    color: #ffffff;
-  }
-
-  &__text--info--plain {
-    color: $hy-info;
-  }
-
-  &__close {
-    position: absolute;
-    z-index: 999;
-    top: 10px;
-    right: 10px;
-    border-radius: 100px;
-    background-color: #c6c7cb;
-    @include flex(row);
-    align-items: center;
-    justify-content: center;
-    /* #ifndef APP-NVUE */
-    transform: scale(0.6) translate(80%, -80%);
-    /* #endif */
-    /* #ifdef APP-NVUE */
-    transform: scale(0.6) translate(50%, -50%);
-    /* #endif */
-
-    &--small {
-      width: 18px;
-      height: 18px;
-    }
-
-    &--medium {
-      width: 22px;
-      height: 22px;
-    }
-
-    &--large {
-      width: 25px;
-      height: 25px;
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-tag/index.scss

@@ -0,0 +1,204 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-tag {
+  @include flex;
+  align-items: center;
+  border-style: solid;
+
+  &__wrapper {
+    position: relative;
+  }
+
+  /*禁用*/
+  &--disabled {
+    background-color: $hy-color-disable-bg;
+    color: $hy-text-color-disable;
+    border: 1px solid $hy-color-disable-icon;
+  }
+
+  &--circle {
+    border-radius: $hy-border-radius-semicircle;
+  }
+
+  &--square {
+    border-radius: $hy-border-radius-sm;
+  }
+
+  &__icon {
+    margin-right: $hy-border-margin-padding-sm;
+  }
+
+  &__text {
+    &--small {
+      font-size: $hy-font-size-sm;
+      line-height: $hy-font-size-sm;
+    }
+
+    &--medium {
+      font-size: $hy-font-size-base;
+      line-height: $hy-font-size-base;
+    }
+
+    &--large {
+      font-size: $hy-font-size-lg;
+      line-height: $hy-font-size-lg;
+    }
+  }
+
+  &--small {
+    height: 22px;
+    line-height: 22px;
+    padding: 0 $hy-border-margin-padding-sm;
+  }
+
+  &--medium {
+    height: 26px;
+    line-height: 22px;
+    padding: 0 $hy-border-margin-padding-base;
+  }
+
+  &--large {
+    height: 32px;
+    line-height: 32px;
+    padding: 0 15px;
+  }
+
+  &--primary {
+    background-color: $hy-primary;
+    border: 1px solid $hy-primary;
+  }
+
+  &--primary--plain {
+    border: 1px solid $hy-primary;
+  }
+
+  &--primary--plain--fill {
+    background-color: $hy-primary-light;
+  }
+
+  &__text--primary {
+    color: #ffffff;
+  }
+
+  &__text--primary--plain {
+    color: $hy-primary;
+  }
+
+  &--error {
+    background-color: $hy-error;
+    border: 1px solid $hy-error;
+  }
+
+  &--error--plain {
+    border: 1px solid $hy-error;
+  }
+
+  &--error--plain--fill {
+    background-color: $hy-error-light;
+  }
+
+  &__text--error {
+    color: #ffffff;
+  }
+
+  &__text--error--plain {
+    color: $hy-error;
+  }
+
+  &--warning {
+    background-color: $hy-warning;
+    border: 1px solid $hy-warning;
+  }
+
+  &--warning--plain {
+    border: 1px solid $hy-warning;
+  }
+
+  &--warning--plain--fill {
+    background-color: $hy-warning-light;
+  }
+
+  &__text--warning {
+    color: #ffffff;
+  }
+
+  &__text--warning--plain {
+    color: $hy-warning;
+  }
+
+  &--success {
+    background-color: $hy-success;
+    border: 1px solid $hy-success;
+  }
+
+  &--success--plain {
+    border: 1px solid $hy-success;
+  }
+
+  &--success--plain--fill {
+    background-color: $hy-success-light;
+  }
+
+  &__text--success {
+    color: #ffffff;
+  }
+
+  &__text--success--plain {
+    color: $hy-success;
+  }
+
+  &--info {
+    background-color: $hy-info;
+    border: 1px solid $hy-info;
+  }
+
+  &--info--plain {
+    border: 1px solid $hy-info;
+  }
+
+  &--info--plain--fill {
+    background-color: $hy-info-light;
+  }
+
+  &__text--info {
+    color: #ffffff;
+  }
+
+  &__text--info--plain {
+    color: $hy-info;
+  }
+
+  &__close {
+    position: absolute;
+    z-index: 999;
+    top: 10px;
+    right: 10px;
+    border-radius: $hy-border-radius-semicircle;
+    background-color: #c6c7cb;
+    @include flex(row);
+    align-items: center;
+    justify-content: center;
+    /* #ifndef APP-NVUE */
+    transform: scale(0.6) translate(80%, -80%);
+    /* #endif */
+    /* #ifdef APP-NVUE */
+    transform: scale(0.6) translate(50%, -50%);
+    /* #endif */
+
+    &--small {
+      width: 18px;
+      height: 18px;
+    }
+
+    &--medium {
+      width: 22px;
+      height: 22px;
+    }
+
+    &--large {
+      width: 25px;
+      height: 25px;
+    }
+  }
+}

package/components/hy-tag/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   text: "",
@@ -16,7 +16,7 @@ const defaultProps: IProps = {
   closable: false,
   show: true,
   icon: "",
-  iconColor: ""
+  iconColor: "",
 };
 
 export default defaultProps;

package/components/hy-tag/typing.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**
@@ -8,7 +8,7 @@ export default interface IProps {
   /**
    * @description 点击需要传得值
    * */
-  name: string | number;
+  name?: string | number;
   /**
    * @description 标签类型info、primary、success、warning、error （默认 'primary' ）
    * */