{"version":3,"file":"su-radio.js","sources":["../../../../../../src/sheep/ui/su-radio/su-radio.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS1yYWRpby9zdS1yYWRpby52dWU"],"sourcesContent":["<template>\r\n  <view\r\n    class=\"ui-radio ss-flex ss-col-center\"\r\n    @tap=\"onRaido\"\r\n    :class=\"[{ disabled: disabled }, { img: src }, ui]\"\r\n    :style=\"[customStyle]\"\r\n  >\r\n    <slot name=\"leftLabel\"></slot>\r\n    <view\r\n      v-if=\"!none\"\r\n      class=\"ui-radio-input\"\r\n      :class=\"[isChecked ? 'cur ' + bg : unbg, src ? 'radius' : 'round']\"\r\n    ></view>\r\n    <image class=\"ui-radio-img radius\" v-if=\"src\" :src=\"src\" mode=\"aspectFill\"></image>\r\n    <view class=\"ui-radio-content\" v-else>\r\n      <slot>\r\n        <view class=\"ui-label-text\" :style=\"[labelStyle]\">{{ label }}</view>\r\n      </slot>\r\n    </view>\r\n    <view\r\n      v-if=\"ui.includes('card')\"\r\n      class=\"ui-radio-bg round\"\r\n      :class=\"[isChecked ? 'cur ' + bg : '']\"\r\n    ></view>\r\n  </view>\r\n</template>\r\n\r\n<script setup>\r\n/**\r\n * 单选 - radio\r\n *\r\n *\r\n * property {Object} customStyle \t\t\t\t\t\t\t\t\t\t\t\t- 自定义样式\r\n * property {String} ui \t\t\t\t\t\t\t\t\t\t\t\t\t\t- radio样式Class\r\n * property {String} modelValue\t\t\t\t\t\t\t\t\t\t\t\t\t- 绑定值\r\n * property {Boolean} disabled\t\t\t\t\t\t\t\t\t\t\t\t\t- 是否禁用\r\n * property {String} bg\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t- 选中时背景Class\r\n * property {String} unbg\t\t\t\t\t\t\t\t\t\t\t\t\t\t- 未选中时背景Class\r\n * property {String} src\t\t\t\t\t\t\t\t\t\t\t\t\t\t- 图片选中radio\r\n * property {String} label\t\t\t\t\t\t\t\t\t\t\t\t\t\t- label文本\r\n * property {Boolean} none\t\t\t\t\t\t\t\t\t\t\t\t\t\t- 是否隐藏raido按钮\r\n *\r\n * @slot default\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t- 自定义label样式\r\n * @event {Function} change\t\t\t\t\t\t\t\t\t\t\t\t\t\t- change事件\r\n *\r\n */\r\nimport { computed, reactive, watchPostEffect, getCurrentInstance } from 'vue'\r\nconst vm = getCurrentInstance()\r\n\r\n// 组件数据\r\nconst state = reactive({\r\n  currentValue: false,\r\n})\r\n\r\n// 定义事件\r\nconst emits = defineEmits(['change', 'update:modelValue'])\r\n\r\n// 接收参数\r\nconst props = defineProps({\r\n  customStyle: {\r\n    type: Object,\r\n    default: () => ({}),\r\n  },\r\n  ui: {\r\n    type: String,\r\n    default: 'check', // check line\r\n  },\r\n  modelValue: {\r\n    type: [String, Number, Boolean],\r\n    default: false,\r\n  },\r\n  disabled: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  bg: {\r\n    type: String,\r\n    default: 'ui-BG-Main',\r\n  },\r\n  unbg: {\r\n    type: String,\r\n    default: 'borderss',\r\n  },\r\n  src: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  label: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  labelStyle: {\r\n    type: Object,\r\n    default: () => ({}),\r\n  },\r\n  none: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n})\r\n\r\nwatchPostEffect(() => {\r\n  state.currentValue = props.modelValue\r\n  emits('update:modelValue', state.currentValue)\r\n})\r\n\r\n// 是否选中\r\nconst isChecked = computed(() => state.currentValue)\r\n\r\n// 点击\r\nconst onRaido = () => {\r\n  if (props.disabled) return\r\n  state.currentValue = !state.currentValue\r\n  emits('update:modelValue', state.currentValue)\r\n  emits('change', {\r\n    label: props.label,\r\n    value: state.currentValue,\r\n  })\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n.ui-radio {\r\n  display: flex;\r\n  align-items: center;\r\n  height: 18px;\r\n  margin: 0 0.5em 0 0;\r\n  .ui-radio-input {\r\n    display: inline-block;\r\n    width: 18px;\r\n    height: 18px;\r\n    margin: 0 0.5em 0 0;\r\n    line-height: 18px;\r\n    vertical-align: middle;\r\n\r\n    &::before {\r\n      position: absolute;\r\n      width: 0;\r\n      height: 0;\r\n      content: '';\r\n      background-color: currentColor;\r\n      border-radius: 18px;\r\n      @include position-center;\r\n    }\r\n  }\r\n\r\n  .ui-radio-input.cur {\r\n    position: relative;\r\n\r\n    &::before {\r\n      width: 10px;\r\n      height: 10px;\r\n      transition: $transition-base;\r\n    }\r\n  }\r\n\r\n  &:last-child {\r\n    margin: 0 0.14286em;\r\n  }\r\n\r\n  &.check {\r\n    .ui-radio-input {\r\n      &::before {\r\n        width: 18px;\r\n        height: 18px;\r\n        font-family: 'colorui';\r\n        font-size: 0;\r\n        content: '\\e69f';\r\n        background-color: transparent;\r\n      }\r\n    }\r\n\r\n    .ui-radio-input.cur {\r\n      &::before {\r\n        width: 18px;\r\n        height: 18px;\r\n        font-size: 1em;\r\n        line-height: 18px;\r\n        text-align: center;\r\n        transform: scale(0.8);\r\n      }\r\n    }\r\n  }\r\n\r\n  &.line {\r\n    .ui-radio-input.cur {\r\n      &::before {\r\n        width: calc(100% - 2px);\r\n        height: calc(100% - 2px);\r\n        background-color: var(--ui-BG);\r\n      }\r\n\r\n      &::after {\r\n        position: absolute;\r\n        width: 10px;\r\n        height: 10px;\r\n        content: '';\r\n        background-color: inherit;\r\n        border-radius: 50%;\r\n        @include position-center;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.lg {\r\n    .ui-radio-input {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  &.img {\r\n    position: relative;\r\n    margin: 0 0.28572em 0;\r\n\r\n    .ui-radio-input {\r\n      position: absolute;\r\n      top: -1px;\r\n      left: -1px;\r\n      width: 42px;\r\n      height: 42px;\r\n      margin: 0;\r\n      border-radius: 0px;\r\n\r\n      &::before {\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: $radius;\r\n      }\r\n\r\n      &.cur {\r\n        top: -2px;\r\n        left: -2px;\r\n        width: 44px;\r\n        height: 44px;\r\n        border-radius: 7px !important;\r\n        opacity: 0.8;\r\n      }\r\n    }\r\n\r\n    .ui-radio-img {\r\n      display: block;\r\n      width: 40px;\r\n      height: 40px;\r\n      overflow: hidden;\r\n      border-radius: 10px;\r\n    }\r\n  }\r\n\r\n  &.card {\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: row-reverse;\r\n    justify-content: space-between;\r\n    padding: 30rpx;\r\n    margin: 30rpx;\r\n    border-radius: $radius !important;\r\n\r\n    .ui-radio-bg {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      z-index: 0;\r\n      width: 200%;\r\n      height: 200%;\r\n      content: '';\r\n      background-color: var(--ui-BG);\r\n      border-radius: #{$radius * 2} !important;\r\n      transform: scale(0.5);\r\n      transform-origin: 0 0;\r\n    }\r\n\r\n    .ui-radio-input {\r\n      position: relative;\r\n      z-index: 1;\r\n      margin-right: 0;\r\n    }\r\n\r\n    .ui-radio-bg::after {\r\n      position: absolute;\r\n      top: 4px;\r\n      left: 4px;\r\n      z-index: 0;\r\n      width: calc(200% - 16px);\r\n      height: calc(200% - 16px);\r\n      content: '';\r\n      background-color: var(--ui-BG) !important;\r\n      border-radius: #{$radius * 2 + 8} !important;\r\n      transform: scale(0.5);\r\n      transform-origin: 0 0;\r\n    }\r\n\r\n    .ui-radio-content {\r\n      position: relative;\r\n      z-index: 1;\r\n      display: flex;\r\n      flex: 1;\r\n      align-items: center;\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/ui/su-radio/su-radio.vue'\nwx.createComponent(Component)"],"names":["reactive","watchPostEffect","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,UAAM,QAAQA,cAAAA,SAAS;AAAA,MACrB,cAAc;AAAA,IAChB,CAAC;AAGD,UAAM,QAAQ;AAGd,UAAM,QAAQ;AA2CdC,kBAAAA,gBAAgB,MAAM;AACpB,YAAM,eAAe,MAAM;AAC3B,YAAM,qBAAqB,MAAM,YAAY;AAAA,IAC/C,CAAC;AAGD,UAAM,YAAYC,cAAQ,SAAC,MAAM,MAAM,YAAY;AAGnD,UAAM,UAAU,MAAM;AACpB,UAAI,MAAM;AAAU;AACpB,YAAM,eAAe,CAAC,MAAM;AAC5B,YAAM,qBAAqB,MAAM,YAAY;AAC7C,YAAM,UAAU;AAAA,QACd,OAAO,MAAM;AAAA,QACb,OAAO,MAAM;AAAA,MACjB,CAAG;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrHA,GAAG,gBAAgB,SAAS;"}