hy-app 0.1.2 → 0.1.4

package/components/hy-tabs/index.scss

@@ -0,0 +1,63 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-tabs {
+  &__wrapper {
+    @include flex;
+    align-items: center;
+
+    &__scroll-view-wrapper {
+      flex: 1;
+      /* #ifndef APP-NVUE */
+      overflow: auto hidden;
+      /* #endif */
+    }
+
+    &__scroll-view {
+      @include flex;
+      flex: 1;
+    }
+
+    &__nav {
+      @include flex;
+      position: relative;
+
+      &__item {
+        padding: 0 11px;
+        @include flex;
+        align-items: center;
+        justify-content: center;
+        /* #ifdef H5 */
+        cursor: pointer;
+        /* #endif */
+
+        &--disabled {
+          /* #ifdef H5 */
+          cursor: not-allowed;
+          /* #endif */
+        }
+
+        &__text {
+          font-size: 15px;
+          color: $hy-text-color-grey;
+          white-space: nowrap !important;
+
+          &--disabled {
+            color: $hy-color-disable-bg !important;
+          }
+        }
+      }
+
+      &__line {
+        height: 3px;
+        background: $hy-primary;
+        width: 30px;
+        position: absolute;
+        bottom: 2px;
+        border-radius: $hy-border-radius-semicircle;
+        transition-property: transform;
+        transition-duration: 300ms;
+      }
+    }
+  }
+}

package/components/hy-tabs/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   list: [],
@@ -7,20 +7,20 @@ const defaultProps: IProps = {
   duration: 300,
   lineColor: "#3c9cff",
   activeStyle: {
-    color: "#303133"
+    color: "#303133",
   },
   inactiveStyle: {
-    color: "#606266"
+    color: "#606266",
   },
   lineWidth: 20,
   lineHeight: 3,
   lineBgSize: "cover",
   itemStyle: {
-    height: "44px"
+    height: "44px",
   },
   swiperHeight: "calc(100vh - 44px)",
   scrollable: true,
-  iconStyle: {}
+  iconStyle: {},
 };
 
 export default defaultProps;

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 import BadgeProps from "../hy-badge/typing";
 export interface TabsItemVo extends AnyObject {
   /**

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

@@ -11,7 +11,7 @@
             :customStyle="{ marginRight: '3px' }"
           ></HyIcon>
         </slot>
-        <text :class="textClass" :style="{ color: color }">
+        <text :class="textClass" :style="textStyle">
           <slot>
             {{ text }}
           </slot>
@@ -40,6 +40,7 @@ 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";
+import {colorGradient} from "@/package";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
@@ -84,16 +85,33 @@ const tagStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     marginRight: closable.value ? "10px" : 0,
     marginTop: closable.value ? "10px" : 0,
+    background: bgColor.value,
+    borderColor: borderColor.value
   };
-  if (bgColor.value) {
-    style.background = bgColor.value;
-  }
-  if (borderColor.value) {
-    style.borderColor = borderColor.value;
+
+  if(color.value) {
+    if (plain.value) {
+      style.borderColor = color.value;
+      if(plainFill.value) {
+        style.background = colorGradient(color.value, "#FFFFFF", 100)[90];
+      }
+    } else {
+      style.background = color.value;
+      style.borderColor = color.value;
+    }
   }
+
   return Object.assign(style, customStyle.value);
 });
 
+/**
+ * @description 文本样式
+ * */
+const textStyle = computed(() => {
+  const style: CSSProperties = {}
+  if(color.value && plain.value) style.color = color.value;
+  return style;
+})
 /**
  * @description 文本类名
  * */
@@ -155,218 +173,5 @@ const clickHandler = () => {
 </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,205 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-tag {
+  border-style: solid;
+  @include flex;
+  align-items: center;
+  &__wrapper {
+    @include flex;
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  /*禁用*/
+  &--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;
+    }
+  }
+}