@leaflink/stash 49.3.3 → 49.3.5

package/dist/RadioGroup.js.map

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

package/dist/SearchBar.js

@@ -12,7 +12,7 @@ import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "lodash-es/isNil";
 import "./utils/i18n.js";
 import "./constants.js";
-import "./Field.vue_vue_type_script_setup_true_lang-3ea26741.js";
+import "./Field.vue_vue_type_script_setup_true_lang-fded4f75.js";
 import "./Label.vue_vue_type_script_setup_true_lang-b6ba2f02.js";
 const R = /* @__PURE__ */ V({
   name: "ll-search-bar",

package/dist/Select.js

@@ -11,7 +11,7 @@ import { DEBOUNCE as We, KEY_CODES as E } from "./constants.js";
 import Xe from "./directives/clickoutside.js";
 import { D as Ye } from "./MenusPlugin-9288029a.js";
 import ie from "./Chip.js";
-import { _ as Je } from "./Field.vue_vue_type_script_setup_true_lang-3ea26741.js";
+import { _ as Je } from "./Field.vue_vue_type_script_setup_true_lang-fded4f75.js";
 import z from "./Icon.js";
 import { _ as Qe } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";

package/dist/SelectStatus.js

@@ -23,7 +23,7 @@ import "./directives/clickoutside.js";
 import "./MenusPlugin-9288029a.js";
 import "./Chip.js";
 import "./utils/colorScheme.js";
-import "./Field.vue_vue_type_script_setup_true_lang-3ea26741.js";
+import "./Field.vue_vue_type_script_setup_true_lang-fded4f75.js";
 import "./Label.vue_vue_type_script_setup_true_lang-b6ba2f02.js";
 import "./locale.js";
 const N = { class: "tw-mr-6 tw-truncate" }, D = {

package/dist/Table.js

@@ -1,16 +1,16 @@
-import { defineComponent as C, inject as g, computed as o, provide as H, watchEffect as N, openBlock as p, createElementBlock as L, normalizeClass as i, unref as c, normalizeStyle as I, createElementVNode as f, renderSlot as y, createBlock as k, withCtx as d, createVNode as n } from "vue";
+import { defineComponent as H, inject as g, computed as a, provide as N, watchEffect as L, openBlock as c, createElementBlock as I, normalizeClass as i, unref as f, normalizeStyle as A, createElementVNode as y, renderSlot as w, createBlock as k, withCtx as d, createVNode as n } from "vue";
 import "lodash-es/cloneDeep";
 import { M as E } from "./Module.keys-2cc7d830.js";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import { D as S } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
-import A from "./EmptyState.js";
-import D from "./Loading.js";
+import D from "./EmptyState.js";
+import O from "./Loading.js";
 import x from "./TableCell.js";
 import _ from "./TableRow.js";
-import { T as O } from "./Table.keys-83e4f09b.js";
-import { S as V } from "./misc-76697f61.js";
+import { T as V } from "./Table.keys-83e4f09b.js";
+import { S as J } from "./misc-76697f61.js";
 import "./locale.js";
 import "lodash-es/get";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e26c3841.js";
@@ -26,8 +26,8 @@ import "./ChevronToggle.vue_vue_type_script_setup_true_lang-fcdf0c19.js";
 import "./Button.js";
 import "./Icon.js";
 import "./Expand.vue_vue_type_script_setup_true_lang-0f236267.js";
-var J = /* @__PURE__ */ ((e) => (e.Scroll = "scroll", e.Stack = "stack", e))(J || {}), $ = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e.RoundedBottom = "rounded-bottom", e))($ || {});
-const z = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, ft = /* @__PURE__ */ C({
+var $ = /* @__PURE__ */ ((t) => (t.Scroll = "scroll", t.Stack = "stack", t))($ || {}), z = /* @__PURE__ */ ((t) => (t.None = "none", t.Rounded = "rounded", t.RoundedBottom = "rounded-bottom", t))(z || {});
+const M = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, ye = /* @__PURE__ */ H({
   __name: "Table",
   props: {
     density: { default: void 0 },
@@ -42,80 +42,83 @@ const z = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
     radius: { default: "rounded" },
     stickyHeader: { default: void 0 }
   },
-  setup(e) {
-    const t = e, {
+  setup(t) {
+    const e = t, {
       density: T,
-      variant: w,
+      variant: u,
       isEmpty: r,
       isLoading: s,
       isSelectable: b
-    } = g(S.key, S.defaults), { variant: u } = g(E.key, E.defaults), v = o(() => (u == null ? void 0 : u.value) === "table" || w.value === "table" ? "rounded-bottom" : t.radius), l = o(() => t.stickyHeader ? "scroll" : t.layout), h = o(() => {
-      var a, m;
-      return !!((a = t.stickyHeader) != null && a.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table
-      ((m = t.stickyHeader) == null ? void 0 : m.listLength) > 3);
-    }), B = o(() => {
-      var a;
+    } = g(S.key, S.defaults), { variant: m } = g(E.key, E.defaults), v = a(() => (m == null ? void 0 : m.value) === "table" || u.value === "table" ? "rounded-bottom" : e.radius), l = a(() => e.stickyHeader ? "scroll" : e.layout), B = a(() => l.value === "scroll" && u.value === "table"), h = a(() => {
+      var o, p;
+      return !!((o = e.stickyHeader) != null && o.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table
+      ((p = e.stickyHeader) == null ? void 0 : p.listLength) > 3);
+    }), C = a(() => {
+      var o;
       return {
-        maxHeight: h.value ? (a = t.stickyHeader) == null ? void 0 : a.maxHeight : ""
+        maxHeight: h.value ? (o = e.stickyHeader) == null ? void 0 : o.maxHeight : ""
       };
     });
-    return H(O.key, {
-      density: o(() => t.density || T.value || V.Comfortable),
-      hasCustomExpandToggle: o(() => t.hasCustomExpandToggle),
-      hasActions: o(() => t.hasActions),
-      isExpandable: o(() => t.isExpandable),
-      isSelectable: o(
-        () => t.isSelectable && !t.isLoading && !(s != null && s.value) && !t.isEmpty && !(r != null && r.value)
+    return N(V.key, {
+      density: a(() => e.density || T.value || J.Comfortable),
+      hasCustomExpandToggle: a(() => e.hasCustomExpandToggle),
+      hasActions: a(() => e.hasActions),
+      isExpandable: a(() => e.isExpandable),
+      isSelectable: a(
+        () => e.isSelectable && !e.isLoading && !(s != null && s.value) && !e.isEmpty && !(r != null && r.value)
       ),
       layout: l
-    }), N(() => {
-      b && (b.value = t.isSelectable);
-    }), (a, m) => (p(), L("div", {
+    }), L(() => {
+      b && (b.value = e.isSelectable);
+    }), (o, p) => (c(), I("div", {
       class: i(["stash-table tw-relative", [
         { "tw-rounded": v.value === "rounded" },
         { "tw-rounded-b": v.value === "rounded-bottom" },
-        { "tw-border-t tw-border-ice-200": c(w) === "table" },
-        { "tw-overflow-auto tw-shadow": l.value === "scroll" },
-        { "tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow": l.value === "stack" },
-        { "tw-min-h-[300px]": h.value && !t.isLoading }
+        { "tw-border-t tw-border-ice-200": f(u) === "table" },
+        { "tw-overflow-auto": l.value === "scroll" },
+        { "tw-shadow": B.value },
+        {
+          "tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow": l.value === "stack"
+        },
+        { "tw-min-h-[300px]": h.value && !e.isLoading }
         // prevent the table from collapsing on small screen heights when the max-height is dynamic
       ]]),
       "data-test": "stash-table",
-      style: I(B.value)
+      style: A(C.value)
     }, [
-      f("table", z, [
-        f("thead", {
+      y("table", M, [
+        y("thead", {
           class: i(["tw-border-b tw-border-ice-200", {
             "tw-hidden lg:tw-table-header-group": l.value === "stack"
           }])
         }, [
-          y(a.$slots, "head")
+          w(o.$slots, "head")
         ], 2),
-        f("tbody", null, [
-          t.isLoading || c(s) ? (p(), k(_, { key: 0 }, {
+        y("tbody", null, [
+          e.isLoading || f(s) ? (c(), k(_, { key: 0 }, {
             default: d(() => [
               n(x, {
                 colspan: "100%",
                 class: i({ "tw-col-span-12": l.value === "stack" })
               }, {
                 default: d(() => [
-                  n(D)
+                  n(O)
                 ]),
                 _: 1
               }, 8, ["class"])
             ]),
             _: 1
-          })) : t.isEmpty || c(r) ? (p(), k(_, { key: 1 }, {
+          })) : e.isEmpty || f(r) ? (c(), k(_, { key: 1 }, {
             default: d(() => [
               n(x, {
                 colspan: "100%",
                 class: i({ "tw-col-span-12": l.value === "stack" })
               }, {
                 default: d(() => [
-                  y(a.$slots, "empty", {}, () => [
-                    n(A, {
+                  w(o.$slots, "empty", {}, () => [
+                    n(D, {
                       class: "tw-w-full tw-bg-white",
-                      text: t.emptyStateText
+                      text: e.emptyStateText
                     }, null, 8, ["text"])
                   ])
                 ]),
@@ -123,16 +126,16 @@ const z = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
               }, 8, ["class"])
             ]),
             _: 3
-          })) : y(a.$slots, "body", { key: 2 })
+          })) : w(o.$slots, "body", { key: 2 })
         ])
       ])
     ], 6));
   }
 });
 export {
-  J as Layout,
-  O as TABLE_INJECTION,
-  $ as TableRadius,
-  ft as default
+  $ as Layout,
+  V as TABLE_INJECTION,
+  z as TableRadius,
+  ye as default
 };
 //# sourceMappingURL=Table.js.map

package/dist/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, watchEffect } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (\n        props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n        props.stickyHeader?.listLength > 3\n      ) // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto tw-shadow': computedLayout === 'scroll' },\n      { 'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack' },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <!-- \n          tw-col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below  lg (when table elements are using display: grid ).\n          The colspan attr does the same in all other cases when the table elements are using their native table styles.\n          These are necessary in order to properly horizontally center Loading, and EmptyState \n        -->\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","props","__props","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;ACoEV,UAAMC,IAAQC,GAcR;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IACZ,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFH,EAAM,MACd,GAEKa,IAAiBD,EAAkB,MACnCZ,EAAM,eACD,WAGFA,EAAM,MACd,GAEKc,IAAwBF,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJG,IAAAf,EAAM,iBAAN,QAAAe,EAAoB;AAAA,QACpBC,IAAAhB,EAAM,iBAAN,gBAAAgB,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYL,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWE,EAAsB,SAAQC,IAAAf,EAAM,iBAAN,gBAAAe,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASP,EAAS,MAAMZ,EAAM,WAAWE,EAAgB,SAASkB,EAAe,WAAW;AAAA,MAC5F,uBAAuBR,EAAS,MAAMZ,EAAM,qBAAqB;AAAA,MACjE,YAAYY,EAAS,MAAMZ,EAAM,UAAU;AAAA,MAC3C,cAAcY,EAAS,MAAMZ,EAAM,YAAY;AAAA,MAC/C,cAAcY;AAAA,QACZ,MACEZ,EAAM,gBACN,CAACA,EAAM,aACP,EAACK,KAAA,QAAAA,EAAmB,UACpB,CAACL,EAAM,WACP,EAACI,KAAA,QAAAA,EAAiB;AAAA,MACtB;AAAA,MACA,QAAQS;AAAA,IAAA,CACT,GAEDQ,EAAY,MAAM;AAKhB,MAAIf,MACFA,EAAqB,QAAQN,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, watchEffect } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isShadowEnabled = computed<boolean>(() => {\n    return computedLayout.value === 'scroll' && dataViewVariant.value === 'table';\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (\n        props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n        props.stickyHeader?.listLength > 3\n      ) // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto': computedLayout === 'scroll' },\n      { 'tw-shadow': isShadowEnabled },\n      {\n        'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack',\n      },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <!-- \n          tw-col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below  lg (when table elements are using display: grid ).\n          The colspan attr does the same in all other cases when the table elements are using their native table styles.\n          These are necessary in order to properly horizontally center Loading, and EmptyState \n        -->\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","props","__props","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;ACoEV,UAAMC,IAAQC,GAcR;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IACZ,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFH,EAAM,MACd,GAEKa,IAAiBD,EAAkB,MACnCZ,EAAM,eACD,WAGFA,EAAM,MACd,GAEKc,IAAkBF,EAAkB,MACjCC,EAAe,UAAU,YAAYV,EAAgB,UAAU,OACvE,GAEKY,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAhB,EAAM,iBAAN,QAAAgB,EAAoB;AAAA,QACpBC,IAAAjB,EAAM,iBAAN,gBAAAiB,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAhB,EAAM,iBAAN,gBAAAgB,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMZ,EAAM,WAAWE,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMZ,EAAM,qBAAqB;AAAA,MACjE,YAAYY,EAAS,MAAMZ,EAAM,UAAU;AAAA,MAC3C,cAAcY,EAAS,MAAMZ,EAAM,YAAY;AAAA,MAC/C,cAAcY;AAAA,QACZ,MACEZ,EAAM,gBACN,CAACA,EAAM,aACP,EAACK,KAAA,QAAAA,EAAmB,UACpB,CAACL,EAAM,WACP,EAACI,KAAA,QAAAA,EAAiB;AAAA,MACtB;AAAA,MACA,QAAQS;AAAA,IAAA,CACT,GAEDS,EAAY,MAAM;AAKhB,MAAIhB,MACFA,EAAqB,QAAQN,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TextEditor.js

@@ -6,7 +6,7 @@ import { isEqual as Rr, cloneDeep as Se, merge as Zt } from "lodash-es";
 import { c as zt, g as Bi } from "./_commonjsHelpers-10dfc225.js";
 import _l from "lodash-es/uniqueId";
 import ni from "./Button.js";
-import { _ as kl } from "./Field.vue_vue_type_script_setup_true_lang-3ea26741.js";
+import { _ as kl } from "./Field.vue_vue_type_script_setup_true_lang-fded4f75.js";
 import ri from "./Icon.js";
 import { _ as Cl } from "./_plugin-vue_export-helper-dad06003.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";

package/dist/Textarea.js

@@ -1,6 +1,6 @@
 import { defineComponent as M, useAttrs as S, useSlots as k, useCssModule as H, ref as x, computed as O, watch as A, onMounted as I, nextTick as P, onBeforeUnmount as V, openBlock as $, createBlock as q, mergeProps as _, unref as u, createSlots as j, withCtx as g, createElementVNode as D, renderSlot as F } from "vue";
 import L from "lodash-es/uniqueId";
-import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-3ea26741.js";
+import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-fded4f75.js";
 import { _ as U } from "./_plugin-vue_export-helper-dad06003.js";
 import "./Label.vue_vue_type_script_setup_true_lang-b6ba2f02.js";
 import "./locale.js";