UNPKG

@extclp/vexip-ui

Version:

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

1 lines 3.42 kB
{"version":3,"file":"button-group.vue2.mjs","sources":["../../../components/button/button-group.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, provide, reactive, toRef } from 'vue'\r\n\r\nimport { useNameHelper, useProps } from '@vexip-ui/config'\r\nimport { debounceMinor } from '@vexip-ui/utils'\r\nimport { buttonGroupProps } from './props'\r\nimport { GROUP_STATE, buttonTypes } from './symbol'\r\n\r\nimport type { ButtonState, ButtonType } from './symbol'\r\n\r\ndefineOptions({ name: 'ButtonGroup' })\r\n\r\nconst _props = defineProps(buttonGroupProps)\r\nconst props = useProps('buttonGroup', _props, {\r\n size: null,\r\n type: {\r\n default: 'default' as ButtonType,\r\n validator: (value: ButtonType) => buttonTypes.includes(value),\r\n },\r\n circle: false,\r\n})\r\n\r\ndefineSlots<{ default: () => any }>()\r\n\r\nconst nh = useNameHelper('button-group')\r\n\r\nconst itemStates = reactive(new Set<ButtonState>())\r\nconst size = toRef(props, 'size')\r\nconst type = toRef(props, 'type')\r\n\r\nconst className = computed(() => {\r\n return {\r\n [nh.b()]: true,\r\n [nh.bm('inherit')]: props.inherit,\r\n [nh.bm('circle')]: props.circle,\r\n }\r\n})\r\nconst itemList = computed(() => Array.from(itemStates))\r\n\r\nconst refreshIndexes = debounceMinor(() => {\r\n for (let i = 0, len = itemList.value.length; i < len; ++i) {\r\n const item = itemList.value[i]\r\n\r\n item.index = i + 1\r\n item.isLast = i === len - 1\r\n }\r\n})\r\n\r\nprovide(\r\n GROUP_STATE,\r\n reactive({\r\n size,\r\n type,\r\n increaseItem,\r\n decreaseItem,\r\n refreshIndexes,\r\n }),\r\n)\r\n\r\nfunction increaseItem(item: ButtonState) {\r\n itemStates.add(item)\r\n refreshIndexes()\r\n}\r\n\r\nfunction decreaseItem(item: ButtonState) {\r\n itemStates.delete(item)\r\n refreshIndexes()\r\n}\r\n</script>\r\n\r\n<template>\r\n <div :class=\"className\" role=\"group\">\r\n <slot></slot>\r\n </div>\r\n</template>\r\n"],"names":["props","useProps","__props","value","buttonTypes","nh","useNameHelper","itemStates","reactive","size","toRef","type","className","computed","itemList","refreshIndexes","debounceMinor","i","len","item","provide","GROUP_STATE","increaseItem","decreaseItem","_createElementBlock","_renderSlot","_ctx"],"mappings":";;;;;;;;;;AAaM,UAAAA,IAAQC,EAAS,eADRC,GAC+B;AAAA,MAC5C,MAAM;AAAA,MACN,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,WAAW,CAACC,MAAsBC,EAAY,SAASD,CAAK;AAAA,MAC9D;AAAA,MACA,QAAQ;AAAA,IAAA,CACT,GAIKE,IAAKC,EAAc,cAAc,GAEjCC,IAAaC,EAAa,oBAAA,KAAkB,GAC5CC,IAAOC,EAAMV,GAAO,MAAM,GAC1BW,IAAOD,EAAMV,GAAO,MAAM,GAE1BY,IAAYC,EAAS,OAClB;AAAA,MACL,CAACR,EAAG,EAAE,CAAC,GAAG;AAAA,MACV,CAACA,EAAG,GAAG,SAAS,CAAC,GAAGL,EAAM;AAAA,MAC1B,CAACK,EAAG,GAAG,QAAQ,CAAC,GAAGL,EAAM;AAAA,IAC3B,EACD,GACKc,IAAWD,EAAS,MAAM,MAAM,KAAKN,CAAU,CAAC,GAEhDQ,IAAiBC,EAAc,MAAM;AAChC,eAAAC,IAAI,GAAGC,IAAMJ,EAAS,MAAM,QAAQG,IAAIC,GAAK,EAAED,GAAG;AACnD,cAAAE,IAAOL,EAAS,MAAMG,CAAC;AAE7B,QAAAE,EAAK,QAAQF,IAAI,GACZE,EAAA,SAASF,MAAMC,IAAM;AAAA,MAAA;AAAA,IAC5B,CACD;AAED,IAAAE;AAAA,MACEC;AAAA,MACAb,EAAS;AAAA,QACP,MAAAC;AAAA,QACA,MAAAE;AAAA,QACA,cAAAW;AAAA,QACA,cAAAC;AAAA,QACA,gBAAAR;AAAA,MACD,CAAA;AAAA,IACH;AAEA,aAASO,EAAaH,GAAmB;AACvC,MAAAZ,EAAW,IAAIY,CAAI,GACJJ,EAAA;AAAA,IAAA;AAGjB,aAASQ,EAAaJ,GAAmB;AACvC,MAAAZ,EAAW,OAAOY,CAAI,GACPJ,EAAA;AAAA,IAAA;2BAKfS,EAEM,OAAA;AAAA,MAFA,SAAOZ,EAAS,KAAA;AAAA,MAAE,MAAK;AAAA,IAAA;MAC3Ba,EAAaC,EAAA,QAAA,SAAA;AAAA;;;"}