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

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

{"version":3,"file":"checkbox.vue2.mjs","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useFieldStore } from '@/components/form'\r\n\r\nimport { computed, inject, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\r\n\r\nimport {\r\n  createSizeProp,\r\n  createStateProp,\r\n  emitEvent,\r\n  useNameHelper,\r\n  useProps,\r\n} from '@vexip-ui/config'\r\nimport { adjustAlpha, isDefined, isFunction, parseColorToRgba } from '@vexip-ui/utils'\r\nimport { checkboxProps } from './props'\r\nimport { GROUP_STATE } from './symbol'\r\n\r\ndefineOptions({ name: 'Checkbox' })\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<boolean>(() => input.value?.focus())\r\n\r\nconst _props = defineProps(checkboxProps)\r\nconst props = useProps('checkbox', _props, {\r\n  size: createSizeProp(size),\r\n  state: createStateProp(state),\r\n  checked: {\r\n    default: () => getFieldValue(),\r\n    static: true,\r\n  },\r\n  label: null,\r\n  value: {\r\n    default: null,\r\n    static: true,\r\n  },\r\n  labelClass: null,\r\n  disabled: () => disabled.value,\r\n  border: false,\r\n  control: false,\r\n  partial: false,\r\n  tabIndex: 0,\r\n  loading: () => loading.value,\r\n  loadingLock: false,\r\n  name: {\r\n    default: '',\r\n    static: true,\r\n  },\r\n  color: null,\r\n  stateColor: false,\r\n})\r\n\r\nconst emit = defineEmits(['update:checked'])\r\n\r\nconst slots = defineSlots<{\r\n  default?: () => any,\r\n}>()\r\n\r\nconst groupState = inject(GROUP_STATE, null)\r\n\r\nconst nh = useNameHelper('checkbox')\r\nconst currentChecked = ref(props.checked ?? false)\r\nconst currentPartial = ref(props.partial)\r\n\r\nconst input = ref<HTMLInputElement>()\r\n\r\nconst controlState = reactive({\r\n  checked: currentChecked,\r\n  partial: currentPartial,\r\n})\r\n\r\nconst computedSize = computed(() => groupState?.size || props.size)\r\nconst computedState = computed(() => groupState?.state || props.state)\r\nconst isDisabled = computed(() => groupState?.disabled || props.disabled)\r\nconst isLoading = computed(() => groupState?.loading || props.loading)\r\nconst isLoadingLock = computed(() => groupState?.loadingLock || props.loadingLock)\r\nconst stateColor = computed(() => groupState?.stateColor || props.stateColor)\r\nconst readonly = computed(() => isLoading.value && isLoadingLock.value)\r\nconst className = computed(() => {\r\n  return [\r\n    nh.b(),\r\n    nh.bs('vars'),\r\n    {\r\n      [nh.bm('inherit')]: props.inherit,\r\n      [nh.bm('checked')]: currentChecked.value,\r\n      [nh.bm('disabled')]: isDisabled.value,\r\n      [nh.bm('readonly')]: readonly.value,\r\n      [nh.bm('loading')]: isLoading.value,\r\n      [nh.bm(computedSize.value)]: computedSize.value !== 'default',\r\n      [nh.bm('border')]: props.border,\r\n      [nh.bm('partial')]: props.control && currentPartial.value,\r\n      [nh.bm(computedState.value)]: computedState.value !== 'default',\r\n    },\r\n  ]\r\n})\r\nconst colorMap = computed(() => {\r\n  if (!props.color) return groupState?.colorMap\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\nconst style = computed<Record<string, string>>(() => {\r\n  if (!colorMap.value) return {}\r\n\r\n  const { base, opacity6 } = colorMap.value\r\n\r\n  return nh.cvm({\r\n    'label-color-checked': base,\r\n    'b-color': stateColor.value ? base : undefined,\r\n    'b-color-hover': base,\r\n    'b-color-checked': base,\r\n    'signal-bg-color-checked': base,\r\n    's-color-focus': opacity6,\r\n  })\r\n})\r\nconst hasLabel = computed(() => {\r\n  return isDefined(props.label) && props.label !== ''\r\n})\r\nconst currentValue = computed(() => {\r\n  return props.value ?? props.label\r\n})\r\n\r\nwatch(\r\n  () => props.checked,\r\n  value => {\r\n    setCurrentChecked(value)\r\n  },\r\n)\r\nwatch(\r\n  () => props.partial,\r\n  value => {\r\n    currentPartial.value = value\r\n  },\r\n)\r\n\r\nif (groupState) {\r\n  let increased = false\r\n\r\n  watch(currentValue, (value, prevValue) => {\r\n    if (isFunction(groupState.replaceValue)) {\r\n      groupState.replaceValue(prevValue, value)\r\n    }\r\n  })\r\n  watch(\r\n    () => props.control,\r\n    value => {\r\n      if (value) {\r\n        if (increased) {\r\n          groupState.decreaseItem(currentValue.value, input)\r\n          increased = false\r\n        }\r\n\r\n        groupState.increaseControl(controlState)\r\n      } else {\r\n        groupState.decreaseControl(controlState)\r\n      }\r\n    },\r\n    { immediate: true },\r\n  )\r\n  watch(\r\n    () => groupState.currentValues,\r\n    value => {\r\n      if (!props.control) {\r\n        setCurrentChecked(value.includes(currentValue.value))\r\n      }\r\n    },\r\n    { immediate: true },\r\n  )\r\n\r\n  onMounted(() => {\r\n    if (!props.control) {\r\n      groupState.increaseItem(currentValue.value, currentChecked.value, input)\r\n      increased = true\r\n    }\r\n  })\r\n\r\n  onBeforeUnmount(() => {\r\n    if (!props.control) {\r\n      groupState.decreaseItem(currentValue.value, input)\r\n    } else {\r\n      groupState.decreaseControl(controlState)\r\n    }\r\n  })\r\n}\r\n\r\ndefineExpose({\r\n  idFor,\r\n  labelId,\r\n  currentChecked,\r\n  input,\r\n  focus: (options?: FocusOptions) => input.value?.focus(options),\r\n  blur: () => input.value?.blur(),\r\n})\r\n\r\nfunction emitCheckEvent() {\r\n  const checked = currentChecked.value\r\n\r\n  emit('update:checked', checked)\r\n  setFieldValue(checked)\r\n  emitEvent(props.onChange, checked)\r\n}\r\n\r\nfunction setCurrentChecked(checked: boolean) {\r\n  if (props.control && isFunction(groupState?.handleControlChange)) {\r\n    groupState!.handleControlChange()\r\n  } else if (currentChecked.value !== checked) {\r\n    currentChecked.value = checked\r\n    emitCheckEvent()\r\n  }\r\n}\r\n\r\nfunction handleChange(checked: boolean) {\r\n  if (isDisabled.value || readonly.value) {\r\n    return\r\n  }\r\n\r\n  setCurrentChecked(checked)\r\n\r\n  if (!props.control && groupState) {\r\n    isFunction(groupState.setItemChecked) && groupState.setItemChecked(currentValue.value, checked)\r\n  }\r\n\r\n  if (!groupState) {\r\n    validateField()\r\n  }\r\n}\r\n\r\nfunction handleClick(event: MouseEvent) {\r\n  emitEvent(props.onClick, event)\r\n}\r\n</script>\r\n\r\n<template>\r\n  <label\r\n    :id=\"idFor\"\r\n    :class=\"className\"\r\n    :style=\"style\"\r\n    :aria-disabled=\"isDisabled\"\r\n    :aria-labelledby=\"labelId\"\r\n    @click=\"handleClick\"\r\n  >\r\n    <input\r\n      ref=\"input\"\r\n      type=\"checkbox\"\r\n      :class=\"nh.be('input')\"\r\n      :checked=\"currentChecked\"\r\n      :disabled=\"isDisabled || readonly\"\r\n      :tabindex=\"props.tabIndex\"\r\n      :name=\"props.name\"\r\n      @submit.prevent\r\n      @change=\"handleChange(!currentChecked)\"\r\n      @click.stop\r\n    />\r\n    <span :class=\"[nh.be('signal'), isLoading && nh.bem('signal', 'active')]\"></span>\r\n    <span v-if=\"hasLabel || slots.default\" :class=\"[nh.be('label'), props.labelClass]\">\r\n      <slot>{{ props.label }}</slot>\r\n    </span>\r\n  </label>\r\n</template>\r\n"],"names":["idFor","labelId","state","disabled","loading","size","validateField","getFieldValue","setFieldValue","useFieldStore","_a","input","props","useProps","__props","createSizeProp","createStateProp","emit","__emit","slots","_useSlots","groupState","inject","GROUP_STATE","nh","useNameHelper","currentChecked","ref","currentPartial","controlState","reactive","computedSize","computed","computedState","isDisabled","isLoading","isLoadingLock","stateColor","readonly","className","colorMap","baseColor","parseColorToRgba","adjustAlpha","style","base","opacity6","hasLabel","isDefined","currentValue","watch","value","setCurrentChecked","increased","prevValue","isFunction","onMounted","onBeforeUnmount","__expose","options","emitCheckEvent","checked","emitEvent","handleChange","handleClick","event","_createElementBlock","_unref","_createElementVNode","_normalizeClass","_cache","$event","_renderSlot","_ctx","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;;;;;;;AAkBM,UAAA;AAAA,MACJ,OAAAA;AAAA,MACA,SAAAC;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC;AAAA,QACEC,GAAuB,MAAM;;AAAA,cAAAC,IAAAC,EAAM,UAAN,gBAAAD,EAAa;AAAA,KAAO,GAG/CE,IAAQC,GAAS,YADRC,GAC4B;AAAA,MACzC,MAAMC,GAAeV,CAAI;AAAA,MACzB,OAAOW,GAAgBd,CAAK;AAAA,MAC5B,SAAS;AAAA,QACP,SAAS,MAAMK,EAAc;AAAA,QAC7B,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,YAAY;AAAA,MACZ,UAAU,MAAMJ,EAAS;AAAA,MACzB,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS,MAAMC,EAAQ;AAAA,MACvB,aAAa;AAAA,MACb,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,MACP,YAAY;AAAA,IAAA,CACb,GAEKa,IAAOC,GAEPC,IAAQC,EAEV,GAEEC,IAAaC,EAAOC,IAAa,IAAI,GAErCC,IAAKC,GAAc,UAAU,GAC7BC,IAAiBC,EAAIf,EAAM,WAAW,EAAK,GAC3CgB,IAAiBD,EAAIf,EAAM,OAAO,GAElCD,IAAQgB,EAAsB,GAE9BE,IAAeC,GAAS;AAAA,MAC5B,SAASJ;AAAA,MACT,SAASE;AAAA,IAAA,CACV,GAEKG,IAAeC,EAAS,OAAMX,KAAA,gBAAAA,EAAY,SAAQT,EAAM,IAAI,GAC5DqB,IAAgBD,EAAS,OAAMX,KAAA,gBAAAA,EAAY,UAAST,EAAM,KAAK,GAC/DsB,IAAaF,EAAS,OAAMX,KAAA,gBAAAA,EAAY,aAAYT,EAAM,QAAQ,GAClEuB,IAAYH,EAAS,OAAMX,KAAA,gBAAAA,EAAY,YAAWT,EAAM,OAAO,GAC/DwB,IAAgBJ,EAAS,OAAMX,KAAA,gBAAAA,EAAY,gBAAeT,EAAM,WAAW,GAC3EyB,IAAaL,EAAS,OAAMX,KAAA,gBAAAA,EAAY,eAAcT,EAAM,UAAU,GACtE0B,IAAWN,EAAS,MAAMG,EAAU,SAASC,EAAc,KAAK,GAChEG,IAAYP,EAAS,MAClB;AAAA,MACLR,EAAG,EAAE;AAAA,MACLA,EAAG,GAAG,MAAM;AAAA,MACZ;AAAA,QACE,CAACA,EAAG,GAAG,SAAS,CAAC,GAAGZ,EAAM;AAAA,QAC1B,CAACY,EAAG,GAAG,SAAS,CAAC,GAAGE,EAAe;AAAA,QACnC,CAACF,EAAG,GAAG,UAAU,CAAC,GAAGU,EAAW;AAAA,QAChC,CAACV,EAAG,GAAG,UAAU,CAAC,GAAGc,EAAS;AAAA,QAC9B,CAACd,EAAG,GAAG,SAAS,CAAC,GAAGW,EAAU;AAAA,QAC9B,CAACX,EAAG,GAAGO,EAAa,KAAK,CAAC,GAAGA,EAAa,UAAU;AAAA,QACpD,CAACP,EAAG,GAAG,QAAQ,CAAC,GAAGZ,EAAM;AAAA,QACzB,CAACY,EAAG,GAAG,SAAS,CAAC,GAAGZ,EAAM,WAAWgB,EAAe;AAAA,QACpD,CAACJ,EAAG,GAAGS,EAAc,KAAK,CAAC,GAAGA,EAAc,UAAU;AAAA,MAAA;AAAA,IAE1D,CACD,GACKO,IAAWR,EAAS,MAAM;AAC9B,UAAI,CAACpB,EAAM,MAAO,QAAOS,KAAA,gBAAAA,EAAY;AAE/B,YAAAoB,IAAYC,GAAiB9B,EAAM,KAAK;AAEvC,aAAA;AAAA,QACL,MAAM6B,EAAU,SAAS;AAAA,QACzB,UAAUE,GAAYF,GAAW,GAAG,EAAE,SAAS;AAAA,MACjD;AAAA,IAAA,CACD,GACKG,IAAQZ,EAAiC,MAAM;AACnD,UAAI,CAACQ,EAAS,MAAO,QAAO,CAAC;AAE7B,YAAM,EAAE,MAAAK,GAAM,UAAAC,EAAS,IAAIN,EAAS;AAEpC,aAAOhB,EAAG,IAAI;AAAA,QACZ,uBAAuBqB;AAAA,QACvB,WAAWR,EAAW,QAAQQ,IAAO;AAAA,QACrC,iBAAiBA;AAAA,QACjB,mBAAmBA;AAAA,QACnB,2BAA2BA;AAAA,QAC3B,iBAAiBC;AAAA,MAAA,CAClB;AAAA,IAAA,CACF,GACKC,IAAWf,EAAS,MACjBgB,GAAUpC,EAAM,KAAK,KAAKA,EAAM,UAAU,EAClD,GACKqC,IAAejB,EAAS,MACrBpB,EAAM,SAASA,EAAM,KAC7B;AAeD,QAbAsC;AAAA,MACE,MAAMtC,EAAM;AAAA,MACZ,CAASuC,MAAA;AACP,QAAAC,EAAkBD,CAAK;AAAA,MAAA;AAAA,IAE3B,GACAD;AAAA,MACE,MAAMtC,EAAM;AAAA,MACZ,CAASuC,MAAA;AACP,QAAAvB,EAAe,QAAQuB;AAAA,MAAA;AAAA,IAE3B,GAEI9B,GAAY;AACd,UAAIgC,IAAY;AAEV,MAAAH,EAAAD,GAAc,CAACE,GAAOG,MAAc;AACpC,QAAAC,EAAWlC,EAAW,YAAY,KACzBA,EAAA,aAAaiC,GAAWH,CAAK;AAAA,MAC1C,CACD,GACDD;AAAA,QACE,MAAMtC,EAAM;AAAA,QACZ,CAASuC,MAAA;AACP,UAAIA,KACEE,MACShC,EAAA,aAAa4B,EAAa,OAAOtC,CAAK,GACrC0C,IAAA,KAGdhC,EAAW,gBAAgBQ,CAAY,KAEvCR,EAAW,gBAAgBQ,CAAY;AAAA,QAE3C;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB,GACAqB;AAAA,QACE,MAAM7B,EAAW;AAAA,QACjB,CAAS8B,MAAA;AACH,UAACvC,EAAM,WACTwC,EAAkBD,EAAM,SAASF,EAAa,KAAK,CAAC;AAAA,QAExD;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB,GAEAO,GAAU,MAAM;AACV,QAAC5C,EAAM,YACTS,EAAW,aAAa4B,EAAa,OAAOvB,EAAe,OAAOf,CAAK,GAC3D0C,IAAA;AAAA,MACd,CACD,GAEDI,GAAgB,MAAM;AAChB,QAAC7C,EAAM,UAGTS,EAAW,gBAAgBQ,CAAY,IAF5BR,EAAA,aAAa4B,EAAa,OAAOtC,CAAK;AAAA,MAGnD,CACD;AAAA,IAAA;AAGU,IAAA+C,EAAA;AAAA,MACX,OAAA1D;AAAA,MACA,SAAAC;AAAA,MACA,gBAAAyB;AAAA,MACA,OAAAf;AAAA,MACA,OAAO,CAACgD,MAA2B;;AAAA,gBAAAjD,IAAAC,EAAM,UAAN,gBAAAD,EAAa,MAAMiD;AAAA;AAAA,MACtD,MAAM,MAAA;;AAAM,gBAAAjD,IAAAC,EAAM,UAAN,gBAAAD,EAAa;AAAA;AAAA,IAAK,CAC/B;AAED,aAASkD,IAAiB;AACxB,YAAMC,IAAUnC,EAAe;AAE/B,MAAAT,EAAK,kBAAkB4C,CAAO,GAC9BrD,EAAcqD,CAAO,GACXC,EAAAlD,EAAM,UAAUiD,CAAO;AAAA,IAAA;AAGnC,aAAST,EAAkBS,GAAkB;AAC3C,MAAIjD,EAAM,WAAW2C,EAAWlC,KAAA,gBAAAA,EAAY,mBAAmB,IAC7DA,EAAY,oBAAoB,IACvBK,EAAe,UAAUmC,MAClCnC,EAAe,QAAQmC,GACRD,EAAA;AAAA,IACjB;AAGF,aAASG,EAAaF,GAAkB;AAClC,MAAA3B,EAAW,SAASI,EAAS,UAIjCc,EAAkBS,CAAO,GAErB,CAACjD,EAAM,WAAWS,KACpBkC,EAAWlC,EAAW,cAAc,KAAKA,EAAW,eAAe4B,EAAa,OAAOY,CAAO,GAG3FxC,KACWf,EAAA;AAAA,IAChB;AAGF,aAAS0D,EAAYC,GAAmB;AAC5B,MAAAH,EAAAlD,EAAM,SAASqD,CAAK;AAAA,IAAA;2BAK9BC,EAwBQ,SAAA;AAAA,MAvBL,IAAIC,EAAKnE,CAAA;AAAA,MACT,SAAOuC,EAAS,KAAA;AAAA,MAChB,UAAOK,EAAK,KAAA;AAAA,MACZ,iBAAeV,EAAU;AAAA,MACzB,mBAAiBiC,EAAOlE,CAAA;AAAA,MACxB,SAAO+D;AAAA,IAAA;MAERI,EAWE,SAAA;AAAA,iBAVI;AAAA,QAAJ,KAAIzD;AAAA,QACJ,MAAK;AAAA,QACJ,OAAK0D,EAAEF,EAAE3C,CAAA,EAAC,GAAE,OAAA,CAAA;AAAA,QACZ,SAASE,EAAc;AAAA,QACvB,UAAUQ,EAAU,SAAII,EAAQ;AAAA,QAChC,UAAU6B,EAAKvD,CAAA,EAAC;AAAA,QAChB,MAAMuD,EAAKvD,CAAA,EAAC;AAAA,QACZ,4BAAD,MAAe;AAAA,QAAA,GAAA,CAAA,SAAA,CAAA;AAAA,QACd,UAAM0D,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAER,EAAY,CAAErC,EAAc,KAAA;AAAA,QACpC,2BAAD,MAAW;AAAA,QAAA,GAAA,CAAA,MAAA,CAAA;AAAA,MAAA;MAEb0C,EAAiF,QAAA;AAAA,QAA1E,OAAKC,EAAA,CAAGF,KAAG,cAAchC,EAAS,SAAIgC,EAAE3C,CAAA,EAAC,IAAG,UAAA,QAAA,CAAA,CAAA;AAAA,MAAA;MACvCuB,EAAQ,SAAI5B,EAAM,gBAA9B+C,EAEO,QAAA;AAAA;QAFiC,UAAQC,EAAE3C,CAAA,EAAC,GAAa,OAAA,GAAA2C,EAAAvD,CAAA,EAAM,UAAU,CAAA;AAAA,MAAA;QAC9E4D,GAA8BC,yBAA9B,MAA8B;AAAA,UAArBC,GAAAC,GAAAR,EAAAvD,CAAA,EAAM,KAAK,GAAA,CAAA;AAAA;;;;;"}