@adyen/bento-vue2 1.7.0 → 1.8.0

package/dist/chunks/index.a5de5242.js

@@ -0,0 +1,130 @@
+import { defineComponent as a, provide as u, toRef as d, inject as r, ref as p, computed as o } from "vue";
+import { n as i } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { a as f } from "./button.e09d5980.js";
+import { BentoInfoIcon as m } from "../info-icon.js";
+import { B as b, a as n } from "./index.965ac1af.js";
+import { C as y } from "./copy.a85c2e9f.js";
+import { S as v } from "./search.a8055e95.js";
+import { b as h } from "./tooltip.ecd0f707.js";
+import "../assets/index42.css";
+const T = Symbol("structured list condensed style injection key"), c = Symbol("structured list labels width injection key"), S = {}, C = /* @__PURE__ */ a({
+  ...S,
+  __name: "structured-list",
+  props: {
+    /**
+     * Width of the labels container, in pixels. Default is 180 (px).
+     */
+    labelsWidth: {
+      type: Number,
+      default: 180
+    }
+  },
+  setup(s) {
+    const t = s;
+    return u(c, d(t, "labelsWidth")), { __sfc: !0, props: t };
+  }
+});
+var I = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("dl", { staticClass: "b-structured-list" }, [t._t("default")], 2);
+}, g = [], L = /* @__PURE__ */ i(
+  C,
+  I,
+  g,
+  !1,
+  null,
+  "1c65a85f",
+  null,
+  null
+);
+const P = L.exports, x = {
+  "en-US": {
+    search: "Search"
+  }
+}, B = 180, E = a({
+  i18n: { messages: x },
+  name: "bento-structured-list-item",
+  components: {
+    BentoButton: f,
+    BentoInfoIcon: m,
+    BentoTypography: b,
+    Copy: y,
+    SearchIcon: v
+  },
+  directives: { BentoTooltipDirective: h },
+  props: {
+    /**
+     * Label to display for the value
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Text to display in info icon tooltip in the label to display for the value
+     */
+    labelInfo: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Text to copy when the user clicks `Copy` icon
+     */
+    copy: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Function to trigger when user clicks `Search` icon
+     */
+    search: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * Text to display when the user hovers over `Search` icon
+     */
+    searchTooltip: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup() {
+    const s = r(T, !1), t = r(
+      c,
+      p(B)
+    ), e = o(() => s ? 130 : t.value), l = o(() => ({
+      "b-structured-list-item--condensed": s
+    })), _ = o(
+      () => s ? n.CAPTION : n.BODY
+    );
+    return {
+      // Values
+      conditionalClasses: l,
+      labelTypographyVariant: _,
+      computedLabelsWidth: e
+    };
+  }
+});
+var D = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-structured-list-item", class: t.conditionalClasses }, [e("dt", { staticClass: "b-structured-list-item__label", style: `flex-basis:${t.computedLabelsWidth}px` }, [e("bento-typography", { attrs: { variant: t.labelTypographyVariant } }, [t._v(t._s(t.label))]), t.labelInfo ? e("bento-info-icon", { staticClass: "b-structured-list-item__icon", attrs: { "tooltip-text": t.labelInfo } }) : t._e()], 1), e("dd", { staticClass: "b-structured-list-item__value" }, [t._t("default"), t.copy ? e("copy", { staticClass: "b-structured-list-item__icon", attrs: { text: t.copy } }) : t._e(), t.search ? e("bento-button", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive:top", value: t.searchTooltip ? t.searchTooltip : t.$t("search"), expression: "searchTooltip ? searchTooltip : $t('search')", arg: "top" }], staticClass: "b-structured-list-item__icon", attrs: { variant: "tertiary" }, on: { click: t.search }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [e("search-icon", { attrs: { "svg-title": t.$t("search") } })];
+  }, proxy: !0 }], null, !1, 1678634924) }) : t._e()], 2)]);
+}, N = [], $ = /* @__PURE__ */ i(
+  E,
+  D,
+  N,
+  !1,
+  null,
+  "0618b49d",
+  null,
+  null
+);
+const V = $.exports;
+export {
+  P as B,
+  T as S,
+  V as a
+};
+//# sourceMappingURL=index.a5de5242.js.map

package/dist/chunks/index.a5de5242.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.a5de5242.js","sources":["../../src/components/structured-list/structured-list.keys.ts","../../src/components/structured-list/structured-list.vue","../../src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script setup lang=\"ts\">\n    import { provide, toRef } from 'vue';\n    import { STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY } from '@/components/structured-list/structured-list.keys';\n\n    const props = defineProps({\n        /**\n         * Width of the labels container, in pixels. Default is 180 (px).\n         */\n        labelsWidth: {\n            type: Number,\n            default: 180,\n        },\n    });\n\n    provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, toRef(props, 'labelsWidth'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" type=\"Klarna\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\" :style=\"`flex-basis:${computedLabelsWidth}px`\">\n            <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : $t('search')\"\n                class=\"b-structured-list-item__icon\"\n                variant=\"tertiary\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"$t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, PropType, ref, Ref } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, BentoTypographyVariant } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Directives\n    import { BentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    const DEFAULT_LABELS_WIDTH = 180;\n\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-structured-list-item',\n        components: {\n            BentoButton,\n            BentoInfoIcon,\n            BentoTypography,\n            Copy,\n            SearchIcon,\n        },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Label to display for the value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text to display in info icon tooltip in the label to display for the value\n             */\n            labelInfo: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Text to copy when the user clicks `Copy` icon\n             */\n            copy: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Function to trigger when user clicks `Search` icon\n             */\n            search: {\n                type: Function as PropType<(event: Event) => void>,\n                default: undefined,\n            },\n            /**\n             * Text to display when the user hovers over `Search` icon\n             */\n            searchTooltip: {\n                type: String,\n                default: undefined,\n            },\n        },\n        setup() {\n            const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n            const labelsWidth = inject<Ref<number>>(\n                STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n                ref(DEFAULT_LABELS_WIDTH)\n            );\n            const computedLabelsWidth = computed(() => (isCondensed ? 130 : labelsWidth.value));\n\n            const conditionalClasses = computed(() => ({\n                'b-structured-list-item--condensed': isCondensed,\n            }));\n\n            const labelTypographyVariant = computed(() =>\n                isCondensed ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY\n            );\n\n            return {\n                // Values\n                conditionalClasses,\n                labelTypographyVariant,\n                computedLabelsWidth,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","__default__","provide","toRef","props","DEFAULT_LABELS_WIDTH","_sfc_main","defineComponent","messages","BentoButton","BentoInfoIcon","BentoTypography","Copy","SearchIcon","BentoTooltipDirective","isCondensed","inject","labelsWidth","ref","computedLabelsWidth","computed","conditionalClasses","labelTypographyVariant","BentoTypographyVariant"],"mappings":";;;;;;;;;AAAa,MAAAA,IAAA,OAAA,+CAAA,GACAC,IAAA,OAAA,4CAAA,GC8CTC,IAAA,CAAA;;;;;;;;;;;;;;AA3BA,WAAAC,EAAAF,GAAAG,EAAAC,GAAA,aAAA,CAAA;;;;;;;;;;;;;;;;;;;;GCyBJC,IAAA,KA2BAC,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,QAAA;AAEA,UAAAC,IAAAC,EAAAjB,GAAA,EAAA,GACAkB,IAAAD;AAAA,MAAAhB;AAAA,MACAkB,EAAAb,CAAA;AAAA,IACA,GAEAc,IAAAC,EAAA,MAAAL,IAAA,MAAAE,EAAA,KAAA,GAEAI,IAAAD,EAAA,OAAA;AAAA,MAAA,qCAAAL;AAAA,IACA,EAAA,GAGAO,IAAAF;AAAA,MAAA,MAAAL,IAAAQ,EAAA,UAAAA,EAAA;AAAA,IACA;AAGA,WAAA;AAAA;AAAA,MAAA,oBAAAF;AAAA,MAEA,wBAAAC;AAAA,MACA,qBAAAH;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}