@leaflink/stash 47.2.2 → 47.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Image.js +1 -1
- package/dist/Image.js.map +1 -1
- package/dist/Table.js +25 -25
- package/dist/Table.js.map +1 -1
- package/dist/TableHeaderRow.js +33 -33
- package/dist/TableHeaderRow.js.map +1 -1
- package/package.json +1 -1
package/dist/Image.js
CHANGED
|
@@ -102,7 +102,7 @@ const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
102
102
|
}), S = c(() => {
|
|
103
103
|
var r;
|
|
104
104
|
return t.provider || ((r = s == null ? void 0 : s.images) == null ? void 0 : r.provider) || z.Static;
|
|
105
|
-
}), u = c(() => t.staticPath
|
|
105
|
+
}), u = c(() => t.staticPath ?? (s == null ? void 0 : s.staticPath)), d = c(() => S.value === z.Static), p = c(() => Z[S.value]), g = c(() => d.value ? _() : _({ width: $.md })), v = c(() => t.sizes ? U() : t.sizes), E = c(() => t.sizes && !t.srcset && !d.value ? R() : t.srcset), I = c(() => t.sizes ? O(t.sizes) : []);
|
|
106
106
|
function _(r = {}) {
|
|
107
107
|
if (d.value && i.value)
|
|
108
108
|
return t.src;
|
package/dist/Image.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","sources":["../src/components/Image/Image.types.ts","../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":["// Sizes used to generate resized and optimized versions of an image.\n// Generated in `srcset`, and informed by `sizes`.\nexport const Screens = {\n xs: 160,\n sm: 338,\n md: 676,\n lg: 1352,\n xl: 2704,\n} as const;\n\nexport interface ImageSizeCondition {\n mediaQuery: string;\n screenMinWidth: number;\n size: string;\n}\n\nexport enum ImageRadius {\n None = 'none',\n Rounded = 'rounded',\n}\n\nexport type ImageRadii = `${ImageRadius}`;\n\nexport enum ImageProviders {\n Cloudinary = 'cloudinary',\n Static = 'static',\n}\n","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: ParamMapper) {\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 format: 'auto',\n quality: 'auto:best',\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 * from './Image.types';\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 { ImageProviders, ImageRadii, ImageRadius, ImageSizeCondition, Screens } from './Image.types';\n import providers from './providers';\n import { ImageModifiers } from './providers/utils';\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 * If not provided, the provider will inherit from the Stash config `stashOptions.images.provider` (default: `static`).\n * - `static` for relative or absolute paths\n * - `cloudinary` for images served via Cloudinary\n */\n provider?: StashImageProviders;\n\n /**\n * For applying border radius\n */\n radius?: ImageRadii;\n\n /**\n * A custom static path the image src will be appended onto when provider=static.\n * Can be used to override the library-level default.\n */\n staticPath?: string;\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 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: undefined,\n sizes: undefined,\n staticPath: undefined,\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 isAbsoluteUrl = computed(() => {\n // return true if not an absolute url\n try {\n new URL(props.src);\n return true;\n } catch (e) {\n return false;\n }\n });\n\n const computedProvider = computed(() => props.provider || stashOptions?.images?.provider || ImageProviders.Static);\n\n const computedStaticPath = computed(() => props.staticPath || stashOptions?.staticPath);\n\n const isStatic = computed(() => computedProvider.value === ImageProviders.Static);\n\n const imgProvider = computed(() => providers[computedProvider.value]);\n\n const imgSrc = computed(() => (isStatic.value ? getProviderImage() : getProviderImage({ width: Screens.md })));\n\n const imgSizes = computed(() => (props.sizes ? getSizes() : props.sizes));\n\n const imgSrcset = computed(() => (props.sizes && !props.srcset && !isStatic.value ? getSources() : props.srcset));\n\n const parsedSizes = computed(() => {\n return props.sizes ? parseSizes(props.sizes) : [];\n });\n\n function getProviderImage(modifiers: ImageModifiers = {}) {\n if (isStatic.value && isAbsoluteUrl.value) {\n return props.src;\n }\n\n const src = isStatic.value && computedStaticPath.value ? `${computedStaticPath.value}/${props.src}` : props.src;\n\n return imgProvider.value.getImageUrl(src, modifiers);\n }\n\n function getSources() {\n return Object.values(Screens)\n .map((width) => {\n const src = getProviderImage({ width });\n\n return `${src} ${width}w`;\n })\n .join(', ');\n }\n\n function getSizes() {\n // return if using native media conditions\n if (props.sizes?.includes('(')) {\n return props.sizes;\n }\n\n return parsedSizes.value.map((v) => `${v.mediaQuery ? v.mediaQuery + ' ' : ''}${v.size}`).join(', ');\n }\n\n function parseSizes(providedSizes = '') {\n const conditions: ImageSizeCondition[] = [];\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 let size = String(sizes[key]);\n const isFluidSize = size.endsWith('vw');\n\n // convert integer to pixels\n if (!isFluidSize && /^\\d+$/.test(size)) {\n size = `${size}px`;\n }\n\n if (!isFluidSize && size.endsWith('%')) {\n throw new Error('Image: `sizes` does not support percentage values');\n }\n\n const condition = {\n mediaQuery: screenMinWidth ? `(min-width: ${screenMinWidth}px)` : '',\n screenMinWidth,\n size,\n };\n\n conditions.push(condition);\n }\n\n conditions.sort((v1, v2) => (v1.screenMinWidth > v2.screenMinWidth ? -1 : 1));\n\n return conditions;\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 === ImageRadius.Rounded,\n }\"\n :src=\"imgSrc\"\n v-bind=\"attrs\"\n />\n</template>\n"],"names":["Screens","ImageRadius","ImageProviders","createMapper","map","key","buildProviderUrl","formatter","value","keyMap","joinWith","valueMap","keyMapper","valueKey","modifiers","mapper","newKey","newVal","BASE_URL","IMAGE_PROVIDER_URLS","convertHextoRGBFormat","operationsGenerator","defaultModifiers","getImageUrl","src","mergeModifiers","merge","operations","providers","cloudinary","staticProvider","BREAKPOINTS","SCREEN_SIZES","stashOptions","inject","attrs","computed","useAttrs","imgSizes","imgSrcset","isAbsoluteUrl","props","computedProvider","_a","computedStaticPath","isStatic","imgProvider","imgSrc","getProviderImage","getSizes","getSources","parsedSizes","parseSizes","width","v","providedSizes","conditions","sizes","definitions","size","entry","screenMinWidth","isFluidSize","condition","v1","v2"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Image.js","sources":["../src/components/Image/Image.types.ts","../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":["// Sizes used to generate resized and optimized versions of an image.\n// Generated in `srcset`, and informed by `sizes`.\nexport const Screens = {\n xs: 160,\n sm: 338,\n md: 676,\n lg: 1352,\n xl: 2704,\n} as const;\n\nexport interface ImageSizeCondition {\n mediaQuery: string;\n screenMinWidth: number;\n size: string;\n}\n\nexport enum ImageRadius {\n None = 'none',\n Rounded = 'rounded',\n}\n\nexport type ImageRadii = `${ImageRadius}`;\n\nexport enum ImageProviders {\n Cloudinary = 'cloudinary',\n Static = 'static',\n}\n","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: ParamMapper) {\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 format: 'auto',\n quality: 'auto:best',\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 * from './Image.types';\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 { ImageProviders, ImageRadii, ImageRadius, ImageSizeCondition, Screens } from './Image.types';\n import providers from './providers';\n import { ImageModifiers } from './providers/utils';\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 * If not provided, the provider will inherit from the Stash config `stashOptions.images.provider` (default: `static`).\n * - `static` for relative or absolute paths\n * - `cloudinary` for images served via Cloudinary\n */\n provider?: StashImageProviders;\n\n /**\n * For applying border radius\n */\n radius?: ImageRadii;\n\n /**\n * A custom static path the image src will be appended onto when provider=static.\n * Can be used to override the library-level default.\n */\n staticPath?: string;\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 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: undefined,\n sizes: undefined,\n staticPath: undefined,\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 isAbsoluteUrl = computed(() => {\n // return true if not an absolute url\n try {\n new URL(props.src);\n return true;\n } catch (e) {\n return false;\n }\n });\n\n const computedProvider = computed(() => props.provider || stashOptions?.images?.provider || ImageProviders.Static);\n\n const computedStaticPath = computed(() => props.staticPath ?? stashOptions?.staticPath);\n\n const isStatic = computed(() => computedProvider.value === ImageProviders.Static);\n\n const imgProvider = computed(() => providers[computedProvider.value]);\n\n const imgSrc = computed(() => (isStatic.value ? getProviderImage() : getProviderImage({ width: Screens.md })));\n\n const imgSizes = computed(() => (props.sizes ? getSizes() : props.sizes));\n\n const imgSrcset = computed(() => (props.sizes && !props.srcset && !isStatic.value ? getSources() : props.srcset));\n\n const parsedSizes = computed(() => {\n return props.sizes ? parseSizes(props.sizes) : [];\n });\n\n function getProviderImage(modifiers: ImageModifiers = {}) {\n if (isStatic.value && isAbsoluteUrl.value) {\n return props.src;\n }\n\n const src = isStatic.value && computedStaticPath.value ? `${computedStaticPath.value}/${props.src}` : props.src;\n\n return imgProvider.value.getImageUrl(src, modifiers);\n }\n\n function getSources() {\n return Object.values(Screens)\n .map((width) => {\n const src = getProviderImage({ width });\n\n return `${src} ${width}w`;\n })\n .join(', ');\n }\n\n function getSizes() {\n // return if using native media conditions\n if (props.sizes?.includes('(')) {\n return props.sizes;\n }\n\n return parsedSizes.value.map((v) => `${v.mediaQuery ? v.mediaQuery + ' ' : ''}${v.size}`).join(', ');\n }\n\n function parseSizes(providedSizes = '') {\n const conditions: ImageSizeCondition[] = [];\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 let size = String(sizes[key]);\n const isFluidSize = size.endsWith('vw');\n\n // convert integer to pixels\n if (!isFluidSize && /^\\d+$/.test(size)) {\n size = `${size}px`;\n }\n\n if (!isFluidSize && size.endsWith('%')) {\n throw new Error('Image: `sizes` does not support percentage values');\n }\n\n const condition = {\n mediaQuery: screenMinWidth ? `(min-width: ${screenMinWidth}px)` : '',\n screenMinWidth,\n size,\n };\n\n conditions.push(condition);\n }\n\n conditions.sort((v1, v2) => (v1.screenMinWidth > v2.screenMinWidth ? -1 : 1));\n\n return conditions;\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 === ImageRadius.Rounded,\n }\"\n :src=\"imgSrc\"\n v-bind=\"attrs\"\n />\n</template>\n"],"names":["Screens","ImageRadius","ImageProviders","createMapper","map","key","buildProviderUrl","formatter","value","keyMap","joinWith","valueMap","keyMapper","valueKey","modifiers","mapper","newKey","newVal","BASE_URL","IMAGE_PROVIDER_URLS","convertHextoRGBFormat","operationsGenerator","defaultModifiers","getImageUrl","src","mergeModifiers","merge","operations","providers","cloudinary","staticProvider","BREAKPOINTS","SCREEN_SIZES","stashOptions","inject","attrs","computed","useAttrs","imgSizes","imgSrcset","isAbsoluteUrl","props","computedProvider","_a","computedStaticPath","isStatic","imgProvider","imgSrc","getProviderImage","getSizes","getSources","parsedSizes","parseSizes","width","v","providedSizes","conditions","sizes","definitions","size","entry","screenMinWidth","isFluidSize","condition","v1","v2"],"mappings":";;;AAEO,MAAMA,IAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAQY,IAAAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WAFAA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,aAAa,cACbA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA;ACHZ,SAASC,EAAaC,GAAkB;AACtC,SAAO,CAACC,MACCD,EAAIC,CAAG,KAAKA;AAEvB;AAKO,SAASC,EAAiB;AAAA,EAC/B,WAAAC,IAAY,CAACF,GAAKG,MAAU,GAAGH,CAAG,IAAIG,CAAK;AAAA,EAC3C,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW,CAAC;AACd,IAAwB,IAAI;AACpB,QAAAC,IAAY,OAAOH,KAAW,aAAaA,IAASN,EAAaM,KAAU,CAAA,CAAE;AAEnF,gBAAO,KAAKE,CAAQ,EAAE,QAAQ,CAACE,MAAa;AAC1C,IAAI,OAAOF,EAASE,CAAQ,KAAM,eAChCF,EAASE,CAAQ,IAAIV,EAAaQ,EAASE,CAAQ,CAAC;AAAA,EACtD,CACD,GAEM,CAACC,IAAuC,OAC1B,OAAO,QAAQA,CAAS,EAAE,IAAI,CAAC,CAACT,GAAKG,CAAK,MAAM;AAC3D,UAAAO,IAASJ,EAASN,CAAG,GACrBW,IAASJ,EAAUP,CAAG;AAC5B,QAAIY,IAAST;AAET,WAAA,OAAOO,KAAW,eACXE,IAAAF,EAAOD,EAAUT,CAAG,CAAC,IAGzBE,EAAUS,GAAQC,CAAM;AAAA,EAAA,CAChC,EAEiB,KAAKP,CAAQ;AAEnC;ACrDA,MAAMQ,IAAWC,EAAoB,YAE/BC,IAAwB,CAACZ,MAAmBA,EAAM,WAAW,GAAG,IAAIA,EAAM,QAAQ,KAAK,MAAM,IAAIA,GAiB1Fa,IAAsBf,EAAiB;AAAA,EAClD,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACR,KAAK;AAAA,MACH,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,WAAWE,GAAe;AACxB,aAAOY,EAAsBZ,CAAK;AAAA,IACpC;AAAA,EACF;AAAA,EACA,UAAU;AAAA,EACV,WAAW,CAACH,GAAKG,MAAU,GAAGH,CAAG,IAAIG,CAAK;AAC5C,CAAC,GAGKc,IAAmB;AAAA,EACvB,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,SAASC,EAAYC,GAAaV,IAAqC,IAAY;AAClF,QAAAW,IAAiBC,EAAMJ,GAAkBR,CAAS,GAClDa,IAAaN,EAAoBI,CAAc;AAErD,SAAO,GAAGP,CAAQ,IAAIS,CAAU,IAAIH,CAAG;AACzC;;;;;;AChEgB,SAAAD,EAAYC,IAAM,IAAY;AACrC,SAAAA;AACT;;;;8CCCeI,IAAA;AAAA,EACb,YAAAC;AAAA,EACA,QAAQC;AACV;;;;;;;;;;;iBCmDQC,IAAc;AAAA,MAClB,IAAIC,EAAa;AAAA,MACjB,IAAIA,EAAa;AAAA,IAAA,GAEbC,IAAeC,EAA0B,cAAc,GAWvDC,IAAQC,EAAS,MAAM;AAC3B,YAAM,EAAE,KAAAZ,GAAK,GAAGW,MAAUE,EAAS;AAEnCF,aAAAA,EAAM,QAAQG,EAAS,OACvBH,EAAM,SAASI,EAAU,OAElBJ;AAAAA,IAAA,CACR,GAEKK,IAAgBJ,EAAS,MAAM;AAE/B,UAAA;AACE,mBAAA,IAAIK,EAAM,GAAG,GACV;AAAA,cACG;AACH,eAAA;AAAA,MACT;AAAA,IAAA,CACD,GAEKC,IAAmBN,EAAS,MAAM;;AAAA,aAAAK,EAAM,cAAYE,IAAAV,KAAA,gBAAAA,EAAc,WAAd,gBAAAU,EAAsB,aAAYzC,EAAe;AAAA,KAAM,GAE3G0C,IAAqBR,EAAS,MAAMK,EAAM,eAAcR,KAAA,gBAAAA,EAAc,WAAU,GAEhFY,IAAWT,EAAS,MAAMM,EAAiB,UAAUxC,EAAe,MAAM,GAE1E4C,IAAcV,EAAS,MAAMR,EAAUc,EAAiB,KAAK,CAAC,GAE9DK,IAASX,EAAS,MAAOS,EAAS,QAAQG,EAAA,IAAqBA,EAAiB,EAAE,OAAOhD,EAAQ,GAAA,CAAI,CAAE,GAEvGsC,IAAWF,EAAS,MAAOK,EAAM,QAAQQ,EAAS,IAAIR,EAAM,KAAM,GAElEF,IAAYH,EAAS,MAAOK,EAAM,SAAS,CAACA,EAAM,UAAU,CAACI,EAAS,QAAQK,EAAW,IAAIT,EAAM,MAAO,GAE1GU,IAAcf,EAAS,MACpBK,EAAM,QAAQW,EAAWX,EAAM,KAAK,IAAI,EAChD;AAEQ,aAAAO,EAAiBlC,IAA4B,IAAI;AACpD,UAAA+B,EAAS,SAASL,EAAc;AAClC,eAAOC,EAAM;AAGf,YAAMjB,IAAMqB,EAAS,SAASD,EAAmB,QAAQ,GAAGA,EAAmB,KAAK,IAAIH,EAAM,GAAG,KAAKA,EAAM;AAE5G,aAAOK,EAAY,MAAM,YAAYtB,GAAKV,CAAS;AAAA,IACrD;AAEA,aAASoC,IAAa;AACpB,aAAO,OAAO,OAAOlD,CAAO,EACzB,IAAI,CAACqD,MAGG,GAFKL,EAAiB,EAAE,OAAAK,EAAO,CAAA,CAEzB,IAAIA,CAAK,GACvB,EACA,KAAK,IAAI;AAAA,IACd;AAEA,aAASJ,IAAW;;AAElB,cAAIN,IAAAF,EAAM,UAAN,QAAAE,EAAa,SAAS,OACjBF,EAAM,QAGRU,EAAY,MAAM,IAAI,CAACG,MAAM,GAAGA,EAAE,aAAaA,EAAE,aAAa,MAAM,EAAE,GAAGA,EAAE,IAAI,EAAE,EAAE,KAAK,IAAI;AAAA,IACrG;AAES,aAAAF,EAAWG,IAAgB,IAAI;AACtC,YAAMC,IAAmC,CAAA,GACnCC,IAAQ;AAAA,QACZ,SAAS;AAAA,MAAA;AAIP,UAAA,OAAOF,KAAkB,UAAU;AAC/B,cAAAG,IAAcH,EAAc,MAAM,OAAO,EAAE,OAAO,CAACI,MAASA,CAAI;AAEtE,mBAAWC,KAASF,GAAa;AACzB,gBAAAC,IAAOC,EAAM,MAAM,GAAG;AAExB,cAAAD,EAAK,WAAW,GAAG;AACrB,YAAAF,EAAM,UAAaE,EAAK,CAAC,EAAE,KAAK;AAChC;AAAA,UACF;AAEM,UAAAF,EAAAE,EAAK,CAAC,EAAE,KAAA,CAAM,IAAIA,EAAK,CAAC,EAAE;QAClC;AAAA,MAAA;AAEM,cAAA,IAAI,MAAM,8BAA8B;AAGhD,iBAAWtD,KAAOoD,GAAO;AACvB,cAAMI,IAAiB,SAAS9B,EAAY1B,CAAG,KAAK,CAAC;AACrD,YAAIsD,IAAO,OAAOF,EAAMpD,CAAG,CAAC;AACtB,cAAAyD,IAAcH,EAAK,SAAS,IAAI;AAOtC,YAJI,CAACG,KAAe,QAAQ,KAAKH,CAAI,MACnCA,IAAO,GAAGA,CAAI,OAGZ,CAACG,KAAeH,EAAK,SAAS,GAAG;AAC7B,gBAAA,IAAI,MAAM,mDAAmD;AAGrE,cAAMI,IAAY;AAAA,UAChB,YAAYF,IAAiB,eAAeA,CAAc,QAAQ;AAAA,UAClE,gBAAAA;AAAA,UACA,MAAAF;AAAA,QAAA;AAGF,QAAAH,EAAW,KAAKO,CAAS;AAAA,MAC3B;AAEW,aAAAP,EAAA,KAAK,CAACQ,GAAIC,MAAQD,EAAG,iBAAiBC,EAAG,iBAAiB,KAAK,CAAE,GAErET;AAAA,IACT;;;;;;;;;;;;"}
|
package/dist/Table.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as C, inject as b, computed as
|
|
1
|
+
import { defineComponent as C, inject as b, computed as o, provide as L, watchEffect as H, openBlock as n, createElementBlock as N, normalizeClass as v, unref as m, normalizeStyle as D, createElementVNode as u, renderSlot as p, createBlock as h, withCtx as r, createVNode as i } from "vue";
|
|
2
2
|
import "lodash-es/cloneDeep";
|
|
3
|
-
import { M as
|
|
3
|
+
import { M as g } from "./Module.keys-2cc7d830.js";
|
|
4
4
|
import "lodash-es/uniqueId";
|
|
5
5
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
6
6
|
import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
|
|
@@ -26,8 +26,8 @@ import "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";
|
|
|
26
26
|
import "./Button.js";
|
|
27
27
|
import "./Icon.js";
|
|
28
28
|
import "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
|
|
29
|
-
var J = /* @__PURE__ */ ((e) => (e.Scroll = "scroll", e.Stack = "stack", e))(J || {}),
|
|
30
|
-
const
|
|
29
|
+
var J = /* @__PURE__ */ ((e) => (e.Scroll = "scroll", e.Stack = "stack", e))(J || {}), $ = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e.RoundedBottom = "rounded-bottom", e))($ || {});
|
|
30
|
+
const z = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, ft = /* @__PURE__ */ C({
|
|
31
31
|
__name: "Table",
|
|
32
32
|
props: {
|
|
33
33
|
density: { default: void 0 },
|
|
@@ -47,28 +47,28 @@ const $ = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
|
|
|
47
47
|
density: x,
|
|
48
48
|
variant: c,
|
|
49
49
|
isEmpty: _,
|
|
50
|
-
isLoading:
|
|
50
|
+
isLoading: T,
|
|
51
51
|
isSelectable: f
|
|
52
|
-
} = b(E.key, E.defaults), { variant: s } = b(
|
|
53
|
-
var
|
|
54
|
-
return !!((
|
|
52
|
+
} = b(E.key, E.defaults), { variant: s } = b(g.key, g.defaults), y = o(() => (s == null ? void 0 : s.value) === "table" || c.value === "table" ? "rounded-bottom" : t.radius), l = o(() => t.stickyHeader ? "scroll" : t.layout), w = o(() => {
|
|
53
|
+
var a, d;
|
|
54
|
+
return !!((a = t.stickyHeader) != null && a.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table
|
|
55
55
|
((d = t.stickyHeader) == null ? void 0 : d.listLength) > 3);
|
|
56
|
-
}),
|
|
57
|
-
var
|
|
56
|
+
}), B = o(() => {
|
|
57
|
+
var a;
|
|
58
58
|
return {
|
|
59
|
-
maxHeight: w.value ? (
|
|
59
|
+
maxHeight: w.value ? (a = t.stickyHeader) == null ? void 0 : a.maxHeight : ""
|
|
60
60
|
};
|
|
61
61
|
});
|
|
62
62
|
return L(A.key, {
|
|
63
|
-
density:
|
|
64
|
-
hasCustomExpandToggle:
|
|
65
|
-
hasActions:
|
|
66
|
-
isExpandable:
|
|
67
|
-
isSelectable:
|
|
63
|
+
density: o(() => t.density || x.value || O.Comfortable),
|
|
64
|
+
hasCustomExpandToggle: o(() => t.hasCustomExpandToggle),
|
|
65
|
+
hasActions: o(() => t.hasActions),
|
|
66
|
+
isExpandable: o(() => t.isExpandable),
|
|
67
|
+
isSelectable: o(() => t.isSelectable && !t.isLoading && !t.isEmpty),
|
|
68
68
|
layout: l
|
|
69
69
|
}), H(() => {
|
|
70
70
|
f && (f.value = t.isSelectable);
|
|
71
|
-
}), (
|
|
71
|
+
}), (a, d) => (n(), N("div", {
|
|
72
72
|
class: v(["stash-table tw-relative", [
|
|
73
73
|
{ "tw-rounded": y.value === "rounded" },
|
|
74
74
|
{ "tw-rounded-b": y.value === "rounded-bottom" },
|
|
@@ -79,18 +79,18 @@ const $ = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
|
|
|
79
79
|
// prevent the table from collapsing on small screen heights when the max-height is dynamic
|
|
80
80
|
]]),
|
|
81
81
|
"data-test": "stash-table",
|
|
82
|
-
style: D(
|
|
82
|
+
style: D(B.value)
|
|
83
83
|
}, [
|
|
84
|
-
u("table",
|
|
84
|
+
u("table", z, [
|
|
85
85
|
u("thead", {
|
|
86
86
|
class: v(["tw-border-b tw-border-ice-200", {
|
|
87
87
|
"tw-hidden lg:tw-table-header-group": l.value === "stack"
|
|
88
88
|
}])
|
|
89
89
|
}, [
|
|
90
|
-
p(
|
|
90
|
+
p(a.$slots, "head")
|
|
91
91
|
], 2),
|
|
92
92
|
u("tbody", null, [
|
|
93
|
-
t.isLoading || m(
|
|
93
|
+
t.isLoading || m(T) ? (n(), h(S, { key: 0 }, {
|
|
94
94
|
default: r(() => [
|
|
95
95
|
i(k, { colspan: "100%" }, {
|
|
96
96
|
default: r(() => [
|
|
@@ -100,11 +100,11 @@ const $ = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
|
|
|
100
100
|
})
|
|
101
101
|
]),
|
|
102
102
|
_: 1
|
|
103
|
-
})) : t.isEmpty || m(_) ? (n(),
|
|
103
|
+
})) : t.isEmpty || m(_) ? (n(), h(S, { key: 1 }, {
|
|
104
104
|
default: r(() => [
|
|
105
105
|
i(k, { colspan: "100%" }, {
|
|
106
106
|
default: r(() => [
|
|
107
|
-
p(
|
|
107
|
+
p(a.$slots, "empty", {}, () => [
|
|
108
108
|
i(V, {
|
|
109
109
|
class: "tw-w-full tw-bg-white",
|
|
110
110
|
text: t.emptyStateText
|
|
@@ -115,7 +115,7 @@ const $ = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
|
|
|
115
115
|
})
|
|
116
116
|
]),
|
|
117
117
|
_: 3
|
|
118
|
-
})) : p(
|
|
118
|
+
})) : p(a.$slots, "body", { key: 2 })
|
|
119
119
|
])
|
|
120
120
|
])
|
|
121
121
|
], 6));
|
|
@@ -124,7 +124,7 @@ const $ = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
|
|
|
124
124
|
export {
|
|
125
125
|
J as Layout,
|
|
126
126
|
A as TABLE_INJECTION,
|
|
127
|
-
|
|
127
|
+
$ as TableRadius,
|
|
128
128
|
ft as default
|
|
129
129
|
};
|
|
130
130
|
//# sourceMappingURL=Table.js.map
|
package/dist/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n Scroll = 'scroll',\n Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n None = 'none',\n Rounded = 'rounded',\n RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n /**\n * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n */\n density: ComputedRef<SpacingDensities>;\n\n /**\n * Styles the last column for \"row actions\"\n */\n hasActions: ComputedRef<boolean>;\n\n /**\n * If true, hides the default expansion toggle column\n */\n hasCustomExpandToggle: ComputedRef<boolean>;\n\n /**\n * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n */\n isExpandable: ComputedRef<boolean>;\n\n /**\n * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n */\n isSelectable: ComputedRef<boolean>;\n\n /**\n * Sets the table layout; the default value is \"scroll\".\n */\n layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n import { MODULE_INJECTION } from '../Module/Module.keys';\n import { Layouts, TableRadiuses } from './Table.types';\n\n export * from './Table.keys';\n export * from './Table.types';\n\n export interface TableProps {\n /**\n * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n */\n density?: SpacingDensities;\n\n /**\n * Sets the text for the empty state; the default value is \"No Results\".\n */\n emptyStateText?: string;\n\n /**\n * Styles the last column for \"row actions\"\n */\n hasActions?: boolean;\n\n /**\n * If true, hides the default expansion toggle column\n */\n hasCustomExpandToggle?: boolean;\n\n /**\n * Shows the empty state\n */\n isEmpty?: boolean;\n\n /**\n * Shows the loading state\n */\n isLoading?: boolean;\n\n /**\n * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n */\n isExpandable?: boolean;\n\n /**\n * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n */\n isSelectable?: boolean;\n\n /**\n * Sets the table layout; the default value is \"scroll\".\n */\n layout?: Layouts;\n\n /**\n * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n */\n radius?: TableRadiuses;\n\n /**\n * Allows the table head to be sticky when scrolling inside the table body\n */\n stickyHeader?: {\n listLength: number;\n maxHeight: string;\n };\n }\n</script>\n\n<script setup lang=\"ts\">\n import { computed, inject,
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n Scroll = 'scroll',\n Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n None = 'none',\n Rounded = 'rounded',\n RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n /**\n * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n */\n density: ComputedRef<SpacingDensities>;\n\n /**\n * Styles the last column for \"row actions\"\n */\n hasActions: ComputedRef<boolean>;\n\n /**\n * If true, hides the default expansion toggle column\n */\n hasCustomExpandToggle: ComputedRef<boolean>;\n\n /**\n * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n */\n isExpandable: ComputedRef<boolean>;\n\n /**\n * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n */\n isSelectable: ComputedRef<boolean>;\n\n /**\n * Sets the table layout; the default value is \"scroll\".\n */\n layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n import { MODULE_INJECTION } from '../Module/Module.keys';\n import { Layouts, TableRadiuses } from './Table.types';\n\n export * from './Table.keys';\n export * from './Table.types';\n\n export interface TableProps {\n /**\n * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n */\n density?: SpacingDensities;\n\n /**\n * Sets the text for the empty state; the default value is \"No Results\".\n */\n emptyStateText?: string;\n\n /**\n * Styles the last column for \"row actions\"\n */\n hasActions?: boolean;\n\n /**\n * If true, hides the default expansion toggle column\n */\n hasCustomExpandToggle?: boolean;\n\n /**\n * Shows the empty state\n */\n isEmpty?: boolean;\n\n /**\n * Shows the loading state\n */\n isLoading?: boolean;\n\n /**\n * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n */\n isExpandable?: boolean;\n\n /**\n * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n */\n isSelectable?: boolean;\n\n /**\n * Sets the table layout; the default value is \"scroll\".\n */\n layout?: Layouts;\n\n /**\n * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n */\n radius?: TableRadiuses;\n\n /**\n * Allows the table head to be sticky when scrolling inside the table body\n */\n stickyHeader?: {\n listLength: number;\n maxHeight: string;\n };\n }\n</script>\n\n<script setup lang=\"ts\">\n import { computed, inject, provide, watchEffect } from 'vue';\n\n import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n import EmptyState from '../EmptyState/EmptyState.vue';\n import Loading from '../Loading/Loading.vue';\n import TableCell from '../TableCell/TableCell.vue';\n import TableRow from '../TableRow/TableRow.vue';\n import { TABLE_INJECTION } from './Table.keys';\n\n const props = withDefaults(defineProps<TableProps>(), {\n density: undefined,\n emptyStateText: '',\n hasActions: false,\n hasCustomExpandToggle: false,\n isEmpty: false,\n isLoading: false,\n isExpandable: false,\n isSelectable: false,\n layout: 'scroll',\n radius: 'rounded',\n stickyHeader: undefined,\n });\n\n const {\n density: dataViewDensity,\n variant: dataViewVariant,\n isEmpty: isDataViewEmpty,\n isLoading: isDataViewLoading,\n isSelectable: isDataViewSelectable,\n } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n const computedRadius = computed<TableRadiuses>(() => {\n // Will work for tables when rendered inside of a Module with OR without a DataView.\n if (moduleVariant?.value === 'table') {\n return 'rounded-bottom';\n }\n\n if (dataViewVariant.value === 'table') {\n return 'rounded-bottom';\n }\n\n return props.radius;\n });\n\n const computedLayout = computed<Layouts>(() => {\n if (props.stickyHeader) {\n return 'scroll';\n }\n\n return props.layout;\n });\n\n const isStickyHeaderEnabled = computed<boolean>(() => {\n return !!(\n (\n props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n props.stickyHeader?.listLength > 3\n ) // scrollable table and sticky headers not needed when list is small\n );\n });\n\n const rootStyle = computed(() => ({\n maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n }));\n\n provide(TABLE_INJECTION.key, {\n density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n hasActions: computed(() => props.hasActions),\n isExpandable: computed(() => props.isExpandable),\n isSelectable: computed(() => props.isSelectable && !props.isLoading && !props.isEmpty),\n layout: computedLayout,\n });\n\n watchEffect(() => {\n // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n // making it important to have Table to control selection props.\n // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n // and move the information up into DataView, that sometimes aren't used.\n if (isDataViewSelectable) {\n isDataViewSelectable.value = props.isSelectable;\n }\n });\n</script>\n\n<template>\n <div\n class=\"stash-table tw-relative\"\n :class=\"[\n { 'tw-rounded': computedRadius === 'rounded' },\n { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n { 'tw-overflow-auto tw-shadow': computedLayout === 'scroll' },\n { 'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack' },\n { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n ]\"\n data-test=\"stash-table\"\n :style=\"rootStyle\"\n >\n <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n <thead\n class=\"tw-border-b tw-border-ice-200\"\n :class=\"{\n 'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n }\"\n >\n <!-- @slot head -->\n <slot name=\"head\"> </slot>\n </thead>\n <tbody>\n <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n <TableCell colspan=\"100%\">\n <Loading />\n </TableCell>\n </TableRow>\n <!-- @slot empty -->\n <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n <TableRow>\n <TableCell colspan=\"100%\">\n <slot name=\"empty\">\n <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n </slot>\n </TableCell>\n </TableRow>\n </template>\n <!-- @slot body -->\n <slot v-else name=\"body\"></slot>\n </tbody>\n </table>\n </div>\n</template>\n"],"names":["Layout","TableRadius","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","props","computedLayout","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;iBCkFJ;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IACZ,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFU,EAAM,MACd,GAEKC,IAAiBF,EAAkB,MACnCC,EAAM,eACD,WAGFA,EAAM,MACd,GAEKE,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAH,EAAM,iBAAN,QAAAG,EAAoB;AAAA,QACpBC,IAAAJ,EAAM,iBAAN,gBAAAI,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAH,EAAM,iBAAN,gBAAAG,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMC,EAAM,WAAWX,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMC,EAAM,qBAAqB;AAAA,MACjE,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,cAAcD,EAAS,MAAMC,EAAM,YAAY;AAAA,MAC/C,cAAcD,EAAS,MAAMC,EAAM,gBAAgB,CAACA,EAAM,aAAa,CAACA,EAAM,OAAO;AAAA,MACrF,QAAQC;AAAA,IAAA,CACT,GAEDQ,EAAY,MAAM;AAKhB,MAAIhB,MACFA,EAAqB,QAAQO,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/TableHeaderRow.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as T, inject as
|
|
2
|
-
import { t as
|
|
3
|
-
import
|
|
4
|
-
import { D as
|
|
1
|
+
import { defineComponent as T, inject as d, ref as u, watchEffect as E, openBlock as s, createElementBlock as R, unref as e, createBlock as r, normalizeClass as c, withCtx as x, createCommentVNode as f, renderSlot as C } from "vue";
|
|
2
|
+
import { t as B } from "./locale.js";
|
|
3
|
+
import S from "./Checkbox.js";
|
|
4
|
+
import { D as w } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
|
|
5
5
|
import "lodash-es/cloneDeep";
|
|
6
6
|
import "lodash-es/uniqueId";
|
|
7
7
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
@@ -9,7 +9,7 @@ import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
|
|
|
9
9
|
import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
|
|
10
10
|
import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
|
|
11
11
|
import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
|
|
12
|
-
import { T as
|
|
12
|
+
import { T as v } from "./Table.keys-cf93df19.js";
|
|
13
13
|
import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
|
|
14
14
|
import h from "./TableHeaderCell.js";
|
|
15
15
|
import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
|
|
@@ -18,7 +18,7 @@ import "@leaflink/snitch";
|
|
|
18
18
|
import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
|
|
19
19
|
import "./index-79ce320f.js";
|
|
20
20
|
import "./Icon.js";
|
|
21
|
-
const
|
|
21
|
+
const g = /* @__PURE__ */ T({
|
|
22
22
|
__name: "TableHeaderRow",
|
|
23
23
|
props: {
|
|
24
24
|
allRowsSelected: { type: Boolean, default: !1 },
|
|
@@ -26,52 +26,52 @@ const v = /* @__PURE__ */ T({
|
|
|
26
26
|
},
|
|
27
27
|
emits: ["select"],
|
|
28
28
|
setup(_, { emit: b }) {
|
|
29
|
-
const
|
|
30
|
-
if (!
|
|
29
|
+
const a = _, n = d(v.key);
|
|
30
|
+
if (!n)
|
|
31
31
|
throw new Error("TableHeaderRow must be used within a Table component");
|
|
32
|
-
const { hasCustomExpandToggle: k, isExpandable: y, isSelectable:
|
|
33
|
-
function
|
|
34
|
-
b("select"),
|
|
32
|
+
const { hasCustomExpandToggle: k, isExpandable: y, isSelectable: i } = n, { hasToolbar: t } = d(w.key, w.defaults), m = u(0), o = u();
|
|
33
|
+
function p() {
|
|
34
|
+
b("select"), m.value++;
|
|
35
35
|
}
|
|
36
|
-
return
|
|
37
|
-
t != null && t.value &&
|
|
38
|
-
}), (
|
|
36
|
+
return E(() => {
|
|
37
|
+
o.value && (t != null && t.value && i.value ? o.value.getElementsByTagName("th")[0].setAttribute("colspan", 2) : o.value.getElementsByTagName("th")[0].setAttribute("colspan", 1));
|
|
38
|
+
}), (l, $) => (s(), R("tr", {
|
|
39
39
|
ref_key: "headerRow",
|
|
40
|
-
ref:
|
|
40
|
+
ref: o,
|
|
41
41
|
class: "stash-table-header-row",
|
|
42
42
|
"data-test": "stash-table-header-row"
|
|
43
43
|
}, [
|
|
44
|
-
!e(t) && e(
|
|
44
|
+
!e(t) && e(i) ? (s(), r(h, {
|
|
45
45
|
key: 0,
|
|
46
|
-
class:
|
|
46
|
+
class: c(["stash-table-header-row__selection-cell tw-min-w-[48px]", l.$style["row-control-cell"]])
|
|
47
47
|
}, {
|
|
48
|
-
default:
|
|
49
|
-
(
|
|
50
|
-
key:
|
|
51
|
-
class:
|
|
52
|
-
checked:
|
|
53
|
-
indeterminate:
|
|
54
|
-
title: e(
|
|
55
|
-
"onUpdate:indeterminate":
|
|
56
|
-
"onUpdate:checked":
|
|
48
|
+
default: x(() => [
|
|
49
|
+
(s(), r(S, {
|
|
50
|
+
key: m.value,
|
|
51
|
+
class: c(l.$style["row-selection-checkbox"]),
|
|
52
|
+
checked: a.allRowsSelected,
|
|
53
|
+
indeterminate: a.someRowsSelected && !a.allRowsSelected,
|
|
54
|
+
title: e(B)("ll.selectAll"),
|
|
55
|
+
"onUpdate:indeterminate": p,
|
|
56
|
+
"onUpdate:checked": p
|
|
57
57
|
}, null, 8, ["class", "checked", "indeterminate", "title"]))
|
|
58
58
|
]),
|
|
59
59
|
_: 1
|
|
60
|
-
}, 8, ["class"])) :
|
|
61
|
-
e(y) && !e(k) ? (
|
|
60
|
+
}, 8, ["class"])) : f("", !0),
|
|
61
|
+
e(y) && !e(k) ? (s(), r(h, {
|
|
62
62
|
key: 1,
|
|
63
|
-
class:
|
|
63
|
+
class: c(l.$style["row-control-cell"]),
|
|
64
64
|
"data-test": "table-row-header-expansion-cell"
|
|
65
|
-
}, null, 8, ["class"])) :
|
|
66
|
-
|
|
65
|
+
}, null, 8, ["class"])) : f("", !0),
|
|
66
|
+
C(l.$slots, "default")
|
|
67
67
|
], 512));
|
|
68
68
|
}
|
|
69
69
|
}), A = {
|
|
70
70
|
"row-selection-checkbox": "_row-selection-checkbox_1eq6o_2",
|
|
71
71
|
"row-control-cell": "_row-control-cell_1eq6o_8"
|
|
72
|
-
},
|
|
72
|
+
}, I = {
|
|
73
73
|
$style: A
|
|
74
|
-
}, ee = /* @__PURE__ */ N(
|
|
74
|
+
}, ee = /* @__PURE__ */ N(g, [["__cssModules", I]]);
|
|
75
75
|
export {
|
|
76
76
|
ee as default
|
|
77
77
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject,
|
|
1
|
+
{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject, ref, watchEffect } from 'vue';\n\n import { t } from '../../locale';\n import Checkbox from '../Checkbox/Checkbox.vue';\n import { DATA_VIEW_INJECTION } from '../DataView/DataView.keys';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n export interface TableHeaderRowProps {\n allRowsSelected?: boolean;\n someRowsSelected?: boolean;\n }\n\n const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n allRowsSelected: false,\n someRowsSelected: false,\n });\n\n const emit =\n defineEmits<{\n (e: 'select'): void;\n }>();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n\n if (!tableInjection) {\n throw new Error('TableHeaderRow must be used within a Table component');\n }\n\n const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n const { hasToolbar } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n const checkboxKey = ref(0);\n const headerRow = ref();\n\n function onSelect() {\n emit('select');\n\n /**\n * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n */\n checkboxKey.value++;\n }\n\n watchEffect(() => {\n // Whenever a Table is selectable _and_ is within a DataView with a toolbar, we pick the first header cell and add a colspan=2.\n // After a Table is mounted, if for whatever reason the conditions are changed for useSelection, the header needs to watch it.\n // This being a watch guarantees that colspan is properly applied whenever conditions are met and revert back when they aren't anymore.\n if (headerRow.value) {\n if (hasToolbar?.value && isSelectable.value) {\n headerRow.value.getElementsByTagName('th')[0].setAttribute('colspan', 2);\n } else {\n headerRow.value.getElementsByTagName('th')[0].setAttribute('colspan', 1);\n }\n }\n });\n</script>\n\n<template>\n <tr ref=\"headerRow\" class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n <TableHeaderCell\n v-if=\"!hasToolbar && isSelectable\"\n class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n :class=\"$style['row-control-cell']\"\n >\n <Checkbox\n :key=\"checkboxKey\"\n :class=\"$style['row-selection-checkbox']\"\n :checked=\"props.allRowsSelected\"\n :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n :title=\"t('ll.selectAll')\"\n @update:indeterminate=\"onSelect\"\n @update:checked=\"onSelect\"\n />\n </TableHeaderCell>\n <TableHeaderCell\n v-if=\"isExpandable && !hasCustomExpandToggle\"\n :class=\"$style['row-control-cell']\"\n data-test=\"table-row-header-expansion-cell\"\n />\n <!-- @slot default -->\n <slot></slot>\n </tr>\n</template>\n\n<style module>\n .row-selection-checkbox label {\n padding: 0;\n min-height: theme('spacing.6');\n vertical-align: middle;\n }\n\n .row-control-cell {\n border-right: 0;\n }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","hasToolbar","DATA_VIEW_INJECTION","checkboxKey","ref","headerRow","onSelect","emit","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwBQA,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExD,EAAE,YAAAM,EAAW,IAAIL,EAAOM,EAAoB,KAAKA,EAAoB,QAAQ,GAE7EC,IAAcC,EAAI,CAAC,GACnBC,IAAYD;AAElB,aAASE,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODJ,EAAA;AAAA,IACd;AAEA,WAAAK,EAAY,MAAM;AAIhB,MAAIH,EAAU,UACRJ,KAAA,QAAAA,EAAY,SAASD,EAAa,QAC1BK,EAAA,MAAM,qBAAqB,IAAI,EAAE,CAAC,EAAE,aAAa,WAAW,CAAC,IAE7DA,EAAA,MAAM,qBAAqB,IAAI,EAAE,CAAC,EAAE,aAAa,WAAW,CAAC;AAAA,IAE3E,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|