ideaz-element

Version:

naivesteven.github.io/ideaz-element/

1 lines • 8.94 kB

Source Map (JSON)

View Raw

{"version":3,"file":"CheckCardItem.mjs","sources":["../../../../../packages/element/check-card/src/CheckCardItem.tsx"],"sourcesContent":["import { h } from 'vue'\nimport { isFunction } from '@ideaz/utils'\nimport { useNamespace } from '@ideaz/hooks'\nimport { ElAvatar, ElSkeleton } from 'element-plus'\nimport type { VNode } from 'vue'\nimport type { CheckCardItemProps } from './props'\nimport { checkCardItemProps } from './props'\nimport type CheckCardGroup from '.'\n\nexport default defineComponent({\n name: 'ZCheckCardItem',\n props: checkCardItemProps,\n emits: ['click', 'change'],\n setup(props, { emit }) {\n const stateChecked = ref(props.defaultChecked)\n const checkCardProps = ref<CheckCardItemProps>({} as CheckCardItemProps)\n const multiple = ref(false)\n const checkCardGroup = inject<typeof CheckCardGroup | null>('check-card-group', null)\n const ns = useNamespace('check-card')\n const size = useFormSize()\n\n const getSizeCls = (size?: string) => {\n if (size === 'large')\n return 'lg'\n if (size === 'small')\n return 'sm'\n return ''\n }\n\n watchEffect(() => {\n const {\n defaultChecked,\n checked,\n disabled,\n loading,\n bordered,\n value,\n } = props\n\n checkCardProps.value = {\n defaultChecked,\n checked,\n disabled,\n loading,\n bordered,\n value,\n size: size.value,\n }\n\n checkCardProps.value.checked = stateChecked.value\n\n if (checkCardGroup?.value) {\n checkCardProps.value.disabled\n = props.disabled || checkCardGroup.value.disabled\n checkCardProps.value.loading\n = props.loading || checkCardGroup.value.loading\n checkCardProps.value.bordered = props.bordered\n\n multiple.value = checkCardGroup.value.multiple\n\n const isChecked = checkCardGroup.value.multiple\n ? checkCardGroup.value.value?.includes(props.value)\n : checkCardGroup.value.value === props.value\n\n // check is false\n checkCardProps.value.checked = checkCardProps.value.loading\n ? false\n : isChecked\n checkCardProps.value.size = size.value\n }\n })\n\n const classString = computed(() => {\n const {\n disabled = false,\n loading: cardLoading,\n bordered,\n checked,\n } = checkCardProps.value\n const sizeCls = getSizeCls(size.value)\n\n return {\n [ns.m('loading')]: cardLoading,\n [ns.m(sizeCls)]: sizeCls,\n [ns.m('checked')]: checked,\n [ns.m('multiple')]: multiple.value,\n [ns.m('disabled')]: disabled,\n [ns.m('bordered')]: bordered,\n 'z-check-card': true,\n }\n })\n\n const renderCover = (cover: string | ((h: (type: string, children?: any) => VNode) => VNode)) => {\n return (\n <div class={ns.e('cover')}>\n {typeof cover === 'string'\n ? (\n <img src={cover} alt=\"check-card\" />\n )\n : (\n cover(h)\n )}\n </div>\n )\n }\n\n const handleClick = (e: MouseEvent) => {\n emit('click', e)\n checkCardGroup?.value.toggleOption?.({ value: props.value })\n stateChecked.value = !stateChecked.value\n emit('change', stateChecked.value)\n }\n\n return () => {\n const { disabled = false, loading: cardLoading } = checkCardProps.value\n const { avatar, title, description, cover, extra, style } = props\n\n const metaDom = () => {\n if (cardLoading)\n return <div class=\"px-4 py-3\"><ElSkeleton rows={2} animated /></div>\n\n if (cover)\n return renderCover(cover)\n\n const avatarDom = avatar\n ? (\n <div class={ns.e('avatar')}>\n {typeof avatar === 'string'\n ? (\n <ElAvatar size={48} shape=\"square\" src={avatar} />\n )\n : (\n avatar(h)\n )}\n </div>\n )\n : null\n\n const headerDom = (title || extra) && (\n <div class={ns.e('header')}>\n <div class={ns.e('title')}>\n {isFunction(title) ? title(h) : title}\n </div>\n {extra && (\n <div class={ns.e('extra')}>\n {isFunction(extra) ? extra(h) : extra}\n </div>\n )}\n </div>\n )\n\n const descriptionDom = description\n ? (\n <div class={ns.e('description')}>\n {isFunction(description) ? description(h) : description}\n </div>\n )\n : null\n\n const metaClass = computed(() => {\n return {\n [ns.e('avatar-header')]:\n avatarDom && headerDom && !descriptionDom,\n [ns.e('content')]: true,\n }\n })\n\n return (\n <div class={metaClass.value}>\n {avatarDom}\n {(headerDom || descriptionDom)\n ? (\n <div class={ns.e('detail')}>\n {headerDom}\n {descriptionDom}\n </div>\n )\n : null}\n </div>\n )\n }\n\n return (\n <div\n class={classString.value}\n style={style}\n onClick={(e) => {\n if (!cardLoading && !disabled)\n handleClick(e)\n }}\n >\n {metaDom()}\n </div>\n )\n }\n },\n})\n"],"names":["CheckCardItem","defineComponent","name","props","emits","emit","stateChecked","ref","checkCardProps","multiple","checkCardGroup","inject","ns","useNamespace","size","useFormSize","watchEffect","value","isChecked","_a","classString","computed","disabled","loading","checked","sizeCls","getSizeCls","cardLoading","bordered","createVNode","cover","style","renderCover","avatarDom","avatar","ElAvatar","h","headerDom","title","extra","isFunction","descriptionDom","description","metaClass","e"],"mappings":"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"}