@leaflink/stash 52.0.2 → 53.0.0

package/dist/SectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.js","sources":["../src/components/SectionHeader/SectionHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  interface SectionHeaderProps {\n    /**\n     * The text label for the action button\n     */\n    actionLabel?: string;\n    /**\n     * The icon name for the action button\n     */\n    actionIcon?: IconName;\n    /**\n     * If the action button should be a router link, this is where it will link to.\n     */\n    to?: RouteLocationRaw;\n  }\n\n  const props = withDefaults(defineProps<SectionHeaderProps>(), {\n    actionLabel: 'View All',\n    actionIcon: 'arrow-right',\n    to: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the action button is clicked. Not emitted if the action button is a router link.\n     */\n    actionEvent: [];\n  }>();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    return 'button';\n  });\n  const actionRootAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n    return {};\n  });\n</script>\n<template>\n  <div class=\"stash-section-header\">\n    <div\n      class=\"stash-section-header__content tw-flex-wrap tw-items-center tw-justify-between tw-px-6 tw-py-3 md:tw-flex\"\n      data-test=\"stash-section-header|content\"\n    >\n      <div data-test=\"stash-section-header|title\">\n        <h2>\n          <!-- @slot Header content -->\n          <slot></slot>\n        </h2>\n      </div>\n      <component\n        :is=\"is\"\n        v-bind=\"actionRootAttrs\"\n        data-test=\"stash-section-header|action\"\n        class=\"stash-section-header__action tw-flex tw-items-center tw-gap-3 max-md:tw-pt-3\"\n        @click=\"\n          () => {\n            if (!props.to) {\n              emit('actionEvent');\n            }\n          }\n        \"\n      >\n        <span class=\"stash-section-header__action-label tw-m-0 tw-text-ice-900\">\n          {{ props.actionLabel }}\n        </span>\n\n        <span\n          class=\"stash-section-header__action-icon tw-size-6 tw-items-center tw-rounded-full tw-bg-ice-200 tw-p-[2px] tw-text-ice-900\"\n        >\n          <Icon :name=\"props.actionIcon\" size=\"dense\" />\n        </span>\n      </component>\n    </div>\n    <div class=\"stash-section-header__divider tw-h-px tw-bg-ice-200\" />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","is","computed","actionRootAttrs"],"mappings":";;;;;;;;;;;;;;AAsBE,UAAMA,IAAQC,GAMRC,IAAOC,GAOPC,IAAKC,EAAS,MACdL,EAAM,KACD,gBAGF,QACR,GACKM,IAAkBD,EAAS,MAC3BL,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAGP,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SectionHeader.js","sources":["../src/components/SectionHeader/SectionHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  interface SectionHeaderProps {\n    /**\n     * The text label for the action button\n     */\n    actionLabel?: string;\n    /**\n     * The icon name for the action button\n     */\n    actionIcon?: IconName;\n    /**\n     * If the action button should be a router link, this is where it will link to.\n     */\n    to?: RouteLocationRaw;\n  }\n\n  const props = withDefaults(defineProps<SectionHeaderProps>(), {\n    actionLabel: 'View All',\n    actionIcon: 'arrow-right',\n    to: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the action button is clicked. Not emitted if the action button is a router link.\n     */\n    actionEvent: [];\n  }>();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    return 'button';\n  });\n  const actionRootAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n    return {};\n  });\n</script>\n<template>\n  <div class=\"stash-section-header\">\n    <div\n      class=\"stash-section-header__content flex-wrap items-center justify-between px-6 py-3 md:flex\"\n      data-test=\"stash-section-header|content\"\n    >\n      <div data-test=\"stash-section-header|title\">\n        <h2>\n          <!-- @slot Header content -->\n          <slot></slot>\n        </h2>\n      </div>\n      <component\n        :is=\"is\"\n        v-bind=\"actionRootAttrs\"\n        data-test=\"stash-section-header|action\"\n        class=\"stash-section-header__action flex items-center gap-3 max-md:pt-3\"\n        @click=\"\n          () => {\n            if (!props.to) {\n              emit('actionEvent');\n            }\n          }\n        \"\n      >\n        <span class=\"stash-section-header__action-label m-0 text-ice-900\">\n          {{ props.actionLabel }}\n        </span>\n\n        <span\n          class=\"stash-section-header__action-icon size-6 items-center rounded-full bg-ice-200 p-[2px] text-ice-900\"\n        >\n          <Icon :name=\"props.actionIcon\" size=\"dense\" />\n        </span>\n      </component>\n    </div>\n    <div class=\"stash-section-header__divider h-px bg-ice-200\" />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","is","computed","actionRootAttrs"],"mappings":";;;;;;;;;;;;;;AAsBE,UAAMA,IAAQC,GAMRC,IAAOC,GAOPC,IAAKC,EAAS,MACdL,EAAM,KACD,gBAGF,QACR,GACKM,IAAkBD,EAAS,MAC3BL,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAGP,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}