@milaboratories/uikit 2.15.37 → 2.15.38

package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMultiRef.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from \"../../types\";\nimport PlDropdownMulti from \"../PlDropdownMulti/PlDropdownMulti.vue\";\nimport { computed, useSlots } from \"vue\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: ModelRef[] | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: ModelRef[] | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<RefOption[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in a chip when a `modelValue` entry's upstream block no longer\n     * exists. Defaults to \"Upstream value removed\".\n     */\n    missingValueLabel?: string;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: \"Upstream value removed\",\n    required: false,\n    disabled: false,\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n  })),\n);\n</script>\n\n<template>\n  <PlDropdownMulti\n    v-bind=\"props\"\n    :options=\"options\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdownMulti>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAa,GAAU,EASvB,IAAQ,GAqDR,IAAU,QACd,EAAM,SAAS,KAAK,OAAS;GAC3B,OAAO,EAAI;GACX,OAAO,EAAI;GACZ,EAAE,CACJ;yBAIC,EAQkB,GARlB,EACU,GAAK;GACZ,SAAS,EAAA;GACT,uBAAkB,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAsB,EAAM;mBAEtC,EAAA,EAAK,CAAC,UAAA;SAAU;eACP,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"PlDropdownMultiRef.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from \"../../types\";\nimport PlDropdownMulti from \"../PlDropdownMulti/PlDropdownMulti.vue\";\nimport { computed, useSlots } from \"vue\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: ModelRef[] | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: ModelRef[] | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<RefOption[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in a chip when a `modelValue` entry's upstream block no longer\n     * exists. Defaults to \"Upstream value removed\".\n     */\n    missingValueLabel?: string;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: \"Upstream value removed\",\n    required: false,\n    disabled: false,\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n  })),\n);\n</script>\n\n<template>\n  <PlDropdownMulti\n    data-testid=\"pl-dropdown-multi-ref\"\n    v-bind=\"props\"\n    :options=\"options\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdownMulti>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAa,GAAU,EASvB,IAAQ,GAqDR,IAAU,QACd,EAAM,SAAS,KAAK,OAAS;GAC3B,OAAO,EAAI;GACX,OAAO,EAAI;GACZ,EAAE,CACJ;yBAIC,EASkB,GATlB,EASkB,EARhB,eAAY,yBAAuB,EAC3B,GAAK;GACZ,SAAS,EAAA;GACT,uBAAkB,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAsB,EAAM;mBAEtC,EAAA,EAAK,CAAC,UAAA;SAAU;eACP,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/PlDropdownRef/PlDropdownRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownRef.js","names":[],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when the referenced upstream block / output no longer\n     * exists. Defaults to \"Upstream value removed\".\n     */\n    missingValueLabel?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: \"Upstream value removed\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: \"small\",\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    \"ref\" in opt\n      ? ({\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>)\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlDropdownRef.js","names":[],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when the referenced upstream block / output no longer\n     * exists. Defaults to \"Upstream value removed\".\n     */\n    missingValueLabel?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: \"Upstream value removed\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: \"small\",\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    \"ref\" in opt\n      ? ({\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>)\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    data-testid=\"pl-dropdown-ref\"\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"mappings":""}

package/dist/components/PlDropdownRef/PlDropdownRef.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownRef.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"names":[],"mappings":"AA0HA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAInE;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,QAAQ,EAClC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAmLO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAtKpD;;WAEG;oBACS,CAAC,GAAG,SAAS;QACzB;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,SAAS,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;;WAGG;4BACiB,MAAM;QAC1B;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;qBACU,OAAO,GAAG,QAAQ;;;KAsHwD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;kBARG,CAAC,KAAK,IAAiB,KAAK,GAAG;;cArKvC,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;EAiLlD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlDropdownRef.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"names":[],"mappings":"AA2HA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAInE;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,QAAQ,EAClC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAqLO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAxKpD;;WAEG;oBACS,CAAC,GAAG,SAAS;QACzB;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,SAAS,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;;WAGG;4BACiB,MAAM;QAC1B;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;qBACU,OAAO,GAAG,QAAQ;;;KAwHwD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;kBARG,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAvKvC,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;EAmLlD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js

@@ -33,7 +33,7 @@ var d = /* @__PURE__ */ i({
 			value: e.ref,
 			group: e.group
 		} : e));
-		return (t, l) => (o(), n(c(e), a(f, {
+		return (t, l) => (o(), n(c(e), a({ "data-testid": "pl-dropdown-ref" }, f, {
 			options: p.value,
 			"loading-options-helper": i.loadingOptionsHelper,
 			"arrow-icon-large": i.disabled ? "link-disabled" : "link",

package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownRef.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when the referenced upstream block / output no longer\n     * exists. Defaults to \"Upstream value removed\".\n     */\n    missingValueLabel?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: \"Upstream value removed\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: \"small\",\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    \"ref\" in opt\n      ? ({\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>)\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;EAUR,IAAM,IAAa,GAAU,EASvB,IAAQ,GAoER,IAAU,QACd,EAAM,SAAS,KAAK,MAClB,SAAS,IACJ;GACC,OAAO,EAAI;GACX,OAAO,EAAI;GACX,OAAO,EAAI;GACZ,GACD,EACL,CACF;yBAIC,EAUa,EAAA,EAAA,EAVb,EACU,GAAK;GACZ,SAAS,EAAA;GACT,0BAAwB,EAAA;GACxB,oBAAkB,EAAA,WAAQ,kBAAA;GAC1B,uBAAkB,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAsB,EAAM;mBAEtC,EAAA,EAAK,CAAC,UAAA;SAAU;eACP,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"PlDropdownRef.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when the referenced upstream block / output no longer\n     * exists. Defaults to \"Upstream value removed\".\n     */\n    missingValueLabel?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: \"Upstream value removed\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: \"small\",\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    \"ref\" in opt\n      ? ({\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>)\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    data-testid=\"pl-dropdown-ref\"\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;EAUR,IAAM,IAAa,GAAU,EASvB,IAAQ,GAoER,IAAU,QACd,EAAM,SAAS,KAAK,MAClB,SAAS,IACJ;GACC,OAAO,EAAI;GACX,OAAO,EAAI;GACX,OAAO,EAAI;GACZ,GACD,EACL,CACF;yBAIC,EAWa,EAAA,EAAA,EAXb,EAWa,EAVX,eAAY,mBAAiB,EACrB,GAAK;GACZ,SAAS,EAAA;GACT,0BAAwB,EAAA;GACxB,oBAAkB,EAAA,WAAQ,kBAAA;GAC1B,uBAAkB,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAsB,EAAM;mBAEtC,EAAA,EAAK,CAAC,UAAA;SAAU;eACP,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/PlEditableTitle/PlEditableTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlEditableTitle.js","names":[],"sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from \"../../composition/useTransformedModel\";\nimport style from \"./pl-editable-title.module.scss\";\nimport { computed, onMounted, ref } from \"vue\";\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Standard input placeholder\n     */\n    placeholder?: string;\n    /**\n     * Any css `width` value (px, %), default is 80%\n     */\n    maxWidth?: string;\n    /**\n     * Fixed non-editable prefix\n     */\n    prefix?: string;\n    /**\n     * Max title length (default is 1000)\n     */\n    maxLength?: number;\n    /**\n     * Min title length\n     */\n    minLength?: number;\n    /**\n     * If true, input will be focused on mount\n     */\n    autofocus?: boolean;\n    /**\n     * A function that validates the input value.\n     * @example\n     * ```ts\n     * validate: (v: string) => {\n     *   if (v.length < 3) {\n     *     throw Error('Title must be at least 3 characters');\n     *   }\n     * }\n     * ```\n     */\n    validate?: (v: string) => unknown;\n  }>(),\n  {\n    placeholder: \"Title\",\n    maxWidth: \"80%\",\n    prefix: undefined,\n    maxLength: 1000,\n    minLength: undefined,\n    validate: undefined,\n  },\n);\n\nconst local = useTransformedModel(model, {\n  update() {\n    return false;\n  },\n  parse: (v): string => {\n    if (typeof v !== \"string\") {\n      throw Error(\"value should be a string\");\n    }\n\n    if (props.maxLength && v.length > props.maxLength) {\n      throw Error(`Max title length is ${props.maxLength} characters`);\n    }\n\n    if (props.minLength && v.length < props.minLength) {\n      throw Error(`Min title length is ${props.minLength} characters`);\n    }\n\n    if (typeof props.validate === \"function\") {\n      props.validate(v);\n    }\n\n    return v.trim();\n  },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n  maxWidth: props.maxWidth ?? \"80%\",\n}));\n\nconst save = () => {\n  model.value = local.value && !local.error ? local.value : model.value;\n  local.reset();\n};\n\nonMounted(() => {\n  if (props.autofocus) {\n    inputRef.value?.focus();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-editable-title\" :class=\"style.component\" :style=\"computedStyle\">\n    <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n      <span v-if=\"prefix\">{{ prefix.trim() }}&nbsp;</span>\n      <input\n        ref=\"inputRef\"\n        v-model=\"local.value\"\n        :placeholder=\"placeholder\"\n        @focusout=\"save\"\n        @keydown.escape=\"local.reset\"\n        @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n      />\n    </div>\n    <div v-if=\"local.error\" :class=\"style.error\">{{ local.error }}</div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlEditableTitle.js","names":[],"sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from \"../../composition/useTransformedModel\";\nimport style from \"./pl-editable-title.module.scss\";\nimport { computed, onMounted, ref } from \"vue\";\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Standard input placeholder\n     */\n    placeholder?: string;\n    /**\n     * Any css `width` value (px, %), default is 80%\n     */\n    maxWidth?: string;\n    /**\n     * Fixed non-editable prefix\n     */\n    prefix?: string;\n    /**\n     * Max title length (default is 1000)\n     */\n    maxLength?: number;\n    /**\n     * Min title length\n     */\n    minLength?: number;\n    /**\n     * If true, input will be focused on mount\n     */\n    autofocus?: boolean;\n    /**\n     * A function that validates the input value.\n     * @example\n     * ```ts\n     * validate: (v: string) => {\n     *   if (v.length < 3) {\n     *     throw Error('Title must be at least 3 characters');\n     *   }\n     * }\n     * ```\n     */\n    validate?: (v: string) => unknown;\n  }>(),\n  {\n    placeholder: \"Title\",\n    maxWidth: \"80%\",\n    prefix: undefined,\n    maxLength: 1000,\n    minLength: undefined,\n    validate: undefined,\n  },\n);\n\nconst local = useTransformedModel(model, {\n  update() {\n    return false;\n  },\n  parse: (v): string => {\n    if (typeof v !== \"string\") {\n      throw Error(\"value should be a string\");\n    }\n\n    if (props.maxLength && v.length > props.maxLength) {\n      throw Error(`Max title length is ${props.maxLength} characters`);\n    }\n\n    if (props.minLength && v.length < props.minLength) {\n      throw Error(`Min title length is ${props.minLength} characters`);\n    }\n\n    if (typeof props.validate === \"function\") {\n      props.validate(v);\n    }\n\n    return v.trim();\n  },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n  maxWidth: props.maxWidth ?? \"80%\",\n}));\n\nconst save = () => {\n  model.value = local.value && !local.error ? local.value : model.value;\n  local.reset();\n};\n\nonMounted(() => {\n  if (props.autofocus) {\n    inputRef.value?.focus();\n  }\n});\n</script>\n\n<template>\n  <div\n    class=\"pl-editable-title\"\n    :class=\"style.component\"\n    :style=\"computedStyle\"\n    data-testid=\"pl-editable-title\"\n  >\n    <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n      <span v-if=\"prefix\" data-testid=\"pl-editable-title-prefix\">{{ prefix.trim() }}&nbsp;</span>\n      <input\n        ref=\"inputRef\"\n        v-model=\"local.value\"\n        :placeholder=\"placeholder\"\n        data-testid=\"pl-editable-title-input\"\n        @focusout=\"save\"\n        @keydown.escape=\"local.reset\"\n        @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n      />\n    </div>\n    <div v-if=\"local.error\" :class=\"style.error\" data-testid=\"pl-editable-title-error\">\n      {{ local.error }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlEditableTitle/PlEditableTitle.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlEditableTitle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"names":[],"mappings":"AA4HA,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;CACnC,CAAC;AAwDJ,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAaF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAyDxD,QAAA,MAAM,YAAY;;;;;cA7JH,MAAM;iBAJH,MAAM;YAQX,MAAM;eAIH,MAAM;eAIN,MAAM;cAgBP,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO;6EAqInC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PlEditableTitle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"names":[],"mappings":"AAoIA,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;CACnC,CAAC;AAwDJ,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAaF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA6DxD,QAAA,MAAM,YAAY;;;;;cAjKH,MAAM;iBAJH,MAAM;YAQX,MAAM;eAIH,MAAM;eAIN,MAAM;cAgBP,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO;6EAyInC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlEditableTitle/PlEditableTitle.vue2.js

@@ -2,7 +2,10 @@ import { useTransformedModel as e } from "../../composition/useTransformedModel.
 import t from "./pl-editable-title.module.js";
 import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, normalizeStyle as l, onMounted as u, openBlock as d, ref as f, toDisplayString as p, unref as m, useModel as h, vModelText as g, withDirectives as _, withKeys as v } from "vue";
 //#region src/components/PlEditableTitle/PlEditableTitle.vue?vue&type=script&setup=true&lang.ts
-var y = { key: 0 }, b = ["placeholder"], x = /* @__PURE__ */ o({
+var y = {
+	key: 0,
+	"data-testid": "pl-editable-title-prefix"
+}, b = ["placeholder"], x = /* @__PURE__ */ o({
 	__name: "PlEditableTitle",
 	props: /* @__PURE__ */ s({
 		placeholder: { default: "Title" },
@@ -38,7 +41,8 @@ var y = { key: 0 }, b = ["placeholder"], x = /* @__PURE__ */ o({
 			x.autofocus && C.value?.focus();
 		}), (e, n) => (d(), i("div", {
 			class: c(["pl-editable-title", m(t).component]),
-			style: l(w.value)
+			style: l(w.value),
+			"data-testid": "pl-editable-title"
 		}, [a("div", {
 			class: c(m(t).container),
 			onClick: n[3] ||= () => C.value?.focus()
@@ -47,11 +51,13 @@ var y = { key: 0 }, b = ["placeholder"], x = /* @__PURE__ */ o({
 			ref: C,
 			"onUpdate:modelValue": n[0] ||= (e) => m(S).value = e,
 			placeholder: o.placeholder,
+			"data-testid": "pl-editable-title-input",
 			onFocusout: T,
 			onKeydown: [n[1] ||= v((...e) => m(S).reset && m(S).reset(...e), ["escape"]), n[2] ||= v((e) => e.target?.blur(), ["enter"])]
 		}, null, 40, b), [[g, m(S).value]])], 2), m(S).error ? (d(), i("div", {
 			key: 0,
-			class: c(m(t).error)
+			class: c(m(t).error),
+			"data-testid": "pl-editable-title-error"
 		}, p(m(S).error), 3)) : r("", !0)], 6));
 	}
 });

package/dist/components/PlEditableTitle/PlEditableTitle.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlEditableTitle.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from \"../../composition/useTransformedModel\";\nimport style from \"./pl-editable-title.module.scss\";\nimport { computed, onMounted, ref } from \"vue\";\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Standard input placeholder\n     */\n    placeholder?: string;\n    /**\n     * Any css `width` value (px, %), default is 80%\n     */\n    maxWidth?: string;\n    /**\n     * Fixed non-editable prefix\n     */\n    prefix?: string;\n    /**\n     * Max title length (default is 1000)\n     */\n    maxLength?: number;\n    /**\n     * Min title length\n     */\n    minLength?: number;\n    /**\n     * If true, input will be focused on mount\n     */\n    autofocus?: boolean;\n    /**\n     * A function that validates the input value.\n     * @example\n     * ```ts\n     * validate: (v: string) => {\n     *   if (v.length < 3) {\n     *     throw Error('Title must be at least 3 characters');\n     *   }\n     * }\n     * ```\n     */\n    validate?: (v: string) => unknown;\n  }>(),\n  {\n    placeholder: \"Title\",\n    maxWidth: \"80%\",\n    prefix: undefined,\n    maxLength: 1000,\n    minLength: undefined,\n    validate: undefined,\n  },\n);\n\nconst local = useTransformedModel(model, {\n  update() {\n    return false;\n  },\n  parse: (v): string => {\n    if (typeof v !== \"string\") {\n      throw Error(\"value should be a string\");\n    }\n\n    if (props.maxLength && v.length > props.maxLength) {\n      throw Error(`Max title length is ${props.maxLength} characters`);\n    }\n\n    if (props.minLength && v.length < props.minLength) {\n      throw Error(`Min title length is ${props.minLength} characters`);\n    }\n\n    if (typeof props.validate === \"function\") {\n      props.validate(v);\n    }\n\n    return v.trim();\n  },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n  maxWidth: props.maxWidth ?? \"80%\",\n}));\n\nconst save = () => {\n  model.value = local.value && !local.error ? local.value : model.value;\n  local.reset();\n};\n\nonMounted(() => {\n  if (props.autofocus) {\n    inputRef.value?.focus();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-editable-title\" :class=\"style.component\" :style=\"computedStyle\">\n    <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n      <span v-if=\"prefix\">{{ prefix.trim() }}&nbsp;</span>\n      <input\n        ref=\"inputRef\"\n        v-model=\"local.value\"\n        :placeholder=\"placeholder\"\n        @focusout=\"save\"\n        @keydown.escape=\"local.reset\"\n        @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n      />\n    </div>\n    <div v-if=\"local.error\" :class=\"style.error\">{{ local.error }}</div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAM,IAAQ,EAAmB,GAAA,aAAE,EAE7B,IAAQ,GAiDR,IAAQ,EAAoB,GAAO;GACvC,SAAS;AACP,WAAO;;GAET,QAAQ,MAAc;AACpB,QAAI,OAAO,KAAM,SACf,OAAM,MAAM,2BAA2B;AAGzC,QAAI,EAAM,aAAa,EAAE,SAAS,EAAM,UACtC,OAAM,MAAM,uBAAuB,EAAM,UAAU,aAAa;AAGlE,QAAI,EAAM,aAAa,EAAE,SAAS,EAAM,UACtC,OAAM,MAAM,uBAAuB,EAAM,UAAU,aAAa;AAOlE,WAJI,OAAO,EAAM,YAAa,cAC5B,EAAM,SAAS,EAAE,EAGZ,EAAE,MAAM;;GAElB,CAAC,EAEI,IAAW,GAAuB,EAElC,IAAgB,SAAgB,EACpC,UAAU,EAAM,YAAY,OAC7B,EAAE,EAEG,UAAa;AAEjB,GADA,EAAM,QAAQ,EAAM,SAAS,CAAC,EAAM,QAAQ,EAAM,QAAQ,EAAM,OAChE,EAAM,OAAO;;SAGf,QAAgB;AACd,GAAI,EAAM,aACR,EAAS,OAAO,OAAO;IAEzB,kBAIA,EAaM,OAAA;GAbD,OAAK,EAAA,CAAC,qBAA4B,EAAA,EAAK,CAAC,UAAS,CAAA;GAAG,OAAK,EAAE,EAAA,MAAa;MAC3E,EAUM,OAAA;GAVA,OAAK,EAAE,EAAA,EAAK,CAAC,UAAS;GAAG,SAAK,AAAA,EAAA,aAAQ,EAAA,OAAU,OAAK;MAC7C,EAAA,UAAA,GAAA,EAAZ,EAAoD,QAAA,GAAA,EAA7B,EAAA,OAAO,MAAI,CAAA,GAAK,QAAM,EAAA,IAAA,EAAA,IAAA,GAAA,EAAA,EAC7C,EAOE,SAAA;YANI;GAAJ,KAAI;4CACK,EAAK,CAAC,QAAK;GACnB,aAAa,EAAA;GACb,YAAU;GACV,WAAO,CAAA,AAAA,EAAA,OAAA,GAAA,GAAA,MAAS,EAAA,EAAK,CAAC,SAAN,EAAA,EAAK,CAAC,MAAK,GAAA,EAAA,EAAA,CAAA,SAAA,CAAA,EAAA,AAAA,EAAA,OAAA,GACX,MAAQ,EAAG,QAA6B,MAAI,EAAA,CAAA,QAAA,CAAA,CAAA;wBAJpD,EAAA,EAAK,CAAC,MAAK,CAAA,CAAA,CAAA,EAAA,EAAA,EAOb,EAAA,EAAK,CAAC,SAAA,GAAA,EAAjB,EAAoE,OAAA;;GAA3C,OAAK,EAAE,EAAA,EAAK,CAAC,MAAK;OAAK,EAAA,EAAK,CAAC,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"PlEditableTitle.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from \"../../composition/useTransformedModel\";\nimport style from \"./pl-editable-title.module.scss\";\nimport { computed, onMounted, ref } from \"vue\";\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Standard input placeholder\n     */\n    placeholder?: string;\n    /**\n     * Any css `width` value (px, %), default is 80%\n     */\n    maxWidth?: string;\n    /**\n     * Fixed non-editable prefix\n     */\n    prefix?: string;\n    /**\n     * Max title length (default is 1000)\n     */\n    maxLength?: number;\n    /**\n     * Min title length\n     */\n    minLength?: number;\n    /**\n     * If true, input will be focused on mount\n     */\n    autofocus?: boolean;\n    /**\n     * A function that validates the input value.\n     * @example\n     * ```ts\n     * validate: (v: string) => {\n     *   if (v.length < 3) {\n     *     throw Error('Title must be at least 3 characters');\n     *   }\n     * }\n     * ```\n     */\n    validate?: (v: string) => unknown;\n  }>(),\n  {\n    placeholder: \"Title\",\n    maxWidth: \"80%\",\n    prefix: undefined,\n    maxLength: 1000,\n    minLength: undefined,\n    validate: undefined,\n  },\n);\n\nconst local = useTransformedModel(model, {\n  update() {\n    return false;\n  },\n  parse: (v): string => {\n    if (typeof v !== \"string\") {\n      throw Error(\"value should be a string\");\n    }\n\n    if (props.maxLength && v.length > props.maxLength) {\n      throw Error(`Max title length is ${props.maxLength} characters`);\n    }\n\n    if (props.minLength && v.length < props.minLength) {\n      throw Error(`Min title length is ${props.minLength} characters`);\n    }\n\n    if (typeof props.validate === \"function\") {\n      props.validate(v);\n    }\n\n    return v.trim();\n  },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n  maxWidth: props.maxWidth ?? \"80%\",\n}));\n\nconst save = () => {\n  model.value = local.value && !local.error ? local.value : model.value;\n  local.reset();\n};\n\nonMounted(() => {\n  if (props.autofocus) {\n    inputRef.value?.focus();\n  }\n});\n</script>\n\n<template>\n  <div\n    class=\"pl-editable-title\"\n    :class=\"style.component\"\n    :style=\"computedStyle\"\n    data-testid=\"pl-editable-title\"\n  >\n    <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n      <span v-if=\"prefix\" data-testid=\"pl-editable-title-prefix\">{{ prefix.trim() }}&nbsp;</span>\n      <input\n        ref=\"inputRef\"\n        v-model=\"local.value\"\n        :placeholder=\"placeholder\"\n        data-testid=\"pl-editable-title-input\"\n        @focusout=\"save\"\n        @keydown.escape=\"local.reset\"\n        @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n      />\n    </div>\n    <div v-if=\"local.error\" :class=\"style.error\" data-testid=\"pl-editable-title-error\">\n      {{ local.error }}\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAM,IAAQ,EAAmB,GAAA,aAAE,EAE7B,IAAQ,GAiDR,IAAQ,EAAoB,GAAO;GACvC,SAAS;AACP,WAAO;;GAET,QAAQ,MAAc;AACpB,QAAI,OAAO,KAAM,SACf,OAAM,MAAM,2BAA2B;AAGzC,QAAI,EAAM,aAAa,EAAE,SAAS,EAAM,UACtC,OAAM,MAAM,uBAAuB,EAAM,UAAU,aAAa;AAGlE,QAAI,EAAM,aAAa,EAAE,SAAS,EAAM,UACtC,OAAM,MAAM,uBAAuB,EAAM,UAAU,aAAa;AAOlE,WAJI,OAAO,EAAM,YAAa,cAC5B,EAAM,SAAS,EAAE,EAGZ,EAAE,MAAM;;GAElB,CAAC,EAEI,IAAW,GAAuB,EAElC,IAAgB,SAAgB,EACpC,UAAU,EAAM,YAAY,OAC7B,EAAE,EAEG,UAAa;AAEjB,GADA,EAAM,QAAQ,EAAM,SAAS,CAAC,EAAM,QAAQ,EAAM,QAAQ,EAAM,OAChE,EAAM,OAAO;;SAGf,QAAgB;AACd,GAAI,EAAM,aACR,EAAS,OAAO,OAAO;IAEzB,kBAIA,EAqBM,OAAA;GApBJ,OAAK,EAAA,CAAC,qBACE,EAAA,EAAK,CAAC,UAAS,CAAA;GACtB,OAAK,EAAE,EAAA,MAAa;GACrB,eAAY;MAEZ,EAWM,OAAA;GAXA,OAAK,EAAE,EAAA,EAAK,CAAC,UAAS;GAAG,SAAK,AAAA,EAAA,aAAQ,EAAA,OAAU,OAAK;MAC7C,EAAA,UAAA,GAAA,EAAZ,EAA2F,QAA3F,GAA2F,EAA7B,EAAA,OAAO,MAAI,CAAA,GAAK,QAAM,EAAA,IAAA,EAAA,IAAA,GAAA,EAAA,EACpF,EAQE,SAAA;YAPI;GAAJ,KAAI;4CACK,EAAK,CAAC,QAAK;GACnB,aAAa,EAAA;GACd,eAAY;GACX,YAAU;GACV,WAAO,CAAA,AAAA,EAAA,OAAA,GAAA,GAAA,MAAS,EAAA,EAAK,CAAC,SAAN,EAAA,EAAK,CAAC,MAAK,GAAA,EAAA,EAAA,CAAA,SAAA,CAAA,EAAA,AAAA,EAAA,OAAA,GACX,MAAQ,EAAG,QAA6B,MAAI,EAAA,CAAA,QAAA,CAAA,CAAA;wBALpD,EAAA,EAAK,CAAC,MAAK,CAAA,CAAA,CAAA,EAAA,EAAA,EAQb,EAAA,EAAK,CAAC,SAAA,GAAA,EAAjB,EAEM,OAAA;;GAFmB,OAAK,EAAE,EAAA,EAAK,CAAC,MAAK;GAAE,eAAY;OACpD,EAAA,EAAK,CAAC,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA"}

package/dist/components/PlElementList/PlElementList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementList.js","names":[],"sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script\n  generic=\"T extends unknown = unknown, K extends number | string = number | string\"\n  lang=\"ts\"\n  setup\n>\nimport { isFunction, shallowHash } from \"@milaboratories/helpers\";\nimport { useSortable } from \"@vueuse/integrations/useSortable\";\nimport { type SortableEvent } from \"sortablejs\";\nimport type { ShallowRef } from \"vue\";\nimport { computed, shallowRef, watch } from \"vue\";\nimport PlElementListItem from \"./PlElementListItem.vue\";\nimport { moveElements } from \"./utils.ts\";\n\ntype ItemEntry = [idx: number, item: T];\n\nconst itemsRef = defineModel<T[]>(\"items\", { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey?: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassContent?: string | string[] | ((item: T, index: number) => string | string[]);\n    isActive?: (item: T, index: number) => boolean;\n\n    disableDragging?: boolean;\n    isDraggable?: (item: T, index: number) => boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    disableRemoving?: boolean;\n    isRemovable?: (item: T, index: number) => boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    disableExpanding?: boolean;\n    isExpandable?: (item: T, index: number) => boolean;\n    isExpanded?: (item: T, index: number) => boolean;\n    onExpand?: (item: T, index: number) => unknown;\n\n    disableToggling?: boolean;\n    isToggable?: (item: T, index: number) => boolean;\n    isToggled?: (item: T, index: number) => boolean;\n    onToggle?: (item: T, index: number) => unknown;\n\n    disablePinning?: boolean;\n    isPinnable?: (item: T, index: number) => boolean;\n    isPinned?: (item: T, index: number) => boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(),\n  {\n    getItemKey: (item: T) => JSON.stringify(item) as K,\n\n    itemClass: undefined,\n    itemClassTitle: undefined,\n    itemClassContent: undefined,\n    itemClassBefore: undefined,\n    itemClassAfter: undefined,\n    isActive: undefined,\n\n    disableDragging: undefined,\n    isDraggable: undefined,\n    onDragEnd: undefined,\n    onSort: undefined,\n\n    disableRemoving: undefined,\n    isRemovable: undefined,\n    onRemove: undefined,\n\n    disableExpanding: undefined,\n    isExpandable: undefined,\n    isExpanded: undefined,\n    onExpand: undefined,\n\n    disableToggling: undefined,\n    isToggable: undefined,\n    isToggled: undefined,\n    onToggle: undefined,\n\n    disablePinning: undefined,\n    isPinnable: undefined,\n    isPinned: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: \"itemClick\", item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  [\"item-title\"]: (props: { item: T; index: number }) => unknown;\n  [\"item-content\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-before\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-after\"]?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => !isPinnedItem(item, index)),\n);\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (entry: ItemEntry) => {\n  return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentKeys = itemsRef.value.map(props.getItemKey);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n  const domProjectionKeysSet = new Set(domProjectionKeys);\n\n  for (let i = 0; i < currentKeys.length; i++) {\n    const hasInconsistentPosition =\n      domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n    if (hasInconsistentPosition) {\n      return shallowHash(...currentKeys);\n    }\n  }\n\n  return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(\n  hasUnpinnedItems,\n  unpinnedContainerRef,\n  unpinnedItemsRef,\n  () => pinnedItemsRef.value.length,\n);\n\nfunction createSortable(\n  toggler: ShallowRef<boolean>,\n  elRef: ShallowRef<undefined | HTMLElement>,\n  itemsRef: ShallowRef<ItemEntry[]>,\n  getOffset: () => number,\n) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error(\"Sortable event has no index\");\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\n    { immediate: true },\n  );\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    itemsRef.value = moveElements(itemsRef.value, oldIndex, newIndex);\n  }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n  return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n  if (props.disableDragging === true) return false;\n  return props.isDraggable?.(item, index) ?? true;\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n  if (props.disableRemoving === true) return false;\n  return props.isRemovable?.(item, index) ?? true;\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n  if (props.disableToggling === true) return false;\n  return (\n    props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle))\n  );\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n  return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n  if (props.disablePinning === true) return false;\n  return props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n  return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n  if (props.disableExpanding === true) return false;\n  return (\n    props.isExpandable?.(item, index) ??\n    (isFunction(props.isExpanded) || isFunction(props.onExpand))\n  );\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n  return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n  props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n  props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error(\"Pinnable item not found\");\n  }\n\n  const alreadyPinned =\n    pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\n\n  if (props.onPin?.(item, index) === false) return;\n\n  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) === false) return;\n  itemsRef.value = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(index + 1)];\n}\n\nfunction getClassFunction(\n  propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined,\n): (item: T, index: number) => null | string | string[] {\n  return (item: T, index: number): null | string | string[] => {\n    if (typeof propsItemClass === \"function\") {\n      return propsItemClass(item, index);\n    }\n    return propsItemClass ?? null;\n  };\n}\nconst getItemClass = getClassFunction(props.itemClass);\nconst getItemClassTitle = getClassFunction(props.itemClassTitle);\nconst getItemClassContent = getClassFunction(props.itemClassContent);\nconst getItemClassBefore = getClassFunction(props.itemClassBefore);\nconst getItemClassAfter = getClassFunction(props.itemClassAfter);\n</script>\n\n<template>\n  <div :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n        :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"true\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template v-if=\"slots['item-before']\" #before=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-before\" />\n        </template>\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n        :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"false\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root,\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlElementList.js","names":[],"sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script\n  generic=\"T extends unknown = unknown, K extends number | string = number | string\"\n  lang=\"ts\"\n  setup\n>\nimport { isFunction, shallowHash } from \"@milaboratories/helpers\";\nimport { useSortable } from \"@vueuse/integrations/useSortable\";\nimport { type SortableEvent } from \"sortablejs\";\nimport type { ShallowRef } from \"vue\";\nimport { computed, shallowRef, watch } from \"vue\";\nimport PlElementListItem from \"./PlElementListItem.vue\";\nimport { moveElements } from \"./utils.ts\";\n\ntype ItemEntry = [idx: number, item: T];\n\nconst itemsRef = defineModel<T[]>(\"items\", { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey?: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassContent?: string | string[] | ((item: T, index: number) => string | string[]);\n    isActive?: (item: T, index: number) => boolean;\n\n    disableDragging?: boolean;\n    isDraggable?: (item: T, index: number) => boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    disableRemoving?: boolean;\n    isRemovable?: (item: T, index: number) => boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    disableExpanding?: boolean;\n    isExpandable?: (item: T, index: number) => boolean;\n    isExpanded?: (item: T, index: number) => boolean;\n    onExpand?: (item: T, index: number) => unknown;\n\n    disableToggling?: boolean;\n    isToggable?: (item: T, index: number) => boolean;\n    isToggled?: (item: T, index: number) => boolean;\n    onToggle?: (item: T, index: number) => unknown;\n\n    disablePinning?: boolean;\n    isPinnable?: (item: T, index: number) => boolean;\n    isPinned?: (item: T, index: number) => boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(),\n  {\n    getItemKey: (item: T) => JSON.stringify(item) as K,\n\n    itemClass: undefined,\n    itemClassTitle: undefined,\n    itemClassContent: undefined,\n    itemClassBefore: undefined,\n    itemClassAfter: undefined,\n    isActive: undefined,\n\n    disableDragging: undefined,\n    isDraggable: undefined,\n    onDragEnd: undefined,\n    onSort: undefined,\n\n    disableRemoving: undefined,\n    isRemovable: undefined,\n    onRemove: undefined,\n\n    disableExpanding: undefined,\n    isExpandable: undefined,\n    isExpanded: undefined,\n    onExpand: undefined,\n\n    disableToggling: undefined,\n    isToggable: undefined,\n    isToggled: undefined,\n    onToggle: undefined,\n\n    disablePinning: undefined,\n    isPinnable: undefined,\n    isPinned: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: \"itemClick\", item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  [\"item-title\"]: (props: { item: T; index: number }) => unknown;\n  [\"item-content\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-before\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-after\"]?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => !isPinnedItem(item, index)),\n);\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (entry: ItemEntry) => {\n  return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentKeys = itemsRef.value.map(props.getItemKey);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n  const domProjectionKeysSet = new Set(domProjectionKeys);\n\n  for (let i = 0; i < currentKeys.length; i++) {\n    const hasInconsistentPosition =\n      domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n    if (hasInconsistentPosition) {\n      return shallowHash(...currentKeys);\n    }\n  }\n\n  return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(\n  hasUnpinnedItems,\n  unpinnedContainerRef,\n  unpinnedItemsRef,\n  () => pinnedItemsRef.value.length,\n);\n\nfunction createSortable(\n  toggler: ShallowRef<boolean>,\n  elRef: ShallowRef<undefined | HTMLElement>,\n  itemsRef: ShallowRef<ItemEntry[]>,\n  getOffset: () => number,\n) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error(\"Sortable event has no index\");\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\n    { immediate: true },\n  );\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    itemsRef.value = moveElements(itemsRef.value, oldIndex, newIndex);\n  }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n  return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n  if (props.disableDragging === true) return false;\n  return props.isDraggable?.(item, index) ?? true;\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n  if (props.disableRemoving === true) return false;\n  return props.isRemovable?.(item, index) ?? true;\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n  if (props.disableToggling === true) return false;\n  return (\n    props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle))\n  );\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n  return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n  if (props.disablePinning === true) return false;\n  return props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n  return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n  if (props.disableExpanding === true) return false;\n  return (\n    props.isExpandable?.(item, index) ??\n    (isFunction(props.isExpanded) || isFunction(props.onExpand))\n  );\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n  return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n  props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n  props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error(\"Pinnable item not found\");\n  }\n\n  const alreadyPinned =\n    pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\n\n  if (props.onPin?.(item, index) === false) return;\n\n  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) === false) return;\n  itemsRef.value = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(index + 1)];\n}\n\nfunction getClassFunction(\n  propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined,\n): (item: T, index: number) => null | string | string[] {\n  return (item: T, index: number): null | string | string[] => {\n    if (typeof propsItemClass === \"function\") {\n      return propsItemClass(item, index);\n    }\n    return propsItemClass ?? null;\n  };\n}\nconst getItemClass = getClassFunction(props.itemClass);\nconst getItemClassTitle = getClassFunction(props.itemClassTitle);\nconst getItemClassContent = getClassFunction(props.itemClassContent);\nconst getItemClassBefore = getClassFunction(props.itemClassBefore);\nconst getItemClassAfter = getClassFunction(props.itemClassAfter);\n</script>\n\n<template>\n  <div data-testid=\"pl-element-list\" :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" data-testid=\"pl-element-list-pinned\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n        :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"true\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template v-if=\"slots['item-before']\" #before=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-before\" />\n        </template>\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div\n      v-if=\"hasUnpinnedItems\"\n      ref=\"unpinnedContainerRef\"\n      data-testid=\"pl-element-list-unpinned\"\n      :class=\"$style.list\"\n    >\n      <PlElementListItem\n        v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n        :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"false\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root,\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlElementList/PlElementList.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementList.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script\n  generic=\"T extends unknown = unknown, K extends number | string = number | string\"\n  lang=\"ts\"\n  setup\n>\nimport { isFunction, shallowHash } from \"@milaboratories/helpers\";\nimport { useSortable } from \"@vueuse/integrations/useSortable\";\nimport { type SortableEvent } from \"sortablejs\";\nimport type { ShallowRef } from \"vue\";\nimport { computed, shallowRef, watch } from \"vue\";\nimport PlElementListItem from \"./PlElementListItem.vue\";\nimport { moveElements } from \"./utils.ts\";\n\ntype ItemEntry = [idx: number, item: T];\n\nconst itemsRef = defineModel<T[]>(\"items\", { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey?: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassContent?: string | string[] | ((item: T, index: number) => string | string[]);\n    isActive?: (item: T, index: number) => boolean;\n\n    disableDragging?: boolean;\n    isDraggable?: (item: T, index: number) => boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    disableRemoving?: boolean;\n    isRemovable?: (item: T, index: number) => boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    disableExpanding?: boolean;\n    isExpandable?: (item: T, index: number) => boolean;\n    isExpanded?: (item: T, index: number) => boolean;\n    onExpand?: (item: T, index: number) => unknown;\n\n    disableToggling?: boolean;\n    isToggable?: (item: T, index: number) => boolean;\n    isToggled?: (item: T, index: number) => boolean;\n    onToggle?: (item: T, index: number) => unknown;\n\n    disablePinning?: boolean;\n    isPinnable?: (item: T, index: number) => boolean;\n    isPinned?: (item: T, index: number) => boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(),\n  {\n    getItemKey: (item: T) => JSON.stringify(item) as K,\n\n    itemClass: undefined,\n    itemClassTitle: undefined,\n    itemClassContent: undefined,\n    itemClassBefore: undefined,\n    itemClassAfter: undefined,\n    isActive: undefined,\n\n    disableDragging: undefined,\n    isDraggable: undefined,\n    onDragEnd: undefined,\n    onSort: undefined,\n\n    disableRemoving: undefined,\n    isRemovable: undefined,\n    onRemove: undefined,\n\n    disableExpanding: undefined,\n    isExpandable: undefined,\n    isExpanded: undefined,\n    onExpand: undefined,\n\n    disableToggling: undefined,\n    isToggable: undefined,\n    isToggled: undefined,\n    onToggle: undefined,\n\n    disablePinning: undefined,\n    isPinnable: undefined,\n    isPinned: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: \"itemClick\", item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  [\"item-title\"]: (props: { item: T; index: number }) => unknown;\n  [\"item-content\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-before\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-after\"]?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => !isPinnedItem(item, index)),\n);\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (entry: ItemEntry) => {\n  return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentKeys = itemsRef.value.map(props.getItemKey);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n  const domProjectionKeysSet = new Set(domProjectionKeys);\n\n  for (let i = 0; i < currentKeys.length; i++) {\n    const hasInconsistentPosition =\n      domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n    if (hasInconsistentPosition) {\n      return shallowHash(...currentKeys);\n    }\n  }\n\n  return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(\n  hasUnpinnedItems,\n  unpinnedContainerRef,\n  unpinnedItemsRef,\n  () => pinnedItemsRef.value.length,\n);\n\nfunction createSortable(\n  toggler: ShallowRef<boolean>,\n  elRef: ShallowRef<undefined | HTMLElement>,\n  itemsRef: ShallowRef<ItemEntry[]>,\n  getOffset: () => number,\n) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error(\"Sortable event has no index\");\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\n    { immediate: true },\n  );\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    itemsRef.value = moveElements(itemsRef.value, oldIndex, newIndex);\n  }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n  return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n  if (props.disableDragging === true) return false;\n  return props.isDraggable?.(item, index) ?? true;\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n  if (props.disableRemoving === true) return false;\n  return props.isRemovable?.(item, index) ?? true;\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n  if (props.disableToggling === true) return false;\n  return (\n    props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle))\n  );\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n  return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n  if (props.disablePinning === true) return false;\n  return props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n  return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n  if (props.disableExpanding === true) return false;\n  return (\n    props.isExpandable?.(item, index) ??\n    (isFunction(props.isExpanded) || isFunction(props.onExpand))\n  );\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n  return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n  props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n  props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error(\"Pinnable item not found\");\n  }\n\n  const alreadyPinned =\n    pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\n\n  if (props.onPin?.(item, index) === false) return;\n\n  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) === false) return;\n  itemsRef.value = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(index + 1)];\n}\n\nfunction getClassFunction(\n  propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined,\n): (item: T, index: number) => null | string | string[] {\n  return (item: T, index: number): null | string | string[] => {\n    if (typeof propsItemClass === \"function\") {\n      return propsItemClass(item, index);\n    }\n    return propsItemClass ?? null;\n  };\n}\nconst getItemClass = getClassFunction(props.itemClass);\nconst getItemClassTitle = getClassFunction(props.itemClassTitle);\nconst getItemClassContent = getClassFunction(props.itemClassContent);\nconst getItemClassBefore = getClassFunction(props.itemClassBefore);\nconst getItemClassAfter = getClassFunction(props.itemClassAfter);\n</script>\n\n<template>\n  <div :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n        :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"true\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template v-if=\"slots['item-before']\" #before=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-before\" />\n        </template>\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n        :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"false\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root,\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlElementList.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script\n  generic=\"T extends unknown = unknown, K extends number | string = number | string\"\n  lang=\"ts\"\n  setup\n>\nimport { isFunction, shallowHash } from \"@milaboratories/helpers\";\nimport { useSortable } from \"@vueuse/integrations/useSortable\";\nimport { type SortableEvent } from \"sortablejs\";\nimport type { ShallowRef } from \"vue\";\nimport { computed, shallowRef, watch } from \"vue\";\nimport PlElementListItem from \"./PlElementListItem.vue\";\nimport { moveElements } from \"./utils.ts\";\n\ntype ItemEntry = [idx: number, item: T];\n\nconst itemsRef = defineModel<T[]>(\"items\", { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey?: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassContent?: string | string[] | ((item: T, index: number) => string | string[]);\n    isActive?: (item: T, index: number) => boolean;\n\n    disableDragging?: boolean;\n    isDraggable?: (item: T, index: number) => boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    disableRemoving?: boolean;\n    isRemovable?: (item: T, index: number) => boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    disableExpanding?: boolean;\n    isExpandable?: (item: T, index: number) => boolean;\n    isExpanded?: (item: T, index: number) => boolean;\n    onExpand?: (item: T, index: number) => unknown;\n\n    disableToggling?: boolean;\n    isToggable?: (item: T, index: number) => boolean;\n    isToggled?: (item: T, index: number) => boolean;\n    onToggle?: (item: T, index: number) => unknown;\n\n    disablePinning?: boolean;\n    isPinnable?: (item: T, index: number) => boolean;\n    isPinned?: (item: T, index: number) => boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(),\n  {\n    getItemKey: (item: T) => JSON.stringify(item) as K,\n\n    itemClass: undefined,\n    itemClassTitle: undefined,\n    itemClassContent: undefined,\n    itemClassBefore: undefined,\n    itemClassAfter: undefined,\n    isActive: undefined,\n\n    disableDragging: undefined,\n    isDraggable: undefined,\n    onDragEnd: undefined,\n    onSort: undefined,\n\n    disableRemoving: undefined,\n    isRemovable: undefined,\n    onRemove: undefined,\n\n    disableExpanding: undefined,\n    isExpandable: undefined,\n    isExpanded: undefined,\n    onExpand: undefined,\n\n    disableToggling: undefined,\n    isToggable: undefined,\n    isToggled: undefined,\n    onToggle: undefined,\n\n    disablePinning: undefined,\n    isPinnable: undefined,\n    isPinned: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: \"itemClick\", item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  [\"item-title\"]: (props: { item: T; index: number }) => unknown;\n  [\"item-content\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-before\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-after\"]?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => !isPinnedItem(item, index)),\n);\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (entry: ItemEntry) => {\n  return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentKeys = itemsRef.value.map(props.getItemKey);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n  const domProjectionKeysSet = new Set(domProjectionKeys);\n\n  for (let i = 0; i < currentKeys.length; i++) {\n    const hasInconsistentPosition =\n      domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n    if (hasInconsistentPosition) {\n      return shallowHash(...currentKeys);\n    }\n  }\n\n  return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(\n  hasUnpinnedItems,\n  unpinnedContainerRef,\n  unpinnedItemsRef,\n  () => pinnedItemsRef.value.length,\n);\n\nfunction createSortable(\n  toggler: ShallowRef<boolean>,\n  elRef: ShallowRef<undefined | HTMLElement>,\n  itemsRef: ShallowRef<ItemEntry[]>,\n  getOffset: () => number,\n) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error(\"Sortable event has no index\");\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\n    { immediate: true },\n  );\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    itemsRef.value = moveElements(itemsRef.value, oldIndex, newIndex);\n  }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n  return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n  if (props.disableDragging === true) return false;\n  return props.isDraggable?.(item, index) ?? true;\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n  if (props.disableRemoving === true) return false;\n  return props.isRemovable?.(item, index) ?? true;\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n  if (props.disableToggling === true) return false;\n  return (\n    props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle))\n  );\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n  return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n  if (props.disablePinning === true) return false;\n  return props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n  return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n  if (props.disableExpanding === true) return false;\n  return (\n    props.isExpandable?.(item, index) ??\n    (isFunction(props.isExpanded) || isFunction(props.onExpand))\n  );\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n  return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n  props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n  props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error(\"Pinnable item not found\");\n  }\n\n  const alreadyPinned =\n    pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\n\n  if (props.onPin?.(item, index) === false) return;\n\n  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) === false) return;\n  itemsRef.value = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(index + 1)];\n}\n\nfunction getClassFunction(\n  propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined,\n): (item: T, index: number) => null | string | string[] {\n  return (item: T, index: number): null | string | string[] => {\n    if (typeof propsItemClass === \"function\") {\n      return propsItemClass(item, index);\n    }\n    return propsItemClass ?? null;\n  };\n}\nconst getItemClass = getClassFunction(props.itemClass);\nconst getItemClassTitle = getClassFunction(props.itemClassTitle);\nconst getItemClassContent = getClassFunction(props.itemClassContent);\nconst getItemClassBefore = getClassFunction(props.itemClassBefore);\nconst getItemClassAfter = getClassFunction(props.itemClassAfter);\n</script>\n\n<template>\n  <div data-testid=\"pl-element-list\" :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" data-testid=\"pl-element-list-pinned\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n        :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"true\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template v-if=\"slots['item-before']\" #before=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-before\" />\n        </template>\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div\n      v-if=\"hasUnpinnedItems\"\n      ref=\"unpinnedContainerRef\"\n      data-testid=\"pl-element-list-unpinned\"\n      :class=\"$style.list\"\n    >\n      <PlElementListItem\n        v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n        :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"false\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root,\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlElementList/PlElementList.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementList.vue"],"names":[],"mappings":"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"}
+{"version":3,"file":"PlElementList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementList.vue"],"names":[],"mappings":"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"}

package/dist/components/PlElementList/PlElementList.vue2.js

@@ -215,9 +215,13 @@ var y = /* @__PURE__ */ c({
 			return (t, n) => typeof e == "function" ? e(t, n) : e ?? null;
 		}
 		let Y = J(b.itemClass), X = J(b.itemClassTitle), Z = J(b.itemClassContent), Q = J(b.itemClassBefore), $ = J(b.itemClassAfter);
-		return (t, r) => (d(), o("div", { class: u(t.$style.root) }, [ee("div", {
+		return (t, r) => (d(), o("div", {
+			"data-testid": "pl-element-list",
+			class: u(t.$style.root)
+		}, [ee("div", {
 			ref_key: "pinnedContainerRef",
 			ref: O,
+			"data-testid": "pl-element-list-pinned",
 			class: u(t.$style.list)
 		}, [(d(!0), o(n, null, f(w.value, ([n, r], a) => (d(), i(e, {
 			key: j.value[a],
@@ -296,6 +300,7 @@ var y = /* @__PURE__ */ c({
 			key: 0,
 			ref_key: "unpinnedContainerRef",
 			ref: k,
+			"data-testid": "pl-element-list-unpinned",
 			class: u(t.$style.list)
 		}, [(d(!0), o(n, null, f(T.value, ([n, r], a) => (d(), i(e, {
 			key: M.value[a],

package/dist/components/PlElementList/PlElementList.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementList.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script\n  generic=\"T extends unknown = unknown, K extends number | string = number | string\"\n  lang=\"ts\"\n  setup\n>\nimport { isFunction, shallowHash } from \"@milaboratories/helpers\";\nimport { useSortable } from \"@vueuse/integrations/useSortable\";\nimport { type SortableEvent } from \"sortablejs\";\nimport type { ShallowRef } from \"vue\";\nimport { computed, shallowRef, watch } from \"vue\";\nimport PlElementListItem from \"./PlElementListItem.vue\";\nimport { moveElements } from \"./utils.ts\";\n\ntype ItemEntry = [idx: number, item: T];\n\nconst itemsRef = defineModel<T[]>(\"items\", { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey?: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassContent?: string | string[] | ((item: T, index: number) => string | string[]);\n    isActive?: (item: T, index: number) => boolean;\n\n    disableDragging?: boolean;\n    isDraggable?: (item: T, index: number) => boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    disableRemoving?: boolean;\n    isRemovable?: (item: T, index: number) => boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    disableExpanding?: boolean;\n    isExpandable?: (item: T, index: number) => boolean;\n    isExpanded?: (item: T, index: number) => boolean;\n    onExpand?: (item: T, index: number) => unknown;\n\n    disableToggling?: boolean;\n    isToggable?: (item: T, index: number) => boolean;\n    isToggled?: (item: T, index: number) => boolean;\n    onToggle?: (item: T, index: number) => unknown;\n\n    disablePinning?: boolean;\n    isPinnable?: (item: T, index: number) => boolean;\n    isPinned?: (item: T, index: number) => boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(),\n  {\n    getItemKey: (item: T) => JSON.stringify(item) as K,\n\n    itemClass: undefined,\n    itemClassTitle: undefined,\n    itemClassContent: undefined,\n    itemClassBefore: undefined,\n    itemClassAfter: undefined,\n    isActive: undefined,\n\n    disableDragging: undefined,\n    isDraggable: undefined,\n    onDragEnd: undefined,\n    onSort: undefined,\n\n    disableRemoving: undefined,\n    isRemovable: undefined,\n    onRemove: undefined,\n\n    disableExpanding: undefined,\n    isExpandable: undefined,\n    isExpanded: undefined,\n    onExpand: undefined,\n\n    disableToggling: undefined,\n    isToggable: undefined,\n    isToggled: undefined,\n    onToggle: undefined,\n\n    disablePinning: undefined,\n    isPinnable: undefined,\n    isPinned: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: \"itemClick\", item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  [\"item-title\"]: (props: { item: T; index: number }) => unknown;\n  [\"item-content\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-before\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-after\"]?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => !isPinnedItem(item, index)),\n);\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (entry: ItemEntry) => {\n  return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentKeys = itemsRef.value.map(props.getItemKey);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n  const domProjectionKeysSet = new Set(domProjectionKeys);\n\n  for (let i = 0; i < currentKeys.length; i++) {\n    const hasInconsistentPosition =\n      domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n    if (hasInconsistentPosition) {\n      return shallowHash(...currentKeys);\n    }\n  }\n\n  return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(\n  hasUnpinnedItems,\n  unpinnedContainerRef,\n  unpinnedItemsRef,\n  () => pinnedItemsRef.value.length,\n);\n\nfunction createSortable(\n  toggler: ShallowRef<boolean>,\n  elRef: ShallowRef<undefined | HTMLElement>,\n  itemsRef: ShallowRef<ItemEntry[]>,\n  getOffset: () => number,\n) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error(\"Sortable event has no index\");\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\n    { immediate: true },\n  );\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    itemsRef.value = moveElements(itemsRef.value, oldIndex, newIndex);\n  }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n  return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n  if (props.disableDragging === true) return false;\n  return props.isDraggable?.(item, index) ?? true;\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n  if (props.disableRemoving === true) return false;\n  return props.isRemovable?.(item, index) ?? true;\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n  if (props.disableToggling === true) return false;\n  return (\n    props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle))\n  );\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n  return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n  if (props.disablePinning === true) return false;\n  return props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n  return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n  if (props.disableExpanding === true) return false;\n  return (\n    props.isExpandable?.(item, index) ??\n    (isFunction(props.isExpanded) || isFunction(props.onExpand))\n  );\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n  return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n  props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n  props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error(\"Pinnable item not found\");\n  }\n\n  const alreadyPinned =\n    pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\n\n  if (props.onPin?.(item, index) === false) return;\n\n  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) === false) return;\n  itemsRef.value = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(index + 1)];\n}\n\nfunction getClassFunction(\n  propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined,\n): (item: T, index: number) => null | string | string[] {\n  return (item: T, index: number): null | string | string[] => {\n    if (typeof propsItemClass === \"function\") {\n      return propsItemClass(item, index);\n    }\n    return propsItemClass ?? null;\n  };\n}\nconst getItemClass = getClassFunction(props.itemClass);\nconst getItemClassTitle = getClassFunction(props.itemClassTitle);\nconst getItemClassContent = getClassFunction(props.itemClassContent);\nconst getItemClassBefore = getClassFunction(props.itemClassBefore);\nconst getItemClassAfter = getClassFunction(props.itemClassAfter);\n</script>\n\n<template>\n  <div :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n        :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"true\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template v-if=\"slots['item-before']\" #before=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-before\" />\n        </template>\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n        :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"false\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root,\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"PlElementList.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script\n  generic=\"T extends unknown = unknown, K extends number | string = number | string\"\n  lang=\"ts\"\n  setup\n>\nimport { isFunction, shallowHash } from \"@milaboratories/helpers\";\nimport { useSortable } from \"@vueuse/integrations/useSortable\";\nimport { type SortableEvent } from \"sortablejs\";\nimport type { ShallowRef } from \"vue\";\nimport { computed, shallowRef, watch } from \"vue\";\nimport PlElementListItem from \"./PlElementListItem.vue\";\nimport { moveElements } from \"./utils.ts\";\n\ntype ItemEntry = [idx: number, item: T];\n\nconst itemsRef = defineModel<T[]>(\"items\", { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey?: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassContent?: string | string[] | ((item: T, index: number) => string | string[]);\n    isActive?: (item: T, index: number) => boolean;\n\n    disableDragging?: boolean;\n    isDraggable?: (item: T, index: number) => boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    disableRemoving?: boolean;\n    isRemovable?: (item: T, index: number) => boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    disableExpanding?: boolean;\n    isExpandable?: (item: T, index: number) => boolean;\n    isExpanded?: (item: T, index: number) => boolean;\n    onExpand?: (item: T, index: number) => unknown;\n\n    disableToggling?: boolean;\n    isToggable?: (item: T, index: number) => boolean;\n    isToggled?: (item: T, index: number) => boolean;\n    onToggle?: (item: T, index: number) => unknown;\n\n    disablePinning?: boolean;\n    isPinnable?: (item: T, index: number) => boolean;\n    isPinned?: (item: T, index: number) => boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(),\n  {\n    getItemKey: (item: T) => JSON.stringify(item) as K,\n\n    itemClass: undefined,\n    itemClassTitle: undefined,\n    itemClassContent: undefined,\n    itemClassBefore: undefined,\n    itemClassAfter: undefined,\n    isActive: undefined,\n\n    disableDragging: undefined,\n    isDraggable: undefined,\n    onDragEnd: undefined,\n    onSort: undefined,\n\n    disableRemoving: undefined,\n    isRemovable: undefined,\n    onRemove: undefined,\n\n    disableExpanding: undefined,\n    isExpandable: undefined,\n    isExpanded: undefined,\n    onExpand: undefined,\n\n    disableToggling: undefined,\n    isToggable: undefined,\n    isToggled: undefined,\n    onToggle: undefined,\n\n    disablePinning: undefined,\n    isPinnable: undefined,\n    isPinned: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: \"itemClick\", item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  [\"item-title\"]: (props: { item: T; index: number }) => unknown;\n  [\"item-content\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-before\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-after\"]?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n  itemsRef.value\n    .map((item, index) => [index, item] as ItemEntry)\n    .filter(([index, item]) => !isPinnedItem(item, index)),\n);\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (entry: ItemEntry) => {\n  return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentKeys = itemsRef.value.map(props.getItemKey);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n  const domProjectionKeysSet = new Set(domProjectionKeys);\n\n  for (let i = 0; i < currentKeys.length; i++) {\n    const hasInconsistentPosition =\n      domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n    if (hasInconsistentPosition) {\n      return shallowHash(...currentKeys);\n    }\n  }\n\n  return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(\n  hasUnpinnedItems,\n  unpinnedContainerRef,\n  unpinnedItemsRef,\n  () => pinnedItemsRef.value.length,\n);\n\nfunction createSortable(\n  toggler: ShallowRef<boolean>,\n  elRef: ShallowRef<undefined | HTMLElement>,\n  itemsRef: ShallowRef<ItemEntry[]>,\n  getOffset: () => number,\n) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error(\"Sortable event has no index\");\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\n    { immediate: true },\n  );\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    itemsRef.value = moveElements(itemsRef.value, oldIndex, newIndex);\n  }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n  return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n  if (props.disableDragging === true) return false;\n  return props.isDraggable?.(item, index) ?? true;\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n  if (props.disableRemoving === true) return false;\n  return props.isRemovable?.(item, index) ?? true;\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n  if (props.disableToggling === true) return false;\n  return (\n    props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle))\n  );\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n  return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n  if (props.disablePinning === true) return false;\n  return props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n  return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n  if (props.disableExpanding === true) return false;\n  return (\n    props.isExpandable?.(item, index) ??\n    (isFunction(props.isExpanded) || isFunction(props.onExpand))\n  );\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n  return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n  props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n  props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error(\"Pinnable item not found\");\n  }\n\n  const alreadyPinned =\n    pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\n\n  if (props.onPin?.(item, index) === false) return;\n\n  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) === false) return;\n  itemsRef.value = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(index + 1)];\n}\n\nfunction getClassFunction(\n  propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined,\n): (item: T, index: number) => null | string | string[] {\n  return (item: T, index: number): null | string | string[] => {\n    if (typeof propsItemClass === \"function\") {\n      return propsItemClass(item, index);\n    }\n    return propsItemClass ?? null;\n  };\n}\nconst getItemClass = getClassFunction(props.itemClass);\nconst getItemClassTitle = getClassFunction(props.itemClassTitle);\nconst getItemClassContent = getClassFunction(props.itemClassContent);\nconst getItemClassBefore = getClassFunction(props.itemClassBefore);\nconst getItemClassAfter = getClassFunction(props.itemClassAfter);\n</script>\n\n<template>\n  <div data-testid=\"pl-element-list\" :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" data-testid=\"pl-element-list-pinned\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n        :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"true\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template v-if=\"slots['item-before']\" #before=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-before\" />\n        </template>\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div\n      v-if=\"hasUnpinnedItems\"\n      ref=\"unpinnedContainerRef\"\n      data-testid=\"pl-element-list-unpinned\"\n      :class=\"$style.list\"\n    >\n      <PlElementListItem\n        v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n        :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n        :titleClass=\"getItemClassTitle(item, originalIndex)\"\n        :contentClass=\"getItemClassContent(item, originalIndex)\"\n        :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n        :afterClass=\"getItemClassAfter(item, originalIndex)\"\n        :index=\"originalIndex\"\n        :item=\"item\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(item, originalIndex)\"\n        :isDraggable=\"isDraggableItem(item, originalIndex)\"\n        :isRemovable=\"isRemovableItem(item, originalIndex)\"\n        :isToggable=\"isToggableItem(item, originalIndex)\"\n        :isToggled=\"isToggledItem(item, originalIndex)\"\n        :isPinnable=\"isPinnableItem(item, originalIndex)\"\n        :isPinned=\"false\"\n        :isExpandable=\"isExpandableItem(item, originalIndex)\"\n        :isExpanded=\"isExpandedItem(item, originalIndex)\"\n        @click=\"emits('itemClick', item)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root,\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,IAAM,IAAW,GAAgB,GAAC,QAA4B,EAExD,IAAQ,GAuER,IAAQ,GAIR,IAAQ,IAKV,EAEE,IAAoB,QACjB,EAAM,oBAAoB,GACjC,EAEI,IAAiB,QACrB,EAAS,MACN,KAAK,GAAM,MAAU,CAAC,GAAO,EAAK,CAAa,CAC/C,QAAQ,CAAC,GAAO,OAAU,EAAa,GAAM,EAAM,CAAC,CACxD,EACK,KAAiB,QAAe,EAAe,MAAM,SAAS,EAAE,EAEhE,IAAmB,QACvB,EAAS,MACN,KAAK,GAAM,MAAU,CAAC,GAAO,EAAK,CAAa,CAC/C,QAAQ,CAAC,GAAO,OAAU,CAAC,EAAa,GAAM,EAAM,CAAC,CACzD,EACK,IAAmB,QAAe,EAAiB,MAAM,SAAS,EAAE,EAEpE,IAAwB,GAA6B,EACrD,IAAqB,GAAyB,EAC9C,IAAuB,GAAyB,EAGhD,KAAU,MACP,GAAG,GAAW,MAAM,GAAG,EAAM,WAAW,EAAM,IAAI,EAAM,GAAG,IAE9D,IAAgB,QAAe,EAAe,MAAM,IAAI,EAAO,CAAC,EAChE,IAAkB,QAAe,EAAiB,MAAM,IAAI,EAAO,CAAC,EAGpE,KAAa,GAAkB,MAAe;GAClD,IAAM,IAAc,EAAS,MAAM,IAAI,EAAM,WAAW;AAExD,OAAI,EAAsB,UAAU,KAAA,EAAW,QAAO,KAAc,EAAY,GAAG,EAAY;AAC/F,OAAI,EAAY,WAAW,EAAsB,MAAM,OAAQ,QAAO,EAAY,GAAG,EAAY;GAEjG,IAAM,IAAoB,EAAsB,MAAM,IAAI,EAAM,WAAW,EACrE,IAAuB,IAAI,IAAI,EAAkB;AAEvD,QAAK,IAAI,IAAI,GAAG,IAAI,EAAY,QAAQ,IAItC,KAFE,EAAqB,IAAI,EAAY,GAAG,IAAI,EAAkB,OAAO,EAAY,GAGjF,QAAO,EAAY,GAAG,EAAY;AAItC,UAAO,KAAc,EAAY,GAAG,EAAY;IAChD;AAGF,EADA,EAAe,IAAgB,GAAoB,SAAsB,EAAE,EAC3E,EACE,GACA,GACA,SACM,EAAe,MAAM,OAC5B;EAED,SAAS,EACP,GACA,GACA,GACA,GACA;GACA,IAAM,IAAW,GAAY,GAAO,GAAU;IAC5C,QAAQ;IACR,WAAW;IACX,eAAe;IACf,gBAAgB;IAChB,mBAAmB;IACnB,yBAAyB;IACzB,WAAW,MAAuB;AAChC,SAAI,EAAI,YAAY,QAAQ,EAAI,YAAY,KAC1C,OAAU,MAAM,8BAA8B;AAEhD,KAAI,EAAM,YAAY,EAAI,UAAU,EAAI,SAAS,KAAK,MACpD,EAAU,GAAW,GAAG,EAAI,UAAU,GAAW,GAAG,EAAI,UAAU,GAAK;;IAG5E,CAAC;AAaF,UAZA,GACE;IAAC;UAAa,EAAM;IAAiB;IAAQ,GAC5C,CAAC,GAAO,GAAU,OAAQ;AACzB,IAAI,CAAC,KAAS,KAAY,CAAC,IACzB,EAAS,MAAM,GAEf,EAAS,OAAO;MAGpB,EAAE,WAAW,IAAM,CACpB,EAEM;;EAGT,SAAS,EAAU,GAAkB,GAAkB,GAAyB;AAC1E,SAAa,MAEb,MACF,EAAsB,QAAQ,EAAa,EAAS,MAAM,OAAO,EAAE,GAAU,EAAS,GAGjE,EAAM,SAAS,GAAU,EAAS,KAAK,OAG5D,EAAS,QAAQ,EAAa,EAAS,OAAO,GAAU,EAAS;;EAIrE,SAAS,EAAa,GAAS,GAAwB;AACrD,UAAO,EAAM,WAAW,GAAM,EAAM,IAAI;;EAG1C,SAAS,EAAgB,GAAS,GAAwB;AAExD,UADI,EAAM,oBAAoB,KAAa,KACpC,EAAM,cAAc,GAAM,EAAM,IAAI;;EAG7C,SAAS,EAAgB,GAAS,GAAwB;AAExD,UADI,EAAM,oBAAoB,KAAa,KACpC,EAAM,cAAc,GAAM,EAAM,IAAI;;EAG7C,SAAS,EAAe,GAAS,GAAwB;AAEvD,UADI,EAAM,oBAAoB,KAAa,KAEzC,EAAM,aAAa,GAAM,EAAM,KAAK,EAAW,EAAM,UAAU,IAAI,EAAW,EAAM,SAAS;;EAIjG,SAAS,EAAc,GAAS,GAAwB;AACtD,UAAO,EAAM,YAAY,GAAM,EAAM,IAAI;;EAG3C,SAAS,EAAe,GAAS,GAAwB;AAEvD,UADI,EAAM,mBAAmB,KAAa,KACnC,EAAM,aAAa,GAAM,EAAM,KAAK,EAAW,EAAM,SAAS,IAAI,EAAW,EAAM,MAAM;;EAGlG,SAAS,EAAa,GAAS,GAAwB;AACrD,UAAO,EAAM,WAAW,GAAM,EAAM,IAAI;;EAG1C,SAAS,EAAiB,GAAS,GAAwB;AAEzD,UADI,EAAM,qBAAqB,KAAa,KAE1C,EAAM,eAAe,GAAM,EAAM,KAChC,EAAW,EAAM,WAAW,IAAI,EAAW,EAAM,SAAS;;EAI/D,SAAS,EAAe,GAAS,GAAwB;AACvD,UAAO,EAAM,aAAa,GAAM,EAAM,IAAI;;EAG5C,SAAS,EAAa,GAAS,GAAe;AAC5C,KAAM,WAAW,GAAM,EAAM;;EAG/B,SAAS,EAAa,GAAS,GAAe;AAC5C,KAAM,WAAW,GAAM,EAAM;;EAG/B,SAAS,EAAU,GAAS,GAAe;AACzC,OAAI,MAAU,GACZ,OAAU,MAAM,0BAA0B;GAG5C,IAAM,IACJ,EAAe,MAAM,WAAW,CAAC,OAAmB,MAAkB,EAAM,KAAK;AAE/E,KAAM,QAAQ,GAAM,EAAM,KAAK,MAEnC,EAAU,GAAO,EAAe,MAAM,UAAU,IAAgB,IAAI,KAAK,GAAM;;EAGjF,SAAS,EAAa,GAAS,GAAe;AACxC,KAAM,WAAW,GAAM,EAAM,KAAK,OACtC,EAAS,QAAQ,CAAC,GAAG,EAAS,MAAM,MAAM,GAAG,EAAM,EAAE,GAAG,EAAS,MAAM,MAAM,IAAQ,EAAE,CAAC;;EAG1F,SAAS,EACP,GACsD;AACtD,WAAQ,GAAS,MACX,OAAO,KAAmB,aACrB,EAAe,GAAM,EAAM,GAE7B,KAAkB;;EAG7B,IAAM,IAAe,EAAiB,EAAM,UAAU,EAChD,IAAoB,EAAiB,EAAM,eAAe,EAC1D,IAAsB,EAAiB,EAAM,iBAAiB,EAC9D,IAAqB,EAAiB,EAAM,gBAAgB,EAC5D,IAAoB,EAAiB,EAAM,eAAe;yBAI9D,EAqFM,OAAA;GArFD,eAAY;GAAmB,OAAK,EAAEA,EAAAA,OAAO,KAAI;MACpD,GAwCM,OAAA;YAxCG;GAAJ,KAAI;GAAqB,eAAY;GAA0B,OAAK,EAAEA,EAAAA,OAAO,KAAI;cACpF,EAsCoB,GAAA,MAAA,EArC6B,EAAA,QAAc,CAApD,GAAe,IAAO,YADjC,EAsCoB,GAAA;GApCjB,KAAK,EAAA,MAAc;GACnB,OAAK,EAAA,CAAGA,EAAAA,OAAO,MAAM,EAAA,EAAY,CAAC,GAAM,EAAa,CAAA,CAAA;GACrD,YAAY,EAAA,EAAiB,CAAC,GAAM,EAAa;GACjD,cAAc,EAAA,EAAmB,CAAC,GAAM,EAAa;GACrD,aAAa,EAAA,EAAkB,CAAC,GAAM,EAAa;GACnD,YAAY,EAAA,EAAiB,CAAC,GAAM,EAAa;GACjD,OAAO;GACD;GACN,gBAAgB,EAAA;GAChB,UAAU,EAAa,GAAM,EAAa;GAC1C,aAAa,EAAgB,GAAM,EAAa;GAChD,aAAa,EAAgB,GAAM,EAAa;GAChD,YAAY,EAAe,GAAM,EAAa;GAC9C,WAAW,EAAc,GAAM,EAAa;GAC5C,YAAY,EAAe,GAAM,EAAa;GAC9C,UAAU;GACV,cAAc,EAAiB,GAAM,EAAa;GAClD,YAAY,EAAe,GAAM,EAAa;GAC9C,UAAK,MAAE,EAAK,aAAc,EAAI;GAC9B,UAAQ;GACR,UAAQ;GACR,OAAK;GACL,UAAQ;;GAKE,OAAK,GACwC,EADpC,SAAM,eAAK,CAC7B,EAAsD,EAAA,QAAA,cAAA;IAAxC;IAAc;;;;GAJd,EAAK,iBAAA;UAAkB;WACkB,EADR,SAAM,eAAK,CAC1D,EAAuD,EAAA,QAAA,eAAA;KAAzC;KAAc;;;;GAKd,EAAK,kBAAA;UAAmB;WACkB,EADP,SAAM,eAAK,CAC5D,EAAwD,EAAA,QAAA,gBAAA;KAA1C;KAAc;;;;GAEd,EAAK,gBAAA;UAAiB;WACkB,EADT,SAAM,eAAK,CACxD,EAAsD,EAAA,QAAA,cAAA;KAAxC;KAAc;;;;;;;;;;;;;;;;;;;;;;oBAK1B,EAAA,SAAA,GAAA,EADR,EA0CM,OAAA;;YAxCA;GAAJ,KAAI;GACJ,eAAY;GACX,OAAK,EAAEA,EAAAA,OAAO,KAAI;cAEnB,EAmCoB,GAAA,MAAA,EAlC+B,EAAA,QAAgB,CAAxD,GAAe,IAAO,YADjC,EAmCoB,GAAA;GAjCjB,KAAK,EAAA,MAAgB;GACrB,OAAK,EAAA,CAAGA,EAAAA,OAAO,MAAM,EAAA,EAAY,CAAC,GAAM,EAAa,CAAA,CAAA;GACrD,YAAY,EAAA,EAAiB,CAAC,GAAM,EAAa;GACjD,cAAc,EAAA,EAAmB,CAAC,GAAM,EAAa;GACrD,aAAa,EAAA,EAAkB,CAAC,GAAM,EAAa;GACnD,YAAY,EAAA,EAAiB,CAAC,GAAM,EAAa;GACjD,OAAO;GACD;GACN,gBAAgB,EAAA;GAChB,UAAU,EAAa,GAAM,EAAa;GAC1C,aAAa,EAAgB,GAAM,EAAa;GAChD,aAAa,EAAgB,GAAM,EAAa;GAChD,YAAY,EAAe,GAAM,EAAa;GAC9C,WAAW,EAAc,GAAM,EAAa;GAC5C,YAAY,EAAe,GAAM,EAAa;GAC9C,UAAU;GACV,cAAc,EAAiB,GAAM,EAAa;GAClD,YAAY,EAAe,GAAM,EAAa;GAC9C,UAAK,MAAE,EAAK,aAAc,EAAI;GAC9B,UAAQ;GACR,UAAQ;GACR,OAAK;GACL,UAAQ;;GAEE,OAAK,GACwC,EADpC,SAAM,eAAK,CAC7B,EAAsD,EAAA,QAAA,cAAA;IAAxC;IAAc;;;MAEd,EAAK,kBAAA;SAAmB;UACkB,EADP,SAAM,eAAK,CAC5D,EAAwD,EAAA,QAAA,gBAAA;IAA1C;IAAc;;;cAEd,EAAK,gBAAA;SAAiB;UACkB,EADT,SAAM,eAAK,CACxD,EAAsD,EAAA,QAAA,cAAA;IAAxC;IAAc"}

package/dist/components/PlElementList/PlElementListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementListItem.js","names":[],"sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n  titleClass: string | string[] | null;\n  contentClass: string | string[] | null;\n  afterClass: string | string[] | null;\n  beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n  after?: (props: { item: T; index: number }) => unknown;\n  before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n  (e: \"click\", item: MouseEvent): void;\n  (e: \"expand\", item: T, index: number): void;\n  (e: \"toggle\", item: T, index: number): void;\n  (e: \"pin\", item: T, index: number): void;\n  (e: \"remove\", item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div @click=\"(event) => emit('click', event)\">\n    <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n      <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n    <div\n      :class=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\n        ]\"\n        @click=\"isExpandable && emit('expand', props.item, props.index)\"\n      >\n        <div v-if=\"props.showDragHandle || isExpandable\" :class=\"$style.headIcons\">\n          <div\n            v-if=\"props.showDragHandle\"\n            :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]\"\n            :data-draggable=\"props.isDraggable\"\n          >\n            <PlIcon16 name=\"drag-dots\" />\n          </div>\n          <PlIcon16\n            v-if=\"isExpandable\"\n            :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n            name=\"chevron-down\"\n          />\n        </div>\n\n        <div :class=\"$style.title\">\n          <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n        </div>\n\n        <div :class=\"[$style.actions, $style.showOnHover]\">\n          <div\n            v-if=\"props.isToggable\"\n            :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n            @click.stop=\"emit('toggle', props.item, props.index)\"\n          >\n            <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isPinnable\"\n            :class=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\n            ]\"\n            @click.stop=\"emit('pin', props.item, props.index)\"\n          >\n            <PlIcon24 name=\"pin\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isRemovable\"\n            :class=\"[$style.action, $style.clickable]\"\n            @click.stop=\"emit('remove', props.item, props.index)\"\n          >\n            <PlIcon16 name=\"close\" />\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"hasContentSlot && props.isExpanded\"\n        :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n      >\n        <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n    </div>\n    <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n      <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use \"../../assets/variables.scss\" as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active);\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.headIcons {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  height: 24px;\n  flex: 0 0 auto;\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlElementListItem.js","names":[],"sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n  titleClass: string | string[] | null;\n  contentClass: string | string[] | null;\n  afterClass: string | string[] | null;\n  beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n  after?: (props: { item: T; index: number }) => unknown;\n  before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n  (e: \"click\", item: MouseEvent): void;\n  (e: \"expand\", item: T, index: number): void;\n  (e: \"toggle\", item: T, index: number): void;\n  (e: \"pin\", item: T, index: number): void;\n  (e: \"remove\", item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div data-testid=\"pl-element-list-item\" @click=\"(event) => emit('click', event)\">\n    <div v-if=\"hasBeforeSlot\" data-testid=\"pl-element-list-item-before\" :class=\"beforeClass\">\n      <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n    <div\n      data-testid=\"pl-element-list-item-card\"\n      :class=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        data-testid=\"pl-element-list-item-head\"\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\n        ]\"\n        @click=\"isExpandable && emit('expand', props.item, props.index)\"\n      >\n        <div v-if=\"props.showDragHandle || isExpandable\" :class=\"$style.headIcons\">\n          <div\n            v-if=\"props.showDragHandle\"\n            data-testid=\"pl-element-list-item-drag\"\n            :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]\"\n            :data-draggable=\"props.isDraggable\"\n          >\n            <PlIcon16 name=\"drag-dots\" />\n          </div>\n          <PlIcon16\n            v-if=\"isExpandable\"\n            data-testid=\"pl-element-list-item-expand\"\n            :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n            name=\"chevron-down\"\n          />\n        </div>\n\n        <div data-testid=\"pl-element-list-item-title\" :class=\"$style.title\">\n          <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n        </div>\n\n        <div\n          data-testid=\"pl-element-list-item-actions\"\n          :class=\"[$style.actions, $style.showOnHover]\"\n        >\n          <div\n            v-if=\"props.isToggable\"\n            data-testid=\"pl-element-list-item-toggle\"\n            :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n            @click.stop=\"emit('toggle', props.item, props.index)\"\n          >\n            <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isPinnable\"\n            data-testid=\"pl-element-list-item-pin\"\n            :class=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\n            ]\"\n            @click.stop=\"emit('pin', props.item, props.index)\"\n          >\n            <PlIcon24 name=\"pin\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isRemovable\"\n            data-testid=\"pl-element-list-item-remove\"\n            :class=\"[$style.action, $style.clickable]\"\n            @click.stop=\"emit('remove', props.item, props.index)\"\n          >\n            <PlIcon16 name=\"close\" />\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"hasContentSlot && props.isExpanded\"\n        data-testid=\"pl-element-list-item-content\"\n        :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n      >\n        <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n    </div>\n    <div v-if=\"hasAfterSlot\" data-testid=\"pl-element-list-item-after\" :class=\"afterClass\">\n      <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use \"../../assets/variables.scss\" as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active);\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.headIcons {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  height: 24px;\n  flex: 0 0 auto;\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlElementList/PlElementListItem.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementListItem.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n  titleClass: string | string[] | null;\n  contentClass: string | string[] | null;\n  afterClass: string | string[] | null;\n  beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n  after?: (props: { item: T; index: number }) => unknown;\n  before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n  (e: \"click\", item: MouseEvent): void;\n  (e: \"expand\", item: T, index: number): void;\n  (e: \"toggle\", item: T, index: number): void;\n  (e: \"pin\", item: T, index: number): void;\n  (e: \"remove\", item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div @click=\"(event) => emit('click', event)\">\n    <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n      <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n    <div\n      :class=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\n        ]\"\n        @click=\"isExpandable && emit('expand', props.item, props.index)\"\n      >\n        <div v-if=\"props.showDragHandle || isExpandable\" :class=\"$style.headIcons\">\n          <div\n            v-if=\"props.showDragHandle\"\n            :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]\"\n            :data-draggable=\"props.isDraggable\"\n          >\n            <PlIcon16 name=\"drag-dots\" />\n          </div>\n          <PlIcon16\n            v-if=\"isExpandable\"\n            :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n            name=\"chevron-down\"\n          />\n        </div>\n\n        <div :class=\"$style.title\">\n          <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n        </div>\n\n        <div :class=\"[$style.actions, $style.showOnHover]\">\n          <div\n            v-if=\"props.isToggable\"\n            :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n            @click.stop=\"emit('toggle', props.item, props.index)\"\n          >\n            <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isPinnable\"\n            :class=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\n            ]\"\n            @click.stop=\"emit('pin', props.item, props.index)\"\n          >\n            <PlIcon24 name=\"pin\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isRemovable\"\n            :class=\"[$style.action, $style.clickable]\"\n            @click.stop=\"emit('remove', props.item, props.index)\"\n          >\n            <PlIcon16 name=\"close\" />\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"hasContentSlot && props.isExpanded\"\n        :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n      >\n        <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n    </div>\n    <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n      <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use \"../../assets/variables.scss\" as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active);\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.headIcons {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  height: 24px;\n  flex: 0 0 auto;\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlElementListItem.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n  titleClass: string | string[] | null;\n  contentClass: string | string[] | null;\n  afterClass: string | string[] | null;\n  beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n  after?: (props: { item: T; index: number }) => unknown;\n  before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n  (e: \"click\", item: MouseEvent): void;\n  (e: \"expand\", item: T, index: number): void;\n  (e: \"toggle\", item: T, index: number): void;\n  (e: \"pin\", item: T, index: number): void;\n  (e: \"remove\", item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div data-testid=\"pl-element-list-item\" @click=\"(event) => emit('click', event)\">\n    <div v-if=\"hasBeforeSlot\" data-testid=\"pl-element-list-item-before\" :class=\"beforeClass\">\n      <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n    <div\n      data-testid=\"pl-element-list-item-card\"\n      :class=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        data-testid=\"pl-element-list-item-head\"\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\n        ]\"\n        @click=\"isExpandable && emit('expand', props.item, props.index)\"\n      >\n        <div v-if=\"props.showDragHandle || isExpandable\" :class=\"$style.headIcons\">\n          <div\n            v-if=\"props.showDragHandle\"\n            data-testid=\"pl-element-list-item-drag\"\n            :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]\"\n            :data-draggable=\"props.isDraggable\"\n          >\n            <PlIcon16 name=\"drag-dots\" />\n          </div>\n          <PlIcon16\n            v-if=\"isExpandable\"\n            data-testid=\"pl-element-list-item-expand\"\n            :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n            name=\"chevron-down\"\n          />\n        </div>\n\n        <div data-testid=\"pl-element-list-item-title\" :class=\"$style.title\">\n          <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n        </div>\n\n        <div\n          data-testid=\"pl-element-list-item-actions\"\n          :class=\"[$style.actions, $style.showOnHover]\"\n        >\n          <div\n            v-if=\"props.isToggable\"\n            data-testid=\"pl-element-list-item-toggle\"\n            :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n            @click.stop=\"emit('toggle', props.item, props.index)\"\n          >\n            <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isPinnable\"\n            data-testid=\"pl-element-list-item-pin\"\n            :class=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\n            ]\"\n            @click.stop=\"emit('pin', props.item, props.index)\"\n          >\n            <PlIcon24 name=\"pin\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isRemovable\"\n            data-testid=\"pl-element-list-item-remove\"\n            :class=\"[$style.action, $style.clickable]\"\n            @click.stop=\"emit('remove', props.item, props.index)\"\n          >\n            <PlIcon16 name=\"close\" />\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"hasContentSlot && props.isExpanded\"\n        data-testid=\"pl-element-list-item-content\"\n        :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n      >\n        <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n    </div>\n    <div v-if=\"hasAfterSlot\" data-testid=\"pl-element-list-item-after\" :class=\"afterClass\">\n      <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use \"../../assets/variables.scss\" as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active);\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.headIcons {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  height: 24px;\n  flex: 0 0 auto;\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"mappings":""}