@leaflink/stash 43.5.1 → 44.0.0-beta.1
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/FilterDropdown.js +1 -1
- package/dist/FilterDropdown.js.map +1 -1
- package/dist/Textarea.js +1 -1
- package/dist/Textarea.js.map +1 -1
- package/dist/components.css +1 -1
- package/package.json +1 -1
- package/styles/_core.scss +48 -0
- package/styles/backwards-compat.css +1407 -2
- package/styles/base.css +388 -19
- package/styles/components/_all.scss +0 -14
- package/styles/components/_box.scss +0 -13
- package/styles/components/_item-list.scss +0 -78
- package/styles/components/_sidebar.scss +0 -404
- package/styles/components/_top-header.scss +0 -219
- package/styles/elements/_all.scss +0 -15
- package/styles/elements/_buttons.scss +0 -235
- package/styles/elements/_forms.scss +0 -300
- package/styles/elements/_tables.scss +0 -80
- package/styles/elements/_tooltips.scss +0 -110
- package/styles/utility/_all.scss +0 -12
- package/styles/utility/_animations.scss +0 -103
- package/styles/utility/_display.scss +0 -167
- package/styles/utility/_grid.scss +0 -200
- package/styles/utility/_icons.scss +0 -31
- package/styles/utility/_transitions.scss +0 -110
package/dist/FilterDropdown.js
CHANGED
|
@@ -102,7 +102,7 @@ const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "t
|
|
|
102
102
|
d("div", q, [
|
|
103
103
|
d("div", H, [
|
|
104
104
|
d("div", {
|
|
105
|
-
class: "tw-p-
|
|
105
|
+
class: "tw-p-3.5 tw-h-full tw-overflow-auto",
|
|
106
106
|
onScroll: e[0] || (e[0] = //@ts-ignore
|
|
107
107
|
(...a) => o(g) && o(g)(...a)),
|
|
108
108
|
onScrollend: B
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterDropdown.js","sources":["../src/components/FilterDropdown/FilterDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import throttle from 'lodash-es/throttle';\n import { computed, inject, ref } from 'vue';\n\n import { t } from '../../locale';\n import Button from '../Button/Button.vue';\n import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n import type { OnApplyFilters } from '../DataViewFilters/DataViewFilters.types';\n import Dropdown from '../Dropdown/Dropdown.vue';\n import FilterChip from '../FilterChip/FilterChip.vue';\n\n export interface FilterDropdownProps {\n label: string;\n /** The name of a filter group */\n group: string;\n onApply?: OnApplyFilters;\n }\n const props = withDefaults(defineProps<FilterDropdownProps>(), {\n activeFilterCount: 0,\n onApply: () => undefined,\n });\n\n const emit =\n defineEmits<{\n (e: 'reset'): void;\n (e: 'dismiss'): void;\n }>();\n\n const { isLoading: isDataViewLoading } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n if (!dataViewFiltersUtils?.useFiltersInstance) {\n throw new Error(\n 'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n );\n }\n\n const { applyFilters, resetFilterGroup, activeFiltersCounts, undoWorkingFilters } =\n dataViewFiltersUtils.useFiltersInstance;\n\n const dropdownRef = ref<InstanceType<typeof Dropdown>>();\n const isOpen = computed(() => dropdownRef.value?.isActive);\n\n function onToggleButtonClick() {\n const wasOpen = isOpen.value;\n\n dropdownRef.value?.toggle();\n\n if (wasOpen) {\n undoWorkingFilters();\n emit('dismiss');\n }\n }\n\n function handleResetClick() {\n resetFilterGroup(props.group);\n emit('reset');\n dropdownRef.value?.dismiss();\n }\n\n async function handleApplyClick() {\n const { preventDismiss } = (await props.onApply?.()) || applyFilters() || {};\n\n if (!preventDismiss) {\n dropdownRef.value?.dismiss();\n }\n }\n\n function onDismiss() {\n undoWorkingFilters();\n emit('dismiss');\n }\n\n const showShadow = ref(false);\n const onScroll = throttle((event: Event) => {\n if (!event.target) return;\n\n if ((event.target as HTMLElement).scrollTop > 0) {\n showShadow.value = true;\n } else {\n showShadow.value = false;\n }\n }, 500);\n\n function onScrollEnd() {\n setTimeout(() => {\n showShadow.value = false;\n }, 2000);\n }\n</script>\n\n<template>\n <Dropdown\n ref=\"dropdownRef\"\n align=\"left\"\n class=\"stash-filter-dropdown\"\n data-test=\"stash-filter-dropdown\"\n fluid-content\n close-manually\n content-class=\"tw-w-full tw-max-w-[600px] tw-h-full tw-max-h-[400px]\"\n :offset=\"{ y: 6 }\"\n @dismiss=\"onDismiss\"\n >\n <template #toggle>\n <FilterChip\n class=\"tw-rounded-full\"\n has-dropdown\n :is-dropdown-open=\"isOpen\"\n :filter-count=\"activeFiltersCounts[props.group]\"\n :is-selected=\"isOpen\"\n @click=\"onToggleButtonClick\"\n >\n {{ props.label }}\n </FilterChip>\n </template>\n <template #default>\n <div class=\"tw-flex tw-flex-col tw-rounded tw-h-full\">\n <div class=\"tw-grow tw-rounded-t tw-relative tw-overflow-hidden\">\n <div class=\"tw-p-
|
|
1
|
+
{"version":3,"file":"FilterDropdown.js","sources":["../src/components/FilterDropdown/FilterDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import throttle from 'lodash-es/throttle';\n import { computed, inject, ref } from 'vue';\n\n import { t } from '../../locale';\n import Button from '../Button/Button.vue';\n import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n import type { OnApplyFilters } from '../DataViewFilters/DataViewFilters.types';\n import Dropdown from '../Dropdown/Dropdown.vue';\n import FilterChip from '../FilterChip/FilterChip.vue';\n\n export interface FilterDropdownProps {\n label: string;\n /** The name of a filter group */\n group: string;\n onApply?: OnApplyFilters;\n }\n const props = withDefaults(defineProps<FilterDropdownProps>(), {\n activeFilterCount: 0,\n onApply: () => undefined,\n });\n\n const emit =\n defineEmits<{\n (e: 'reset'): void;\n (e: 'dismiss'): void;\n }>();\n\n const { isLoading: isDataViewLoading } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n if (!dataViewFiltersUtils?.useFiltersInstance) {\n throw new Error(\n 'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n );\n }\n\n const { applyFilters, resetFilterGroup, activeFiltersCounts, undoWorkingFilters } =\n dataViewFiltersUtils.useFiltersInstance;\n\n const dropdownRef = ref<InstanceType<typeof Dropdown>>();\n const isOpen = computed(() => dropdownRef.value?.isActive);\n\n function onToggleButtonClick() {\n const wasOpen = isOpen.value;\n\n dropdownRef.value?.toggle();\n\n if (wasOpen) {\n undoWorkingFilters();\n emit('dismiss');\n }\n }\n\n function handleResetClick() {\n resetFilterGroup(props.group);\n emit('reset');\n dropdownRef.value?.dismiss();\n }\n\n async function handleApplyClick() {\n const { preventDismiss } = (await props.onApply?.()) || applyFilters() || {};\n\n if (!preventDismiss) {\n dropdownRef.value?.dismiss();\n }\n }\n\n function onDismiss() {\n undoWorkingFilters();\n emit('dismiss');\n }\n\n const showShadow = ref(false);\n const onScroll = throttle((event: Event) => {\n if (!event.target) return;\n\n if ((event.target as HTMLElement).scrollTop > 0) {\n showShadow.value = true;\n } else {\n showShadow.value = false;\n }\n }, 500);\n\n function onScrollEnd() {\n setTimeout(() => {\n showShadow.value = false;\n }, 2000);\n }\n</script>\n\n<template>\n <Dropdown\n ref=\"dropdownRef\"\n align=\"left\"\n class=\"stash-filter-dropdown\"\n data-test=\"stash-filter-dropdown\"\n fluid-content\n close-manually\n content-class=\"tw-w-full tw-max-w-[600px] tw-h-full tw-max-h-[400px]\"\n :offset=\"{ y: 6 }\"\n @dismiss=\"onDismiss\"\n >\n <template #toggle>\n <FilterChip\n class=\"tw-rounded-full\"\n has-dropdown\n :is-dropdown-open=\"isOpen\"\n :filter-count=\"activeFiltersCounts[props.group]\"\n :is-selected=\"isOpen\"\n @click=\"onToggleButtonClick\"\n >\n {{ props.label }}\n </FilterChip>\n </template>\n <template #default>\n <div class=\"tw-flex tw-flex-col tw-rounded tw-h-full\">\n <div class=\"tw-grow tw-rounded-t tw-relative tw-overflow-hidden\">\n <div class=\"tw-p-3.5 tw-h-full tw-overflow-auto\" @scroll=\"onScroll\" @scrollend=\"onScrollEnd\">\n <slot></slot>\n </div>\n <Transition name=\"fade\">\n <div\n v-if=\"showShadow\"\n class=\"\n tw-absolute\n tw-bottom-0\n tw-left-0\n tw-right-0\n tw-z-10\n tw-h-[20px]\n tw-bg-scroll-shadow\n tw-pointer-events-none\n \"\n ></div>\n </Transition>\n </div>\n\n <footer\n class=\"\n tw-bg-ice-100\n tw-border-t-ice-200\n tw-border-b-ice-100\n tw-border-x-ice-100\n tw-border-solid\n tw-border\n tw-p-3.5\n tw-flex\n tw-justify-end\n tw-rounded-b\n tw-gap-6\n \"\n >\n <Button\n v-if=\"activeFiltersCounts[props.group]\"\n secondary\n class=\"tw-min-w-[100px]\"\n :disabled=\"isDataViewLoading\"\n @click=\"handleResetClick\"\n >\n {{ t('ll.reset') }}\n </Button>\n <Button class=\"tw-min-w-[100px]\" :disabled=\"isDataViewLoading\" @click=\"handleApplyClick\">\n {{ t('ll.apply') }}\n </Button>\n </footer>\n </div>\n </template>\n </Dropdown>\n</template>\n"],"names":["isDataViewLoading","inject","DATA_VIEW_INJECTION","dataViewFiltersUtils","DATA_VIEW_FILTERS_UTILS_INJECTION","applyFilters","resetFilterGroup","activeFiltersCounts","undoWorkingFilters","dropdownRef","ref","isOpen","computed","_a","onToggleButtonClick","wasOpen","emit","handleResetClick","props","handleApplyClick","preventDismiss","_b","onDismiss","showShadow","onScroll","throttle","event","onScrollEnd"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6BQ,EAAE,WAAWA,MAAsBC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE/FC,IAAuBF,EAAOG,EAAkC,GAAG;AAErE,QAAA,EAACD,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIJ,UAAM,EAAE,cAAAE,GAAc,kBAAAC,GAAkB,qBAAAC,GAAqB,oBAAAC,MAC3DL,EAAqB,oBAEjBM,IAAcC,KACdC,IAASC,EAAS,MAAA;;AAAM,cAAAC,IAAAJ,EAAY,UAAZ,gBAAAI,EAAmB;AAAA,KAAQ;AAEzD,aAASC,IAAsB;;AAC7B,YAAMC,IAAUJ,EAAO;AAEvB,OAAAE,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB,UAEfE,MACiBP,KACnBQ,EAAK,SAAS;AAAA,IAElB;AAEA,aAASC,IAAmB;;AAC1B,MAAAX,EAAiBY,EAAM,KAAK,GAC5BF,EAAK,OAAO,IACZH,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB;AAAA,IACrB;AAEA,mBAAeM,IAAmB;;AAC1B,YAAA,EAAE,gBAAAC,MAAoB,QAAMP,IAAAK,EAAM,YAAN,gBAAAL,EAAA,KAAAK,OAAsBb,EAAa,KAAK;AAE1E,MAAKe,MACHC,IAAAZ,EAAY,UAAZ,QAAAY,EAAmB;AAAA,IAEvB;AAEA,aAASC,IAAY;AACA,MAAAd,KACnBQ,EAAK,SAAS;AAAA,IAChB;AAEM,UAAAO,IAAab,EAAI,EAAK,GACtBc,IAAWC,EAAS,CAACC,MAAiB;AAC1C,MAAKA,EAAM,WAENA,EAAM,OAAuB,YAAY,IAC5CH,EAAW,QAAQ,KAEnBA,EAAW,QAAQ;AAAA,OAEpB,GAAG;AAEN,aAASI,IAAc;AACrB,iBAAW,MAAM;AACf,QAAAJ,EAAW,QAAQ;AAAA,SAClB,GAAI;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Textarea.js
CHANGED
|
@@ -103,7 +103,7 @@ const L = ["id", "value"], N = /* @__PURE__ */ R({
|
|
|
103
103
|
]), 1040, ["id", "class"]));
|
|
104
104
|
}
|
|
105
105
|
});
|
|
106
|
-
const X = /* @__PURE__ */ F(N, [["__scopeId", "data-v-
|
|
106
|
+
const X = /* @__PURE__ */ F(N, [["__scopeId", "data-v-ffd4d28e"]]);
|
|
107
107
|
export {
|
|
108
108
|
X as default
|
|
109
109
|
};
|
package/dist/Textarea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useSlots, watch } from 'vue';\n\n import Field from '../Field/Field.vue';\n\n export interface TextareaResizeOptions {\n /**\n * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n */\n forceBrowserScroll: boolean;\n }\n\n export interface TextAreaProps {\n /**\n * Label text for the textarea element.\n */\n label?: string;\n /**\n * Value for the textarea element.\n */\n modelValue?: string;\n /**\n * Deprecated. Use :model-value or v-model instead of :value.\n * @deprecated Use :model-value or v-model instead of :value.\n */\n value?: string | number | null;\n /**\n * Error text for the textarea element.\n */\n errorText?: string;\n /**\n * Hint text for the textarea element.\n */\n hintText?: string;\n /**\n * Render \"(optional)\" to the right of the label text\n */\n showOptionalInLabel?: boolean;\n /**\n * Allow textarea to be resizable vertically.\n * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n */\n resize?: boolean | TextareaResizeOptions;\n }\n\n defineOptions({\n name: 'll-textarea',\n });\n\n /**\n * Unique ID for the textarea, required for accessibility purposes\n */\n const id = uniqueId('textarea-');\n\n const attrs = useAttrs();\n const slots = useSlots();\n\n const props = withDefaults(defineProps<TextAreaProps>(), {\n label: ' ',\n modelValue: '',\n value: null,\n errorText: '',\n hintText: '',\n showOptionalInLabel: false,\n resize: false,\n });\n\n const emits =\n defineEmits<{\n /**\n * Emitted when the model value changes.\n */\n (e: 'update:model-value', value: string): void;\n }>();\n\n const textareaRef = ref<HTMLTextAreaElement>();\n const observer = ref<ResizeObserver>();\n\n const inputAttrs = computed(() => {\n const allAttrs = { ...attrs };\n\n delete allAttrs['data-test'];\n delete allAttrs.class;\n\n return allAttrs;\n });\n\n watch(\n () => props.resize,\n (v) => {\n v ? setupResizeObserver() : observer.value?.disconnect();\n },\n );\n\n const onInput = (event: Event) => {\n emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n };\n\n const setupResizeObserver = () => {\n if (observer.value || !textareaRef.value) {\n return;\n }\n\n // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n observer.value = new ResizeObserver(([entry]) => {\n const { target } = entry;\n const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n const { scrollTop: scrollPosition } = parent;\n let offsetDiff = 0;\n\n // checks if the closest parent element scrollable is the document page\n if (parent === document.documentElement) {\n const { top, height } = getOffsetClipRect(target as HTMLElement);\n const { innerHeight: viewportHeight } = window;\n\n offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n } else {\n const { top, height } = (target as HTMLElement).getBoundingClientRect();\n const { top: parentTop } = parent.getBoundingClientRect();\n const { offsetHeight: parentHeight } = parent;\n const offsetTop = top - parentTop;\n\n offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n }\n\n if (offsetDiff) {\n requestAnimationFrame(() => {\n parent.scrollTop = scrollPosition + offsetDiff;\n });\n }\n });\n\n observer.value.observe(textareaRef.value);\n };\n\n /**\n * Retrieve the closest parent that has a scroll. Defaults to the document page.\n */\n const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n const parent = el.parentElement as HTMLElement;\n if (!parent) {\n return null;\n }\n\n const { overflowY } = getComputedStyle(parent);\n if (overflowY !== 'visible') {\n return parent;\n }\n\n if (parent === document.body) {\n return document.documentElement;\n }\n\n return findParentScrollable(parent);\n };\n\n /**\n * Retrieve element absolute positioning relative to the page.\n */\n const getOffsetClipRect = (el: HTMLElement) => {\n const { offsetWidth: width, offsetHeight: height } = el;\n\n let left = 0;\n let top = 0;\n\n const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n left += offsetLeft;\n top += offsetTop;\n\n if (offsetParent) {\n findPos(offsetParent as HTMLElement);\n }\n };\n\n findPos(el);\n\n return {\n top,\n left,\n width,\n height,\n };\n };\n\n onMounted(async () => {\n if (props.value !== null) {\n throw new Error('ll-input: use :model-value or v-model instead of :value.');\n }\n\n if (attrs.onInput) {\n throw new Error('ll-input: use the @update:model-value event instead of @input');\n }\n\n if (\n (typeof props.resize === 'boolean' && props.resize) ||\n (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n ) {\n await nextTick();\n setupResizeObserver();\n }\n });\n\n onBeforeUnmount(() => {\n observer.value?.disconnect();\n });\n</script>\n\n<template>\n <Field v-bind=\"props\" :id=\"id\" class=\"stash-textarea\" :class=\"[attrs.class]\" data-test=\"stash-textarea\">\n <template #default=\"{ fieldId, hasError }\">\n <textarea\n :id=\"fieldId\"\n ref=\"textareaRef\"\n :class=\"{ 'stash-textarea--error': hasError, 'tw-resize-y': props.resize, 'tw-resize-none': !props.resize }\"\n :value=\"props.modelValue\"\n data-test=\"stash-textarea|textarea\"\n v-bind=\"inputAttrs\"\n @input=\"onInput\"\n ></textarea>\n </template>\n <template v-if=\"slots.hint\" #hint>\n <!-- @slot Hint content -->\n <slot name=\"hint\"></slot>\n </template>\n </Field>\n</template>\n\n<style scoped>\n .stash-textarea {\n position: relative;\n width: 100%;\n\n textarea {\n background: theme(colors.white);\n border: 1px solid;\n border-color: theme('colors.ice.500');\n border-radius: theme(borderRadius.DEFAULT);\n color: theme(colors.ice.700);\n display: block;\n min-height: 100px;\n outline: none;\n padding: theme(spacing[1.5]);\n width: 100%;\n\n &:hover {\n border-color: theme('colors.ice.500');\n }\n\n &:focus,\n &:active {\n border-color: theme('colors.blue.500');\n }\n\n &.stash-textarea--error {\n border-color: theme('colors.red.500');\n color: theme('colors.red.500');\n }\n }\n }\n</style>\n"],"names":["id","uniqueId","attrs","useAttrs","slots","useSlots","textareaRef","ref","observer","inputAttrs","computed","allAttrs","watch","props","v","setupResizeObserver","_a","onInput","event","emits","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useSlots, watch } from 'vue';\n\n import Field from '../Field/Field.vue';\n\n export interface TextareaResizeOptions {\n /**\n * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n */\n forceBrowserScroll: boolean;\n }\n\n export interface TextAreaProps {\n /**\n * Label text for the textarea element.\n */\n label?: string;\n /**\n * Value for the textarea element.\n */\n modelValue?: string;\n /**\n * Deprecated. Use :model-value or v-model instead of :value.\n * @deprecated Use :model-value or v-model instead of :value.\n */\n value?: string | number | null;\n /**\n * Error text for the textarea element.\n */\n errorText?: string;\n /**\n * Hint text for the textarea element.\n */\n hintText?: string;\n /**\n * Render \"(optional)\" to the right of the label text\n */\n showOptionalInLabel?: boolean;\n /**\n * Allow textarea to be resizable vertically.\n * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n */\n resize?: boolean | TextareaResizeOptions;\n }\n\n defineOptions({\n name: 'll-textarea',\n });\n\n /**\n * Unique ID for the textarea, required for accessibility purposes\n */\n const id = uniqueId('textarea-');\n\n const attrs = useAttrs();\n const slots = useSlots();\n\n const props = withDefaults(defineProps<TextAreaProps>(), {\n label: ' ',\n modelValue: '',\n value: null,\n errorText: '',\n hintText: '',\n showOptionalInLabel: false,\n resize: false,\n });\n\n const emits =\n defineEmits<{\n /**\n * Emitted when the model value changes.\n */\n (e: 'update:model-value', value: string): void;\n }>();\n\n const textareaRef = ref<HTMLTextAreaElement>();\n const observer = ref<ResizeObserver>();\n\n const inputAttrs = computed(() => {\n const allAttrs = { ...attrs };\n\n delete allAttrs['data-test'];\n delete allAttrs.class;\n\n return allAttrs;\n });\n\n watch(\n () => props.resize,\n (v) => {\n v ? setupResizeObserver() : observer.value?.disconnect();\n },\n );\n\n const onInput = (event: Event) => {\n emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n };\n\n const setupResizeObserver = () => {\n if (observer.value || !textareaRef.value) {\n return;\n }\n\n // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n observer.value = new ResizeObserver(([entry]) => {\n const { target } = entry;\n const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n const { scrollTop: scrollPosition } = parent;\n let offsetDiff = 0;\n\n // checks if the closest parent element scrollable is the document page\n if (parent === document.documentElement) {\n const { top, height } = getOffsetClipRect(target as HTMLElement);\n const { innerHeight: viewportHeight } = window;\n\n offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n } else {\n const { top, height } = (target as HTMLElement).getBoundingClientRect();\n const { top: parentTop } = parent.getBoundingClientRect();\n const { offsetHeight: parentHeight } = parent;\n const offsetTop = top - parentTop;\n\n offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n }\n\n if (offsetDiff) {\n requestAnimationFrame(() => {\n parent.scrollTop = scrollPosition + offsetDiff;\n });\n }\n });\n\n observer.value.observe(textareaRef.value);\n };\n\n /**\n * Retrieve the closest parent that has a scroll. Defaults to the document page.\n */\n const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n const parent = el.parentElement as HTMLElement;\n if (!parent) {\n return null;\n }\n\n const { overflowY } = getComputedStyle(parent);\n if (overflowY !== 'visible') {\n return parent;\n }\n\n if (parent === document.body) {\n return document.documentElement;\n }\n\n return findParentScrollable(parent);\n };\n\n /**\n * Retrieve element absolute positioning relative to the page.\n */\n const getOffsetClipRect = (el: HTMLElement) => {\n const { offsetWidth: width, offsetHeight: height } = el;\n\n let left = 0;\n let top = 0;\n\n const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n left += offsetLeft;\n top += offsetTop;\n\n if (offsetParent) {\n findPos(offsetParent as HTMLElement);\n }\n };\n\n findPos(el);\n\n return {\n top,\n left,\n width,\n height,\n };\n };\n\n onMounted(async () => {\n if (props.value !== null) {\n throw new Error('ll-input: use :model-value or v-model instead of :value.');\n }\n\n if (attrs.onInput) {\n throw new Error('ll-input: use the @update:model-value event instead of @input');\n }\n\n if (\n (typeof props.resize === 'boolean' && props.resize) ||\n (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n ) {\n await nextTick();\n setupResizeObserver();\n }\n });\n\n onBeforeUnmount(() => {\n observer.value?.disconnect();\n });\n</script>\n\n<template>\n <Field v-bind=\"props\" :id=\"id\" class=\"stash-textarea\" :class=\"[attrs.class]\" data-test=\"stash-textarea\">\n <template #default=\"{ fieldId, hasError }\">\n <textarea\n :id=\"fieldId\"\n ref=\"textareaRef\"\n :class=\"{ 'stash-textarea--error': hasError, 'tw-resize-y': props.resize, 'tw-resize-none': !props.resize }\"\n :value=\"props.modelValue\"\n data-test=\"stash-textarea|textarea\"\n v-bind=\"inputAttrs\"\n @input=\"onInput\"\n ></textarea>\n </template>\n <template v-if=\"slots.hint\" #hint>\n <!-- @slot Hint content -->\n <slot name=\"hint\"></slot>\n </template>\n </Field>\n</template>\n\n<style scoped>\n .stash-textarea {\n position: relative;\n width: 100%;\n\n textarea {\n background: var(--color-white);\n border: 1px solid;\n border-color: var(--color-ice-500);\n border-radius: theme('borderRadius.DEFAULT');\n color: var(--color-ice-700);\n display: block;\n min-height: 100px;\n outline: none;\n padding: theme('spacing[1.5]');\n width: 100%;\n\n &:hover {\n border-color: var(--color-ice-500);\n }\n\n &:focus,\n &:active {\n border-color: var(--color-blue-500);\n }\n\n &.stash-textarea--error {\n border-color: var(--color-red-500);\n color: var(--color-red-500);\n }\n\n &::placeholder {\n color: var(--color-ice-500);\n opacity: 1;\n }\n\n &[disabled],\n &[readonly] {\n background-color: var(--color-ice-200);\n border-color: var(--color-ice-500);\n color: var(--color-ice-700);\n pointer-events: none;\n }\n\n &[disabled]:active,\n &[readonly]:active,\n &[disabled]:focus,\n &[readonly]:focus {\n box-shadow: none;\n }\n\n &[disabled]::placeholder,\n &[readonly]::placeholder {\n text-transform: none;\n }\n }\n }\n</style>\n"],"names":["id","uniqueId","attrs","useAttrs","slots","useSlots","textareaRef","ref","observer","inputAttrs","computed","allAttrs","watch","props","v","setupResizeObserver","_a","onInput","event","emits","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAqDQA,IAAKC,EAAS,WAAW,GAEzBC,IAAQC,KACRC,IAAQC,KAoBRC,IAAcC,KACdC,IAAWD,KAEXE,IAAaC,EAAS,MAAM;AAC1B,YAAAC,IAAW,EAAE,GAAGT;AAEtB,oBAAOS,EAAS,WAAW,GAC3B,OAAOA,EAAS,OAETA;AAAA,IAAA,CACR;AAED,IAAAC;AAAA,MACE,MAAMC,EAAM;AAAA,MACZ,CAACC,MAAM;;AACL,QAAAA,IAAIC,EAAoB,KAAIC,IAAAR,EAAS,UAAT,QAAAQ,EAAgB;AAAA,MAC9C;AAAA,IAAA;AAGI,UAAAC,IAAU,CAACC,MAAiB;AAC1B,MAAAC,EAAA,sBAAuBD,EAAM,OAA+B,KAAK;AAAA,IAAA,GAGnEH,IAAsB,MAAM;AAChC,MAAIP,EAAS,SAAS,CAACF,EAAY,UAKnCE,EAAS,QAAQ,IAAI,eAAe,CAAC,CAACY,CAAK,MAAM;AACzC,cAAA,EAAE,QAAAC,EAAW,IAAAD,GACbE,IAASC,EAAqBjB,EAAY,KAA4B,KAAK,SAAS,iBAEpF,EAAE,WAAWkB,EAAmB,IAAAF;AACtC,YAAIG,IAAa;AAGb,YAAAH,MAAW,SAAS,iBAAiB;AACvC,gBAAM,EAAE,KAAAI,GAAK,QAAAC,EAAO,IAAIC,EAAkBP,CAAqB,GACzD,EAAE,aAAaQ,EAAmB,IAAA;AAExC,UAAAJ,IAAa,KAAK,IAAIC,IAAMC,KAAUE,IAAiBL,IAAiB,CAAC;AAAA,QAAA,OACpE;AACL,gBAAM,EAAE,KAAAE,GAAK,QAAAC,EAAO,IAAKN,EAAuB,sBAAsB,GAChE,EAAE,KAAKS,EAAU,IAAIR,EAAO,sBAAsB,GAClD,EAAE,cAAcS,EAAiB,IAAAT,GACjCU,IAAYN,IAAMI;AAExB,UAAAL,IAAa,KAAK,IAAIO,IAAYL,IAASI,GAAc,CAAC;AAAA,QAC5D;AAEA,QAAIN,KACF,sBAAsB,MAAM;AAC1B,UAAAH,EAAO,YAAYE,IAAiBC;AAAA,QAAA,CACrC;AAAA,MACH,CACD,GAEQjB,EAAA,MAAM,QAAQF,EAAY,KAAK;AAAA,IAAA,GAMpCiB,IAAuB,CAACU,MAAwC;AACpE,YAAMX,IAASW,EAAG;AAClB,UAAI,CAACX;AACI,eAAA;AAGT,YAAM,EAAE,WAAAY,EAAA,IAAc,iBAAiBZ,CAAM;AAC7C,aAAIY,MAAc,YACTZ,IAGLA,MAAW,SAAS,OACf,SAAS,kBAGXC,EAAqBD,CAAM;AAAA,IAAA,GAM9BM,IAAoB,CAACK,MAAoB;AAC7C,YAAM,EAAE,aAAaE,GAAO,cAAcR,MAAWM;AAErD,UAAIG,IAAO,GACPV,IAAM;AAEV,YAAMW,IAAU,SAAU,EAAE,YAAAC,GAAY,WAAAN,GAAW,cAAAO,KAA6B;AACtE,QAAAH,KAAAE,GACDZ,KAAAM,GAEHO,KACFF,EAAQE,CAA2B;AAAA,MACrC;AAGF,aAAAF,EAAQJ,CAAE,GAEH;AAAA,QACL,KAAAP;AAAA,QACA,MAAAU;AAAA,QACA,OAAAD;AAAA,QACA,QAAAR;AAAA,MAAA;AAAA,IACF;AAGF,WAAAa,EAAU,YAAY;;AAChB,UAAA3B,EAAM,UAAU;AACZ,cAAA,IAAI,MAAM,0DAA0D;AAG5E,UAAIX,EAAM;AACF,cAAA,IAAI,MAAM,+DAA+D;AAI9E,OAAA,OAAOW,EAAM,UAAW,aAAaA,EAAM,WAC3CG,IAAAH,EAAM,WAAN,QAAAG,EAAwC,wBAEzC,MAAMyB,EAAS,GACK1B;IACtB,CACD,GAED2B,EAAgB,MAAM;;AACpB,OAAA1B,IAAAR,EAAS,UAAT,QAAAQ,EAAgB;AAAA,IAAW,CAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|