sard-uniapp 1.2.2 → 1.4.0-alpha

package/components/radio-group/radio-group.vue

@@ -9,19 +9,32 @@
       :toggle="toggle"
       :value="innerValue"
     ></slot>
-    <slot v-else></slot>
+    <slot v-else>
+      <template v-if="options">
+        <sar-radio
+          v-for="option in options"
+          :key="isPrimitive(option) ? option : option[fieldKeys.value]"
+          :value="isPrimitive(option) ? option : option[fieldKeys.value]"
+          :validate-event="false"
+        >
+          {{ isPrimitive(option) ? option : option[fieldKeys.label] }}
+        </sar-radio>
+      </template>
+    </slot>
   </view>
 </template>
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { ref, watch, provide, toRef, reactive } from "vue";
+import { ref, watch, provide, toRef, reactive, computed } from "vue";
 import {
   radioContextSymbol,
-  radioGroupPropsDefaults
+  radioGroupPropsDefaults,
+  defaultOptionKeys
 } from "../radio/common";
-import { classNames, stringifyStyle, createBem } from "../../utils";
+import { classNames, stringifyStyle, createBem, isPrimitive } from "../../utils";
 import { useFormItemContext } from "../form/common";
+import SarRadio from "../radio/radio.vue";
 export default  _defineComponent({
   ...{
     options: {
@@ -40,7 +53,9 @@ export default  _defineComponent({
     type: { type: String, required: false },
     checkedColor: { type: String, required: false },
     direction: { type: String, required: false },
-    validateEvent: { type: Boolean, required: false }
+    validateEvent: { type: Boolean, required: false },
+    options: { type: Array, required: false },
+    optionKeys: { type: Object, required: false }
   }, radioGroupPropsDefaults),
   emits: ["click", "update:model-value"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -49,6 +64,9 @@ export default  _defineComponent({
     const emit = __emit;
     const bem = createBem("radio-group");
     const formItemContext = useFormItemContext();
+    const fieldKeys = computed(() => {
+      return Object.assign({}, defaultOptionKeys, props.optionKeys);
+    });
     const innerValue = ref(props.modelValue);
     watch(
       () => props.modelValue,
@@ -74,11 +92,13 @@ export default  _defineComponent({
         toggle
       })
     );
-    const __returned__ = { props, emit, bem, formItemContext, innerValue, toggle, get classNames() {
+    const __returned__ = { props, emit, bem, formItemContext, fieldKeys, innerValue, toggle, get classNames() {
       return classNames;
     }, get stringifyStyle() {
       return stringifyStyle;
-    } };
+    }, get isPrimitive() {
+      return isPrimitive;
+    }, SarRadio };
     return __returned__;
   }
 });

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

@@ -0,0 +1,16 @@
+import { type RadioGroupOption, type RadioGroupProps } from '../radio/common';
+import { type PopoutInputProps } from '../popout-input/common';
+export type RadioInputOption = RadioGroupOption;
+export interface RadioInputProps extends RadioGroupProps, Omit<PopoutInputProps, 'modelValue'> {
+    visible?: boolean;
+    title?: string;
+}
+export declare const radioInputPropsDefaults: {
+    options: () => never[];
+    validateEvent: boolean;
+    type: "record";
+};
+export interface RadioInputEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:model-value', value: any): void;
+}

package/components/radio-input/common.js

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

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

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

package/components/radio-input/index.js

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

package/components/radio-input/index.scss

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

package/components/radio-input/radio-input.d.ts

@@ -0,0 +1,38 @@
+import { type RadioInputProps } from './common';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<RadioInputProps>, {
+    options: () => never[];
+    validateEvent: boolean;
+    type: "record";
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:visible": (visible: boolean) => void;
+    "update:model-value": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<RadioInputProps>, {
+    options: () => never[];
+    validateEvent: boolean;
+    type: "record";
+}>>> & {
+    "onUpdate:model-value"?: ((value: any) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}, {
+    options: import("../radio/common").RadioGroupOption[];
+    type: import("../radio/common").IconType;
+    validateEvent: boolean;
+}, {}>;
+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/radio-input/radio-input.vue

@@ -0,0 +1,181 @@
+<template>
+  <sar-popout-input
+    v-model="inputValue"
+    :placeholder="placeholder"
+    :readonly="readonly"
+    :disabled="disabled"
+    :clearable="clearable"
+    @clear="onClear"
+    @click="onInputClick"
+  />
+
+  <sar-popout
+    :root-class="rootClass"
+    :root-style="rootStyle"
+    :visible="innerVisible"
+    @update:visible="onVisible"
+    :title="title ?? placeholder"
+    :show-confirm="false"
+    @confirm="onConfirm"
+  >
+    <template #visible="{ already }">
+      <scroll-view v-if="already" scroll-y :class="bem.e('scroll')">
+        <sar-radio-group
+          :size="size"
+          :type="type"
+          :checkedColor="checkedColor"
+          :direction="direction"
+          :validate-event="false"
+          :model-value="popoutValue"
+          @update:model-value="onChange"
+        >
+          <template #custom="{ toggle }">
+            <sar-list inlaid>
+              <sar-list-item
+                v-for="option in options"
+                :key="option[fieldKeys.value]"
+                :title="option[fieldKeys.label]"
+                hover
+                @click="toggle(option[fieldKeys.value])"
+              >
+                <template #value>
+                  <sar-radio readonly :value="option[fieldKeys.value]" />
+                </template>
+              </sar-list-item>
+            </sar-list>
+          </template>
+        </sar-radio-group>
+      </scroll-view>
+    </template>
+  </sar-popout>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { ref, watch, computed } from "vue";
+import SarPopoutInput from "../popout-input/popout-input.vue";
+import SarPopout from "../popout/popout.vue";
+import SarRadioGroup from "../radio-group/radio-group.vue";
+import SarRadio from "../radio/radio.vue";
+import { defaultOptionKeys } from "../radio/common";
+import {
+  radioInputPropsDefaults
+} from "./common";
+import { createBem, isNullish } from "../../utils";
+import { useFormItemContext } from "../form/common";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "radio-input",
+  props:  _mergeDefaults({
+    visible: { type: Boolean, required: false },
+    title: { type: String, required: false },
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    modelValue: { type: null, required: false },
+    disabled: { type: Boolean, required: false },
+    readonly: { type: Boolean, required: false },
+    size: { type: String, required: false },
+    type: { type: String, required: false },
+    checkedColor: { type: String, required: false },
+    direction: { type: String, required: false },
+    validateEvent: { type: Boolean, required: false },
+    options: { type: Array, required: false },
+    optionKeys: { type: Object, required: false },
+    placeholder: { type: String, required: false },
+    clearable: { type: Boolean, required: false },
+    loading: { type: Boolean, required: false },
+    multiline: { type: Boolean, required: false }
+  }, radioInputPropsDefaults),
+  emits: ["update:visible", "update:model-value"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("radio-input");
+    const formItemContext = useFormItemContext();
+    const fieldKeys = computed(() => {
+      return Object.assign({}, defaultOptionKeys, props.optionKeys);
+    });
+    const innerValue = ref(props.modelValue);
+    watch(
+      () => props.modelValue,
+      () => {
+        innerValue.value = props.modelValue;
+        if (props.validateEvent) {
+          formItemContext?.onChange();
+        }
+      }
+    );
+    const popoutValue = ref(props.modelValue);
+    watch(innerValue, () => {
+      popoutValue.value = innerValue.value;
+    });
+    const onChange = (value) => {
+      popoutValue.value = value;
+      onConfirm();
+      innerVisible.value = false;
+    };
+    const onConfirm = () => {
+      innerValue.value = popoutValue.value;
+      emit("update:model-value", popoutValue.value);
+      inputValue.value = getInputValue();
+    };
+    const inputValue = ref("");
+    function getOutletText(options, optionKeys, value) {
+      return options.find((option) => option[optionKeys.value] === value)?.[optionKeys.label] || "";
+    }
+    function getInputValue() {
+      if (isNullish(innerValue.value) || innerValue.value.length === 0) {
+        return "";
+      }
+      return getOutletText(props.options, fieldKeys.value, innerValue.value);
+    }
+    watch(
+      innerValue,
+      () => {
+        inputValue.value = getInputValue();
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.options,
+      () => {
+        inputValue.value = getInputValue();
+      }
+    );
+    const onClear = () => {
+      inputValue.value = "";
+      innerValue.value = void 0;
+      emit("update:model-value", void 0);
+    };
+    const innerVisible = ref(props.visible);
+    watch(
+      () => props.visible,
+      () => {
+        innerVisible.value = props.visible;
+      }
+    );
+    const onVisible = (visible) => {
+      innerVisible.value = visible;
+      emit("update:visible", visible);
+    };
+    const onInputClick = () => {
+      innerVisible.value = true;
+      emit("update:visible", true);
+    };
+    const __returned__ = { props, emit, bem, formItemContext, fieldKeys, innerValue, popoutValue, onChange, onConfirm, inputValue, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarRadioGroup, SarRadio };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/radio-input/variables.scss

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

package/components/result/result.d.ts

@@ -4,7 +4,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ResultProps>, {
     status: "info";
 }>>>, {
-    status: "success" | "info" | "error" | "warning" | "question";
+    status: "success" | "info" | "warning" | "error" | "question";
 }, {}>, Readonly<ResultSlots> & ResultSlots>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/components/result/result.vue

@@ -3,7 +3,7 @@
     <slot name="icon">
       <view :class="iconClass">
         <sar-icon
-          :name="mapStatusIcon[status]"
+          :name="icon || mapStatusIcon[status]"
           :family="iconFamily"
           :color="iconColor"
         />

package/components/tag/tag.d.ts

@@ -13,7 +13,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     size: "small" | "medium" | "large";
-    theme: "success" | "default" | "primary" | "info" | "secondary" | "warning" | "danger";
+    theme: "success" | "default" | "primary" | "info" | "warning" | "danger" | "secondary";
 }, {}>, Readonly<TagSlots> & TagSlots>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/global.d.ts

@@ -3,6 +3,7 @@ import '@vue/runtime-core'
 import SarAccordion from './components/accordion/accordion'
 import SarAccordionItem from './components/accordion-item/accordion-item'
 import SarActionSheet from './components/action-sheet/action-sheet'
+import SarAlert from './components/alert/alert'
 import SarAvatar from './components/avatar/avatar'
 import SarBadge from './components/badge/badge'
 import SarButton from './components/button/button'
@@ -13,6 +14,7 @@ import SarCascader from './components/cascader/cascader'
 import SarCascaderInput from './components/cascader-input/cascader-input'
 import SarCheckbox from './components/checkbox/checkbox'
 import SarCheckboxGroup from './components/checkbox-group/checkbox-group'
+import SarCheckboxInput from './components/checkbox-input/checkbox-input'
 import SarCol from './components/col/col'
 import SarCollapse from './components/collapse/collapse'
 import SarCountDown from './components/count-down/count-down'
@@ -57,8 +59,10 @@ import SarPopup from './components/popup/popup'
 import SarProgressBar from './components/progress-bar/progress-bar'
 import SarProgressCircle from './components/progress-circle/progress-circle'
 import SarPullDownRefresh from './components/pull-down-refresh/pull-down-refresh'
+import SarQrcode from './components/qrcode/qrcode'
 import SarRadio from './components/radio/radio'
 import SarRadioGroup from './components/radio-group/radio-group'
+import SarRadioInput from './components/radio-input/radio-input'
 import SarRate from './components/rate/rate'
 import SarResult from './components/result/result'
 import SarRow from './components/row/row'
@@ -87,8 +91,9 @@ declare module '@vue/runtime-core' {
   // GlobalComponents for Volar
   export interface GlobalComponents {
     SarAccordion: typeof SarAccordion
-    SarActionSheet: typeof SarActionSheet
     SarAccordionItem: typeof SarAccordionItem
+    SarActionSheet: typeof SarActionSheet
+    SarAlert: typeof SarAlert
     SarAvatar: typeof SarAvatar
     SarBadge: typeof SarBadge
     SarButton: typeof SarButton
@@ -99,6 +104,7 @@ declare module '@vue/runtime-core' {
     SarCascaderInput: typeof SarCascaderInput
     SarCheckbox: typeof SarCheckbox
     SarCheckboxGroup: typeof SarCheckboxGroup
+    SarCheckboxInput: typeof SarCheckboxInput
     SarCol: typeof SarCol
     SarCollapse: typeof SarCollapse
     SarCountDown: typeof SarCountDown
@@ -143,8 +149,10 @@ declare module '@vue/runtime-core' {
     SarProgressBar: typeof SarProgressBar
     SarProgressCircle: typeof SarProgressCircle
     SarPullDownRefresh: typeof SarPullDownRefresh
+    SarQrcode: typeof SarQrcode
     SarRadio: typeof SarRadio
     SarRadioGroup: typeof SarRadioGroup
+    SarRadioInput: typeof SarRadioInput
     SarRate: typeof SarRate
     SarResult: typeof SarResult
     SarRow: typeof SarRow

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/accordion';
 export * from './components/action-sheet';
+export * from './components/alert';
 export * from './components/avatar';
 export * from './components/badge';
 export * from './components/button';
@@ -9,6 +10,7 @@ export * from './components/card';
 export * from './components/cascader';
 export * from './components/cascader-input';
 export * from './components/checkbox';
+export * from './components/checkbox-input';
 export * from './components/collapse';
 export * from './components/config';
 export * from './components/count-down';
@@ -49,7 +51,9 @@ export * from './components/popup';
 export * from './components/progress-bar';
 export * from './components/progress-circle';
 export * from './components/pull-down-refresh';
+export * from './components/qrcode';
 export * from './components/radio';
+export * from './components/radio-input';
 export * from './components/rate';
 export * from './components/result';
 export * from './components/search';

package/index.js

@@ -1,5 +1,6 @@
 export * from './components/accordion';
 export * from './components/action-sheet';
+export * from './components/alert';
 export * from './components/avatar';
 export * from './components/badge';
 export * from './components/button';
@@ -9,6 +10,7 @@ export * from './components/card';
 export * from './components/cascader';
 export * from './components/cascader-input';
 export * from './components/checkbox';
+export * from './components/checkbox-input';
 export * from './components/collapse';
 export * from './components/config';
 export * from './components/count-down';
@@ -49,7 +51,9 @@ export * from './components/popup';
 export * from './components/progress-bar';
 export * from './components/progress-circle';
 export * from './components/pull-down-refresh';
+export * from './components/qrcode';
 export * from './components/radio';
+export * from './components/radio-input';
 export * from './components/rate';
 export * from './components/result';
 export * from './components/search';

package/index.scss

@@ -1,5 +1,6 @@
 @use './components/accordion/variables.scss' as *;
 @use './components/action-sheet/variables.scss' as *;
+@use './components/alert/variables.scss' as *;
 @use './components/avatar/variables.scss' as *;
 @use './components/badge/variables.scss' as *;
 @use './components/button/variables.scss' as *;
@@ -7,6 +8,7 @@
 @use './components/card/variables.scss' as *;
 @use './components/cascader/variables.scss' as *;
 @use './components/checkbox/variables.scss' as *;
+@use './components/checkbox-input/variables.scss' as *;
 @use './components/col/variables.scss' as *;
 @use './components/collapse/variables.scss' as *;
 @use './components/dialog/variables.scss' as *;
@@ -37,8 +39,10 @@
 @use './components/progress-bar/variables.scss' as *;
 @use './components/progress-circle/variables.scss' as *;
 @use './components/pull-down-refresh/variables.scss' as *;
+@use './components/qrcode/variables.scss' as *;
 @use './components/rate/variables.scss' as *;
 @use './components/radio/variables.scss' as *;
+@use './components/radio-input/variables.scss' as *;
 @use './components/result/variables.scss' as *;
 @use './components/row/variables.scss' as *;
 @use './components/search/variables.scss' as *;

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.2.2",
+  "version": "1.4.0-alpha",
   "type": "module",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "keywords": [
@@ -33,6 +33,7 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/test-utils": "^2.4.6",
+    "canvas": "^2.11.2",
     "region-data": "^1.2.1",
     "vitest": "^1.0.4"
   },

package/utils/index.d.ts

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

package/utils/index.js

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

package/utils/is.d.ts

@@ -40,3 +40,9 @@ export declare function isUndefined(target: any): target is undefined;
  * @return {boolean}
  */
 export declare function isNullish(target: any): target is null | undefined;
+/**
+ * @description: 判断是否为原始类型
+ * @param {any} target
+ * @return {boolean}
+ */
+export declare function isPrimitive(target: any): target is string | number | boolean;

package/utils/is.js

@@ -54,3 +54,11 @@ export function isUndefined(target) {
 export function isNullish(target) {
     return target === null || target === undefined;
 }
+/**
+ * @description: 判断是否为原始类型
+ * @param {any} target
+ * @return {boolean}
+ */
+export function isPrimitive(target) {
+    return isString(target) || isNumber(target) || isBoolean(target);
+}

package/utils/qrcode.d.ts

@@ -0,0 +1,8 @@
+export declare const ALPHANUMERIC_CHARS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:";
+interface QrcodeOptions {
+    ecl?: ECL;
+}
+export type ECL = 'L' | 'M' | 'Q' | 'H';
+export declare const ECLList: ECL[];
+export declare function qrcode(text: string, options?: QrcodeOptions): number[][];
+export {};