{"version":3,"file":"3VBi2MsW.js","sources":["../../../../types/components/collapse.ts","../../../../components/uikit/collapse/Item.vue","../../../../components/uikit/collapse/index.vue"],"sourcesContent":["import { InjectionKey, Ref, ComputedRef } from 'vue';\n\nexport type TName = string;\nexport type TModel = TName | TName[];\n\ninterface CollapseContext {\n  activeNames: Ref<TName[]>\n  handleItemClick: (name: string) => void\n  disable?: ComputedRef<boolean>\n  wide?: boolean\n}\n\nexport const collapseKey: InjectionKey<CollapseContext> = Symbol('collapseContextKey');\n","<template>\n  <div\n    :class=\"{\n      'osk-collapse-item': true,\n      'osk-collapse-item_wide': isWide,\n      'osk-collapse-item_small': small,\n    }\"\n  >\n    <div\n      v-if=\"title || slots.title\"\n      class=\"osk-collapse-item__title\"\n      @click=\"handleLabelClick\"\n    >\n      <UikitIcon\n        v-if=\"icon\"\n        :name=\"icon\"\n        :size=\"small ? 'm' : 'l'\"\n        class=\"osk-collapse-item__title-icon\"\n      />\n\n      <div\n        class=\"osk-collapse-item__title-text\"\n      >\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </div>\n\n      <UikitIcon\n        v-if=\"(!$collapse || !$collapse.disable?.value) && !isWide\"\n        name=\"ChevronDown\"\n        size=\"m\"\n        color=\"grey\"\n        :class=\"{\n          'osk-collapse-item__title-arrow': true,\n          'osk-collapse-item__title-arrow_active': isActive,\n        }\"\n      />\n\n      <div\n        v-if=\"isWide\"\n        :class=\"{\n          'osk-collapse-item__plus': true,\n          'osk-collapse-item__plus_active': isActive,\n        }\"\n      >\n        &nbsp;\n      </div>\n    </div>\n\n    <UikitTransitionCollapse\n      class=\"osk-collapse-item__content\"\n      :show=\"isActive\"\n    >\n      <slot />\n    </UikitTransitionCollapse>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { TIconNames } from '~/assets/icons';\n\nimport { collapseKey } from '~/types/components/collapse';\n\nconst props = defineProps<{\n  title?: string\n  name?: string\n  icon?: TIconNames\n  small?: boolean\n}>();\n\nconst $collapse = inject(collapseKey);\n\nconst slots = useSlots();\n\nconst onlyItemActive = ref(false);\n\nconst nameComp = computed(() => props.name ?? String(Math.floor(Math.random() * 10000)));\nconst isWide = computed(() => {\n  if (!$collapse) return false;\n\n  return $collapse.wide;\n});\nconst isActive = computed(() => {\n  if (!$collapse) return onlyItemActive.value;\n  if ($collapse.disable?.value) return true;\n\n  return $collapse?.activeNames.value.includes(nameComp.value);\n});\n\nfunction handleLabelClick() {\n  if (!$collapse) {\n    onlyItemActive.value = !onlyItemActive.value;\n    return;\n  }\n\n  if ($collapse.disable?.value) return;\n\n  $collapse.handleItemClick(nameComp.value);\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import \"~/assets/scss/settings/index\";\n\n.osk-collapse-item {\n  &__title {\n    display: flex;\n    align-items: center;\n    font-size: $font-size-subheading;\n    line-height: $line-height-subheading-2;\n    cursor: pointer;\n    padding: $indent-compact 0;\n  }\n\n  &__title-icon {\n    margin-right: $indent-medium;\n  }\n\n  &__title-arrow {\n    margin-left: auto;\n    transition: transform linear 0.3s;\n\n    &_active {\n      transform: rotate(180deg)\n    }\n  }\n\n  &_wide {\n    border-top: 1px solid $grey-3;\n\n    &:last-child {\n      border-bottom: 1px solid $grey-3;\n    }\n\n    & > .osk-collapse-item__title {\n      @include font-style($font-size-heading, $line-height-heading, $font-weight-bold);\n      padding: $indent-mmedium 0;\n    }\n  }\n\n  &__plus {\n    position: relative;\n    width: 18px;\n    height: 18px;\n    margin-left: auto;\n    padding: 2px;\n    transform: translateX(-1px);\n\n    &:after {\n      content: '';\n      width: 14px;\n      height: 2px;\n      background: #000;\n      border-radius: 100px;\n      overflow: hidden;\n      position: absolute;\n      top: 50%;\n      left: 2px;\n      transform: translateY(-50%);\n    }\n\n    &:before {\n      content: '';\n      width: 2px;\n      height: 14px;\n      background: #000;\n      border-radius: 100px;\n      overflow: hidden;\n      position: absolute;\n      left: 50%;\n      top: 2px;\n      opacity: 1;\n      transform: translateX(-50%);\n      transition: all linear .2s;\n    }\n\n    &_active {\n      &:before {\n        transform: translateX(-50%) rotate(90deg);\n        opacity: 0;\n      }\n    }\n  }\n\n  &_small {\n    .osk-collapse-item__title {\n      padding: 0;\n    }\n\n    .osk-collapse-item__title-text {\n      font-size: 14px;\n      font-weight: 500;\n      line-height: normal;\n    }\n\n    .osk-collapse-item__title-icon {\n      margin-right: 4px;\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"osk-collapse\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { isArrayEquals } from '~/utils/extra';\nimport { collapseKey, TName, TModel } from '~/types/components/collapse';\n\nconst props = withDefaults(defineProps<{\n  modelValue?: TModel\n  accordion?: boolean\n  disable?: boolean\n  wide?: boolean\n}>(), {\n  modelValue: () => ([] as TName[]),\n});\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', value: TModel): void\n  (e: 'itemClick', value: TName, isActive: boolean): void\n}>();\n\nconst activeNames = ref(getNames());\nconst disableComp = computed(() => !!props.disable);\n\nfunction handleItemClick(name: TName) {\n  const index = activeNames.value.indexOf(name);\n\n  if (props.accordion) {\n    const value = index > -1 ? '' : name;\n\n    activeNames.value[0] = value;\n    emits('itemClick', name, activeNames.value.includes(name));\n    emits('update:modelValue', value);\n    return;\n  }\n\n  if (index > -1) {\n    activeNames.value.splice(index, 1);\n  } else {\n    activeNames.value.push(name);\n  }\n\n  emits('itemClick', name, activeNames.value.includes(name));\n  emits('update:modelValue', activeNames.value);\n}\n\nfunction getNames() {\n  const { modelValue } = props;\n\n  return Array.isArray(modelValue) ? [...modelValue] : [modelValue];\n}\n\nwatch(() => props.modelValue, (value) => {\n  if (props.accordion && activeNames.value[0] !== value) {\n    activeNames.value = getNames();\n\n    return;\n  }\n\n  if (Array.isArray(value) && !isArrayEquals(activeNames.value, value)) {\n    activeNames.value = getNames();\n  }\n}, { deep: true });\n\nprovide(collapseKey, {\n  activeNames,\n  handleItemClick,\n  disable: disableComp,\n  wide: props.wide,\n});\n</script>\n"],"names":["collapseKey","props","__props","$collapse","inject","slots","useSlots","onlyItemActive","ref","nameComp","computed","isWide","isActive","_a","handleLabelClick","emits","__emit","activeNames","getNames","disableComp","handleItemClick","name","index","value","modelValue","watch","isArrayEquals","provide"],"mappings":"6iBAYa,MAAAA,EAA6C,OAAO,oBAAoB,8HCoDrF,MAAMC,EAAQC,EAORC,EAAYC,EAAOJ,CAAW,EAE9BK,EAAQC,IAERC,EAAiBC,EAAI,EAAK,EAE1BC,EAAWC,EAAS,IAAMT,EAAM,MAAQ,OAAO,KAAK,MAAM,KAAK,OAAW,EAAA,GAAK,CAAC,CAAC,EACjFU,EAASD,EAAS,IACjBP,EAEEA,EAAU,KAFM,EAGxB,EACKS,EAAWF,EAAS,IAAM,OAC9B,OAAKP,GACDU,EAAAV,EAAU,UAAV,MAAAU,EAAmB,MAAc,GAE9BV,GAAA,YAAAA,EAAW,YAAY,MAAM,SAASM,EAAS,OAH/BF,EAAe,KAGqB,CAC5D,EAED,SAASO,GAAmB,OAC1B,GAAI,CAACX,EAAW,CACCI,EAAA,MAAQ,CAACA,EAAe,MACvC,MACF,EAEIM,EAAAV,EAAU,UAAV,MAAAU,EAAmB,OAEbV,EAAA,gBAAgBM,EAAS,KAAK,CAC1C,mpCCzFA,MAAMR,EAAQC,EASRa,EAAQC,EAKRC,EAAcT,EAAIU,EAAA,CAAU,EAC5BC,EAAcT,EAAS,IAAM,CAAC,CAACT,EAAM,OAAO,EAElD,SAASmB,EAAgBC,EAAa,CACpC,MAAMC,EAAQL,EAAY,MAAM,QAAQI,CAAI,EAE5C,GAAIpB,EAAM,UAAW,CACb,MAAAsB,EAAQD,EAAQ,GAAK,GAAKD,EAEpBJ,EAAA,MAAM,CAAC,EAAIM,EACvBR,EAAM,YAAaM,EAAMJ,EAAY,MAAM,SAASI,CAAI,CAAC,EACzDN,EAAM,oBAAqBQ,CAAK,EAChC,MACF,CAEID,EAAQ,GACEL,EAAA,MAAM,OAAOK,EAAO,CAAC,EAErBL,EAAA,MAAM,KAAKI,CAAI,EAG7BN,EAAM,YAAaM,EAAMJ,EAAY,MAAM,SAASI,CAAI,CAAC,EACnDN,EAAA,oBAAqBE,EAAY,KAAK,CAC9C,CAEA,SAASC,GAAW,CACZ,KAAA,CAAE,WAAAM,CAAe,EAAAvB,EAEhB,OAAA,MAAM,QAAQuB,CAAU,EAAI,CAAC,GAAGA,CAAU,EAAI,CAACA,CAAU,CAClE,CAEA,OAAAC,EAAM,IAAMxB,EAAM,WAAasB,GAAU,CACvC,GAAItB,EAAM,WAAagB,EAAY,MAAM,CAAC,IAAMM,EAAO,CACrDN,EAAY,MAAQC,IAEpB,MACF,CAEI,MAAM,QAAQK,CAAK,GAAK,CAACG,EAAcT,EAAY,MAAOM,CAAK,IACjEN,EAAY,MAAQC,IACtB,EACC,CAAE,KAAM,EAAA,CAAM,EAEjBS,EAAQ3B,EAAa,CACnB,YAAAiB,EACA,gBAAAG,EACA,QAASD,EACT,KAAMlB,EAAM,IAAA,CACb"}