@leaflink/stash 51.11.0 → 51.12.0

package/dist/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import isNil from 'lodash-es/isNil';\n  import { computed, onMounted, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import { convertDecimal, decimalSeparator, sanitizeDecimal } from '../../utils/i18n';\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface InputProps extends FieldProps {\n    /**\n     * Autocomplete takes in a string of off or on\n     */\n    autocomplete?: string;\n\n    /**\n     * Value for the input element.\n     */\n    modelValue?: string | number;\n\n    /**\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Input type. Excludes certain types that have a dedicated component.\n     *\n     * Note: For distinguishing between text & number internally, passing `number`\n     * will still render an input with a type of `text` (for localization).\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\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  defineOptions({\n    name: 'll-input',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<InputProps>(), {\n    autocomplete: 'off',\n    type: 'text',\n    modelValue: '',\n    value: null,\n    placeholder: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the input value changes.\n     */\n    (e: 'update:model-value', v: string | number): void;\n    /**\n     * Emitted when the input value changes.\n     */\n    (e: 'change', v: string | number): void;\n    /**\n     * Emitted when the input is focused\n     */\n    (e: 'focus', evt: Event): void;\n    /**\n     * Emitted when the input is blurred\n     */\n    (e: 'blur', evt: Event): void;\n  }>();\n\n  const slots = useSlots();\n  const classes = useCssModule();\n  const attrs = useAttrs();\n\n  // declare a ref to hold the element reference\n  // the name must match template ref value\n  const inputEl = ref<HTMLInputElement>();\n\n  // this exposes the input ref to any parent that renders the `Input` component\n  // and gives it a template ref, giving parent components access to the DOM element.\n  defineExpose({ inputEl });\n\n  const internalValue = ref<string | number>(props.modelValue);\n\n  if (props.type === 'number' && (props.modelValue || props.modelValue === 0)) {\n    internalValue.value = convertDecimal(props.modelValue, decimalSeparator);\n  }\n\n  const showPassword = ref(false);\n\n  const isReadOnly = computed(() => props.isReadOnly || ('readonly' in attrs && attrs.readonly !== false));\n  const isNumber = computed(() => props.type === 'number');\n\n  const inputAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const inputType = computed(() => {\n    // type 'number' is a special use case and requires\n    // that the type be 'text' to support internationalization\n    if (isNumber.value) {\n      return 'text';\n    }\n\n    if (props.type === 'password' && showPassword.value) {\n      return 'text';\n    }\n\n    return props.type;\n  });\n\n  watchEffect(() => {\n    internalValue.value = format(props.modelValue);\n  });\n\n  /**\n   * Converts the localized number to a valid number (to emit). i.e. 12,50 > 12.50\n   *\n   * @param {string|number} value - Number you want to parse.\n   * @returns {number|string} number or empty string (for empty input)\n   */\n  function parseNumber(value: string | number = '', isUserTyping = false): string | number {\n    // If this isn't a number input, we shouldn't be calling this function\n    if (!isNumber.value) {\n      return value;\n    }\n\n    let tempValue = value;\n\n    // If blank, just stop\n    if (isNil(tempValue) || `${tempValue}`.length === 0) return '';\n\n    // clean out different locale decimals\n    if (decimalSeparator !== '.') {\n      tempValue = convertDecimal(tempValue, '.');\n    }\n\n    // If the user is in the middle of an input, let them finish the number\n    if (isUserTyping) {\n      // Prefix values with a 0 if the user starts with a decimal point\n      if (tempValue === '.') tempValue = '0.';\n\n      // This is to prevent the parsing from correcting 0. to 0 and causing the value to be reset\n      if (tempValue.toString().startsWith('0.')) return tempValue;\n    }\n\n    // Empty or null values convert to 0 with NumberFormat, so return '';\n    if (!isNil(tempValue) && `${tempValue}`.length) {\n      tempValue = Intl.NumberFormat('en-US', {\n        style: 'decimal',\n        maximumFractionDigits: 7,\n        useGrouping: false,\n      }).format(Number(tempValue));\n    } else {\n      return '';\n    }\n\n    // Ensure valid number, otherwise clear value\n    return isNaN(Number(tempValue)) ? '' : parseFloat(tempValue);\n  }\n\n  /**\n   * Formats the input based on conditions\n   *\n   * @param {number|string} value - The value to format.\n   */\n  function format(value: string | number) {\n    if (isNumber.value) {\n      return sanitizeDecimal(value, decimalSeparator);\n    }\n\n    return value;\n  }\n\n  /**\n   * Fire after focusing out of input, if value has changed.\n   */\n  function handleChange() {\n    // Parse the final value on blur\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value) : internalValue.value;\n    emit('change', parsedValue);\n  }\n\n  /**\n   * Fired when typing on input.\n   */\n  function handleInput(e: Event) {\n    const value = (e.target as HTMLInputElement).value;\n\n    // Update the internal value with a sanitized version\n    internalValue.value = format(value);\n\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value, true) : value;\n\n    emit('update:model-value', parsedValue);\n  }\n\n  onMounted(() => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-input\" :class=\"[classes.root, attrs.class]\" data-test=\"ll-input\">\n    <template #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <div class=\"tw-relative\">\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"fieldId\"\n          ref=\"inputEl\"\n          v-model=\"internalValue\"\n          :aria-errormessage=\"fieldErrorId\"\n          :aria-invalid=\"hasError\"\n          :autocomplete=\"autocomplete\"\n          :placeholder=\"props.placeholder\"\n          :class=\"[\n            { [classes['input-prepended']]: !!slots.prepend },\n            { [classes['input-appended']]: !!slots.append || props.type === 'password' },\n            { [classes['has-error']]: !!props.errorText },\n          ]\"\n          :type=\"inputType\"\n          :disabled=\"props.isDisabled || props.disabled\"\n          :readonly=\"isReadOnly\"\n          @change=\"handleChange\"\n          @input=\"handleInput\"\n          @blur=\"(evt) => emit('blur', evt)\"\n          @focus=\"(evt) => emit('focus', evt)\"\n        />\n\n        <div\n          v-if=\"slots.prepend\"\n          class=\"stash-input-prepend font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--prepend']]\"\n        >\n          <!-- @slot renders content on the left side of the input -->\n          <slot name=\"prepend\"> </slot>\n        </div>\n\n        <div\n          v-if=\"slots.append || props.type === 'password'\"\n          class=\"stash-input-append font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--append']]\"\n        >\n          <!-- @slot renders content on the right side of the input -->\n          <slot v-if=\"slots.append\" name=\"append\"></slot>\n          <Icon\n            v-else\n            :name=\"showPassword ? 'hide' : 'show'\"\n            class=\"tw-cursor-pointer\"\n            :class=\"{ 'tw-text-ice-500': props.isDisabled || props.disabled }\"\n            :data-test=\"showPassword ? 'hide-password-icon' : 'show-password-icon'\"\n            @click=\"showPassword = !showPassword\"\n          />\n        </div>\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n  }\n\n  .root input {\n    background: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    border-radius: theme('borderRadius.DEFAULT');\n    color: var(--color-ice-700);\n    display: block;\n    height: theme('height.input');\n    font-size: theme('fontSize.sm');\n    font-weight: theme('fontWeight.normal');\n    outline: none;\n    padding: 0 theme('spacing.3');\n    width: 100%;\n  }\n\n  .root input:hover {\n    border-color: var(--color-ice-500);\n  }\n\n  .root input:active,\n  .root input:focus {\n    border-color: var(--color-blue-500);\n  }\n\n  .root input::placeholder {\n    color: var(--color-ice-500);\n    opacity: 1;\n  }\n\n  .root input.has-error:not(:focus) {\n    border-color: var(--color-red-500);\n  }\n\n  .root input.input-prepended {\n    padding-left: 36px;\n  }\n\n  .root input.input-appended {\n    padding-right: 36px;\n  }\n\n  .symbol {\n    align-items: center;\n    display: flex;\n    height: theme('height.input');\n    justify-content: center;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: theme('height.input');\n  }\n\n  .symbol--prepend {\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    left: 0;\n  }\n\n  .symbol--append {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n    right: 0;\n  }\n\n  .root input[disabled] {\n    background-color: var(--color-ice-100) !important;\n    border-color: var(--color-ice-500) !important;\n    color: var(--color-ice-500) !important;\n    pointer-events: none;\n    outline-color: var(--color-ice-500) !important;\n\n    & + .symbol--prepend,\n    & + .symbol--append {\n      color: var(--color-ice-500);\n    }\n  }\n\n  .root input[readonly] {\n    border-color: transparent;\n    background-color: transparent;\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .root input[disabled]:active,\n  .root input[readonly]:active,\n  .root input[disabled]:focus,\n  .root input[readonly]:focus {\n    box-shadow: none !important;\n  }\n\n  .root input[disabled]::placeholder {\n    text-transform: none;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","classes","useCssModule","attrs","useAttrs","inputEl","ref","__expose","internalValue","convertDecimal","decimalSeparator","showPassword","isReadOnly","computed","isNumber","inputAttrs","tempAttrs","inputType","watchEffect","format","parseNumber","value","isUserTyping","tempValue","isNil","sanitizeDecimal","handleChange","parsedValue","handleInput","e","onMounted","_createBlock","Field","_mergeProps","_unref","fieldId","fieldErrorId","hasError","_createElementVNode","_hoisted_1","$event","autocomplete","_cache","evt","_createElementBlock","_renderSlot","_ctx","Icon","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import isNil from 'lodash-es/isNil';\n  import { computed, onMounted, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import { convertDecimal, decimalSeparator, sanitizeDecimal } from '../../utils/i18n';\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface InputProps extends FieldProps {\n    /**\n     * Autocomplete takes in a string of off or on\n     */\n    autocomplete?: string;\n\n    /**\n     * Value for the input element.\n     */\n    modelValue?: string | number;\n\n    /**\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Input type. Excludes certain types that have a dedicated component.\n     *\n     * Note: For distinguishing between text & number internally, passing `number`\n     * will still render an input with a type of `text` (for localization).\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\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  defineOptions({\n    name: 'll-input',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<InputProps>(), {\n    autocomplete: 'off',\n    type: 'text',\n    modelValue: '',\n    value: null,\n    placeholder: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the input value changes.\n     */\n    (e: 'update:model-value', v: string | number): void;\n    /**\n     * Emitted when the input value changes.\n     */\n    (e: 'change', v: string | number): void;\n    /**\n     * Emitted when the input is focused\n     */\n    (e: 'focus', evt: Event): void;\n    /**\n     * Emitted when the input is blurred\n     */\n    (e: 'blur', evt: Event): void;\n  }>();\n\n  const slots = useSlots();\n  const classes = useCssModule();\n  const attrs = useAttrs();\n\n  // declare a ref to hold the element reference\n  // the name must match template ref value\n  const inputEl = ref<HTMLInputElement>();\n\n  // this exposes the input ref to any parent that renders the `Input` component\n  // and gives it a template ref, giving parent components access to the DOM element.\n  defineExpose({ inputEl });\n\n  const internalValue = ref<string | number>(props.modelValue);\n\n  if (props.type === 'number' && (props.modelValue || props.modelValue === 0)) {\n    internalValue.value = convertDecimal(props.modelValue, decimalSeparator);\n  }\n\n  const showPassword = ref(false);\n\n  const isReadOnly = computed(() => props.isReadOnly || ('readonly' in attrs && attrs.readonly !== false));\n  const isNumber = computed(() => props.type === 'number');\n\n  const inputAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const inputType = computed(() => {\n    // type 'number' is a special use case and requires\n    // that the type be 'text' to support internationalization\n    if (isNumber.value) {\n      return 'text';\n    }\n\n    if (props.type === 'password' && showPassword.value) {\n      return 'text';\n    }\n\n    return props.type;\n  });\n\n  watchEffect(() => {\n    internalValue.value = format(props.modelValue);\n  });\n\n  /**\n   * Converts the localized number to a valid number (to emit). i.e. 12,50 > 12.50\n   *\n   * @param {string|number} value - Number you want to parse.\n   * @returns {number|string} number or empty string (for empty input)\n   */\n  function parseNumber(value: string | number = '', isUserTyping = false): string | number {\n    // If this isn't a number input, we shouldn't be calling this function\n    if (!isNumber.value) {\n      return value;\n    }\n\n    let tempValue = value;\n\n    // If blank, just stop\n    if (isNil(tempValue) || `${tempValue}`.length === 0) return '';\n\n    // clean out different locale decimals\n    if (decimalSeparator !== '.') {\n      tempValue = convertDecimal(tempValue, '.');\n    }\n\n    // If the user is in the middle of an input, let them finish the number\n    if (isUserTyping) {\n      // Prefix values with a 0 if the user starts with a decimal point\n      if (tempValue === '.') tempValue = '0.';\n\n      // This is to prevent the parsing from correcting 0. to 0 and causing the value to be reset\n      if (tempValue.toString().startsWith('0.')) return tempValue;\n    }\n\n    // Empty or null values convert to 0 with NumberFormat, so return '';\n    if (!isNil(tempValue) && `${tempValue}`.length) {\n      tempValue = Intl.NumberFormat('en-US', {\n        style: 'decimal',\n        maximumFractionDigits: 7,\n        useGrouping: false,\n      }).format(Number(tempValue));\n    } else {\n      return '';\n    }\n\n    // Ensure valid number, otherwise clear value\n    return isNaN(Number(tempValue)) ? '' : parseFloat(tempValue);\n  }\n\n  /**\n   * Formats the input based on conditions\n   *\n   * @param {number|string} value - The value to format.\n   */\n  function format(value: string | number) {\n    if (isNumber.value) {\n      return sanitizeDecimal(value, decimalSeparator);\n    }\n\n    return value;\n  }\n\n  /**\n   * Fire after focusing out of input, if value has changed.\n   */\n  function handleChange() {\n    // Parse the final value on blur\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value) : internalValue.value;\n    emit('change', parsedValue);\n  }\n\n  /**\n   * Fired when typing on input.\n   */\n  function handleInput(e: Event) {\n    const value = (e.target as HTMLInputElement).value;\n\n    // Update the internal value with a sanitized version\n    internalValue.value = format(value);\n\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value, true) : value;\n\n    emit('update:model-value', parsedValue);\n  }\n\n  onMounted(() => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-input\" :class=\"[classes.root, attrs.class]\" data-test=\"ll-input\">\n    <template #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <div class=\"tw-relative\">\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"fieldId\"\n          ref=\"inputEl\"\n          v-model=\"internalValue\"\n          :aria-errormessage=\"fieldErrorId\"\n          :aria-invalid=\"hasError\"\n          :autocomplete=\"autocomplete\"\n          :placeholder=\"props.placeholder\"\n          :class=\"[\n            { [classes['input-prepended']]: !!slots.prepend },\n            { [classes['input-appended']]: !!slots.append || props.type === 'password' },\n            { [classes['has-error']]: !!props.errorText },\n          ]\"\n          :type=\"inputType\"\n          :disabled=\"props.isDisabled || props.disabled\"\n          :readonly=\"isReadOnly\"\n          @change=\"handleChange\"\n          @input=\"handleInput\"\n          @blur=\"(evt) => emit('blur', evt)\"\n          @focus=\"(evt) => emit('focus', evt)\"\n        />\n\n        <div\n          v-if=\"slots.prepend\"\n          class=\"stash-input-prepend font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--prepend']]\"\n        >\n          <!-- @slot renders content on the left side of the input -->\n          <slot name=\"prepend\"> </slot>\n        </div>\n\n        <div\n          v-if=\"slots.append || props.type === 'password'\"\n          class=\"stash-input-append font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--append']]\"\n        >\n          <!-- @slot renders content on the right side of the input -->\n          <slot v-if=\"slots.append\" name=\"append\"></slot>\n          <Icon\n            v-else\n            :name=\"showPassword ? 'hide' : 'show'\"\n            class=\"tw-cursor-pointer\"\n            :class=\"{ 'tw-text-ice-500': props.isDisabled || props.disabled }\"\n            :data-test=\"showPassword ? 'hide-password-icon' : 'show-password-icon'\"\n            @click=\"showPassword = !showPassword\"\n          />\n        </div>\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n  }\n\n  .root input {\n    background: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    border-radius: theme('borderRadius.DEFAULT');\n    color: var(--color-ice-700);\n    display: block;\n    height: theme('height.input');\n    font-size: theme('fontSize.sm');\n    font-weight: theme('fontWeight.normal');\n    outline: none;\n    padding: 0 theme('spacing.3');\n    width: 100%;\n  }\n\n  .root input:hover {\n    border-color: var(--color-ice-500);\n  }\n\n  .root input:active,\n  .root input:focus {\n    border-color: var(--color-blue-500);\n  }\n\n  .root input::placeholder {\n    color: var(--color-ice-500);\n    opacity: 1;\n  }\n\n  .root input.has-error:not(:focus) {\n    border-color: var(--color-red-500);\n  }\n\n  .root input.input-prepended {\n    padding-left: 36px;\n  }\n\n  .root input.input-appended {\n    padding-right: 36px;\n  }\n\n  .symbol {\n    align-items: center;\n    display: flex;\n    height: theme('height.input');\n    justify-content: center;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: theme('height.input');\n  }\n\n  .symbol--prepend {\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    left: 0;\n  }\n\n  .symbol--append {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n    right: 0;\n  }\n\n  .root input[disabled] {\n    background-color: var(--color-ice-100) !important;\n    border-color: var(--color-ice-500) !important;\n    color: var(--color-ice-500) !important;\n    pointer-events: none;\n    outline-color: var(--color-ice-500) !important;\n\n    & + .symbol--prepend,\n    & + .symbol--append {\n      color: var(--color-ice-500);\n    }\n  }\n\n  .root input[readonly] {\n    border-color: transparent;\n    background-color: transparent;\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .root input[disabled]:active,\n  .root input[readonly]:active,\n  .root input[disabled]:focus,\n  .root input[readonly]:focus {\n    box-shadow: none !important;\n  }\n\n  .root input[disabled]::placeholder {\n    text-transform: none;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","classes","useCssModule","attrs","useAttrs","inputEl","ref","__expose","internalValue","convertDecimal","decimalSeparator","showPassword","isReadOnly","computed","isNumber","inputAttrs","tempAttrs","inputType","watchEffect","format","parseNumber","value","isUserTyping","tempValue","isNil","sanitizeDecimal","handleChange","parsedValue","handleInput","e","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CE,UAAMA,IAAQC,GAQRC,IAAOC,GAmBPC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAQC,EAAA,GAIRC,IAAUC,EAAA;AAIhB,IAAAC,EAAa,EAAE,SAAAF,GAAS;AAExB,UAAMG,IAAgBF,EAAqBX,EAAM,UAAU;AAE3D,IAAIA,EAAM,SAAS,aAAaA,EAAM,cAAcA,EAAM,eAAe,OACvEa,EAAc,QAAQC,EAAed,EAAM,YAAYe,CAAgB;AAGzE,UAAMC,IAAeL,EAAI,EAAK,GAExBM,IAAaC,EAAS,MAAMlB,EAAM,cAAe,cAAcQ,KAASA,EAAM,aAAa,EAAM,GACjGW,IAAWD,EAAS,MAAMlB,EAAM,SAAS,QAAQ,GAEjDoB,IAAaF,EAAS,MAAM;AAChC,YAAMG,IAAY,EAAE,GAAGb,EAAA;AAEvB,oBAAOa,EAAU,OAEVA;AAAA,IACT,CAAC,GAEKC,IAAYJ,EAAS,MAGrBC,EAAS,SAITnB,EAAM,SAAS,cAAcgB,EAAa,QACrC,SAGFhB,EAAM,IACd;AAED,IAAAuB,EAAY,MAAM;AAChB,MAAAV,EAAc,QAAQW,EAAOxB,EAAM,UAAU;AAAA,IAC/C,CAAC;AAQD,aAASyB,EAAYC,IAAyB,IAAIC,IAAe,IAAwB;AAEvF,UAAI,CAACR,EAAS;AACZ,eAAOO;AAGT,UAAIE,IAAYF;AAGhB,UAAIG,EAAMD,CAAS,KAAK,GAAGA,CAAS,GAAG,WAAW,EAAG,QAAO;AAQ5D,UALIb,MAAqB,QACvBa,IAAYd,EAAec,GAAW,GAAG,IAIvCD,MAEEC,MAAc,QAAKA,IAAY,OAG/BA,EAAU,SAAA,EAAW,WAAW,IAAI;AAAG,eAAOA;AAIpD,UAAI,CAACC,EAAMD,CAAS,KAAK,GAAGA,CAAS,GAAG;AACtC,QAAAA,IAAY,KAAK,aAAa,SAAS;AAAA,UACrC,OAAO;AAAA,UACP,uBAAuB;AAAA,UACvB,aAAa;AAAA,QAAA,CACd,EAAE,OAAO,OAAOA,CAAS,CAAC;AAAA;AAE3B,eAAO;AAIT,aAAO,MAAM,OAAOA,CAAS,CAAC,IAAI,KAAK,WAAWA,CAAS;AAAA,IAC7D;AAOA,aAASJ,EAAOE,GAAwB;AACtC,aAAIP,EAAS,QACJW,EAAgBJ,GAAOX,CAAgB,IAGzCW;AAAA,IACT;AAKA,aAASK,IAAe;AAEtB,YAAMC,IAAcb,EAAS,QAAQM,EAAYZ,EAAc,KAAK,IAAIA,EAAc;AACtF,MAAAX,EAAK,UAAU8B,CAAW;AAAA,IAC5B;AAKA,aAASC,EAAYC,GAAU;AAC7B,YAAMR,IAASQ,EAAE,OAA4B;AAG7C,MAAArB,EAAc,QAAQW,EAAOE,CAAK;AAElC,YAAMM,IAAcb,EAAS,QAAQM,EAAYZ,EAAc,OAAO,EAAI,IAAIa;AAE9E,MAAAxB,EAAK,sBAAsB8B,CAAW;AAAA,IACxC;AAEA,WAAAG,EAAU,MAAM;AACd,UAAInC,EAAM,UAAU;AAClB,cAAM,IAAI,MAAM,0DAA0D;AAG5E,UAAIQ,EAAM;AACR,cAAM,IAAI,MAAM,+DAA+D;AAAA,IAEnF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Input.vue.d.ts

@@ -1,36 +1,69 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 import { Ref } 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 (): {
         $slots: S;
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<InputProps, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InputProps>, {
+autocomplete: string;
+type: string;
+modelValue: string;
+value: null;
+placeholder: 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, PublicProps, Readonly<InputProps> & Readonly<{
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:model-value": (v: string | number) => void;
+change: (v: string | number) => void;
+focus: (evt: Event) => void;
+blur: (evt: Event) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InputProps>, {
+autocomplete: string;
+type: string;
+modelValue: string;
+value: null;
+placeholder: undefined;
+}>>> & 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;
 }>, {
-value: string | number | null;
 type: string;
 placeholder: string;
 modelValue: string | number;
+value: string | number | null;
 autocomplete: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-inputEl: HTMLInputElement;
-}, any>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     prepend?(_: {}): any;
     append?(_: {}): any;
     hint?(_: {}): any;
@@ -94,7 +127,7 @@ declare interface FieldProps {
     disabled?: boolean;
 }
 
-declare interface InputProps extends FieldProps {
+export declare interface InputProps extends FieldProps {
     /**
      * Autocomplete takes in a string of off or on
      */

package/dist/InputOptions.js

@@ -1,12 +1,12 @@
-import { defineComponent as x, useSlots as O, useAttrs as $, useCssModule as E, ref as u, watchEffect as T, watch as m, createBlock as D, openBlock as p, mergeProps as j, createSlots as M, withCtx as v, createElementBlock as y, createElementVNode as R, toDisplayString as h, normalizeClass as f, unref as d, renderSlot as _, createVNode as b } from "vue";
-import F from "./Input.js";
-import L from "./Select.js";
-import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-DI6z3AE9.js";
-import { _ as U } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const q = {
+import { defineComponent as O, useSlots as $, useAttrs as E, useCssModule as T, ref as u, watchEffect as D, watch as v, createBlock as j, openBlock as p, mergeProps as M, createSlots as R, withCtx as y, createElementBlock as h, createElementVNode as F, toDisplayString as f, normalizeClass as _, unref as d, renderSlot as b, createVNode as w } from "vue";
+import L from "./Input.js";
+import N from "./Select.js";
+import { _ as U } from "./Field.vue_vue_type_script_setup_true_lang-DI6z3AE9.js";
+import { _ as q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const z = {
   key: 0,
   class: "tw-flex tw-h-input tw-items-center tw-text-sm"
-}, z = ["id", "aria-labelledby"], A = /* @__PURE__ */ x({
+}, A = ["id", "aria-labelledby"], P = /* @__PURE__ */ O({
   name: "ll-input-options",
   __name: "InputOptions",
   props: {
@@ -32,9 +32,9 @@ const q = {
     disabled: { type: Boolean }
   },
   emits: ["update:model-value", "change"],
-  setup(w, { emit: B }) {
-    const e = w, o = B, g = O(), r = $(), n = E(), a = u(), c = u(!1), t = u();
-    function V(l) {
+  setup(B, { emit: g }) {
+    const e = B, o = g, V = $(), r = E(), n = T(), a = u(), c = u(!1), t = u();
+    function C(l) {
       a.value = String(l), o("update:model-value", {
         value: a.value,
         option: t.value,
@@ -42,7 +42,7 @@ const q = {
         type: "input"
       });
     }
-    function C() {
+    function k() {
       o("change", {
         value: a.value,
         option: t.value,
@@ -50,7 +50,7 @@ const q = {
         type: "input"
       });
     }
-    function k(l) {
+    function S(l) {
       t.value = l, o("change", {
         value: a.value,
         option: t.value,
@@ -63,15 +63,15 @@ const q = {
         type: "select"
       });
     }
-    if (T(() => {
+    if (D(() => {
       t.value || (t.value = e.options[0]);
-    }), m(
+    }), v(
       () => e.modelValue.value,
       () => {
         a.value = e.modelValue.value;
       },
       { immediate: !0 }
-    ), m(
+    ), v(
       () => e.modelValue.option,
       () => {
         t.value = e.modelValue.option;
@@ -81,71 +81,74 @@ const q = {
       throw new Error("ll-input-options: use :model-value or v-model instead of :value.");
     if (r.onInput)
       throw new Error("ll-input-options: use the @update:model-value event instead of @input");
-    return (l, s) => (p(), D(N, j(e, {
+    return (l, s) => (p(), j(U, M(e, {
       class: "stash-input-options",
       "data-test": "stash-input-options"
-    }), M({
-      default: v(({ fieldId: i, labelId: S }) => [
-        e.isReadOnly ? (p(), y("div", q, [
-          R("span", {
-            id: i,
-            "aria-labelledby": S,
-            class: "tw-h-min"
-          }, h(a.value || 0) + " " + h(t.value?.name), 9, z)
-        ])) : (p(), y("div", {
-          key: 1,
-          class: f(["tw-flex", [d(n)["input-wrapper"], { [d(n)["has-error"]]: !!e.errorText }]])
-        }, [
-          _(l.$slots, "default", { fieldId: i }, () => [
-            b(F, {
+    }), R({
+      default: y(({ fieldId: i, labelId: I }) => {
+        var m;
+        return [
+          e.isReadOnly ? (p(), h("div", z, [
+            F("span", {
               id: i,
-              class: "stash-input-options__input",
-              "data-test": "stash-input-options|input",
-              type: e.type,
-              "model-value": a.value,
+              "aria-labelledby": I,
+              class: "tw-h-min"
+            }, f(a.value || 0) + " " + f((m = t.value) == null ? void 0 : m.name), 9, A)
+          ])) : (p(), h("div", {
+            key: 1,
+            class: _(["tw-flex", [d(n)["input-wrapper"], { [d(n)["has-error"]]: !!e.errorText }]])
+          }, [
+            b(l.$slots, "default", { fieldId: i }, () => [
+              w(L, {
+                id: i,
+                class: "stash-input-options__input",
+                "data-test": "stash-input-options|input",
+                type: e.type,
+                "model-value": a.value,
+                disabled: e.isDisabled || e.disabled,
+                placeholder: e.placeholder,
+                onChange: k,
+                "onUpdate:modelValue": C,
+                onBlur: s[0] || (s[0] = (x) => c.value = !1),
+                onFocus: s[1] || (s[1] = (x) => c.value = !0)
+              }, null, 8, ["id", "type", "model-value", "disabled", "placeholder"])
+            ]),
+            w(N, {
+              single: "",
+              "hide-search": "",
+              "prevent-empty": "",
+              class: _(["stash-input-options__select tw-min-w-20", d(n).select]),
+              "data-test": "stash-input-options|select",
+              "no-truncate": l.noTruncate,
+              options: l.options,
+              "model-value": t.value,
+              "display-by": e.displayBy,
+              "track-by": e.trackBy,
               disabled: e.isDisabled || e.disabled,
-              placeholder: e.placeholder,
-              onChange: C,
-              "onUpdate:modelValue": V,
-              onBlur: s[0] || (s[0] = (I) => c.value = !1),
-              onFocus: s[1] || (s[1] = (I) => c.value = !0)
-            }, null, 8, ["id", "type", "model-value", "disabled", "placeholder"])
-          ]),
-          b(L, {
-            single: "",
-            "hide-search": "",
-            "prevent-empty": "",
-            class: f(["stash-input-options__select tw-min-w-20", d(n).select]),
-            "data-test": "stash-input-options|select",
-            "no-truncate": l.noTruncate,
-            options: l.options,
-            "model-value": t.value,
-            "display-by": e.displayBy,
-            "track-by": e.trackBy,
-            disabled: e.isDisabled || e.disabled,
-            "onUpdate:modelValue": k
-          }, null, 8, ["class", "no-truncate", "options", "model-value", "display-by", "track-by", "disabled"])
-        ], 2))
-      ]),
+              "onUpdate:modelValue": S
+            }, null, 8, ["class", "no-truncate", "options", "model-value", "display-by", "track-by", "disabled"])
+          ], 2))
+        ];
+      }),
       _: 2
     }, [
-      g.hint ? {
+      V.hint ? {
         name: "hint",
-        fn: v(() => [
-          _(l.$slots, "hint")
+        fn: y(() => [
+          b(l.$slots, "hint")
         ]),
         key: "0"
       } : void 0
     ]), 1040));
   }
-}), P = "_select_1jmut_26", G = {
+}), G = "_select_1jmut_26", H = {
   "input-wrapper": "_input-wrapper_1jmut_2",
   "has-error": "_has-error_1jmut_14",
-  select: P
-}, H = {
-  $style: G
-}, Y = /* @__PURE__ */ U(A, [["__cssModules", H]]);
+  select: G
+}, J = {
+  $style: H
+}, Z = /* @__PURE__ */ q(P, [["__cssModules", J]]);
 export {
-  Y as default
+  Z 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 { FieldProps } from '../Field/Field.types';\n  import Field 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  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, 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 slots = defineSlots<{\n    /**\n     * Default slot for rendering a custom input field.\n     */\n    default: (props: { fieldId: string }) => void;\n    /**\n     * Hint slot for rendering a custom hint text.\n     */\n    hint: () => void;\n  }>();\n\n  const attrs = useAttrs();\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 }}\n        </span>\n      </div>\n      <div v-else class=\"tw-flex\" :class=\"[classes['input-wrapper'], { [classes['has-error']]: !!props.errorText }]\">\n        <slot :field-id=\"fieldId\">\n          <Input\n            :id=\"fieldId\"\n            class=\"stash-input-options__input\"\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        </slot>\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-wrapper {\n    & > div:has(input) {\n      display: inline-block;\n      flex: 1;\n      margin-right: -1px;\n    }\n\n    & input {\n      border-bottom-right-radius: 0;\n      border-top-right-radius: 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\n    & div:has(input:focus) {\n      z-index: 200 !important;\n    }\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</style>\n"],"names":["props","__props","emit","__emit","slots","_useSlots","attrs","useAttrs","classes","useCssModule","internalInput","ref","isInputFocused","selectedOption","handleInput","val","handleInputChange","handleSelectChange","watchEffect","watch","_createBlock","Field","_mergeProps","_withCtx","fieldId","labelId","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_toDisplayString","_hoisted_2","_normalizeClass","_unref","_renderSlot","_ctx","_createVNode","Input","Select","noTruncate","options"],"mappings":"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"}
+{"version":3,"file":"InputOptions.js","sources":["../src/components/InputOptions/InputOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { FieldProps } from '../Field/Field.types';\n  import Field 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  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, 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 slots = defineSlots<{\n    /**\n     * Default slot for rendering a custom input field.\n     */\n    default: (props: { fieldId: string }) => void;\n    /**\n     * Hint slot for rendering a custom hint text.\n     */\n    hint: () => void;\n  }>();\n\n  const attrs = useAttrs();\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 }}\n        </span>\n      </div>\n      <div v-else class=\"tw-flex\" :class=\"[classes['input-wrapper'], { [classes['has-error']]: !!props.errorText }]\">\n        <slot :field-id=\"fieldId\">\n          <Input\n            :id=\"fieldId\"\n            class=\"stash-input-options__input\"\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        </slot>\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-wrapper {\n    & > div:has(input) {\n      display: inline-block;\n      flex: 1;\n      margin-right: -1px;\n    }\n\n    & input {\n      border-bottom-right-radius: 0;\n      border-top-right-radius: 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\n    & div:has(input:focus) {\n      z-index: 200 !important;\n    }\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</style>\n"],"names":["props","__props","emit","__emit","slots","_useSlots","attrs","useAttrs","classes","useCssModule","internalInput","ref","isInputFocused","selectedOption","handleInput","val","handleInputChange","handleSelectChange","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DE,UAAMA,IAAQC,GAURC,IAAOC,GAiBPC,IAAQC,EAAA,GAWRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAgBC,EAAA,GAChBC,IAAiBD,EAAI,EAAK,GAC1BE,IAAiBF,EAAA;AAGvB,aAASG,EAAYC,GAAuB;AAC1C,MAAAL,EAAc,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;AAChB,MAAKL,EAAe,UAClBA,EAAe,QAAQb,EAAM,QAAQ,CAAC;AAAA,IAE1C,CAAC,GAEDmB;AAAA,MACE,MAAMnB,EAAM,WAAW;AAAA,MACvB,MAAM;AACJ,QAAAU,EAAc,QAAQV,EAAM,WAAW;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGpBmB;AAAA,MACE,MAAMnB,EAAM,WAAW;AAAA,MACvB,MAAM;AACJ,QAAAa,EAAe,QAAQb,EAAM,WAAW;AAAA,MAC1C;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGhBM,EAAM;AACR,YAAM,IAAI,MAAM,kEAAkE;AAGpF,QAAIA,EAAM;AACR,YAAM,IAAI,MAAM,uEAAuE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/InputOptions.vue.d.ts

@@ -1,28 +1,73 @@
 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 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 (): {
         $slots: S;
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<InputOptionsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-change: (v: {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InputOptionsProps>, {
+modelValue: () => {
+value: string;
+option: undefined;
+};
+noTruncate: boolean;
+options: () => never[];
+type: string;
+placeholder: undefined;
+displayBy: undefined;
+trackBy: undefined;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:model-value": (v: {
 value?: string | undefined;
 option?: SelectedOption;
 isValueChange: boolean;
 type: 'input' | 'select';
-}) => any;
-"update:model-value": (v: {
+}) => void;
+change: (v: {
 value?: string | undefined;
 option?: SelectedOption;
 isValueChange: boolean;
 type: 'input' | 'select';
-}) => any;
-}, string, PublicProps, Readonly<InputOptionsProps> & Readonly<{
+}) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InputOptionsProps>, {
+modelValue: () => {
+value: string;
+option: undefined;
+};
+noTruncate: boolean;
+options: () => never[];
+type: string;
+placeholder: undefined;
+displayBy: undefined;
+trackBy: undefined;
+}>>> & Readonly<{
 onChange?: ((v: {
 value?: string | undefined;
 option?: SelectedOption;
@@ -36,17 +81,17 @@ isValueChange: boolean;
 type: 'input' | 'select';
 }) => any) | undefined;
 }>, {
-options: any[];
 type: string;
-placeholder: string;
 trackBy: string;
+placeholder: string;
 displayBy: string;
+options: any[];
 modelValue: {
 value: string;
 option?: any;
 };
 noTruncate: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, Readonly<{
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, Readonly<{
     /**
      * Default slot for rendering a custom input field.
      */
@@ -128,7 +173,7 @@ declare interface FieldProps {
     disabled?: boolean;
 }
 
-declare interface InputOptionsProps extends FieldProps {
+export declare interface InputOptionsProps extends FieldProps {
     /**
      * The current value inclusive of the input & select
      */

package/dist/IntegrationIcon.js

@@ -35,16 +35,16 @@ const N = [
     size: { default: "standard" },
     staticPath: { default: "" }
   },
-  setup(r) {
-    const t = r, a = u(), c = f("stashOptions", {
+  setup(c) {
+    const t = c, a = u(), o = f("stashOptions", {
       staticPath: "/static"
-    }), i = m(() => t.staticPath || c?.staticPath), l = (e) => {
+    }), i = m(() => t.staticPath || (o == null ? void 0 : o.staticPath)), l = (e) => {
       if (!e)
         return e;
       const n = document.createElement("use");
       n.setAttribute("href", `#${t.name}`);
-      const o = e.querySelector(`#${t.name}`);
-      return o ? (e.replaceChildren(o, n), e) : (e.insertBefore(n, e.firstChild), e);
+      const r = e.querySelector(`#${t.name}`);
+      return r ? (e.replaceChildren(r, n), e) : (e.insertBefore(n, e.firstChild), e);
     };
     return (e, n) => (h(), _(s(x), {
       id: t.id,
@@ -74,9 +74,9 @@ const N = [
   large: P
 }, $ = {
   $style: S
-}, O = /* @__PURE__ */ y(z, [["__cssModules", $]]);
+}, j = /* @__PURE__ */ y(z, [["__cssModules", $]]);
 export {
-  O as default,
+  j as default,
   N as integrationIconNames
 };
 //# sourceMappingURL=IntegrationIcon.js.map

package/dist/IntegrationIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationIcon.js","sources":["../src/components/IntegrationIcon/IntegrationIcon.types.ts","../src/components/IntegrationIcon/IntegrationIcon.vue"],"sourcesContent":["export const integrationIconNames = [\n  'batchbud',\n  'biotrack',\n  'blaze',\n  'canix',\n  'cannveya',\n  'cova',\n  'distru',\n  'dutchie',\n  'dynamics365',\n  'flourish',\n  'flowhub',\n  'growflow',\n  'maxq',\n  'meadow',\n  'metrc',\n  'quickbooks',\n  'roshi',\n  'sage-intacct',\n  'salesforce',\n  'stashstock',\n  'xero',\n  'zohobooks',\n] as const;\n\nexport type IntegrationIconName = (typeof integrationIconNames)[number];\n","<script lang=\"ts\">\n  export * from './IntegrationIcon.types';\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, useCssModule } from 'vue';\n  import InlineSvg from 'vue-inline-svg';\n\n  import { StashProvideState } from '../../../types/misc';\n  import { IconSize } from '../Icon/Icon.types';\n  import { IntegrationIconName } from './IntegrationIcon.types';\n\n  export interface IntegrationIconProps {\n    id?: string;\n\n    /**\n     * The filename of the icon that should be displayed\n     */\n    name: IntegrationIconName;\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 of the icon\n     * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).\n     */\n    size?: IconSize;\n\n    /**\n     * Icon'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  defineOptions({\n    name: 'll-icon',\n  });\n\n  const props = withDefaults(defineProps<IntegrationIconProps>(), {\n    id: () => uniqueId('ll-icon-'),\n    size: 'standard',\n    title: '',\n    staticPath: '',\n  });\n  const classes = useCssModule();\n  const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n    staticPath: '/static',\n  });\n\n  const computedStaticPath = computed(() => {\n    return props.staticPath || stashOptions?.staticPath;\n  });\n\n  /**\n   * Event handler to add the use tag for the specific icon we need to the svg\n   */\n  const transformSvgSource = (svgElem: SVGElement) => {\n    if (!svgElem) {\n      return svgElem;\n    }\n\n    const useNode = document.createElement('use');\n    useNode.setAttribute('href', `#${props.name}`);\n\n    // Grab icon from sprite\n    const symbolNode = svgElem.querySelector(`#${props.name}`);\n\n    // This really shouldn't happen but if the spritesheet gets out of sync with the `IconName` type it could\n    if (!symbolNode) {\n      // still insert <use> element but it will not be found (this is more for tests than anything else)\n      svgElem.insertBefore(useNode, svgElem.firstChild);\n      return svgElem;\n    }\n\n    /**\n     * Repeatedly inlining the entire spritesheet was causing failures in mobile Safari, and also\n     * performance issues on long list pages where the svg was being inlined over and over.\n     * Since the SVG is cached after the first request, this callback is just removing the unnecessary\n     * <symbol> nodes to slim down the DOM manipulation and insertion.\n     */\n    // Replace all children with just the one <symbol> element and <use> element\n    svgElem.replaceChildren(symbolNode, useNode);\n\n    return svgElem;\n  };\n</script>\n\n<!-- Use inline svg so that requests to pull the spritesheet are done via JS and avoid\n  browser restrictions for different domains for svgs.  inline svg also caches the requests\n  so we don't load the spritesheet multiple times\n  Reference: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html -->\n<template>\n  <InlineSvg\n    :id=\"props.id\"\n    role=\"presentation\"\n    :aria-labelledby=\"props.id\"\n    class=\"stash-icon\"\n    :class=\"[\n      classes.icon,\n      `icon--${props.name}`,\n      {\n        [classes.standard]: props.size === 'standard',\n        [classes.dense]: props.size === 'dense',\n        [classes.small]: props.size === 'small',\n        [classes.large]: props.size === 'large',\n      },\n    ]\"\n    data-test=\"stash-integration-icon\"\n    :src=\"`${computedStaticPath}/spritesheet.svg`\"\n    :title=\"props.title\"\n    :transform-source=\"transformSvgSource\"\n  />\n</template>\n\n<style module>\n  .icon {\n    display: inline-block;\n    fill: currentcolor;\n    vertical-align: middle;\n  }\n\n  .standard {\n    height: 24px;\n    min-height: 24px;\n    min-width: 24px;\n    width: 24px;\n  }\n\n  .dense {\n    height: 20px;\n    min-height: 20px;\n    min-width: 20px;\n    width: 20px;\n  }\n\n  .small {\n    height: 14px;\n    min-height: 14px;\n    min-width: 14px;\n    width: 14px;\n  }\n\n  .large {\n    height: 32px;\n    min-height: 32px;\n    min-width: 32px;\n    width: 32px;\n  }\n</style>\n"],"names":["integrationIconNames","props","__props","classes","useCssModule","stashOptions","inject","computedStaticPath","computed","transformSvgSource","svgElem","useNode","symbolNode","_createBlock","_unref","InlineSvg"],"mappings":";;;;AAAO,MAAMA,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;;;;;;;;;ACoBE,UAAMC,IAAQC,GAMRC,IAAUC,EAAA,GACVC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAqBC,EAAS,MAC3BP,EAAM,cAAcI,GAAc,UAC1C,GAKKI,IAAqB,CAACC,MAAwB;AAClD,UAAI,CAACA;AACH,eAAOA;AAGT,YAAMC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,aAAa,QAAQ,IAAIV,EAAM,IAAI,EAAE;AAG7C,YAAMW,IAAaF,EAAQ,cAAc,IAAIT,EAAM,IAAI,EAAE;AAGzD,aAAKW,KAaLF,EAAQ,gBAAgBE,GAAYD,CAAO,GAEpCD,MAbLA,EAAQ,aAAaC,GAASD,EAAQ,UAAU,GACzCA;AAAA,IAaX;2BAQAG,EAmBEC,EAAAC,CAAA,GAAA;AAAA,MAlBC,IAAId,EAAM;AAAA,MACX,MAAK;AAAA,MACJ,mBAAiBA,EAAM;AAAA,MACxB,UAAM,cAAY;AAAA,QACFa,EAAAX,CAAA,EAAQ;AAAA,QAAqB,SAAAF,EAAM,IAAI;AAAA;UAAqB,CAAAa,EAAAX,CAAA,EAAQ,QAAQ,GAAGF,EAAM,SAAI;AAAA,UAA0B,CAAAa,EAAAX,CAAA,EAAQ,KAAK,GAAGF,EAAM,SAAI;AAAA,UAAuB,CAAAa,EAAAX,CAAA,EAAQ,KAAK,GAAGF,EAAM,SAAI;AAAA,UAAuB,CAAAa,EAAAX,CAAA,EAAQ,KAAK,GAAGF,EAAM,SAAI;AAAA,QAAA;AAAA;MAU/P,aAAU;AAAA,MACT,QAAQM,EAAA,KAAkB;AAAA,MAC1B,OAAON,EAAM;AAAA,MACb,oBAAkBQ;AAAA,IAAA;;;;;;;;;;;"}
+{"version":3,"file":"IntegrationIcon.js","sources":["../src/components/IntegrationIcon/IntegrationIcon.types.ts","../src/components/IntegrationIcon/IntegrationIcon.vue"],"sourcesContent":["export const integrationIconNames = [\n  'batchbud',\n  'biotrack',\n  'blaze',\n  'canix',\n  'cannveya',\n  'cova',\n  'distru',\n  'dutchie',\n  'dynamics365',\n  'flourish',\n  'flowhub',\n  'growflow',\n  'maxq',\n  'meadow',\n  'metrc',\n  'quickbooks',\n  'roshi',\n  'sage-intacct',\n  'salesforce',\n  'stashstock',\n  'xero',\n  'zohobooks',\n] as const;\n\nexport type IntegrationIconName = (typeof integrationIconNames)[number];\n","<script lang=\"ts\">\n  export * from './IntegrationIcon.types';\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, useCssModule } from 'vue';\n  import InlineSvg from 'vue-inline-svg';\n\n  import { StashProvideState } from '../../../types/misc';\n  import { IconSize } from '../Icon/Icon.types';\n  import { IntegrationIconName } from './IntegrationIcon.types';\n\n  export interface IntegrationIconProps {\n    id?: string;\n\n    /**\n     * The filename of the icon that should be displayed\n     */\n    name: IntegrationIconName;\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 of the icon\n     * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).\n     */\n    size?: IconSize;\n\n    /**\n     * Icon'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  defineOptions({\n    name: 'll-icon',\n  });\n\n  const props = withDefaults(defineProps<IntegrationIconProps>(), {\n    id: () => uniqueId('ll-icon-'),\n    size: 'standard',\n    title: '',\n    staticPath: '',\n  });\n  const classes = useCssModule();\n  const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n    staticPath: '/static',\n  });\n\n  const computedStaticPath = computed(() => {\n    return props.staticPath || stashOptions?.staticPath;\n  });\n\n  /**\n   * Event handler to add the use tag for the specific icon we need to the svg\n   */\n  const transformSvgSource = (svgElem: SVGElement) => {\n    if (!svgElem) {\n      return svgElem;\n    }\n\n    const useNode = document.createElement('use');\n    useNode.setAttribute('href', `#${props.name}`);\n\n    // Grab icon from sprite\n    const symbolNode = svgElem.querySelector(`#${props.name}`);\n\n    // This really shouldn't happen but if the spritesheet gets out of sync with the `IconName` type it could\n    if (!symbolNode) {\n      // still insert <use> element but it will not be found (this is more for tests than anything else)\n      svgElem.insertBefore(useNode, svgElem.firstChild);\n      return svgElem;\n    }\n\n    /**\n     * Repeatedly inlining the entire spritesheet was causing failures in mobile Safari, and also\n     * performance issues on long list pages where the svg was being inlined over and over.\n     * Since the SVG is cached after the first request, this callback is just removing the unnecessary\n     * <symbol> nodes to slim down the DOM manipulation and insertion.\n     */\n    // Replace all children with just the one <symbol> element and <use> element\n    svgElem.replaceChildren(symbolNode, useNode);\n\n    return svgElem;\n  };\n</script>\n\n<!-- Use inline svg so that requests to pull the spritesheet are done via JS and avoid\n  browser restrictions for different domains for svgs.  inline svg also caches the requests\n  so we don't load the spritesheet multiple times\n  Reference: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html -->\n<template>\n  <InlineSvg\n    :id=\"props.id\"\n    role=\"presentation\"\n    :aria-labelledby=\"props.id\"\n    class=\"stash-icon\"\n    :class=\"[\n      classes.icon,\n      `icon--${props.name}`,\n      {\n        [classes.standard]: props.size === 'standard',\n        [classes.dense]: props.size === 'dense',\n        [classes.small]: props.size === 'small',\n        [classes.large]: props.size === 'large',\n      },\n    ]\"\n    data-test=\"stash-integration-icon\"\n    :src=\"`${computedStaticPath}/spritesheet.svg`\"\n    :title=\"props.title\"\n    :transform-source=\"transformSvgSource\"\n  />\n</template>\n\n<style module>\n  .icon {\n    display: inline-block;\n    fill: currentcolor;\n    vertical-align: middle;\n  }\n\n  .standard {\n    height: 24px;\n    min-height: 24px;\n    min-width: 24px;\n    width: 24px;\n  }\n\n  .dense {\n    height: 20px;\n    min-height: 20px;\n    min-width: 20px;\n    width: 20px;\n  }\n\n  .small {\n    height: 14px;\n    min-height: 14px;\n    min-width: 14px;\n    width: 14px;\n  }\n\n  .large {\n    height: 32px;\n    min-height: 32px;\n    min-width: 32px;\n    width: 32px;\n  }\n</style>\n"],"names":["integrationIconNames","props","__props","classes","useCssModule","stashOptions","inject","computedStaticPath","computed","transformSvgSource","svgElem","useNode","symbolNode"],"mappings":";;;;AAAO,MAAMA,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;;;;;;;;;ACoBE,UAAMC,IAAQC,GAMRC,IAAUC,EAAA,GACVC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAqBC,EAAS,MAC3BP,EAAM,eAAcI,KAAA,gBAAAA,EAAc,WAC1C,GAKKI,IAAqB,CAACC,MAAwB;AAClD,UAAI,CAACA;AACH,eAAOA;AAGT,YAAMC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,aAAa,QAAQ,IAAIV,EAAM,IAAI,EAAE;AAG7C,YAAMW,IAAaF,EAAQ,cAAc,IAAIT,EAAM,IAAI,EAAE;AAGzD,aAAKW,KAaLF,EAAQ,gBAAgBE,GAAYD,CAAO,GAEpCD,MAbLA,EAAQ,aAAaC,GAASD,EAAQ,UAAU,GACzCA;AAAA,IAaX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/IntegrationIcon.vue.d.ts

@@ -1,14 +1,47 @@
 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<IntegrationIconProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<IntegrationIconProps> & 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<IntegrationIconProps>, {
+id: () => string;
+size: string;
+title: string;
+staticPath: string;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IntegrationIconProps>, {
+id: () => string;
+size: string;
+title: string;
+staticPath: string;
+}>>> & Readonly<{}>, {
+title: string;
 id: string;
 size: "small" | "standard" | "dense" | "large";
-title: string;
 staticPath: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 declare type IconSize = `${IconSizes}`;