hy-app 0.1.1

package/components/hy-card/hy-card.vue

@@ -0,0 +1,198 @@
+<template>
+  <view class="hy-card" @tap.stop="click" :class="cardClass" :style="cardStyle">
+    <view
+      v-if="showHead"
+      class="hy-card__head"
+      :style="[{ padding: addUnit(paddingHead || padding) }, headStyle]"
+      :class="{
+        'hy-border-bottom': headBorderBottom
+      }"
+      @tap="headClick"
+    >
+      <view v-if="!$slots.header" class="hy-card__head--flex">
+        <view class="hy-card__head--left" v-if="title">
+          <image
+            :src="thumb"
+            class="hy-card__head--left__thumb"
+            mode="aspectFill"
+            v-if="thumb"
+            :style="{
+              height: addUnit(thumbWidth),
+              width: addUnit(thumbWidth),
+              borderRadius: thumbCircle ? '50px' : '4px'
+            }"
+          ></image>
+          <text
+            class="hy-card__head--left__title"
+            :style="{
+              fontSize: addUnit(titleSize),
+              color: titleColor
+            }"
+          >
+            {{ title }}
+          </text>
+        </view>
+        <view class="hy-card__head--right hy-line-1" v-if="subTitle">
+          <text
+            class="hy-card__head__title__text"
+            :style="{
+              fontSize: addUnit(subTitleSize),
+              color: subTitleColor
+            }"
+          >
+            {{ subTitle }}
+          </text>
+        </view>
+      </view>
+      <slot name="header" v-else />
+    </view>
+    <view
+      @tap="bodyClick"
+      class="hy-card__body"
+      :style="[{ padding: addUnit(paddingBody || padding) }, bodyStyle]"
+    >
+      <slot name="body" />
+    </view>
+    <view
+      v-if="showFoot"
+      class="hy-card__foot"
+      @tap="footClick"
+      :style="[
+        { padding: $slots.foot ? addUnit(paddingFoot || padding) : 0 },
+        footStyle
+      ]"
+      :class="{
+        'hy-border-top': footBorderTop
+      }"
+    >
+      <slot name="footer" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit } from "../../utils";
+import { computed, toRefs } from "vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { border, full, borderRadius, margin, boxShadow, customStyle } =
+  toRefs(props);
+const emit = defineEmits(["click", "head-click", "body-click", "foot-click"]);
+
+const cardClass = computed(() => {
+  return [
+    border.value && "hy-border",
+    full.value && "hy-border",
+    border.value && "hy-card-full",
+    (typeof borderRadius.value === "number"
+      ? borderRadius.value
+      : parseInt(borderRadius.value.replace(/px|rpx|vw|vh/g, "")) > 0) &&
+      "hy-card--border"
+  ].filter(Boolean);
+});
+const cardStyle = computed(() => {
+  return Object.assign(customStyle.value, {
+    borderRadius: addUnit(borderRadius.value),
+    margin: margin.value,
+    boxShadow: boxShadow.value
+      ? typeof boxShadow.value === "boolean"
+        ? "0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)"
+        : boxShadow.value
+      : ""
+  });
+});
+
+const click = () => {
+  emit("click", props.index);
+};
+/**
+ * @description 点击头部
+ * */
+const headClick = () => {
+  emit("head-click", props.index);
+};
+/**
+ * @description 点击身体
+ * */
+const bodyClick = () => {
+  emit("body-click", props.index);
+};
+/**
+ * @description 点击尾部
+ * */
+const footClick = () => {
+  emit("foot-click", props.index);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-card {
+  position: relative;
+  overflow: hidden;
+  font-size: 28rpx;
+  background-color: #ffffff;
+  box-sizing: border-box;
+
+  &-full {
+    // 如果是与屏幕之间不留空隙，应该设置左右边距为0
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100%;
+  }
+
+  &--border:after {
+    border-radius: 16rpx;
+  }
+
+  &__head {
+    &--flex {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    &--left {
+      color: #303133ff;
+      display: flex;
+
+      &__thumb {
+        margin-right: 16rpx;
+      }
+
+      &__title {
+        max-width: 400rpx;
+        height: 20px;
+        @include line-feed;
+      }
+    }
+
+    &--right {
+      color: $hy-text-color-grey;
+      margin-left: 6rpx;
+    }
+  }
+
+  &__body {
+    color: $hy-bg-color;
+  }
+
+  &__foot {
+    color: $hy-text-color-grey;
+  }
+}
+.hy-border-bottom {
+  border-bottom: $hy-border-line;
+}
+
+.hy-border-top {
+  border-top: $hy-border-line;
+}
+.hy-border {
+  border: $hy-border-line;
+}
+</style>

package/components/hy-card/props.ts

@@ -0,0 +1,29 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  full: false,
+  title: "",
+  titleColor: "#303133",
+  titleSize: "15px",
+  subTitle: "",
+  subTitleColor: "#909399",
+  subTitleSize: "13",
+  border: true,
+  index: "",
+  margin: "15px",
+  borderRadius: "8px",
+  headBorderBottom: true,
+  footBorderTop: true,
+  thumb: "",
+  thumbWidth: "30px",
+  thumbCircle: false,
+  padding: "15px",
+  paddingHead: "",
+  paddingBody: "",
+  paddingFoot: "",
+  showHead: true,
+  showFoot: true,
+  boxShadow: true
+};
+
+export default defaultProps;

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

@@ -0,0 +1,112 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 卡片与屏幕两侧是否留空隙（默认false）
+   * */
+  full?: boolean;
+  /**
+   * @description 头部左边的标题
+   * */
+  title?: string;
+  /**
+   * @description 标题颜色（默认#303133）
+   * */
+  titleColor?: string;
+  /**
+   * @description 标题字体大小，单位rpx（默认15px）
+   * */
+  titleSize?: string | number;
+  /**
+   * @description 头部右边的副标题
+   * */
+  subTitle?: string;
+  /**
+   * @description 副标题颜色（默认#909399）
+   * */
+  subTitleColor?: string;
+  /**
+   * @description 副标题字体大小（默认13px）
+   * */
+  subTitleSize?: string | number;
+  /**
+   * @description 是否显示边框（默认true）
+   * */
+  border?: boolean;
+  /**
+   * @description 用于标识点击了第几个卡片
+   * */
+  index?: string | number;
+  /**
+   * @description 卡片与屏幕两边和上下元素的间距，需带单位，如"30px 20px"（默认15px）
+   * */
+  margin?: string;
+  /**
+   * @description 卡片整体的圆角值，单位px（默认8px）
+   * */
+  borderRadius?: string | number;
+  /**
+   * @description 头部自定义样式，对象形式
+   * */
+  headStyle?: CSSProperties;
+  /**
+   * @description 中部自定义样式，对象形式
+   * */
+  bodyStyle?: CSSProperties;
+  /**
+   * @description 底部自定义样式，对象形式
+   * */
+  footStyle?: CSSProperties;
+  /**
+   * @description 是否显示头部的下边框（默认true）
+   * */
+  headBorderBottom?: boolean;
+  /**
+   * @description 是否显示底部的上边框（默认true）
+   * */
+  footBorderTop?: boolean;
+  /**
+   * @description 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
+   * */
+  thumb?: string;
+  /**
+   * @description 缩略图的宽度，高等于宽，单位px（默认30px）
+   * */
+  thumbWidth?: string | number;
+  /**
+   * @description 缩略图是否为圆形（默认false）
+   * */
+  thumbCircle?: boolean;
+  /**
+   * @description // 给head，body，foot的内边距
+   * */
+  padding?: string | number;
+  /**
+   * @description 头部内边距
+   * */
+  paddingHead?: string | number;
+  /**
+   * @description 中部内边距
+   * */
+  paddingBody?: string | number;
+  /**
+   * @description 尾部内边距
+   * */
+  paddingFoot?: string | number;
+  /**
+   * @description 是否显示头部（默认true）
+   * */
+  showHead?: boolean;
+  /**
+   * @description 是否显示尾部（默认true）
+   * */
+  showFoot?: boolean;
+  /**
+   * @description 卡片外围阴影，字符串形式（默认true）
+   * */
+  boxShadow?: string | boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-cell/hy-cell.vue

@@ -0,0 +1,268 @@
+<template>
+  <view :style="customStyle" class="hy-cell">
+    <view
+      class="hy-cell__title"
+      :style="{ borderBottom: titleBorder ? '1rpx solid #c8c7cc66' : '' }"
+      v-if="title || $slots['title']"
+    >
+      <slot name="title" :title="title">
+        <view class="hy-cell__title-nav">
+          <view
+            class="hy-cell__title-nav--ver"
+            :style="{ background: verticalColor }"
+            v-if="showVertical"
+          ></view>
+          <text class="hy-cell__title-nav--text">{{ title }}</text>
+        </view>
+      </slot>
+    </view>
+    <view class="hy-cell__body">
+      <slot>
+        <template v-for="(item, i) in list" :key="i">
+          <view
+            class="hy-cell__body--container"
+            :hover-class="containerClass(item)"
+            :hover-stay-time="250"
+            :style="{ borderBottom: border ? '1rpx solid #c8c7cc66' : '' }"
+            @tap="clickHandler($event, item, i)"
+          >
+            <view class="hy-cell__body--container__content">
+              <view class="hy-cell__body--container__content-icon">
+                <slot name="icon" :icon="item?.icon">
+                  <HyIcon
+                    size="25"
+                    :name="item?.icon"
+                    :color="disabled || item?.disabled ? '#c0c0c0' : ''"
+                  ></HyIcon>
+                </slot>
+              </view>
+              <view class="hy-cell__body--container__content-title">
+                <!-- 将slot与默认内容用if/else分开主要是因为微信小程序不支持slot嵌套传递，这样才能解决collapse组件的slot不失效问题，label暂时未用到。 -->
+                <slot name="cell-title" :title="item?.title">
+                  <text
+                    class="hy-cell__body--container__content-title--text"
+                    :class="[
+                      (disabled || item?.disabled) && 'hy-cell--disabled'
+                    ]"
+                    >{{ item?.title }}</text
+                  >
+                </slot>
+                <slot name="sub" v-if="item?.subhead" :sub="item.subhead">
+                  <text
+                    class="hy-cell__body--container__content-title--sub"
+                    :class="[disabled && 'hy-cell--disabled']"
+                    >{{ item.subhead }}</text
+                  >
+                </slot>
+              </view>
+            </view>
+            <view
+              class="hy-cell__body--container__center"
+              :style="{
+                justifyContent:
+                  arrange === 'left'
+                    ? 'flex-start'
+                    : arrange === 'right'
+                    ? 'flex-end'
+                    : 'center'
+              }"
+            >
+              <slot name="value" :record="item">
+                <text
+                  class="hy-cell__body--container__center__value"
+                  :class="[disabled && 'hy-cell--disabled']"
+                  v-if="value || item?.value"
+                  >{{ item.value || value }}</text
+                >
+              </slot>
+            </view>
+            <view
+              class="hy-cell__body--container__right-icon"
+              :class="[
+                `hy-cell__body--container__right-icon--${
+                  item?.arrowDirection || arrowDirection
+                }`
+              ]"
+            >
+              <slot name="right-icon" :icon="item?.rightIcon || rightIcon">
+                <HyIcon
+                  :name="item?.rightIcon || rightIcon"
+                  :custom-style="rightIconStyle"
+                  :color="disabled || item?.disabled ? '#c0c0c0' : 'info'"
+                  :size="size === 'large' ? 18 : 16"
+                ></HyIcon>
+              </slot>
+            </view>
+          </view>
+
+          <slot name="bottom" :record="item" />
+        </template>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import defaultProps from "./props";
+import IProps, { CellContentVo } from "./typing";
+
+import HyIcon from "../hy-icon/hy-icon.vue";
+import { computed, toRefs } from "vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { disabled, clickable } = toRefs(props);
+const emit = defineEmits(["click"]);
+
+/**
+ * @description 计算什么时候出现点击状态
+ * */
+const containerClass = computed(() => {
+  return (temp: CellContentVo): string => {
+    return [
+      !disabled.value &&
+        !temp?.disabled &&
+        clickable.value &&
+        "hy-cell__body--container__clickable"
+    ]
+      .filter(Boolean)
+      .join();
+  };
+});
+
+/**
+ * @description 点击cell
+ * */
+const clickHandler = (e: Event, temp: CellContentVo, index: number) => {
+  if (disabled.value) return;
+  emit("click", temp, index);
+  if (temp?.url) {
+    uni.navigateTo({
+      url: temp.url
+    });
+  }
+  e.stopPropagation();
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-cell {
+  flex: 1;
+
+  /*标题*/
+  &__title {
+    padding: $hy-border-margin-padding-lg $hy-border-margin-padding-sm;
+
+    &-nav {
+      display: flex;
+      align-items: center;
+
+      &--ver {
+        border-radius: 4rpx;
+        width: 4px;
+        height: 20px;
+        margin-right: 16rpx;
+      }
+      &--text {
+        font-size: $hy-font-size-subtitle;
+        line-height: 16px;
+        color: $hy-color-title;
+      }
+    }
+  }
+
+  /*row内容*/
+  &__body {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    /* #endif */
+    font-size: $hy-font-size-paragraph;
+    color: $hy-color-paragraph;
+    // line-height: $u-cell-line-height;
+    align-items: center;
+    //justify-content: space-between;
+
+    &--container {
+      @include flex(row);
+      align-items: center;
+      justify-content: space-between;
+      flex: 1;
+      padding: $hy-border-margin-padding-lg $hy-border-margin-padding-base;
+
+      /*点击状态*/
+      &__clickable {
+        background-color: $hy-bg-color-grey;
+      }
+
+      &__content {
+        @include flex(row);
+        /*左边icon*/
+        &-icon {
+          @include flex();
+          align-items: center;
+          font-size: 16px;
+          margin-right: 10px;
+        }
+        /*行头部*/
+        &-title {
+          flex: $hy-font-size-subtitle;
+          line-height: 25px;
+          display: flex;
+          flex-direction: column;
+
+          /*标题*/
+          &--text {
+            font-size: $hy-font-size-lg;
+            line-height: 22px;
+            color: $hy-color-title;
+          }
+
+          /*sub值*/
+          &--sub {
+            margin-top: $hy-border-margin-padding-sm;
+            font-size: $hy-font-size-base;
+            color: $hy-text-color-grey;
+            line-height: 18px;
+          }
+        }
+      }
+
+      /*cell值*/
+      &__center {
+        @include flex();
+        max-width: 90%;
+        flex: 1;
+        &__value {
+          //text-align: right;
+          font-size: $hy-font-size-base;
+          line-height: 24px;
+          color: $hy-text-color-grey;
+          margin-right: $hy-border-margin-padding-sm;
+        }
+      }
+
+      /*右边icon*/
+      &__right-icon {
+        transition: transform 0.3s;
+
+        &--up {
+          transform: rotate(-90deg);
+        }
+
+        &--down {
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+
+  &--disabled {
+    color: $hy-text-color-disable;
+    /* #ifndef APP-NVUE */
+    cursor: not-allowed;
+    /* #endif */
+  }
+}
+</style>

package/components/hy-cell/props.ts

@@ -0,0 +1,20 @@
+import IProps from "./typing";
+import { ColorConfig, IconConfig } from "../../config";
+
+const defaultProps: IProps = {
+  list: [],
+  title: "",
+  titleBorder: false,
+  border: true,
+  verticalColor: ColorConfig.primary,
+  showVertical: true,
+  disabled: false,
+  clickable: false,
+  size: "medium",
+  value: "",
+  arrange: "right",
+  rightIcon: IconConfig.RIGHT,
+  arrowDirection: "left"
+};
+
+export default defaultProps;