@ironsource/shared-ui 1.4.0-rc.10

package/components/includeExclude/IncludeExcludeAppHeader.vue.d.ts

@@ -0,0 +1,88 @@
+import { Application } from './includeExcludeMocks.js';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    imgProps?: unknown;
+    optionProps?: unknown;
+    showSubTitle?: boolean;
+    clearable?: boolean;
+    searchPlaceholder?: string;
+    showIcon?: boolean;
+    keyField?: string;
+    subTitleKey?: string;
+    searchAttribute?: string;
+    applications: Application[];
+    titleText: string;
+    modelValue: Application[];
+    distanceOffset?: number;
+    skiddingOffset?: number;
+    isLoading?: boolean;
+}>, {
+    showSubTitle: boolean;
+    searchPlaceholder: string;
+    showIcon: boolean;
+    titleText: string;
+    keyField: string;
+    subTitleKey: string;
+    searchAttribute: string;
+    imgProps: any;
+    optionProps: any;
+    distanceOffset: number;
+    skiddingOffset: number;
+    isLoading: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    imgProps?: unknown;
+    optionProps?: unknown;
+    showSubTitle?: boolean;
+    clearable?: boolean;
+    searchPlaceholder?: string;
+    showIcon?: boolean;
+    keyField?: string;
+    subTitleKey?: string;
+    searchAttribute?: string;
+    applications: Application[];
+    titleText: string;
+    modelValue: Application[];
+    distanceOffset?: number;
+    skiddingOffset?: number;
+    isLoading?: boolean;
+}>, {
+    showSubTitle: boolean;
+    searchPlaceholder: string;
+    showIcon: boolean;
+    titleText: string;
+    keyField: string;
+    subTitleKey: string;
+    searchAttribute: string;
+    imgProps: any;
+    optionProps: any;
+    distanceOffset: number;
+    skiddingOffset: number;
+    isLoading: boolean;
+}>>>, {
+    searchAttribute: string;
+    searchPlaceholder: string;
+    titleText: string;
+    distanceOffset: number;
+    skiddingOffset: number;
+    keyField: string;
+    showSubTitle: boolean;
+    showIcon: boolean;
+    subTitleKey: string;
+    imgProps: any;
+    optionProps: any;
+    isLoading: boolean;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/includeExclude/IncludeExcludeAppHeader.vue.js

@@ -0,0 +1,119 @@
+import { defineComponent, ref, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createSlots, createTextVNode, toDisplayString } from 'vue';
+import Icon from '../icon/Icon.vue.js';
+import AppIcon from '../appIcon/AppIcon.vue.js';
+import { useSearch } from '../../composables/useSearch.vue.js';
+import IncludeExclude from './IncludeExclude.vue.js';
+import IncludeExcludeOption from './IncludeExcludeOption.vue.js';
+import IncludeExcludeAppTrigger from './IncludeExcludeAppTrigger.vue.js';
+/* empty css                                                                         */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+/* empty css                                                            *//* empty css                                                                          */
+import "../../IncludeExcludeAppHeader.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "IncludeExcludeAppHeader",
+  props: {
+    imgProps: { default: void 0 },
+    optionProps: { default: void 0 },
+    showSubTitle: { type: Boolean, default: false },
+    clearable: { type: Boolean },
+    searchPlaceholder: { default: "Search" },
+    showIcon: { type: Boolean, default: true },
+    keyField: { default: "appKey" },
+    subTitleKey: { default: "appKey" },
+    searchAttribute: { default: "name" },
+    applications: null,
+    titleText: { default: "Application" },
+    modelValue: null,
+    distanceOffset: { default: 4 },
+    skiddingOffset: { default: 4 },
+    isLoading: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const search = useSearch({ searchAttribute: props.searchAttribute });
+    const selectedOptionRef = ref(props.modelValue);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(IncludeExclude), mergeProps(_ctx.$attrs, {
+        modelValue: selectedOptionRef.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedOptionRef.value = $event),
+        loading: __props.isLoading,
+        "distance-offset": __props.distanceOffset,
+        "skidding-offset": __props.skiddingOffset,
+        "title-text": __props.titleText,
+        "is-on-top": true,
+        options: __props.applications,
+        "has-subtitle": __props.showSubTitle,
+        "search-placeholder": __props.searchPlaceholder,
+        "on-search": unref(search),
+        "key-field": __props.keyField
+      }), {
+        trigger: withCtx(() => [
+          createVNode(unref(IncludeExcludeAppTrigger), {
+            selected: selectedOptionRef.value,
+            options: __props.applications,
+            loading: __props.isLoading
+          }, null, 8, ["selected", "options", "loading"])
+        ]),
+        option: withCtx(({ option, showCheckbox }) => [
+          createVNode(unref(IncludeExcludeOption), {
+            option,
+            "show-checkbox": showCheckbox,
+            "title-text": option?.name,
+            subtitle: __props.showSubTitle ? option[__props.subTitleKey] : ""
+          }, createSlots({
+            image: withCtx(() => [
+              createVNode(unref(AppIcon), mergeProps(__props.imgProps, {
+                src: option.icon,
+                size: __props.showSubTitle ? "lg" : "md"
+              }), null, 16, ["src", "size"])
+            ]),
+            default: withCtx(() => [
+              createTextVNode(" " + toDisplayString(option.name), 1)
+            ]),
+            _: 2
+          }, [
+            __props.showIcon ? {
+              name: "icon-start",
+              fn: withCtx(() => [
+                createVNode(unref(Icon), {
+                  name: option.platform.toLowerCase()
+                }, null, 8, ["name"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["option", "show-checkbox", "title-text", "subtitle"])
+        ]),
+        selected_option: withCtx(({ option }) => [
+          createVNode(unref(IncludeExcludeOption), {
+            "show-checkbox": false,
+            clearable: true,
+            option,
+            subtitle: __props.showSubTitle ? option[__props.subTitleKey] : "",
+            "title-text": option?.name
+          }, createSlots({
+            image: withCtx(() => [
+              createVNode(unref(AppIcon), mergeProps(__props.imgProps, {
+                src: option.icon,
+                size: __props.showSubTitle ? "lg" : "md"
+              }), null, 16, ["src", "size"])
+            ]),
+            _: 2
+          }, [
+            __props.showIcon ? {
+              name: "icon-start",
+              fn: withCtx(() => [
+                createVNode(unref(Icon), {
+                  name: option.platform.toLowerCase()
+                }, null, 8, ["name"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["option", "subtitle", "title-text"])
+        ]),
+        _: 1
+      }, 16, ["modelValue", "loading", "distance-offset", "skidding-offset", "title-text", "options", "has-subtitle", "search-placeholder", "on-search", "key-field"]);
+    };
+  }
+});
+var IncludeExcludeAppHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-03cefd76"]]);
+
+export { IncludeExcludeAppHeader as default };

package/components/includeExclude/IncludeExcludeAppTrigger.vue.d.ts

@@ -0,0 +1,37 @@
+import { Application } from '@/components/includeExclude/includeExcludeMocks';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    selected?: Application[];
+    options?: Application[];
+    loading: boolean;
+}>, {
+    selected: any;
+    options: any;
+    loading: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    selected?: Application[];
+    options?: Application[];
+    loading: boolean;
+}>, {
+    selected: any;
+    options: any;
+    loading: boolean;
+}>>>, {
+    loading: boolean;
+    selected: Application[];
+    options: Application[];
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/includeExclude/IncludeExcludeAppTrigger.vue.js

@@ -0,0 +1,173 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createElementVNode, createBlock, createCommentVNode, createVNode, withCtx, createTextVNode, toDisplayString } from 'vue';
+import Icon from '../icon/Icon.vue.js';
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../typography/Text.vue.js';
+/* empty css                                                                    *//* empty css                                                                */import IconButton from '../button/IconButton.vue.js';
+import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
+/* empty css                                                                      */import AppIcon from '../appIcon/AppIcon.vue.js';
+/* empty css                                                                          */
+import "../../IncludeExcludeAppTrigger.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = { class: "include-exclude-trigger-left-image" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "IncludeExcludeAppTrigger",
+  props: {
+    selected: { default: null },
+    options: { default: null },
+    loading: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const allTitle = "All apps selected";
+    const title = computed(() => {
+      if (allMode.value) {
+        return allTitle;
+      }
+      if (singleApp.value) {
+        return `${firstSelection.value?.name}`;
+      }
+      return `${selectedSize.value} apps selected`;
+    });
+    const osIcon = computed(() => {
+      if (!allMode.value) {
+        return firstSelection.value.platform.toLowerCase();
+      }
+      return null;
+    });
+    const appImage = computed(() => {
+      if (!selectedSize.value || !optionsSize.value) {
+        return "";
+      }
+      return firstSelection.value?.icon;
+    });
+    const description = computed(() => {
+      if (props.loading) {
+        return "";
+      }
+      if (singleApp.value) {
+        return firstSelection.value.appKey;
+      }
+      if (allMode.value) {
+        return allDescription.value;
+      }
+      if (selectedSize.value <= 0) {
+        return `${firstSelection.value?.name}`;
+      }
+      return `${firstSelection.value?.name} and ${selectedSize.value - 1}+`;
+    });
+    const selectedSize = computed(() => {
+      return props.selected?.length || 0;
+    });
+    const optionsSize = computed(() => {
+      return props.options?.length || 0;
+    });
+    const singleApp = computed(() => {
+      return selectedSize.value === 1;
+    });
+    const allMode = computed(() => {
+      return props.loading || optionsSize.value === selectedSize.value || !selectedSize.value;
+    });
+    const allDescription = computed(() => {
+      if (optionsSize.value === 1) {
+        return `${firstOption.value?.name}`;
+      }
+      return `${firstOption.value?.name} and ${optionsSize.value - 1}+`;
+    });
+    const firstSelection = computed(() => {
+      return props.selected?.[0];
+    });
+    const firstOption = computed(() => {
+      return props.options?.[0];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["include-exclude-trigger-container", {
+          "include-exclude-trigger-container--with-icons": unref(selectedSize) > 0 || unref(allMode)
+        }])
+      }, [
+        renderSlot(_ctx.$slots, "left-image", {}, () => [
+          createElementVNode("div", _hoisted_1, [
+            unref(appImage) ? (openBlock(), createBlock(unref(AppIcon), {
+              key: 0,
+              size: "xl",
+              src: unref(appImage)
+            }, null, 8, ["src"])) : (openBlock(), createBlock(unref(Icon), {
+              key: 1,
+              class: "trigger-icon",
+              "font-size": "2rem",
+              name: "widgetsz"
+            }))
+          ])
+        ], true),
+        renderSlot(_ctx.$slots, "left-icon", {}, () => [
+          unref(osIcon) ? (openBlock(), createBlock(unref(Icon), {
+            key: 0,
+            class: "include-exclude-trigger-left-icon",
+            name: unref(osIcon),
+            "font-size": "md"
+          }, null, 8, ["name"])) : createCommentVNode("", true)
+        ], true),
+        createElementVNode("div", {
+          class: normalizeClass(["include-exclude-trigger-middle-section", {
+            "include-exclude-trigger-middle-section--single": unref(singleApp),
+            "include-exclude-trigger-middle-section--loading": __props.loading || !__props.options?.length
+          }])
+        }, [
+          renderSlot(_ctx.$slots, "title", {}, () => [
+            createVNode(unref(_sfc_main$1), { text: unref(title) }, {
+              default: withCtx(() => [
+                createVNode(unref(Text), {
+                  strong: "",
+                  class: "title",
+                  "is-truncated": "",
+                  size: "sm"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(title)), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["text"])
+          ], true),
+          renderSlot(_ctx.$slots, "description", {}, () => [
+            createElementVNode("div", null, [
+              createVNode(unref(_sfc_main$1), { text: unref(description) }, {
+                default: withCtx(() => [
+                  createVNode(unref(Text), {
+                    class: "include-exclude-trigger-description",
+                    size: "xs",
+                    "is-truncated": ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(description)), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["text"])
+            ])
+          ], true)
+        ], 2),
+        renderSlot(_ctx.$slots, "right-icon", {}, () => [
+          createVNode(unref(IconButton), {
+            class: "include-exclude-trigger-right-icon",
+            theme: "third"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(Icon), {
+                "font-size": "sm",
+                name: "angle-down"
+              })
+            ]),
+            _: 1
+          })
+        ], true)
+      ], 2);
+    };
+  }
+});
+var IncludeExcludeAppTrigger = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-103f63a6"]]);
+
+export { IncludeExcludeAppTrigger as default };

package/components/includeExclude/IncludeExcludeChipFilter.vue.d.ts

@@ -0,0 +1,116 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    imgProps?: unknown;
+    optionProps?: unknown;
+    showSubTitle?: boolean;
+    clearable?: boolean;
+    searchPlaceholder?: string;
+    showIcon?: boolean;
+    keyField?: string;
+    subTitleKey?: string;
+    searchAttribute?: string;
+    options: unknown[];
+    titleText: string;
+    modelValue: unknown[];
+    distanceOffset?: number;
+    skiddingOffset?: number;
+    isLoading?: boolean;
+    iconKey?: string;
+    textKey?: string;
+    showImage?: boolean;
+    triggerProps: unknown;
+    triggerTextFunc?: (option: unknown) => string;
+}>, {
+    showSubTitle: boolean;
+    searchPlaceholder: string;
+    showIcon: boolean;
+    titleText: string;
+    keyField: string;
+    subTitleKey: string;
+    searchAttribute: string;
+    iconKey: string;
+    textKey: string;
+    imgProps: any;
+    optionProps: any;
+    distanceOffset: number;
+    skiddingOffset: number;
+    isLoading: boolean;
+    showImage: boolean;
+    clearable: boolean;
+    triggerTextFunc: () => "";
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: unknown[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    imgProps?: unknown;
+    optionProps?: unknown;
+    showSubTitle?: boolean;
+    clearable?: boolean;
+    searchPlaceholder?: string;
+    showIcon?: boolean;
+    keyField?: string;
+    subTitleKey?: string;
+    searchAttribute?: string;
+    options: unknown[];
+    titleText: string;
+    modelValue: unknown[];
+    distanceOffset?: number;
+    skiddingOffset?: number;
+    isLoading?: boolean;
+    iconKey?: string;
+    textKey?: string;
+    showImage?: boolean;
+    triggerProps: unknown;
+    triggerTextFunc?: (option: unknown) => string;
+}>, {
+    showSubTitle: boolean;
+    searchPlaceholder: string;
+    showIcon: boolean;
+    titleText: string;
+    keyField: string;
+    subTitleKey: string;
+    searchAttribute: string;
+    iconKey: string;
+    textKey: string;
+    imgProps: any;
+    optionProps: any;
+    distanceOffset: number;
+    skiddingOffset: number;
+    isLoading: boolean;
+    showImage: boolean;
+    clearable: boolean;
+    triggerTextFunc: () => "";
+}>>> & {
+    "onUpdate:modelValue"?: (val: unknown[]) => any;
+}, {
+    searchAttribute: string;
+    searchPlaceholder: string;
+    clearable: boolean;
+    titleText: string;
+    distanceOffset: number;
+    skiddingOffset: number;
+    keyField: string;
+    showSubTitle: boolean;
+    showIcon: boolean;
+    subTitleKey: string;
+    imgProps: any;
+    optionProps: any;
+    isLoading: boolean;
+    iconKey: string;
+    textKey: string;
+    showImage: boolean;
+    triggerTextFunc: (option: unknown) => string;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/includeExclude/IncludeExcludeChipFilter.vue.js

@@ -0,0 +1,155 @@
+import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, isRef, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString, createSlots, createElementVNode } from 'vue';
+import Icon from '../icon/Icon.vue.js';
+import Chip from '../chip/Chip.vue.js';
+import { useSearch } from '../../composables/useSearch.vue.js';
+import IncludeExclude from './IncludeExclude.vue.js';
+import IncludeExcludeOption from './IncludeExcludeOption.vue.js';
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+/* empty css                                                                  *//* empty css                                                                    *//* empty css                                                                *//* empty css                                                                    */import 'floating-vue';
+/* empty css                                                                               *//* empty css                                                      *//* empty css                                                                      *//* empty css                                                                  *//* empty css                                                                          *//* empty css                                                                         *//* empty css                                                                          */
+import "../../IncludeExcludeChipFilter.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["src"];
+const _hoisted_2 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "IncludeExcludeChipFilter",
+  props: {
+    imgProps: { default: void 0 },
+    optionProps: { default: void 0 },
+    showSubTitle: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    searchPlaceholder: { default: "Search" },
+    showIcon: { type: Boolean, default: true },
+    keyField: { default: "name" },
+    subTitleKey: { default: "" },
+    searchAttribute: { default: "name" },
+    options: null,
+    titleText: { default: "" },
+    modelValue: null,
+    distanceOffset: { default: -8 },
+    skiddingOffset: { default: 0 },
+    isLoading: { type: Boolean, default: false },
+    iconKey: { default: "icon" },
+    textKey: { default: "name" },
+    showImage: { type: Boolean, default: true },
+    triggerProps: null,
+    triggerTextFunc: { type: Function, default: () => "" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const search = useSearch({ searchAttribute: props.searchAttribute });
+    const selectedOptionRef = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+      }
+    });
+    const chipText = computed(() => props.triggerTextFunc(selectedOptionRef));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(IncludeExclude), mergeProps(_ctx.$attrs, {
+        modelValue: unref(selectedOptionRef),
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(selectedOptionRef) ? selectedOptionRef.value = $event : null),
+        loading: __props.isLoading,
+        "distance-offset": __props.distanceOffset,
+        "skidding-offset": __props.skiddingOffset,
+        "title-text": __props.titleText,
+        "is-on-top": true,
+        options: __props.options,
+        "has-subtitle": __props.showSubTitle,
+        "search-placeholder": __props.searchPlaceholder,
+        "on-search": unref(search),
+        "key-field": __props.keyField
+      }), {
+        trigger: withCtx(() => [
+          renderSlot(_ctx.$slots, "input", {}, () => [
+            createVNode(unref(Chip), mergeProps({
+              selected: !!__props.modelValue.length
+            }, __props.triggerProps, {
+              clearable: __props.clearable,
+              onCleared: _cache[0] || (_cache[0] = ($event) => selectedOptionRef.value = [])
+            }), {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(chipText)), 1)
+              ]),
+              _: 1
+            }, 16, ["selected", "clearable"])
+          ], true)
+        ]),
+        option: withCtx(({ option, showCheckbox }) => [
+          renderSlot(_ctx.$slots, "option", {}, () => [
+            createVNode(unref(IncludeExcludeOption), {
+              option,
+              "show-checkbox": showCheckbox,
+              subtitle: __props.showSubTitle ? option[__props.subTitleKey] : "",
+              "title-text": option[__props.textKey]
+            }, createSlots({ _: 2 }, [
+              __props.showImage ? {
+                name: "image",
+                fn: withCtx(() => [
+                  createElementVNode("img", mergeProps({
+                    class: ["option-image", {
+                      "option-image-single-line": !__props.showSubTitle,
+                      "option-image-multi-lines": __props.showSubTitle
+                    }]
+                  }, __props.imgProps, {
+                    src: option[__props.iconKey],
+                    alt: ""
+                  }), null, 16, _hoisted_1)
+                ]),
+                key: "0"
+              } : void 0,
+              __props.showIcon ? {
+                name: "icon-start",
+                fn: withCtx(() => [
+                  createVNode(unref(Icon), {
+                    name: option[__props.iconKey].toLowerCase()
+                  }, null, 8, ["name"])
+                ]),
+                key: "1"
+              } : void 0
+            ]), 1032, ["option", "show-checkbox", "subtitle", "title-text"])
+          ], true)
+        ]),
+        selected_option: withCtx(({ option }) => [
+          createVNode(unref(IncludeExcludeOption), {
+            "show-checkbox": false,
+            clearable: true,
+            option,
+            "title-text": option[__props.textKey],
+            subtitle: __props.showSubTitle ? option[__props.subTitleKey] : ""
+          }, createSlots({ _: 2 }, [
+            __props.showImage ? {
+              name: "image",
+              fn: withCtx(() => [
+                createElementVNode("img", mergeProps({
+                  class: ["option-image", {
+                    "option-image-single-line": !__props.showSubTitle,
+                    "option-image-multi-lines": __props.showSubTitle
+                  }]
+                }, __props.imgProps, {
+                  src: option[__props.iconKey]
+                }), null, 16, _hoisted_2)
+              ]),
+              key: "0"
+            } : void 0,
+            __props.showIcon ? {
+              name: "icon-start",
+              fn: withCtx(() => [
+                createVNode(unref(Icon), {
+                  name: option[__props.iconKey].toLowerCase()
+                }, null, 8, ["name"])
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["option", "title-text", "subtitle"])
+        ]),
+        _: 3
+      }, 16, ["modelValue", "loading", "distance-offset", "skidding-offset", "title-text", "options", "has-subtitle", "search-placeholder", "on-search", "key-field"]);
+    };
+  }
+});
+var IncludeExcludeChipFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a97a34d2"]]);
+
+export { IncludeExcludeChipFilter as default };