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