sard-uniapp 1.0.1 → 1.0.3

package/README.md

@@ -0,0 +1,37 @@
+<p align="center">
+    <img alt="logo" src="https://fastly.jsdelivr.net/npm/@sard/assets/logo.svg" width="120" height="120" style="margin-bottom: 10px;">
+</p>
+
+<h1 align="center">Sard Uniapp</h1>
+
+<p align="center">sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库。</p>
+
+<p align="center">
+  📖 <a href="http://sutras.gitee.io/sard-uniapp-docs">文档网站</a>&nbsp;&nbsp;&nbsp;&nbsp;
+  🧑🏻‍🏫 <a href="http://sutras.gitee.io/sard-uniapp-docs/mobile/">案例演示</a>
+</p>
+
+---
+
+## 介绍
+
+`sard-uniapp` 是一套基于 `Uniapp` + `Vue3`框架开发的兼容多端的 `UI` 组件库。
+
+`sard-uniapp` 兼容 H5 / 小程序 / `APP`（不支持 `nvue` 或 `uvue`）。
+
+## 特性
+
+- 🧩 60+个高质量组件，覆盖移动端主流场景
+- 💪 支持一套代码同时开发 H5 / 小程序 / App
+- 🌿 支持按需引入和 `Tree Shaking`
+- 📖 详尽的文档和案例展示
+- ʦ 使用 `TypeScript` 编写，提供完整的类型定义
+- 🌈 支持定制主题
+- 🌍 国际化支持
+- 🌙 支持暗黑模式
+- 🧪 单元测试覆盖率超过 80%，保障稳定性
+- ⭐️ 零外部依赖，不依赖三方 `npm` 包
+
+## 开源协议
+
+本项目基于 <a href="https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89" target="_blank">MIT</a> 协议，请自由地享受和参与开源。

package/components/_template/index.scss

@@ -0,0 +1,17 @@
+@use '../style/base' as *;
+
+@include bem(_template) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(element) {
+    @include universal;
+
+    @include m(modifier) {
+    }
+  }
+
+  @include m(modifier) {
+  }
+}

package/components/_template/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <view :class="_templateClass" :style="_templateStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts">
+import { defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import { _templateProps } from "./common";
+const __default__ = {
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared"
+  }
+};
+export default /* @__PURE__ */ _defineComponent({
+  ...__default__,
+  __name: "index",
+  props: _templateProps,
+  emits: ["click"],
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const bem = createBem("_template");
+    const _templateClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const _templateStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, bem, _templateClass, _templateStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/_template/variables.scss

@@ -0,0 +1,5 @@
+// #variables
+page {
+  --sar-template-bg: #fff;
+}
+// #endvariables

package/components/accordion/accordion.vue

@@ -0,0 +1,79 @@
+<template>
+  <view :class="accordionClass" :style="accordionStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts">
+import { defineComponent as _defineComponent } from "vue";
+import { computed, provide, ref, watch, toRef, reactive } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import {
+  accoridonContextSymbol,
+  accordionProps
+} from "./common";
+const __default__ = {
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared"
+  }
+};
+export default /* @__PURE__ */ _defineComponent({
+  ...__default__,
+  __name: "accordion",
+  props: accordionProps,
+  emits: ["update:model-value"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("accordion");
+    const innerValue = ref(props.modelValue);
+    watch(
+      () => props.modelValue,
+      () => {
+        innerValue.value = props.modelValue || [];
+      }
+    );
+    const toggle = (name) => {
+      let value;
+      if (props.multiple) {
+        value = Array.isArray(innerValue.value) ? innerValue.value : [];
+        if (value.includes(name)) {
+          value = value.filter((item) => item !== name);
+        } else {
+          value = value.concat(name);
+        }
+      } else {
+        if (innerValue.value === name) {
+          value = void 0;
+        } else {
+          value = name;
+        }
+      }
+      innerValue.value = value;
+      emit("update:model-value", value);
+    };
+    provide(
+      accoridonContextSymbol,
+      reactive({
+        value: innerValue,
+        multiple: toRef(props, "multiple"),
+        toggle
+      })
+    );
+    const accordionClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const accordionStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, emit, bem, innerValue, toggle, accordionClass, accordionStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/accordion/common.d.ts

@@ -0,0 +1,47 @@
+import { type PropType, type StyleValue } from 'vue';
+export interface AccordionProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    modelValue?: (string | number)[] | string | number;
+    multiple?: boolean;
+}
+export declare const accordionProps: {
+    rootStyle: PropType<StyleValue>;
+    rootClass: StringConstructor;
+    modelValue: PropType<string | number | (string | number)[] | undefined>;
+    multiple: BooleanConstructor;
+};
+export interface AccordionEmits {
+    (e: 'update:model-value', event: any): void;
+}
+export interface AccordionSlots {
+    default(props: Record<string, never>): any;
+}
+export interface AccoridonContext {
+    value: any;
+    multiple: AccordionProps['multiple'];
+    toggle: (name: string | number) => void;
+}
+export declare const accoridonContextSymbol: unique symbol;
+export interface AccordionItemProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    title?: string;
+    value?: string;
+    name?: string | number;
+    disabled?: boolean;
+}
+export declare const accordionItemProps: {
+    rootStyle: PropType<StyleValue>;
+    rootClass: StringConstructor;
+    title: StringConstructor;
+    value: StringConstructor;
+    name: (StringConstructor | NumberConstructor)[];
+    disabled: BooleanConstructor;
+};
+export interface AccordionItemEmits {
+    (e: 'click', event: any): void;
+}
+export interface AccordionItemSlots {
+    default(props: Record<string, never>): any;
+}

package/components/accordion/common.js

@@ -0,0 +1,15 @@
+export const accordionProps = {
+    rootStyle: [String, Object, Array],
+    rootClass: String,
+    modelValue: [String, Number, Array],
+    multiple: Boolean,
+};
+export const accoridonContextSymbol = Symbol('accoridon-context');
+export const accordionItemProps = {
+    rootStyle: [String, Object, Array],
+    rootClass: String,
+    title: String,
+    value: String,
+    name: [String, Number],
+    disabled: Boolean,
+};

package/components/accordion/index.d.ts

@@ -0,0 +1 @@
+export type { AccordionProps, AccordionEmits, AccordionSlots, AccordionItemProps, AccordionItemEmits, AccordionItemSlots, } from './common';

package/components/accordion/index.js

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

package/components/accordion/index.scss

@@ -0,0 +1,9 @@
+@use '../style/base' as *;
+
+@include bem(accordion) {
+  @include universal;
+
+  &::before {
+    @include border-vertical(var(--sar-accordion-border-color));
+  }
+}

package/components/accordion/variables.scss

@@ -0,0 +1,16 @@
+// #variables
+page {
+  --sar-accordion-bg: var(--sar-emphasis-bg);
+  --sar-accordion-active-bg: var(--sar-active-bg);
+  --sar-accordion-border-color: var(--sar-border-color);
+
+  --sar-accordion-item-header-padding-x: 32rpx;
+  --sar-accordion-item-header-padding-y: 20rpx;
+
+  --sar-accordion-item-title-font-size: var(--sar-text-base);
+  --sar-accordion-item-title-line-height: var(--sar-leading-snug);
+
+  --sar-accordion-item-body-padding-x: 32rpx;
+  --sar-accordion-item-body-padding-y: 32rpx;
+}
+// #endvariables

package/components/accordion-item/accordion-item.vue

@@ -0,0 +1,83 @@
+<template>
+  <view :class="accordionItemClass" :style="accordionItemStyle">
+    <view
+      :class="
+        classNames(bem.e('header'), bem.em('header', 'disabled', disabled))
+      "
+      @click="onClick"
+    >
+      <view :class="bem.e('title')">{{ title }}</view>
+      <view v-if="value" :class="bem.e('value')">{{ value }}</view>
+      <view :class="bem.e('icon')">
+        <sar-icon :name="iconName" />
+      </view>
+    </view>
+    <sar-collapse :visible="visible">
+      <view :class="bem.e('body')">
+        <slot></slot>
+      </view>
+    </sar-collapse>
+  </view>
+</template>
+
+<script lang="ts">
+import { defineComponent as _defineComponent } from "vue";
+import { computed, inject } from "vue";
+import { classNames, stringifyStyle, createBem, isNullish } from "../../utils";
+import {
+  accoridonContextSymbol,
+  accordionItemProps
+} from "../accordion/common";
+import SarCollapse from "../collapse/collapse.vue";
+import SarIcon from "../icon/icon.vue";
+const __default__ = {
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared"
+  }
+};
+export default /* @__PURE__ */ _defineComponent({
+  ...__default__,
+  __name: "accordion-item",
+  props: accordionItemProps,
+  emits: ["click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("accordion-item");
+    const context = inject(
+      accoridonContextSymbol
+    );
+    if (!context) {
+      throw new Error("AccordionItem must be included in Accordion.");
+    }
+    const onClick = (event) => {
+      if (!props.disabled && !isNullish(props.name)) {
+        context.toggle(props.name);
+      }
+      emit("click", event);
+    };
+    const visible = computed(() => {
+      return context.multiple ? (context.value || []).includes(props.name) : context.value === props.name;
+    });
+    const iconName = computed(() => {
+      return visible.value ? "up" : "down";
+    });
+    const accordionItemClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const accordionItemStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, emit, bem, context, onClick, visible, iconName, accordionItemClass, accordionItemStyle, get classNames() {
+      return classNames;
+    }, SarCollapse, SarIcon };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/accordion-item/index.scss

@@ -0,0 +1,56 @@
+@use '../style/base' as *;
+
+@include bem(accordion-item) {
+  @include b() {
+    @include universal;
+    background-color: var(--sar-accordion-bg);
+
+    &::before {
+      @include border-top(var(--sar-accordion-border-color));
+      left: var(--sar-accordion-item-header-padding-x);
+      right: var(--sar-accordion-item-header-padding-x);
+    }
+
+    &:first-child::before {
+      display: none;
+    }
+  }
+
+  @include e(header) {
+    @include universal;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--sar-accordion-item-header-padding-y)
+      var(--sar-accordion-item-header-padding-x);
+    cursor: pointer;
+
+    @include m-not(disabled) {
+      &:active {
+        background-color: var(--sar-accordion-active-bg);
+      }
+    }
+
+    @include m(disabled) {
+      cursor: not-allowed;
+      @include disabled;
+    }
+  }
+
+  @include e(title) {
+    font-size: var(--sar-accordion-item-title-font-size);
+    line-height: var(--sar-accordion-item-title-line-height);
+  }
+
+  @include e(body) {
+    @include universal;
+    padding: var(--sar-accordion-item-body-padding-y)
+      var(--sar-accordion-item-body-padding-x);
+
+    &::before {
+      @include border-top(var(--sar-accordion-border-color));
+      left: var(--sar-accordion-item-body-padding-x);
+      right: var(--sar-accordion-item-body-padding-x);
+    }
+  }
+}

package/components/action-sheet/action-sheet.vue

@@ -0,0 +1,132 @@
+<template>
+  <sar-popup
+    effect="slide-bottom"
+    :visible="innerVisible"
+    :duration="duration"
+    @overlay-click="onOverlayClick"
+  >
+    <view :class="actionSheetClass" :style="actionSheetStyle">
+      <view v-if="description" :class="bem.e('description')">
+        {{ description }}
+      </view>
+      <view :class="bem.e('content')">
+        <view
+          v-for="(item, i) in itemList"
+          :key="i"
+          :class="
+            classNames(
+              bem.e('item'),
+              bem.em('item', 'disabled', item.disabled),
+              bem.em('item', 'loading', item.loading),
+            )
+          "
+          :style="stringifyStyle({ color: item.color })"
+          @click="onSelect(item, i)"
+        >
+          <template v-if="!item.loading">
+            <view :class="bem.e('item-name')">
+              {{ item.name }}
+            </view>
+            <view v-if="item.description" :class="bem.e('item-description')">
+              {{ item.description }}
+            </view>
+          </template>
+          <view v-else :class="bem.e('loading')">
+            <sar-loading />
+          </view>
+        </view>
+      </view>
+      <template v-if="cancel">
+        <view :class="bem.e('gap')"></view>
+        <view :class="bem.e('cancel')" @click="onCancel">
+          {{ cancel }}
+        </view>
+      </template>
+    </view>
+  </sar-popup>
+</template>
+
+<script lang="ts">
+import { defineComponent as _defineComponent } from "vue";
+import { computed, ref, watch } from "vue";
+import { classNames, stringifyStyle, createBem, noop } from "../../utils";
+import SarPopup from "../popup/popup.vue";
+import SarLoading from "../loading/loading.vue";
+import { actionSheetProps } from "./common";
+const __default__ = {
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared"
+  }
+};
+export default /* @__PURE__ */ _defineComponent({
+  ...__default__,
+  __name: "action-sheet",
+  props: actionSheetProps,
+  emits: ["update:visible", "close", "cancel", "select"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("action-sheet");
+    const innerVisible = ref(props.visible);
+    watch(
+      () => props.visible,
+      () => {
+        innerVisible.value = props.visible;
+      }
+    );
+    const perhapsClose = (type) => {
+      if (typeof props.beforeClose === "function") {
+        const result = props.beforeClose(type);
+        if (result instanceof Promise) {
+          return result.then(() => {
+            innerVisible.value = false;
+            emit("update:visible", false);
+          }).catch(noop);
+        } else if (result === false) {
+          return;
+        }
+      }
+      innerVisible.value = false;
+      emit("update:visible", false);
+    };
+    const onOverlayClick = () => {
+      emit("close");
+      if (props.overlayClosable) {
+        perhapsClose("close");
+      }
+    };
+    const onSelect = (item, index) => {
+      if (!item.disabled && !item.loading) {
+        emit("select", item, index);
+        perhapsClose("select");
+      }
+    };
+    const onCancel = () => {
+      emit("cancel");
+      perhapsClose("cancel");
+    };
+    const actionSheetClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m("headless", !props.description),
+        props.rootClass
+      );
+    });
+    const actionSheetStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, emit, bem, innerVisible, perhapsClose, onOverlayClick, onSelect, onCancel, actionSheetClass, actionSheetStyle, get classNames() {
+      return classNames;
+    }, get stringifyStyle() {
+      return stringifyStyle;
+    }, SarPopup, SarLoading };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/action-sheet/common.d.ts

@@ -0,0 +1,42 @@
+import { type PropType, type StyleValue } from 'vue';
+export interface ActionSheetProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    description?: string;
+    itemList?: ActionSheetItem[];
+    cancel?: string;
+    visible?: boolean;
+    overlayClosable?: boolean;
+    beforeClose?: (type: 'close' | 'cancel' | 'select') => boolean | Promise<any>;
+    duration?: number;
+}
+export declare const actionSheetProps: {
+    rootStyle: PropType<StyleValue>;
+    rootClass: StringConstructor;
+    description: StringConstructor;
+    itemList: PropType<ActionSheetItem[] | undefined>;
+    cancel: StringConstructor;
+    visible: BooleanConstructor;
+    overlayClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    beforeClose: PropType<((type: 'close' | 'cancel' | 'select') => boolean | Promise<any>) | undefined>;
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+};
+export interface ActionSheetEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'close'): void;
+    (e: 'cancel'): void;
+    (e: 'select', item: ActionSheetItem, index: number): void;
+}
+export interface ActionSheetItem {
+    name?: string;
+    description?: string;
+    color?: string;
+    loading?: boolean;
+    disabled?: boolean;
+}

package/components/action-sheet/common.js

@@ -0,0 +1,18 @@
+import { defaultConfig } from '../config';
+export const actionSheetProps = {
+    rootStyle: [String, Object, Array],
+    rootClass: String,
+    description: String,
+    itemList: Array,
+    cancel: String,
+    visible: Boolean,
+    overlayClosable: {
+        type: Boolean,
+        default: defaultConfig.actionSheet.overlayClosable,
+    },
+    beforeClose: Function,
+    duration: {
+        type: Number,
+        default: defaultConfig.shareSheet.duration,
+    },
+};

package/components/action-sheet/index.d.ts

@@ -0,0 +1 @@
+export type { ActionSheetProps, ActionSheetEmits, ActionSheetItem, } from './common';

package/components/action-sheet/index.js

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