@leaflink/stash 50.0.7 → 50.1.0

package/dist/Filters.vue.d.ts

@@ -743,6 +743,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -771,6 +775,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -817,7 +825,9 @@ type: "input" | "select";
 }) => void;
 }, PublicProps, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;
@@ -848,6 +858,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -876,6 +890,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -909,7 +927,9 @@ type: "input" | "select";
 }) => any) | undefined;
 }>, {}, {}, {}, {}, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;
@@ -937,6 +957,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -965,6 +989,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -1011,7 +1039,9 @@ type: "input" | "select";
 }) => void;
 }, string, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;

package/dist/Image.js

@@ -1,15 +1,15 @@
-import { defineComponent as W, inject as A, computed as a, useAttrs as M, openBlock as B, createElementBlock as k, mergeProps as C, unref as L } from "vue";
-import { IMAGE_PROVIDER_URLS as N, SCREEN_SIZES as y } from "./constants.js";
+import { defineComponent as W, inject as C, computed as a, useAttrs as M, openBlock as B, createElementBlock as k, mergeProps as L, unref as $ } from "vue";
+import { IMAGE_PROVIDER_URLS as N, SCREEN_SIZES as w } from "./constants.js";
 import q from "lodash-es/merge";
-const $ = {
+const j = {
   xs: 160,
   sm: 338,
   md: 676,
   lg: 1352,
   xl: 2704
 };
-var w = /* @__PURE__ */ ((t) => (t.None = "none", t.Rounded = "rounded", t))(w || {}), z = /* @__PURE__ */ ((t) => (t.Cloudinary = "cloudinary", t.Static = "static", t))(z || {});
-function j(t) {
+var z = /* @__PURE__ */ ((t) => (t.None = "none", t.Rounded = "rounded", t.Circle = "circle", t))(z || {}), b = /* @__PURE__ */ ((t) => (t.Cloudinary = "cloudinary", t.Static = "static", t))(b || {});
+function P(t) {
   return (s) => t[s] || s;
 }
 function G({
@@ -18,16 +18,16 @@ function G({
   joinWith: i = "/",
   valueMap: e = {}
 } = {}) {
-  const m = typeof s == "function" ? s : j(s || {});
+  const m = typeof s == "function" ? s : P(s || {});
   return Object.keys(e).forEach((c) => {
-    typeof e[c] != "function" && (e[c] = j(e[c]));
-  }), (c = {}) => Object.entries(c).map(([d, l]) => {
-    const p = e[d], g = m(d);
-    let v = l;
-    return typeof p == "function" && (v = p(c[d])), t(g, v);
+    typeof e[c] != "function" && (e[c] = P(e[c]));
+  }), (c = {}) => Object.entries(c).map(([l, d]) => {
+    const p = e[l], g = m(l);
+    let v = d;
+    return typeof p == "function" && (v = p(c[l])), t(g, v);
   }).join(i);
 }
-const Q = N.CLOUDINARY, T = (t) => t.startsWith("#") ? t.replace("#", "rgb_") : t, P = G({
+const Q = N.CLOUDINARY, T = (t) => t.startsWith("#") ? t.replace("#", "rgb_") : t, E = G({
   keyMap: {
     fit: "c",
     width: "w",
@@ -59,13 +59,13 @@ const Q = N.CLOUDINARY, T = (t) => t.startsWith("#") ? t.replace("#", "rgb_") :
   quality: "auto:best"
 };
 function F(t, s = {}) {
-  const i = q(D, s), e = P(i);
+  const i = q(D, s), e = E(i);
   return `${Q}/${e}/${t}`;
 }
 const V = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   getImageUrl: F,
-  operationsGenerator: P
+  operationsGenerator: E
 }, Symbol.toStringTag, { value: "Module" }));
 function H(t = "") {
   return t;
@@ -77,6 +77,7 @@ const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   cloudinary: V,
   static: Y
 }, J = ["src"], et = /* @__PURE__ */ W({
+  inheritAttrs: !1,
   __name: "Image",
   props: {
     src: { default: "" },
@@ -88,11 +89,11 @@ const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   },
   setup(t) {
     const s = {
-      md: y.md,
-      lg: y.lg
-    }, i = A("stashOptions"), e = t, m = a(() => {
+      md: w.md,
+      lg: w.lg
+    }, i = C("stashOptions"), e = t, m = a(() => {
       const { src: r, ...n } = M();
-      return n.sizes = v.value, n.srcset = E.value, n;
+      return n.sizes = v.value, n.srcset = I.value, n;
     }), c = a(() => {
       try {
         return new URL(e.src), !0;
@@ -101,22 +102,22 @@ const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       }
     }), S = a(() => {
       var r;
-      return e.provider || ((r = i == null ? void 0 : i.images) == null ? void 0 : r.provider) || z.Static;
-    }), d = a(() => e.staticPath ?? (i == null ? void 0 : i.staticPath)), l = a(() => S.value === z.Static), p = a(() => Z[S.value]), g = a(() => l.value ? _() : _({ width: $.md })), v = a(() => e.sizes ? U() : e.sizes), E = a(() => e.sizes && !e.srcset && !l.value ? R() : e.srcset), I = a(() => e.sizes ? O(e.sizes) : []);
+      return e.provider || ((r = i == null ? void 0 : i.images) == null ? void 0 : r.provider) || b.Static;
+    }), l = a(() => e.staticPath ?? (i == null ? void 0 : i.staticPath)), d = a(() => S.value === b.Static), p = a(() => Z[S.value]), g = a(() => d.value ? _() : _({ width: j.md })), v = a(() => e.sizes ? O() : e.sizes), I = a(() => e.sizes && !e.srcset && !d.value ? R() : e.srcset), U = a(() => e.sizes ? x(e.sizes) : []);
     function _(r = {}) {
-      if (l.value && c.value)
+      if (d.value && c.value)
         return e.src;
-      const n = l.value && d.value ? `${d.value}/${e.src}` : e.src;
+      const n = d.value && l.value ? `${l.value}/${e.src}` : e.src;
       return p.value.getImageUrl(n, r);
     }
     function R() {
-      return Object.values($).map((r) => `${_({ width: r })} ${r}w`).join(", ");
+      return Object.values(j).map((r) => `${_({ width: r })} ${r}w`).join(", ");
     }
-    function U() {
+    function O() {
       var r;
-      return (r = e.sizes) != null && r.includes("(") ? e.sizes : I.value.map((n) => `${n.mediaQuery ? n.mediaQuery + " " : ""}${n.size}`).join(", ");
+      return (r = e.sizes) != null && r.includes("(") ? e.sizes : U.value.map((n) => `${n.mediaQuery ? n.mediaQuery + " " : ""}${n.size}`).join(", ");
     }
-    function O(r = "") {
+    function x(r = "") {
       const n = [], h = {
         default: "100vw"
       };
@@ -135,33 +136,34 @@ const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       for (const f in h) {
         const u = parseInt(s[f] || 0);
         let o = String(h[f]);
-        const b = o.endsWith("vw");
-        if (!b && /^\d+$/.test(o) && (o = `${o}px`), !b && o.endsWith("%"))
+        const y = o.endsWith("vw");
+        if (!y && /^\d+$/.test(o) && (o = `${o}px`), !y && o.endsWith("%"))
           throw new Error("Image: `sizes` does not support percentage values");
-        const x = {
+        const A = {
           mediaQuery: u ? `(min-width: ${u}px)` : "",
           screenMinWidth: u,
           size: o
         };
-        n.push(x);
+        n.push(A);
       }
       return n.sort((f, u) => f.screenMinWidth > u.screenMinWidth ? -1 : 1), n;
     }
-    return (r, n) => (B(), k("img", C({
+    return (r, n) => (B(), k("img", L({
       ref: "img",
       key: g.value,
       "data-test": "stash-image",
       class: ["stash-image", {
-        "tw-rounded": e.radius === L(w).Rounded
+        "tw-rounded": e.radius === $(z).Rounded,
+        "tw-rounded-full": e.radius === $(z).Circle
       }],
       src: g.value
     }, m.value), null, 16, J));
   }
 });
 export {
-  z as ImageProviders,
-  w as ImageRadius,
-  $ as Screens,
+  b as ImageProviders,
+  z as ImageRadius,
+  j as Screens,
   et as default
 };
 //# sourceMappingURL=Image.js.map

package/dist/Image.js.map

@@ -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","props","__props","attrs","computed","useAttrs","imgSizes","imgSrcset","isAbsoluteUrl","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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"}
+{"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  Circle = 'circle',\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  defineOptions({\n    inheritAttrs: false,\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      'tw-rounded-full': props.radius === ImageRadius.Circle,\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","props","__props","attrs","computed","useAttrs","imgSizes","imgSrcset","isAbsoluteUrl","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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"}

package/dist/Image.vue.d.ts

@@ -43,7 +43,7 @@ radius: string;
 }>>> & Readonly<{}>, {
 staticPath: string;
 src: string;
-radius: "none" | "rounded";
+radius: "circle" | "none" | "rounded";
 srcset: string;
 sizes: string;
 provider: "static" | "cloudinary";
@@ -92,7 +92,8 @@ export declare type ImageRadii = `${ImageRadius}`;
 
 export declare enum ImageRadius {
     None = "none",
-    Rounded = "rounded"
+    Rounded = "rounded",
+    Circle = "circle"
 }
 
 export declare interface ImageSizeCondition {

package/dist/InputOptions.js

@@ -1,12 +1,12 @@
-import { defineComponent as E, useAttrs as T, useSlots as $, useCssModule as D, ref as r, computed as M, watchEffect as R, watch as v, openBlock as c, createBlock as z, mergeProps as h, createSlots as A, withCtx as f, createElementBlock as y, createElementVNode as F, toDisplayString as _, normalizeClass as w, unref as i, createVNode as b, renderSlot as N } from "vue";
-import U from "./Input.js";
-import q from "./Select.js";
-import { _ as L } from "./Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js";
-import { _ as P } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const j = {
+import { defineComponent as S, useAttrs as O, useSlots as E, useCssModule as T, ref as p, watchEffect as $, watch as h, openBlock as d, createBlock as D, mergeProps as M, createSlots as R, withCtx as f, createElementBlock as y, createElementVNode as z, toDisplayString as _, normalizeClass as r, unref as s, createVNode as b, renderSlot as F } from "vue";
+import N from "./Input.js";
+import U from "./Select.js";
+import { _ as q } from "./Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js";
+import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const L = {
   key: 0,
   class: "tw-flex tw-h-input tw-items-center tw-text-sm"
-}, G = ["id", "aria-labelledby"], H = /* @__PURE__ */ E({
+}, P = ["id", "aria-labelledby"], j = /* @__PURE__ */ S({
   name: "ll-input-options",
   __name: "InputOptions",
   props: {
@@ -15,136 +15,137 @@ const j = {
     noTruncate: { type: Boolean, default: !1 },
     options: { default: () => [] },
     placeholder: { default: void 0 },
-    disabled: { type: Boolean },
-    isReadOnly: { type: Boolean },
+    displayBy: { default: void 0 },
+    trackBy: { default: void 0 },
     addBottomSpace: { type: Boolean },
     errorText: {},
     hintText: {},
     id: {},
     errorId: {},
+    isReadOnly: { type: Boolean },
     isRequired: { type: Boolean },
     label: {},
     showOptionalInLabel: { type: Boolean },
     fieldset: { type: Boolean },
-    isDisabled: { type: Boolean }
+    isDisabled: { type: Boolean },
+    disabled: { type: Boolean }
   },
   emits: ["update:model-value", "change"],
-  setup(g, { emit: B }) {
-    const e = g, n = B, u = T(), V = $(), p = D(), o = r(), d = r(!1), t = r(), C = M(() => {
-      const { disabled: l, displayBy: a, trackBy: s } = u;
-      return { disabled: l, displayBy: a, trackBy: s };
-    });
-    function x(l) {
-      o.value = String(l), n("update:model-value", {
-        value: o.value,
+  setup(w, { emit: g }) {
+    const e = w, o = g, c = O(), B = E(), i = T(), l = p(), u = p(!1), t = p();
+    function V(a) {
+      l.value = String(a), o("update:model-value", {
+        value: l.value,
         option: t.value,
         isValueChange: !0,
         type: "input"
       });
     }
-    function I() {
-      n("change", {
-        value: o.value,
+    function k() {
+      o("change", {
+        value: l.value,
         option: t.value,
         isValueChange: !0,
         type: "input"
       });
     }
-    function k(l) {
-      t.value = l, n("change", {
-        value: o.value,
+    function C(a) {
+      t.value = a, o("change", {
+        value: l.value,
         option: t.value,
         isValueChange: !1,
         type: "select"
-      }), n("update:model-value", {
-        value: o.value,
+      }), o("update:model-value", {
+        value: l.value,
         option: t.value,
         isValueChange: !1,
         type: "select"
       });
     }
-    if (R(() => {
+    if ($(() => {
       t.value || (t.value = e.options[0]);
-    }), v(
+    }), h(
       () => e.modelValue.value,
       () => {
-        o.value = e.modelValue.value;
+        l.value = e.modelValue.value;
       },
       { immediate: !0 }
-    ), v(
+    ), h(
       () => e.modelValue.option,
       () => {
         t.value = e.modelValue.option;
       },
       { immediate: !0 }
-    ), u.value)
+    ), c.value)
       throw new Error("ll-input-options: use :model-value or v-model instead of :value.");
-    if (u.onInput)
+    if (c.onInput)
       throw new Error("ll-input-options: use the @update:model-value event instead of @input");
-    return (l, a) => (c(), z(L, h(e, {
+    return (a, n) => (d(), D(q, M(e, {
       class: "stash-input-options",
       "data-test": "stash-input-options"
-    }), A({
-      default: f(({ fieldId: s, labelId: S }) => {
-        var m;
+    }), R({
+      default: f(({ fieldId: m, labelId: x }) => {
+        var v;
         return [
-          e.isReadOnly ? (c(), y("div", j, [
-            F("span", {
-              id: s,
-              "aria-labelledby": S,
+          e.isReadOnly ? (d(), y("div", L, [
+            z("span", {
+              id: m,
+              "aria-labelledby": x,
               class: "tw-h-min"
-            }, _(o.value || 0) + " " + _((m = t.value) == null ? void 0 : m.name), 9, G)
-          ])) : (c(), y("div", {
+            }, _(l.value || 0) + " " + _((v = t.value) == null ? void 0 : v.name), 9, P)
+          ])) : (d(), y("div", {
             key: 1,
-            class: w(["tw-flex", { [i(p)["has-error"]]: !!e.errorText }])
+            class: r(["tw-flex", { [s(i)["has-error"]]: !!e.errorText }])
           }, [
-            b(U, {
-              id: s,
-              class: w(["stash-input-options__input -tw-mr-[1px] tw-inline-block tw-flex-1", [i(p).input, { "tw-z-control": d.value }]]),
+            b(N, {
+              id: m,
+              class: r(["stash-input-options__input -tw-mr-[1px] tw-inline-block tw-flex-1", [s(i).input, { "tw-z-control": u.value }]]),
               "data-test": "stash-input-options|input",
               type: e.type,
-              "model-value": o.value,
+              "model-value": l.value,
               disabled: e.isDisabled || e.disabled,
               placeholder: e.placeholder,
-              onChange: I,
-              "onUpdate:modelValue": x,
-              onBlur: a[0] || (a[0] = (O) => d.value = !1),
-              onFocus: a[1] || (a[1] = (O) => d.value = !0)
+              onChange: k,
+              "onUpdate:modelValue": V,
+              onBlur: n[0] || (n[0] = (I) => u.value = !1),
+              onFocus: n[1] || (n[1] = (I) => u.value = !0)
             }, null, 8, ["id", "class", "type", "model-value", "disabled", "placeholder"]),
-            b(q, h(C.value, {
+            b(U, {
               single: "",
               "hide-search": "",
               "prevent-empty": "",
-              class: ["stash-input-options__select tw-min-w-20", i(p).select],
+              class: r(["stash-input-options__select tw-min-w-20", s(i).select]),
               "data-test": "stash-input-options|select",
-              "no-truncate": l.noTruncate,
-              options: l.options,
+              "no-truncate": a.noTruncate,
+              options: a.options,
               "model-value": t.value,
+              "display-by": e.displayBy,
+              "track-by": e.trackBy,
               disabled: e.isDisabled || e.disabled,
-              "onUpdate:modelValue": k
-            }), null, 16, ["class", "no-truncate", "options", "model-value", "disabled"])
+              "onUpdate:modelValue": C
+            }, null, 8, ["class", "no-truncate", "options", "model-value", "display-by", "track-by", "disabled"])
           ], 2))
         ];
       }),
       _: 2
     }, [
-      i(V).hint ? {
+      s(B).hint ? {
         name: "hint",
         fn: f(() => [
-          N(l.$slots, "hint")
+          F(a.$slots, "hint")
         ]),
         key: "0"
       } : void 0
     ]), 1040));
   }
-}), J = "_input_gn7he_2", K = "_select_gn7he_7", Q = {
-  input: J,
-  select: K,
+}), G = "_input_gn7he_2", H = "_select_gn7he_7", J = {
+  input: G,
+  select: H,
   "has-error": "_has-error_gn7he_16"
-}, W = {
-  $style: Q
-}, le = /* @__PURE__ */ P(H, [["__cssModules", W]]);
+}, K = {
+  $style: J
+}, ee = /* @__PURE__ */ A(j, [["__cssModules", K]]);
 export {
-  le as default
+  ee as default
 };
 //# sourceMappingURL=InputOptions.js.map

package/dist/InputOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOptions.js","sources":["../src/components/InputOptions/InputOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Field, { type FieldProps } from '../Field/Field.vue';\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type Option = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type SelectedOption = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  export interface InputOptionsProps extends FieldProps {\n    /**\n     * The current value inclusive of the input & select\n     */\n    modelValue?: { value: string; option?: SelectedOption };\n\n    /**\n     * Input type\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n\n    /**\n     * Prevents the Selected Option from being truncated, if true\n     */\n    noTruncate?: boolean;\n\n    /**\n     * Options for the select\n     */\n    options?: Option[];\n\n    /**\n     * Placeholder text for the input\n     * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n     */\n    placeholder?: string;\n\n    /**\n     * Indicates whether the inputOptions is disabled.\n     */\n    disabled?: boolean;\n\n    /**\n     * Indicates whether the inputOptions is read-only.\n     */\n    isReadOnly?: boolean;\n  }\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, ref, useAttrs, useCssModule, useSlots, watch, watchEffect } from 'vue';\n\n  import Input from '../Input/Input.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-input-options',\n  });\n\n  const props = withDefaults(defineProps<InputOptionsProps>(), {\n    modelValue: () => ({ value: '', option: undefined }),\n    noTruncate: false,\n    options: () => [],\n    type: 'text',\n    placeholder: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (\n      e: 'update:model-value',\n      v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n    ): void;\n    /**\n     * Emitted when either the input or select changes\n     */\n    (\n      e: 'change',\n      v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n    ): void;\n  }>();\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n  const internalInput = ref<string>();\n  const isInputFocused = ref(false);\n  const selectedOption = ref<Option | undefined>();\n\n  const selectAttrs = computed(() => {\n    const { disabled, displayBy, trackBy } = attrs;\n\n    return { disabled, displayBy, trackBy } as { disabled: boolean; displayBy: string; trackBy: string };\n  });\n\n  // Input value changed\n  function handleInput(val?: string | number) {\n    internalInput.value = String(val);\n\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  // Input blurred\n  function handleInputChange() {\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  function handleSelectChange(val?: Option) {\n    selectedOption.value = val;\n\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n  }\n\n  watchEffect(() => {\n    if (!selectedOption.value) {\n      selectedOption.value = props.options[0];\n    }\n  });\n\n  watch(\n    () => props.modelValue.value,\n    () => {\n      internalInput.value = props.modelValue.value;\n    },\n    { immediate: true },\n  );\n\n  watch(\n    () => props.modelValue.option,\n    () => {\n      selectedOption.value = props.modelValue.option;\n    },\n    { immediate: true },\n  );\n\n  if (attrs.value) {\n    throw new Error('ll-input-options: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-input-options: use the @update:model-value event instead of @input');\n  }\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-input-options\" data-test=\"stash-input-options\">\n    <template #default=\"{ fieldId, labelId }\">\n      <div v-if=\"props.isReadOnly\" class=\"tw-flex tw-h-input tw-items-center tw-text-sm\">\n        <span :id=\"fieldId\" :aria-labelledby=\"labelId\" class=\"tw-h-min\"\n          >{{ internalInput || 0 }} {{ selectedOption?.name }}</span\n        >\n      </div>\n      <div v-else class=\"tw-flex\" :class=\"{ [classes['has-error']]: !!props.errorText }\">\n        <Input\n          :id=\"fieldId\"\n          class=\"stash-input-options__input -tw-mr-[1px] tw-inline-block tw-flex-1\"\n          :class=\"[classes.input, { 'tw-z-control': isInputFocused }]\"\n          data-test=\"stash-input-options|input\"\n          :type=\"props.type\"\n          :model-value=\"internalInput\"\n          :disabled=\"props.isDisabled || props.disabled\"\n          :placeholder=\"props.placeholder\"\n          @change=\"handleInputChange\"\n          @update:model-value=\"handleInput\"\n          @blur=\"isInputFocused = false\"\n          @focus=\"isInputFocused = true\"\n        />\n\n        <Select\n          v-bind=\"selectAttrs\"\n          single\n          hide-search\n          prevent-empty\n          class=\"stash-input-options__select tw-min-w-20\"\n          data-test=\"stash-input-options|select\"\n          :class=\"classes.select\"\n          :no-truncate=\"noTruncate\"\n          :options=\"options\"\n          :model-value=\"selectedOption\"\n          :disabled=\"props.isDisabled || props.disabled\"\n          @update:model-value=\"handleSelectChange\"\n        />\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint slot for rendering text below the input -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .input input {\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .select :global(.stash-select__content) {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n\n  .select:global(.stash-select--active .stash-select__content) {\n    min-width: 0;\n  }\n\n  .has-error input,\n  .has-error input:hover:not(:focus),\n  .has-error :global(.stash-select__content),\n  .has-error :global(.stash-select__content:hover:not(:focus)) {\n    border-color: var(--color-red-500);\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","slots","useSlots","classes","useCssModule","internalInput","ref","isInputFocused","selectedOption","selectAttrs","computed","disabled","displayBy","trackBy","handleInput","val","handleInputChange","handleSelectChange","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DE,UAAMA,IAAQC,GAQRC,IAAOC,GAiBPC,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAgBC,KAChBC,IAAiBD,EAAI,EAAK,GAC1BE,IAAiBF,KAEjBG,IAAcC,EAAS,MAAM;AACjC,YAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,SAAAC,EAAA,IAAYd;AAElC,aAAA,EAAE,UAAAY,GAAU,WAAAC,GAAW,SAAAC;IAAQ,CACvC;AAGD,aAASC,EAAYC,GAAuB;AAC5B,MAAAV,EAAA,QAAQ,OAAOU,CAAG,GAEhClB,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAGA,aAASQ,IAAoB;AAC3B,MAAAnB,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAEA,aAASS,EAAmBF,GAAc;AACxC,MAAAP,EAAe,QAAQO,GAEvBlB,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP,GACDX,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAwBA,QAtBAU,EAAY,MAAM;AACZ,MAACV,EAAe,UACHA,EAAA,QAAQb,EAAM,QAAQ,CAAC;AAAA,IACxC,CACD,GAEDwB;AAAA,MACE,MAAMxB,EAAM,WAAW;AAAA,MACvB,MAAM;AACU,QAAAU,EAAA,QAAQV,EAAM,WAAW;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBwB;AAAA,MACE,MAAMxB,EAAM,WAAW;AAAA,MACvB,MAAM;AACW,QAAAa,EAAA,QAAQb,EAAM,WAAW;AAAA,MAC1C;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGhBI,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIA,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"InputOptions.js","sources":["../src/components/InputOptions/InputOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Field, { type FieldProps } from '../Field/Field.vue';\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type Option = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type SelectedOption = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  export interface InputOptionsProps extends FieldProps {\n    /**\n     * The current value inclusive of the input & select\n     */\n    modelValue?: { value: string; option?: SelectedOption };\n\n    /**\n     * Input type\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n\n    /**\n     * Prevents the Selected Option from being truncated, if true\n     */\n    noTruncate?: boolean;\n\n    /**\n     * Options for the select\n     */\n    options?: Option[];\n\n    /**\n     * Placeholder text for the input\n     * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n     */\n    placeholder?: string;\n\n    /**\n     * If `options` are an object, this is what prop to use for display.\n     */\n    displayBy?: string;\n\n    /**\n     * Default field to track selected options by.\n     */\n    trackBy?: string;\n  }\n</script>\n\n<script lang=\"ts\" setup>\n  import { ref, useAttrs, useCssModule, useSlots, watch, watchEffect } from 'vue';\n\n  import Input from '../Input/Input.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-input-options',\n  });\n\n  const props = withDefaults(defineProps<InputOptionsProps>(), {\n    modelValue: () => ({ value: '', option: undefined }),\n    noTruncate: false,\n    options: () => [],\n    type: 'text',\n    placeholder: undefined,\n    displayBy: undefined,\n    trackBy: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (\n      e: 'update:model-value',\n      v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n    ): void;\n    /**\n     * Emitted when either the input or select changes\n     */\n    (\n      e: 'change',\n      v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n    ): void;\n  }>();\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n  const internalInput = ref<string>();\n  const isInputFocused = ref(false);\n  const selectedOption = ref<Option | undefined>();\n\n  // Input value changed\n  function handleInput(val?: string | number) {\n    internalInput.value = String(val);\n\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  // Input blurred\n  function handleInputChange() {\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  function handleSelectChange(val?: Option) {\n    selectedOption.value = val;\n\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n  }\n\n  watchEffect(() => {\n    if (!selectedOption.value) {\n      selectedOption.value = props.options[0];\n    }\n  });\n\n  watch(\n    () => props.modelValue.value,\n    () => {\n      internalInput.value = props.modelValue.value;\n    },\n    { immediate: true },\n  );\n\n  watch(\n    () => props.modelValue.option,\n    () => {\n      selectedOption.value = props.modelValue.option;\n    },\n    { immediate: true },\n  );\n\n  if (attrs.value) {\n    throw new Error('ll-input-options: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-input-options: use the @update:model-value event instead of @input');\n  }\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-input-options\" data-test=\"stash-input-options\">\n    <template #default=\"{ fieldId, labelId }\">\n      <div v-if=\"props.isReadOnly\" class=\"tw-flex tw-h-input tw-items-center tw-text-sm\">\n        <span :id=\"fieldId\" :aria-labelledby=\"labelId\" class=\"tw-h-min\"\n          >{{ internalInput || 0 }} {{ selectedOption?.name }}</span\n        >\n      </div>\n      <div v-else class=\"tw-flex\" :class=\"{ [classes['has-error']]: !!props.errorText }\">\n        <Input\n          :id=\"fieldId\"\n          class=\"stash-input-options__input -tw-mr-[1px] tw-inline-block tw-flex-1\"\n          :class=\"[classes.input, { 'tw-z-control': isInputFocused }]\"\n          data-test=\"stash-input-options|input\"\n          :type=\"props.type\"\n          :model-value=\"internalInput\"\n          :disabled=\"props.isDisabled || props.disabled\"\n          :placeholder=\"props.placeholder\"\n          @change=\"handleInputChange\"\n          @update:model-value=\"handleInput\"\n          @blur=\"isInputFocused = false\"\n          @focus=\"isInputFocused = true\"\n        />\n\n        <Select\n          single\n          hide-search\n          prevent-empty\n          class=\"stash-input-options__select tw-min-w-20\"\n          data-test=\"stash-input-options|select\"\n          :class=\"classes.select\"\n          :no-truncate=\"noTruncate\"\n          :options=\"options\"\n          :model-value=\"selectedOption\"\n          :display-by=\"props.displayBy\"\n          :track-by=\"props.trackBy\"\n          :disabled=\"props.isDisabled || props.disabled\"\n          @update:model-value=\"handleSelectChange\"\n        />\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint slot for rendering text below the input -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .input input {\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .select :global(.stash-select__content) {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n\n  .select:global(.stash-select--active .stash-select__content) {\n    min-width: 0;\n  }\n\n  .has-error input,\n  .has-error input:hover:not(:focus),\n  .has-error :global(.stash-select__content),\n  .has-error :global(.stash-select__content:hover:not(:focus)) {\n    border-color: var(--color-red-500);\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","slots","useSlots","classes","useCssModule","internalInput","ref","isInputFocused","selectedOption","handleInput","val","handleInputChange","handleSelectChange","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DE,UAAMA,IAAQC,GAURC,IAAOC,GAiBPC,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAgBC,KAChBC,IAAiBD,EAAI,EAAK,GAC1BE,IAAiBF;AAGvB,aAASG,EAAYC,GAAuB;AAC5B,MAAAL,EAAA,QAAQ,OAAOK,CAAG,GAEhCb,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAGA,aAASG,IAAoB;AAC3B,MAAAd,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAEA,aAASI,EAAmBF,GAAc;AACxC,MAAAF,EAAe,QAAQE,GAEvBb,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP,GACDX,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAwBA,QAtBAK,EAAY,MAAM;AACZ,MAACL,EAAe,UACHA,EAAA,QAAQb,EAAM,QAAQ,CAAC;AAAA,IACxC,CACD,GAEDmB;AAAA,MACE,MAAMnB,EAAM,WAAW;AAAA,MACvB,MAAM;AACU,QAAAU,EAAA,QAAQV,EAAM,WAAW;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBmB;AAAA,MACE,MAAMnB,EAAM,WAAW;AAAA,MACvB,MAAM;AACW,QAAAa,EAAA,QAAQb,EAAM,WAAW;AAAA,MAC1C;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGhBI,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIA,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/InputOptions.vue.d.ts

@@ -41,6 +41,8 @@ noTruncate: boolean;
 options: () => never[];
 type: string;
 placeholder: undefined;
+displayBy: undefined;
+trackBy: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:model-value": (v: {
 value?: string | undefined;
@@ -63,6 +65,8 @@ noTruncate: boolean;
 options: () => never[];
 type: string;
 placeholder: undefined;
+displayBy: undefined;
+trackBy: undefined;
 }>>> & Readonly<{
 onChange?: ((v: {
 value?: string | undefined;
@@ -78,7 +82,9 @@ type: 'input' | 'select';
 }) => any) | undefined;
 }>, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;
@@ -169,13 +175,13 @@ export declare interface InputOptionsProps extends FieldProps {
      */
     placeholder?: string;
     /**
-     * Indicates whether the inputOptions is disabled.
+     * If `options` are an object, this is what prop to use for display.
      */
-    disabled?: boolean;
+    displayBy?: string;
     /**
-     * Indicates whether the inputOptions is read-only.
+     * Default field to track selected options by.
      */
-    isReadOnly?: boolean;
+    trackBy?: string;
 }
 
 declare type Option_2 = any;

package/dist/ListView.vue.d.ts

@@ -2016,6 +2016,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -2044,6 +2048,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -2055,9 +2063,7 @@ option?: any;
 }>;
 default: () => {
 value: string;
-option: undefined; /**
-* Validation schema function that returns an object
-*/
+option: undefined;
 };
 };
 noTruncate: {
@@ -2073,20 +2079,20 @@ type: "input" | "select";
 }) => any) | undefined;
 "onUpdate:model-value"?: ((v: {
 value?: string | undefined;
-option?: any;
-isValueChange: boolean;
-type: "input" | "select"; /**
+option?: any; /**
 * Hide the Select All checkbox for bulk actions
 */
+isValueChange: boolean;
+type: "input" | "select";
 }) => any) | undefined;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:model-value": (v: {
 value?: string | undefined;
-option?: any;
-isValueChange: boolean;
-type: "input" | "select"; /**
+option?: any; /**
 * Hide the Select All checkbox for bulk actions
 */
+isValueChange: boolean;
+type: "input" | "select";
 }) => void;
 change: (v: {
 value?: string | undefined;
@@ -2096,7 +2102,9 @@ type: "input" | "select";
 }) => void;
 }, PublicProps, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;
@@ -2127,6 +2135,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -2155,6 +2167,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -2166,9 +2182,7 @@ option?: any;
 }>;
 default: () => {
 value: string;
-option: undefined; /**
-* Validation schema function that returns an object
-*/
+option: undefined;
 };
 };
 noTruncate: {
@@ -2184,15 +2198,17 @@ type: "input" | "select";
 }) => any) | undefined;
 "onUpdate:model-value"?: ((v: {
 value?: string | undefined;
-option?: any;
-isValueChange: boolean;
-type: "input" | "select"; /**
+option?: any; /**
 * Hide the Select All checkbox for bulk actions
 */
+isValueChange: boolean;
+type: "input" | "select";
 }) => any) | undefined;
 }>, {}, {}, {}, {}, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;
@@ -2220,6 +2236,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -2248,6 +2268,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -2259,9 +2283,7 @@ option?: any;
 }>;
 default: () => {
 value: string;
-option: undefined; /**
-* Validation schema function that returns an object
-*/
+option: undefined;
 };
 };
 noTruncate: {
@@ -2277,20 +2299,20 @@ type: "input" | "select";
 }) => any) | undefined;
 "onUpdate:model-value"?: ((v: {
 value?: string | undefined;
-option?: any;
-isValueChange: boolean;
-type: "input" | "select"; /**
+option?: any; /**
 * Hide the Select All checkbox for bulk actions
 */
+isValueChange: boolean;
+type: "input" | "select";
 }) => any) | undefined;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:model-value": (v: {
 value?: string | undefined;
-option?: any;
-isValueChange: boolean;
-type: "input" | "select"; /**
+option?: any; /**
 * Hide the Select All checkbox for bulk actions
 */
+isValueChange: boolean;
+type: "input" | "select";
 }) => void;
 change: (v: {
 value?: string | undefined;
@@ -2300,7 +2322,9 @@ type: "input" | "select";
 }) => void;
 }, string, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "50.0.7",
+  "version": "50.1.0",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",