sard-uniapp 1.2.2 → 1.4.0-alpha

package/components/checkbox-input/common.d.ts

@@ -0,0 +1,15 @@
+import { type CheckboxGroupOption, type CheckboxGroupProps } from '../checkbox/common';
+import { type PopoutInputProps } from '../popout-input/common';
+export type CheckboxInputOption = CheckboxGroupOption;
+export interface CheckboxInputProps extends CheckboxGroupProps, Omit<PopoutInputProps, 'modelValue'> {
+    visible?: boolean;
+    title?: string;
+}
+export declare const checkboxInputPropsDefaults: {
+    options: () => never[];
+    validateEvent: boolean;
+};
+export interface CheckboxInputEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:model-value', value: any): void;
+}

package/components/checkbox-input/common.js

@@ -0,0 +1,5 @@
+import { defaultConfig } from '../config';
+export const checkboxInputPropsDefaults = {
+    ...defaultConfig.checkboxInput,
+    options: () => [],
+};

package/components/checkbox-input/index.d.ts

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

package/components/checkbox-input/index.js

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

package/components/checkbox-input/index.scss

@@ -0,0 +1,7 @@
+@use '../style/base' as *;
+
+@include bem(checkbox-input) {
+  @include e(scroll) {
+    max-height: var(--sar-checkbox-input-max-height);
+  }
+}

package/components/checkbox-input/variables.scss

@@ -0,0 +1,5 @@
+// #variables
+page {
+  --sar-checkbox-input-max-height: 640rpx;
+}
+// #endvariables

package/components/config/index.d.ts

@@ -4,6 +4,9 @@ export declare const defaultConfig: {
         overlayClosable: boolean;
         duration: number;
     };
+    alert: {
+        type: "primary";
+    };
     avatar: {
         shape: "circle";
     };
@@ -36,6 +39,9 @@ export declare const defaultConfig: {
         direction: "vertical";
         validateEvent: boolean;
     };
+    checkboxInput: {
+        validateEvent: boolean;
+    };
     countDown: {
         time: number;
         autoStart: boolean;
@@ -194,10 +200,24 @@ export declare const defaultConfig: {
         transitionDuration: number;
         doneDuration: number;
     };
+    qrcode: {
+        ecl: "M";
+        size: string;
+        canvasSize: number;
+        type: "canvas";
+        text: string;
+        color: string;
+        bgColor: string;
+        quietZoneModules: number;
+    };
     radioGroup: {
         direction: "vertical";
         validateEvent: boolean;
     };
+    radioInput: {
+        validateEvent: boolean;
+        type: "record";
+    };
     rate: {
         count: number;
         icon: string;
@@ -332,6 +352,9 @@ export declare function useConfigContext(): DeepPartial<{
         overlayClosable: boolean;
         duration: number;
     };
+    alert: {
+        type: "primary";
+    };
     avatar: {
         shape: "circle";
     };
@@ -364,6 +387,9 @@ export declare function useConfigContext(): DeepPartial<{
         direction: "vertical";
         validateEvent: boolean;
     };
+    checkboxInput: {
+        validateEvent: boolean;
+    };
     countDown: {
         time: number;
         autoStart: boolean;
@@ -522,10 +548,24 @@ export declare function useConfigContext(): DeepPartial<{
         transitionDuration: number;
         doneDuration: number;
     };
+    qrcode: {
+        ecl: "M";
+        size: string;
+        canvasSize: number;
+        type: "canvas";
+        text: string;
+        color: string;
+        bgColor: string;
+        quietZoneModules: number;
+    };
     radioGroup: {
         direction: "vertical";
         validateEvent: boolean;
     };
+    radioInput: {
+        validateEvent: boolean;
+        type: "record";
+    };
     rate: {
         count: number;
         icon: string;

package/components/config/index.js

@@ -5,6 +5,9 @@ export const defaultConfig = {
         overlayClosable: true,
         duration: 300,
     },
+    alert: {
+        type: 'primary',
+    },
     avatar: {
         shape: 'circle',
     },
@@ -37,6 +40,9 @@ export const defaultConfig = {
         direction: 'vertical',
         validateEvent: true,
     },
+    checkboxInput: {
+        validateEvent: true,
+    },
     countDown: {
         time: 0,
         autoStart: true,
@@ -195,10 +201,24 @@ export const defaultConfig = {
         transitionDuration: 300,
         doneDuration: 0,
     },
+    qrcode: {
+        ecl: 'M',
+        size: '320rpx',
+        canvasSize: 400,
+        type: 'canvas',
+        text: '',
+        color: '#000',
+        bgColor: '#fff',
+        quietZoneModules: 2,
+    },
     radioGroup: {
         direction: 'vertical',
         validateEvent: true,
     },
+    radioInput: {
+        validateEvent: true,
+        type: 'record',
+    },
     rate: {
         count: 5,
         icon: 'star-fill',

package/components/datetime-picker-input/datetime-picker-input.vue

@@ -74,7 +74,8 @@ export default  _defineComponent({
     placeholder: { type: String, required: false },
     readonly: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
-    clearable: { type: Boolean, required: false }
+    clearable: { type: Boolean, required: false },
+    multiline: { type: Boolean, required: false }
   }, datetimePickerInputPropsDefaults),
   emits: ["update:visible", "update:model-value"],
   setup(__props, { expose: __expose, emit: __emit }) {

package/components/form/variables.scss

@@ -11,10 +11,10 @@ page {
   --sar-form-item-label-margin-right: 24rpx;
   --sar-form-item-label-margin-bottom: 8rpx;
   --sar-form-item-label-font-size: var(--sar-text-base);
-  --sar-form-item-label-line-height: var(--sar-leading-snug);
+  --sar-form-item-label-line-height: var(--sar-leading-normal);
 
   --sar-form-item-star-font-size: var(--sar-text-base);
-  --sar-form-item-star-line-height: var(--sar-leading-snug);
+  --sar-form-item-star-line-height: var(--sar-leading-normal);
   --sar-form-item-star-color: var(--sar-danger);
   --sar-form-item-star-gap: 8rpx;
 

package/components/input/common.d.ts

@@ -21,6 +21,7 @@ export interface InputProps {
     fixed?: boolean;
     showConfirmBar?: boolean;
     disableDefaultPadding?: boolean;
+    inputMinHeight?: boolean;
     type?: 'text' | 'number' | 'idcard' | 'digit' | 'tel' | 'safe-password' | 'nickname' | 'password' | 'textarea';
     alwaysEmbed?: boolean;
     safePasswordCertPath?: string;

package/components/input/index.scss

@@ -49,6 +49,7 @@
     padding: 0;
     border-width: 0;
     font-size: var(--sar-input-control-font-size);
+    line-height: var(--sar-input-control-line-height);
 
     @include m(input) {
       height: var(--sar-input-control-input-height);
@@ -58,10 +59,30 @@
       height: var(--sar-input-control-textarea-height);
       min-height: var(--sar-input-control-textarea-height);
     }
+
+    @include m(input-min-height) {
+      min-height: var(--sar-input-control-input-height);
+      line-height: var(--sar-input-control-input-height);
+    }
   }
 
   @include e(placeholder) {
     color: var(--sar-input-placeholder-color);
+    line-height: var(--sar-input-control-line-height);
+
+    @include m(textarea) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow: hidden;
+      pointer-events: none;
+    }
+
+    @include m(input-min-height) {
+      line-height: var(--sar-input-control-input-height);
+    }
   }
 
   @include e(prepend, append) {

package/components/input/input.vue

@@ -4,13 +4,30 @@
       <view v-if="$slots.prepend" :class="bem.e('prepend')">
         <slot name="prepend"></slot>
       </view>
+      <view
+        v-if="type === 'textarea' && innerValue === '' && placeholder"
+        :class="
+          classNames(
+            bem.e('placeholder'),
+            bem.em('placeholder', 'textarea'),
+            bem.em('placeholder', 'input-min-height', inputMinHeight),
+            placeholderClass,
+          )
+        "
+        :style="placeholderStyle"
+      >
+        {{ placeholder }}
+      </view>
       <textarea
         v-if="type === 'textarea'"
-        :class="classNames(bem.e('control'), bem.em('control', 'textarea'))"
+        :class="
+          classNames(
+            bem.e('control'),
+            bem.em('control', 'textarea'),
+            bem.em('control', 'input-min-height', inputMinHeight),
+          )
+        "
         :value="innerValue"
-        :placeholder="placeholder"
-        :placeholder-style="placeholderStyle"
-        :placeholder-class="classNames(bem.e('placeholder'), placeholderClass)"
         :disabled="isDisabled || isReadonly"
         :maxlength="maxlength"
         :focus="focus"
@@ -139,6 +156,7 @@ export default  _defineComponent({
     fixed: { type: Boolean, required: false },
     showConfirmBar: { type: Boolean, required: false },
     disableDefaultPadding: { type: Boolean, required: false },
+    inputMinHeight: { type: Boolean, required: false },
     type: { type: String, required: false },
     alwaysEmbed: { type: Boolean, required: false },
     safePasswordCertPath: { type: String, required: false },

package/components/input/variables.scss

@@ -11,6 +11,7 @@ page {
 
   --sar-input-control-font-size: var(--sar-text-base);
   --sar-input-control-input-height: 48rpx;
+  --sar-input-control-line-height: var(--sar-leading-normal);
   --sar-input-control-textarea-height: 168rpx;
 
   --sar-input-placeholder-color: var(--sar-quaternary-color);

package/components/list/index.scss

@@ -40,6 +40,12 @@
     }
   }
 
+  @include m(not-card) {
+    @include e(content) {
+      border-radius: 0;
+    }
+  }
+
   @include m(card, inlaid) {
     @include e(content) {
       &::before {

package/components/list/list.vue

@@ -48,6 +48,7 @@ export default  _defineComponent({
       return classNames(
         bem.b(),
         bem.m("card", props.card),
+        bem.m("not-card", !props.card),
         bem.m("inlaid", props.inlaid),
         props.rootClass
       );

package/components/list-item/index.scss

@@ -78,6 +78,7 @@
     color: var(--sar-list-item-value-color);
     text-align: right;
     word-wrap: break-word;
+    word-break: break-word;
   }
 
   @include e(arrow) {

package/components/notify/notify.d.ts

@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onClick?: ((event: any) => any) | undefined;
     "onUpdate:visible"?: ((event: any) => any) | undefined;
 }, {
-    type: "success" | "primary" | "error" | "warning";
+    type: "success" | "primary" | "warning" | "error";
     duration: number;
     position: "top" | "bottom";
     timeout: number;

package/components/notify-agent/notify-agent.d.ts

@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     duration: number;
     timeout: number;
 }>>>, {
-    type: "success" | "primary" | "error" | "warning";
+    type: "success" | "primary" | "warning" | "error";
     id: string;
     duration: number;
     position: "top" | "bottom";

package/components/picker-input/picker-input.vue

@@ -71,7 +71,8 @@ export default  _defineComponent({
     readonly: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
     clearable: { type: Boolean, required: false },
-    loading: { type: Boolean, required: false }
+    loading: { type: Boolean, required: false },
+    multiline: { type: Boolean, required: false }
   }, pickerInputPropsDefaults),
   emits: ["update:visible", "update:model-value"],
   setup(__props, { expose: __expose, emit: __emit }) {

package/components/popout-input/common.d.ts

@@ -8,6 +8,7 @@ export interface PopoutInputProps {
     disabled?: boolean;
     clearable?: boolean;
     loading?: boolean;
+    multiline?: boolean;
 }
 export interface PopoutInputEmits {
     (e: 'click', event: any): void;

package/components/popout-input/popout-input.vue

@@ -8,8 +8,11 @@
       :readonly="isReadonly"
       :disabled="isDisabled"
       :clearable="clearable"
-      @clear="onClear"
       :validate-event="false"
+      :type="multiline ? 'textarea' : undefined"
+      :auto-height="multiline"
+      :input-min-height="multiline"
+      @clear="onClear"
     >
       <template #append>
         <view :class="bem.e('append')">
@@ -59,7 +62,8 @@ export default  _defineComponent({
     readonly: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
     clearable: { type: Boolean, required: false },
-    loading: { type: Boolean, required: false }
+    loading: { type: Boolean, required: false },
+    multiline: { type: Boolean, required: false }
   },
   emits: ["click", "update:model-value", "clear"],
   setup(__props, { expose: __expose, emit: __emit }) {

package/components/qrcode/common.d.ts

@@ -0,0 +1,23 @@
+import { type StyleValue } from 'vue';
+export interface QrcodeProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    text?: string;
+    ecl?: 'L' | 'M' | 'Q' | 'H';
+    type?: 'canvas' | 'image';
+    size?: string;
+    canvasSize?: number;
+    color?: string;
+    bgColor?: string;
+    quietZoneModules?: number;
+}
+export declare const qrcodePropsDefaults: {
+    ecl: "M";
+    size: string;
+    canvasSize: number;
+    type: "canvas";
+    text: string;
+    color: string;
+    bgColor: string;
+    quietZoneModules: number;
+};

package/components/qrcode/common.js

@@ -0,0 +1,2 @@
+import { defaultConfig } from '../config';
+export const qrcodePropsDefaults = defaultConfig.qrcode;

package/components/qrcode/index.d.ts

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

package/components/qrcode/index.js

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

package/components/qrcode/index.scss

@@ -0,0 +1,17 @@
+@use '../style/base' as *;
+
+@include bem(qrcode) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(canvas) {
+    display: none;
+  }
+
+  @include e(image) {
+    @include universal;
+    width: 100%;
+    height: 100%;
+  }
+}

package/components/qrcode/qrcode.d.ts

@@ -0,0 +1,47 @@
+import { type QrcodeProps } from './common';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<QrcodeProps>, {
+    ecl: "M";
+    size: string;
+    canvasSize: number;
+    type: "canvas";
+    text: string;
+    color: string;
+    bgColor: string;
+    quietZoneModules: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<QrcodeProps>, {
+    ecl: "M";
+    size: string;
+    canvasSize: number;
+    type: "canvas";
+    text: string;
+    color: string;
+    bgColor: string;
+    quietZoneModules: number;
+}>>>, {
+    text: string;
+    ecl: "M" | "H" | "L" | "Q";
+    size: string;
+    type: "canvas" | "image";
+    canvasSize: number;
+    color: string;
+    bgColor: string;
+    quietZoneModules: number;
+}, {}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/components/qrcode/qrcode.vue

@@ -0,0 +1,107 @@
+<template>
+  <view :class="qrcodeClass" :style="qrcodeStyle">
+    <canvas type="2d" :class="bem.e('canvas')" :id="canvasId"></canvas>
+    <image :src="dataURL" mode="aspectFit" :class="bem.e('image')" />
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, getCurrentInstance, onMounted, shallowRef } from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  uniqid,
+  qrcode
+} from "../../utils";
+import { qrcodePropsDefaults } from "./common";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "qrcode",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    text: { type: String, required: false },
+    ecl: { type: String, required: false },
+    type: { type: String, required: false },
+    size: { type: String, required: false },
+    canvasSize: { type: Number, required: false },
+    color: { type: String, required: false },
+    bgColor: { type: String, required: false },
+    quietZoneModules: { type: Number, required: false }
+  }, qrcodePropsDefaults),
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const bem = createBem("qrcode");
+    const canvasId = uniqid();
+    const canvasRef = shallowRef();
+    const qrcodeMap = computed(() => {
+      return qrcode(props.text, {
+        ecl: props.ecl
+      });
+    });
+    const dataURL = computed(() => {
+      const canvas = canvasRef.value;
+      if (!canvas) {
+        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();
+      map.forEach((row, rowIndex) => {
+        row.forEach((col, colIndex) => {
+          if (col === 1) {
+            path.rect(
+              colIndex * moduleSize + margin,
+              rowIndex * moduleSize + margin,
+              moduleSize,
+              moduleSize
+            );
+          }
+        });
+      });
+      context.clearRect(0, 0, size, size);
+      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;
+        }
+      }).exec();
+    });
+    const qrcodeClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const qrcodeStyle = computed(() => {
+      return stringifyStyle(props.rootStyle, {
+        width: props.size,
+        height: props.size
+      });
+    });
+    const __returned__ = { props, bem, canvasId, canvasRef, qrcodeMap, dataURL, instance, qrcodeClass, qrcodeStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/qrcode/variables.scss

@@ -0,0 +1,4 @@
+// #variables
+// page {
+// }
+// #endvariables

package/components/radio/common.d.ts

@@ -20,6 +20,17 @@ export interface RadioSlots {
 export interface RadioEmits {
     (e: 'click', event: any): void;
 }
+export declare const defaultOptionKeys: {
+    label: string;
+    value: string;
+};
+export type RadioGroupOption = {
+    [key: PropertyKey]: any;
+} | string | number | boolean;
+export interface RadioGroupOptionKeys {
+    label?: string;
+    value?: string;
+}
 export interface RadioGroupProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -31,6 +42,8 @@ export interface RadioGroupProps {
     checkedColor?: string;
     direction?: 'horizontal' | 'vertical';
     validateEvent?: boolean;
+    options?: RadioGroupOption[];
+    optionKeys?: RadioGroupOptionKeys;
 }
 export declare const radioGroupPropsDefaults: {
     direction: "vertical";

package/components/radio/common.js

@@ -1,4 +1,8 @@
 import { defaultConfig } from '../config';
+export const defaultOptionKeys = {
+    label: 'label',
+    value: 'value',
+};
 export const radioGroupPropsDefaults = defaultConfig.radioGroup;
 export const radioContextSymbol = Symbol('radio-context');
 export const mapTypeIcon = {