sard-uniapp 1.0.2 → 1.0.4

package/components/action-sheet/variables.scss

@@ -0,0 +1,31 @@
+// #variables
+page {
+  --sar-action-sheet-border-radius: var(--sar-rounded-xl);
+  --sar-action-sheet-border-color: var(--sar-border-color);
+  --sar-action-sheet-bg: var(--sar-emphasis-bg);
+  --sar-action-sheet-active-bg: var(--sar-active-bg);
+
+  --sar-action-sheet-description-padding: 32rpx;
+  --sar-action-sheet-description-font-size: var(--sar-text-base);
+  --sar-action-sheet-description-color: var(--sar-tertiary-color);
+
+  --sar-action-sheet-item-min-height: 96rpx;
+  --sar-action-sheet-item-padding: 16rpx 32rpx;
+
+  --sar-action-sheet-gap-bg: var(--sar-body-bg);
+  --sar-action-sheet-gap-height: 16rpx;
+
+  --sar-action-sheet-item-name-font-size: var(--sar-text-lg);
+
+  --sar-action-sheet-item-description-margin-top: 16rpx;
+  --sar-action-sheet-item-description-font-size: var(--sar-text-sm);
+  --sar-action-sheet-item-description-color: var(--sar-tertiary-color);
+
+  --sar-action-sheet-loading-size: 40rpx;
+  --sar-action-sheet-loading-color: var(--sar-quaternary-color);
+
+  --sar-action-sheet-cancel-min-height: 96rpx;
+  --sar-action-sheet-cancel-padding: 16rpx 32rpx;
+  --sar-action-sheet-cancel-font-size: var(--sar-text-lg);
+}
+// #endvariables

package/components/avatar/avatar.vue

@@ -0,0 +1,62 @@
+<template>
+  <view :class="avatarClass" :style="avatarStyle">
+    <slot>
+      <image
+        v-if="src"
+        :src="src"
+        mode="aspectFill"
+        :class="classNames(bem.e('image'), bem.m(shape))"
+      />
+
+      <sar-icon v-else name="person" :root-class="bem.e('icon')" />
+    </slot>
+    <slot name="extra"></slot>
+  </view>
+</template>
+
+<script lang="ts">
+import { defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import SarIcon from "../icon/icon.vue";
+import { avatarProps } from "./common";
+const __default__ = {
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared"
+  }
+};
+export default /* @__PURE__ */ _defineComponent({
+  ...__default__,
+  __name: "avatar",
+  props: avatarProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const bem = createBem("avatar");
+    const avatarClass = computed(() => {
+      return classNames(bem.b(), bem.m(props.shape), props.rootClass);
+    });
+    const avatarStyle = computed(() => {
+      return stringifyStyle(
+        {
+          width: props.size,
+          height: props.size,
+          color: props.color,
+          fontSize: props.iconSize,
+          background: props.background
+        },
+        props.rootStyle
+      );
+    });
+    const __returned__ = { props, bem, avatarClass, avatarStyle, get classNames() {
+      return classNames;
+    }, SarIcon };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/avatar/common.d.ts

@@ -0,0 +1,28 @@
+import { type PropType, type StyleValue } from 'vue';
+export interface AvatarProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    shape?: 'circle' | 'square';
+    size?: string;
+    iconSize?: string;
+    background?: string;
+    color?: string;
+    src?: string;
+}
+export declare const avatarProps: {
+    rootStyle: PropType<StyleValue>;
+    rootClass: StringConstructor;
+    shape: {
+        type: PropType<"circle" | "square" | undefined>;
+        default: string;
+    };
+    size: StringConstructor;
+    iconSize: StringConstructor;
+    background: StringConstructor;
+    color: StringConstructor;
+    src: StringConstructor;
+};
+export interface AvatarSlots {
+    default(props: Record<string, never>): any;
+    extra(props: Record<string, never>): any;
+}

package/components/avatar/common.js

@@ -0,0 +1,14 @@
+import { defaultConfig } from '../config';
+export const avatarProps = {
+    rootStyle: [String, Object, Array],
+    rootClass: String,
+    shape: {
+        type: String,
+        default: defaultConfig.avatar.shape,
+    },
+    size: String,
+    iconSize: String,
+    background: String,
+    color: String,
+    src: String,
+};

package/components/avatar/index.d.ts

@@ -0,0 +1 @@
+export type { AvatarProps, AvatarSlots } from './common';

package/components/avatar/index.js

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

package/components/avatar/index.scss

@@ -0,0 +1,29 @@
+@use '../style/base' as *;
+
+@include bem(avatar) {
+  @include b() {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: var(--sar-avatar-width);
+    height: var(--sar-avatar-height);
+    font-size: var(--sar-avatar-font-size);
+    background-color: var(--sar-avatar-bg);
+  }
+
+  @include e(image) {
+    @include universal;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include m(circle) {
+    border-radius: var(--sar-rounded-full);
+  }
+
+  @include m(square) {
+    border-radius: var(--sar-avatar-square-border-radius);
+  }
+}

package/components/avatar/variables.scss

@@ -0,0 +1,10 @@
+// #variables
+page {
+  --sar-avatar-width: 128rpx;
+  --sar-avatar-height: 128rpx;
+  --sar-avatar-font-size: 64rpx;
+  --sar-avatar-bg: var(--sar-secondary-bg);
+
+  --sar-avatar-square-border-radius: var(--sar-rounded);
+}
+// #endvariables

package/components/badge/badge.vue

@@ -0,0 +1,69 @@
+<template>
+  <view v-if="$slots.default" :class="bem.e('wrapper')">
+    <slot></slot>
+    <view :class="badgeClass" :style="badgeStyle">
+      <slot name="value">
+        {{ innerValue }}
+      </slot>
+    </view>
+  </view>
+  <view v-else :class="badgeClass" :style="badgeStyle">
+    <slot name="value">
+      {{ innerValue }}
+    </slot>
+  </view>
+</template>
+
+<script lang="ts">
+import { defineComponent as _defineComponent } from "vue";
+import { computed, useSlots } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import { badgeProps } from "./common";
+const __default__ = {
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared"
+  }
+};
+export default /* @__PURE__ */ _defineComponent({
+  ...__default__,
+  __name: "badge",
+  props: badgeProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const bem = createBem("badge");
+    const slots = useSlots();
+    const zeroHide = computed(() => {
+      return !props.dot && props.value === 0 && !props.showZero && !slots.value;
+    });
+    const innerValue = computed(() => {
+      return props.dot ? "" : typeof props.value === "number" && props.value > props.max ? `${props.max}+` : props.value;
+    });
+    const badgeClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m("fixed", props.fixed || !!slots.default),
+        bem.m("zero-hide", zeroHide.value),
+        bem.m("dot", props.dot),
+        props.rootClass
+      );
+    });
+    const badgeStyle = computed(() => {
+      return stringifyStyle(
+        {
+          background: props.color,
+          color: props.textColor
+        },
+        props.rootStyle
+      );
+    });
+    const __returned__ = { props, bem, slots, zeroHide, innerValue, badgeClass, badgeStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/badge/common.d.ts

@@ -0,0 +1,33 @@
+import { type PropType, type StyleValue } from 'vue';
+export interface BadgeProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    value?: number | string;
+    max?: number;
+    showZero?: boolean;
+    color?: string;
+    textColor?: string;
+    dot?: boolean;
+    fixed?: boolean;
+}
+export declare const badgeProps: {
+    rootStyle: PropType<StyleValue>;
+    rootClass: StringConstructor;
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showZero: BooleanConstructor;
+    color: StringConstructor;
+    textColor: StringConstructor;
+    dot: BooleanConstructor;
+    fixed: BooleanConstructor;
+};
+export interface BadgeSlots {
+    default(props: Record<string, never>): any;
+    value(props: Record<string, never>): any;
+}

package/components/badge/common.js

@@ -0,0 +1,18 @@
+import { defaultConfig } from '../config';
+export const badgeProps = {
+    rootStyle: [String, Object, Array],
+    rootClass: String,
+    value: {
+        type: [Number, String],
+        default: defaultConfig.badge.value,
+    },
+    max: {
+        type: Number,
+        default: defaultConfig.badge.max,
+    },
+    showZero: Boolean,
+    color: String,
+    textColor: String,
+    dot: Boolean,
+    fixed: Boolean,
+};

package/components/badge/index.d.ts

@@ -0,0 +1 @@
+export type { BadgeProps, BadgeSlots } from './common';

package/components/badge/index.js

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

package/components/badge/index.scss

@@ -0,0 +1,47 @@
+@use '../style/base' as *;
+
+@include bem(badge) {
+  @include b() {
+    @include universal;
+    flex: none;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    min-width: var(--sar-badge-min-width);
+    height: var(--sar-badge-height);
+    padding-left: var(--sar-badge-padding-x);
+    padding-right: var(--sar-badge-padding-x);
+    font-size: var(--sar-badge-font-size);
+    line-height: var(--sar-leading-none);
+    text-align: center;
+    border: 1px solid var(--sar-badge-border-color);
+    border-radius: var(--sar-rounded-full);
+    color: var(--sar-badge-color);
+    background-color: var(--sar-badge-bg);
+
+    @include m(fixed) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+      z-index: 10;
+    }
+
+    @include m(dot) {
+      width: var(--sar-badge-dot-size);
+      height: var(--sar-badge-dot-size);
+      min-width: var(--sar-badge-dot-size);
+      padding: 0;
+      border-radius: var(--sar-rounded-full);
+    }
+
+    @include m(zero-hide) {
+      display: none;
+    }
+  }
+
+  @include e(wrapper) {
+    @include universal;
+    display: inline-flex;
+  }
+}

package/components/badge/variables.scss

@@ -0,0 +1,12 @@
+// #variables
+page {
+  --sar-badge-height: 36rpx;
+  --sar-badge-padding-x: 8rpx;
+  --sar-badge-font-size: var(--sar-text-sm);
+  --sar-badge-min-width: var(--sar-badge-height);
+  --sar-badge-bg: var(--sar-danger);
+  --sar-badge-color: var(--sar-white);
+  --sar-badge-border-color: var(--sar-white);
+  --sar-badge-dot-size: 20rpx;
+}
+// #endvariables

package/components/button/button.vue

@@ -0,0 +1,85 @@
+<template>
+  <button
+    :class="buttonClass"
+    :style="buttonStyle"
+    :disabled="isDisabled || loading"
+    :hover-class="bem.m('hover')"
+    @click="onClick"
+  >
+    <view
+      v-if="loading"
+      :class="
+        classNames(
+          bem.e('loading'),
+          bem.em('loading', 'with-slot', !!$slots.default),
+        )
+      "
+    >
+      <sar-loading size="inherit" color="inherit" :type="loadingType" />
+    </view>
+    <slot></slot>
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import SarLoading from "../loading/loading.vue";
+import { useFormContext } from "../form/common";
+import { buttonProps } from "./common";
+const __default__ = {
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared"
+  }
+};
+export default /* @__PURE__ */ _defineComponent({
+  ...__default__,
+  __name: "button",
+  props: buttonProps,
+  emits: ["click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("button");
+    const formContext = useFormContext();
+    const isDisabled = computed(() => {
+      return formContext?.disabled ?? props.disabled;
+    });
+    const onClick = (event) => {
+      emit("click", event);
+    };
+    const buttonClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m(props.size),
+        bem.m(props.type),
+        bem.m(`${props.type}-${props.theme}`),
+        bem.m("round", props.round),
+        bem.m("disabled", isDisabled.value),
+        bem.m("loading", props.loading),
+        props.rootClass
+      );
+    });
+    const buttonStyle = computed(() => {
+      return stringifyStyle(
+        {
+          color: props.color,
+          background: props.background
+        },
+        props.rootStyle
+      );
+    });
+    const __returned__ = { props, emit, bem, formContext, isDisabled, onClick, buttonClass, buttonStyle, get classNames() {
+      return classNames;
+    }, SarLoading };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/button/common.d.ts

@@ -0,0 +1,42 @@
+import { type PropType, type StyleValue } from 'vue';
+export interface ButtonProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    type?: 'default' | 'pale' | 'mild' | 'outline' | 'text' | 'pale-text';
+    theme?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'neutral';
+    size?: 'mini' | 'small' | 'medium' | 'large';
+    round?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    loadingType?: 'clock' | 'circular';
+    color?: string;
+    background?: string;
+}
+export declare const buttonProps: {
+    rootStyle: PropType<StyleValue>;
+    rootClass: StringConstructor;
+    type: {
+        type: PropType<"text" | "default" | "pale" | "mild" | "outline" | "pale-text" | undefined>;
+        default: string;
+    };
+    theme: {
+        type: PropType<"success" | "primary" | "info" | "secondary" | "warning" | "danger" | "neutral" | undefined>;
+        default: string;
+    };
+    size: {
+        type: PropType<"medium" | "mini" | "small" | "large" | undefined>;
+        default: string;
+    };
+    round: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingType: PropType<"circular" | "clock" | undefined>;
+    color: StringConstructor;
+    background: StringConstructor;
+};
+export interface ButtonSlots {
+    default(props: Record<string, never>): any;
+}
+export interface ButtonEmits {
+    (e: 'click', event: any): void;
+}

package/components/button/common.js

@@ -0,0 +1,23 @@
+import { defaultConfig } from '../config';
+export const buttonProps = {
+    rootStyle: [String, Object, Array],
+    rootClass: String,
+    type: {
+        type: String,
+        default: defaultConfig.button.type,
+    },
+    theme: {
+        type: String,
+        default: defaultConfig.button.theme,
+    },
+    size: {
+        type: String,
+        default: defaultConfig.button.size,
+    },
+    round: Boolean,
+    disabled: Boolean,
+    loading: Boolean,
+    loadingType: String,
+    color: String,
+    background: String,
+};

package/components/button/index.d.ts

@@ -0,0 +1 @@
+export type { ButtonProps, ButtonSlots, ButtonEmits } from './common';

package/components/button/index.js

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