{"version":3,"file":"UiSwitch.1da990ad.js","sources":["../../../../components/global/ui/UiSwitch.vue"],"sourcesContent":["<template>\n  <ul :class=\"['ui-switch', { 'is-disabled': disabled }]\">\n    <li\n      v-for=\"(option, index) in options\"\n      :key=\"`option-${index}`\"\n      class=\"ui-switch__option\"\n      :class=\"{ 'is-active': option.value === internalValue }\"\n    >\n      <input\n        :id=\"generateId(option)\"\n        v-model=\"internalValue\"\n        class=\"ui-switch__input\"\n        :disabled=\"disabled\"\n        :value=\"option.value\"\n        :name=\"name\"\n        type=\"radio\"\n      />\n      <label class=\"ui-switch__label\" :class=\"{ active: !disabled }\" :for=\"generateId(option)\">\n        {{ option.label }}\n      </label>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\" setup>\nimport { PropType, ref, toRefs, watch } from 'vue';\n\ntype SwitchValue = string | number | boolean;\n\ninterface SwitchOption {\n  label: string;\n  value: SwitchValue;\n}\n\nconst props = defineProps({\n  options: {\n    type: Array as PropType<SwitchOption[]>,\n    required: true,\n  },\n  modelValue: {\n    type: [String, Number, Boolean] as PropType<SwitchValue>,\n    default: null,\n  },\n  disabled: Boolean,\n  name: {\n    type: String,\n    default: 'switch',\n  },\n});\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst { modelValue, options } = toRefs(props);\nconst internalValue = ref(modelValue.value || options.value[0].value);\n\nwatch(modelValue, (val) => {\n  internalValue.value = val;\n});\n\nwatch(internalValue, (val) => {\n  emit('update:modelValue', val);\n});\n\nconst generateId = (option: SwitchOption): string => {\n  return ['switch', props.name, option.label]\n    .filter((s) => s)\n    .join('-')\n    .replace(/\\s+/g, '-');\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.ui-switch {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--dark-pink);\n  border: var(--input-text-border-width) solid var(--dark-pink);\n  border-radius: rem(30);\n\n  &.is-disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  &__input {\n    @include visually-hidden;\n  }\n\n  &__option {\n    --option-margin: 3px;\n\n    width: 100%;\n    margin: var(--option-margin);\n    border-radius: rem(100);\n    cursor: pointer;\n    text-align: center;\n\n    &.is-active {\n      background: var(--primary);\n      color: var(--dark-pink);\n    }\n\n    &:first-child {\n      margin: var(--option-margin) 0 var(--option-margin) var(--option-margin);\n    }\n\n    &:last-child {\n      margin: var(--option-margin) var(--option-margin) var(--option-margin) 0;\n    }\n  }\n\n  &__label {\n    display: block;\n    cursor: pointer;\n    white-space: nowrap;\n    padding: rem(12);\n    font-weight: 500;\n    @include mobile {\n      padding: rem(8);\n      font-size: rem(14);\n    }\n    @include tablet {\n      font-size: rem(15);\n    }\n    @include desktop {\n      font-size: rem(16);\n    }\n  }\n}\n</style>\n"],"names":["modelValue","options","toRefs","props","internalValue","ref","watch","val","emit","generateId","option"],"mappings":"udAoDM,CAAE,WAAAA,EAAY,QAAAC,CAAQ,EAAIC,EAAOC,CAAK,EACtCC,EAAgBC,EAAIL,EAAW,OAASC,EAAQ,MAAM,CAAC,EAAE,KAAK,EAE9DK,EAAAN,EAAaO,GAAQ,CACzBH,EAAc,MAAQG,CAAA,CACvB,EAEKD,EAAAF,EAAgBG,GAAQ,CAC5BC,EAAK,oBAAqBD,CAAG,CAAA,CAC9B,EAEK,MAAAE,EAAcC,GACX,CAAC,SAAUP,EAAM,KAAMO,EAAO,KAAK,EACvC,OAAQ,GAAM,CAAC,EACf,KAAK,GAAG,EACR,QAAQ,OAAQ,GAAG"}