@extclp/vexip-ui/es/components/checkbox/checkbox-group.vue2.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"checkbox-group.vue2.mjs","sources":["../../../components/checkbox/checkbox-group.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useFieldStore } from '@/components/form'\r\nimport { Checkbox } from '@/components/checkbox'\r\n\r\nimport { computed, provide, reactive, ref, toRef, watch } from 'vue'\r\n\r\nimport {\r\n  createSizeProp,\r\n  createStateProp,\r\n  emitEvent,\r\n  useLocale,\r\n  useNameHelper,\r\n  useProps,\r\n} from '@vexip-ui/config'\r\nimport {\r\n  adjustAlpha,\r\n  debounceMinor,\r\n  isClient,\r\n  isDefined,\r\n  isObject,\r\n  parseColorToRgba,\r\n} from '@vexip-ui/utils'\r\nimport { checkboxGroupProps } from './props'\r\nimport { GROUP_STATE } from './symbol'\r\n\r\nimport type { Ref } from 'vue'\r\nimport type { ControlState } from './symbol'\r\n\r\ndefineOptions({ name: 'CheckboxGroup' })\r\n\r\nconst {\r\n  idFor,\r\n  labelId,\r\n  state,\r\n  disabled,\r\n  loading,\r\n  size,\r\n  validateField,\r\n  getFieldValue,\r\n  setFieldValue,\r\n} = useFieldStore<(string | number)[]>(focus)\r\n\r\nconst _props = defineProps(checkboxGroupProps)\r\nconst props = useProps('checkboxGroup', _props, {\r\n  size: createSizeProp(size),\r\n  state: createStateProp(state),\r\n  locale: null,\r\n  value: {\r\n    default: () => getFieldValue(),\r\n    static: true,\r\n  },\r\n  vertical: false,\r\n  disabled: () => disabled.value,\r\n  border: false,\r\n  options: {\r\n    default: () => [],\r\n    static: true,\r\n  },\r\n  loading: () => loading.value,\r\n  control: null,\r\n  loadingLock: false,\r\n  color: null,\r\n  stateColor: false,\r\n})\r\n\r\nconst emit = defineEmits(['update:value'])\r\n\r\nconst nh = useNameHelper('checkbox-group')\r\nconst locale = useLocale('checkbox', toRef(props, 'locale'))\r\nconst valueMap = new Map<string | number, boolean>()\r\nconst inputSet = new Set<Ref<HTMLElement | null | undefined>>()\r\nconst controlSet = new Set<ControlState>()\r\nconst currentValues = ref<(string | number)[]>(props.value || [])\r\n\r\nconst readonly = computed(() => props.loading && props.loadingLock)\r\nconst className = computed(() => {\r\n  return [\r\n    nh.b(),\r\n    nh.ns('checkbox-vars'),\r\n    {\r\n      [nh.bm('inherit')]: props.inherit,\r\n      [nh.bm('vertical')]: props.vertical,\r\n      [nh.bm('disabled')]: props.disabled,\r\n      [nh.bm('readonly')]: readonly.value,\r\n      [nh.bm('loading')]: props.loading,\r\n      [nh.bm(props.size)]: props.size !== 'default',\r\n      [nh.bm('border')]: props.border,\r\n      [nh.bm(props.state)]: props.state !== 'default',\r\n    },\r\n  ]\r\n})\r\nconst controlLabel = computed(() => {\r\n  return typeof props.control === 'string' ? props.control : locale.value.all\r\n})\r\nconst colorMap = computed(() => {\r\n  if (!props.color) return null\r\n\r\n  const baseColor = parseColorToRgba(props.color)\r\n\r\n  return {\r\n    base: baseColor.toString(),\r\n    opacity6: adjustAlpha(baseColor, 0.4).toString(),\r\n  }\r\n})\r\n\r\nconst updateValue = debounceMinor(() => {\r\n  currentValues.value = []\r\n\r\n  valueMap.forEach((checked, value) => {\r\n    if (checked) {\r\n      currentValues.value.push(value)\r\n    }\r\n  })\r\n\r\n  handleChange(currentValues.value)\r\n})\r\n\r\nconst updateControl = debounceMinor(() => {\r\n  const valueLength = currentValues.value.length\r\n  const checked = valueLength === valueMap.size\r\n  const partial = valueLength > 0 && !checked\r\n\r\n  controlSet.forEach(state => {\r\n    state.checked = checked\r\n    state.partial = partial\r\n  })\r\n})\r\n\r\nprovide(\r\n  GROUP_STATE,\r\n  reactive({\r\n    currentValues,\r\n    size: toRef(props, 'size'),\r\n    state: toRef(props, 'state'),\r\n    disabled: toRef(props, 'disabled'),\r\n    loading: toRef(props, 'loading'),\r\n    loadingLock: toRef(props, 'loadingLock'),\r\n    colorMap,\r\n    stateColor: toRef(props, 'stateColor'),\r\n    increaseItem,\r\n    decreaseItem,\r\n    increaseControl,\r\n    decreaseControl,\r\n    handleControlChange,\r\n    setItemChecked,\r\n    replaceValue,\r\n  }),\r\n)\r\n\r\nwatch(\r\n  () => props.value,\r\n  value => {\r\n    const checkedValues = new Set(value)\r\n    const allValues = Array.from(valueMap.keys())\r\n\r\n    currentValues.value = []\r\n\r\n    allValues.forEach(value => {\r\n      const checked = checkedValues.has(value)\r\n\r\n      valueMap.set(value, checkedValues.has(value))\r\n      checked && currentValues.value.push(value)\r\n    })\r\n  },\r\n)\r\nwatch(currentValues, () => {\r\n  updateControl()\r\n})\r\n\r\nfunction increaseItem(\r\n  value: string | number,\r\n  checked: boolean,\r\n  input: Ref<HTMLElement | null | undefined>,\r\n) {\r\n  valueMap.set(value, checked)\r\n  inputSet.add(input)\r\n}\r\n\r\nfunction decreaseItem(value: string | number, input: Ref<HTMLElement | null | undefined>) {\r\n  valueMap.delete(value)\r\n  inputSet.delete(input)\r\n}\r\n\r\nfunction increaseControl(state: ControlState) {\r\n  controlSet.add(state)\r\n  updateControl()\r\n}\r\n\r\nfunction decreaseControl(state: ControlState) {\r\n  controlSet.delete(state)\r\n}\r\n\r\nfunction setItemChecked(value: string | number, checked: boolean) {\r\n  if (!isDefined(value) || !valueMap.has(value)) return\r\n\r\n  valueMap.set(value, checked)\r\n  updateValue()\r\n  updateControl()\r\n}\r\n\r\nfunction handleControlChange() {\r\n  // 在 group 层进行更新, 未选满则全选, 反之全不选\r\n  const allValues = Array.from(valueMap.keys())\r\n  const checked = currentValues.value.length !== allValues.length\r\n\r\n  allValues.forEach(value => {\r\n    valueMap.set(value, checked)\r\n  })\r\n\r\n  updateValue()\r\n  updateControl()\r\n}\r\n\r\nfunction handleChange(value: (string | number)[]) {\r\n  emit('update:value', value)\r\n  setFieldValue(value)\r\n  emitEvent(props.onChange, value)\r\n  validateField()\r\n}\r\n\r\nfunction replaceValue(prevValue: string | number, newValue: string | number) {\r\n  if (\r\n    isDefined(prevValue) &&\r\n    isDefined(newValue) &&\r\n    prevValue !== newValue &&\r\n    valueMap.has(prevValue)\r\n  ) {\r\n    valueMap.set(newValue, valueMap.get(prevValue)!)\r\n    valueMap.delete(prevValue)\r\n  }\r\n}\r\n\r\nfunction focus(options?: FocusOptions) {\r\n  const input = Array.from(inputSet)[0]?.value\r\n\r\n  if (isClient && input && document.activeElement !== input) {\r\n    input.focus(options)\r\n  }\r\n}\r\n\r\ndefineExpose({\r\n  idFor,\r\n  labelId,\r\n  increaseControl,\r\n  decreaseControl,\r\n  focus,\r\n  blur: () => {\r\n    for (const input of inputSet) {\r\n      input.value?.blur()\r\n    }\r\n  },\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    :id=\"idFor\"\r\n    :class=\"className\"\r\n    role=\"group\"\r\n    :aria-labelledby=\"labelId\"\r\n  >\r\n    <slot>\r\n      <Checkbox v-if=\"props.control\" inherit control>\r\n        {{ controlLabel }}\r\n      </Checkbox>\r\n      <template v-for=\"(item, index) in props.options\" :key=\"index\">\r\n        <Checkbox\r\n          v-if=\"isObject(item)\"\r\n          inherit\r\n          :value=\"item.value\"\r\n          :control=\"item.control\"\r\n          :disabled=\"item.disabled\"\r\n        >\r\n          {{ item.label || item.value }}\r\n        </Checkbox>\r\n        <Checkbox v-else inherit :value=\"item\">\r\n          {{ item }}\r\n        </Checkbox>\r\n      </template>\r\n    </slot>\r\n  </div>\r\n</template>\r\n"],"names":["idFor","labelId","state","disabled","loading","size","validateField","getFieldValue","setFieldValue","useFieldStore","focus","props","useProps","__props","createSizeProp","createStateProp","emit","__emit","nh","useNameHelper","locale","useLocale","toRef","valueMap","inputSet","controlSet","currentValues","ref","readonly","computed","className","controlLabel","colorMap","baseColor","parseColorToRgba","adjustAlpha","updateValue","debounceMinor","checked","value","handleChange","updateControl","valueLength","partial","provide","GROUP_STATE","reactive","increaseItem","decreaseItem","increaseControl","decreaseControl","handleControlChange","setItemChecked","replaceValue","watch","checkedValues","allValues","input","isDefined","emitEvent","prevValue","newValue","options","_a","isClient","__expose","_createElementBlock","_unref","_renderSlot","_ctx","_createBlock","Checkbox","_openBlock","_Fragment","item","index","isObject","_createTextVNode","_toDisplayString"],"mappings":"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"}