hy-app 0.1.1

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

@@ -0,0 +1,98 @@
+import { CSSProperties } from "vue";
+
+export interface CellContentVo extends AnyObject {
+  /**
+   * @description 单元格左图标
+   * */
+  icon?: string;
+  /**
+   * @description 单元格标题
+   * */
+  title?: string;
+  /**
+   * @description 单元格副标题
+   * */
+  subhead?: string;
+  /**
+   * @description 是否禁用单元格
+   * */
+  disabled?: boolean;
+  /**
+   * @description 单元格右图标
+   * */
+  rightIcon?: string;
+  /**
+   * @description 单元格值
+   * */
+  value?: string;
+  /**
+   * @description 跳转页面地址
+   * */
+  url?: string;
+  /**
+   * @description 单元格右侧箭头的方向，可选值为：left，up，down
+   * */
+  arrowDirection?: "left" | "up" | "down";
+}
+export default interface IProps {
+  /**
+   * @description cell列表数据
+   * */
+  list: CellContentVo[];
+  /**
+   * @description 头部标题
+   * */
+  title?: string;
+  /**
+   * @description 是否显示头部底部边框
+   * */
+  titleBorder?: boolean;
+  /**
+   * @description 是否显示cell下边框 (默认 true )
+   * */
+  border?: boolean;
+  /**
+   * @description 标题前缀竖线颜色
+   * */
+  verticalColor?: string;
+  /**
+   * @description 是否显示标题前缀竖线
+   * */
+  showVertical?: boolean;
+  /**
+   * @description 是否禁用cell（默认false）
+   * */
+  disabled?: boolean;
+  /**
+   * @description 是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ）
+   * */
+  clickable?: boolean;
+  /**
+   * @description 单元的大小，可选值为 large，medium，small
+   * */
+  size?: HyApp.SizeType;
+  /**
+   * @description 右侧的内容
+   * */
+  value?: string;
+  /**
+   * @description 内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
+   * */
+  arrange?: HyApp.LeftRightType | "center";
+  /**
+   * @description 右侧的图标箭头 （默认 'right'）
+   * */
+  rightIcon?: string;
+  /**
+   * @description 右侧箭头的方向，可选值为：left，up，down
+   * */
+  arrowDirection?: "left" | "up" | "down";
+  /**
+   * @description 自定义右侧icon样式
+   * */
+  rightIconStyle?: CSSProperties;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-check-button/hy-check-button.vue

@@ -0,0 +1,71 @@
+<template>
+  <view class="hy-check-button">
+    <template v-for="(item, i) in columns_1" :key="i">
+      <HyTag
+        :text="item?.[fieldNames.label] as string | number"
+        :name="i"
+        :type="type"
+        :size="size"
+        :shape="shape"
+        :disabled="isDisabled(item.disabled)"
+        :plain="!item?.[fieldNames.checked]"
+        @click="onCheckbox"
+      ></HyTag>
+    </template>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { toRefs, watch, ref } from "vue";
+import defaultProps from "./props";
+import IProps, { CheckboxColumnsVo } from "./typing";
+import HyTag from "../hy-tag/hy-tag.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { modelValue, columns, fieldNames, disabled, selectType } = toRefs(props);
+const emit = defineEmits(["change", "update:modelValue"]);
+
+const isDisabled = (disabledVal?: boolean): boolean =>
+  disabled.value || !!disabledVal;
+
+const columns_1 = ref<CheckboxColumnsVo[]>();
+
+watch(
+  () => modelValue.value,
+  (newValue: string | (string | number)[]) => {
+    if (!columns.value.length) return;
+    columns_1.value = columns.value.map((item) => {
+      item[fieldNames.value.checked] = newValue.includes(
+        item[fieldNames.value.value] as string
+      );
+      return item;
+    });
+  },
+  { immediate: true }
+);
+
+const onCheckbox = ({ name }: { name: number }) => {
+  if (selectType.value === "checkbox") {
+    columns.value[name][fieldNames.value.checked] =
+      !columns.value[name][fieldNames.value.checked];
+    emit(
+      "update:modelValue",
+      columns.value
+        .filter((item) => item[fieldNames.value.checked])
+        .map((item) => item[fieldNames.value.value])
+    );
+  } else {
+    emit("update:modelValue", columns.value[name][fieldNames.value.value]);
+  }
+
+  emit("change", columns.value[name]);
+};
+</script>
+
+<style lang="scss" scoped>
+.hy-check-button {
+  display: grid;
+  grid-template-columns: v-bind(col);
+  gap: v-bind(gap);
+}
+</style>

package/components/hy-check-button/props.ts

@@ -0,0 +1,20 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  modelValue: "",
+  columns: [],
+  fieldNames: {
+    label: "label",
+    value: "value",
+    checked: "checked"
+  },
+  selectType: "checkbox",
+  disabled: false,
+  col: "repeat(3, 1fr)",
+  gap: "10px",
+  type: "primary",
+  size: "medium",
+  shape: "square"
+};
+
+export default defaultProps;

package/components/hy-check-button/typing.d.ts

@@ -0,0 +1,79 @@
+export interface CheckboxColumnsVo extends FieldNamesType {
+  /**
+   * @description 显示文本内容
+   * */
+  label?: string;
+  /**
+   * @description 值
+   * */
+  value?: string | number;
+  /**
+   * @description 是否选中
+   * */
+  checked?: boolean;
+  /**
+   * @description 是否禁用
+   * */
+  disabled?: boolean;
+}
+export interface IFieldNames {
+  /**
+   * @description 自定义columns的文本键
+   * */
+  label: string;
+  /**
+   * @description 自定义columns的值键
+   * */
+  value: string;
+  /**
+   * @description 自定义columns的选中键
+   * */
+  checked: string;
+}
+
+export type FieldNamesType = {
+  [key in keyof IFieldNames as IFieldNames[key]]?: string | number | boolean;
+};
+
+export default interface IProps {
+  /**
+   * @description 选中得值，radio是字符串，checkbox是数组
+   * */
+  modelValue: (string | number) | (string | number)[];
+  /**
+   * @description 选择列表数据
+   * */
+  columns: CheckboxColumnsVo[];
+  /**
+   * @description columns对应得键
+   * */
+  fieldNames?: IFieldNames;
+  /**
+   * @description 选择单选框还是复选框
+   * */
+  selectType?: "checkbox" | "radio";
+  /**
+   * @description 禁用
+   * */
+  disabled?: boolean;
+  /**
+   * @description 每行几列，每列等宽
+   * */
+  col?: string;
+  /**
+   * @description 设置每行间距,需要加单位
+   * */
+  gap?: string;
+  /**
+   * @description 标签类型info、primary、success、warning、error （默认 'primary' ）
+   * */
+  type?: HyApp.ThemeType;
+  /**
+   * @description 标签的大小，large，medium，small （默认 'medium' ）
+   * */
+  size?: HyApp.SizeType;
+  /**
+   * @description tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
+   * */
+  shape?: HyApp.ShapeType;
+}

package/components/hy-checkbox/hy-checkbox.vue

@@ -0,0 +1,299 @@
+<template>
+  <view class="hy-checkbox-group" :class="bemClass">
+    <template v-for="(item, i) in columns_1" :key="i">
+      <view
+        class="hy-checkbox cursor-pointer"
+        @tap.stop="wrapperClickHandler"
+        :style="checkboxStyle"
+        :class="[
+          `hy-checkbox-label--${iconPlacement}`,
+          borderBottom && placement === 'column' && 'hy-border-bottom'
+        ]"
+      >
+        <view
+          class="hy-checkbox__icon-wrap cursor-pointer"
+          @tap.stop="iconClickHandler($event, item)"
+          :class="iconClasses(item)"
+          :style="iconWrapStyle(item)"
+        >
+          <slot
+            name="icon"
+            :iconColor="iconColor"
+            :iconSize="addUnit(iconSize)"
+          >
+            <HyIcon
+              class="hy-checkbox__icon-wrap__icon"
+              :name="IconConfig.CHECK_MASK"
+              :size="addUnit(iconSize)"
+              :color="iconColor || '#ffffff'"
+            />
+          </slot>
+        </view>
+        <view
+          class="hy-checkbox__label-wrap cursor-pointer"
+          @tap.stop="labelClickHandler($event, item)"
+        >
+          <slot name="label" :record="item">
+            <text
+              :style="{
+                color: labelColor,
+                fontSize: labelSize
+              }"
+              >{{ item[fieldNames.label] }}</text
+            >
+          </slot>
+        </view>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script setup lang="ts">
+import defaultProps from "./props";
+import IProps, { CheckboxColumnsVo } from "./typing";
+import { computed, CSSProperties, toRefs, watch, ref } from "vue";
+import { addUnit, bem, error } from "../../utils";
+import { IconConfig } from "../../config";
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  modelValue,
+  columns,
+  fieldNames,
+  disabled,
+  shape,
+  size,
+  iconSize,
+  activeColor,
+  inactiveColor,
+  customStyle,
+  borderBottom,
+  placement
+} = toRefs(props);
+const emit = defineEmits(["change", "update:modelValue"]);
+
+const columns_1 = ref();
+
+watch(
+  () => modelValue.value,
+  (newValue) => {
+    if (Array.isArray(newValue)) {
+      columns_1.value = columns.value.map((item) => {
+        item[fieldNames.value.checked] = newValue.includes(
+          item[fieldNames.value.value] as string
+        );
+        return item;
+      });
+    } else {
+      error("传入值不是数组，请传数组值");
+    }
+  },
+  { immediate: true }
+);
+
+const isDisabled = (disabledVal?: boolean): boolean =>
+  disabled.value || !!disabledVal;
+
+const checkboxStyle = computed(() => {
+  const style: CSSProperties = {};
+  if (borderBottom.value && placement.value === "row") {
+    error(
+      "检测到您将borderBottom设置为true，需要同时将u-checkbox-group的placement设置为column才有效"
+    );
+  }
+  // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
+  if (borderBottom.value && placement.value === "column") {
+    style.paddingBottom = "8px";
+  }
+  return Object.assign(style, customStyle.value);
+});
+const bemClass = computed(() => {
+  return bem("checkbox-group", props, ["placement"]);
+});
+
+/**
+ * @description 定义icon的Class类名
+ * */
+const iconClasses = computed(() => {
+  return (temp: CheckboxColumnsVo): string[] => {
+    let classes: string[] = [];
+    // 组件的形状
+    classes.push("hy-checkbox__icon-wrap--" + shape.value);
+    if (isDisabled(temp?.disabled)) {
+      classes.push("hy-checkbox__icon-wrap--disabled");
+    }
+    if (temp[fieldNames.value.checked] && isDisabled(temp?.disabled)) {
+      classes.push("hy-checkbox__icon-wrap--disabled--checked");
+    }
+    return classes;
+  };
+});
+
+/**
+ * @description 定义icon的样式
+ * */
+const iconWrapStyle = computed(() => {
+  return (temp: CheckboxColumnsVo): CSSProperties => {
+    // checkbox的整体样式
+    const style: CSSProperties = {};
+    style.backgroundColor =
+      temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
+        ? activeColor.value
+        : "#ffffff";
+    style.borderColor =
+      temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
+        ? activeColor.value
+        : inactiveColor.value;
+    style.width = addUnit(size.value);
+    style.height = addUnit(size.value);
+    return style;
+  };
+});
+
+/**
+ * @description 点击图标
+ * */
+const iconClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
+  e.stopPropagation();
+  if (!isDisabled(temp?.disabled)) {
+    setRadioCheckedStatus(temp);
+  }
+};
+const wrapperClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
+  e.stopPropagation();
+  if (!isDisabled(temp?.disabled)) {
+    setRadioCheckedStatus(temp);
+  }
+};
+/**
+ * @description 点击label
+ * */
+const labelClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
+  e.stopPropagation();
+  if (!isDisabled(temp?.disabled)) {
+    setRadioCheckedStatus(temp);
+  }
+};
+
+/**
+ * @description 执行函数改变状态传给父值
+ * */
+const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
+  // 将本组件标记为与原来相反的状态
+  columns_1.value = columns_1.value.map((item: CheckboxColumnsVo) => {
+    if (temp[fieldNames.value.value] === item[fieldNames.value.value]) {
+      item[fieldNames.value.checked] = !item[fieldNames.value.checked];
+    }
+    return item;
+  });
+  emit("change", temp);
+  emit(
+    "update:modelValue",
+    columns_1.value
+      .filter((item: CheckboxColumnsVo) => item[fieldNames.value.checked])
+      .map((item: CheckboxColumnsVo) => item[fieldNames.value.value])
+  );
+  // 双向绑定
+  // if (this.usedAlone) {
+  // 	this.$emit('update:checked', this.isChecked)
+  // }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-checkbox {
+  &-group {
+    &--row {
+      /* #ifndef APP-NVUE */
+      display: flex;
+      /* #endif */
+      flex-flow: row wrap;
+    }
+
+    &--column {
+      @include flex(column);
+    }
+  }
+
+  /* #ifndef APP-NVUE */
+  @include flex(row);
+  /* #endif */
+  overflow: hidden;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 5px;
+  margin-top: 5px;
+
+  &-label--left {
+    flex-direction: row;
+  }
+
+  &-label--right {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+
+  &__icon-wrap {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    // nvue下，border-color过渡有问题
+    transition-property: border-color, background-color, color;
+    transition-duration: 0.2s;
+    /* #endif */
+    @include flex;
+    align-items: center;
+    justify-content: center;
+    color: transparent;
+    text-align: center;
+    margin-right: $hy-border-margin-padding-sm;
+    border: $hy-border-line;
+
+    /* #ifdef MP-TOUTIAO */
+    // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+    &__icon {
+      line-height: 0;
+    }
+
+    /* #endif */
+
+    &--circle {
+      border-radius: 50%;
+    }
+
+    &--square {
+      border-radius: 3px;
+    }
+
+    &--checked {
+      color: $hy-text-color-inverse;
+      background-color: $hy-primary;
+      border-color: $hy-primary;
+    }
+
+    &--disabled {
+      background-color: $hy-color-disable-bg !important;
+    }
+
+    &--disabled--checked {
+      color: $hy-color-disable-icon !important;
+    }
+  }
+
+  &__label-wrap {
+    /* #ifndef APP-NVUE */
+    word-wrap: break-word;
+    /* #endif */
+    color: $hy-text-color;
+    font-size: $hy-font-size-base;
+    margin-right: $hy-border-margin-padding-sm;
+
+    &--disabled {
+      color: $hy-text-color-disable;
+    }
+  }
+}
+</style>

package/components/hy-checkbox/props.ts

@@ -0,0 +1,28 @@
+import IProps from "./typing";
+import { ColorConfig } from "../../config";
+
+const defaultProps: IProps = {
+  modelValue: [],
+  columns: [],
+  fieldNames: {
+    label: "label",
+    value: "value",
+    checked: "checked"
+  },
+  shape: "square",
+  size: 18,
+  disabled: false,
+  activeColor: ColorConfig.primary,
+  inactiveColor: "#c8c9cc",
+  iconSize: "20",
+  iconColor: "",
+  iconPlacement: "left",
+  borderBottom: false,
+  label: "",
+  labelSize: "",
+  labelColor: "",
+  labelDisabled: "",
+  placement: "row"
+};
+
+export default defaultProps;

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

@@ -0,0 +1,77 @@
+import type { CSSProperties } from "vue";
+import { CheckboxColumnsVo, IFieldNames } from "../hy-check-button/typing";
+
+export default interface IProps {
+  /**
+   * @description 双向绑定值，数组类型
+   * */
+  modelValue: (string | number)[];
+  /**
+   * @description 接收数组值
+   * */
+  columns: CheckboxColumnsVo[];
+  /**
+   * @description 自定义接收columns的键
+   * */
+  fieldNames?: IFieldNames;
+  /**
+   * @description 形状，square为方形，circle为圆型
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 复选框大小
+   * */
+  size?: string | number;
+  /**
+   * @description 是否禁用
+   * */
+  disabled?: boolean;
+  /**
+   * @description 选中状态下的颜色
+   * */
+  activeColor?: string;
+  /**
+   * @description 未选中的颜色
+   * */
+  inactiveColor?: string;
+  /**
+   * @description 图标的大小，单位px
+   * */
+  iconSize?: string | number;
+  /**
+   * @description 图标颜色
+   * */
+  iconColor?: string;
+  /**
+   * @description label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
+   * */
+  label?: string;
+  /**
+   * @description label的字体大小，px单位
+   * */
+  labelSize?: string | number;
+  /**
+   * @description label的颜色
+   * */
+  labelColor?: string;
+  /**
+   * @description 勾选图标的对齐方式，left-左边，right-右边
+   * */
+  iconPlacement?: HyApp.LeftRightType;
+  /**
+   * @description 竖向配列时，是否显示下划线
+   * */
+  borderBottom?: boolean;
+  /**
+   * @description 是否禁止点击提示语选中复选框
+   * */
+  labelDisabled?: string;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+  /**
+   * @description 排列方式，row-横向，column-纵向
+   * */
+  placement?: HyApp.PermutationType;
+}