xdesign-vue-next/es/radio/group.mjs.map

XDesign Component for vue-next

{"version":3,"file":"group.mjs","sources":["../../src/radio/group.tsx"],"sourcesContent":["import {\n  VNode,\n  defineComponent,\n  h,\n  provide,\n  reactive,\n  ref,\n  computed,\n  onMounted,\n  watch,\n  nextTick,\n  toRefs,\n  onUnmounted,\n} from 'vue';\nimport isString from 'lodash/isString';\nimport isNumber from 'lodash/isNumber';\nimport isNil from 'lodash/isNil';\nimport throttle from 'lodash/throttle';\n\nimport props from './radio-group-props';\nimport { RadioOptionObj, RadioOption } from './type';\nimport Radio from './radio';\nimport { RadioGroupInjectionKey } from './constants';\nimport { usePrefixClass, useCommonClassName } from '../hooks/useConfig';\nimport useVModel from '../hooks/useVModel';\nimport { useTNodeDefault } from '../hooks/tnode';\nimport useKeyboard from './useKeyboard';\nimport isFunction from 'lodash/isFunction';\nimport { useMutationObserver } from '../watermark/hooks';\nimport type { UseMutationObserverReturn } from '../watermark/hooks';\nimport useResizeObserver from '../hooks/useResizeObserver';\n\nexport default defineComponent({\n  name: 'XRadioGroup',\n  props: { ...props },\n  setup(props) {\n    const { value, modelValue } = toRefs(props);\n    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);\n\n    /** calculate bar style */\n    const radioGroupRef = ref<HTMLElement>();\n    const radioBtnName = usePrefixClass('radio-button');\n    const { STATUS, SIZE } = useCommonClassName();\n\n    // 键盘操作\n    useKeyboard(radioGroupRef, setInnerValue);\n\n    const checkedClassName = computed(() => `.${radioBtnName.value}.${STATUS.value.checked}`);\n\n    const barStyle = ref({ width: '0px', height: '0px', left: '0px', top: '0px' });\n\n    const calcDefaultBarStyle = () => {\n      const div = document.createElement('div');\n      div.setAttribute('style', 'position: absolute; visibility: hidden;');\n      div.appendChild(radioGroupRef.value.cloneNode(true));\n      document.body.appendChild(div);\n\n      const defaultCheckedRadio: HTMLElement = div.querySelector(checkedClassName.value);\n      const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = defaultCheckedRadio;\n      barStyle.value = {\n        width: `${offsetWidth}px`,\n        height: `${offsetHeight}px`,\n        left: `${offsetLeft}px`,\n        top: `${offsetTop}px`,\n      };\n      document.body.removeChild(div);\n    };\n\n    const calcBarStyle = () => {\n      if (props.variant === 'outline') return;\n\n      const checkedRadio: HTMLElement = radioGroupRef.value.querySelector(checkedClassName.value);\n      if (!checkedRadio) {\n        barStyle.value = { width: '0px', height: '9px', left: '0px', top: '0px' };\n        return;\n      }\n\n      const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = checkedRadio;\n      // current node is not rendered，fallback to default render\n      if (!offsetWidth) {\n        calcDefaultBarStyle();\n      } else {\n        barStyle.value = {\n          width: `${offsetWidth}px`,\n          height: `${offsetHeight}px`,\n          left: `${offsetLeft}px`,\n          top: `${offsetTop}px`,\n        };\n      }\n    };\n\n    let observerReturn: UseMutationObserverReturn;\n\n    watch(innerValue, async () => {\n      await nextTick();\n      calcBarStyle();\n    });\n\n    onMounted(() => {\n      calcBarStyle();\n      useResizeObserver(\n        radioGroupRef,\n        throttle(async () => {\n          await nextTick();\n          calcBarStyle();\n        }, 300),\n      );\n\n      const checkedRadioLabel: HTMLElement = radioGroupRef.value.querySelector(\n        `${checkedClassName.value} .${radioBtnName.value}__label`,\n      );\n      if (checkedRadioLabel) {\n        observerReturn = useMutationObserver(\n          checkedRadioLabel,\n          (mutations) => {\n            mutations.forEach((mutation) => {\n              if (mutation.type === 'characterData') {\n                calcBarStyle();\n              }\n            });\n          },\n          {\n            attributes: true,\n            childList: true,\n            characterData: true,\n            subtree: true,\n          },\n        );\n      }\n    });\n    onUnmounted(() => {\n      observerReturn?.stop();\n    });\n    /** calculate bar style end */\n\n    const { name, disabled } = toRefs(props);\n    provide(\n      RadioGroupInjectionKey,\n      reactive({\n        name,\n        disabled,\n        value: innerValue,\n        allowUncheck: props.allowUncheck,\n        setValue: setInnerValue,\n      }),\n    );\n\n    const radioGroupName = usePrefixClass('radio-group');\n    const renderSlot = useTNodeDefault();\n    const renderBlock = (): VNode => {\n      if (props.variant.includes('filled') && !isNil(innerValue.value))\n        return <div style={barStyle.value} class={`${radioGroupName.value}__bg-block`} />;\n    };\n    const renderOptions = (): VNode[] => {\n      return props.options?.map((option: RadioOption) => {\n        let opt = option as RadioOptionObj;\n        if (isNumber(option) || isString(option)) {\n          opt = { value: option, label: option.toString() };\n        }\n        return (\n          <Radio\n            key={`radio-group-options-${opt.value}-${Math.random()}`}\n            name={props.name}\n            checked={innerValue.value === opt.value}\n            disabled={'disabled' in opt ? opt.disabled : props.disabled}\n            value={opt.value}\n          >\n            {isFunction(opt.label) ? opt.label(h) : opt.label}\n          </Radio>\n        );\n      });\n    };\n\n    const groupClass = computed(() => [\n      `${radioGroupName.value}`,\n      SIZE.value[props.size],\n      {\n        [`${radioGroupName.value}__outline`]: props.variant === 'outline',\n        [`${radioGroupName.value}--filled`]: props.variant.includes('filled'),\n        [`${radioGroupName.value}--primary-filled`]: props.variant === 'primary-filled',\n      },\n    ]);\n\n    return () => (\n      <div ref={radioGroupRef} class={groupClass.value}>\n        {renderSlot('default') || renderOptions()}\n        {renderBlock()}\n      </div>\n    );\n  },\n});\n"],"names":["name","props","innerValue","setInnerValue","useKeyboard","width","height","left","top","div","document","calcDefaultBarStyle","_regeneratorRuntime","_context","calcBarStyle","onMounted","useResizeObserver","_context2","observerReturn","mutations","attributes","childList","characterData","subtree","onUnmounted","provide","disabled","value","setValue","opt","label","isFunction","_createVNode"],"mappings":"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"}