feature: commit radio-group component

.vscode/settings.json

@@ -1,3 +1,12 @@
 {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "[typescript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[vue]": {
+        "editor.defaultFormatter": "Wscats.vue"
+    }
 }

packages/ui-vue/components/radio-group/index.ts

@@ -0,0 +1,12 @@
+import type { App } from 'vue';
+import RadioGroup from './src/radio-group.component';
+
+export * from './src/radio-group.props';
+
+export { RadioGroup };
+
+export default {
+    install(app: App): void {
+        app.component(RadioGroup.name, RadioGroup);
+    }
+};

packages/ui-vue/components/radio-group/src/composition/change-radio.ts

@@ -0,0 +1,38 @@
+import { ChangeRadio, Radio } from './types';
+import { computed, Ref, SetupContext } from 'vue';
+import { RadioGroupProps } from '../radio-group.props';
+
+export function changeRadio(props: RadioGroupProps, context: SetupContext, modelValue: Ref<string>): ChangeRadio {
+
+    const canChangeRadioButton = computed(() => !props.disabled);
+    const enumData = computed(() => props.enumData || []);
+
+    function getValue(item: Radio): any {
+        return item[props.valueField];
+    };
+
+    function getText(item: Radio): any {
+        return item[props.textField];
+    };
+
+    function onClickRadio(item, $event: Event) {
+        if (canChangeRadioButton.value) {
+            const newValue = getValue(item);
+            if (modelValue.value !== item) {
+                modelValue.value = newValue;
+
+                context.emit('changeValue', newValue);
+
+                context.emit('update:modelValue', newValue);
+            }
+        }
+        $event.stopPropagation();
+    }
+
+    return {
+        enumData,
+        getValue,
+        getText,
+        onClickRadio
+    };
+}

packages/ui-vue/components/radio-group/src/composition/types.ts

@@ -0,0 +1,32 @@
+import { ComputedRef, Ref } from 'vue';
+
+export interface Radio {
+    /**
+     * 枚举值
+     */
+    value: ComputedRef<any>;
+    /**
+     * 枚举展示文本
+     */
+    name: ComputedRef<any>;
+}
+
+export interface ChangeRadio {
+
+    enumData: ComputedRef<Array<Radio>>;
+
+    /**
+     * 获取枚举值
+     */
+    getValue(item: Radio): any;
+    /**
+     * 获取枚举文本
+     */
+    getText(item: Radio): any;
+
+    /**
+     * 切换单选按钮事件
+     */
+    onClickRadio: (item: Radio, $event: Event) => void;
+
+}

packages/ui-vue/components/radio-group/src/radio-group.component.tsx

@@ -0,0 +1,56 @@
+import { defineComponent, computed, ref } from 'vue';
+import type { SetupContext } from 'vue';
+import { radioGroupProps, RadioGroupProps } from './radio-group.props';
+import { changeRadio } from './composition/change-radio';
+
+export default defineComponent({
+    name: 'FRadioGroup',
+    props: radioGroupProps,
+    emits: [
+        'changeValue',
+        'update:modelValue',
+    ],
+    setup(props: RadioGroupProps, context: SetupContext) {
+        const modelValue = ref(props.modelValue);
+        const { enumData, onClickRadio, getValue, getText } = changeRadio(props, context, modelValue);
+
+
+        const horizontalClass = computed(() => ({
+            'farris-checkradio-hor': props.horizontal
+        }));
+
+
+
+        return () => {
+            return (
+                <div class={['farris-input-wrap', horizontalClass.value]}>
+                    {
+                        enumData.value.map((item, index) => {
+                            const id = 'radio_' + props.name + index;
+
+                            return (
+                                <div class="custom-control custom-radio" >
+                                    <input
+                                        type="radio"
+                                        class="custom-control-input"
+                                        name={props.name}
+                                        id={id}
+                                        value={getValue(item)}
+                                        checked={getValue(item) === modelValue.value}
+                                        disabled={props.disabled}
+                                        tabindex={props.tabIndex}
+                                        onClick={(event: MouseEvent) => onClickRadio(item, event)}
+                                    />
+                                    <label class="custom-control-label" for={id}>
+                                        { getText(item) }
+                                    </label>
+                                </div>
+                            );
+                        })
+                    }
+
+                </div>
+            );
+        };
+    },
+});

packages/ui-vue/components/radio-group/src/radio-group.props.ts

@@ -0,0 +1,45 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { Radio } from './composition/types';
+
+export const radioGroupProps = {
+    /**
+     * 组件标识
+     */
+    id: String,
+    /**
+     * 组件名称
+     */
+    name: { type: String, default: '' },
+    /**
+     * 单选组枚举数组
+     */
+    enumData: Array<Radio>,
+    /**
+     * 枚举数组中展示文本的key值。
+     */
+    textField: { type: String, default: 'name' },
+    /**
+     * 枚举数组中枚举值的key值。
+     */
+    valueField: { type: String, default: 'value' },
+    /**
+     * 组件是否水平排列
+     */
+    horizontal: { type: Boolean, default: false },
+    /**
+     * 禁用组件，不允许切换单选值
+     */
+    disabled: { type: Boolean, default: false },
+
+    /**
+     * 组件值
+     */
+    modelValue: { type: String, default: '' },
+
+    /**
+     * 输入框Tab键索引
+     */
+    tabIndex: Number,
+};
+
+export type RadioGroupProps = ExtractPropTypes<typeof radioGroupProps>;

packages/ui-vue/src/App.vue

@@ -7,6 +7,7 @@ import Avatar from './components/avatar.vue';
 import ButtonEdit from './components/button-edit.vue';
 import FButton from '../components/button/src/button.component';
 import Switch from './components/switch.vue';
+import RadioGroup from './components/radio-group.vue';
 
 const canEdit = ref(true);
 const disable = ref(false);
@@ -34,6 +35,7 @@ const canAutoComplete = ref(false);
     <label for="checkbox">disable:{{ disable }}</label>
     <FButton :disable="disable"></FButton>
     <Switch></Switch>
+    <RadioGroup></RadioGroup>
 </template>
 
 <style scoped>

packages/ui-vue/src/components/radio-group.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import RadioGroup from "../../components/radio-group/src/radio-group.component";
+
+const radioDisabled = ref(false);
+const radioEnumData = ref([
+  { value: "aa", name: "标签一" },
+  { value: "bb", name: "标签二" },
+  { value: "cc", name: "标签三" },
+]);
+const radioHorizontal = ref(false);
+
+const value = ref("aa");
+
+function testConsole(value) {
+  // console.log("change radio value to", value);
+}
+</script>
+
+<template>
+  <p></p>
+  <label for="radio_disabled" class="mr-1">是否禁用单选组</label>
+  <input type="checkbox" id="radio_disabled" v-model="radioDisabled" />
+
+  <label for="radio_horizontaol" class="mr-1 ml-3">是否水平排列</label>
+  <input type="checkbox" id="radio_horizontaol" v-model="radioHorizontal" />
+  <br />
+  <RadioGroup
+    :disabled="radioDisabled"
+    :enum-data="radioEnumData"
+    :horizontal="radioHorizontal"
+    v-model="value"
+    @change-value="testConsole"
+  >
+  </RadioGroup>
+  <br />
+  当前选中值: {{ value }}
+</template>