hy-app 0.1.1 → 0.1.3

package/components/hy-subsection/hy-subsection.vue

@@ -6,28 +6,31 @@
   >
     <view ref="hy-subsection__bar" :style="barStyle" :class="barClass"></view>
     <view
-      :class="wrapperClass"
+      :class="wrapperClass(index)"
       :ref="`hy-subsection__item--${index}`"
       :style="itemStyle"
-      @tap="clickHandler(index)"
+      @tap="clickHandler(item, index)"
       v-for="(item, index) in list"
       :key="index"
     >
       <text class="hy-subsection__item__text" :style="[textStyle(index)]">{{
-        getText(item)
+        getName(item)
       }}</text>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, toRefs, ref, onMounted } from "vue";
+import {computed, toRefs, ref, onMounted, watch, getCurrentInstance} from "vue";
+import type { CSSProperties } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
-import { addUnit, getRect } from "../../utils";
+import type IProps from "./typing";
+import type { SubSectionVo } from "./typing";
+import { addUnit, getRect, guid } from "../../utils";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
+  modelValue,
   current,
   list,
   mode,
@@ -36,16 +39,18 @@ const {
   bold,
   bgColor,
   inactiveColor,
-  keyName
+  fieldNames,
 } = toRefs(props);
-const emit = defineEmits(["change"]);
+const emit = defineEmits(["change", "update:modelValue"]);
 
+const instance = getCurrentInstance();
 // 组件尺寸
 const itemRect = ref<UniApp.NodeInfo>({
   width: 0,
-  height: 0
+  height: 0,
 });
 const innerCurrent = ref<number>(0);
+const guidClass = guid();
 
 /**
  * @description 容器样式
@@ -62,15 +67,16 @@ const wrapperStyle = computed<CSSProperties>(() => {
  * @description 容器类名
  * */
 const wrapperClass = computed(() => {
-  return [
-    "hy-subsection__item",
-    "cursor-pointer",
-    `hy-subsection__item--${innerCurrent.value}`,
-    innerCurrent.value < list.value.length - 1 &&
-      "hy-subsection__item--no-border-right",
-    innerCurrent.value === 0 && "hy-subsection__item--first",
-    innerCurrent.value === list.value.length - 1 && "hy-subsection__item--last"
-  ];
+  return (index: number) => {
+    return [
+      "hy-subsection__item",
+      "cursor-pointer",
+      `hy-subsection__item--${innerCurrent.value}__${guidClass}`,
+      index < list.value.length - 1 && "hy-subsection__item--no-border-right",
+      index === 0 && "hy-subsection__item--first",
+      index === list.value.length - 1 && "hy-subsection__item--last",
+    ];
+  };
 });
 /**
  * @description 滑块的样式
@@ -105,7 +111,7 @@ const barClass = computed(() => {
       "hy-subsection__bar--center",
     innerCurrent.value === list.value.length - 1 &&
       mode.value === "subsection" &&
-      "hy-subsection__bar--last"
+      "hy-subsection__bar--last",
   ].filter(Boolean) as string[];
   className = className.concat(className_2);
 
@@ -114,17 +120,15 @@ const barClass = computed(() => {
 /**
  * @description 分段器item的样式
  * */
-const itemStyle = computed(() => {
-  return (): CSSProperties => {
-    const style: CSSProperties = {};
-    if (mode.value === "subsection") {
-      // 设置border的样式
-      style.borderColor = activeColor.value;
-      style.borderWidth = "1px";
-      style.borderStyle = "solid";
-    }
-    return style;
-  };
+const itemStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  if (mode.value === "subsection") {
+    // 设置border的样式
+    style.borderColor = activeColor.value;
+    style.borderWidth = "1px";
+    style.borderStyle = "solid";
+  }
+  return style;
 });
 /**
  * @description 分段器文字颜色
@@ -155,118 +159,51 @@ onMounted(() => {
  * @description 初始化
  * */
 const init = () => {
-  innerCurrent.value = current.value;
-  getRect(".hy-subsection__item--0").then((size) => {
+  innerCurrent.value = list.value.findIndex((item: SubSectionVo) => {
+    if (typeof item === "string" || typeof item === "number") {
+      return item === modelValue.value;
+    } else {
+      return item[fieldNames.value.value] === modelValue.value;
+    }
+  });
+
+  // 设置默认值当没有找的时候导致样式问题
+  innerCurrent.value =
+    innerCurrent.value === -1 ? current.value : innerCurrent.value;
+
+  // TODO： 多个数组在一起计算宽度， 宽度不一样会有问题，所以必须加guidClass随机数
+  getRect(`.hy-subsection__item--0__${guidClass}`, false, instance).then((size) => {
     itemRect.value = size as UniApp.NodeInfo;
   });
 };
+
+/**
+ * @description 判断值
+ * */
+const getValue = (item: SubSectionVo) => {
+  return typeof item === "object" ? item[fieldNames.value.value] : item;
+};
+
 /**
  * @description 判断展示文本
  * */
-const getText = (item: string | Record<string, string>) => {
-  return typeof item === "object" ? item[keyName.value] : item;
+const getName = (item: SubSectionVo) => {
+  return typeof item === "object" ? item[fieldNames.value.label] : item;
 };
+
 /**
  * @description 点击事件
  * */
-const clickHandler = (index: number) => {
+const clickHandler = (temp: SubSectionVo, index: number) => {
   // 值改变才触发
   if (innerCurrent.value !== index) {
     emit("change", index);
+    emit("update:modelValue", getValue(temp));
   }
   innerCurrent.value = index;
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-
-.hy-subsection {
-  @include flex;
-  position: relative;
-  overflow: hidden;
-  /* #ifndef APP-NVUE */
-  width: 100%;
-  box-sizing: border-box;
-  /* #endif */
-
-  &--button {
-    height: 35px;
-    background-color: rgb(238, 238, 239);
-    padding: 3px;
-    border-radius: 4px;
-    align-items: stretch;
-
-    &__bar {
-      background-color: #ffffff;
-      border-radius: 4px !important;
-    }
-  }
-
-  &--subsection {
-    height: 32px;
-  }
-
-  &__bar {
-    position: absolute;
-    /* #ifndef APP-NVUE */
-    transition-property: transform, color;
-    transition-duration: 0.3s;
-    transition-timing-function: ease-in-out;
-    /* #endif */
-
-    &--first {
-      border-top-left-radius: 4px;
-      border-bottom-left-radius: 4px;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-
-    &--center {
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-
-    &--last {
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
-      border-top-right-radius: 4px;
-      border-bottom-right-radius: 4px;
-    }
-  }
-
-  &__item {
-    @include flex;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-    // vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
-    position: relative;
-
-    &--no-border-right {
-      border-right-width: 0 !important;
-    }
-
-    &--first {
-      border-top-left-radius: 4px;
-      border-bottom-left-radius: 4px;
-    }
-
-    &--last {
-      border-top-right-radius: 4px;
-      border-bottom-right-radius: 4px;
-    }
-
-    &__text {
-      font-size: 12px;
-      line-height: 14px;
-      @include flex;
-      align-items: center;
-      transition-property: color;
-      transition-duration: 0.3s;
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-subsection/index.scss

@@ -0,0 +1,82 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-subsection {
+  @include flex;
+  position: relative;
+  overflow: hidden;
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  box-sizing: border-box;
+  /* #endif */
+
+  &--button {
+    height: 35px;
+    background-color: rgb(238, 238, 239);
+    padding: 3px;
+    border-radius: $hy-border-radius-sm;
+    align-items: stretch;
+
+    &__bar {
+      background-color: #ffffff;
+      border-radius: $hy-border-radius-sm;
+    }
+  }
+
+  &--subsection {
+    height: 32px;
+  }
+
+  &__bar {
+    position: absolute;
+    /* #ifndef APP-NVUE */
+    transition-property: transform, color;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in-out;
+    /* #endif */
+
+    &--first {
+      border-radius: $hy-border-radius-sm 0 0 $hy-border-radius-sm;
+    }
+
+    &--center {
+      border-radius: 0;
+    }
+
+    &--last {
+      border-radius: 0 $hy-border-radius-sm $hy-border-radius-sm 0;
+    }
+  }
+
+  &__item {
+    @include flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    // vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
+    position: relative;
+
+    &--no-border-right {
+      border-right-width: 0 !important;
+    }
+
+    &--first {
+      border-top-left-radius: $hy-border-radius-sm;
+      border-bottom-left-radius: $hy-border-radius-sm;
+    }
+
+    &--last {
+      border-top-right-radius: $hy-border-radius-sm;
+      border-bottom-right-radius: $hy-border-radius-sm;
+    }
+
+    &__text {
+      font-size: 12px;
+      line-height: 14px;
+      @include flex;
+      align-items: center;
+      transition-property: color;
+      transition-duration: 0.3s;
+    }
+  }
+}

package/components/hy-subsection/props.ts

@@ -1,16 +1,20 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
-  list: [],
+  modelValue: "",
   current: 0,
+  list: [],
+  fieldNames: {
+    label: "name",
+    value: "value",
+  },
   activeColor: ColorConfig.success,
   inactiveColor: "#303133",
   mode: "button",
   fontSize: 12,
   bold: true,
   bgColor: "#eeeeef",
-  keyName: "name"
 };
 
 export default defaultProps;

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

@@ -1,14 +1,30 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
+import { HyApp } from "@/package/typing/modules/common";
+
+export interface SubSectionItemVo extends HyApp.FieldNamesType {
+  name: string;
+  value: string | number;
+}
+
+export type SubSectionVo = string | number | SubSectionItemVo;
 
 export default interface IProps {
   /**
-   * @description tab的数据
+   * @description 接收值
    * */
-  list: (string | Record<string, string>)[];
+  modelValue: string | number;
   /**
-   * @description 当前活动的tab的index（默认 0 ）
+   * @description 默认值 (默认0)
    * */
   current?: number;
+  /**
+   * @description tab的数据
+   * */
+  list: SubSectionVo[];
+  /**
+   * @description list的键值
+   * */
+  fieldNames?: HyApp.IFieldNames;
   /**
    * @description 激活时的颜色（默认 '#3c9cff' ）
    * */
@@ -33,10 +49,6 @@ export default interface IProps {
    * @description 组件背景颜色，mode为button时有效（默认 '#eeeeef' ）
    * */
   bgColor?: string;
-  /**
-   * @description 从`list`元素对象中读取的键名（默认 'name' ）
-   * */
-  keyName?: string;
   /**
    * @description 定义需要用到的外部样式
    * */

package/components/hy-swipe-action/hy-swipe-action.vue

@@ -0,0 +1,294 @@
+<template>
+  <view class="hy-swipe-action" :style="customStyle">
+    <template
+      v-for="(fatherItem, fatherI) in swipeActionList"
+      :key="fatherItem?.[key] || fatherI"
+    >
+      <view class="u-swipe-action-item" ref="u-swipe-action-item">
+        <!--	右侧操作按钮	-->
+        <view class="u-swipe-action-item__right">
+          <slot name="button">
+            <view
+              v-for="(item, index) in options"
+              :key="index"
+              class="u-swipe-action-item__right__button"
+              :ref="`u-swipe-action-item__right__button-${index}`"
+              :style="{
+                alignItems: item?.style?.borderRadius ? 'center' : 'stretch',
+              }"
+              @tap="buttonClickHandler(item, index, fatherI)"
+            >
+              <view
+                class="u-swipe-action-item__right__button__wrapper"
+                :style="operateItemStyle(item?.style)"
+              >
+                <u-icon
+                  v-if="item.icon"
+                  :name="item.icon"
+                  :color="item?.style?.color || '#ffffff'"
+                  :size="
+                    item.iconSize
+                      ? addUnit(item.iconSize)
+                      : item.style && item.style.fontSize
+                        ? getPx(item.style.fontSize) * 1.2
+                        : 17
+                  "
+                  :customStyle="{
+                    marginRight: item.text ? '2px' : 0,
+                  }"
+                ></u-icon>
+                <text
+                  v-if="item.text"
+                  class="u-swipe-action-item__right__button__wrapper__text u-line-1"
+                  :style="operateTextStyle(item?.style)"
+                  >{{ item.text }}</text
+                >
+              </view>
+            </view>
+          </slot>
+        </view>
+        <!--	右侧操作按钮	-->
+
+        <!--  左侧内容  -->
+        <!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5  -->
+        <view
+          class="u-swipe-action-item__content"
+          @touchstart="wxs.touchstart"
+          @touchmove="wxs.touchmove"
+          @touchend="wxs.touchend"
+          :status="fatherItem.status"
+          :change:status="wxs.statusChange"
+          :size="size"
+          :change:size="wxs.sizeChange"
+        >
+          <slot :record="fatherItem"> </slot>
+        </view>
+        <!-- #endif -->
+        <!--  左侧内容  -->
+      </view>
+    </template>
+  </view>
+</template>
+<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
+<script src="./index.wxs" module="wxs" lang="wxs"></script>
+<!-- #endif -->
+
+<script setup lang="ts">
+import type IProps from "./typing";
+import defaultProps from "./props";
+import {
+  computed,
+  type CSSProperties,
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
+// #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5
+import { getRect, sleep, addUnit, getPx } from "@/package";
+// #endif
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  list,
+  show,
+  disabled,
+  autoClose,
+  threshold,
+  options,
+  duration,
+  closeOnClick,
+} = toRefs(props);
+const emit = defineEmits(["update:show", "click"]);
+
+type OpenStatus = "open" | "close" | "";
+
+// 按钮的尺寸信息
+const size = ref({});
+const sliderStyle = ref({});
+const swipeActionList = ref<AnyObject[]>([]);
+
+watch(
+  () => list.value,
+  (newValue) => {
+    swipeActionList.value = newValue.map((item) => ({
+      ...item,
+      status: "close",
+    }));
+  },
+  { immediate: true },
+);
+
+const operateTextStyle = computed(() => {
+  return (temp?: CSSProperties): CSSProperties => {
+    return {
+      color: temp?.color || "#ffffff",
+      fontSize: temp?.fontSize || "16px",
+      lineHeight: temp?.fontSize || "16px",
+    };
+  };
+});
+
+const operateItemStyle = computed(() => {
+  return (temp?: CSSProperties): CSSProperties => {
+    return {
+      backgroundColor: temp?.backgroundColor || "#C7C6CD",
+      borderRadius: temp?.borderRadius || "0",
+      padding: temp?.borderRadius ? 0 : "0 15px",
+      ...temp,
+    };
+  };
+});
+
+const wxsInit = computed(() => {
+  return [
+    disabled.value,
+    autoClose.value,
+    threshold.value,
+    options.value,
+    duration.value,
+  ];
+});
+
+/**
+ * @description 查询节点
+ * */
+const queryRect = () => {
+  getRect(".u-swipe-action-item__right__button", true).then((buttons) => {
+    size.value = {
+      buttons,
+      show: show.value,
+      disabled: disabled.value,
+      threshold: threshold.value,
+      duration: duration.value,
+    };
+  });
+};
+
+watch(
+  () => wxsInit.value,
+  () => queryRect(),
+);
+
+// watch(
+//   () => status.value,
+//   (newValue: OpenStatus) => {
+//     if (newValue === "open") {
+//       emit("update:show", true);
+//     } else {
+//       emit("update:show", false);
+//     }
+//   },
+// );
+//
+// watch(
+//   () => show.value,
+//   (newValue: boolean) => {
+//     if (newValue) {
+//       status.value = "open";
+//     } else {
+//       status.value = "close";
+//     }
+//   },
+// );
+
+onMounted(() => {
+  init();
+});
+
+const init = () => {
+  // 初始化父组件数据
+  updateParentData();
+  // #ifndef APP-NVUE
+  sleep().then(() => {
+    queryRect();
+  });
+  // #endif
+};
+
+const updateParentData = () => {
+  // 此方法在mixin中
+  // getParentData("u-swipe-action");
+};
+
+/**
+ * @description 按钮被点击
+ */
+const buttonClickHandler = (
+  item: AnyObject,
+  index: number,
+  fatherI: number,
+) => {
+  emit(
+    "click",
+    {
+      item,
+      index,
+    },
+    () => {},
+  );
+  if (closeOnClick.value) {
+    closeHandler(fatherI);
+  }
+};
+
+/**
+ * @description 关闭时执行
+ * */
+const closeHandler = (index: number) => {
+  swipeActionList.value = swipeActionList.value.map((item, i) => ({
+    ...item,
+    status: i === index ? "close" : "open",
+  }));
+  console.log(swipeActionList.value);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+
+.u-swipe-action-item {
+  position: relative;
+  overflow: hidden;
+  /* #ifndef APP-NVUE || MP-WEIXIN */
+  touch-action: pan-y;
+  /* #endif */
+
+  &__content {
+    transform: translateX(0px); // 修复某些情况下默认右侧按钮是展开的问题
+    background-color: #ffffff;
+    z-index: 10;
+  }
+
+  &__right {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    @include flex;
+
+    &__button {
+      @include flex;
+      justify-content: center;
+      overflow: hidden;
+      align-items: center;
+
+      &__wrapper {
+        @include flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 15px;
+
+        &__text {
+          @include flex;
+          align-items: center;
+          color: #ffffff;
+          font-size: 15px;
+          text-align: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
+</style>