vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.16 kB
Source Map (JSON)
{"version":3,"file":"row.cjs","sources":["../../../components/row/row.ts"],"sourcesContent":["import { computed, defineComponent, h, provide, reactive, toRef } from 'vue'\n\nimport { useNameHelper, useProps } from '@vexip-ui/config'\nimport { rowProps } from './props'\nimport { ROW_STATE } from './symbol'\n\nimport type { RowGridAlign, RowGridJustify, RowState } from './symbol'\n\nconst justifyList = Object.freeze<RowGridJustify[]>([\n 'start',\n 'end',\n 'center',\n 'space-around',\n 'space-between',\n 'space-evenly',\n])\nconst alignList = Object.freeze<RowGridAlign[]>(['top', 'middle', 'bottom', 'stretch'])\n\nexport default defineComponent({\n name: 'Row',\n props: rowProps,\n setup(_props, { slots }) {\n const props = useProps('row', _props, {\n tag: 'div',\n gap: 0,\n justify: {\n default: 'start',\n validator: value => justifyList.includes(value),\n },\n align: {\n default: 'top',\n validator: value => alignList.includes(value),\n },\n columnFlex: false,\n })\n\n const nh = useNameHelper('row')\n\n const className = computed(() => {\n return [\n nh.b(),\n nh.bs('vars'),\n nh.bm(props.justify),\n nh.bm(props.align),\n {\n [nh.bm('inherit')]: props.inherit,\n },\n ]\n })\n const style = computed(() => {\n if (!props.gap) return null\n\n if (typeof props.gap === 'number') {\n return {\n [nh.cv('h-gap')]: `${props.gap}px`,\n }\n }\n\n if (Array.isArray(props.gap)) {\n const [horizontal, vertical] = props.gap\n\n return {\n [nh.cv('h-gap')]: `${horizontal}px`,\n [nh.cv('v-gap')]: `${vertical}px`,\n }\n }\n\n return null\n })\n const columnFlex = computed(() => {\n if (props.columnFlex === true) {\n return {\n justify: 'start',\n align: 'top',\n }\n } else if (props.columnFlex) {\n return {\n justify: 'start',\n align: 'top',\n ...props.columnFlex,\n }\n }\n\n return false\n })\n\n provide(\n ROW_STATE,\n reactive({\n columnFlex,\n gap: toRef(props, 'gap'),\n }) as RowState,\n )\n\n return () =>\n h(\n props.tag || 'div',\n {\n class: className.value,\n style: style.value,\n },\n {\n default: () => slots.default && slots.default(),\n },\n )\n },\n})\n"],"names":["justifyList","alignList","Row","defineComponent","rowProps","_props","slots","props","useProps","value","nh","useNameHelper","className","computed","style","horizontal","vertical","columnFlex","provide","ROW_STATE","reactive","toRef","h"],"mappings":"qHAQMA,EAAc,OAAO,OAAyB,CAClD,QACA,MACA,SACA,eACA,gBACA,cACF,CAAC,EACKC,EAAY,OAAO,OAAuB,CAAC,MAAO,SAAU,SAAU,SAAS,CAAC,EAEtFC,EAAeC,kBAAgB,CAC7B,KAAM,MACN,MAAOC,EAAA,SACP,MAAMC,EAAQ,CAAE,MAAAC,GAAS,CACjB,MAAAC,EAAQC,EAAAA,SAAS,MAAOH,EAAQ,CACpC,IAAK,MACL,IAAK,EACL,QAAS,CACP,QAAS,QACT,UAAWI,GAAST,EAAY,SAASS,CAAK,CAChD,EACA,MAAO,CACL,QAAS,MACT,UAAWA,GAASR,EAAU,SAASQ,CAAK,CAC9C,EACA,WAAY,EAAA,CACb,EAEKC,EAAKC,gBAAc,KAAK,EAExBC,EAAYC,EAAAA,SAAS,IAClB,CACLH,EAAG,EAAE,EACLA,EAAG,GAAG,MAAM,EACZA,EAAG,GAAGH,EAAM,OAAO,EACnBG,EAAG,GAAGH,EAAM,KAAK,EACjB,CACE,CAACG,EAAG,GAAG,SAAS,CAAC,EAAGH,EAAM,OAAA,CAE9B,CACD,EACKO,EAAQD,EAAAA,SAAS,IAAM,CACvB,GAAA,CAACN,EAAM,IAAY,OAAA,KAEnB,GAAA,OAAOA,EAAM,KAAQ,SAChB,MAAA,CACL,CAACG,EAAG,GAAG,OAAO,CAAC,EAAG,GAAGH,EAAM,GAAG,IAChC,EAGF,GAAI,MAAM,QAAQA,EAAM,GAAG,EAAG,CAC5B,KAAM,CAACQ,EAAYC,CAAQ,EAAIT,EAAM,IAE9B,MAAA,CACL,CAACG,EAAG,GAAG,OAAO,CAAC,EAAG,GAAGK,CAAU,KAC/B,CAACL,EAAG,GAAG,OAAO,CAAC,EAAG,GAAGM,CAAQ,IAC/B,CAAA,CAGK,OAAA,IAAA,CACR,EACKC,EAAaJ,EAAAA,SAAS,IACtBN,EAAM,aAAe,GAChB,CACL,QAAS,QACT,MAAO,KACT,EACSA,EAAM,WACR,CACL,QAAS,QACT,MAAO,MACP,GAAGA,EAAM,UACX,EAGK,EACR,EAEDW,OAAAA,EAAA,QACEC,EAAA,UACAC,WAAS,CACP,WAAAH,EACA,IAAKI,EAAAA,MAAMd,EAAO,KAAK,CACxB,CAAA,CACH,EAEO,IACLe,EAAA,EACEf,EAAM,KAAO,MACb,CACE,MAAOK,EAAU,MACjB,MAAOE,EAAM,KACf,EACA,CACE,QAAS,IAAMR,EAAM,SAAWA,EAAM,QAAQ,CAAA,CAElD,CAAA,CAEN,CAAC"}