@leaflink/stash 51.10.0 → 51.11.1

package/dist/{Illustration.vue_vue_type_script_setup_true_lang-BVzzNsRt.js.map → Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Illustration.vue_vue_type_script_setup_true_lang-BVzzNsRt.js","sources":["../src/components/Illustration/Illustration.models.ts","../src/components/Illustration/Illustration.vue"],"sourcesContent":["/**\n * Enum to strongly map between a friendly name and file name of the illustration\n */\nexport enum SpotName {\n  Approved = 'approved',\n  Avatar = 'avatar',\n  Barcode = 'barcode',\n  Calendar = 'calendar',\n  Cartridge = 'cartridge',\n  Celebrate = 'celebrate',\n  ChatBubble = 'chat-bubble',\n  CheckBox = 'check-box',\n  CheckCircle = 'check-circle',\n  Click = 'click',\n  Cocktail = 'cocktail',\n  Confirmation = 'confirmation',\n  Connnect = 'connnect',\n  Cookie = 'cookie',\n  CreditCard = 'credit-card',\n  Crm = 'crm',\n  Cultivation = 'cultivation',\n  Data = 'data',\n  DeliveryCompleted = 'delivery-completed',\n  Delivery = 'delivery',\n  DigitalPayments = 'digital-payments',\n  Discover = 'discover',\n  Diversity = 'diversity',\n  Drink = 'drink',\n  Dolly = 'dolly',\n  EasyReconciliations = 'easy-reconciliations',\n  Efficiency = 'efficiency',\n  Error = 'error',\n  ExtendDate = 'extend-date',\n  FinancialGrowth = 'financial-growth',\n  FinancialInstitution = 'financial-institution',\n  Focus = 'focus',\n  FulfillmentIssues = 'fulfillment-issues',\n  Growth = 'growth',\n  Handshake = 'handshake',\n  Hierarchy = 'hierarchy',\n  Home = 'home',\n  Laptop = 'laptop',\n  Licenses = 'licenses',\n  LightBulb = 'light-bulb',\n  LightbulbError = 'lightbulb-error',\n  LineChart = 'line-chart',\n  Link = 'link',\n  LocationPin = 'location-pin',\n  Lock = 'lock',\n  Messaging = 'messaging',\n  Messages = 'messages',\n  Microchip = 'microchip',\n  MissingData = 'missing-data',\n  MoneyTransfer = 'money-transfer',\n  Money = 'money',\n  NoInventoryAccess = 'no-inventory-access',\n  NoInventory = 'no-inventory',\n  NoPromote = 'no-promote',\n  PackageReceived = 'package-received',\n  Package = 'package',\n  PaymentProcessing = 'payment-processing',\n  Phone = 'phone',\n  PieChart = 'pie-chart',\n  ProductCycle = 'product-cycle',\n  Puzzle = 'puzzle',\n  Receipt = 'receipt',\n  Retail = 'retail',\n  SearchingDocument = 'searching-document',\n  ShoppingBasket = 'shopping-basket',\n  Shopping = 'shopping',\n  Sign = 'sign',\n  Smile = 'smile',\n  Speed = 'speed',\n  Time = 'time',\n  Tools = 'tools',\n  Truck = 'truck',\n  User = 'user',\n  Warehouse = 'warehouse',\n  Warning = 'warning',\n  XCircle = 'x-circle',\n}\n\nexport type SpotNames = `${SpotName}`;\n\n/**\n * String array of all illustration names\n */\nexport const spotNames = Object.values(SpotName);\n\nexport enum VignetteName {\n  Api = 'api',\n  Bank = 'bank',\n  Basket = 'basket',\n  BrandMenu = 'brand-menu',\n  Calendar = 'calendar',\n  Dashboard = 'dashboard',\n  Deals = 'deals',\n  DocumentSearch = 'document-search',\n  Edit = 'edit',\n  EmptyTray = 'empty-tray',\n  Graph = 'graph',\n  Integrations = 'integrations',\n  LightBulb = 'light-bulb',\n  Map = 'map',\n  Megaphone = 'megaphone',\n  Messages = 'messages',\n  MoneyBank = 'money-bank',\n  NoFiltersResult = 'no-filters-result',\n  Notifications = 'notifications',\n  OrdersEmpty = 'orders-empty',\n  Payments = 'payments',\n  PieChart = 'pie-chart',\n  ProductCards = 'product-cards',\n  ProductDetails = 'product-details',\n  ProductDisplay = 'product-display',\n  Search = 'search',\n  SearchStorefront = 'search-storefront',\n  Store = 'store',\n  Todo = 'todo',\n  Truck = 'truck',\n  Users = 'users',\n  Warehouse = 'warehouse',\n  WarehouseDelivery = 'warehouse-delivery',\n}\n\nexport type VignetteNames = `${VignetteName}`;\n\n/**\n * String array of all vignette names\n */\nexport const vignetteNames = Object.values(VignetteName);\n\n/**\n * Types of illustrations that map to the subfolder under ./assets/illustrations/<type>\n */\nexport enum IllustrationType {\n  Spot = 'spot',\n  Vignette = 'vignette',\n  // Scene is not implemented, but adding it for future work mentioned in STASH-61.\n  Scene = 'scene',\n}\n\nexport type IllustrationTypes = `${IllustrationType}`;\n","<script lang=\"ts\">\n  export * from './Illustration.models';\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject } from 'vue';\n  import InlineSvg from 'vue-inline-svg';\n\n  import { StashPrimaryColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import { StashProvideState } from '../../../types/misc';\n  import {\n    IllustrationType,\n    IllustrationTypes,\n    SpotName,\n    SpotNames,\n    spotNames,\n    VignetteName,\n    VignetteNames,\n    vignetteNames,\n  } from './Illustration.models';\n\n  export interface IllustrationProps {\n    id?: string;\n\n    /**\n     * The filename of the icon that should be displayed\n     */\n    name: SpotNames | VignetteNames;\n\n    /**\n     * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n     * browsers usually display it as a tooltip and screen readers use this.\n     */\n    title?: string;\n\n    /**\n     * The size in pixels of the illustration.  This number will be used for width and height\n     */\n    size?: number;\n\n    /**\n     * Type of the illustration\n     */\n    type?: IllustrationTypes;\n\n    /**\n     * The fill color for the illustration.  This component will use the 400 shade of the color\n     * per design's request.  Defaults to teal.\n     */\n    fillColor?: StashPrimaryColorGroup;\n\n    /**\n     * The color theme for the illustration.  This component will use the standard 500 shade of the color.\n     * Defaults to purple\n     */\n    strokeColor?: StashPrimaryColor;\n\n    /**\n     * Illustration's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n     */\n    staticPath?: string;\n  }\n\n  const props = withDefaults(defineProps<IllustrationProps>(), {\n    id: uniqueId('ll-illustration-'),\n    title: '',\n    size: 48,\n    type: IllustrationType.Spot,\n    fillColor: 'blue',\n    strokeColor: 'purple-500',\n    staticPath: '',\n  });\n\n  if (props.type === IllustrationType.Scene) {\n    throw new Error(\n      'Scene illustration types are not supported. Illustrations will need to be uploaded under ./assets/illustrations/scene. Illustrations to be provided by design.',\n    );\n  }\n\n  if (\n    (props.type === IllustrationType.Spot && !spotNames.includes(props.name as SpotName)) ||\n    (props.type === IllustrationType.Vignette && !vignetteNames.includes(props.name as VignetteName))\n  ) {\n    throw new Error(\n      `${props.type} illustration name ${props.name} not found. Did you check that you are using the correct type for your illustration?`,\n    );\n  }\n\n  const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n    staticPath: '/static',\n  });\n\n  const isSpotIllustration = computed(() => props.type === IllustrationType.Spot);\n\n  /**\n   * Browsers won't add the `stroke-width` attribute if it is set to false.\n   * However, setting it to specific number value affects vignettes\n   */\n  const strokeWidth = computed<boolean | string>(() => {\n    return isSpotIllustration.value ? '0' : false;\n  });\n\n  const computedStaticPath = computed(() => {\n    return props.staticPath || stashOptions?.staticPath;\n  });\n</script>\n\n<template>\n  <!-- InlineSvg package (https://github.com/shrpne/vue-inline-svg) swaps external svgs and puts\n  them inline so we can style them with CSS -->\n  <!-- Having to override fill to be none and stroke to be zero so the exported svgs from Figma\n  that do not have those attributes specified do not get a default one applied -->\n  <InlineSvg\n    :id=\"props.id\"\n    class=\"tw-inline-block tw-align-middle\"\n    :class=\"{\n      [`tw-text-${props.fillColor}-400 tw-stroke-${props.strokeColor}`]: isSpotIllustration,\n    }\"\n    :title=\"props.title\"\n    :height=\"props.size\"\n    :width=\"props.size\"\n    :stroke-width=\"strokeWidth\"\n    fill=\"none\"\n    :src=\"`${computedStaticPath}/illustrations/${props.type}/${props.name}.svg`\"\n  />\n</template>\n"],"names":["SpotName","spotNames","VignetteName","vignetteNames","IllustrationType","props","__props","stashOptions","inject","isSpotIllustration","computed","strokeWidth","computedStaticPath","_createBlock","_unref","InlineSvg"],"mappings":"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"}
+{"version":3,"file":"Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js","sources":["../src/components/Illustration/Illustration.models.ts","../src/components/Illustration/Illustration.vue"],"sourcesContent":["/**\n * Enum to strongly map between a friendly name and file name of the illustration\n */\nexport enum SpotName {\n  Approved = 'approved',\n  Avatar = 'avatar',\n  Barcode = 'barcode',\n  Calendar = 'calendar',\n  Cartridge = 'cartridge',\n  Celebrate = 'celebrate',\n  ChatBubble = 'chat-bubble',\n  CheckBox = 'check-box',\n  CheckCircle = 'check-circle',\n  Click = 'click',\n  Cocktail = 'cocktail',\n  Confirmation = 'confirmation',\n  Connnect = 'connnect',\n  Cookie = 'cookie',\n  CreditCard = 'credit-card',\n  Crm = 'crm',\n  Cultivation = 'cultivation',\n  Data = 'data',\n  DeliveryCompleted = 'delivery-completed',\n  Delivery = 'delivery',\n  DigitalPayments = 'digital-payments',\n  Discover = 'discover',\n  Diversity = 'diversity',\n  Drink = 'drink',\n  Dolly = 'dolly',\n  EasyReconciliations = 'easy-reconciliations',\n  Efficiency = 'efficiency',\n  Error = 'error',\n  ExtendDate = 'extend-date',\n  FinancialGrowth = 'financial-growth',\n  FinancialInstitution = 'financial-institution',\n  Focus = 'focus',\n  FulfillmentIssues = 'fulfillment-issues',\n  Growth = 'growth',\n  Handshake = 'handshake',\n  Hierarchy = 'hierarchy',\n  Home = 'home',\n  Laptop = 'laptop',\n  Licenses = 'licenses',\n  LightBulb = 'light-bulb',\n  LightbulbError = 'lightbulb-error',\n  LineChart = 'line-chart',\n  Link = 'link',\n  LocationPin = 'location-pin',\n  Lock = 'lock',\n  Messaging = 'messaging',\n  Messages = 'messages',\n  Microchip = 'microchip',\n  MissingData = 'missing-data',\n  MoneyTransfer = 'money-transfer',\n  Money = 'money',\n  NoInventoryAccess = 'no-inventory-access',\n  NoInventory = 'no-inventory',\n  NoPromote = 'no-promote',\n  PackageReceived = 'package-received',\n  Package = 'package',\n  PaymentProcessing = 'payment-processing',\n  Phone = 'phone',\n  PieChart = 'pie-chart',\n  ProductCycle = 'product-cycle',\n  Puzzle = 'puzzle',\n  Receipt = 'receipt',\n  Retail = 'retail',\n  SearchingDocument = 'searching-document',\n  ShoppingBasket = 'shopping-basket',\n  Shopping = 'shopping',\n  Sign = 'sign',\n  Smile = 'smile',\n  Speed = 'speed',\n  Time = 'time',\n  Tools = 'tools',\n  Truck = 'truck',\n  User = 'user',\n  Warehouse = 'warehouse',\n  Warning = 'warning',\n  XCircle = 'x-circle',\n}\n\nexport type SpotNames = `${SpotName}`;\n\n/**\n * String array of all illustration names\n */\nexport const spotNames = Object.values(SpotName);\n\nexport enum VignetteName {\n  Api = 'api',\n  Bank = 'bank',\n  Basket = 'basket',\n  BrandMenu = 'brand-menu',\n  Calendar = 'calendar',\n  Dashboard = 'dashboard',\n  Deals = 'deals',\n  DocumentSearch = 'document-search',\n  Edit = 'edit',\n  EmptyTray = 'empty-tray',\n  Graph = 'graph',\n  Integrations = 'integrations',\n  LightBulb = 'light-bulb',\n  Map = 'map',\n  Megaphone = 'megaphone',\n  Messages = 'messages',\n  MoneyBank = 'money-bank',\n  NoFiltersResult = 'no-filters-result',\n  Notifications = 'notifications',\n  OrdersEmpty = 'orders-empty',\n  Payments = 'payments',\n  PieChart = 'pie-chart',\n  ProductCards = 'product-cards',\n  ProductDetails = 'product-details',\n  ProductDisplay = 'product-display',\n  Search = 'search',\n  SearchStorefront = 'search-storefront',\n  Store = 'store',\n  Todo = 'todo',\n  Truck = 'truck',\n  Users = 'users',\n  Warehouse = 'warehouse',\n  WarehouseDelivery = 'warehouse-delivery',\n}\n\nexport type VignetteNames = `${VignetteName}`;\n\n/**\n * String array of all vignette names\n */\nexport const vignetteNames = Object.values(VignetteName);\n\n/**\n * Types of illustrations that map to the subfolder under ./assets/illustrations/<type>\n */\nexport enum IllustrationType {\n  Spot = 'spot',\n  Vignette = 'vignette',\n  // Scene is not implemented, but adding it for future work mentioned in STASH-61.\n  Scene = 'scene',\n}\n\nexport type IllustrationTypes = `${IllustrationType}`;\n","<script lang=\"ts\">\n  export * from './Illustration.models';\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject } from 'vue';\n  import InlineSvg from 'vue-inline-svg';\n\n  import { StashPrimaryColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import { StashProvideState } from '../../../types/misc';\n  import {\n    IllustrationType,\n    IllustrationTypes,\n    SpotName,\n    SpotNames,\n    spotNames,\n    VignetteName,\n    VignetteNames,\n    vignetteNames,\n  } from './Illustration.models';\n\n  export interface IllustrationProps {\n    id?: string;\n\n    /**\n     * The filename of the icon that should be displayed\n     */\n    name: SpotNames | VignetteNames;\n\n    /**\n     * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n     * browsers usually display it as a tooltip and screen readers use this.\n     */\n    title?: string;\n\n    /**\n     * The size in pixels of the illustration.  This number will be used for width and height\n     */\n    size?: number;\n\n    /**\n     * Type of the illustration\n     */\n    type?: IllustrationTypes;\n\n    /**\n     * The fill color for the illustration.  This component will use the 400 shade of the color\n     * per design's request.  Defaults to teal.\n     */\n    fillColor?: StashPrimaryColorGroup;\n\n    /**\n     * The color theme for the illustration.  This component will use the standard 500 shade of the color.\n     * Defaults to purple\n     */\n    strokeColor?: StashPrimaryColor;\n\n    /**\n     * Illustration's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n     */\n    staticPath?: string;\n  }\n\n  const props = withDefaults(defineProps<IllustrationProps>(), {\n    id: uniqueId('ll-illustration-'),\n    title: '',\n    size: 48,\n    type: IllustrationType.Spot,\n    fillColor: 'blue',\n    strokeColor: 'purple-500',\n    staticPath: '',\n  });\n\n  if (props.type === IllustrationType.Scene) {\n    throw new Error(\n      'Scene illustration types are not supported. Illustrations will need to be uploaded under ./assets/illustrations/scene. Illustrations to be provided by design.',\n    );\n  }\n\n  if (\n    (props.type === IllustrationType.Spot && !spotNames.includes(props.name as SpotName)) ||\n    (props.type === IllustrationType.Vignette && !vignetteNames.includes(props.name as VignetteName))\n  ) {\n    throw new Error(\n      `${props.type} illustration name ${props.name} not found. Did you check that you are using the correct type for your illustration?`,\n    );\n  }\n\n  const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n    staticPath: '/static',\n  });\n\n  const isSpotIllustration = computed(() => props.type === IllustrationType.Spot);\n\n  /**\n   * Browsers won't add the `stroke-width` attribute if it is set to false.\n   * However, setting it to specific number value affects vignettes\n   */\n  const strokeWidth = computed<boolean | string>(() => {\n    return isSpotIllustration.value ? '0' : false;\n  });\n\n  const computedStaticPath = computed(() => {\n    return props.staticPath || stashOptions?.staticPath;\n  });\n</script>\n\n<template>\n  <!-- InlineSvg package (https://github.com/shrpne/vue-inline-svg) swaps external svgs and puts\n  them inline so we can style them with CSS -->\n  <!-- Having to override fill to be none and stroke to be zero so the exported svgs from Figma\n  that do not have those attributes specified do not get a default one applied -->\n  <InlineSvg\n    :id=\"props.id\"\n    class=\"tw-inline-block tw-align-middle\"\n    :class=\"{\n      [`tw-text-${props.fillColor}-400 tw-stroke-${props.strokeColor}`]: isSpotIllustration,\n    }\"\n    :title=\"props.title\"\n    :height=\"props.size\"\n    :width=\"props.size\"\n    :stroke-width=\"strokeWidth\"\n    fill=\"none\"\n    :src=\"`${computedStaticPath}/illustrations/${props.type}/${props.name}.svg`\"\n  />\n</template>\n"],"names":["SpotName","spotNames","VignetteName","vignetteNames","IllustrationType","props","__props","stashOptions","inject","isSpotIllustration","computed","strokeWidth","computedStaticPath"],"mappings":"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"}

package/dist/Image.js

@@ -1,5 +1,5 @@
-import { _ as s } from "./Image.vue_vue_type_script_setup_true_lang-Dg2Zk2r2.js";
-import { a as m, I as o, S as f } from "./Image.vue_vue_type_script_setup_true_lang-Dg2Zk2r2.js";
+import { _ as s } from "./Image.vue_vue_type_script_setup_true_lang-D5u4av0_.js";
+import { a as m, I as o, S as f } from "./Image.vue_vue_type_script_setup_true_lang-D5u4av0_.js";
 export {
   m as ImageProviders,
   o as ImageRadius,

package/dist/Image.vue.d.ts

@@ -1,18 +1,53 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare const _default: DefineComponent<ImageProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ImageProps> & Readonly<{}>, {
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ImageProps>, {
+src: string;
+srcset: undefined;
+sizes: undefined;
+staticPath: undefined;
+provider: undefined;
+radius: string;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ImageProps>, {
+src: string;
+srcset: undefined;
+sizes: undefined;
+staticPath: undefined;
+provider: undefined;
+radius: string;
+}>>> & Readonly<{}>, {
 staticPath: string;
 src: string;
-provider: "static" | "cloudinary";
 radius: "circle" | "none" | "rounded";
 srcset: string;
 sizes: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-img: HTMLImageElement;
-}, any>;
+provider: "static" | "cloudinary";
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 export declare interface ImageProps {

package/dist/{Image.vue_vue_type_script_setup_true_lang-Dg2Zk2r2.js → Image.vue_vue_type_script_setup_true_lang-D5u4av0_.js}

@@ -1,4 +1,4 @@
-import { defineComponent as W, inject as C, computed as c, useAttrs as M, createElementBlock as B, openBlock as k, mergeProps as L, unref as $ } from "vue";
+import { defineComponent as W, inject as C, computed as a, useAttrs as M, createElementBlock as B, openBlock 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 j = {
@@ -13,21 +13,21 @@ function P(t) {
   return (s) => t[s] || s;
 }
 function G({
-  formatter: t = (p, i) => `${p}=${i}`,
+  formatter: t = (m, c) => `${m}=${c}`,
   keyMap: s,
-  joinWith: u = "/",
+  joinWith: i = "/",
   valueMap: e = {}
 } = {}) {
-  const p = typeof s == "function" ? s : P(s || {});
-  return Object.keys(e).forEach((i) => {
-    typeof e[i] != "function" && (e[i] = P(e[i]));
-  }), (i = {}) => Object.entries(i).map(([l, d]) => {
-    const m = e[l], g = p(l);
-    let h = d;
-    return typeof m == "function" && (h = m(i[l])), t(g, h);
-  }).join(u);
+  const m = typeof s == "function" ? s : P(s || {});
+  return Object.keys(e).forEach((c) => {
+    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, O = 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 u = q(D, s), e = O(u);
+  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: O
+  operationsGenerator: E
 }, Symbol.toStringTag, { value: "Module" }));
 function H(t = "") {
   return t;
@@ -91,58 +91,62 @@ const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     const s = {
       md: w.md,
       lg: w.lg
-    }, u = C("stashOptions"), e = t, p = c(() => {
+    }, i = C("stashOptions"), e = t, m = a(() => {
       const { src: r, ...n } = M();
-      return n.sizes = h.value, n.srcset = E.value, n;
-    }), i = c(() => {
+      return n.sizes = v.value, n.srcset = I.value, n;
+    }), c = a(() => {
       try {
         return new URL(e.src), !0;
       } catch {
         return !1;
       }
-    }), S = c(() => e.provider || u?.images?.provider || b.Static), l = c(() => e.staticPath ?? u?.staticPath), d = c(() => S.value === b.Static), m = c(() => Z[S.value]), g = c(() => d.value ? _() : _({ width: j.md })), h = c(() => e.sizes ? R() : e.sizes), E = c(() => e.sizes && !e.srcset && !d.value ? U() : e.srcset), I = c(() => e.sizes ? x(e.sizes) : []);
+    }), S = a(() => {
+      var r;
+      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 (d.value && i.value)
+      if (d.value && c.value)
         return e.src;
       const n = d.value && l.value ? `${l.value}/${e.src}` : e.src;
-      return m.value.getImageUrl(n, r);
+      return p.value.getImageUrl(n, r);
     }
-    function U() {
+    function R() {
       return Object.values(j).map((r) => `${_({ width: r })} ${r}w`).join(", ");
     }
-    function R() {
-      return e.sizes?.includes("(") ? e.sizes : I.value.map((r) => `${r.mediaQuery ? r.mediaQuery + " " : ""}${r.size}`).join(", ");
+    function O() {
+      var r;
+      return (r = e.sizes) != null && r.includes("(") ? e.sizes : U.value.map((n) => `${n.mediaQuery ? n.mediaQuery + " " : ""}${n.size}`).join(", ");
     }
     function x(r = "") {
-      const n = [], v = {
+      const n = [], h = {
         default: "100vw"
       };
       if (typeof r == "string") {
-        const f = r.split(/[\s]+/).filter((a) => a);
-        for (const a of f) {
-          const o = a.split(":");
+        const f = r.split(/[\s]+/).filter((u) => u);
+        for (const u of f) {
+          const o = u.split(":");
           if (o.length !== 2) {
-            v.default = o[0].trim();
+            h.default = o[0].trim();
             continue;
           }
-          v[o[0].trim()] = o[1].trim();
+          h[o[0].trim()] = o[1].trim();
         }
       } else
         throw new Error("`sizes` needs to be a string");
-      for (const f in v) {
-        const a = parseInt(s[f] || 0);
-        let o = String(v[f]);
+      for (const f in h) {
+        const u = parseInt(s[f] || 0);
+        let o = String(h[f]);
         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 A = {
-          mediaQuery: a ? `(min-width: ${a}px)` : "",
-          screenMinWidth: a,
+          mediaQuery: u ? `(min-width: ${u}px)` : "",
+          screenMinWidth: u,
           size: o
         };
         n.push(A);
       }
-      return n.sort((f, a) => f.screenMinWidth > a.screenMinWidth ? -1 : 1), n;
+      return n.sort((f, u) => f.screenMinWidth > u.screenMinWidth ? -1 : 1), n;
     }
     return (r, n) => (k(), B("img", L({
       ref: "img",
@@ -153,7 +157,7 @@ const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
         "tw-rounded-full": e.radius === $(z).Circle
       }],
       src: g.value
-    }, p.value), null, 16, J));
+    }, m.value), null, 16, J));
   }
 });
 export {
@@ -162,4 +166,4 @@ export {
   et as _,
   b as a
 };
-//# sourceMappingURL=Image.vue_vue_type_script_setup_true_lang-Dg2Zk2r2.js.map
+//# sourceMappingURL=Image.vue_vue_type_script_setup_true_lang-D5u4av0_.js.map

package/dist/{Image.vue_vue_type_script_setup_true_lang-Dg2Zk2r2.js.map → Image.vue_vue_type_script_setup_true_lang-D5u4av0_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Image.vue_vue_type_script_setup_true_lang-Dg2Zk2r2.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","computedStaticPath","isStatic","imgProvider","imgSrc","getProviderImage","getSizes","getSources","parsedSizes","parseSizes","width","v","providedSizes","conditions","sizes","definitions","size","entry","screenMinWidth","isFluidSize","condition","v1","v2","_openBlock","_createElementBlock","_mergeProps","_unref","_hoisted_1"],"mappings":"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"}
+{"version":3,"file":"Image.vue_vue_type_script_setup_true_lang-D5u4av0_.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/InlineEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEdit.js","sources":["../src/components/InlineEdit/InlineEdit.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useAttrs, useSlots, watch } from 'vue';\n\n  import { money, percent } from '../../utils/i18n';\n  import Input from '../Input/Input.vue';\n\n  defineOptions({\n    name: 'll-inline-edit',\n    inheritAttrs: false,\n  });\n\n  export interface InlineEditProps {\n    /**\n     * Formats the value displayed.\n     * Options: currency, percent\n     */\n    format?: 'currency' | 'percent' | '';\n\n    /**\n     * DOM `type` property to be passed to `ll-input`.\n     * Use type=\"number\" for localized numbers\n     */\n    type?: string;\n\n    /**\n     * The current value for the component.\n     */\n    modelValue?: string | number;\n\n    /**\n     * Used to display a crossed out value below the component\n     * if the current `modelValue` does not match `oldValue`.\n     */\n    oldValue?: string | number;\n\n    /**\n     * Label to render for the input\n     */\n    label?: string;\n\n    /**\n     * Placeholder for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Hint text to display below the input\n     */\n    hintText?: string;\n  }\n\n  const slots = useSlots();\n  const attrs = useAttrs();\n\n  const props = withDefaults(defineProps<InlineEditProps>(), {\n    format: '',\n    type: 'text',\n    modelValue: undefined,\n    oldValue: undefined,\n    label: ' ',\n    placeholder: '',\n    errorText: '',\n    hintText: '',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the value is updated\n     */\n    (e: 'update:model-value', value: string | number | undefined): void;\n  }>();\n\n  const editing = ref(false);\n\n  // this value gets set once and never changes\n  const originalValue = ref<InlineEditProps['oldValue']>(props.oldValue || props.modelValue);\n\n  // the _current_ value. This is a temporary value, used while editing\n  const internalValue = ref<InlineEditProps['modelValue']>(props.modelValue);\n\n  const inputAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs.class;\n    return tempAttrs;\n  });\n\n  const formattedOriginalValue = computed(() => formatValue(originalValue.value || ''));\n\n  const showOldValue = computed(() => {\n    return (props.oldValue || props.oldValue === 0) && props.oldValue !== internalValue.value;\n  });\n\n  const isAppended = computed(() => {\n    return !!slots.append;\n  });\n\n  const isPrepended = computed(() => {\n    return !!slots.prepend;\n  });\n\n  watch(\n    () => props.modelValue,\n    (newVal?: string | number, oldVal?: string | number) => {\n      if (newVal !== oldVal) {\n        internalValue.value = newVal;\n      }\n    },\n  );\n\n  function dismiss() {\n    internalValue.value = props.modelValue || props.oldValue;\n    editing.value = false;\n    blurInput();\n  }\n\n  /**\n   * Toggles edit state on\n   */\n  function edit() {\n    editing.value = true;\n    focusInput();\n  }\n\n  /**\n   * Formats the value based on `format`\n   */\n  function formatValue(value: string | number) {\n    switch (props.format) {\n      case 'currency':\n        return money({\n          amount: value as number,\n        });\n      case 'percent':\n        return percent((value as number) / 100);\n      default:\n        return value;\n    }\n  }\n\n  /**\n   * This method saves the current value of the input field by `$emit`ing.\n   * If the new value is empty, it reverts `internalValue` to the original value.\n   */\n  function save() {\n    internalValue.value = !(internalValue.value === '') ? internalValue.value : originalValue.value;\n\n    emit('update:model-value', internalValue.value);\n    editing.value = false;\n    blurInput();\n  }\n\n  const llInput = ref();\n\n  function focusInput() {\n    if (llInput.value) {\n      llInput.value.inputEl.focus();\n    }\n  }\n\n  function blurInput() {\n    if (llInput.value) {\n      llInput.value.inputEl.blur();\n    }\n  }\n</script>\n\n<template>\n  <div class=\"stash-inline-edit\" :class=\"attrs.class\" data-test=\"stash-inline-edit\">\n    <div class=\"stash-inline-edit__input-wrapper\">\n      <Input\n        ref=\"llInput\"\n        v-model=\"internalValue\"\n        :error-text=\"props.errorText\"\n        :hint-text=\"props.hintText\"\n        :label=\"props.label\"\n        :placeholder=\"`${props.placeholder || originalValue}`\"\n        :type=\"props.type\"\n        v-bind=\"inputAttrs\"\n        @blur=\"save\"\n        @focus=\"edit\"\n        @keydown.esc=\"dismiss\"\n        @keyup.enter=\"blurInput\"\n      >\n        <template v-if=\"isPrepended\" #prepend>\n          <!-- @slot renders content on the left side of the input -->\n          <slot name=\"prepend\"> </slot>\n        </template>\n\n        <template v-if=\"isAppended\" #append>\n          <!-- @slot renders content on the right side of the input -->\n          <slot name=\"append\"> </slot>\n        </template>\n      </Input>\n    </div>\n\n    <span v-if=\"showOldValue\" class=\"tw-mt-1 tw-inline-block tw-pl-3 tw-text-ice-700 tw-line-through\">\n      {{ formattedOriginalValue }}\n    </span>\n  </div>\n</template>\n"],"names":["slots","useSlots","attrs","useAttrs","props","__props","emit","__emit","editing","ref","originalValue","internalValue","inputAttrs","computed","tempAttrs","formattedOriginalValue","formatValue","showOldValue","isAppended","isPrepended","watch","newVal","oldVal","dismiss","blurInput","edit","focusInput","value","money","percent","save","llInput","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_1","_createVNode","Input","_mergeProps","$event","_renderSlot","_ctx","_hoisted_2","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"InlineEdit.js","sources":["../src/components/InlineEdit/InlineEdit.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useAttrs, useSlots, watch } from 'vue';\n\n  import { money, percent } from '../../utils/i18n';\n  import Input from '../Input/Input.vue';\n\n  defineOptions({\n    name: 'll-inline-edit',\n    inheritAttrs: false,\n  });\n\n  export interface InlineEditProps {\n    /**\n     * Formats the value displayed.\n     * Options: currency, percent\n     */\n    format?: 'currency' | 'percent' | '';\n\n    /**\n     * DOM `type` property to be passed to `ll-input`.\n     * Use type=\"number\" for localized numbers\n     */\n    type?: string;\n\n    /**\n     * The current value for the component.\n     */\n    modelValue?: string | number;\n\n    /**\n     * Used to display a crossed out value below the component\n     * if the current `modelValue` does not match `oldValue`.\n     */\n    oldValue?: string | number;\n\n    /**\n     * Label to render for the input\n     */\n    label?: string;\n\n    /**\n     * Placeholder for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Hint text to display below the input\n     */\n    hintText?: string;\n  }\n\n  const slots = useSlots();\n  const attrs = useAttrs();\n\n  const props = withDefaults(defineProps<InlineEditProps>(), {\n    format: '',\n    type: 'text',\n    modelValue: undefined,\n    oldValue: undefined,\n    label: ' ',\n    placeholder: '',\n    errorText: '',\n    hintText: '',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the value is updated\n     */\n    (e: 'update:model-value', value: string | number | undefined): void;\n  }>();\n\n  const editing = ref(false);\n\n  // this value gets set once and never changes\n  const originalValue = ref<InlineEditProps['oldValue']>(props.oldValue || props.modelValue);\n\n  // the _current_ value. This is a temporary value, used while editing\n  const internalValue = ref<InlineEditProps['modelValue']>(props.modelValue);\n\n  const inputAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs.class;\n    return tempAttrs;\n  });\n\n  const formattedOriginalValue = computed(() => formatValue(originalValue.value || ''));\n\n  const showOldValue = computed(() => {\n    return (props.oldValue || props.oldValue === 0) && props.oldValue !== internalValue.value;\n  });\n\n  const isAppended = computed(() => {\n    return !!slots.append;\n  });\n\n  const isPrepended = computed(() => {\n    return !!slots.prepend;\n  });\n\n  watch(\n    () => props.modelValue,\n    (newVal?: string | number, oldVal?: string | number) => {\n      if (newVal !== oldVal) {\n        internalValue.value = newVal;\n      }\n    },\n  );\n\n  function dismiss() {\n    internalValue.value = props.modelValue || props.oldValue;\n    editing.value = false;\n    blurInput();\n  }\n\n  /**\n   * Toggles edit state on\n   */\n  function edit() {\n    editing.value = true;\n    focusInput();\n  }\n\n  /**\n   * Formats the value based on `format`\n   */\n  function formatValue(value: string | number) {\n    switch (props.format) {\n      case 'currency':\n        return money({\n          amount: value as number,\n        });\n      case 'percent':\n        return percent((value as number) / 100);\n      default:\n        return value;\n    }\n  }\n\n  /**\n   * This method saves the current value of the input field by `$emit`ing.\n   * If the new value is empty, it reverts `internalValue` to the original value.\n   */\n  function save() {\n    internalValue.value = !(internalValue.value === '') ? internalValue.value : originalValue.value;\n\n    emit('update:model-value', internalValue.value);\n    editing.value = false;\n    blurInput();\n  }\n\n  const llInput = ref();\n\n  function focusInput() {\n    if (llInput.value) {\n      llInput.value.inputEl.focus();\n    }\n  }\n\n  function blurInput() {\n    if (llInput.value) {\n      llInput.value.inputEl.blur();\n    }\n  }\n</script>\n\n<template>\n  <div class=\"stash-inline-edit\" :class=\"attrs.class\" data-test=\"stash-inline-edit\">\n    <div class=\"stash-inline-edit__input-wrapper\">\n      <Input\n        ref=\"llInput\"\n        v-model=\"internalValue\"\n        :error-text=\"props.errorText\"\n        :hint-text=\"props.hintText\"\n        :label=\"props.label\"\n        :placeholder=\"`${props.placeholder || originalValue}`\"\n        :type=\"props.type\"\n        v-bind=\"inputAttrs\"\n        @blur=\"save\"\n        @focus=\"edit\"\n        @keydown.esc=\"dismiss\"\n        @keyup.enter=\"blurInput\"\n      >\n        <template v-if=\"isPrepended\" #prepend>\n          <!-- @slot renders content on the left side of the input -->\n          <slot name=\"prepend\"> </slot>\n        </template>\n\n        <template v-if=\"isAppended\" #append>\n          <!-- @slot renders content on the right side of the input -->\n          <slot name=\"append\"> </slot>\n        </template>\n      </Input>\n    </div>\n\n    <span v-if=\"showOldValue\" class=\"tw-mt-1 tw-inline-block tw-pl-3 tw-text-ice-700 tw-line-through\">\n      {{ formattedOriginalValue }}\n    </span>\n  </div>\n</template>\n"],"names":["slots","useSlots","attrs","useAttrs","props","__props","emit","__emit","editing","ref","originalValue","internalValue","inputAttrs","computed","tempAttrs","formattedOriginalValue","formatValue","showOldValue","isAppended","isPrepended","watch","newVal","oldVal","dismiss","blurInput","edit","focusInput","value","money","percent","save","llInput"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwDE,UAAMA,IAAQC,EAAS,GACjBC,IAAQC,EAAS,GAEjBC,IAAQC,GAWRC,IAAOC,GAOPC,IAAUC,EAAI,EAAK,GAGnBC,IAAgBD,EAAiCL,EAAM,YAAYA,EAAM,UAAU,GAGnFO,IAAgBF,EAAmCL,EAAM,UAAU,GAEnEQ,IAAaC,EAAS,MAAM;AAC1B,YAAAC,IAAY,EAAE,GAAGZ,EAAM;AAE7B,oBAAOY,EAAU,OACVA;AAAA,IAAA,CACR,GAEKC,IAAyBF,EAAS,MAAMG,EAAYN,EAAc,SAAS,EAAE,CAAC,GAE9EO,IAAeJ,EAAS,OACpBT,EAAM,YAAYA,EAAM,aAAa,MAAMA,EAAM,aAAaO,EAAc,KACrF,GAEKO,IAAaL,EAAS,MACnB,CAAC,CAACb,EAAM,MAChB,GAEKmB,IAAcN,EAAS,MACpB,CAAC,CAACb,EAAM,OAChB;AAED,IAAAoB;AAAA,MACE,MAAMhB,EAAM;AAAA,MACZ,CAACiB,GAA0BC,MAA6B;AACtD,QAAID,MAAWC,MACbX,EAAc,QAAQU;AAAA,MACxB;AAAA,IAEJ;AAEA,aAASE,IAAU;AACH,MAAAZ,EAAA,QAAQP,EAAM,cAAcA,EAAM,UAChDI,EAAQ,QAAQ,IACNgB,EAAA;AAAA,IAAA;AAMZ,aAASC,IAAO;AACd,MAAAjB,EAAQ,QAAQ,IACLkB,EAAA;AAAA,IAAA;AAMb,aAASV,EAAYW,GAAwB;AAC3C,cAAQvB,EAAM,QAAQ;AAAA,QACpB,KAAK;AACH,iBAAOwB,EAAM;AAAA,YACX,QAAQD;AAAA,UAAA,CACT;AAAA,QACH,KAAK;AACI,iBAAAE,EAASF,IAAmB,GAAG;AAAA,QACxC;AACS,iBAAAA;AAAA,MAAA;AAAA,IACX;AAOF,aAASG,IAAO;AACd,MAAAnB,EAAc,QAAUA,EAAc,UAAU,KAAMA,EAAc,QAAQD,EAAc,OAErFJ,EAAA,sBAAsBK,EAAc,KAAK,GAC9CH,EAAQ,QAAQ,IACNgB,EAAA;AAAA,IAAA;AAGZ,UAAMO,IAAUtB,EAAI;AAEpB,aAASiB,IAAa;AACpB,MAAIK,EAAQ,SACFA,EAAA,MAAM,QAAQ,MAAM;AAAA,IAC9B;AAGF,aAASP,IAAY;AACnB,MAAIO,EAAQ,SACFA,EAAA,MAAM,QAAQ,KAAK;AAAA,IAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/InlineEdit.vue.d.ts

@@ -1,25 +1,30 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProperties } from 'vue';
-import { ComponentCustomProps } from 'vue';
-import { ComponentInternalInstance } from 'vue';
-import { ComponentOptionsBase } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
-import { ComponentPublicInstance } from 'vue';
-import { DebuggerEvent } from 'vue';
 import { DefineComponent } from 'vue';
-import { GlobalComponents } from 'vue';
-import { GlobalDirectives } from 'vue';
-import { InputProps } from '../Input/Input.vue';
-import { nextTick } from 'vue';
-import { OnCleanup } from '@vue/reactivity';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
-import { Ref } from 'vue';
-import { ShallowUnwrapRef } from 'vue';
-import { Slot } from 'vue';
-import { VNodeProps } from 'vue';
-import { WatchOptions } from 'vue';
-import { WatchStopHandle } from 'vue';
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
 
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
@@ -27,128 +32,44 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<InlineEditProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"update:model-value": (value: string | number | undefined) => any;
-}, string, PublicProps, Readonly<InlineEditProps> & Readonly<{
-"onUpdate:model-value"?: ((value: string | number | undefined) => any) | undefined;
-}>, {
-label: string;
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InlineEditProps>, {
+format: string;
 type: string;
+modelValue: undefined;
+oldValue: undefined;
+label: string;
 placeholder: string;
-oldValue: string | number;
-format: "" | "currency" | "percent";
 errorText: string;
 hintText: string;
-modelValue: string | number;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-llInput: ({
-$: ComponentInternalInstance;
-$data: {};
-$props: {
-readonly autocomplete?: string | undefined;
-readonly modelValue?: string | number | undefined;
-readonly value?: string | number | null | undefined;
-readonly type?: string | undefined;
-readonly placeholder?: string | undefined;
-readonly addBottomSpace?: boolean | undefined;
-readonly errorText?: string | undefined;
-readonly hintText?: string | undefined;
-readonly id?: string | undefined;
-readonly errorId?: string | undefined;
-readonly isReadOnly?: boolean | undefined;
-readonly isRequired?: boolean | undefined;
-readonly label?: string | undefined;
-readonly showOptionalInLabel?: boolean | undefined;
-readonly isLabelSrOnly?: boolean | undefined;
-readonly fieldset?: boolean | undefined;
-readonly isDisabled?: boolean | undefined;
-readonly disabled?: boolean | undefined;
-readonly onBlur?: ((evt: Event) => any) | undefined;
-readonly onChange?: ((v: string | number) => any) | undefined;
-readonly onFocus?: ((evt: Event) => any) | undefined;
-readonly "onUpdate:model-value"?: ((v: string | number) => any) | undefined;
-} & VNodeProps & AllowedComponentProps & ComponentCustomProps;
-$attrs: {
-[x: string]: unknown;
-};
-$refs: {
-[x: string]: unknown;
-} & {
-inputEl: HTMLInputElement;
-};
-$slots: Readonly<{
-[name: string]: Slot<any> | undefined;
-}>;
-$root: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
-$parent: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
-$host: Element | null;
-$emit: ((event: "blur", evt: Event) => void) & ((event: "change", v: string | number) => void) & ((event: "focus", evt: Event) => void) & ((event: "update:model-value", v: string | number) => void);
-$el: any;
-$options: ComponentOptionsBase<Readonly<InputProps> & Readonly<{
-onBlur?: ((evt: Event) => any) | undefined;
-onChange?: ((v: string | number) => any) | undefined;
-onFocus?: ((evt: Event) => any) | undefined;
-"onUpdate:model-value"?: ((v: string | number) => any) | undefined;
-}>, {
-inputEl: Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-blur: (evt: Event) => any;
-change: (v: string | number) => any;
-focus: (evt: Event) => any;
-"update:model-value": (v: string | number) => any;
-}, string, {
-value: string | number | null;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:model-value": (value: string | number | undefined) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InlineEditProps>, {
+format: string;
 type: string;
+modelValue: undefined;
+oldValue: undefined;
+label: string;
 placeholder: string;
-modelValue: string | number;
-autocomplete: string;
-}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
-beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-created?: ((() => void) | (() => void)[]) | undefined;
-beforeMount?: ((() => void) | (() => void)[]) | undefined;
-mounted?: ((() => void) | (() => void)[]) | undefined;
-beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-updated?: ((() => void) | (() => void)[]) | undefined;
-activated?: ((() => void) | (() => void)[]) | undefined;
-deactivated?: ((() => void) | (() => void)[]) | undefined;
-beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-destroyed?: ((() => void) | (() => void)[]) | undefined;
-unmounted?: ((() => void) | (() => void)[]) | undefined;
-renderTracked?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
-renderTriggered?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
-errorCaptured?: (((err: unknown, instance: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void)[]) | undefined;
-};
-$forceUpdate: () => void;
-$nextTick: nextTick;
-$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R, args_2: OnCleanup) => any : (args_0: any, args_1: any, args_2: OnCleanup) => any, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
-} & Readonly<{
-value: string | number | null;
+errorText: string;
+hintText: string;
+}>>> & Readonly<{
+"onUpdate:model-value"?: ((value: string | number | undefined) => any) | undefined;
+}>, {
 type: string;
+label: string;
+errorText: string;
+hintText: string;
 placeholder: string;
 modelValue: string | number;
-autocomplete: string;
-}> & Omit<Readonly<InputProps> & Readonly<{
-onBlur?: ((evt: Event) => any) | undefined;
-onChange?: ((v: string | number) => any) | undefined;
-onFocus?: ((evt: Event) => any) | undefined;
-"onUpdate:model-value"?: ((v: string | number) => any) | undefined;
-}>, "inputEl" | ("value" | "type" | "placeholder" | "modelValue" | "autocomplete")> & ShallowUnwrapRef<    {
-inputEl: Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
-}> & {} & ComponentCustomProperties & {} & {
-$slots: {
-prepend?(_: {}): any;
-append?(_: {}): any;
-hint?(_: {}): any;
-};
-}) | null;
-}, any>, {
+format: "" | "currency" | "percent";
+oldValue: string | number;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     prepend?(_: {}): any;
     append?(_: {}): any;
 }>;
 export default _default;
 
-declare interface InlineEditProps {
+export declare interface InlineEditProps {
     /**
      * Formats the value displayed.
      * Options: currency, percent