reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 2 kB
Source Map (JSON)
{"version":3,"file":"EditablePreview.cjs","sources":["../../src/Editable/EditablePreview.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectEditableRootContext } from './EditableRoot.vue'\nimport { computed } from 'vue'\n\nexport interface EditablePreviewProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<EditablePreviewProps>(), { as: 'span' })\n\nconst context = injectEditableRootContext()\n\nconst placeholder = computed(() => context.placeholder.value?.preview)\n\nfunction handleFocus() {\n if (context.activationMode.value === 'focus')\n context.edit()\n}\nfunction handleDoubleClick() {\n if (context.activationMode.value === 'dblclick')\n context.edit()\n}\n</script>\n\n<template>\n <Primitive\n v-bind=\"props\"\n tabindex=\"0\"\n :data-placeholder-shown=\"context.isEditing.value ? undefined : ''\"\n :hidden=\"context.autoResize.value ? undefined : context.isEditing.value\"\n :style=\"context.autoResize.value ? {\n whiteSpace: 'pre',\n userSelect: 'none',\n gridArea: '1 / 1 / auto / auto',\n visibility: context.isEditing.value ? 'hidden' : undefined,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n } : undefined\"\n @focusin=\"handleFocus\"\n @dblclick=\"handleDoubleClick\"\n >\n <slot>\n {{ context.modelValue.value || placeholder }}\n </slot>\n </Primitive>\n</template>\n"],"names":["injectEditableRootContext","computed"],"mappings":";;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,UAAUA,+CAA0B,EAAA;AAE1C,IAAA,MAAM,cAAcC,YAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,OAAO,CAAA;AAErE,IAAA,SAAS,WAAc,GAAA;AACrB,MAAI,IAAA,OAAA,CAAQ,eAAe,KAAU,KAAA,OAAA;AACnC,QAAA,OAAA,CAAQ,IAAK,EAAA;AAAA;AAEjB,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAI,IAAA,OAAA,CAAQ,eAAe,KAAU,KAAA,UAAA;AACnC,QAAA,OAAA,CAAQ,IAAK,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}