@leaflink/stash 53.4.6 → 53.4.8

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=\"flex\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"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  @layer utilities {\n    .root label {\n      padding: 8px 30px;\n      border: 1px solid var(--color-ice-500);\n      font-weight: var(--font-weight-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: var(--radius-sm);\n      border-bottom-left-radius: var(--radius-sm);\n    }\n\n    .root > div:last-child label {\n      border-top-right-radius: var(--radius-sm);\n      border-bottom-right-radius: var(--radius-sm);\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  }\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=\"my-1.5 flex flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"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  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --spacing(6);\n    }\n\n    .root label {\n      padding: --spacing(1.5) --spacing(3);\n      border: 1px solid var(--color-ice-500);\n      font-weight: var(--font-weight-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: var(--font-weight-bold);\n    }\n\n    .root input:not(:checked, :disabled) ~ label:hover {\n      border-color: var(--color-blue-500);\n    }\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=\"flex flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ '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  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --spacing(6);\n    }\n\n    .root label {\n      font-weight: var(--font-weight-medium);\n      user-select: none;\n      cursor: pointer;\n      padding: 0 --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  }\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=\"flex flex-wrap\" :class=\"classes.root\">\n    <label\n      v-for=\"option in options\"\n      :key=\"`${name}-${option.id}`\"\n      :class=\"[classes['tile-container'], { 'w-full': fullWidth }]\"\n      :for=\"`${name}-${option.id}`\"\n    >\n      <div\n        class=\"flex border\"\n        :class=\"[\n          classes['tile-header'],\n          {\n            'border-blue-500 bg-blue-100 text-ice-900': modelValue === option.value,\n            'border-ice-500 bg-ice-100 text-ice-700': modelValue !== option.value,\n          },\n        ]\"\n      >\n        <input\n          :id=\"`${name}-${option.id}`\"\n          class=\"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=\"border-x border-b\"\n        :class=\"[\n          classes['tile-body'],\n          {\n            'border-ice-500': modelValue !== option.value,\n            'border-blue-500': modelValue === option.value,\n          },\n        ]\"\n      >\n        <p class=\"m-0 text-ice-900\">{{ option.subTitle }}</p>\n        <p class=\"m-0 text-ice-700\">{{ option.subText }}</p>\n      </div>\n    </label>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --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: var(--radius-sm);\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: var(--radius-sm) var(--radius-sm) 0 0;\n      padding: --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 var(--radius-sm) var(--radius-sm);\n      background-color: var(--color-white);\n      padding: --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: var(--font-weight-medium);\n      user-select: none;\n      cursor: pointer;\n      padding: 0 --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: --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  }\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: number | 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  /**\n   * Default orientation. If the variant is `button` and the group is wider than its parent it will be displayed in a column, and this prop will be ignored.\n   *\n   * Note: This does not work with the deprecated `options` prop. Update those instances to use the `RadioNew` component and default slot.\n   */\n  orientation?: ComputedRef<'horizontal' | 'vertical'>;\n}\n","<script lang=\"ts\">\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n  import { RadioGroupOption, RadioGroupVariant, RadioGroupVariants } from './RadioGroup.types';\n\n  export * from './RadioGroup.keys';\n  export * from './RadioGroup.types';\n\n  export interface RadioGroupProps extends FieldProps {\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 group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Default orientation. If the variant is `button` and the group is wider than its parent it will be displayed in a column, and this prop will be ignored.\n     *\n     * Note: This does not work with the deprecated `options` prop. Update those instances to use the `RadioNew` component and default slot.\n     *\n     * @defaultValue 'horizontal'\n     */\n    orientation?: 'horizontal' | 'vertical';\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onMounted, onUnmounted, provide, ref, useCssModule, useTemplateRef, watchEffect } from 'vue';\n\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    fullWidth: false,\n    modelValue: undefined,\n    name: undefined,\n    options: undefined,\n    orientation: 'horizontal',\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  const classes = useCssModule();\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.isDisabled || props.disabled),\n    fullWidth: computed(() => props.fullWidth),\n    modelValue: computed(() => props.modelValue),\n    options: computed(() => props.options),\n    variant: computed(() => props.variant),\n    orientation: computed(() => internalOrientation.value),\n    update,\n  });\n\n  const internalOrientation = ref(props.orientation);\n\n  const defaultSlotClasses = computed(() => {\n    return {\n      'flex-wrap': props.variant !== 'button',\n      'gap-x-1.5 gap-y-3': props.variant === 'chip' && internalOrientation.value === 'horizontal',\n      'gap-6':\n        props.variant === 'radio' ||\n        props.variant === 'tile' ||\n        (props.variant === 'chip' && internalOrientation.value === 'vertical'),\n      'flex-col': internalOrientation.value === 'vertical',\n    };\n  });\n\n  const resizeObserver = ref<ResizeObserver | null>(null);\n  const radioGroupRef = useTemplateRef('radioGroup');\n  const radioGroupParent = computed(() => radioGroupRef.value?.$el.parentElement);\n  const radioGroupButtons = computed(() => {\n    if (props.variant !== 'button') {\n      return [];\n    }\n\n    return Array.from<HTMLElement>(radioGroupRef.value?.$el.querySelectorAll('[data-variant-button]')) || [];\n  });\n\n  function getButtonsWidth() {\n    return radioGroupButtons.value.reduce((acc, button) => {\n      const buttonWidth = button.getBoundingClientRect().width;\n      return acc + buttonWidth;\n    }, 0);\n  }\n\n  const initialTotalButtonsWidth = ref(0);\n\n  const handleResize = (entry: ResizeObserverEntry) => {\n    internalOrientation.value =\n      initialTotalButtonsWidth.value > entry.contentBoxSize[0].inlineSize ? 'vertical' : props.orientation;\n  };\n\n  onMounted(() => {\n    // If the width of the buttons is greater than the parent element,\n    // set orientation to vertical\n    if (props.variant === 'button' && !props.fullWidth) {\n      initialTotalButtonsWidth.value = getButtonsWidth();\n      resizeObserver.value = new ResizeObserver((entries) => handleResize(entries[0]));\n\n      resizeObserver.value.observe(radioGroupParent.value);\n    }\n  });\n\n  onUnmounted(() => {\n    if (props.variant === 'button' && resizeObserver.value) {\n      resizeObserver.value?.disconnect();\n    }\n  });\n\n  watchEffect(() => {\n    internalOrientation.value = props.orientation;\n  });\n</script>\n\n<template>\n  <Field\n    v-bind=\"props\"\n    ref=\"radioGroup\"\n    class=\"stash-radio-group\"\n    :class=\"classes['stash-radio-group']\"\n    data-test=\"stash-radio-group\"\n    :aria-errormessage=\"errorId\"\n    :error-id=\"errorId\"\n    :aria-invalid=\"!!props.errorText\"\n    role=\"radiogroup\"\n    fieldset\n  >\n    <slot v-if=\"props.options\">\n      <component :is=\"variantComponentsMap[props.variant]\" />\n    </slot>\n    <div v-else class=\"flex\" data-test=\"stash-radio-group|default-slot\" :class=\"defaultSlotClasses\">\n      <slot></slot>\n    </div>\n  </Field>\n</template>\n\n<style module>\n  @layer utilities {\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  }\n</style>\n"],"names":["radioGroupInjection","inject","RADIO_GROUP_INJECTION","name","disabled","fullWidth","modelValue","options","update","classes","useCssModule","_createElementBlock","_normalizeClass","_unref","_Fragment","_renderList","option","_createElementVNode","_cache","args","_toDisplayString","_hoisted_2","_hoisted_3","_hoisted_4","RadioGroupVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","props","__props","emit","__emit","e","errorId","uniqueId","provide","computed","internalOrientation","ref","defaultSlotClasses","resizeObserver","radioGroupRef","useTemplateRef","radioGroupParent","_a","radioGroupButtons","getButtonsWidth","acc","button","buttonWidth","initialTotalButtonsWidth","handleResize","entry","onMounted","entries","onUnmounted","watchEffect","_createBlock","Field","_mergeProps","_renderSlot","_ctx","_openBlock","_resolveDynamicComponent"],"mappings":"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"}
+{"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=\"flex\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"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  @layer utilities {\n    .root label {\n      padding: 8px 30px;\n      border: 1px solid var(--color-ice-500);\n      font-weight: var(--font-weight-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: var(--radius-sm);\n      border-bottom-left-radius: var(--radius-sm);\n    }\n\n    .root > div:last-child label {\n      border-top-right-radius: var(--radius-sm);\n      border-bottom-right-radius: var(--radius-sm);\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  }\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=\"my-1.5 flex flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"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  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --spacing(6);\n    }\n\n    .root label {\n      padding: --spacing(1.5) --spacing(3);\n      border: 1px solid var(--color-ice-500);\n      font-weight: var(--font-weight-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: var(--font-weight-bold);\n    }\n\n    .root input:not(:checked, :disabled) ~ label:hover {\n      border-color: var(--color-blue-500);\n    }\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=\"flex flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ '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  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --spacing(6);\n    }\n\n    .root label {\n      font-weight: var(--font-weight-medium);\n      user-select: none;\n      cursor: pointer;\n      padding: 0 --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  }\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=\"flex flex-wrap\" :class=\"classes.root\">\n    <label\n      v-for=\"option in options\"\n      :key=\"`${name}-${option.id}`\"\n      :class=\"[classes['tile-container'], { 'w-full': fullWidth }]\"\n      :for=\"`${name}-${option.id}`\"\n    >\n      <div\n        class=\"flex border\"\n        :class=\"[\n          classes['tile-header'],\n          {\n            'border-blue-500 bg-blue-100 text-ice-900': modelValue === option.value,\n            'border-ice-500 bg-ice-100 text-ice-700': modelValue !== option.value,\n          },\n        ]\"\n      >\n        <input\n          :id=\"`${name}-${option.id}`\"\n          class=\"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=\"border-x border-b\"\n        :class=\"[\n          classes['tile-body'],\n          {\n            'border-ice-500': modelValue !== option.value,\n            'border-blue-500': modelValue === option.value,\n          },\n        ]\"\n      >\n        <p class=\"m-0 text-ice-900\">{{ option.subTitle }}</p>\n        <p class=\"m-0 text-ice-700\">{{ option.subText }}</p>\n      </div>\n    </label>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --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: var(--radius-sm);\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: var(--radius-sm) var(--radius-sm) 0 0;\n      padding: --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 var(--radius-sm) var(--radius-sm);\n      background-color: var(--color-white);\n      padding: --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: var(--font-weight-medium);\n      user-select: none;\n      cursor: pointer;\n      padding: 0 --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: --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  }\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: number | 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  /**\n   * Default orientation. If the variant is `button` and the group is wider than its parent it will be displayed in a column, and this prop will be ignored.\n   *\n   * Note: This does not work with the deprecated `options` prop. Update those instances to use the `RadioNew` component and default slot.\n   */\n  orientation?: ComputedRef<'horizontal' | 'vertical'>;\n}\n","<script lang=\"ts\">\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n  import { RadioGroupOption, RadioGroupVariant, RadioGroupVariants } from './RadioGroup.types';\n\n  export * from './RadioGroup.keys';\n  export * from './RadioGroup.types';\n\n  export interface RadioGroupProps extends FieldProps {\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 group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Default orientation. If the variant is `button` and the group is wider than its parent it will be displayed in a column, and this prop will be ignored.\n     *\n     * Note: This does not work with the deprecated `options` prop. Update those instances to use the `RadioNew` component and default slot.\n     *\n     * @defaultValue 'horizontal'\n     */\n    orientation?: 'horizontal' | 'vertical';\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onMounted, onUnmounted, provide, ref, useCssModule, useTemplateRef, watchEffect } from 'vue';\n\n  import { isComponentWithEl, toComponentEl } from '../../utils/templateRefNarrowing';\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    fullWidth: false,\n    modelValue: undefined,\n    name: undefined,\n    options: undefined,\n    orientation: 'horizontal',\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  const classes = useCssModule();\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.isDisabled || props.disabled),\n    fullWidth: computed(() => props.fullWidth),\n    modelValue: computed(() => props.modelValue),\n    options: computed(() => props.options),\n    variant: computed(() => props.variant),\n    orientation: computed(() => internalOrientation.value),\n    update,\n  });\n\n  const internalOrientation = ref(props.orientation);\n\n  const defaultSlotClasses = computed(() => {\n    return {\n      'flex-wrap': props.variant !== 'button',\n      'gap-x-1.5 gap-y-3': props.variant === 'chip' && internalOrientation.value === 'horizontal',\n      'gap-6':\n        props.variant === 'radio' ||\n        props.variant === 'tile' ||\n        (props.variant === 'chip' && internalOrientation.value === 'vertical'),\n      'flex-col': internalOrientation.value === 'vertical',\n    };\n  });\n\n  const resizeObserver = ref<ResizeObserver | null>(null);\n  const radioGroupRef = useTemplateRef('radioGroup');\n  const radioGroupParent = computed(() => {\n    const comp = radioGroupRef.value;\n    return isComponentWithEl(comp) ? comp.$el.parentElement : null;\n  });\n  const radioGroupButtons = computed(() => {\n    if (props.variant !== 'button') {\n      return [];\n    }\n\n    const el = toComponentEl(radioGroupRef.value);\n    return el ? Array.from(el.querySelectorAll<HTMLElement>('[data-variant-button]')) : [];\n  });\n\n  function getButtonsWidth() {\n    return radioGroupButtons.value.reduce((acc, button) => {\n      const buttonWidth = button.getBoundingClientRect().width;\n      return acc + buttonWidth;\n    }, 0);\n  }\n\n  const initialTotalButtonsWidth = ref(0);\n\n  const handleResize = (entry: ResizeObserverEntry) => {\n    internalOrientation.value =\n      initialTotalButtonsWidth.value > entry.contentBoxSize[0].inlineSize ? 'vertical' : props.orientation;\n  };\n\n  onMounted(() => {\n    // If the width of the buttons is greater than the parent element,\n    // set orientation to vertical\n    if (props.variant === 'button' && !props.fullWidth) {\n      initialTotalButtonsWidth.value = getButtonsWidth();\n      resizeObserver.value = new ResizeObserver((entries) => handleResize(entries[0]));\n\n      const parent = radioGroupParent.value;\n      if (parent) resizeObserver.value.observe(parent);\n    }\n  });\n\n  onUnmounted(() => {\n    if (props.variant === 'button' && resizeObserver.value) {\n      resizeObserver.value?.disconnect();\n    }\n  });\n\n  watchEffect(() => {\n    internalOrientation.value = props.orientation;\n  });\n</script>\n\n<template>\n  <Field\n    v-bind=\"props\"\n    ref=\"radioGroup\"\n    class=\"stash-radio-group\"\n    :class=\"classes['stash-radio-group']\"\n    data-test=\"stash-radio-group\"\n    :aria-errormessage=\"errorId\"\n    :error-id=\"errorId\"\n    :aria-invalid=\"!!props.errorText\"\n    role=\"radiogroup\"\n    fieldset\n  >\n    <slot v-if=\"props.options\">\n      <component :is=\"variantComponentsMap[props.variant]\" />\n    </slot>\n    <div v-else class=\"flex\" data-test=\"stash-radio-group|default-slot\" :class=\"defaultSlotClasses\">\n      <slot></slot>\n    </div>\n  </Field>\n</template>\n\n<style module>\n  @layer utilities {\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  }\n</style>\n"],"names":["radioGroupInjection","inject","RADIO_GROUP_INJECTION","name","disabled","fullWidth","modelValue","options","update","classes","useCssModule","_createElementBlock","_normalizeClass","_unref","_Fragment","_renderList","option","_createElementVNode","_cache","args","_toDisplayString","_hoisted_2","_hoisted_3","_hoisted_4","RadioGroupVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","props","__props","emit","__emit","e","errorId","uniqueId","provide","computed","internalOrientation","ref","defaultSlotClasses","resizeObserver","radioGroupRef","useTemplateRef","radioGroupParent","comp","isComponentWithEl","radioGroupButtons","el","toComponentEl","getButtonsWidth","acc","button","buttonWidth","initialTotalButtonsWidth","handleResize","entry","onMounted","entries","parent","onUnmounted","_a","watchEffect","_createBlock","Field","_mergeProps","_renderSlot","_ctx","_openBlock","_resolveDynamicComponent"],"mappings":"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"}

package/dist/SearchBar.js

@@ -1,10 +1,10 @@
-import { defineComponent as C, useSlots as S, ref as i, computed as V, createBlock as h, openBlock as p, withKeys as s, normalizeClass as m, createSlots as I, withCtx as n, createCommentVNode as T, createVNode as d, unref as K, renderSlot as L } from "vue";
+import { defineComponent as C, useSlots as S, ref as i, computed as V, createBlock as h, openBlock as m, withKeys as s, normalizeClass as p, createSlots as I, withCtx as r, createCommentVNode as T, createVNode as u, unref as K, renderSlot as L } from "vue";
 import { t as f } from "./locale.js";
 import b from "./Button.js";
 import v from "./Icon.js";
 import W from "./Input.js";
 import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const N = /* @__PURE__ */ C({
+const M = /* @__PURE__ */ C({
   name: "ll-search-bar",
   __name: "SearchBar",
   props: {
@@ -16,35 +16,35 @@ const N = /* @__PURE__ */ C({
     hintText: { default: void 0 }
   },
   emits: ["search", "update:model-value"],
-  setup(_, { emit: k }) {
-    const e = _, l = k, g = S(), a = i(e.modelValue), u = i(), x = V(() => a.value ? 0 : -1);
+  setup(_, { emit: y }) {
+    const e = _, l = y, k = S(), a = i(e.modelValue), d = i(), g = V(() => a.value ? 0 : -1);
     function o() {
       e.isLoading || e.isWorking || l("search", a.value);
     }
     function c() {
-      var r, t;
-      a.value = "", l("search", ""), l("update:model-value", ""), (t = (r = u.value) == null ? void 0 : r.inputEl) == null || t.focus();
+      var n, t;
+      a.value = "", l("search", ""), l("update:model-value", ""), (t = (n = d.value) == null ? void 0 : n.inputEl) == null || t.focus();
     }
-    function y() {
+    function x() {
       l("update:model-value", a.value);
     }
-    return (r, t) => (p(), h(W, {
+    return (n, t) => (m(), h(W, {
       ref_key: "stashInputRef",
-      ref: u,
+      ref: d,
       modelValue: a.value,
       "onUpdate:modelValue": [
         t[0] || (t[0] = (B) => a.value = B),
-        y
+        x
       ],
-      class: m(["stash-search-bar", [{ "stash-search-bar--value": !!a.value }]]),
+      class: p(["stash-search-bar", [{ "stash-search-bar--value": !!a.value }]]),
       label: e.label,
       placeholder: e.placeholder,
       "hint-text": e.hintText,
       "data-test": "stash-search-bar",
       onKeyup: s(o, ["enter"])
     }, I({
-      append: n(() => [
-        a.value ? (p(), h(b, {
+      append: r(() => [
+        a.value ? (m(), h(b, {
           key: 0,
           class: "stash-search-bar__clear-button",
           disabled: e.isLoading,
@@ -55,13 +55,13 @@ const N = /* @__PURE__ */ C({
             s(c, ["space"])
           ]
         }, {
-          default: n(() => [
-            d(v, { name: "close" })
+          default: r(() => [
+            u(v, { name: "close" })
           ]),
           _: 1
         }, 8, ["disabled"])) : T("", !0),
-        d(b, {
-          tabindex: x.value,
+        u(b, {
+          tabindex: g.value,
           "data-test": "stash-search-bar|search-button",
           disabled: e.isLoading,
           class: "stash-search-bar__search-button",
@@ -71,9 +71,9 @@ const N = /* @__PURE__ */ C({
             s(o, ["space"])
           ]
         }, {
-          default: n(() => [
-            d(v, {
-              class: m({ "animate-spin": e.isWorking }),
+          default: r(() => [
+            u(v, {
+              class: p({ "animate-spin": e.isWorking }),
               name: e.isWorking ? "loading-empty" : "search"
             }, null, 8, ["class", "name"])
           ]),
@@ -82,17 +82,19 @@ const N = /* @__PURE__ */ C({
       ]),
       _: 2
     }, [
-      K(g).hint ? {
+      K(k).hint ? {
         name: "hint",
-        fn: n(() => [
-          L(r.$slots, "hint", {}, void 0, !0)
+        fn: r(() => [
+          L(n.$slots, "hint")
         ]),
         key: "0"
       } : void 0
     ]), 1032, ["modelValue", "class", "label", "placeholder", "hint-text"]));
   }
-}), q = /* @__PURE__ */ w(N, [["__scopeId", "data-v-fb06db50"]]);
+}), N = {}, R = {
+  $style: N
+}, A = /* @__PURE__ */ w(M, [["__cssModules", R]]);
 export {
-  q as default
+  A as default
 };
 //# sourceMappingURL=SearchBar.js.map

package/dist/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Input from '../Input/Input.vue';\n\n  export interface SearchBarProps {\n    /**\n     * Indicates loading activity (for example async request) that should prevent search\n     */\n    isLoading?: boolean;\n\n    /**\n     * Sets a visual indicator that the search is active\n     */\n    isWorking?: boolean;\n\n    /**\n     * The search term\n     */\n    modelValue?: string;\n\n    /**\n     * Placeholder text for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Label for search bar\n     */\n    label?: string;\n\n    /**\n     * Text below the input\n     */\n    hintText?: string;\n  }\n\n  defineOptions({\n    name: 'll-search-bar',\n  });\n\n  const props = withDefaults(defineProps<SearchBarProps>(), {\n    isLoading: false,\n    isWorking: false,\n    modelValue: '',\n    placeholder: t('ll.search'),\n    label: t('ll.search'),\n    hintText: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when searching or clearing the search input\n     */\n    (e: 'search', searchTerm: string): void;\n\n    /**\n     * Emitted when the search term changes\n     */\n    (e: 'update:model-value', searchTerm: string): void;\n  }>();\n\n  const slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  const searchTabIndex = computed(() => (searchTerm.value ? 0 : -1));\n\n  function onSearch() {\n    if (props.isLoading || props.isWorking) {\n      return;\n    }\n    emit('search', searchTerm.value);\n  }\n\n  function clearSearchTerm() {\n    searchTerm.value = '';\n    emit('search', '');\n    emit('update:model-value', '');\n\n    stashInputRef.value?.inputEl?.focus();\n  }\n\n  function handleChange() {\n    emit('update:model-value', searchTerm.value);\n  }\n</script>\n\n<template>\n  <Input\n    ref=\"stashInputRef\"\n    v-model=\"searchTerm\"\n    class=\"stash-search-bar\"\n    :class=\"[{ 'stash-search-bar--value': !!searchTerm }]\"\n    :label=\"props.label\"\n    :placeholder=\"props.placeholder\"\n    :hint-text=\"props.hintText\"\n    data-test=\"stash-search-bar\"\n    @update:model-value=\"handleChange\"\n    @keyup.enter=\"onSearch\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        class=\"stash-search-bar__clear-button\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n        @keyup.enter=\"clearSearchTerm\"\n        @keyup.space=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        :tabindex=\"searchTabIndex\"\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        class=\"stash-search-bar__search-button\"\n        @click=\"onSearch\"\n        @keyup.enter=\"onSearch\"\n        @keyup.space=\"onSearch\"\n      >\n        <Icon :class=\"{ 'animate-spin': props.isWorking }\" :name=\"props.isWorking ? 'loading-empty' : 'search'\" />\n      </Button>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Overrides the Input hint-text prop -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Input>\n</template>\n\n<style scoped>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .stash-search-bar :deep(input) {\n      text-overflow: ellipsis;\n    }\n\n    .stash-search-bar--value :deep(input) {\n      padding-right: 72px;\n    }\n\n    .stash-search-bar :deep(input):hover {\n      border: 1px solid var(--color-blue-500);\n    }\n\n    .stash-search-bar :deep(.stash-input-append) {\n      display: flex;\n      justify-content: flex-end;\n      width: 72px; /* double the the default width of 36px */\n      overflow: visible;\n    }\n\n    .stash-search-bar__clear-button {\n      color: var(--color-ice-700);\n      height: --spacing(9);\n      min-width: --spacing(9);\n      width: --spacing(9);\n      background: none;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &:focus-visible {\n        outline: none;\n        box-shadow: none;\n\n        & svg {\n          border-radius: var(--radius-sm);\n\n          @apply ring-4 ring-blue-500/15;\n        }\n      }\n    }\n\n    .stash-search-bar__clear-button:disabled {\n      color: var(--color-ice-500);\n      cursor: default;\n    }\n\n    .stash-search-bar__search-button {\n      border-bottom-left-radius: 0;\n      border-top-left-radius: 0;\n      height: --spacing(9);\n      min-width: --spacing(9);\n      width: --spacing(9);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &:focus {\n        box-shadow: none;\n      }\n\n      &:disabled {\n        border-color: var(--color-ice-500);\n      }\n\n      &:hover {\n        background-color: var(--color-blue-600);\n      }\n\n      &:active {\n        background-color: var(--color-blue-700);\n      }\n\n      &:focus-visible {\n        outline: none;\n        border: 1px solid var(--color-blue-900);\n        /* Simulating a bigger border so the design does not break */\n        box-shadow:\n          inset 0 0 0 1px var(--color-blue-900),\n          0 0 0 4px rgb(0 114 240 / 15%); /* Unfortunatelly, we have to use RGBA to make the shadow transparent, this is blue-500 */\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","searchTerm","ref","stashInputRef","searchTabIndex","computed","onSearch","clearSearchTerm","_b","_a","handleChange","_createBlock","Input","$event","_normalizeClass","Button","_createVNode","Icon","_unref","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GASRC,IAAOC,GAYPC,IAAQC,EAAA,GACRC,IAAaC,EAAIP,EAAM,UAAU,GACjCQ,IAAgBD,EAAA,GAEhBE,IAAiBC,EAAS,MAAOJ,EAAW,QAAQ,IAAI,EAAG;AAEjE,aAASK,IAAW;AAClB,MAAIX,EAAM,aAAaA,EAAM,aAG7BE,EAAK,UAAUI,EAAW,KAAK;AAAA,IACjC;AAEA,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBJ,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAE7BW,KAAAC,IAAAN,EAAc,UAAd,gBAAAM,EAAqB,YAArB,QAAAD,EAA8B;AAAA,IAChC;AAEA,aAASE,IAAe;AACtB,MAAAb,EAAK,sBAAsBI,EAAW,KAAK;AAAA,IAC7C;2BAIAU,EAwCQC,GAAA;AAAA,eAvCF;AAAA,MAAJ,KAAIT;AAAA,kBACKF,EAAA;AAAA;+BAAAA,EAAU,QAAAY;AAAA,QAOEH;AAAA,MAAA;AAAA,MANrB,OAAKI,EAAA,CAAC,oBAAkB,CAAA,EAAA,2BAAA,CAAA,CACgBb,EAAA,MAAA,CAAU,CAAA,CAAA;AAAA,MACjD,OAAON,EAAM;AAAA,MACb,aAAaA,EAAM;AAAA,MACnB,aAAWA,EAAM;AAAA,MAClB,aAAU;AAAA,MAET,WAAaW,GAAQ,CAAA,OAAA,CAAA;AAAA,IAAA;MAEX,UACT,MAUS;AAAA,QATDL,EAAA,cADRU,EAUSI,GAAA;AAAA;UARP,OAAM;AAAA,UACL,UAAUpB,EAAM;AAAA,UACjB,aAAU;AAAA,UACT,SAAOY;AAAA,UACP,SAAK;AAAA,cAAQA,GAAe,CAAA,OAAA,CAAA;AAAA,cACfA,GAAe,CAAA,OAAA,CAAA;AAAA,UAAA;AAAA;qBAE7B,MAAqB;AAAA,YAArBS,EAAqBC,GAAA,EAAf,MAAK,SAAO;AAAA,UAAA;;;QAEpBD,EAUSD,GAAA;AAAA,UATN,UAAUX,EAAA;AAAA,UACX,aAAU;AAAA,UACT,UAAUT,EAAM;AAAA,UACjB,OAAM;AAAA,UACL,SAAOW;AAAA,UACP,SAAK;AAAA,cAAQA,GAAQ,CAAA,OAAA,CAAA;AAAA,cACRA,GAAQ,CAAA,OAAA,CAAA;AAAA,UAAA;AAAA;qBAEtB,MAA0G;AAAA,YAA1GU,EAA0GC,GAAA;AAAA,cAAnG,OAAKH,EAAA,EAAA,gBAAoBnB,EAAM,WAAS;AAAA,cAAK,MAAMA,EAAM,YAAS,kBAAA;AAAA,YAAA;;;;;;;MAG7DuB,EAAAnB,CAAA,EAAM;cAAO;AAAA,cAE3B,MAAyB;AAAA,UAAzBoB,EAAyBC,EAAA,QAAA,QAAA,CAAA,GAAA,QAAA,EAAA;AAAA,QAAA;;;;;;"}
+{"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Input from '../Input/Input.vue';\n\n  export interface SearchBarProps {\n    /**\n     * Indicates loading activity (for example async request) that should prevent search\n     */\n    isLoading?: boolean;\n\n    /**\n     * Sets a visual indicator that the search is active\n     */\n    isWorking?: boolean;\n\n    /**\n     * The search term\n     */\n    modelValue?: string;\n\n    /**\n     * Placeholder text for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Label for search bar\n     */\n    label?: string;\n\n    /**\n     * Text below the input\n     */\n    hintText?: string;\n  }\n\n  defineOptions({\n    name: 'll-search-bar',\n  });\n\n  const props = withDefaults(defineProps<SearchBarProps>(), {\n    isLoading: false,\n    isWorking: false,\n    modelValue: '',\n    placeholder: t('ll.search'),\n    label: t('ll.search'),\n    hintText: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when searching or clearing the search input\n     */\n    (e: 'search', searchTerm: string): void;\n\n    /**\n     * Emitted when the search term changes\n     */\n    (e: 'update:model-value', searchTerm: string): void;\n  }>();\n\n  const slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  const searchTabIndex = computed(() => (searchTerm.value ? 0 : -1));\n\n  function onSearch() {\n    if (props.isLoading || props.isWorking) {\n      return;\n    }\n    emit('search', searchTerm.value);\n  }\n\n  function clearSearchTerm() {\n    searchTerm.value = '';\n    emit('search', '');\n    emit('update:model-value', '');\n\n    stashInputRef.value?.inputEl?.focus();\n  }\n\n  function handleChange() {\n    emit('update:model-value', searchTerm.value);\n  }\n</script>\n\n<template>\n  <Input\n    ref=\"stashInputRef\"\n    v-model=\"searchTerm\"\n    class=\"stash-search-bar\"\n    :class=\"[{ 'stash-search-bar--value': !!searchTerm }]\"\n    :label=\"props.label\"\n    :placeholder=\"props.placeholder\"\n    :hint-text=\"props.hintText\"\n    data-test=\"stash-search-bar\"\n    @update:model-value=\"handleChange\"\n    @keyup.enter=\"onSearch\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        class=\"stash-search-bar__clear-button\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n        @keyup.enter=\"clearSearchTerm\"\n        @keyup.space=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        :tabindex=\"searchTabIndex\"\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        class=\"stash-search-bar__search-button\"\n        @click=\"onSearch\"\n        @keyup.enter=\"onSearch\"\n        @keyup.space=\"onSearch\"\n      >\n        <Icon :class=\"{ 'animate-spin': props.isWorking }\" :name=\"props.isWorking ? 'loading-empty' : 'search'\" />\n      </Button>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Overrides the Input hint-text prop -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Input>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    :global(:where(.stash-search-bar) input) {\n      text-overflow: ellipsis;\n    }\n\n    :global(:where(.stash-search-bar).stash-search-bar--value input) {\n      padding-right: 72px;\n    }\n\n    :global(:where(.stash-search-bar) input:hover) {\n      border: 1px solid var(--color-blue-500);\n    }\n\n    :global(:where(.stash-search-bar) .stash-input-append) {\n      display: flex;\n      justify-content: flex-end;\n      width: 72px; /* double the the default width of 36px */\n      overflow: visible;\n    }\n\n    :global(:where(.stash-search-bar) .stash-search-bar__clear-button) {\n      color: var(--color-ice-700);\n      height: --spacing(9);\n      min-width: --spacing(9);\n      width: --spacing(9);\n      background: none;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &:focus-visible {\n        outline: none;\n        box-shadow: none;\n\n        & svg {\n          border-radius: var(--radius-sm);\n\n          @apply ring-4 ring-blue-500/15;\n        }\n      }\n    }\n\n    :global(:where(.stash-search-bar) .stash-search-bar__clear-button:disabled) {\n      color: var(--color-ice-500);\n      cursor: default;\n    }\n\n    :global(:where(.stash-search-bar) .stash-search-bar__search-button) {\n      border-bottom-left-radius: 0;\n      border-top-left-radius: 0;\n      height: --spacing(9);\n      min-width: --spacing(9);\n      width: --spacing(9);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &:focus {\n        box-shadow: none;\n      }\n\n      &:disabled {\n        border-color: var(--color-ice-500);\n      }\n\n      &:hover {\n        background-color: var(--color-blue-600);\n      }\n\n      &:active {\n        background-color: var(--color-blue-700);\n      }\n\n      &:focus-visible {\n        outline: none;\n        border: 1px solid var(--color-blue-900);\n        /* Simulating a bigger border so the design does not break */\n        box-shadow:\n          inset 0 0 0 1px var(--color-blue-900),\n          0 0 0 4px rgb(0 114 240 / 15%); /* Unfortunatelly, we have to use RGBA to make the shadow transparent, this is blue-500 */\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","searchTerm","ref","stashInputRef","searchTabIndex","computed","onSearch","clearSearchTerm","_b","_a","handleChange","_createBlock","Input","$event","_normalizeClass","Button","_createVNode","Icon","_unref","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GASRC,IAAOC,GAYPC,IAAQC,EAAA,GACRC,IAAaC,EAAIP,EAAM,UAAU,GACjCQ,IAAgBD,EAAA,GAEhBE,IAAiBC,EAAS,MAAOJ,EAAW,QAAQ,IAAI,EAAG;AAEjE,aAASK,IAAW;AAClB,MAAIX,EAAM,aAAaA,EAAM,aAG7BE,EAAK,UAAUI,EAAW,KAAK;AAAA,IACjC;AAEA,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBJ,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAE7BW,KAAAC,IAAAN,EAAc,UAAd,gBAAAM,EAAqB,YAArB,QAAAD,EAA8B;AAAA,IAChC;AAEA,aAASE,IAAe;AACtB,MAAAb,EAAK,sBAAsBI,EAAW,KAAK;AAAA,IAC7C;2BAIAU,EAwCQC,GAAA;AAAA,eAvCF;AAAA,MAAJ,KAAIT;AAAA,kBACKF,EAAA;AAAA;+BAAAA,EAAU,QAAAY;AAAA,QAOEH;AAAA,MAAA;AAAA,MANrB,OAAKI,EAAA,CAAC,oBAAkB,CAAA,EAAA,2BAAA,CAAA,CACgBb,EAAA,MAAA,CAAU,CAAA,CAAA;AAAA,MACjD,OAAON,EAAM;AAAA,MACb,aAAaA,EAAM;AAAA,MACnB,aAAWA,EAAM;AAAA,MAClB,aAAU;AAAA,MAET,WAAaW,GAAQ,CAAA,OAAA,CAAA;AAAA,IAAA;MAEX,UACT,MAUS;AAAA,QATDL,EAAA,cADRU,EAUSI,GAAA;AAAA;UARP,OAAM;AAAA,UACL,UAAUpB,EAAM;AAAA,UACjB,aAAU;AAAA,UACT,SAAOY;AAAA,UACP,SAAK;AAAA,cAAQA,GAAe,CAAA,OAAA,CAAA;AAAA,cACfA,GAAe,CAAA,OAAA,CAAA;AAAA,UAAA;AAAA;qBAE7B,MAAqB;AAAA,YAArBS,EAAqBC,GAAA,EAAf,MAAK,SAAO;AAAA,UAAA;;;QAEpBD,EAUSD,GAAA;AAAA,UATN,UAAUX,EAAA;AAAA,UACX,aAAU;AAAA,UACT,UAAUT,EAAM;AAAA,UACjB,OAAM;AAAA,UACL,SAAOW;AAAA,UACP,SAAK;AAAA,cAAQA,GAAQ,CAAA,OAAA,CAAA;AAAA,cACRA,GAAQ,CAAA,OAAA,CAAA;AAAA,UAAA;AAAA;qBAEtB,MAA0G;AAAA,YAA1GU,EAA0GC,GAAA;AAAA,cAAnG,OAAKH,EAAA,EAAA,gBAAoBnB,EAAM,WAAS;AAAA,cAAK,MAAMA,EAAM,YAAS,kBAAA;AAAA,YAAA;;;;;;;MAG7DuB,EAAAnB,CAAA,EAAM;cAAO;AAAA,cAE3B,MAAyB;AAAA,UAAzBoB,EAAyBC,EAAA,QAAA,MAAA;AAAA,QAAA;;;;;;;;"}