npm - @leaflink/stash - Versions diffs - 44.5.0 → 44.5.1 - Mend

@leaflink/stash 44.5.0 → 44.5.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.

Files changed (17) hide show

package/dist/Image.js CHANGED Viewed

@@ -102,7 +102,7 @@ const ne = /* @__PURE__ */ x({
     src: { default: "" },
     srcset: { default: "" },
     sizes: { default: "" },
-    provider: { default: null },
+    provider: { default: void 0 },
     radius: { default: "none" }
   },
   setup(t) {

package/dist/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","sources":["../src/components/Image/providers/utils.ts","../src/components/Image/providers/cloudinary.ts","../src/components/Image/providers/static.ts","../src/components/Image/providers/index.ts","../src/components/Image/Image.vue"],"sourcesContent":["export interface ImageModifiers {\n format?: string;\n height?: number;\n width?: number;\n [key: string]: any /* eslint-disable-line @typescript-eslint/no-explicit-any /;\n}\n\nexport type ParamFormatter = (key: string, value: string) => string;\n\nexport type ParamMapper = { [key: string]: string } \| ((key: string) => string);\n\nexport interface ProviderUrlBuilder {\n keyMap?: ParamMapper;\n formatter?: ParamFormatter;\n joinWith?: string;\n valueMap?: {\n [key: string]: ParamMapper;\n };\n}\n\nfunction createMapper(map: any) {\n / eslint-disable-line @typescript-eslint/no-explicit-any /\n return (key: string) => {\n return map[key] \|\| key;\n };\n}\n\n/\n Builds the parameterized Cloudinary url\n /\nexport function buildProviderUrl({\n formatter = (key, value) => `${key}=${value}`,\n keyMap,\n joinWith = '/',\n valueMap = {},\n}: ProviderUrlBuilder = {}) {\n const keyMapper = typeof keyMap === 'function' ? keyMap : createMapper(keyMap);\n\n Object.keys(valueMap).forEach((valueKey) => {\n if (typeof valueMap[valueKey] !== 'function') {\n valueMap[valueKey] = createMapper(valueMap[valueKey]);\n }\n });\n\n return (modifiers: { [key: string]: string } = {}) => {\n const operations = Object.entries(modifiers).map(([key, value]) => {\n const mapper = valueMap[key];\n const newKey = keyMapper(key);\n let newVal = value;\n\n if (typeof mapper === 'function') {\n newVal = mapper(modifiers[key]);\n }\n\n return formatter(newKey, newVal);\n });\n\n return operations.join(joinWith);\n };\n}\n\n/\n Checks if a (sub)domain is included in a list of acceptable domains\n * @param str the (sub)domain to check\n * @param domains an array of valid domains\n /\nexport function isDomainValid(str = '', domains: string[] = []): boolean {\n const url = new URL(str);\n const host = url.host;\n\n return domains.some((domain) => {\n if (domain === host) {\n return true;\n }\n\n return domain.endsWith(`.${host}`);\n });\n}\n","import merge from 'lodash-es/merge';\n\nimport { IMAGE_PROVIDER_URLS } from '../../../constants';\nimport { buildProviderUrl, ImageModifiers } from './utils';\n\nconst BASE_URL = IMAGE_PROVIDER_URLS.CLOUDINARY;\n\nconst convertHextoRGBFormat = (value: string) => (value.startsWith('#') ? value.replace('#', 'rgb_') : value);\n\n/\n Parameters (option and value pairs) that can be used in the <transformations> segment of the Cloudinary transformation URL.\n * Options and their respective values are connected by an underscore (eg `w_250` for width of 250px.).\n * Multiple parameters are comma separated (eg. `w_250,h_250`).\n \n `keyMap` maps the option to its option prefix.\n * `valueMap` is used for grouping options using the same `keyMap` value under a 'category', allowing for easier usage and custom labelling in the component context.\n \n Transformation URL structure:\n * https://cloudinary.com/documentation/transformation_reference\n \n Transformation URL parameters (options and values):\n * https://cloudinary.com/documentation/image_transformations#transformation_url_syntax\n \n /\nexport const operationsGenerator = buildProviderUrl({\n keyMap: {\n fit: 'c',\n width: 'w',\n height: 'h',\n format: 'f',\n quality: 'q',\n background: 'b',\n dpr: 'dpr',\n },\n valueMap: {\n fit: {\n fill: 'fill',\n inside: 'pad',\n outside: 'lpad',\n cover: 'fit',\n contain: 'scale',\n },\n format: {\n jpeg: 'jpg',\n },\n background(value: string) {\n return convertHextoRGBFormat(value);\n },\n },\n joinWith: ',',\n formatter: (key, value) => `${key}_${value}`,\n});\n\n// Note: Not configurable via Image props (for now).\nconst defaultModifiers = {\n // defaulting to maintain original image format to reduce transformations\n // format: 'auto',\n quality: 'auto',\n};\n\nexport function getImageUrl(src: string, modifiers: Partial<ImageModifiers> = {}): string {\n const mergeModifiers = merge(defaultModifiers, modifiers);\n const operations = operationsGenerator(mergeModifiers);\n\n return `${BASE_URL}/${operations}/${src}`;\n}\n","export function getImageUrl(src = ''): string {\n return src;\n}\n","import * as cloudinary from './cloudinary';\nimport * as staticProvider from './static';\n\nexport default {\n cloudinary,\n static: staticProvider,\n};\n","<script lang=\"ts\">\n export const PRESET_SIZES = {\n xsmall: {\n alwaysIncluded: false,\n width: 160,\n },\n small: {\n alwaysIncluded: true,\n width: 338,\n },\n medium: {\n alwaysIncluded: true,\n width: 676,\n },\n large: {\n alwaysIncluded: true,\n width: 1352,\n },\n xlarge: {\n alwaysIncluded: false,\n width: 2704,\n },\n } as const;\n\n export enum ImageRadiuses {\n None = 'none',\n Rounded = 'rounded',\n }\n</script>\n\n<script setup lang=\"ts\">\n import { computed, inject, useAttrs } from 'vue';\n\n import { StashImageProviders, StashProvideState } from '../../../types/misc';\n import { SCREEN_SIZES } from '../../constants';\n import providers from './providers';\n import { ImageModifiers, isDomainValid } from './providers/utils';\n\n // interface ImagePresetSizes {\n // [size: string]: {\n // alwaysIncluded: boolean;\n // width: number;\n // }\n // }\n\n export interface ImageSizeVariant {\n media: string;\n preset?: keyof typeof PRESET_SIZES;\n screenMinWidth: number;\n size: string;\n }\n\n export type ImageRadius = `${ImageRadiuses}`;\n\n export interface ImageProps {\n /*\n The path to the image you want to embed.\n /\n src: string;\n\n /\n Native srcset attribute.\n * One or more strings separated by commas, indicating possible image sources\n * Can only be used with provider=static, otherwise it's ignored and auto-generated with `sizes` usage\n /\n srcset?: string;\n\n /\n For specifying responsive sizes\n /\n sizes?: string;\n\n /\n Where the image is served from.\n * Optional, and when provided it forces the provider used.\n \n The provider is otherwise inherited from the Stash config `stashOptions.images.provider`, which defaults to `cloudinary`.\n \n When not provided, the provider is also inferred by `isStatic`:\n * - `static` for relative/absolute paths (`img/foo.jpg` or `/static/img/bar.jpg`), or when whitelisted absolute URLs are used (included in `staticOptions.images.staticDomains`).\n /\n provider?: StashImageProviders \| null;\n\n /\n For applying border radius\n /\n radius?: ImageRadius;\n\n /\n TODO - https://leaflink.atlassian.net/browse/GRO-204\n * A custom function used to resolve a URL string for the image\n */\n // loader?: () => string;\n }\n\n const PROVIDERS = {\n CLOUDINARY: 'cloudinary',\n STATIC: 'static',\n };\n const BREAKPOINTS = {\n md: SCREEN_SIZES.md,\n lg: SCREEN_SIZES.lg,\n };\n const stashOptions = inject<StashProvideState>('stashOptions');\n const props = withDefaults(defineProps<ImageProps>(), {\n src: '',\n srcset: '',\n sizes: '',\n provider: null,\n radius: 'none',\n // loader: undefined, // TODO - https://leaflink.atlassian.net/browse/GRO-204\n });\n\n const attrs = computed(() => {\n const { src, ...attrs } = useAttrs();\n\n attrs.sizes = imgSizes.value;\n attrs.srcset = imgSrcset.value;\n\n return attrs;\n });\n\n const staticDomains = computed(() => stashOptions?.images?.staticDomains \|\| []);\n\n const isStaticUrl = computed(() => {\n // return true if not an absolute url\n try {\n new URL(props.src);\n } catch (e) {\n return true;\n }\n\n // true if domain is whitelisted for static usage\n return isDomainValid(props.src, staticDomains.value);\n });\n\n const computedProvider = computed(() => {\n if (props.provider) {\n return props.provider;\n }\n\n if (stashOptions?.images?.provider && stashOptions.images.provider !== PROVIDERS.STATIC && !isStaticUrl.value) {\n return stashOptions.images.provider;\n }\n\n return PROVIDERS.STATIC;\n });\n\n const isStatic = computed(() => computedProvider.value === PROVIDERS.STATIC);\n\n const imgProvider = computed(() => providers[computedProvider.value]);\n\n const imgSrc = computed(() =>\n isStatic.value ? getProviderImage() : getProviderImage({ width: PRESET_SIZES.medium.width }),\n );\n\n const imgSizes = computed(() => (props.sizes \|\| !isStatic.value ? getSizes() : undefined));\n\n const imgSrcset = computed(() => (props.sizes && !props.srcset && !isStatic.value ? getSources() : props.srcset));\n\n const parsedSizes = computed(() => {\n if (props.sizes) {\n return parseSizes(props.sizes);\n }\n\n if (!isStatic.value) {\n return parseSizes('lg:large');\n }\n\n return [];\n });\n\n function getProviderImage(modifiers: ImageModifiers = {}) {\n return imgProvider.value.getImageUrl(props.src, modifiers);\n }\n\n function getSources() {\n const appliedPresets = Object.entries(PRESET_SIZES).reduce((obj, [key, entry]) => {\n const isPreset = !!parsedSizes.value.find((size) => size.preset === key);\n\n if (isPreset \|\| entry.alwaysIncluded) {\n obj[key] = entry;\n }\n\n return obj;\n }, {} as typeof PRESET_SIZES);\n\n return Object.values(appliedPresets)\n .map((size) => {\n const width = size.width;\n const src = getProviderImage({ width });\n\n return `${src} ${size.width}w`;\n })\n .join(', ');\n }\n\n function getSizes() {\n return parsedSizes.value.map((v) => `${v.media ? v.media + ' ' : ''}${v.size}`).join(', ');\n }\n\n function parseSizes(providedSizes: string) {\n const variants: ImageSizeVariant[] = [];\n const sizes = {\n default: '100vw',\n };\n\n // parse sizes and convert to object\n if (typeof providedSizes === 'string') {\n const definitions = providedSizes.split(/[\\s]+/).filter((size) => size);\n\n for (const entry of definitions) {\n const size = entry.split(':');\n\n if (size.length !== 2) {\n sizes['default'] = size[0].trim();\n continue;\n }\n\n sizes[size[0].trim()] = size[1].trim();\n }\n } else {\n throw new Error('`sizes` needs to be a string');\n }\n\n for (const key in sizes) {\n const screenMinWidth = parseInt(BREAKPOINTS[key] \|\| 0);\n const sizeValue = sizes[key];\n const presetKey = PRESET_SIZES[sizeValue] ? sizeValue : undefined;\n let size = String(presetKey ? PRESET_SIZES[sizeValue].width : sizeValue);\n const isFluid = size.endsWith('vw');\n\n // default integers to pixels\n if (!isFluid && /^\\d+$/.test(size)) {\n size = `${size}px`;\n }\n\n // ignore invalid size\n if (!isFluid && !size.endsWith('px')) {\n continue;\n }\n\n const variant = {\n media: screenMinWidth ? `(min-width: ${screenMinWidth}px)` : '',\n preset: presetKey,\n screenMinWidth,\n size,\n };\n\n variants.push(variant);\n }\n\n variants.sort((v1, v2) => (v1.screenMinWidth > v2.screenMinWidth ? -1 : 1));\n\n return variants;\n }\n</script>\n\n<template>\n <img\n ref=\"img\"\n :key=\"imgSrc\"\n data-test=\"stash-image\"\n class=\"stash-image\"\n :class=\"{\n 'tw-rounded': props.radius === ImageRadiuses.Rounded,\n }\"\n :src=\"imgSrc\"\n v-bind=\"attrs\"\n />\n</template>\n"],"names":["createMapper","map","key","buildProviderUrl","formatter","value","keyMap","joinWith","valueMap","keyMapper","valueKey","modifiers","mapper","newKey","newVal","isDomainValid","str","domains","host","domain","BASE_URL","IMAGE_PROVIDER_URLS","convertHextoRGBFormat","operationsGenerator","defaultModifiers","getImageUrl","src","mergeModifiers","merge","operations","providers","cloudinary","staticProvider","PRESET_SIZES","ImageRadiuses","PROVIDERS","BREAKPOINTS","SCREEN_SIZES","stashOptions","inject","attrs","computed","useAttrs","imgSizes","imgSrcset","staticDomains","_a","isStaticUrl","props","computedProvider","isStatic","imgProvider","imgSrc","getProviderImage","getSizes","getSources","parsedSizes","parseSizes","appliedPresets","obj","entry","size","width","v","providedSizes","variants","sizes","definitions","screenMinWidth","sizeValue","presetKey","isFluid","variant","v1","v2"],"mappings":"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"}
1	+ {"version":3,"file":"Image.js","sources":["../src/components/Image/providers/utils.ts","../src/components/Image/providers/cloudinary.ts","../src/components/Image/providers/static.ts","../src/components/Image/providers/index.ts","../src/components/Image/Image.vue"],"sourcesContent":["export interface ImageModifiers {\n format?: string;\n height?: number;\n width?: number;\n [key: string]: any /* eslint-disable-line @typescript-eslint/no-explicit-any /;\n}\n\nexport type ParamFormatter = (key: string, value: string) => string;\n\nexport type ParamMapper = { [key: string]: string } \| ((key: string) => string);\n\nexport interface ProviderUrlBuilder {\n keyMap?: ParamMapper;\n formatter?: ParamFormatter;\n joinWith?: string;\n valueMap?: {\n [key: string]: ParamMapper;\n };\n}\n\nfunction createMapper(map: any) {\n / eslint-disable-line @typescript-eslint/no-explicit-any /\n return (key: string) => {\n return map[key] \|\| key;\n };\n}\n\n/\n Builds the parameterized Cloudinary url\n /\nexport function buildProviderUrl({\n formatter = (key, value) => `${key}=${value}`,\n keyMap,\n joinWith = '/',\n valueMap = {},\n}: ProviderUrlBuilder = {}) {\n const keyMapper = typeof keyMap === 'function' ? keyMap : createMapper(keyMap);\n\n Object.keys(valueMap).forEach((valueKey) => {\n if (typeof valueMap[valueKey] !== 'function') {\n valueMap[valueKey] = createMapper(valueMap[valueKey]);\n }\n });\n\n return (modifiers: { [key: string]: string } = {}) => {\n const operations = Object.entries(modifiers).map(([key, value]) => {\n const mapper = valueMap[key];\n const newKey = keyMapper(key);\n let newVal = value;\n\n if (typeof mapper === 'function') {\n newVal = mapper(modifiers[key]);\n }\n\n return formatter(newKey, newVal);\n });\n\n return operations.join(joinWith);\n };\n}\n\n/\n Checks if a (sub)domain is included in a list of acceptable domains\n * @param str the (sub)domain to check\n * @param domains an array of valid domains\n /\nexport function isDomainValid(str = '', domains: string[] = []): boolean {\n const url = new URL(str);\n const host = url.host;\n\n return domains.some((domain) => {\n if (domain === host) {\n return true;\n }\n\n return domain.endsWith(`.${host}`);\n });\n}\n","import merge from 'lodash-es/merge';\n\nimport { IMAGE_PROVIDER_URLS } from '../../../constants';\nimport { buildProviderUrl, ImageModifiers } from './utils';\n\nconst BASE_URL = IMAGE_PROVIDER_URLS.CLOUDINARY;\n\nconst convertHextoRGBFormat = (value: string) => (value.startsWith('#') ? value.replace('#', 'rgb_') : value);\n\n/\n Parameters (option and value pairs) that can be used in the <transformations> segment of the Cloudinary transformation URL.\n * Options and their respective values are connected by an underscore (eg `w_250` for width of 250px.).\n * Multiple parameters are comma separated (eg. `w_250,h_250`).\n \n `keyMap` maps the option to its option prefix.\n * `valueMap` is used for grouping options using the same `keyMap` value under a 'category', allowing for easier usage and custom labelling in the component context.\n \n Transformation URL structure:\n * https://cloudinary.com/documentation/transformation_reference\n \n Transformation URL parameters (options and values):\n * https://cloudinary.com/documentation/image_transformations#transformation_url_syntax\n \n /\nexport const operationsGenerator = buildProviderUrl({\n keyMap: {\n fit: 'c',\n width: 'w',\n height: 'h',\n format: 'f',\n quality: 'q',\n background: 'b',\n dpr: 'dpr',\n },\n valueMap: {\n fit: {\n fill: 'fill',\n inside: 'pad',\n outside: 'lpad',\n cover: 'fit',\n contain: 'scale',\n },\n format: {\n jpeg: 'jpg',\n },\n background(value: string) {\n return convertHextoRGBFormat(value);\n },\n },\n joinWith: ',',\n formatter: (key, value) => `${key}_${value}`,\n});\n\n// Note: Not configurable via Image props (for now).\nconst defaultModifiers = {\n // defaulting to maintain original image format to reduce transformations\n // format: 'auto',\n quality: 'auto',\n};\n\nexport function getImageUrl(src: string, modifiers: Partial<ImageModifiers> = {}): string {\n const mergeModifiers = merge(defaultModifiers, modifiers);\n const operations = operationsGenerator(mergeModifiers);\n\n return `${BASE_URL}/${operations}/${src}`;\n}\n","export function getImageUrl(src = ''): string {\n return src;\n}\n","import * as cloudinary from './cloudinary';\nimport * as staticProvider from './static';\n\nexport default {\n cloudinary,\n static: staticProvider,\n};\n","<script lang=\"ts\">\n export const PRESET_SIZES = {\n xsmall: {\n alwaysIncluded: false,\n width: 160,\n },\n small: {\n alwaysIncluded: true,\n width: 338,\n },\n medium: {\n alwaysIncluded: true,\n width: 676,\n },\n large: {\n alwaysIncluded: true,\n width: 1352,\n },\n xlarge: {\n alwaysIncluded: false,\n width: 2704,\n },\n } as const;\n\n export enum ImageRadiuses {\n None = 'none',\n Rounded = 'rounded',\n }\n</script>\n\n<script setup lang=\"ts\">\n import { computed, inject, useAttrs } from 'vue';\n\n import { StashImageProviders, StashProvideState } from '../../../types/misc';\n import { SCREEN_SIZES } from '../../constants';\n import providers from './providers';\n import { ImageModifiers, isDomainValid } from './providers/utils';\n\n // interface ImagePresetSizes {\n // [size: string]: {\n // alwaysIncluded: boolean;\n // width: number;\n // }\n // }\n\n export interface ImageSizeVariant {\n media: string;\n preset?: keyof typeof PRESET_SIZES;\n screenMinWidth: number;\n size: string;\n }\n\n export type ImageRadius = `${ImageRadiuses}`;\n\n export interface ImageProps {\n /*\n The path to the image you want to embed.\n /\n src: string;\n\n /\n Native srcset attribute.\n * One or more strings separated by commas, indicating possible image sources\n * Can only be used with provider=static, otherwise it's ignored and auto-generated with `sizes` usage\n /\n srcset?: string;\n\n /\n For specifying responsive sizes\n /\n sizes?: string;\n\n /\n Where the image is served from.\n * Optional, and when provided it forces the provider used.\n \n The provider is otherwise inherited from the Stash config `stashOptions.images.provider`, which defaults to `cloudinary`.\n \n When not provided, the provider is also inferred by `isStatic`:\n * - `static` for relative/absolute paths (`img/foo.jpg` or `/static/img/bar.jpg`), or when whitelisted absolute URLs are used (included in `staticOptions.images.staticDomains`).\n /\n provider?: StashImageProviders;\n\n /\n For applying border radius\n /\n radius?: ImageRadius;\n\n /\n TODO - https://leaflink.atlassian.net/browse/GRO-204\n * A custom function used to resolve a URL string for the image\n */\n // loader?: () => string;\n }\n\n const PROVIDERS = {\n CLOUDINARY: 'cloudinary',\n STATIC: 'static',\n };\n const BREAKPOINTS = {\n md: SCREEN_SIZES.md,\n lg: SCREEN_SIZES.lg,\n };\n const stashOptions = inject<StashProvideState>('stashOptions');\n const props = withDefaults(defineProps<ImageProps>(), {\n src: '',\n srcset: '',\n sizes: '',\n provider: undefined,\n radius: 'none',\n // loader: undefined, // TODO - https://leaflink.atlassian.net/browse/GRO-204\n });\n\n const attrs = computed(() => {\n const { src, ...attrs } = useAttrs();\n\n attrs.sizes = imgSizes.value;\n attrs.srcset = imgSrcset.value;\n\n return attrs;\n });\n\n const staticDomains = computed(() => stashOptions?.images?.staticDomains \|\| []);\n\n const isStaticUrl = computed(() => {\n // return true if not an absolute url\n try {\n new URL(props.src);\n } catch (e) {\n return true;\n }\n\n // true if domain is whitelisted for static usage\n return isDomainValid(props.src, staticDomains.value);\n });\n\n const computedProvider = computed(() => {\n if (props.provider) {\n return props.provider;\n }\n\n if (stashOptions?.images?.provider && stashOptions.images.provider !== PROVIDERS.STATIC && !isStaticUrl.value) {\n return stashOptions.images.provider;\n }\n\n return PROVIDERS.STATIC;\n });\n\n const isStatic = computed(() => computedProvider.value === PROVIDERS.STATIC);\n\n const imgProvider = computed(() => providers[computedProvider.value]);\n\n const imgSrc = computed(() =>\n isStatic.value ? getProviderImage() : getProviderImage({ width: PRESET_SIZES.medium.width }),\n );\n\n const imgSizes = computed(() => (props.sizes \|\| !isStatic.value ? getSizes() : undefined));\n\n const imgSrcset = computed(() => (props.sizes && !props.srcset && !isStatic.value ? getSources() : props.srcset));\n\n const parsedSizes = computed(() => {\n if (props.sizes) {\n return parseSizes(props.sizes);\n }\n\n if (!isStatic.value) {\n return parseSizes('lg:large');\n }\n\n return [];\n });\n\n function getProviderImage(modifiers: ImageModifiers = {}) {\n return imgProvider.value.getImageUrl(props.src, modifiers);\n }\n\n function getSources() {\n const appliedPresets = Object.entries(PRESET_SIZES).reduce((obj, [key, entry]) => {\n const isPreset = !!parsedSizes.value.find((size) => size.preset === key);\n\n if (isPreset \|\| entry.alwaysIncluded) {\n obj[key] = entry;\n }\n\n return obj;\n }, {} as typeof PRESET_SIZES);\n\n return Object.values(appliedPresets)\n .map((size) => {\n const width = size.width;\n const src = getProviderImage({ width });\n\n return `${src} ${size.width}w`;\n })\n .join(', ');\n }\n\n function getSizes() {\n return parsedSizes.value.map((v) => `${v.media ? v.media + ' ' : ''}${v.size}`).join(', ');\n }\n\n function parseSizes(providedSizes: string) {\n const variants: ImageSizeVariant[] = [];\n const sizes = {\n default: '100vw',\n };\n\n // parse sizes and convert to object\n if (typeof providedSizes === 'string') {\n const definitions = providedSizes.split(/[\\s]+/).filter((size) => size);\n\n for (const entry of definitions) {\n const size = entry.split(':');\n\n if (size.length !== 2) {\n sizes['default'] = size[0].trim();\n continue;\n }\n\n sizes[size[0].trim()] = size[1].trim();\n }\n } else {\n throw new Error('`sizes` needs to be a string');\n }\n\n for (const key in sizes) {\n const screenMinWidth = parseInt(BREAKPOINTS[key] \|\| 0);\n const sizeValue = sizes[key];\n const presetKey = PRESET_SIZES[sizeValue] ? sizeValue : undefined;\n let size = String(presetKey ? PRESET_SIZES[sizeValue].width : sizeValue);\n const isFluid = size.endsWith('vw');\n\n // default integers to pixels\n if (!isFluid && /^\\d+$/.test(size)) {\n size = `${size}px`;\n }\n\n // ignore invalid size\n if (!isFluid && !size.endsWith('px')) {\n continue;\n }\n\n const variant = {\n media: screenMinWidth ? `(min-width: ${screenMinWidth}px)` : '',\n preset: presetKey,\n screenMinWidth,\n size,\n };\n\n variants.push(variant);\n }\n\n variants.sort((v1, v2) => (v1.screenMinWidth > v2.screenMinWidth ? -1 : 1));\n\n return variants;\n }\n</script>\n\n<template>\n <img\n ref=\"img\"\n :key=\"imgSrc\"\n data-test=\"stash-image\"\n class=\"stash-image\"\n :class=\"{\n 'tw-rounded': props.radius === ImageRadiuses.Rounded,\n }\"\n :src=\"imgSrc\"\n v-bind=\"attrs\"\n />\n</template>\n"],"names":["createMapper","map","key","buildProviderUrl","formatter","value","keyMap","joinWith","valueMap","keyMapper","valueKey","modifiers","mapper","newKey","newVal","isDomainValid","str","domains","host","domain","BASE_URL","IMAGE_PROVIDER_URLS","convertHextoRGBFormat","operationsGenerator","defaultModifiers","getImageUrl","src","mergeModifiers","merge","operations","providers","cloudinary","staticProvider","PRESET_SIZES","ImageRadiuses","PROVIDERS","BREAKPOINTS","SCREEN_SIZES","stashOptions","inject","attrs","computed","useAttrs","imgSizes","imgSrcset","staticDomains","_a","isStaticUrl","props","computedProvider","isStatic","imgProvider","imgSrc","getProviderImage","getSizes","getSources","parsedSizes","parseSizes","appliedPresets","obj","entry","size","width","v","providedSizes","variants","sizes","definitions","screenMinWidth","sizeValue","presetKey","isFluid","variant","v1","v2"],"mappings":"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"}

package/dist/Image.vue.d.ts CHANGED Viewed

@@ -31,20 +31,20 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     src: string;
     srcset: string;
     sizes: string;
-    provider: null;
+    provider: undefined;
     radius: string;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ImageProps>, {
     src: string;
     srcset: string;
     sizes: string;
-    provider: null;
+    provider: undefined;
     radius: string;
 }>>>, {
     src: string;
     radius: "none" | "rounded";
     srcset: string;
     sizes: string;
-    provider: StashImageProviders | null;
+    provider: "static" | "cloudinary";
 }, {}>;
 export default _default;
@@ -72,7 +72,7 @@ export declare interface ImageProps {
      * When not provided, the provider is also inferred by `isStatic`:
      *  - `static` for relative/absolute paths (`img/foo.jpg` or `/static/img/bar.jpg`), or when whitelisted absolute URLs are used (included in `staticOptions.images.staticDomains`).
      */
-    provider?: StashImageProviders | null;
+    provider?: StashImageProviders;
     /**
      * For applying border radius
      */
@@ -116,9 +116,14 @@ export declare const PRESET_SIZES: {
     };
 };
+declare enum StashImageProvider {
+    Static = "static",
+    Cloudinary = "cloudinary"
+}
 /**
  * Image
  */
-declare type StashImageProviders = 'cloudinary' | 'static';
+declare type StashImageProviders = `${StashImageProvider}`;
 export { }

package/dist/Modal.js CHANGED Viewed

@@ -1,17 +1,17 @@
-import { defineComponent as H, useSlots as I, ref as d, computed as x, watch as $, onBeforeUnmount as K, openBlock as a, createElementBlock as w, normalizeClass as s, withKeys as R, createVNode as C, withModifiers as j, createElementVNode as g, unref as f, renderSlot as m, toDisplayString as T, createCommentVNode as i, createBlock as F, withCtx as L } from "vue";
-import V from "lodash-es/uniqueId";
-import { FOCUS_ELEMENTS_SELECTOR as A } from "./constants.js";
-import { t as M } from "./locale.js";
-import q from "./Backdrop.js";
-import N from "./Button.js";
-import D from "./Icon.js";
-import { _ as P } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as D, useSlots as K, ref as r, computed as k, watch as L, onBeforeUnmount as R, openBlock as s, createElementBlock as f, normalizeClass as i, withKeys as T, createVNode as x, withModifiers as j, createElementVNode as g, unref as w, renderSlot as m, toDisplayString as V, createCommentVNode as n, createBlock as F, withCtx as H } from "vue";
+import A from "lodash-es/uniqueId";
+import { FOCUS_ELEMENTS_SELECTOR as q } from "./constants.js";
+import { t as I } from "./locale.js";
+import P from "./Backdrop.js";
+import M from "./Button.js";
+import N from "./Icon.js";
+import { _ as U } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-var U = /* @__PURE__ */ ((l) => (l.Narrow = "narrow", l.Medium = "medium", l.Wide = "wide", l))(U || {}), W = /* @__PURE__ */ ((l) => (l.Center = "center", l.Left = "left", l.Right = "right", l))(W || {});
-const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place-items-center" }, X = ["id"], Y = { class: "stash-modal__footer__actions tw-flex tw-flex-col tw-justify-end lg:tw-flex-row" }, Z = /* @__PURE__ */ H({
+var W = /* @__PURE__ */ ((l) => (l.Narrow = "narrow", l.Medium = "medium", l.Wide = "wide", l))(W || {}), G = /* @__PURE__ */ ((l) => (l.Center = "center", l.Left = "left", l.Right = "right", l))(G || {});
+const J = ["onKeydown"], Q = ["aria-labelledby"], X = { class: "tw-flex tw-place-items-center" }, Y = ["id"], Z = { class: "stash-modal__footer__actions tw-flex tw-flex-col tw-justify-end lg:tw-flex-row" }, ee = /* @__PURE__ */ D({
   name: "ll-modal",
   __name: "Modal",
   props: {
@@ -30,105 +30,109 @@ const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place
   },
   emits: ["update:open", "update:is-open", "dismiss"],
   setup(l, { emit: _ }) {
-    const e = l, y = I(), r = d(), E = d(), p = d([]), b = d(), k = d(), u = d({ height: "", overflow: "" }), B = V("modal-header-"), z = x(() => !!y.actions || !!y.footer), o = x(() => e.open || e.isOpen), n = x(() => e.position === "left" || e.position === "right");
-    function h() {
+    const e = l, y = K(), u = r(), C = r(), h = r([]), b = r(), E = r(), c = r({ height: "", overflow: "" }), B = A("modal-header-"), z = k(() => !!y.actions || !!y.footer), o = k(() => e.open || e.isOpen), d = k(() => e.position === "left" || e.position === "right");
+    function p() {
       return document.scrollingElement || document.body;
     }
-    $(
+    L(
       o,
       () => {
-        o.value && Object.assign(u.value, {
-          height: h().style.height,
-          overflow: h().style.overflow
-        }), Object.assign(h().style, {
-          overflow: o.value ? "hidden" : u.value.overflow,
+        S(o.value ? "hide" : "show"), o.value && Object.assign(c.value, {
+          height: p().style.height,
+          overflow: p().style.overflow
+        }), Object.assign(p().style, {
+          overflow: o.value ? "hidden" : c.value.overflow,
           // Prevents page from scrolling when modal is open
-          height: o.value ? "100%" : u.value.height
+          height: o.value ? "100%" : c.value.height
           // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535
         });
       },
       { immediate: !0 }
-    ), K(() => {
+    ), R(() => {
       var t;
-      Object.assign(h().style, {
-        overflow: u.value.overflow,
-        height: u.value.height
-      }), document.removeEventListener("keydown", O), (t = E.value) == null || t.focus();
+      S("show"), Object.assign(p().style, {
+        overflow: c.value.overflow,
+        height: c.value.height
+      }), document.removeEventListener("keydown", O), (t = C.value) == null || t.focus();
     });
     function v() {
       _("update:open", !1), _("update:is-open", !1), _("dismiss");
     }
-    $(r, () => {
-      r.value && (E.value = document.activeElement, r.value.focus(), p.value = Array.from(r.value.querySelectorAll(A)), b.value = p.value[0], k.value = p.value[p.value.length - 1], document.addEventListener("keydown", O));
+    L(u, () => {
+      u.value && (C.value = document.activeElement, u.value.focus(), h.value = Array.from(u.value.querySelectorAll(q)), b.value = h.value[0], E.value = h.value[h.value.length - 1], document.addEventListener("keydown", O));
     });
     function O(t) {
-      var c, S;
-      t.key === "Tab" && (t.shiftKey && document.activeElement === b.value ? ((c = k.value) == null || c.focus(), t.preventDefault()) : document.activeElement === k.value && ((S = b.value) == null || S.focus(), t.preventDefault()));
+      var a, $;
+      t.key === "Tab" && (t.shiftKey && document.activeElement === b.value ? ((a = E.value) == null || a.focus(), t.preventDefault()) : document.activeElement === E.value && (($ = b.value) == null || $.focus(), t.preventDefault()));
     }
-    return (t, c) => o.value ? (a(), w("div", {
+    function S(t) {
+      const a = document.getElementById("launcher");
+      !a || !a.parentElement || (a.parentElement.style.display = t === "show" ? "block" : "none");
+    }
+    return (t, a) => o.value ? (s(), f("div", {
       key: 0,
       ref_key: "rootRef",
-      ref: r,
-      class: s(["stash-modal tw-fixed tw-inset-0 tw-overflow-y-auto", {
+      ref: u,
+      class: i(["stash-modal tw-fixed tw-inset-0 tw-overflow-y-auto", {
         "tw-invisible tw-z-behind": !o.value,
         "tw-visible tw-z-modal": o.value,
         "lg:tw-flex lg:tw-flex-col lg:tw-items-center lg:tw-justify-center": e.position === "center"
       }]),
       "data-test": "ll-modal",
       tabindex: "0",
-      onKeydown: R(v, ["esc"])
+      onKeydown: T(v, ["esc"])
     }, [
-      C(q, {
+      x(P, {
         class: "stash-modal__backdrop",
         onClick: j(v, ["stop"])
       }, null, 8, ["onClick"]),
       g("div", {
         "aria-modal": "true",
         role: "dialog",
-        "aria-labelledby": f(B),
-        class: s(["stash-modal__dialog tw-relative tw-flex tw-h-screen tw-w-full tw-flex-col lg:tw-shadow", [
+        "aria-labelledby": w(B),
+        class: i(["stash-modal__dialog tw-relative tw-flex tw-h-screen tw-w-full tw-flex-col lg:tw-shadow", [
           `stash-modal__dialog--size-${e.size}`,
           `stash-modal__dialog--position-${e.position}`,
           {
             "stash-modal__dialog--is-open": o.value,
-            "stash-modal__dialog--is-drawer": n.value,
+            "stash-modal__dialog--is-drawer": d.value,
             "stash-modal__dialog--is-contrast": e.contrast,
             "stash-modal__dialog--is-scrollable": e.scrollable,
             "lg:tw-w-[360px]": e.size === "narrow",
             "lg:tw-w-[648px]": e.size === "medium",
             "lg:tw-w-[960px]": e.size === "wide",
             "lg:tw-my-0 lg:tw-h-auto lg:tw-max-h-[90vh]": e.position === "center",
-            "lg:tw-absolute lg:tw-h-screen": n.value,
+            "lg:tw-absolute lg:tw-h-screen": d.value,
             "lg:tw-left-0": e.position === "left",
             "lg:tw-right-0": e.position === "right"
           }
         ]]),
-        onClick: c[0] || (c[0] = j(() => {
+        onClick: a[0] || (a[0] = j(() => {
         }, ["stop"]))
       }, [
-        e.hideHeader ? i("", !0) : (a(), w("header", {
+        e.hideHeader ? n("", !0) : (s(), f("header", {
           key: 0,
           "data-test": "stash-modal__header",
-          class: s(["stash-modal__header tw-grid tw-h-12 tw-place-items-center tw-bg-purple-500", { "lg:tw-rounded-t": !n.value }])
+          class: i(["stash-modal__header tw-grid tw-h-12 tw-place-items-center tw-bg-purple-500", { "lg:tw-rounded-t": !d.value }])
         }, [
-          g("div", Q, [
+          g("div", X, [
             m(t.$slots, "headerAction", {}, void 0, !0)
           ]),
-          e.title ? (a(), w("h3", {
+          e.title ? (s(), f("h3", {
             key: 0,
-            id: f(B),
+            id: w(B),
             class: "tw-m-0 tw-flex-1 tw-leading-6 tw-text-white"
-          }, T(e.title), 9, X)) : i("", !0),
-          e.hideClose ? i("", !0) : (a(), F(N, {
+          }, V(e.title), 9, Y)) : n("", !0),
+          e.hideClose ? n("", !0) : (s(), F(M, {
             key: 1,
             icon: "",
             "data-test": "ll-modal-close",
-            title: f(M)("ll.closeModal"),
+            title: w(I)("ll.closeModal"),
             type: "button",
             onClick: v
           }, {
-            default: L(() => [
-              C(D, {
+            default: H(() => [
+              x(N, {
                 class: "tw-text-white",
                 name: "close"
               })
@@ -136,37 +140,37 @@ const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place
             _: 1
           }, 8, ["title"]))
         ], 2)),
-        !e.hideClose && e.hideHeader ? (a(), F(N, {
+        !e.hideClose && e.hideHeader ? (s(), F(M, {
           key: 1,
           class: "tw-absolute tw-right-0 tw-top-0 tw-z-10",
           icon: "",
           "data-test": "ll-modal-close",
           type: "button",
-          title: f(M)("ll.closeModal"),
+          title: w(I)("ll.closeModal"),
           onClick: v
         }, {
-          default: L(() => [
-            C(D, {
-              class: s(["tw-drop-shadow-md", [e.closeButtonColorClass]]),
+          default: H(() => [
+            x(N, {
+              class: i(["tw-drop-shadow-md", [e.closeButtonColorClass]]),
               name: "close"
             }, null, 8, ["class"])
           ]),
           _: 1
-        }, 8, ["title"])) : i("", !0),
-        f(y)["featured-content"] ? (a(), w("div", {
+        }, 8, ["title"])) : n("", !0),
+        w(y)["featured-content"] ? (s(), f("div", {
           key: 2,
-          class: s(["stash-modal__featured-content tw-relative", {
+          class: i(["stash-modal__featured-content tw-relative", {
             "tw-rounded-t": e.hideHeader
           }])
         }, [
           m(t.$slots, "featured-content", {}, void 0, !0)
-        ], 2)) : i("", !0),
+        ], 2)) : n("", !0),
         g("div", {
-          class: s(["stash-modal__body tw-flex-1 tw-overflow-y-auto", [
+          class: i(["stash-modal__body tw-flex-1 tw-overflow-y-auto", [
             {
               "tw-p-3 lg:tw-p-6": !e.disableBodyPadding,
-              "lg:tw-overflow-y-visible": !e.scrollable && !n.value,
-              "lg:tw-rounded-b": !z.value && !n.value,
+              "lg:tw-overflow-y-visible": !e.scrollable && !d.value,
+              "lg:tw-rounded-b": !z.value && !d.value,
               "tw-bg-white": !e.contrast,
               "tw-bg-ice-200": e.contrast
             }
@@ -175,24 +179,24 @@ const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place
         }, [
           m(t.$slots, "default", {}, void 0, !0)
         ], 2),
-        z.value ? (a(), w("footer", {
+        z.value ? (s(), f("footer", {
           key: 3,
-          class: s(["stash-modal__footer tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-p-6", { "lg:tw-rounded-b": !n.value }])
+          class: i(["stash-modal__footer tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-p-6", { "lg:tw-rounded-b": !d.value }])
         }, [
           m(t.$slots, "footer", {}, () => [
-            g("div", Y, [
+            g("div", Z, [
               m(t.$slots, "actions", {}, void 0, !0)
             ])
           ], !0)
-        ], 2)) : i("", !0)
-      ], 10, J)
-    ], 42, G)) : i("", !0);
+        ], 2)) : n("", !0)
+      ], 10, Q)
+    ], 42, J)) : n("", !0);
   }
 });
-const we = /* @__PURE__ */ P(Z, [["__scopeId", "data-v-87b2b608"]]);
+const we = /* @__PURE__ */ U(ee, [["__scopeId", "data-v-8f85d4f8"]]);
 export {
-  W as ModalPosition,
-  U as ModalSize,
+  G as ModalPosition,
+  W as ModalSize,
   we as default
 };
 //# sourceMappingURL=Modal.js.map

package/dist/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.types.ts","../src/components/Modal/Modal.vue"],"sourcesContent":["export enum ModalSize {\n Narrow = 'narrow',\n Medium = 'medium',\n Wide = 'wide',\n}\n\nexport type ModalSizes = `${ModalSize}`;\n\nexport enum ModalPosition {\n Center = 'center',\n Left = 'left',\n Right = 'right',\n}\n\nexport type ModalPositions = `${ModalPosition}`;\n","<script lang=\"ts\">\n import { ModalPositions, ModalSizes } from './Modal.types';\n\n export * from './Modal.types';\n\n export interface ModalProps {\n /*\n Hides the \"close\" button\n /\n hideClose?: boolean;\n\n /\n Opens the modal when truthy; hides the modal when falsy.\n * @deprecated Use `isOpen` instead\n /\n open?: boolean;\n\n /\n Opens the modal when truthy; hides the modal when falsy.\n /\n isOpen?: boolean;\n\n /\n Use v-model:is-open or :is-open instead of :model-value and v-model.\n * @deprecated\n /\n modelValue?: boolean;\n\n /\n Sets a preset max-width on the modal.\n * Options: default (648px), narrow (360px), wide (960px)\n /\n size?: ModalSizes;\n\n /\n Should the modal be scrollable within the content area. This prop is treated as `true` when the `position` prop is set to \"left\" or \"right\".\n /\n scrollable?: boolean;\n\n /\n Gives the modal body have a light gray background\n /\n contrast?: boolean;\n\n /\n Text to display in the modal header\n /\n title?: string;\n\n /\n Disables the default padding in the modal body.\n /\n disableBodyPadding?: boolean;\n\n /\n The position on the screen to display the modal.\n /\n position?: ModalPositions;\n\n /\n Hide the header. Typically used with the featuredContent slot to display a graphic and create a \"promo\" modal.\n /\n hideHeader?: boolean;\n\n /\n Add classes to the close button. This can be used with the hideHeader prop and featuredContent slot to\n * accommodate images with different color backgrounds.\n /\n closeButtonColorClass?: string;\n }\n</script>\n\n<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue';\n\n import { FOCUS_ELEMENTS_SELECTOR } from '../../constants';\n import { t } from '../../locale';\n import Backdrop from '../Backdrop/Backdrop.vue';\n import Button from '../Button/Button.vue';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({ name: 'll-modal' });\n\n const props = withDefaults(defineProps<ModalProps>(), {\n hideClose: false,\n open: false,\n isOpen: false,\n modelValue: false,\n size: 'medium',\n scrollable: false,\n contrast: false,\n title: '',\n position: 'center',\n hideHeader: false,\n closeButtonColorClass: 'tw-text-white/50',\n });\n\n const emit =\n defineEmits<{\n /\n @deprecated Use the `update:is-open` event instead\n /\n (e: 'update:open', isOpen?: boolean): void;\n (e: 'update:is-open', isOpen?: boolean): void;\n (e: 'dismiss'): void;\n }>();\n\n const slots = useSlots();\n\n const rootRef = ref<HTMLElement>();\n const lastExternalFocusedElement = ref<HTMLElement>();\n const focusElements = ref<HTMLElement[]>([]);\n const firstFocusElement = ref<HTMLElement>();\n const lastFocusElement = ref<HTMLElement>();\n const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n const headerId = uniqueId('modal-header-');\n const hasFooterContent = computed(() => !!slots.actions \|\| !!slots.footer);\n const isModalOpen = computed(() => props.open \|\| props.isOpen);\n const isDrawer = computed(() => props.position === 'left' \|\| props.position === 'right');\n\n function getPageScrollingElement() {\n return (document.scrollingElement \|\| document.body) as HTMLElement;\n }\n\n watch(\n isModalOpen,\n () => {\n if (isModalOpen.value) {\n Object.assign(initialPageScrollingElementStyle.value, {\n height: getPageScrollingElement().style.height,\n overflow: getPageScrollingElement().style.overflow,\n });\n }\n\n Object.assign(getPageScrollingElement().style, {\n overflow: isModalOpen.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when modal is open\n height: isModalOpen.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535\n });\n },\n { immediate: true },\n );\n\n onBeforeUnmount(() => {\n // In cases where the watchEffect for isModalOpen isn't triggered while closing/nagivating away from modal, this ensures scrolling returns to normal\n Object.assign(getPageScrollingElement().style, {\n overflow: initialPageScrollingElementStyle.value.overflow,\n height: initialPageScrollingElementStyle.value.height,\n });\n\n // Clear focus trap tab listener\n document.removeEventListener('keydown', handleTab);\n lastExternalFocusedElement.value?.focus();\n });\n\n function dismiss() {\n emit('update:open', false);\n emit('update:is-open', false);\n emit('dismiss');\n }\n\n // This watcher ensures the Tab key cycles through focusable elements within the modal.\n watch(rootRef, () => {\n if (!rootRef.value) {\n return;\n }\n\n lastExternalFocusedElement.value = document.activeElement as HTMLElement;\n rootRef.value.focus();\n\n focusElements.value = Array.from(rootRef.value.querySelectorAll<HTMLElement>(FOCUS_ELEMENTS_SELECTOR));\n firstFocusElement.value = focusElements.value[0];\n lastFocusElement.value = focusElements.value[focusElements.value.length - 1];\n document.addEventListener('keydown', handleTab);\n });\n\n function handleTab(e) {\n if (e.key === 'Tab') {\n if (e.shiftKey && document.activeElement === firstFocusElement.value) {\n lastFocusElement.value?.focus();\n e.preventDefault();\n } else if (document.activeElement === lastFocusElement.value) {\n firstFocusElement.value?.focus();\n e.preventDefault();\n }\n }\n }\n</script>\n\n<template>\n <div\n v-if=\"isModalOpen\"\n ref=\"rootRef\"\n class=\"stash-modal tw-fixed tw-inset-0 tw-overflow-y-auto\"\n :class=\"{\n 'tw-invisible tw-z-behind': !isModalOpen,\n 'tw-visible tw-z-modal': isModalOpen,\n 'lg:tw-flex lg:tw-flex-col lg:tw-items-center lg:tw-justify-center': props.position === 'center',\n }\"\n data-test=\"ll-modal\"\n tabindex=\"0\"\n @keydown.esc=\"dismiss\"\n >\n <Backdrop class=\"stash-modal__backdrop\" @click.stop=\"dismiss\" />\n <div\n aria-modal=\"true\"\n role=\"dialog\"\n :aria-labelledby=\"headerId\"\n class=\"stash-modal__dialog tw-relative tw-flex tw-h-screen tw-w-full tw-flex-col lg:tw-shadow\"\n :class=\"[\n `stash-modal__dialog--size-${props.size}`,\n `stash-modal__dialog--position-${props.position}`,\n {\n 'stash-modal__dialog--is-open': isModalOpen,\n 'stash-modal__dialog--is-drawer': isDrawer,\n 'stash-modal__dialog--is-contrast': props.contrast,\n 'stash-modal__dialog--is-scrollable': props.scrollable,\n 'lg:tw-w-[360px]': props.size === 'narrow',\n 'lg:tw-w-[648px]': props.size === 'medium',\n 'lg:tw-w-[960px]': props.size === 'wide',\n 'lg:tw-my-0 lg:tw-h-auto lg:tw-max-h-[90vh]': props.position === 'center',\n 'lg:tw-absolute lg:tw-h-screen': isDrawer,\n 'lg:tw-left-0': props.position === 'left',\n 'lg:tw-right-0': props.position === 'right',\n },\n ]\"\n @click.stop\n >\n <header\n v-if=\"!props.hideHeader\"\n data-test=\"stash-modal__header\"\n class=\"stash-modal__header tw-grid tw-h-12 tw-place-items-center tw-bg-purple-500\"\n :class=\"{ 'lg:tw-rounded-t': !isDrawer }\"\n >\n <div class=\"tw-flex tw-place-items-center\">\n <!-- @slot Adds an action to the left side of the header bar. An example usage is a modal with multiple pages and a back button can be inserted here -->\n <slot name=\"headerAction\"></slot>\n </div>\n\n <h3 v-if=\"props.title\" :id=\"headerId\" class=\"tw-m-0 tw-flex-1 tw-leading-6 tw-text-white\">\n {{ props.title }}\n </h3>\n\n <Button\n v-if=\"!props.hideClose\"\n icon\n data-test=\"ll-modal-close\"\n :title=\"t('ll.closeModal')\"\n type=\"button\"\n @click=\"dismiss\"\n >\n <Icon class=\"tw-text-white\" name=\"close\" />\n </Button>\n </header>\n\n <Button\n v-if=\"!props.hideClose && props.hideHeader\"\n class=\"tw-absolute tw-right-0 tw-top-0 tw-z-10\"\n icon\n data-test=\"ll-modal-close\"\n type=\"button\"\n :title=\"t('ll.closeModal')\"\n @click=\"dismiss\"\n >\n <Icon class=\"tw-drop-shadow-md\" name=\"close\" :class=\"[props.closeButtonColorClass]\" />\n </Button>\n\n <div\n v-if=\"!!slots['featured-content']\"\n class=\"stash-modal__featured-content tw-relative\"\n :class=\"{\n 'tw-rounded-t': props.hideHeader,\n }\"\n >\n <slot name=\"featured-content\"></slot>\n </div>\n\n <div\n class=\"stash-modal__body tw-flex-1 tw-overflow-y-auto\"\n :class=\"[\n {\n 'tw-p-3 lg:tw-p-6': !props.disableBodyPadding,\n 'lg:tw-overflow-y-visible': !props.scrollable && !isDrawer,\n 'lg:tw-rounded-b': !hasFooterContent && !isDrawer,\n 'tw-bg-white': !props.contrast,\n 'tw-bg-ice-200': props.contrast,\n },\n ]\"\n data-test=\"stash-modal__body\"\n >\n <slot></slot>\n </div>\n\n <footer\n v-if=\"hasFooterContent\"\n class=\"stash-modal__footer tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-p-6\"\n :class=\"{ 'lg:tw-rounded-b': !isDrawer }\"\n >\n <!-- @slot Overrides the whole footer section. Used for rendering custom footers with more than 2 actions. If defined, \"actions\" slot will get ignored. -->\n <slot name=\"footer\">\n <div class=\"stash-modal__footer__actions tw-flex tw-flex-col tw-justify-end lg:tw-flex-row\">\n <!-- @slot Modal footer actions, supports rendering up to 2 `<Button>` children -->\n <slot name=\"actions\"></slot>\n </div>\n </slot>\n </footer>\n </div>\n </div>\n</template>\n\n<style scoped>\n .stash-modal__header {\n grid-template-columns: 48px 1fr 48px;\n }\n\n .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n order: 2;\n }\n\n .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n margin-bottom: theme('spacing.3');\n order: 1;\n }\n\n @media screen('lg') {\n .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n order: 1;\n }\n\n .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n margin-bottom: 0;\n order: 2;\n }\n\n .stash-modal__footer__actions > :deep(.stash-button + .stash-button) {\n margin-left: var(--grid-gutter);\n }\n }\n\n .stash-modal__featured-content > :deep() {\n border-radius: inherit;\n }\n</style>\n"],"names":["ModalSize","ModalPosition","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","props","isDrawer","getPageScrollingElement","watch","onBeforeUnmount","handleTab","_a","dismiss","emit","FOCUS_ELEMENTS_SELECTOR","e","_b"],"mappings":";;;;;;;;;;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCoGJC,IAAQC,KAERC,IAAUC,KACVC,IAA6BD,KAC7BE,IAAgBF,EAAmB,CAAA,CAAE,GACrCG,IAAoBH,KACpBI,IAAmBJ,KACnBK,IAAmCL,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEM,IAAWC,EAAS,eAAe,GACnCC,IAAmBC,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAW,CAAC,CAACA,EAAM,MAAM,GACnEa,IAAcD,EAAS,MAAME,EAAM,QAAQA,EAAM,MAAM,GACvDC,IAAWH,EAAS,MAAME,EAAM,aAAa,UAAUA,EAAM,aAAa,OAAO;AAEvF,aAASE,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,IAAAC;AAAA,MACEJ;AAAA,MACA,MAAM;AACJ,QAAIA,EAAY,SACP,OAAA,OAAOL,EAAiC,OAAO;AAAA,UACpD,QAAQQ,IAA0B,MAAM;AAAA,UACxC,UAAUA,IAA0B,MAAM;AAAA,QAAA,CAC3C,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,UAC7C,UAAUH,EAAY,QAAQ,WAAWL,EAAiC,MAAM;AAAA;AAAA,UAChF,QAAQK,EAAY,QAAQ,SAASL,EAAiC,MAAM;AAAA;AAAA,QAAA,CAC7E;AAAA,MACH;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBU,EAAgB,MAAM;;AAEb,aAAA,OAAOF,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAiC,MAAM;AAAA,QACjD,QAAQA,EAAiC,MAAM;AAAA,MAAA,CAChD,GAGQ,SAAA,oBAAoB,WAAWW,CAAS,IACjDC,IAAAhB,EAA2B,UAA3B,QAAAgB,EAAkC;AAAA,IAAM,CACzC;AAED,aAASC,IAAU;AACjB,MAAAC,EAAK,eAAe,EAAK,GACzBA,EAAK,kBAAkB,EAAK,GAC5BA,EAAK,SAAS;AAAA,IAChB;AAGA,IAAAL,EAAMf,GAAS,MAAM;AACf,MAACA,EAAQ,UAIbE,EAA2B,QAAQ,SAAS,eAC5CF,EAAQ,MAAM,SAEdG,EAAc,QAAQ,MAAM,KAAKH,EAAQ,MAAM,iBAA8BqB,CAAuB,CAAC,GACnFjB,EAAA,QAAQD,EAAc,MAAM,CAAC,GAC/CE,EAAiB,QAAQF,EAAc,MAAMA,EAAc,MAAM,SAAS,CAAC,GAClE,SAAA,iBAAiB,WAAWc,CAAS;AAAA,IAAA,CAC/C;AAED,aAASA,EAAUK,GAAG;;AAChB,MAAAA,EAAE,QAAQ,UACRA,EAAE,YAAY,SAAS,kBAAkBlB,EAAkB,UAC7Dc,IAAAb,EAAiB,UAAjB,QAAAa,EAAwB,SACxBI,EAAE,eAAe,KACR,SAAS,kBAAkBjB,EAAiB,WACrDkB,IAAAnB,EAAkB,UAAlB,QAAAmB,EAAyB,SACzBD,EAAE,eAAe;AAAA,IAGvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.types.ts","../src/components/Modal/Modal.vue"],"sourcesContent":["export enum ModalSize {\n Narrow = 'narrow',\n Medium = 'medium',\n Wide = 'wide',\n}\n\nexport type ModalSizes = `${ModalSize}`;\n\nexport enum ModalPosition {\n Center = 'center',\n Left = 'left',\n Right = 'right',\n}\n\nexport type ModalPositions = `${ModalPosition}`;\n","<script lang=\"ts\">\n import { ModalPositions, ModalSizes } from './Modal.types';\n\n export * from './Modal.types';\n\n export interface ModalProps {\n /*\n Hides the \"close\" button\n /\n hideClose?: boolean;\n\n /\n Opens the modal when truthy; hides the modal when falsy.\n * @deprecated Use `isOpen` instead\n /\n open?: boolean;\n\n /\n Opens the modal when truthy; hides the modal when falsy.\n /\n isOpen?: boolean;\n\n /\n Use v-model:is-open or :is-open instead of :model-value and v-model.\n * @deprecated\n /\n modelValue?: boolean;\n\n /\n Sets a preset max-width on the modal.\n * Options: default (648px), narrow (360px), wide (960px)\n /\n size?: ModalSizes;\n\n /\n Should the modal be scrollable within the content area. This prop is treated as `true` when the `position` prop is set to \"left\" or \"right\".\n /\n scrollable?: boolean;\n\n /\n Gives the modal body have a light gray background\n /\n contrast?: boolean;\n\n /\n Text to display in the modal header\n /\n title?: string;\n\n /\n Disables the default padding in the modal body.\n /\n disableBodyPadding?: boolean;\n\n /\n The position on the screen to display the modal.\n /\n position?: ModalPositions;\n\n /\n Hide the header. Typically used with the featuredContent slot to display a graphic and create a \"promo\" modal.\n /\n hideHeader?: boolean;\n\n /\n Add classes to the close button. This can be used with the hideHeader prop and featuredContent slot to\n * accommodate images with different color backgrounds.\n /\n closeButtonColorClass?: string;\n }\n</script>\n\n<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue';\n\n import { FOCUS_ELEMENTS_SELECTOR } from '../../constants';\n import { t } from '../../locale';\n import Backdrop from '../Backdrop/Backdrop.vue';\n import Button from '../Button/Button.vue';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({ name: 'll-modal' });\n\n const props = withDefaults(defineProps<ModalProps>(), {\n hideClose: false,\n open: false,\n isOpen: false,\n modelValue: false,\n size: 'medium',\n scrollable: false,\n contrast: false,\n title: '',\n position: 'center',\n hideHeader: false,\n closeButtonColorClass: 'tw-text-white/50',\n });\n\n const emit =\n defineEmits<{\n /\n @deprecated Use the `update:is-open` event instead\n /\n (e: 'update:open', isOpen?: boolean): void;\n (e: 'update:is-open', isOpen?: boolean): void;\n (e: 'dismiss'): void;\n }>();\n\n const slots = useSlots();\n\n const rootRef = ref<HTMLElement>();\n const lastExternalFocusedElement = ref<HTMLElement>();\n const focusElements = ref<HTMLElement[]>([]);\n const firstFocusElement = ref<HTMLElement>();\n const lastFocusElement = ref<HTMLElement>();\n const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n const headerId = uniqueId('modal-header-');\n const hasFooterContent = computed(() => !!slots.actions \|\| !!slots.footer);\n const isModalOpen = computed(() => props.open \|\| props.isOpen);\n const isDrawer = computed(() => props.position === 'left' \|\| props.position === 'right');\n\n function getPageScrollingElement() {\n return (document.scrollingElement \|\| document.body) as HTMLElement;\n }\n\n watch(\n isModalOpen,\n () => {\n toggleHelpWidgetLauncher(isModalOpen.value ? 'hide' : 'show');\n\n if (isModalOpen.value) {\n Object.assign(initialPageScrollingElementStyle.value, {\n height: getPageScrollingElement().style.height,\n overflow: getPageScrollingElement().style.overflow,\n });\n }\n\n Object.assign(getPageScrollingElement().style, {\n overflow: isModalOpen.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when modal is open\n height: isModalOpen.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535\n });\n },\n { immediate: true },\n );\n\n onBeforeUnmount(() => {\n toggleHelpWidgetLauncher('show');\n\n // In cases where the watchEffect for isModalOpen isn't triggered while closing/nagivating away from modal, this ensures scrolling returns to normal\n Object.assign(getPageScrollingElement().style, {\n overflow: initialPageScrollingElementStyle.value.overflow,\n height: initialPageScrollingElementStyle.value.height,\n });\n\n // Clear focus trap tab listener\n document.removeEventListener('keydown', handleTab);\n lastExternalFocusedElement.value?.focus();\n });\n\n function dismiss() {\n emit('update:open', false);\n emit('update:is-open', false);\n emit('dismiss');\n }\n\n // This watcher ensures the Tab key cycles through focusable elements within the modal.\n watch(rootRef, () => {\n if (!rootRef.value) {\n return;\n }\n\n lastExternalFocusedElement.value = document.activeElement as HTMLElement;\n rootRef.value.focus();\n\n focusElements.value = Array.from(rootRef.value.querySelectorAll<HTMLElement>(FOCUS_ELEMENTS_SELECTOR));\n firstFocusElement.value = focusElements.value[0];\n lastFocusElement.value = focusElements.value[focusElements.value.length - 1];\n document.addEventListener('keydown', handleTab);\n });\n\n function handleTab(e) {\n if (e.key === 'Tab') {\n if (e.shiftKey && document.activeElement === firstFocusElement.value) {\n lastFocusElement.value?.focus();\n e.preventDefault();\n } else if (document.activeElement === lastFocusElement.value) {\n firstFocusElement.value?.focus();\n e.preventDefault();\n }\n }\n }\n\n /\n The customer support \"help widget launcher\" covers the action buttons in the Modal when the Modal uses a position value of \"right\" (for drawers).\n /\n function toggleHelpWidgetLauncher(nextState: 'show' \| 'hide') {\n const launcherElement = document.getElementById('launcher');\n\n if (!launcherElement \|\| !launcherElement.parentElement) {\n return;\n }\n\n launcherElement.parentElement.style.display = nextState === 'show' ? 'block' : 'none';\n }\n</script>\n\n<template>\n <div\n v-if=\"isModalOpen\"\n ref=\"rootRef\"\n class=\"stash-modal tw-fixed tw-inset-0 tw-overflow-y-auto\"\n :class=\"{\n 'tw-invisible tw-z-behind': !isModalOpen,\n 'tw-visible tw-z-modal': isModalOpen,\n 'lg:tw-flex lg:tw-flex-col lg:tw-items-center lg:tw-justify-center': props.position === 'center',\n }\"\n data-test=\"ll-modal\"\n tabindex=\"0\"\n @keydown.esc=\"dismiss\"\n >\n <Backdrop class=\"stash-modal__backdrop\" @click.stop=\"dismiss\" />\n <div\n aria-modal=\"true\"\n role=\"dialog\"\n :aria-labelledby=\"headerId\"\n class=\"stash-modal__dialog tw-relative tw-flex tw-h-screen tw-w-full tw-flex-col lg:tw-shadow\"\n :class=\"[\n `stash-modal__dialog--size-${props.size}`,\n `stash-modal__dialog--position-${props.position}`,\n {\n 'stash-modal__dialog--is-open': isModalOpen,\n 'stash-modal__dialog--is-drawer': isDrawer,\n 'stash-modal__dialog--is-contrast': props.contrast,\n 'stash-modal__dialog--is-scrollable': props.scrollable,\n 'lg:tw-w-[360px]': props.size === 'narrow',\n 'lg:tw-w-[648px]': props.size === 'medium',\n 'lg:tw-w-[960px]': props.size === 'wide',\n 'lg:tw-my-0 lg:tw-h-auto lg:tw-max-h-[90vh]': props.position === 'center',\n 'lg:tw-absolute lg:tw-h-screen': isDrawer,\n 'lg:tw-left-0': props.position === 'left',\n 'lg:tw-right-0': props.position === 'right',\n },\n ]\"\n @click.stop\n >\n <header\n v-if=\"!props.hideHeader\"\n data-test=\"stash-modal__header\"\n class=\"stash-modal__header tw-grid tw-h-12 tw-place-items-center tw-bg-purple-500\"\n :class=\"{ 'lg:tw-rounded-t': !isDrawer }\"\n >\n <div class=\"tw-flex tw-place-items-center\">\n <!-- @slot Adds an action to the left side of the header bar. An example usage is a modal with multiple pages and a back button can be inserted here -->\n <slot name=\"headerAction\"></slot>\n </div>\n\n <h3 v-if=\"props.title\" :id=\"headerId\" class=\"tw-m-0 tw-flex-1 tw-leading-6 tw-text-white\">\n {{ props.title }}\n </h3>\n\n <Button\n v-if=\"!props.hideClose\"\n icon\n data-test=\"ll-modal-close\"\n :title=\"t('ll.closeModal')\"\n type=\"button\"\n @click=\"dismiss\"\n >\n <Icon class=\"tw-text-white\" name=\"close\" />\n </Button>\n </header>\n\n <Button\n v-if=\"!props.hideClose && props.hideHeader\"\n class=\"tw-absolute tw-right-0 tw-top-0 tw-z-10\"\n icon\n data-test=\"ll-modal-close\"\n type=\"button\"\n :title=\"t('ll.closeModal')\"\n @click=\"dismiss\"\n >\n <Icon class=\"tw-drop-shadow-md\" name=\"close\" :class=\"[props.closeButtonColorClass]\" />\n </Button>\n\n <div\n v-if=\"!!slots['featured-content']\"\n class=\"stash-modal__featured-content tw-relative\"\n :class=\"{\n 'tw-rounded-t': props.hideHeader,\n }\"\n >\n <slot name=\"featured-content\"></slot>\n </div>\n\n <div\n class=\"stash-modal__body tw-flex-1 tw-overflow-y-auto\"\n :class=\"[\n {\n 'tw-p-3 lg:tw-p-6': !props.disableBodyPadding,\n 'lg:tw-overflow-y-visible': !props.scrollable && !isDrawer,\n 'lg:tw-rounded-b': !hasFooterContent && !isDrawer,\n 'tw-bg-white': !props.contrast,\n 'tw-bg-ice-200': props.contrast,\n },\n ]\"\n data-test=\"stash-modal__body\"\n >\n <slot></slot>\n </div>\n\n <footer\n v-if=\"hasFooterContent\"\n class=\"stash-modal__footer tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-p-6\"\n :class=\"{ 'lg:tw-rounded-b': !isDrawer }\"\n >\n <!-- @slot Overrides the whole footer section. Used for rendering custom footers with more than 2 actions. If defined, \"actions\" slot will get ignored. -->\n <slot name=\"footer\">\n <div class=\"stash-modal__footer__actions tw-flex tw-flex-col tw-justify-end lg:tw-flex-row\">\n <!-- @slot Modal footer actions, supports rendering up to 2 `<Button>` children -->\n <slot name=\"actions\"></slot>\n </div>\n </slot>\n </footer>\n </div>\n </div>\n</template>\n\n<style scoped>\n .stash-modal__header {\n grid-template-columns: 48px 1fr 48px;\n }\n\n .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n order: 2;\n }\n\n .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n margin-bottom: theme('spacing.3');\n order: 1;\n }\n\n @media screen('lg') {\n .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n order: 1;\n }\n\n .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n margin-bottom: 0;\n order: 2;\n }\n\n .stash-modal__footer__actions > :deep(.stash-button + .stash-button) {\n margin-left: var(--grid-gutter);\n }\n }\n\n .stash-modal__featured-content > :deep() {\n border-radius: inherit;\n }\n</style>\n"],"names":["ModalSize","ModalPosition","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","props","isDrawer","getPageScrollingElement","watch","toggleHelpWidgetLauncher","onBeforeUnmount","handleTab","_a","dismiss","emit","FOCUS_ELEMENTS_SELECTOR","e","_b","nextState","launcherElement"],"mappings":"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"}

package/dist/RadioGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.js","sources":["../src/components/RadioGroup/components/VariantButton.vue","../src/components/RadioGroup/components/VariantChip.vue","../src/components/RadioGroup/components/VariantRadio.vue","../src/components/RadioGroup/components/VariantTile.vue","../src/components/RadioGroup/RadioGroup.types.ts","../src/components/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantButton must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n const classes = useCssModule();\n</script>\n\n<template>\n <div class=\"tw-flex\" :class=\"classes.root\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"tw-sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled \|\| option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style module>\n .root label {\n padding: 8px 30px;\n border: 1px solid var(--color-ice-500);\n font-weight: theme('fontWeight.semibold');\n color: var(--color-ice-700);\n cursor: pointer;\n transition: all 0.2s;\n user-select: none;\n display: block;\n text-align: center;\n }\n\n .root > div:first-child label {\n border-top-left-radius: theme('borderRadius.DEFAULT');\n border-bottom-left-radius: theme('borderRadius.DEFAULT');\n }\n\n .root > div:last-child label {\n border-top-right-radius: theme('borderRadius.DEFAULT');\n border-bottom-right-radius: theme('borderRadius.DEFAULT');\n }\n\n .root > div:not(:first-child) label {\n margin-left: -1px;\n }\n\n .root > div:not(:last-child) label {\n border-right-color: transparent;\n }\n\n .root input:disabled ~ label {\n background-color: var(--color-ice-200);\n color: var(--color-ice-500);\n cursor: auto;\n }\n\n .root input:not(:checked, :disabled) ~ label:hover {\n border-color: var(--color-blue-500);\n color: var(--color-blue-500);\n z-index: 1;\n position: relative;\n }\n\n .root input:checked:not(:disabled) ~ label {\n border-color: var(--color-blue-500);\n color: var(--color-blue-500);\n background-color: var(--color-blue-100);\n z-index: 1;\n position: relative;\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantChip must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n const classes = useCssModule();\n</script>\n\n<template>\n <div class=\"tw-my-1.5 tw-flex tw-flex-wrap\" :class=\"classes.root\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"tw-sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled \|\| option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style module>\n .root {\n gap: theme('spacing.6');\n }\n\n .root label {\n padding: theme('spacing[1.5]') theme('spacing.3');\n border: 1px solid var(--color-ice-500);\n font-weight: theme('fontWeight.normal');\n color: var(--color-ice-900);\n cursor: pointer;\n transition: all 0.2s;\n user-select: none;\n border-radius: 9999px;\n white-space: nowrap;\n }\n\n .root input:disabled ~ label {\n background-color: var(--color-ice-200);\n color: var(--color-ice-500);\n cursor: auto;\n }\n\n .root input:checked:not(:disabled) ~ label {\n border-color: var(--color-blue-500);\n color: var(--color-white);\n background-color: var(--color-blue-500);\n font-weight: theme('fontWeight.bold');\n }\n\n .root input:not(:checked, :disabled) ~ label:hover {\n border-color: var(--color-blue-500);\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantRadio must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n const classes = useCssModule();\n</script>\n\n<template>\n <div class=\"tw-flex tw-flex-wrap\" :class=\"classes.root\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled \|\| option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style module>\n .root {\n gap: theme('spacing.6');\n }\n\n .root label {\n font-weight: theme('fontWeight.medium');\n user-select: none;\n cursor: pointer;\n padding: 0 theme('spacing.3');\n }\n\n .root input {\n appearance: none;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n border: 1px solid var(--color-ice-500);\n transition: all 0.2s;\n position: relative;\n cursor: pointer;\n top: 5px;\n }\n\n .root input:checked {\n background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n }\n\n .root input:disabled {\n background: #eef2f4;\n }\n\n .root input:disabled ~ label {\n cursor: auto;\n }\n\n .root input:disabled:checked {\n background-image: radial-gradient(var(--color-ice-500) 50%, transparent 54%);\n }\n\n .root input:hover:not(:disabled) {\n border-color: var(--color-blue-500);\n }\n\n .root input:hover:not(:disabled) ~ label {\n color: var(--color-ice-900);\n }\n\n .root input:not(:disabled) ~ label:hover {\n color: var(--color-ice-900);\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantTile must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n const classes = useCssModule();\n</script>\n\n<template>\n <div class=\"tw-flex tw-flex-wrap\" :class=\"classes.root\">\n <label\n v-for=\"option in options\"\n :key=\"`${name}-${option.id}`\"\n :class=\"[classes['tile-container'], { 'tw-w-full': fullWidth }]\"\n :for=\"`${name}-${option.id}`\"\n >\n <div\n class=\"tw-flex tw-border\"\n :class=\"[\n classes['tile-header'],\n {\n 'tw-border-blue-500 tw-bg-blue-100 tw-text-ice-900': modelValue === option.value,\n 'tw-border-ice-500 tw-bg-ice-100 tw-text-ice-700': modelValue !== option.value,\n },\n ]\"\n >\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"tw-sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled \|\| option.disabled\"\n @input=\"update\"\n />\n <div>\n <span>\n {{ option.text }}\n </span>\n </div>\n </div>\n <div\n class=\"tw-border-x tw-border-b\"\n :class=\"[\n classes['tile-body'],\n {\n 'tw-border-ice-500': modelValue !== option.value,\n 'tw-border-blue-500': modelValue === option.value,\n },\n ]\"\n >\n <p class=\"tw-m-0 tw-text-ice-900\">{{ option.subTitle }}</p>\n <p class=\"tw-m-0 tw-text-ice-700\">{{ option.subText }}</p>\n </div>\n </label>\n </div>\n</template>\n\n<style module>\n .root {\n gap: theme('spacing.6');\n }\n\n .root label {\n cursor: pointer;\n user-select: none;\n }\n\n .root input:disabled ~ label {\n cursor: auto;\n }\n\n .root input:hover:not(:disabled) ~ label {\n color: var(--color-ice-900);\n }\n\n .root input:not(:disabled) ~ label:hover {\n color: var(--color-ice-900);\n }\n\n .root label.tile-container {\n border-radius: theme('borderRadius.DEFAULT');\n display: flex;\n flex: 1;\n flex-direction: column;\n }\n\n .tile-header,\n .tile-body {\n transition: all 0.2s;\n }\n\n .tile-header {\n border-radius: theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT') 0 0;\n padding: theme('spacing.3') 0;\n }\n\n .root label.tile-container:hover .tile-header {\n background-color: var(--color-blue-100) !important;\n border-color: var(--color-blue-500) !important;\n color: var(--color-ice-900) !important;\n transition: all 0.2s;\n }\n\n .tile-body {\n border-radius: 0 0 theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT');\n background-color: var(--color-white);\n padding: theme('spacing.6');\n display: flex;\n flex-direction: column;\n }\n\n .root label.tile-container:hover .tile-body {\n border-color: var(--color-blue-500) !important;\n transition: all 0.2s;\n }\n\n .root input {\n appearance: none;\n background-color: var(--color-white);\n border-radius: 50%;\n width: 20px;\n height: 20px;\n border: 1px solid var(--color-ice-500);\n transition: all 0.2s;\n position: relative;\n cursor: pointer;\n top: 2px;\n }\n\n .root input ~ div {\n font-weight: theme('fontWeight.medium');\n user-select: none;\n cursor: pointer;\n padding: 0 theme('spacing.3');\n }\n\n .root input:disabled {\n background: #eef2f4;\n }\n\n .root input:checked {\n background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n }\n\n .root label.tile-container input {\n margin-left: theme('spacing.3');\n }\n\n .root input:disabled:checked {\n background-image: radial-gradient(var(--color-ice-500) 50%, transparent 54%);\n }\n\n @media screen and (width <= 640px) {\n .root {\n flex-direction: column;\n }\n }\n</style>\n","import { ComputedRef } from 'vue';\n\nexport enum RadioGroupVariant {\n Radio = 'radio',\n Button = 'button',\n Chip = 'chip',\n Tile = 'tile',\n}\n\nexport type RadioGroupVariants = `${RadioGroupVariant}`;\n\n/*\n An individual radio `<input>` within a RadioGroup instance\n /\nexport interface RadioGroupOption {\n /\n Disables the RadioGroupOption if truthy\n /\n disabled?: boolean;\n\n /\n The unique identifier for the option\n /\n id: string;\n\n /\n The text to be displayed for the option\n /\n text: string;\n\n /\n The value of the option. Used for the modelValue of the RadioGroup.\n /\n value: string;\n\n /\n The subtitle for tile variant\n /\n subTitle?: string;\n\n /\n The subtext for tile variant\n /\n subText?: string;\n}\n\n/\n Properties and utilities provided to children of a RadioGroup instance\n /\nexport interface RadioGroupInjection {\n /\n This type should match RadioGroupProps['disabled']\n /\n disabled: ComputedRef<boolean \| undefined>;\n\n /\n This type should match RadioGroupProps['fullWidth']\n /\n fullWidth: ComputedRef<boolean \| undefined>;\n\n /\n This type should match RadioGroupProps['modelValue']\n /\n modelValue: ComputedRef<string \| undefined>;\n\n /\n This type should match RadioGroupProps['name']\n /\n name: ComputedRef<string \| undefined>;\n\n /\n This type should match RadioGroupProps['options']\n /\n options: ComputedRef<RadioGroupOption[] \| undefined>;\n\n /\n Triggered when the user changes their selection; updates the v-model.\n /\n update: (e: Event) => void;\n\n /\n This type should match RadioGroupProps['variant']\n * @default 'radio'\n /\n variant: ComputedRef<RadioGroupVariants \| undefined>;\n}\n","<script lang=\"ts\">\n import { RadioGroupOption, RadioGroupVariant, RadioGroupVariants } from './RadioGroup.types';\n\n export from './RadioGroup.keys';\n export * from './RadioGroup.types';\n\n export interface RadioGroupProps {\n /*\n Passed to the \"name\" attribute of the `<input>` elements within the RadioGroup.\n /\n name?: string;\n\n /\n Deprecated - Compose your radio group with the `Radio` component instead\n * @deprecated\n /\n options?: RadioGroupOption[];\n\n modelValue?: RadioGroupOption['value'];\n\n /\n @defaultValue 'radio'\n /\n variant?: RadioGroupVariants;\n\n /\n Whether the entire group should be disabled\n /\n disabled?: boolean;\n\n /\n Whether the group should expand to the parent's width\n /\n fullWidth?: boolean;\n\n /\n Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n /\n addBottomSpace?: boolean;\n\n /\n Error text to display. Replaces `hintText` (if provided) & adds error styling.\n /\n errorText?: string;\n\n /\n Displays text below the input; hidden when the isReadOnly prop is truthy.\n /\n hintText?: string;\n\n /\n Whether it's a readonly field.\n /\n isReadOnly?: boolean;\n\n /\n Whether the field is required.\n /\n isRequired?: boolean;\n\n /\n Label to render above the input.\n /\n label?: string;\n\n /\n Show \"(optional)\" to the right of the label text\n /\n showOptionalInLabel?: boolean;\n }\n</script>\n\n<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, provide } from 'vue';\n\n import Field from '../Field/Field.vue';\n import VariantButton from './components/VariantButton.vue';\n import VariantChip from './components/VariantChip.vue';\n import VariantRadio from './components/VariantRadio.vue';\n import VariantTile from './components/VariantTile.vue';\n import { RADIO_GROUP_INJECTION } from './RadioGroup.keys';\n\n const variantComponentsMap = {\n [RadioGroupVariant.Button]: VariantButton,\n [RadioGroupVariant.Chip]: VariantChip,\n [RadioGroupVariant.Radio]: VariantRadio,\n [RadioGroupVariant.Tile]: VariantTile,\n };\n\n const props = withDefaults(defineProps<RadioGroupProps>(), {\n variant: 'radio',\n disabled: false,\n fullWidth: false,\n errorText: undefined,\n hintText: undefined,\n label: undefined,\n modelValue: undefined,\n name: undefined,\n options: undefined,\n });\n\n const emit =\n defineEmits<{\n /\n Occurs when the user selects a radio option. Also, it enables v-model usage on the component.\n */\n (e: 'update:modelValue', value: RadioGroupOption['value']): void;\n }>();\n\n function update(e: Event) {\n emit('update:modelValue', (e.target as HTMLInputElement).value);\n }\n\n const errorId = uniqueId('radio-group-field-error-');\n\n provide(RADIO_GROUP_INJECTION.key, {\n name: computed(() => props.name),\n disabled: computed(() => props.disabled),\n fullWidth: computed(() => props.fullWidth),\n modelValue: computed(() => props.modelValue),\n options: computed(() => props.options),\n variant: computed(() => props.variant),\n update,\n });\n</script>\n\n<template>\n <Field\n :class=\"[\n {\n 'tw-flex': !props.options,\n 'tw-flex-wrap':\n !props.options && (props.variant === RadioGroupVariant.Chip \|\| props.variant === RadioGroupVariant.Radio),\n 'tw-gap-x-1.5 tw-gap-y-3': !props.options && props.variant === RadioGroupVariant.Chip,\n 'tw-gap-6':\n !props.options && (props.variant === RadioGroupVariant.Radio \|\| props.variant === RadioGroupVariant.Tile),\n },\n ]\"\n :aria-errormessage=\"errorId\"\n :aria-invalid=\"!!props.errorText\"\n role=\"radiogroup\"\n fieldset\n :label=\"props.label\"\n :add-bottom-space=\"props.addBottomSpace\"\n :error-id=\"errorId\"\n :error-text=\"props.errorText\"\n :hint-text=\"props.hintText\"\n :show-optional-in-label=\"props.showOptionalInLabel\"\n :is-required=\"props.isRequired\"\n :is-read-only=\"props.isReadOnly\"\n >\n <slot v-if=\"props.options\">\n <component :is=\"variantComponentsMap[props.variant]\" />\n </slot>\n <slot v-else></slot>\n </Field>\n</template>\n"],"names":["radioGroupInjection","inject","RADIO_GROUP_INJECTION","name","disabled","fullWidth","modelValue","options","update","classes","useCssModule","RadioGroupVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","e","emit","errorId","uniqueId","provide","computed","props"],"mappings":";;;;;;;;;;;AAKQ,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wDAAwD;AAG1E,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGzE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACVN,IAAAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCiFJC,IAAuB;AAAA,MAC3B,CAACD,EAAkB,MAAM,GAAGE;AAAA,MAC5B,CAACF,EAAkB,IAAI,GAAGG;AAAA,MAC1B,CAACH,EAAkB,KAAK,GAAGI;AAAA,MAC3B,CAACJ,EAAkB,IAAI,GAAGK;AAAA,IAAA;AAuB5B,aAASR,EAAOS,GAAU;AACnB,MAAAC,EAAA,qBAAsBD,EAAE,OAA4B,KAAK;AAAA,IAChE;AAEM,UAAAE,IAAUC,EAAS,0BAA0B;AAEnD,WAAAC,EAAQnB,EAAsB,KAAK;AAAA,MACjC,MAAMoB,EAAS,MAAMC,EAAM,IAAI;AAAA,MAC/B,UAAUD,EAAS,MAAMC,EAAM,QAAQ;AAAA,MACvC,WAAWD,EAAS,MAAMC,EAAM,SAAS;AAAA,MACzC,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,QAAAf;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"RadioGroup.js","sources":["../src/components/RadioGroup/components/VariantButton.vue","../src/components/RadioGroup/components/VariantChip.vue","../src/components/RadioGroup/components/VariantRadio.vue","../src/components/RadioGroup/components/VariantTile.vue","../src/components/RadioGroup/RadioGroup.types.ts","../src/components/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantButton must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n const classes = useCssModule();\n</script>\n\n<template>\n <div class=\"tw-flex\" :class=\"classes.root\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"tw-sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled \|\| option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style module>\n .root label {\n padding: 8px 30px;\n border: 1px solid var(--color-ice-500);\n font-weight: theme('fontWeight.semibold');\n color: var(--color-ice-700);\n cursor: pointer;\n transition: all 0.2s;\n user-select: none;\n display: block;\n text-align: center;\n }\n\n .root > div:first-child label {\n border-top-left-radius: theme('borderRadius.DEFAULT');\n border-bottom-left-radius: theme('borderRadius.DEFAULT');\n }\n\n .root > div:last-child label {\n border-top-right-radius: theme('borderRadius.DEFAULT');\n border-bottom-right-radius: theme('borderRadius.DEFAULT');\n }\n\n .root > div:not(:first-child) label {\n margin-left: -1px;\n }\n\n .root > div:not(:last-child) label {\n border-right-color: transparent;\n }\n\n .root input:disabled ~ label {\n background-color: var(--color-ice-200);\n color: var(--color-ice-500);\n cursor: auto;\n }\n\n .root input:not(:checked, :disabled) ~ label:hover {\n border-color: var(--color-blue-500);\n color: var(--color-blue-500);\n z-index: 1;\n position: relative;\n }\n\n .root input:checked:not(:disabled) ~ label {\n border-color: var(--color-blue-500);\n color: var(--color-blue-500);\n background-color: var(--color-blue-100);\n z-index: 1;\n position: relative;\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantChip must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n const classes = useCssModule();\n</script>\n\n<template>\n <div class=\"tw-my-1.5 tw-flex tw-flex-wrap\" :class=\"classes.root\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"tw-sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled \|\| option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style module>\n .root {\n gap: theme('spacing.6');\n }\n\n .root label {\n padding: theme('spacing[1.5]') theme('spacing.3');\n border: 1px solid var(--color-ice-500);\n font-weight: theme('fontWeight.normal');\n color: var(--color-ice-900);\n cursor: pointer;\n transition: all 0.2s;\n user-select: none;\n border-radius: 9999px;\n white-space: nowrap;\n }\n\n .root input:disabled ~ label {\n background-color: var(--color-ice-200);\n color: var(--color-ice-500);\n cursor: auto;\n }\n\n .root input:checked:not(:disabled) ~ label {\n border-color: var(--color-blue-500);\n color: var(--color-white);\n background-color: var(--color-blue-500);\n font-weight: theme('fontWeight.bold');\n }\n\n .root input:not(:checked, :disabled) ~ label:hover {\n border-color: var(--color-blue-500);\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantRadio must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n const classes = useCssModule();\n</script>\n\n<template>\n <div class=\"tw-flex tw-flex-wrap\" :class=\"classes.root\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled \|\| option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style module>\n .root {\n gap: theme('spacing.6');\n }\n\n .root label {\n font-weight: theme('fontWeight.medium');\n user-select: none;\n cursor: pointer;\n padding: 0 theme('spacing.3');\n }\n\n .root input {\n appearance: none;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n border: 1px solid var(--color-ice-500);\n transition: all 0.2s;\n position: relative;\n cursor: pointer;\n top: 5px;\n }\n\n .root input:checked {\n background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n }\n\n .root input:disabled {\n background: #eef2f4;\n }\n\n .root input:disabled ~ label {\n cursor: auto;\n }\n\n .root input:disabled:checked {\n background-image: radial-gradient(var(--color-ice-500) 50%, transparent 54%);\n }\n\n .root input:hover:not(:disabled) {\n border-color: var(--color-blue-500);\n }\n\n .root input:hover:not(:disabled) ~ label {\n color: var(--color-ice-900);\n }\n\n .root input:not(:disabled) ~ label:hover {\n color: var(--color-ice-900);\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantTile must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n const classes = useCssModule();\n</script>\n\n<template>\n <div class=\"tw-flex tw-flex-wrap\" :class=\"classes.root\">\n <label\n v-for=\"option in options\"\n :key=\"`${name}-${option.id}`\"\n :class=\"[classes['tile-container'], { 'tw-w-full': fullWidth }]\"\n :for=\"`${name}-${option.id}`\"\n >\n <div\n class=\"tw-flex tw-border\"\n :class=\"[\n classes['tile-header'],\n {\n 'tw-border-blue-500 tw-bg-blue-100 tw-text-ice-900': modelValue === option.value,\n 'tw-border-ice-500 tw-bg-ice-100 tw-text-ice-700': modelValue !== option.value,\n },\n ]\"\n >\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"tw-sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled \|\| option.disabled\"\n @input=\"update\"\n />\n <div>\n <span>\n {{ option.text }}\n </span>\n </div>\n </div>\n <div\n class=\"tw-border-x tw-border-b\"\n :class=\"[\n classes['tile-body'],\n {\n 'tw-border-ice-500': modelValue !== option.value,\n 'tw-border-blue-500': modelValue === option.value,\n },\n ]\"\n >\n <p class=\"tw-m-0 tw-text-ice-900\">{{ option.subTitle }}</p>\n <p class=\"tw-m-0 tw-text-ice-700\">{{ option.subText }}</p>\n </div>\n </label>\n </div>\n</template>\n\n<style module>\n .root {\n gap: theme('spacing.6');\n }\n\n .root label {\n cursor: pointer;\n user-select: none;\n }\n\n .root input:disabled ~ label {\n cursor: auto;\n }\n\n .root input:hover:not(:disabled) ~ label {\n color: var(--color-ice-900);\n }\n\n .root input:not(:disabled) ~ label:hover {\n color: var(--color-ice-900);\n }\n\n .root label.tile-container {\n border-radius: theme('borderRadius.DEFAULT');\n display: flex;\n flex: 1;\n flex-direction: column;\n }\n\n .tile-header,\n .tile-body {\n transition: all 0.2s;\n }\n\n .tile-header {\n border-radius: theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT') 0 0;\n padding: theme('spacing.3') 0;\n }\n\n .root label.tile-container:hover .tile-header {\n background-color: var(--color-blue-100) !important;\n border-color: var(--color-blue-500) !important;\n color: var(--color-ice-900) !important;\n transition: all 0.2s;\n }\n\n .tile-body {\n border-radius: 0 0 theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT');\n background-color: var(--color-white);\n padding: theme('spacing.6');\n display: flex;\n flex-direction: column;\n }\n\n .root label.tile-container:hover .tile-body {\n border-color: var(--color-blue-500) !important;\n transition: all 0.2s;\n }\n\n .root input {\n appearance: none;\n background-color: var(--color-white);\n border-radius: 50%;\n width: 20px;\n height: 20px;\n border: 1px solid var(--color-ice-500);\n transition: all 0.2s;\n position: relative;\n cursor: pointer;\n top: 2px;\n }\n\n .root input ~ div {\n font-weight: theme('fontWeight.medium');\n user-select: none;\n cursor: pointer;\n padding: 0 theme('spacing.3');\n }\n\n .root input:disabled {\n background: #eef2f4;\n }\n\n .root input:checked {\n background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n }\n\n .root label.tile-container input {\n margin-left: theme('spacing.3');\n }\n\n .root input:disabled:checked {\n background-image: radial-gradient(var(--color-ice-500) 50%, transparent 54%);\n }\n\n @media screen and (width <= 640px) {\n .root {\n flex-direction: column;\n }\n }\n</style>\n","import { ComputedRef } from 'vue';\n\nexport enum RadioGroupVariant {\n Radio = 'radio',\n Button = 'button',\n Chip = 'chip',\n Tile = 'tile',\n}\n\nexport type RadioGroupVariants = `${RadioGroupVariant}`;\n\n/*\n An individual radio `<input>` within a RadioGroup instance\n /\nexport interface RadioGroupOption {\n /\n Disables the RadioGroupOption if truthy\n /\n disabled?: boolean;\n\n /\n The unique identifier for the option\n /\n id: string;\n\n /\n The text to be displayed for the option\n /\n text: string;\n\n /\n The value of the option. Used for the modelValue of the RadioGroup.\n /\n value: string;\n\n /\n The subtitle for tile variant\n /\n subTitle?: string;\n\n /\n The subtext for tile variant\n /\n subText?: string;\n}\n\n/\n Properties and utilities provided to children of a RadioGroup instance\n /\nexport interface RadioGroupInjection {\n /\n This type should match RadioGroupProps['disabled']\n /\n disabled: ComputedRef<boolean \| undefined>;\n\n /\n This type should match RadioGroupProps['fullWidth']\n /\n fullWidth: ComputedRef<boolean \| undefined>;\n\n /\n This type should match RadioGroupProps['modelValue']\n /\n modelValue: ComputedRef<string \| undefined>;\n\n /\n This type should match RadioGroupProps['name']\n /\n name: ComputedRef<string \| undefined>;\n\n /\n This type should match RadioGroupProps['options']\n /\n options: ComputedRef<RadioGroupOption[] \| undefined>;\n\n /\n Triggered when the user changes their selection; updates the v-model.\n /\n update: (e: Event) => void;\n\n /\n This type should match RadioGroupProps['variant']\n * @default 'radio'\n /\n variant: ComputedRef<RadioGroupVariants \| undefined>;\n}\n","<script lang=\"ts\">\n import { RadioGroupOption, RadioGroupVariant, RadioGroupVariants } from './RadioGroup.types';\n\n export from './RadioGroup.keys';\n export * from './RadioGroup.types';\n\n export interface RadioGroupProps {\n /*\n Passed to the \"name\" attribute of the `<input>` elements within the RadioGroup.\n /\n name?: string;\n\n /\n Deprecated - Compose your radio group with the `Radio` component instead\n * @deprecated\n /\n options?: RadioGroupOption[];\n\n /\n The value of the selected radio option. Use this prop with the `update:modelValue` event to create a controlled component.\n /\n modelValue?: RadioGroupOption['value'];\n\n /\n @defaultValue 'radio'\n /\n variant?: RadioGroupVariants;\n\n /\n Whether the entire group should be disabled\n /\n disabled?: boolean;\n\n /\n Whether the group should expand to the parent's width\n /\n fullWidth?: boolean;\n\n /\n Adds spacing under the field that is consistent whether hint/error text is displayed.\n /\n addBottomSpace?: boolean;\n\n /\n Error text to display. Replaces `hintText` (if provided) & adds error styling.\n /\n errorText?: string;\n\n /\n Displays text below the input; hidden when the isReadOnly prop is truthy.\n /\n hintText?: string;\n\n /\n Whether it's a readonly field.\n /\n isReadOnly?: boolean;\n\n /\n Whether the field is required.\n /\n isRequired?: boolean;\n\n /\n Label to render above the input.\n /\n label?: string;\n\n /\n Show \"(optional)\" to the right of the label text\n /\n showOptionalInLabel?: boolean;\n }\n</script>\n\n<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, provide } from 'vue';\n\n import Field from '../Field/Field.vue';\n import VariantButton from './components/VariantButton.vue';\n import VariantChip from './components/VariantChip.vue';\n import VariantRadio from './components/VariantRadio.vue';\n import VariantTile from './components/VariantTile.vue';\n import { RADIO_GROUP_INJECTION } from './RadioGroup.keys';\n\n const variantComponentsMap = {\n [RadioGroupVariant.Button]: VariantButton,\n [RadioGroupVariant.Chip]: VariantChip,\n [RadioGroupVariant.Radio]: VariantRadio,\n [RadioGroupVariant.Tile]: VariantTile,\n };\n\n const props = withDefaults(defineProps<RadioGroupProps>(), {\n variant: 'radio',\n disabled: false,\n fullWidth: false,\n errorText: undefined,\n hintText: undefined,\n label: undefined,\n modelValue: undefined,\n name: undefined,\n options: undefined,\n });\n\n const emit =\n defineEmits<{\n /\n Occurs when the user selects a radio option. Also, it enables v-model usage on the component.\n */\n (e: 'update:modelValue', value: RadioGroupOption['value']): void;\n }>();\n\n function update(e: Event) {\n emit('update:modelValue', (e.target as HTMLInputElement).value);\n }\n\n const errorId = uniqueId('radio-group-field-error-');\n\n provide(RADIO_GROUP_INJECTION.key, {\n name: computed(() => props.name),\n disabled: computed(() => props.disabled),\n fullWidth: computed(() => props.fullWidth),\n modelValue: computed(() => props.modelValue),\n options: computed(() => props.options),\n variant: computed(() => props.variant),\n update,\n });\n</script>\n\n<template>\n <Field\n :class=\"[\n {\n 'tw-flex': !props.options,\n 'tw-flex-wrap':\n !props.options && (props.variant === RadioGroupVariant.Chip \|\| props.variant === RadioGroupVariant.Radio),\n 'tw-gap-x-1.5 tw-gap-y-3': !props.options && props.variant === RadioGroupVariant.Chip,\n 'tw-gap-6':\n !props.options && (props.variant === RadioGroupVariant.Radio \|\| props.variant === RadioGroupVariant.Tile),\n },\n ]\"\n :aria-errormessage=\"errorId\"\n :aria-invalid=\"!!props.errorText\"\n role=\"radiogroup\"\n fieldset\n :label=\"props.label\"\n :add-bottom-space=\"props.addBottomSpace\"\n :error-id=\"errorId\"\n :error-text=\"props.errorText\"\n :hint-text=\"props.hintText\"\n :show-optional-in-label=\"props.showOptionalInLabel\"\n :is-required=\"props.isRequired\"\n :is-read-only=\"props.isReadOnly\"\n >\n <slot v-if=\"props.options\">\n <component :is=\"variantComponentsMap[props.variant]\" />\n </slot>\n <slot v-else></slot>\n </Field>\n</template>\n"],"names":["radioGroupInjection","inject","RADIO_GROUP_INJECTION","name","disabled","fullWidth","modelValue","options","update","classes","useCssModule","RadioGroupVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","e","emit","errorId","uniqueId","provide","computed","props"],"mappings":";;;;;;;;;;;AAKQ,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wDAAwD;AAG1E,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGzE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACVN,IAAAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCoFJC,IAAuB;AAAA,MAC3B,CAACD,EAAkB,MAAM,GAAGE;AAAA,MAC5B,CAACF,EAAkB,IAAI,GAAGG;AAAA,MAC1B,CAACH,EAAkB,KAAK,GAAGI;AAAA,MAC3B,CAACJ,EAAkB,IAAI,GAAGK;AAAA,IAAA;AAuB5B,aAASR,EAAOS,GAAU;AACnB,MAAAC,EAAA,qBAAsBD,EAAE,OAA4B,KAAK;AAAA,IAChE;AAEM,UAAAE,IAAUC,EAAS,0BAA0B;AAEnD,WAAAC,EAAQnB,EAAsB,KAAK;AAAA,MACjC,MAAMoB,EAAS,MAAMC,EAAM,IAAI;AAAA,MAC/B,UAAUD,EAAS,MAAMC,EAAM,QAAQ;AAAA,MACvC,WAAWD,EAAS,MAAMC,EAAM,SAAS;AAAA,MACzC,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,QAAAf;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}