init

.svn/pristine/81/81a55a71339ed7acef065f7401dc4c348ec7f92d.svn-base

@@ -0,0 +1,97 @@
+<script lang="ts">
+import { computed, inject } from "vue";
+import { RadioSize } from "./interface";
+export default {
+  name: "LayRadio",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+
+export interface RadioProps {
+  name?: string;
+  size?: RadioSize;
+  disabled?: boolean;
+  modelValue?: string | boolean | number;
+  value?: string | boolean | number;
+  label?: string;
+}
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  size: "md",
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const radioGroup: any = inject("radioGroup", {});
+
+const isGroup = computed(() => {
+  return radioGroup != undefined && radioGroup?.name === "LayRadioGroup";
+});
+
+const naiveName = computed(() => {
+  if (radioGroup.naiveName) {
+    return radioGroup.naiveName;
+  } else {
+    return props.name;
+  }
+});
+
+const isChecked = computed({
+  get() {
+    if (isGroup.value) {
+      return radioGroup.modelValue.value === props.value;
+    } else {
+      return props.modelValue === props.value;
+    }
+  },
+  set(val) {
+    if (isGroup.value) {
+      radioGroup.modelValue.value = props.value;
+    } else {
+      if (val) {
+        emit("change", props.value);
+        emit("update:modelValue", props.value);
+      }
+    }
+  },
+});
+
+const handleClick = function () {
+  if (!ifDisabled.value) {
+    isChecked.value = !isChecked.value;
+  }
+};
+const ifDisabled = computed(() => {
+  if (props.disabled) {
+    return true;
+  }
+  if (radioGroup.hasOwnProperty("disabled") && radioGroup.disabled.value) {
+    return true;
+  }
+  return false;
+});
+</script>
+
+<template>
+  <span class="layui-radio" :size="size">
+    <input type="radio" :value="value" :name="naiveName" />
+    <div
+      class="layui-unselect layui-form-radio"
+      :class="{
+        'layui-form-radioed': isChecked,
+        'layui-radio-disabled layui-disabled': ifDisabled,
+      }"
+      @click.stop="handleClick"
+    >
+      <i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring"
+        >&#xe643;</i
+      >
+      <i v-else class="layui-icon layui-form-radioed">&#xe63f;</i>
+      <span>
+        <slot>{{ label }}</slot>
+      </span>
+    </div>
+  </span>
+</template>