sard-uniapp 1.8.2 → 1.9.1

package/README.md

@@ -44,35 +44,59 @@
 git clone https://github.com/sutras/sard-uniapp.git
 ```
 
-### 全局安装 pnpm（如果未安装）
+### 安装依赖
 
 ```bash
-npm install -g pnpm
+npm install
 ```
 
-### 使用 pnpm 安装依赖
+### 运行开发环境
 
 ```bash
-pnpm install
+npm run dev
 ```
 
-### 修改 @dcloudio 源码
+运行上面命令后会生成四个链接：
 
-安装完依赖，需要修改@dcloudio 里面的一个地方，具体参考以下文档中的第一个问题（“热更新无效”）：
+```bash
+Local:   http://localhost:5173/sard-uniapp-docs/mobile/    （演示）
+Network: http://192.168.1.121:5173/sard-uniapp-docs/mobile/ (局域网演示）
+Local:   http://localhost:7761/sard-uniapp-docs/           （文档）
+Network: http://192.168.1.121:7761/sard-uniapp-docs/       （局域网文档）
+```
 
-[https://zhuanlan.zhihu.com/p/665000866](https://zhuanlan.zhihu.com/p/665000866)
+### 测试
 
-### 运行开发环境
+```bash
+npm run test
+```
+
+### 构建文档站点
 
 ```bash
-pnpm run dev
+npm run build:site
 ```
 
-运行上面命令后会生成四个链接：
+### 预览构建的文档站点
 
 ```bash
-Local:   http://localhost:5173/sard-uniapp-docs/mobile/    （演示）
-Network: http://192.168.1.121:5173/sard-uniapp-docs/mobile/ (局域网演示）
-Local:   http://localhost:7761/sard-uniapp-docs/           （文档）
-Network: http://192.168.1.121:7761/sard-uniapp-docs/       （局域网文档）
+npm run preview
+```
+
+### 构建组件库
+
+```bash
+npm run build
+```
+
+### 部署文档站点到 github pages
+
+```bash
+npm run deploy
+```
+
+### 发布组件库到 npm
+
+```bash
+npm run release
 ```

package/changelog.md

@@ -1,3 +1,21 @@
+## [1.9.1](https://github.com/sutras/sard-uniapp/compare/v1.9.0...v1.9.1) (2024-12-22)
+
+
+### Bug Fixes
+
+* 修复qrcode 在app端报错的问题 ([c74cad5](https://github.com/sutras/sard-uniapp/commit/c74cad5cbe7dd733843713fd3500e15236719583))
+
+
+
+# [1.9.0](https://github.com/sutras/sard-uniapp/compare/v1.8.2...v1.9.0) (2024-12-22)
+
+
+### Features
+
+* 新增表格组件 ([f2d0db6](https://github.com/sutras/sard-uniapp/commit/f2d0db61ab595a281590f9b840c25beea6dd4fe7))
+
+
+
 ## [1.8.2](https://github.com/sutras/sard-uniapp/compare/v1.8.1...v1.8.2) (2024-12-06)
 
 
@@ -103,8 +121,8 @@
 
 ### Bug Fixes
 
-* 修复pnpm非扁平化依赖包下lwa依赖问题 close [#32](https://github.com/sutras/sard-uniapp/issues/32) ([5868e16](https://github.com/sutras/sard-uniapp/commit/5868e16587e8664705789e2e791c264f2a7d22f5))
 * lwa copy ([7dc350a](https://github.com/sutras/sard-uniapp/commit/7dc350a09f3d10e4bf9f08733e70e1ec73d15b26))
+* 修复pnpm非扁平化依赖包下lwa依赖问题 close [#32](https://github.com/sutras/sard-uniapp/issues/32) ([5868e16](https://github.com/sutras/sard-uniapp/commit/5868e16587e8664705789e2e791c264f2a7d22f5))
 
 
 
@@ -240,8 +258,8 @@
 
 ### Features
 
-* 新增基础组件 ([8e6385e](https://github.com/sutras/sard-uniapp/commit/8e6385edfd0406aba96920eb1ee68432f1c714f9))
 * **global:** 新增组件 ([5c65aab](https://github.com/sutras/sard-uniapp/commit/5c65aab0860885324b93cac83817905f3a0df66c))
+* 新增基础组件 ([8e6385e](https://github.com/sutras/sard-uniapp/commit/8e6385edfd0406aba96920eb1ee68432f1c714f9))
 
 
 

package/components/config/index.d.ts

@@ -338,6 +338,10 @@ export declare const defaultConfig: {
     tabbar: {
         bordered: boolean;
     };
+    table: {
+        bordered: boolean;
+        underline: boolean;
+    };
     tabs: {
         type: TabsProps["type"];
     };

package/components/config/index.js

@@ -300,6 +300,10 @@ export const defaultConfig = {
     tabbar: {
         bordered: true,
     },
+    table: {
+        bordered: false,
+        underline: false,
+    },
     tabs: {
         type: 'line',
     },

package/components/fab/fab.vue

@@ -41,7 +41,7 @@
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { computed, reactive, ref } from "vue";
+import { computed, reactive, ref, toRef } from "vue";
 import { classNames, stringifyStyle, createBem, isNullish } from "../../utils";
 import {
   defaultFabProps
@@ -88,7 +88,7 @@ export default  _defineComponent({
     const { realVisible, transitionClass, onTransitionEnd } = useTransition(
       reactive({
         visible,
-        duration: props.duration,
+        duration: toRef(() => props.duration),
         prefix: bem.m("zoom-")
       })
     );

package/components/qrcode/common.d.ts

@@ -1,9 +1,10 @@
 import { type StyleValue } from 'vue';
+export type QrcodeECL = 'L' | 'M' | 'Q' | 'H';
 export interface QrcodeProps {
     rootStyle?: StyleValue;
     rootClass?: string;
     text?: string;
-    ecl?: 'L' | 'M' | 'Q' | 'H';
+    ecl?: QrcodeECL;
     type?: 'canvas' | 'image';
     size?: string;
     canvasSize?: number;
@@ -21,3 +22,6 @@ export declare const defaultQrcodeProps: {
     bgColor: string;
     quietZoneModules: number;
 };
+export interface QrcodeSlots {
+    default?(props: Record<string, never>): any;
+}

package/components/qrcode/index.d.ts

@@ -1 +1 @@
-export type { QrcodeProps } from './common';
+export type { QrcodeProps, QrcodeSlots, QrcodeECL } from './common';

package/components/qrcode/index.scss

@@ -3,10 +3,15 @@
 @include bem(qrcode) {
   @include b() {
     @include universal;
+    display: inline-flex;
   }
 
-  @include e(canvas) {
-    display: none;
+  @include e(canvas-wrapper) {
+    position: fixed;
+    left: -999999px;
+    opacity: 0;
+    pointer-events: none;
+    touch-action: none;
   }
 
   @include e(image) {

package/components/qrcode/qrcode.d.ts

@@ -1,7 +1,10 @@
 import { type QrcodeProps } from './common';
-declare const _default: import("vue").DefineComponent<QrcodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QrcodeProps> & Readonly<{}>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<QrcodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QrcodeProps> & Readonly<{}>, {
     text: string;
-    ecl: "L" | "M" | "Q" | "H";
+    ecl: import("./common").QrcodeECL;
     size: string;
     type: "canvas" | "image";
     canvasSize: number;
@@ -9,4 +12,10 @@ declare const _default: import("vue").DefineComponent<QrcodeProps, {}, {}, {}, {
     bgColor: string;
     quietZoneModules: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/qrcode/qrcode.vue

@@ -1,19 +1,37 @@
 <template>
   <view :class="qrcodeClass" :style="qrcodeStyle">
-    <canvas type="2d" :class="bem.e('canvas')" :id="canvasId"></canvas>
+    <view :class="bem.e('canvas-wrapper')">
+      <canvas
+        type="2d"
+        :width="canvasSize"
+        :height="canvasSize"
+        :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
+        :canvas-id="canvasId"
+        :id="canvasId"
+      ></canvas>
+    </view>
     <image :src="dataURL" mode="aspectFit" :class="bem.e('image')" />
+    <slot></slot>
   </view>
 </template>
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { computed, getCurrentInstance, onMounted, shallowRef } from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  onMounted,
+  ref,
+  shallowRef,
+  watch
+} from "vue";
 import {
   classNames,
   stringifyStyle,
   createBem,
   uniqid,
-  qrcode
+  qrcode,
+  isApp
 } from "../../utils";
 import { defaultQrcodeProps } from "./common";
 export default  _defineComponent({
@@ -40,30 +58,72 @@ export default  _defineComponent({
     __expose();
     const props = __props;
     const bem = createBem("qrcode");
+    const instance = getCurrentInstance();
     const canvasId = uniqid();
+    const contextRef = shallowRef();
     const canvasRef = shallowRef();
     const qrcodeMap = computed(() => {
       return qrcode(props.text, {
         ecl: props.ecl
       });
     });
-    const dataURL = computed(() => {
+    const dataURL = ref("");
+    const drawQrcodeInApp = () => {
+      const context = contextRef.value;
+      if (!context) {
+        return;
+      }
+      const map = qrcodeMap.value;
+      const size = props.canvasSize;
+      const moduleSize = size / (map.length + props.quietZoneModules * 2);
+      const margin = moduleSize * props.quietZoneModules;
+      context.clearRect(0, 0, size, size);
+      context.setFillStyle(props.bgColor);
+      context.fillRect(0, 0, size, size);
+      context.setFillStyle(props.color);
+      map.forEach((row, rowIndex) => {
+        row.forEach((col, colIndex) => {
+          if (col === 1) {
+            context.fillRect(
+              colIndex * moduleSize + margin,
+              rowIndex * moduleSize + margin,
+              moduleSize,
+              moduleSize
+            );
+          }
+        });
+      });
+      context.draw();
+      uni.canvasToTempFilePath({
+        x: 0,
+        y: 0,
+        width: size,
+        height: size,
+        destWidth: size,
+        destHeight: size,
+        canvasId,
+        success(res) {
+          dataURL.value = res.tempFilePath;
+        }
+      });
+    };
+    const drawQrcodeInOthers = () => {
       const canvas = canvasRef.value;
       if (!canvas) {
-        return "";
+        return;
       }
       const map = qrcodeMap.value;
       const size = props.canvasSize;
       canvas.width = size;
       canvas.height = size;
-      const context = canvas.getContext("2d");
       const moduleSize = size / (map.length + props.quietZoneModules * 2);
       const margin = moduleSize * props.quietZoneModules;
-      const path = canvas.createPath2D ? canvas.createPath2D() : new Path2D();
+      const context = canvas.getContext("2d");
+      const path2D = canvas.createPath2D ? canvas.createPath2D() : new Path2D();
       map.forEach((row, rowIndex) => {
         row.forEach((col, colIndex) => {
           if (col === 1) {
-            path.rect(
+            path2D.rect(
               colIndex * moduleSize + margin,
               rowIndex * moduleSize + margin,
               moduleSize,
@@ -76,16 +136,37 @@ export default  _defineComponent({
       context.fillStyle = props.bgColor;
       context.fillRect(0, 0, size, size);
       context.fillStyle = props.color;
-      context.fill(path);
-      return canvas.toDataURL();
-    });
-    const instance = getCurrentInstance();
-    onMounted(() => {
-      uni.createSelectorQuery().in(instance).select(`#${canvasId}`).node((res) => {
-        if (res && res.node) {
-          canvasRef.value = res.node;
+      context.fill(path2D);
+      dataURL.value = canvas.toDataURL();
+    };
+    watch(
+      [
+        contextRef,
+        canvasRef,
+        qrcodeMap,
+        () => props.canvasSize,
+        () => props.color,
+        () => props.bgColor,
+        () => props.quietZoneModules
+      ],
+      () => {
+        if (isApp) {
+          drawQrcodeInApp();
+        } else {
+          drawQrcodeInOthers();
         }
-      }).exec();
+      }
+    );
+    onMounted(() => {
+      if (isApp) {
+        contextRef.value = uni.createCanvasContext(canvasId, instance);
+      } else {
+        uni.createSelectorQuery().in(instance).select(`#${canvasId}`).node((res) => {
+          if (res && res.node) {
+            canvasRef.value = res.node;
+          }
+        }).exec();
+      }
     });
     const qrcodeClass = computed(() => {
       return classNames(bem.b(), props.rootClass);
@@ -96,7 +177,7 @@ export default  _defineComponent({
         height: props.size
       });
     });
-    const __returned__ = { props, bem, canvasId, canvasRef, qrcodeMap, dataURL, instance, qrcodeClass, qrcodeStyle };
+    const __returned__ = { props, bem, instance, canvasId, contextRef, canvasRef, qrcodeMap, dataURL, drawQrcodeInApp, drawQrcodeInOthers, qrcodeClass, qrcodeStyle };
     return __returned__;
   }
 });

package/components/style/mixins/border.scss

@@ -1,14 +1,15 @@
-@mixin border-base($color) {
+@mixin border-base {
   position: absolute;
   z-index: 1;
   pointer-events: none;
+  touch-action: none;
   opacity: 1;
   content: '';
   @content;
 }
 
 @mixin border-vertical-base($color) {
-  @include border-base($color) {
+  @include border-base {
     left: 0;
     right: 0;
     transform: scaleY(0.5);
@@ -17,7 +18,7 @@
 }
 
 @mixin border-horizontal-base($color) {
-  @include border-base($color) {
+  @include border-base {
     top: 0;
     bottom: 0;
     transform: scaleX(0.5);
@@ -72,6 +73,7 @@
   transform: scale(0.5);
   transform-origin: center;
   pointer-events: none;
+  touch-action: none;
   content: '';
   @content;
 }

package/components/table/common.d.ts

@@ -0,0 +1,52 @@
+import { type StyleValue } from 'vue';
+export interface TableProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    bordered?: boolean;
+    underline?: boolean;
+    height?: string;
+}
+export declare const defaultTableProps: {
+    bordered: boolean;
+    underline: boolean;
+};
+export interface TableSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface TableContext {
+}
+export declare const tableContextSymbol: unique symbol;
+export interface TableRowProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    fixed?: boolean;
+}
+export interface TableRowSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface TableCellProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    width?: string;
+    bold?: boolean;
+    fixed?: boolean | 'left' | 'right';
+}
+export interface TableCellSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface TableFixationProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    tableWidth?: number;
+    scrollY?: boolean;
+    height?: string;
+    bordered?: boolean;
+    underline?: boolean;
+}
+export interface TableFixationSlots {
+    default?(props: Record<string, never>): any;
+}
+export type TableScrollSide = 'left' | 'middle' | 'right';
+export interface TableFixationEmits {
+    (e: 'scroll-side', side: TableScrollSide | null): void;
+}

package/components/table/common.js

@@ -0,0 +1,3 @@
+import { defaultConfig } from '../config';
+export const defaultTableProps = defaultConfig.table;
+export const tableContextSymbol = Symbol('table-context');

package/components/table/index.d.ts

@@ -0,0 +1 @@
+export type { TableProps, TableSlots, TableCellProps, TableCellSlots, TableRowProps, TableRowSlots, } from './common';

package/components/table/index.js

@@ -0,0 +1 @@
+export {};

package/components/table/index.scss

@@ -0,0 +1,10 @@
+@use '../style/base' as *;
+
+@include bem(table) {
+  @include b() {
+    @include universal;
+    display: inline-flex;
+    min-width: 100%;
+    background-color: var(--sar-table-bg);
+  }
+}

package/components/table/table.d.ts

@@ -0,0 +1,13 @@
+import { type TableProps, type TableSlots } from './common';
+declare function __VLS_template(): Readonly<TableSlots> & TableSlots;
+declare const __VLS_component: import("vue").DefineComponent<TableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableProps> & Readonly<{}>, {
+    underline: boolean;
+    bordered: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/table/table.vue

@@ -0,0 +1,101 @@
+<template>
+  <sar-table-fixation
+    :table-width="tableWidth"
+    :scroll-y="fixedRow"
+    :height="height"
+    :bordered="bordered"
+    :underline="underline"
+    @scroll-side="onScrollSide"
+  >
+    <view :id="tableId" :class="tableClass" :style="tableStyle">
+      <slot></slot>
+    </view>
+  </sar-table-fixation>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  provide,
+  reactive,
+  ref
+} from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  uniqid,
+  getBoundingClientRect,
+  isNullish
+} from "../../utils";
+import {
+  tableContextSymbol,
+  defaultTableProps
+} from "./common";
+import SarTableFixation from "../table-fixation/table-fixation.vue";
+export default  _defineComponent({
+  components: {
+    SarTableFixation,
+  },
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "table",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    bordered: { type: Boolean, required: false },
+    underline: { type: Boolean, required: false },
+    height: { type: String, required: false }
+  }, defaultTableProps),
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const bem = createBem("table");
+    const tableId = uniqid();
+    const instance = getCurrentInstance();
+    const tableWidth = ref(0);
+    const setTableRect = async () => {
+      const tableRect = await getBoundingClientRect(`#${tableId}`, instance);
+      tableWidth.value = tableRect.width;
+    };
+    onMounted(() => {
+      nextTick(setTableRect);
+    });
+    uni.onWindowResize(setTableRect);
+    const fixedRow = computed(() => {
+      return !isNullish(props.height);
+    });
+    const scrollSide = ref(null);
+    const onScrollSide = (side) => {
+      scrollSide.value = side;
+    };
+    provide(tableContextSymbol, reactive({}));
+    const tableClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m("bordered", props.bordered),
+        bem.m("underline", props.underline),
+        bem.m("scroll-" + scrollSide.value, scrollSide.value),
+        props.rootClass
+      );
+    });
+    const tableStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, bem, tableId, instance, tableWidth, setTableRect, fixedRow, scrollSide, onScrollSide, tableClass, tableStyle, SarTableFixation };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/table/variables-dark.scss

@@ -0,0 +1,8 @@
+@use '../style/base' as *;
+
+// #variables
+@include theme-dark {
+  --sar-table-fixed-left-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, 0.75);
+  --sar-table-fixed-right-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.75);
+}
+// #endvariables

package/components/table/variables.scss

@@ -0,0 +1,12 @@
+// #variables
+page {
+  --sar-table-border-color: var(--sar-border-color);
+  --sar-table-bg: var(--sar-emphasis-bg);
+
+  --sar-table-row-fixed-bg: var(--sar-emphasis-bg);
+
+  --sar-table-cell-fixed-bg: var(--sar-emphasis-bg);
+  --sar-table-fixed-left-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
+  --sar-table-fixed-right-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
+}
+// #endvariables

package/components/table-cell/index.scss

@@ -0,0 +1,90 @@
+@use '../style/base' as *;
+
+@include bem(table) {
+  @include e(cell) {
+    @include universal;
+    flex: 1;
+    min-width: 0;
+    justify-content: center;
+
+    @include m(bold) {
+      font-weight: var(--sar-font-bold);
+    }
+
+    @include m(fixed-left, fixed-right) {
+      position: sticky;
+      z-index: 2;
+      background-color: var(--sar-table-cell-fixed-bg);
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 20rpx;
+        overflow-x: hidden;
+        overflow-y: hidden;
+        box-shadow: none;
+        touch-action: none;
+        pointer-events: none;
+      }
+    }
+
+    @include m(fixed-left) {
+      left: 0;
+
+      &::before {
+        right: -20rpx;
+      }
+    }
+
+    @include m(fixed-right) {
+      right: 0;
+
+      &::before {
+        left: -20rpx;
+      }
+    }
+  }
+
+  @include m(bordered) {
+    @include e(cell) {
+      &::after {
+        @include border-bottom-right(var(--sar-table-border-color));
+        right: 0;
+        bottom: 0;
+        left: -100%;
+        top: -100%;
+        transform-origin: right bottom;
+      }
+    }
+  }
+
+  @include m(underline) {
+    @include e(cell) {
+      &::after {
+        @include border-bottom(var(--sar-table-border-color));
+      }
+    }
+  }
+
+  @include m(scroll-middle, scroll-right) {
+    @include e(cell) {
+      @include m(fixed-left) {
+        &::before {
+          box-shadow: var(--sar-table-fixed-left-shadow);
+        }
+      }
+    }
+  }
+
+  @include m(scroll-middle, scroll-left) {
+    @include e(cell) {
+      @include m(fixed-right) {
+        &::before {
+          box-shadow: var(--sar-table-fixed-right-shadow);
+        }
+      }
+    }
+  }
+}

package/components/table-cell/table-cell.d.ts

@@ -0,0 +1,10 @@
+import { type TableCellProps, type TableCellSlots } from '../table/common';
+declare function __VLS_template(): Readonly<TableCellSlots> & TableCellSlots;
+declare const __VLS_component: import("vue").DefineComponent<TableCellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableCellProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/table-cell/table-cell.vue

@@ -0,0 +1,57 @@
+<template>
+  <view :class="cellClass" :style="cellStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem, isNullish } from "../../utils";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "table-cell",
+  props: {
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    width: { type: String, required: false },
+    bold: { type: Boolean, required: false },
+    fixed: { type: [Boolean, String], required: false }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const bem = createBem("table");
+    const cellClass = computed(() => {
+      const fixedSide = props.fixed === true ? "left" : props.fixed;
+      return classNames(
+        bem.e("cell"),
+        bem.em("cell", "bold", props.bold),
+        bem.em("cell", "fixed-" + fixedSide, props.fixed),
+        props.rootClass
+      );
+    });
+    const cellStyle = computed(() => {
+      const isFlexGrow = !isNaN(Number(props.width));
+      return stringifyStyle(
+        {
+          width: isNullish(props.width) || isFlexGrow ? void 0 : props.width,
+          flex: isNullish(props.width) ? void 0 : isFlexGrow ? props.width : `${parseFloat(props.width)} 0 ${props.width}`
+        },
+        props.rootStyle
+      );
+    });
+    const __returned__ = { props, bem, cellClass, cellStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/table-fixation/index.scss

@@ -0,0 +1,21 @@
+@use '../style/base' as *;
+
+@include bem(table) {
+  @include e(fixation) {
+    @include universal;
+
+    @include m(bordered) {
+      &::after {
+        @include border-surround(var(--sar-table-border-color));
+        z-index: 4;
+      }
+    }
+
+    @include m(underline) {
+      &::after {
+        @include border-bottom(var(--sar-table-border-color));
+        z-index: 4;
+      }
+    }
+  }
+}

package/components/table-fixation/table-fixation.d.ts

@@ -0,0 +1,14 @@
+import { type TableFixationProps, type TableFixationSlots, type TableScrollSide } from '../table/common';
+declare function __VLS_template(): Readonly<TableFixationSlots> & TableFixationSlots;
+declare const __VLS_component: import("vue").DefineComponent<TableFixationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "scroll-side": (side: TableScrollSide | null) => any;
+}, string, import("vue").PublicProps, Readonly<TableFixationProps> & Readonly<{
+    "onScroll-side"?: ((side: TableScrollSide | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/table-fixation/table-fixation.vue

@@ -0,0 +1,112 @@
+<template>
+  <scroll-view
+    :id="fixationId"
+    :class="fixationClass"
+    :style="fixationStyle"
+    :scroll-y="scrollY"
+    scroll-x
+    :upper-threshold="0"
+    :lower-threshold="0"
+    :throttle="false"
+    @scroll="onScroll"
+    @scrolltoupper="onScrolltoupper"
+    @scrolltolower="onScrolltolower"
+  >
+    <slot></slot>
+  </scroll-view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  getBoundingClientRect,
+  uniqid
+} from "../../utils";
+import { nextTick } from "vue";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "table-fixation",
+  props: {
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    tableWidth: { type: Number, required: false },
+    scrollY: { type: Boolean, required: false },
+    height: { type: String, required: false },
+    bordered: { type: Boolean, required: false },
+    underline: { type: Boolean, required: false }
+  },
+  emits: ["scroll-side"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("table");
+    const scrollSide = ref(null);
+    const onScroll = (event) => {
+      if (event.detail.scrollLeft !== 0) {
+        scrollSide.value = "middle";
+      }
+    };
+    const onScrolltoupper = (event) => {
+      if (event.detail.direction === "left") {
+        scrollSide.value = "left";
+      }
+    };
+    const onScrolltolower = (event) => {
+      if (event.detail.direction === "right") {
+        scrollSide.value = "right";
+      }
+    };
+    const fixationId = uniqid();
+    const instance = getCurrentInstance();
+    const fixationRect = ref(null);
+    watch([() => props.tableWidth, fixationRect], () => {
+      scrollSide.value = props.tableWidth && fixationRect.value && props.tableWidth > fixationRect.value.width ? "left" : null;
+    });
+    onMounted(() => {
+      nextTick(setFixationRect);
+    });
+    const setFixationRect = async () => {
+      fixationRect.value = await getBoundingClientRect(`#${fixationId}`, instance);
+    };
+    uni.onWindowResize(setFixationRect);
+    watch(
+      scrollSide,
+      () => {
+        emit("scroll-side", scrollSide.value);
+      },
+      {
+        immediate: true
+      }
+    );
+    const fixationClass = computed(() => {
+      return classNames(
+        bem.e("fixation"),
+        bem.em("fixation", "bordered", props.bordered),
+        bem.em("fixation", "underline", props.underline),
+        props.rootClass
+      );
+    });
+    const fixationStyle = computed(() => {
+      return stringifyStyle(props.rootStyle, {
+        height: props.height
+      });
+    });
+    const __returned__ = { props, emit, bem, scrollSide, onScroll, onScrolltoupper, onScrolltolower, fixationId, instance, fixationRect, setFixationRect, fixationClass, fixationStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/table-row/index.scss

@@ -0,0 +1,15 @@
+@use '../style/base' as *;
+
+@include bem(table) {
+  @include e(row) {
+    @include universal;
+    flex-direction: row;
+
+    @include m(fixed) {
+      position: sticky;
+      top: 0;
+      z-index: 3;
+      background-color: var(--sar-table-row-fixed-bg);
+    }
+  }
+}

package/components/table-row/table-row.d.ts

@@ -0,0 +1,10 @@
+import { type TableRowProps, type TableRowSlots } from '../table/common';
+declare function __VLS_template(): Readonly<TableRowSlots> & TableRowSlots;
+declare const __VLS_component: import("vue").DefineComponent<TableRowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableRowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/table-row/table-row.vue

@@ -0,0 +1,46 @@
+<template>
+  <view :class="rowClass" :style="rowStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "table-row",
+  props: {
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    fixed: { type: Boolean, required: false }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const bem = createBem("table");
+    const rowClass = computed(() => {
+      return classNames(
+        bem.e("row"),
+        bem.em("row", "fixed", props.fixed),
+        props.rootClass
+      );
+    });
+    const rowStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, bem, rowClass, rowStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/dark.scss

@@ -2,3 +2,4 @@
 @use './components/skeleton/variables-dark.scss' as *;
 @use './components/slider/variables-dark.scss' as *;
 @use './components/style/variables-dark.scss' as *;
+@use './components/table/variables-dark.scss' as *;

package/global.d.ts

@@ -84,6 +84,9 @@ declare module 'vue' {
     SarTab: typeof import('./components/tab/tab').default
     SarTabbar: typeof import('./components/tabbar/tabbar').default
     SarTabbarItem: typeof import('./components/tabbar-item/tabbar-item').default
+    SarTable: typeof import('./components/table/table').default
+    SarTableRow: typeof import('./components/table-row/table-row').default
+    SarTableCell: typeof import('./components/table-cell/table-cell').default
     SarTabs: typeof import('./components/tabs/tabs').default
     SarTag: typeof import('./components/tag/tag').default
     SarTimeline: typeof import('./components/timeline/timeline').default

package/index.d.ts

@@ -68,6 +68,7 @@ export * from './components/steps';
 export * from './components/swiper-dot';
 export * from './components/switch';
 export * from './components/tabbar';
+export * from './components/table';
 export * from './components/tabs';
 export * from './components/tag';
 export * from './components/timeline';

package/index.js

@@ -68,6 +68,7 @@ export * from './components/steps';
 export * from './components/swiper-dot';
 export * from './components/switch';
 export * from './components/tabbar';
+export * from './components/table';
 export * from './components/tabs';
 export * from './components/tag';
 export * from './components/timeline';

package/index.scss

@@ -59,6 +59,7 @@
 @use './components/swiper-dot/variables.scss' as *;
 @use './components/switch/variables.scss' as *;
 @use './components/tabbar/variables.scss' as *;
+@use './components/table/variables.scss' as *;
 @use './components/tabs/variables.scss' as *;
 @use './components/tag/variables.scss' as *;
 @use './components/timeline/variables.scss' as *;

package/package.json

@@ -1,7 +1,8 @@
 {
   "id": "sard-uniapp",
   "name": "sard-uniapp",
-  "version": "1.8.2",
+  "displayName": "sard-uniapp",
+  "version": "1.9.1",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {
@@ -109,13 +110,13 @@
     "eslint-plugin-vue": "^9.32.0",
     "glob": "^11.0.0",
     "globals": "^15.13.0",
-    "husky": "^8.0.3",
+    "husky": "^9.1.7",
     "inquirer": "^9.3.7",
     "lint-staged": "^13.3.0",
     "lodash-es": "^4.17.21",
     "prettier": "^2.8.8",
     "region-data": "^1.2.3",
-    "sard-cli": "^1.0.2",
+    "sard-cli": "^1.0.3",
     "sass": "^1.43.4",
     "tel-area-code": "^1.0.1",
     "ts-custom-error": "^3.3.1",

package/utils/bem.d.ts

@@ -4,7 +4,7 @@ export interface BemConfig {
     elementSeparator: string;
     modifierSeparator: string;
 }
-type IsType = boolean | number | string | null;
+type IsType = boolean | number | string | null | undefined | object;
 export declare function createBemStruct(config: BemConfig): (block: string | number) => {
     b(): string;
     e(element: string | number | undefined, is?: IsType): string;

package/utils/dom.js

@@ -77,7 +77,7 @@ export function getBoundingClientRect(selector, instance) {
     return new Promise((resolve) => {
         uni
             .createSelectorQuery()
-            .in(instance)
+            .in(instance?.proxy)
             .select(selector)
             .boundingClientRect((data) => {
             resolve(data);

package/utils/index.d.ts

@@ -7,3 +7,4 @@ export * from './is';
 export * from './utils';
 export * from './lwa.slim';
 export * from './qrcode';
+export * from './system';

package/utils/index.js

@@ -7,3 +7,4 @@ export * from './is';
 export * from './utils';
 export * from './lwa.slim';
 export * from './qrcode';
+export * from './system';

package/utils/system.d.ts

@@ -0,0 +1,4 @@
+export declare const systemInfo: UniApp.GetSystemInfoResult;
+export declare const isApp: boolean;
+export declare const isWeb: boolean;
+export declare const isMp: boolean;

package/utils/system.js

@@ -0,0 +1,4 @@
+export const systemInfo = uni.getSystemInfoSync();
+export const isApp = systemInfo.uniPlatform === 'app';
+export const isWeb = systemInfo.uniPlatform === 'web';
+export const isMp = systemInfo.uniPlatform.startsWith('mp-');