@plexui/vue 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/components/Dialog/Dialog.js +6 -0
- package/dist/es/components/Dialog/Dialog.js.map +1 -1
- package/dist/es/components/Textarea/Textarea.js +3 -0
- package/dist/es/components/Textarea/Textarea.js.map +1 -1
- package/dist/types/components/Dialog/Dialog.d.ts +17 -0
- package/dist/types/components/Textarea/Textarea.d.ts +4 -0
- package/package.json +1 -1
|
@@ -88,6 +88,11 @@ export const DialogContent = defineComponent({
|
|
|
88
88
|
width: { type: [Number, String], default: 480 },
|
|
89
89
|
/** Renders the close button in the top corner. @default true */
|
|
90
90
|
showClose: { type: Boolean, default: true },
|
|
91
|
+
/**
|
|
92
|
+
* Rounder panel and a round close button, for dialogs that sit beside pill controls.
|
|
93
|
+
* @default false
|
|
94
|
+
*/
|
|
95
|
+
pill: { type: Boolean, default: false },
|
|
91
96
|
/**
|
|
92
97
|
* Where the panel sits: centered, near the top, a sheet along the bottom,
|
|
93
98
|
* a full-height panel on the start or end side, or the whole screen.
|
|
@@ -140,6 +145,7 @@ export const DialogContent = defineComponent({
|
|
|
140
145
|
"style": toCssVariables({ "dialog-width": props.width }),
|
|
141
146
|
"data-placement": props.placement === "center" ? undefined : props.placement,
|
|
142
147
|
"data-mobile-placement": props.mobilePlacement,
|
|
148
|
+
"data-pill": props.pill ? "" : undefined,
|
|
143
149
|
"onOpenAutoFocus": props.onOpenAutoFocus,
|
|
144
150
|
"onCloseAutoFocus": props.onCloseAutoFocus,
|
|
145
151
|
// Radix labels and describes the content only by mounted parts
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n cloneVNode,\n computed,\n createCommentVNode,\n defineComponent,\n h,\n inject,\n onBeforeUnmount,\n onMounted,\n provide,\n ref,\n watch,\n type ComputedRef,\n type HTMLAttributes,\n type InjectionKey,\n type PropType,\n type Ref,\n type VNode,\n} from \"vue\"\nimport {\n DialogContent as RekaDialogContent,\n DialogDescription as RekaDialogDescription,\n DialogOverlay as RekaDialogOverlay,\n DialogPortal as RekaDialogPortal,\n DialogRoot as RekaDialogRoot,\n DialogTitle as RekaDialogTitle,\n injectDialogRootContext,\n useForwardExpose,\n useId,\n} from \"reka-ui\"\nimport { useEscCloseStack } from \"../../composables/useEscCloseStack.js\"\nimport { preventDefaultHandler, toCssVariables } from \"../../lib/helpers.js\"\nimport { dismissableSurfaces, useDeferredPointerDownOutside } from \"../Popover/deferredPointerDownOutside.js\"\nimport { firstElementChild } from \"../Tooltip/slot.js\"\nimport { TransitionGroup } from \"../Transition/index.js\"\nimport s from \"@plexui/styles/components/Dialog/Dialog.module.css\"\n\n// Vue port of packages/ui/src/components/Dialog/Dialog.tsx on Reka UI\n// (the Vue lineage of Radix, same anatomy). Exports are flat (`Dialog`,\n// `DialogTrigger`, ...) because runtime-compiled templates cannot resolve\n// `Dialog.Trigger` from the `components` option.\n//\n// Where Reka differs from Radix (radix-ui 1.8), the port follows Radix:\n// - The content is labelled and described only while a DialogTitle /\n// DialogDescription is mounted.\n// - A press outside (the overlay) closes it on the click that follows\n// (../Popover/deferredPointerDownOutside.ts); the overlay is a dismiss\n// surface.\n// - The portal renders once mounted, so a closed dialog server-renders\n// nothing.\n\ntype DialogContextValue = {\n open: ComputedRef<boolean>\n setOpen: (nextState: boolean) => void\n /** Mounted DialogTitle / DialogDescription parts (Radix's title and description counts) */\n titleCount: Ref<number>\n descriptionCount: Ref<number>\n}\n\nconst DialogContextKey: InjectionKey<DialogContextValue> = Symbol(\"PlexUIDialog\")\n\nconst useDialogContext = () => {\n const context = inject(DialogContextKey, null)\n\n if (!context) {\n throw new Error(\"Dialog compound components must be used inside <Dialog>\")\n }\n\n return context\n}\n\n/** Modal dialog root. Uncontrolled by default; bind `v-model:open` to control it. */\nexport const Dialog = defineComponent({\n name: \"Dialog\",\n props: {\n open: { type: Boolean, default: undefined },\n },\n emits: {\n \"update:open\": (_open: boolean) => true,\n },\n setup(props, { slots, emit }) {\n const internalOpen = ref(false)\n const isOpen = computed(() => props.open ?? internalOpen.value)\n\n const setOpen = (nextState: boolean) => {\n emit(\"update:open\", nextState)\n internalOpen.value = nextState\n }\n\n provide(DialogContextKey, { open: isOpen, setOpen, titleCount: ref(0), descriptionCount: ref(0) })\n\n return () =>\n h(RekaDialogRoot, { \"open\": isOpen.value, \"onUpdate:open\": setOpen }, { default: () => slots.default?.() })\n },\n})\n\n// Trigger and Close render their child with the dialog wiring merged in,\n// like Reka's `asChild` parts, but run the dialog action after the child's\n// own click handlers and skip it when one called preventDefault() (Radix's\n// composeEventHandlers). Reka's parts run first and cannot be cancelled.\n// Attributes the child sets itself win, as with Radix and Reka slots. The\n// child is the first element, also through a forwarded `<slot />`.\nconst withDialogProps = (\n child: VNode | undefined,\n props: Record<string, unknown>,\n onClick: (event: Event) => void,\n ref?: (el: unknown) => void,\n) => {\n if (!child) return null\n const own = child.props ?? {}\n const extra = Object.fromEntries(Object.entries(props).filter(([key]) => !(key in own)))\n return cloneVNode(child, { ...extra, onClick, ...(ref ? { ref } : {}) }, true)\n}\n\nexport const DialogTrigger = defineComponent({\n name: \"DialogTrigger\",\n setup(_props, { slots }) {\n const rootContext = injectDialogRootContext()\n const { forwardRef, currentElement } = useForwardExpose()\n rootContext.contentId ||= useId(undefined, \"reka-dialog-content\")\n // Focus returns here when the dialog closes\n onMounted(() => {\n rootContext.triggerElement.value = currentElement.value\n })\n\n const onClick = (event: Event) => {\n if (!event.defaultPrevented) rootContext.onOpenToggle()\n }\n\n return () => {\n const open = rootContext.open.value\n return withDialogProps(\n firstElementChild(slots.default?.()),\n {\n \"type\": \"button\",\n \"aria-haspopup\": \"dialog\",\n \"aria-expanded\": open || false,\n \"aria-controls\": open ? rootContext.contentId : undefined,\n \"data-state\": open ? \"open\" : \"closed\",\n },\n onClick,\n forwardRef as (el: unknown) => void,\n )\n }\n },\n})\n\nconst CloseIcon = () =>\n h(\"svg\", { \"class\": s.CloseIcon, \"viewBox\": \"0 0 20 20\", \"width\": \"20\", \"height\": \"20\", \"aria-hidden\": \"true\" }, [\n h(\"path\", {\n fill: \"currentColor\",\n d: \"M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06\",\n }),\n ])\n\n/** Overlay and panel. `class` lands on the panel, like `className` in React. */\nexport const DialogContent = defineComponent({\n name: \"DialogContent\",\n inheritAttrs: false,\n props: {\n /** Panel width; numbers are pixels. @default 480 */\n width: { type: [Number, String] as PropType<number | string>, default: 480 },\n /** Renders the close button in the top corner. @default true */\n showClose: { type: Boolean, default: true },\n /**\n * Where the panel sits: centered, near the top, a sheet along the bottom,\n * a full-height panel on the start or end side, or the whole screen.\n * @default \"center\"\n */\n placement: { type: String as PropType<DialogPlacement>, default: \"center\" },\n /** Placement at 640px and below, such as a bottom sheet on phones. @default placement */\n mobilePlacement: String as PropType<Extract<DialogPlacement, \"center\" | \"bottom\" | \"fullscreen\">>,\n /** Called when focus moves into the dialog on open; `event.preventDefault()` keeps it for you to place. */\n onOpenAutoFocus: Function as PropType<(event: Event) => void>,\n /** Called when focus returns on close; `event.preventDefault()` keeps it elsewhere. */\n onCloseAutoFocus: Function as PropType<(event: Event) => void>,\n },\n setup(props, { slots, attrs }) {\n const { open, setOpen, titleCount, descriptionCount } = useDialogContext()\n // Radix's root makes the content id; Reka's trigger does, so a dialog\n // without one would render `id=\"\"`\n injectDialogRootContext().contentId ||= useId(undefined, \"reka-dialog-content\")\n\n // Escape goes through the shared stack, as in React, so the dialog\n // closes before overlays opened earlier (a forced-open Tooltip)\n useEscCloseStack(open, () => {\n setOpen(false)\n })\n\n // Radix's modal content: a Ctrl+click (macOS right click) does not dismiss\n const outsidePress = useDeferredPointerDownOutside((originalEvent) => {\n if (!originalEvent.ctrlKey) setOpen(false)\n })\n watch(open, (isOpen) => {\n if (!isOpen) outsidePress.reset()\n })\n\n let overlayElement: Element | undefined\n const setOverlayRef = (instance: unknown) => {\n const el = (instance as { $el?: unknown } | null)?.$el\n const element = el instanceof Element ? el : undefined\n if (element === overlayElement) return\n if (overlayElement) dismissableSurfaces.delete(overlayElement)\n overlayElement = element\n if (element) dismissableSurfaces.add(element)\n }\n\n const renderDialog = () =>\n h(\"div\", { key: \"dialog\" }, [\n h(RekaDialogOverlay, { class: s.Overlay, ref: setOverlayRef }),\n h(\n RekaDialogContent,\n {\n \"forceMount\": true,\n \"class\": s.Content,\n \"style\": toCssVariables({ \"dialog-width\": props.width }),\n \"data-placement\": props.placement === \"center\" ? undefined : props.placement,\n \"data-mobile-placement\": props.mobilePlacement,\n \"onOpenAutoFocus\": props.onOpenAutoFocus,\n \"onCloseAutoFocus\": props.onCloseAutoFocus,\n // Radix labels and describes the content only by mounted parts\n ...(titleCount.value > 0 ? {} : { \"aria-labelledby\": undefined }),\n ...(descriptionCount.value > 0 ? {} : { \"aria-describedby\": undefined }),\n \"onEscapeKeyDown\": preventDefaultHandler,\n \"onPointerDownOutside\": outsidePress.onPointerDownOutside,\n \"onFocusOutside\": outsidePress.onFocusOutside,\n },\n {\n default: () => [\n h(\"div\", { class: [s.Panel, attrs.class] }, [\n props.showClose\n ? h(DialogClose, null, {\n default: () => [\n h(\"button\", { \"type\": \"button\", \"class\": s.CloseButton, \"aria-label\": \"Close dialog\" }, [\n h(CloseIcon),\n ]),\n ],\n })\n : null,\n slots.default?.(),\n ]),\n ],\n },\n ),\n ])\n\n return () =>\n h(RekaDialogPortal, null, {\n default: () => [\n h(\n TransitionGroup,\n { class: s.Transition, enterDuration: 250, exitDuration: 150, disableAnimations: true },\n // `open && <div>` in React: closed still renders the empty wrapper\n { default: () => [open.value ? renderDialog() : createCommentVNode()] },\n ),\n ],\n })\n },\n})\n\nexport const DialogHeader = defineComponent({\n name: \"DialogHeader\",\n setup(_props, { slots }) {\n return () => h(\"div\", { class: s.Header }, slots.default?.())\n },\n})\n\n/** The scrolling part between DialogHeader and DialogFooter: with it, only the body scrolls. */\nexport const DialogBody = defineComponent({\n name: \"DialogBody\",\n inheritAttrs: false,\n setup(_props, { slots, attrs }) {\n return () => h(\"div\", { class: [s.Body, attrs.class] }, slots.default?.())\n },\n})\n\nexport const DialogFooter = defineComponent({\n name: \"DialogFooter\",\n setup(_props, { slots }) {\n return () => h(\"div\", { class: s.Footer }, slots.default?.())\n },\n})\n\n/** Counts a mounted part, as Radix's title and description counts do. */\nconst useMountedCount = (count: Ref<number>) => {\n onMounted(() => {\n count.value++\n })\n onBeforeUnmount(() => {\n count.value--\n })\n}\n\nexport const DialogTitle = defineComponent({\n name: \"DialogTitle\",\n setup(_props, { slots }) {\n useMountedCount(useDialogContext().titleCount)\n return () => h(RekaDialogTitle, { class: s.Title }, { default: () => slots.default?.() })\n },\n})\n\nexport const DialogDescription = defineComponent({\n name: \"DialogDescription\",\n setup(_props, { slots }) {\n useMountedCount(useDialogContext().descriptionCount)\n return () => h(RekaDialogDescription, { class: s.Description }, { default: () => slots.default?.() })\n },\n})\n\nexport const DialogClose = defineComponent({\n name: \"DialogClose\",\n setup(_props, { slots }) {\n const rootContext = injectDialogRootContext()\n const onClick = (event: Event) => {\n if (!event.defaultPrevented) rootContext.onOpenChange(false)\n }\n return () => withDialogProps(firstElementChild(slots.default?.()), { type: \"button\" }, onClick)\n },\n})\n\nexport type DialogProps = InstanceType<typeof Dialog>[\"$props\"]\n\nexport type DialogPlacement = \"center\" | \"top\" | \"bottom\" | \"start\" | \"end\" | \"fullscreen\"\n\n/** DialogContent props; `class` lands on the panel, like `className` in React. */\nexport type DialogContentProps = InstanceType<typeof DialogContent>[\"$props\"] & { class?: HTMLAttributes[\"class\"] }\n"]}
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n cloneVNode,\n computed,\n createCommentVNode,\n defineComponent,\n h,\n inject,\n onBeforeUnmount,\n onMounted,\n provide,\n ref,\n watch,\n type ComputedRef,\n type HTMLAttributes,\n type InjectionKey,\n type PropType,\n type Ref,\n type VNode,\n} from \"vue\"\nimport {\n DialogContent as RekaDialogContent,\n DialogDescription as RekaDialogDescription,\n DialogOverlay as RekaDialogOverlay,\n DialogPortal as RekaDialogPortal,\n DialogRoot as RekaDialogRoot,\n DialogTitle as RekaDialogTitle,\n injectDialogRootContext,\n useForwardExpose,\n useId,\n} from \"reka-ui\"\nimport { useEscCloseStack } from \"../../composables/useEscCloseStack.js\"\nimport { preventDefaultHandler, toCssVariables } from \"../../lib/helpers.js\"\nimport { dismissableSurfaces, useDeferredPointerDownOutside } from \"../Popover/deferredPointerDownOutside.js\"\nimport { firstElementChild } from \"../Tooltip/slot.js\"\nimport { TransitionGroup } from \"../Transition/index.js\"\nimport s from \"@plexui/styles/components/Dialog/Dialog.module.css\"\n\n// Vue port of packages/ui/src/components/Dialog/Dialog.tsx on Reka UI\n// (the Vue lineage of Radix, same anatomy). Exports are flat (`Dialog`,\n// `DialogTrigger`, ...) because runtime-compiled templates cannot resolve\n// `Dialog.Trigger` from the `components` option.\n//\n// Where Reka differs from Radix (radix-ui 1.8), the port follows Radix:\n// - The content is labelled and described only while a DialogTitle /\n// DialogDescription is mounted.\n// - A press outside (the overlay) closes it on the click that follows\n// (../Popover/deferredPointerDownOutside.ts); the overlay is a dismiss\n// surface.\n// - The portal renders once mounted, so a closed dialog server-renders\n// nothing.\n\ntype DialogContextValue = {\n open: ComputedRef<boolean>\n setOpen: (nextState: boolean) => void\n /** Mounted DialogTitle / DialogDescription parts (Radix's title and description counts) */\n titleCount: Ref<number>\n descriptionCount: Ref<number>\n}\n\nconst DialogContextKey: InjectionKey<DialogContextValue> = Symbol(\"PlexUIDialog\")\n\nconst useDialogContext = () => {\n const context = inject(DialogContextKey, null)\n\n if (!context) {\n throw new Error(\"Dialog compound components must be used inside <Dialog>\")\n }\n\n return context\n}\n\n/** Modal dialog root. Uncontrolled by default; bind `v-model:open` to control it. */\nexport const Dialog = defineComponent({\n name: \"Dialog\",\n props: {\n open: { type: Boolean, default: undefined },\n },\n emits: {\n \"update:open\": (_open: boolean) => true,\n },\n setup(props, { slots, emit }) {\n const internalOpen = ref(false)\n const isOpen = computed(() => props.open ?? internalOpen.value)\n\n const setOpen = (nextState: boolean) => {\n emit(\"update:open\", nextState)\n internalOpen.value = nextState\n }\n\n provide(DialogContextKey, { open: isOpen, setOpen, titleCount: ref(0), descriptionCount: ref(0) })\n\n return () =>\n h(RekaDialogRoot, { \"open\": isOpen.value, \"onUpdate:open\": setOpen }, { default: () => slots.default?.() })\n },\n})\n\n// Trigger and Close render their child with the dialog wiring merged in,\n// like Reka's `asChild` parts, but run the dialog action after the child's\n// own click handlers and skip it when one called preventDefault() (Radix's\n// composeEventHandlers). Reka's parts run first and cannot be cancelled.\n// Attributes the child sets itself win, as with Radix and Reka slots. The\n// child is the first element, also through a forwarded `<slot />`.\nconst withDialogProps = (\n child: VNode | undefined,\n props: Record<string, unknown>,\n onClick: (event: Event) => void,\n ref?: (el: unknown) => void,\n) => {\n if (!child) return null\n const own = child.props ?? {}\n const extra = Object.fromEntries(Object.entries(props).filter(([key]) => !(key in own)))\n return cloneVNode(child, { ...extra, onClick, ...(ref ? { ref } : {}) }, true)\n}\n\nexport const DialogTrigger = defineComponent({\n name: \"DialogTrigger\",\n setup(_props, { slots }) {\n const rootContext = injectDialogRootContext()\n const { forwardRef, currentElement } = useForwardExpose()\n rootContext.contentId ||= useId(undefined, \"reka-dialog-content\")\n // Focus returns here when the dialog closes\n onMounted(() => {\n rootContext.triggerElement.value = currentElement.value\n })\n\n const onClick = (event: Event) => {\n if (!event.defaultPrevented) rootContext.onOpenToggle()\n }\n\n return () => {\n const open = rootContext.open.value\n return withDialogProps(\n firstElementChild(slots.default?.()),\n {\n \"type\": \"button\",\n \"aria-haspopup\": \"dialog\",\n \"aria-expanded\": open || false,\n \"aria-controls\": open ? rootContext.contentId : undefined,\n \"data-state\": open ? \"open\" : \"closed\",\n },\n onClick,\n forwardRef as (el: unknown) => void,\n )\n }\n },\n})\n\nconst CloseIcon = () =>\n h(\"svg\", { \"class\": s.CloseIcon, \"viewBox\": \"0 0 20 20\", \"width\": \"20\", \"height\": \"20\", \"aria-hidden\": \"true\" }, [\n h(\"path\", {\n fill: \"currentColor\",\n d: \"M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06\",\n }),\n ])\n\n/** Overlay and panel. `class` lands on the panel, like `className` in React. */\nexport const DialogContent = defineComponent({\n name: \"DialogContent\",\n inheritAttrs: false,\n props: {\n /** Panel width; numbers are pixels. @default 480 */\n width: { type: [Number, String] as PropType<number | string>, default: 480 },\n /** Renders the close button in the top corner. @default true */\n showClose: { type: Boolean, default: true },\n /**\n * Rounder panel and a round close button, for dialogs that sit beside pill controls.\n * @default false\n */\n pill: { type: Boolean, default: false },\n /**\n * Where the panel sits: centered, near the top, a sheet along the bottom,\n * a full-height panel on the start or end side, or the whole screen.\n * @default \"center\"\n */\n placement: { type: String as PropType<DialogPlacement>, default: \"center\" },\n /** Placement at 640px and below, such as a bottom sheet on phones. @default placement */\n mobilePlacement: String as PropType<Extract<DialogPlacement, \"center\" | \"bottom\" | \"fullscreen\">>,\n /** Called when focus moves into the dialog on open; `event.preventDefault()` keeps it for you to place. */\n onOpenAutoFocus: Function as PropType<(event: Event) => void>,\n /** Called when focus returns on close; `event.preventDefault()` keeps it elsewhere. */\n onCloseAutoFocus: Function as PropType<(event: Event) => void>,\n },\n setup(props, { slots, attrs }) {\n const { open, setOpen, titleCount, descriptionCount } = useDialogContext()\n // Radix's root makes the content id; Reka's trigger does, so a dialog\n // without one would render `id=\"\"`\n injectDialogRootContext().contentId ||= useId(undefined, \"reka-dialog-content\")\n\n // Escape goes through the shared stack, as in React, so the dialog\n // closes before overlays opened earlier (a forced-open Tooltip)\n useEscCloseStack(open, () => {\n setOpen(false)\n })\n\n // Radix's modal content: a Ctrl+click (macOS right click) does not dismiss\n const outsidePress = useDeferredPointerDownOutside((originalEvent) => {\n if (!originalEvent.ctrlKey) setOpen(false)\n })\n watch(open, (isOpen) => {\n if (!isOpen) outsidePress.reset()\n })\n\n let overlayElement: Element | undefined\n const setOverlayRef = (instance: unknown) => {\n const el = (instance as { $el?: unknown } | null)?.$el\n const element = el instanceof Element ? el : undefined\n if (element === overlayElement) return\n if (overlayElement) dismissableSurfaces.delete(overlayElement)\n overlayElement = element\n if (element) dismissableSurfaces.add(element)\n }\n\n const renderDialog = () =>\n h(\"div\", { key: \"dialog\" }, [\n h(RekaDialogOverlay, { class: s.Overlay, ref: setOverlayRef }),\n h(\n RekaDialogContent,\n {\n \"forceMount\": true,\n \"class\": s.Content,\n \"style\": toCssVariables({ \"dialog-width\": props.width }),\n \"data-placement\": props.placement === \"center\" ? undefined : props.placement,\n \"data-mobile-placement\": props.mobilePlacement,\n \"data-pill\": props.pill ? \"\" : undefined,\n \"onOpenAutoFocus\": props.onOpenAutoFocus,\n \"onCloseAutoFocus\": props.onCloseAutoFocus,\n // Radix labels and describes the content only by mounted parts\n ...(titleCount.value > 0 ? {} : { \"aria-labelledby\": undefined }),\n ...(descriptionCount.value > 0 ? {} : { \"aria-describedby\": undefined }),\n \"onEscapeKeyDown\": preventDefaultHandler,\n \"onPointerDownOutside\": outsidePress.onPointerDownOutside,\n \"onFocusOutside\": outsidePress.onFocusOutside,\n },\n {\n default: () => [\n h(\"div\", { class: [s.Panel, attrs.class] }, [\n props.showClose\n ? h(DialogClose, null, {\n default: () => [\n h(\"button\", { \"type\": \"button\", \"class\": s.CloseButton, \"aria-label\": \"Close dialog\" }, [\n h(CloseIcon),\n ]),\n ],\n })\n : null,\n slots.default?.(),\n ]),\n ],\n },\n ),\n ])\n\n return () =>\n h(RekaDialogPortal, null, {\n default: () => [\n h(\n TransitionGroup,\n { class: s.Transition, enterDuration: 250, exitDuration: 150, disableAnimations: true },\n // `open && <div>` in React: closed still renders the empty wrapper\n { default: () => [open.value ? renderDialog() : createCommentVNode()] },\n ),\n ],\n })\n },\n})\n\nexport const DialogHeader = defineComponent({\n name: \"DialogHeader\",\n setup(_props, { slots }) {\n return () => h(\"div\", { class: s.Header }, slots.default?.())\n },\n})\n\n/** The scrolling part between DialogHeader and DialogFooter: with it, only the body scrolls. */\nexport const DialogBody = defineComponent({\n name: \"DialogBody\",\n inheritAttrs: false,\n setup(_props, { slots, attrs }) {\n return () => h(\"div\", { class: [s.Body, attrs.class] }, slots.default?.())\n },\n})\n\nexport const DialogFooter = defineComponent({\n name: \"DialogFooter\",\n setup(_props, { slots }) {\n return () => h(\"div\", { class: s.Footer }, slots.default?.())\n },\n})\n\n/** Counts a mounted part, as Radix's title and description counts do. */\nconst useMountedCount = (count: Ref<number>) => {\n onMounted(() => {\n count.value++\n })\n onBeforeUnmount(() => {\n count.value--\n })\n}\n\nexport const DialogTitle = defineComponent({\n name: \"DialogTitle\",\n setup(_props, { slots }) {\n useMountedCount(useDialogContext().titleCount)\n return () => h(RekaDialogTitle, { class: s.Title }, { default: () => slots.default?.() })\n },\n})\n\nexport const DialogDescription = defineComponent({\n name: \"DialogDescription\",\n setup(_props, { slots }) {\n useMountedCount(useDialogContext().descriptionCount)\n return () => h(RekaDialogDescription, { class: s.Description }, { default: () => slots.default?.() })\n },\n})\n\nexport const DialogClose = defineComponent({\n name: \"DialogClose\",\n setup(_props, { slots }) {\n const rootContext = injectDialogRootContext()\n const onClick = (event: Event) => {\n if (!event.defaultPrevented) rootContext.onOpenChange(false)\n }\n return () => withDialogProps(firstElementChild(slots.default?.()), { type: \"button\" }, onClick)\n },\n})\n\nexport type DialogProps = InstanceType<typeof Dialog>[\"$props\"]\n\nexport type DialogPlacement = \"center\" | \"top\" | \"bottom\" | \"start\" | \"end\" | \"fullscreen\"\n\n/** DialogContent props; `class` lands on the panel, like `className` in React. */\nexport type DialogContentProps = InstanceType<typeof DialogContent>[\"$props\"] & { class?: HTMLAttributes[\"class\"] }\n"]}
|
|
@@ -16,6 +16,8 @@ const TextareaComponent = defineComponent({
|
|
|
16
16
|
variant: { type: String, default: "outline" },
|
|
17
17
|
/** Controls the size of the textarea. @default "md" */
|
|
18
18
|
size: { type: String, default: "md" },
|
|
19
|
+
/** Applies a negative margin using the current gutter to optically align the text with surrounding content. */
|
|
20
|
+
opticallyAlign: String,
|
|
19
21
|
/** Controls gutter on the edges of the textarea, defaults to value from `size`. */
|
|
20
22
|
gutterSize: String,
|
|
21
23
|
/** Disables the textarea visually and from interactions. @default false */
|
|
@@ -132,6 +134,7 @@ const TextareaComponent = defineComponent({
|
|
|
132
134
|
"data-variant": variant,
|
|
133
135
|
"data-size": size,
|
|
134
136
|
"data-gutter-size": gutterSize,
|
|
137
|
+
"data-optically-align": props.opticallyAlign,
|
|
135
138
|
"data-focused": String(focused.value),
|
|
136
139
|
"data-disabled": disabled ? "" : undefined,
|
|
137
140
|
"data-readonly": readOnly ? "" : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n computed,\n defineComponent,\n h,\n nextTick,\n onMounted,\n ref,\n useId,\n watch,\n withDirectives,\n type PropType,\n type TextareaHTMLAttributes,\n} from \"vue\"\nimport type { ControlSize, Sizes, Variants } from \"@plexui/styles/types\"\nimport { vServerText } from \"../../lib/defaultValue.js\"\nimport { toCssVariables } from \"../../lib/helpers.js\"\nimport s from \"@plexui/styles/components/Textarea/Textarea.module.css\"\n\n// Vue port of packages/ui/src/components/Textarea/Textarea.tsx. Props,\n// defaults and rendered DOM match React 1:1 (checked by the parity tests).\n//\n// - `class` goes to the container; every other attribute and listener\n// (`style`, `placeholder`, `@input`, `@change`, ...) goes to the <textarea>,\n// like React's `className` and `...restProps`.\n// - Value: `value` + `update:value` mirror React's `value` prop\n// (`v-model:value`) and fire on every input. Uncontrolled use takes\n// `default-value`. Like a React controlled textarea, a `value` the parent\n// does not update after input is put back.\n// - As in React, the textarea's text content (its `defaultValue`) follows\n// the controlled value, or `default-value` when uncontrolled. It is set\n// through the `textContent` property, which Vue's server renderer prints\n// as the element's content, so `vServerText` can adjust it at SSR.\n\ntype ListenerValue = ((event: Event) => void) | Array<(event: Event) => void> | undefined\n\nconst invoke = (handler: unknown, event: Event) => {\n for (const fn of ([] as unknown[]).concat(handler ?? [])) {\n if (typeof fn === \"function\") fn(event)\n }\n}\n\nconst TextareaComponent = defineComponent({\n name: \"Textarea\",\n inheritAttrs: false,\n props: {\n /** Visual style of the textarea. @default \"outline\" */\n variant: { type: String as PropType<Variants<\"outline\" | \"soft\">>, default: \"outline\" },\n /** Controls the size of the textarea. @default \"md\" */\n size: { type: String as PropType<ControlSize>, default: \"md\" },\n /** Controls gutter on the edges of the textarea, defaults to value from `size`. */\n gutterSize: String as PropType<Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">>,\n /** Disables the textarea visually and from interactions. @default false */\n disabled: { type: Boolean, default: false },\n /** Makes the textarea read-only. @default false */\n readOnly: { type: Boolean, default: false },\n /** Native spelling of `readOnly` (`<Textarea readonly />`). @default false */\n readonly: { type: Boolean, default: false },\n /** Mark the textarea as invalid. @default false */\n invalid: { type: Boolean, default: false },\n /** Allow autofill extensions to appear in the textarea. @default `true` when `name` is set, else `false` */\n allowAutofillExtensions: { type: Boolean, default: undefined },\n /** Select all contents of the textarea when mounted (and whenever it turns `true`). @default false */\n autoSelect: { type: Boolean, default: undefined },\n /** Default number of rows to display. @default 3 */\n rows: { type: Number, default: 3 },\n /** Automatically adjust the height of the textarea based on its contents. @default false */\n autoResize: { type: Boolean, default: undefined },\n /** Maximum number of rows that can be displayed when autoResize is enabled. @default Math.max(rows, 10) */\n maxRows: Number,\n id: String,\n name: String,\n /** Controlled value (`v-model:value`) */\n value: { type: [String, Number] as PropType<string | number>, default: undefined },\n /** Initial value when uncontrolled */\n defaultValue: { type: [String, Number] as PropType<string | number>, default: undefined },\n /** The textarea's `autocomplete` attribute */\n autoComplete: String,\n },\n emits: {\n \"update:value\": (_value: string) => true,\n /** Fired when the browser autofills the textarea */\n \"autofill\": () => true,\n },\n setup(props, { attrs, emit, expose }) {\n const textAreaRef = ref<HTMLTextAreaElement | null>(null)\n // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n // Allow user to override this for connecting to labels.\n const onePasswordPreventionId = `search-ui-input-${useId()}`\n const focused = ref(false)\n\n const computedMaxRows = computed(() =>\n props.autoResize ? Math.max(props.maxRows ?? 10, props.rows) : props.rows,\n )\n const controlledValue = () => props.value\n\n const runAutoSelect = () => {\n if (props.autoSelect) {\n textAreaRef.value?.select()\n }\n }\n\n const autosizeTextarea = () => {\n const textarea = textAreaRef.value\n if (!props.autoResize || !textarea || computedMaxRows.value === undefined) return\n textarea.style.height = \"0px\"\n const scrollHeight = textarea.scrollHeight\n textarea.style.height = scrollHeight + \"px\"\n }\n\n // The textarea's value is set imperatively, like React DOM does: a `value`\n // prop would make Vue mirror it into a `value` attribute, which React\n // never renders. Puts the controlled value back when it differs.\n const syncValue = () => {\n const textarea = textAreaRef.value\n const value = controlledValue()\n if (!textarea || value == null) return\n const nextValue = String(value)\n if (textarea.value !== nextValue) textarea.value = nextValue\n }\n\n // React runs these effects after mount and when their dependencies change\n onMounted(() => {\n const textarea = textAreaRef.value\n // React's initTextarea: the initial text becomes the (dirty) value\n const initialValue = textarea?.textContent ?? \"\"\n if (textarea && initialValue !== \"\") textarea.value = initialValue\n runAutoSelect()\n autosizeTextarea()\n })\n // React DOM writes a new value while committing, before any effect runs,\n // so the selection covers the value that arrives with `autoSelect`\n watch(\n () => props.autoSelect,\n () => {\n syncValue()\n runAutoSelect()\n },\n { flush: \"post\" },\n )\n // Resize if value changes outside of user input - e.g. form reset\n watch(\n () => [controlledValue(), props.rows, props.autoResize, computedMaxRows.value],\n () => {\n syncValue()\n autosizeTextarea()\n },\n { flush: \"post\" },\n )\n\n const handleInput = (evt: Event) => {\n const next = (evt.target as HTMLTextAreaElement).value\n emit(\"update:value\", next)\n autosizeTextarea()\n // A controlled value the parent did not update wins over the typed text,\n // as in React\n void nextTick(syncValue)\n }\n\n expose({\n /** The rendered <textarea> element */\n textarea: textAreaRef,\n focus: () => textAreaRef.value?.focus(),\n })\n\n return () => {\n const {\n class: className,\n onInput,\n onFocus,\n onBlur,\n onAnimationstart,\n ...restAttrs\n } = attrs as Record<string, unknown>\n\n const { variant, size, gutterSize, disabled, invalid, rows } = props\n const readOnly = props.readOnly || props.readonly\n // Default to `true` when presence of `name`\n const allowAutofillExtensions = props.allowAutofillExtensions ?? !!props.name\n const value = controlledValue()\n // React keeps the textarea's defaultValue (its text content) in sync with\n // the controlled value, else with `defaultValue`\n const textContent = String(value ?? props.defaultValue ?? \"\")\n\n return h(\n \"div\",\n {\n \"class\": [s.Container, className],\n \"data-variant\": variant,\n \"data-size\": size,\n \"data-gutter-size\": gutterSize,\n \"data-focused\": String(focused.value),\n \"data-disabled\": disabled ? \"\" : undefined,\n \"data-readonly\": readOnly ? \"\" : undefined,\n \"data-invalid\": invalid ? \"\" : undefined,\n \"style\": toCssVariables({\n \"textarea-min-rows\": `${rows}`,\n \"textarea-max-rows\": `${computedMaxRows.value}`,\n }),\n },\n [\n withDirectives(\n h(\"textarea\", {\n ...restAttrs,\n \"onInput\": (evt: Event) => {\n invoke(onInput as ListenerValue, evt)\n handleInput(evt)\n },\n \"ref\": textAreaRef,\n \"id\": props.id || (allowAutofillExtensions ? undefined : onePasswordPreventionId),\n \"class\": s.Textarea,\n \"name\": props.name,\n \"autocomplete\": props.autoComplete ?? restAttrs.autocomplete,\n // Expose the visual invalid state to assistive tech; an explicit aria-invalid wins\n \"aria-invalid\": restAttrs[\"aria-invalid\"] ?? (invalid || undefined),\n \"readonly\": readOnly,\n \"disabled\": disabled,\n \"rows\": rows,\n \"onFocus\": (evt: Event) => {\n focused.value = true\n invoke(onFocus as ListenerValue, evt)\n },\n \"onBlur\": (evt: Event) => {\n focused.value = false\n invoke(onBlur as ListenerValue, evt)\n },\n \"onAnimationstart\": (evt: AnimationEvent) => {\n invoke(onAnimationstart as ListenerValue, evt)\n if (evt.animationName === \"native-autofill-in\") {\n emit(\"autofill\")\n }\n },\n // Prevent LastPass and 1Password from appearing\n \"data-lpignore\": allowAutofillExtensions ? undefined : true,\n \"data-1p-ignore\": allowAutofillExtensions ? undefined : true,\n \"textContent\": textContent,\n }),\n [[vServerText, textContent]],\n ),\n ],\n )\n }\n },\n})\n\ntype TextareaOwnProps = InstanceType<typeof TextareaComponent>[\"$props\"]\n\n/** Textarea props plus the native <textarea> attributes that fall through to it, as in React. */\nexport type TextareaProps = TextareaOwnProps & Omit<TextareaHTMLAttributes, keyof TextareaOwnProps | \"readonly\">\n\nexport const Textarea = TextareaComponent as typeof TextareaComponent & { new (): { $props: TextareaProps } }\n"]}
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n computed,\n defineComponent,\n h,\n nextTick,\n onMounted,\n ref,\n useId,\n watch,\n withDirectives,\n type PropType,\n type TextareaHTMLAttributes,\n} from \"vue\"\nimport type { ControlSize, Sizes, Variants } from \"@plexui/styles/types\"\nimport { vServerText } from \"../../lib/defaultValue.js\"\nimport { toCssVariables } from \"../../lib/helpers.js\"\nimport s from \"@plexui/styles/components/Textarea/Textarea.module.css\"\n\n// Vue port of packages/ui/src/components/Textarea/Textarea.tsx. Props,\n// defaults and rendered DOM match React 1:1 (checked by the parity tests).\n//\n// - `class` goes to the container; every other attribute and listener\n// (`style`, `placeholder`, `@input`, `@change`, ...) goes to the <textarea>,\n// like React's `className` and `...restProps`.\n// - Value: `value` + `update:value` mirror React's `value` prop\n// (`v-model:value`) and fire on every input. Uncontrolled use takes\n// `default-value`. Like a React controlled textarea, a `value` the parent\n// does not update after input is put back.\n// - As in React, the textarea's text content (its `defaultValue`) follows\n// the controlled value, or `default-value` when uncontrolled. It is set\n// through the `textContent` property, which Vue's server renderer prints\n// as the element's content, so `vServerText` can adjust it at SSR.\n\ntype ListenerValue = ((event: Event) => void) | Array<(event: Event) => void> | undefined\n\nconst invoke = (handler: unknown, event: Event) => {\n for (const fn of ([] as unknown[]).concat(handler ?? [])) {\n if (typeof fn === \"function\") fn(event)\n }\n}\n\nconst TextareaComponent = defineComponent({\n name: \"Textarea\",\n inheritAttrs: false,\n props: {\n /** Visual style of the textarea. @default \"outline\" */\n variant: { type: String as PropType<Variants<\"outline\" | \"soft\">>, default: \"outline\" },\n /** Controls the size of the textarea. @default \"md\" */\n size: { type: String as PropType<ControlSize>, default: \"md\" },\n /** Applies a negative margin using the current gutter to optically align the text with surrounding content. */\n opticallyAlign: String as PropType<\"start\" | \"end\">,\n /** Controls gutter on the edges of the textarea, defaults to value from `size`. */\n gutterSize: String as PropType<Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">>,\n /** Disables the textarea visually and from interactions. @default false */\n disabled: { type: Boolean, default: false },\n /** Makes the textarea read-only. @default false */\n readOnly: { type: Boolean, default: false },\n /** Native spelling of `readOnly` (`<Textarea readonly />`). @default false */\n readonly: { type: Boolean, default: false },\n /** Mark the textarea as invalid. @default false */\n invalid: { type: Boolean, default: false },\n /** Allow autofill extensions to appear in the textarea. @default `true` when `name` is set, else `false` */\n allowAutofillExtensions: { type: Boolean, default: undefined },\n /** Select all contents of the textarea when mounted (and whenever it turns `true`). @default false */\n autoSelect: { type: Boolean, default: undefined },\n /** Default number of rows to display. @default 3 */\n rows: { type: Number, default: 3 },\n /** Automatically adjust the height of the textarea based on its contents. @default false */\n autoResize: { type: Boolean, default: undefined },\n /** Maximum number of rows that can be displayed when autoResize is enabled. @default Math.max(rows, 10) */\n maxRows: Number,\n id: String,\n name: String,\n /** Controlled value (`v-model:value`) */\n value: { type: [String, Number] as PropType<string | number>, default: undefined },\n /** Initial value when uncontrolled */\n defaultValue: { type: [String, Number] as PropType<string | number>, default: undefined },\n /** The textarea's `autocomplete` attribute */\n autoComplete: String,\n },\n emits: {\n \"update:value\": (_value: string) => true,\n /** Fired when the browser autofills the textarea */\n \"autofill\": () => true,\n },\n setup(props, { attrs, emit, expose }) {\n const textAreaRef = ref<HTMLTextAreaElement | null>(null)\n // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n // Allow user to override this for connecting to labels.\n const onePasswordPreventionId = `search-ui-input-${useId()}`\n const focused = ref(false)\n\n const computedMaxRows = computed(() =>\n props.autoResize ? Math.max(props.maxRows ?? 10, props.rows) : props.rows,\n )\n const controlledValue = () => props.value\n\n const runAutoSelect = () => {\n if (props.autoSelect) {\n textAreaRef.value?.select()\n }\n }\n\n const autosizeTextarea = () => {\n const textarea = textAreaRef.value\n if (!props.autoResize || !textarea || computedMaxRows.value === undefined) return\n textarea.style.height = \"0px\"\n const scrollHeight = textarea.scrollHeight\n textarea.style.height = scrollHeight + \"px\"\n }\n\n // The textarea's value is set imperatively, like React DOM does: a `value`\n // prop would make Vue mirror it into a `value` attribute, which React\n // never renders. Puts the controlled value back when it differs.\n const syncValue = () => {\n const textarea = textAreaRef.value\n const value = controlledValue()\n if (!textarea || value == null) return\n const nextValue = String(value)\n if (textarea.value !== nextValue) textarea.value = nextValue\n }\n\n // React runs these effects after mount and when their dependencies change\n onMounted(() => {\n const textarea = textAreaRef.value\n // React's initTextarea: the initial text becomes the (dirty) value\n const initialValue = textarea?.textContent ?? \"\"\n if (textarea && initialValue !== \"\") textarea.value = initialValue\n runAutoSelect()\n autosizeTextarea()\n })\n // React DOM writes a new value while committing, before any effect runs,\n // so the selection covers the value that arrives with `autoSelect`\n watch(\n () => props.autoSelect,\n () => {\n syncValue()\n runAutoSelect()\n },\n { flush: \"post\" },\n )\n // Resize if value changes outside of user input - e.g. form reset\n watch(\n () => [controlledValue(), props.rows, props.autoResize, computedMaxRows.value],\n () => {\n syncValue()\n autosizeTextarea()\n },\n { flush: \"post\" },\n )\n\n const handleInput = (evt: Event) => {\n const next = (evt.target as HTMLTextAreaElement).value\n emit(\"update:value\", next)\n autosizeTextarea()\n // A controlled value the parent did not update wins over the typed text,\n // as in React\n void nextTick(syncValue)\n }\n\n expose({\n /** The rendered <textarea> element */\n textarea: textAreaRef,\n focus: () => textAreaRef.value?.focus(),\n })\n\n return () => {\n const {\n class: className,\n onInput,\n onFocus,\n onBlur,\n onAnimationstart,\n ...restAttrs\n } = attrs as Record<string, unknown>\n\n const { variant, size, gutterSize, disabled, invalid, rows } = props\n const readOnly = props.readOnly || props.readonly\n // Default to `true` when presence of `name`\n const allowAutofillExtensions = props.allowAutofillExtensions ?? !!props.name\n const value = controlledValue()\n // React keeps the textarea's defaultValue (its text content) in sync with\n // the controlled value, else with `defaultValue`\n const textContent = String(value ?? props.defaultValue ?? \"\")\n\n return h(\n \"div\",\n {\n \"class\": [s.Container, className],\n \"data-variant\": variant,\n \"data-size\": size,\n \"data-gutter-size\": gutterSize,\n \"data-optically-align\": props.opticallyAlign,\n \"data-focused\": String(focused.value),\n \"data-disabled\": disabled ? \"\" : undefined,\n \"data-readonly\": readOnly ? \"\" : undefined,\n \"data-invalid\": invalid ? \"\" : undefined,\n \"style\": toCssVariables({\n \"textarea-min-rows\": `${rows}`,\n \"textarea-max-rows\": `${computedMaxRows.value}`,\n }),\n },\n [\n withDirectives(\n h(\"textarea\", {\n ...restAttrs,\n \"onInput\": (evt: Event) => {\n invoke(onInput as ListenerValue, evt)\n handleInput(evt)\n },\n \"ref\": textAreaRef,\n \"id\": props.id || (allowAutofillExtensions ? undefined : onePasswordPreventionId),\n \"class\": s.Textarea,\n \"name\": props.name,\n \"autocomplete\": props.autoComplete ?? restAttrs.autocomplete,\n // Expose the visual invalid state to assistive tech; an explicit aria-invalid wins\n \"aria-invalid\": restAttrs[\"aria-invalid\"] ?? (invalid || undefined),\n \"readonly\": readOnly,\n \"disabled\": disabled,\n \"rows\": rows,\n \"onFocus\": (evt: Event) => {\n focused.value = true\n invoke(onFocus as ListenerValue, evt)\n },\n \"onBlur\": (evt: Event) => {\n focused.value = false\n invoke(onBlur as ListenerValue, evt)\n },\n \"onAnimationstart\": (evt: AnimationEvent) => {\n invoke(onAnimationstart as ListenerValue, evt)\n if (evt.animationName === \"native-autofill-in\") {\n emit(\"autofill\")\n }\n },\n // Prevent LastPass and 1Password from appearing\n \"data-lpignore\": allowAutofillExtensions ? undefined : true,\n \"data-1p-ignore\": allowAutofillExtensions ? undefined : true,\n \"textContent\": textContent,\n }),\n [[vServerText, textContent]],\n ),\n ],\n )\n }\n },\n})\n\ntype TextareaOwnProps = InstanceType<typeof TextareaComponent>[\"$props\"]\n\n/** Textarea props plus the native <textarea> attributes that fall through to it, as in React. */\nexport type TextareaProps = TextareaOwnProps & Omit<TextareaHTMLAttributes, keyof TextareaOwnProps | \"readonly\">\n\nexport const Textarea = TextareaComponent as typeof TextareaComponent & { new (): { $props: TextareaProps } }\n"]}
|
|
@@ -34,6 +34,14 @@ export declare const DialogContent: import("vue").DefineComponent<import("vue").
|
|
|
34
34
|
type: BooleanConstructor;
|
|
35
35
|
default: boolean;
|
|
36
36
|
};
|
|
37
|
+
/**
|
|
38
|
+
* Rounder panel and a round close button, for dialogs that sit beside pill controls.
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
pill: {
|
|
42
|
+
type: BooleanConstructor;
|
|
43
|
+
default: boolean;
|
|
44
|
+
};
|
|
37
45
|
/**
|
|
38
46
|
* Where the panel sits: centered, near the top, a sheet along the bottom,
|
|
39
47
|
* a full-height panel on the start or end side, or the whole screen.
|
|
@@ -62,6 +70,14 @@ export declare const DialogContent: import("vue").DefineComponent<import("vue").
|
|
|
62
70
|
type: BooleanConstructor;
|
|
63
71
|
default: boolean;
|
|
64
72
|
};
|
|
73
|
+
/**
|
|
74
|
+
* Rounder panel and a round close button, for dialogs that sit beside pill controls.
|
|
75
|
+
* @default false
|
|
76
|
+
*/
|
|
77
|
+
pill: {
|
|
78
|
+
type: BooleanConstructor;
|
|
79
|
+
default: boolean;
|
|
80
|
+
};
|
|
65
81
|
/**
|
|
66
82
|
* Where the panel sits: centered, near the top, a sheet along the bottom,
|
|
67
83
|
* a full-height panel on the start or end side, or the whole screen.
|
|
@@ -79,6 +95,7 @@ export declare const DialogContent: import("vue").DefineComponent<import("vue").
|
|
|
79
95
|
onCloseAutoFocus: PropType<(event: Event) => void>;
|
|
80
96
|
}>> & Readonly<{}>, {
|
|
81
97
|
width: string | number;
|
|
98
|
+
pill: boolean;
|
|
82
99
|
showClose: boolean;
|
|
83
100
|
placement: DialogPlacement;
|
|
84
101
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -11,6 +11,8 @@ declare const TextareaComponent: import("vue").DefineComponent<import("vue").Ext
|
|
|
11
11
|
type: PropType<ControlSize>;
|
|
12
12
|
default: string;
|
|
13
13
|
};
|
|
14
|
+
/** Applies a negative margin using the current gutter to optically align the text with surrounding content. */
|
|
15
|
+
opticallyAlign: PropType<"start" | "end">;
|
|
14
16
|
/** Controls gutter on the edges of the textarea, defaults to value from `size`. */
|
|
15
17
|
gutterSize: PropType<Sizes<"2xs" | "xs" | "sm" | "md" | "lg" | "xl">>;
|
|
16
18
|
/** Disables the textarea visually and from interactions. @default false */
|
|
@@ -86,6 +88,8 @@ declare const TextareaComponent: import("vue").DefineComponent<import("vue").Ext
|
|
|
86
88
|
type: PropType<ControlSize>;
|
|
87
89
|
default: string;
|
|
88
90
|
};
|
|
91
|
+
/** Applies a negative margin using the current gutter to optically align the text with surrounding content. */
|
|
92
|
+
opticallyAlign: PropType<"start" | "end">;
|
|
89
93
|
/** Controls gutter on the edges of the textarea, defaults to value from `size`. */
|
|
90
94
|
gutterSize: PropType<Sizes<"2xs" | "xs" | "sm" | "md" | "lg" | "xl">>;
|
|
91
95
|
/** Disables the textarea visually and from interactions. @default false */
|