hy-app 0.2.1 → 0.2.4

package/components/hy-pagination/hy-pagination.vue

@@ -0,0 +1,125 @@
+<template>
+  <view
+    class="hy-pagination"
+    :style="customStyle"
+    v-if="!(hideIfOnePage && totalPageNum === 1)"
+  >
+    <view class="hy-pagination__content">
+      <hy-button
+        :plain="modelValue > 1"
+        type="info"
+        size="small"
+        :disabled="modelValue <= 1"
+        shape="circle"
+        class="hy-pagination__nav"
+        @click="sub"
+      >
+        <text v-if="!showIcon">{{ prevText }}</text>
+        <hy-icon
+          v-else
+          :class="`hy-pagination__left hy-pagination__icon ${modelValue <= 1 ? 'hy-pagination__nav--disabled' : 'hy-pagination__nav--active'}`"
+          :name="IconConfig.LEFT"
+        ></hy-icon>
+      </hy-button>
+      <view class="hy-pagination__size">
+        <text class="hy-pagination__current">{{ modelValue }}</text>
+        <text class="hy-pagination__separator">/</text>
+        <text>{{ totalPageNum }}</text>
+      </view>
+      <hy-button
+        :plain="modelValue < totalPageNum"
+        type="info"
+        size="small"
+        :disabled="modelValue >= totalPageNum"
+        shape="circle"
+        @click="add"
+      >
+        <text v-if="!showIcon">{{ nextText }}</text>
+        <hy-icon
+          v-else
+          :custom-class="`hy-pagination__icon ${modelValue >= totalPageNum ? 'hy-pagination__nav--disabled' : 'hy-pagination__nav--active'}`"
+          :name="IconConfig.RIGHT"
+        ></hy-icon>
+      </hy-button>
+    </view>
+    <view class="hy-pagination__message" v-if="showMessage">
+      <text>当前页：{{ modelValue }}，</text>
+      <text v-if="total">当前数据：{{ total }}，</text>
+      <text>分页大小：{{ pageSize }}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "hy-pagination",
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyButton from "../hy-button/hy-button.vue";
+import { ref, toRefs, watch } from "vue";
+import type IProps from "./typing";
+import defaultProps from "./props";
+import { IconConfig } from "hy-app";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { pageSize, totalPage } = toRefs(props);
+const emit = defineEmits(["change", "update:modelValue"]);
+
+const totalPageNum = ref<number>(0); // 总页数
+
+watch(
+  () => totalPage.value,
+  (newValue) => {
+    if (!totalPageNum.value && newValue) {
+      totalPageNum.value = totalPageNum.value;
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+watch(
+  () => props.total,
+  () => {
+    updateTotalPage();
+  },
+  { immediate: true, deep: true },
+);
+
+/**
+ * @description 加数
+ * */
+const add = () => {
+  const { modelValue } = props;
+  if (modelValue > totalPageNum.value - 1) {
+    return;
+  }
+  emit("change", { value: modelValue + 1 });
+  emit("update:modelValue", modelValue + 1);
+};
+
+const sub = () => {
+  const { modelValue } = props;
+  if (modelValue < 2) {
+    return;
+  }
+  emit("change", { value: modelValue - 1 });
+  emit("update:modelValue", modelValue - 1);
+};
+
+function updateTotalPage() {
+  const { total, pageSize } = props;
+  totalPageNum.value = Math.ceil(total / pageSize);
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

package/components/hy-pagination/index.scss

@@ -0,0 +1,46 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+
+@include b(pagination) {
+  user-select: none;
+
+  //@include edeep(icon) {
+  //  font-size: $-pagination-icon-size;
+  //}
+
+  @include e(content) {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: $hy-border-margin-padding-base;
+  }
+  @include e(message) {
+    text-align: center;
+    font-size: $hy-font-size-sm;
+    padding: 1px 0 16px 0;
+  }
+  &__nav {
+    min-width: 60px;
+    @include m(active){
+      color: rgba(0,0,0,0.65)
+    }
+    @include m(disabled){
+      color: rgba(0,0,0,0.15)
+    }
+  }
+  @include e(size){
+    flex: 1;
+    text-align: center;
+    font-size: $hy-font-size-sm;
+  }
+  @include e(separator){
+    padding:  0 4px;
+  }
+  &__left {
+    display: inline-block;
+  }
+  @include e(current){
+    color: $hy-primary;
+  }
+}

package/components/hy-pagination/props.ts

@@ -0,0 +1,15 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  modelValue: 1,
+  totalPage: 1,
+  showIcon: false,
+  showMessage: false,
+  total: 0,
+  pageSize: 10,
+  prevText: "上一页",
+  nextText: "下一页",
+  hideIfOnePage: true,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,44 @@
+import type { CSSProperties } from "vue";
+
+export default interface HyPaginationProps {
+  /**
+   * @description 当前页
+   */
+  modelValue: number;
+  /**
+   * @description 总页数，如果有total，则优先使用total计算页数
+   */
+  totalPage?: number;
+  /**
+   * @description 是否展示分页为Icon图标
+   */
+  showIcon?: boolean;
+  /**
+   * @desc 是否展示总条数
+   */
+  showMessage?: boolean;
+  /**
+   * @description 总条数
+   */
+  total?: number;
+  /**
+   * @description 每页条数
+   */
+  pageSize?: number;
+  /**
+   * @description 上一页文本
+   */
+  prevText?: string;
+  /**
+   * @description 下一页文本
+   */
+  nextText?: string;
+  /**
+   * @description 总页数只有一页时是否隐藏
+   */
+  hideIfOnePage?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-picker/index.scss

@@ -37,6 +37,10 @@
       flex: 1;
       justify-content: center;
 
+      :deep(.uni-picker-view-indicator) {
+        background: $hy-background--hover;
+      }
+
       &__item {
         @include flex;
         justify-content: center;

package/components/hy-scroll-list/index.scss

@@ -30,7 +30,7 @@
       height: 4px;
       border-radius: $hy-border-radius-semicircle;
       overflow: hidden;
-      background-color: var(--hy-theme-color--light, $hy-border-color);
+      background-color: $hy-background--empty;
 
       &__bar {
         width: 20px;

package/components/hy-search/index.scss

@@ -33,8 +33,7 @@ $hy-search-close-size: 20px !default;
     }
 
     &__label {
-      color:
-$hy-light-color;
+      color: $hy-text-color;
       font-size: $hy-font-size-base;
       margin: 0 4px;
     }

package/components/hy-signature/canvasHelper.ts

@@ -0,0 +1,51 @@
+/**
+ * 适配 canvas 2d 上下文
+ * @param ctx canvas 2d 上下文
+ * @returns
+ */
+export function canvas2dAdapter(
+  ctx: CanvasRenderingContext2D,
+): UniApp.CanvasContext {
+  return Object.assign(ctx, {
+    setFillStyle(color: string | CanvasGradient) {
+      ctx.fillStyle = color;
+    },
+    setStrokeStyle(color: string | CanvasGradient | CanvasPattern) {
+      ctx.strokeStyle = color;
+    },
+    setLineWidth(lineWidth: number) {
+      ctx.lineWidth = lineWidth;
+    },
+    setLineCap(lineCap: "butt" | "round" | "square") {
+      ctx.lineCap = lineCap;
+    },
+
+    setFontSize(font: string) {
+      ctx.font = font;
+    },
+    setGlobalAlpha(alpha: number) {
+      ctx.globalAlpha = alpha;
+    },
+    setLineJoin(lineJoin: "bevel" | "round" | "miter") {
+      ctx.lineJoin = lineJoin;
+    },
+    setTextAlign(align: "left" | "center" | "right") {
+      ctx.textAlign = align;
+    },
+    setMiterLimit(miterLimit: number) {
+      ctx.miterLimit = miterLimit;
+    },
+    setShadow(offsetX: number, offsetY: number, blur: number, color: string) {
+      ctx.shadowOffsetX = offsetX;
+      ctx.shadowOffsetY = offsetY;
+      ctx.shadowBlur = blur;
+      ctx.shadowColor = color;
+    },
+    setTextBaseline(textBaseline: "top" | "bottom" | "middle") {
+      ctx.textBaseline = textBaseline;
+    },
+    createCircularGradient() {},
+    draw() {},
+    addColorStop() {},
+  }) as unknown as UniApp.CanvasContext;
+}