@milaboratories/uikit 2.15.43 → 2.16.1

package/dist/components/PlEditableTitle/PlEditableTitle.js

@@ -1,7 +1,6 @@
 import e from "./PlEditableTitle.vue2.js";
-//#region src/components/PlEditableTitle/PlEditableTitle.vue
+// src/components/PlEditableTitle/PlEditableTitle.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=PlEditableTitle.js.map

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\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":""}
+{"version":3,"file":"PlEditableTitle.js","names":["_sfc_main","PlEditableTitle_vue_vue_type_script_setup_true_lang_default","PlEditableTitle_default"],"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.vue2.js

@@ -1,13 +1,13 @@
 import { useTransformedModel as e } from "../../composition/useTransformedModel.js";
 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
+// src/components/PlEditableTitle/PlEditableTitle.vue?vue&type=script&setup=true&lang.ts
 var y = {
 	key: 0,
 	"data-testid": "pl-editable-title-prefix"
-}, b = ["placeholder"], x = /* @__PURE__ */ o({
+}, b = ["placeholder"], x = /*@__PURE__*/ o({
 	__name: "PlEditableTitle",
-	props: /* @__PURE__ */ s({
+	props: /*@__PURE__*/ s({
 		placeholder: { default: "Title" },
 		maxWidth: { default: "80%" },
 		prefix: { default: void 0 },
@@ -61,7 +61,6 @@ var y = {
 		}, p(m(S).error), 3)) : r("", !0)], 6));
 	}
 });
-//#endregion
 export { x as default };
 
 //# sourceMappingURL=PlEditableTitle.vue2.js.map

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\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"}
+{"version":3,"file":"PlEditableTitle.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","style","_normalizeStyle","_createElementVNode","_toDisplayString","_createCommentVNode","_withDirectives","_withKeys","_vModelText","pl_editable_title_module_default","_hoisted_1","_hoisted_2","PlEditableTitle_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","model","useModel","__props","props","local","useTransformedModel","v","inputRef","ref","computedStyle","computed","save","onMounted","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","_cache","toDisplayString","createCommentVNode","withDirectives","$event","withKeys","args","ev","vModelText"],"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,IAAMmB,IAAQnB,EAAmBqB,GAAA,YAAC,GAE5BC,IAAQD,GAiDRE,IAAQC,EAAoBL,GAAO;GACvC,SAAS;IACP,OAAO;GACT;GACA,QAAQ,MAAc;IACpB,IAAI,OAAOM,KAAM,UACf,MAAM,MAAM,0BAA0B;IAGxC,IAAIH,EAAM,aAAaG,EAAE,SAASH,EAAM,WACtC,MAAM,MAAM,uBAAuBA,EAAM,UAAU,YAAY;IAGjE,IAAIA,EAAM,aAAaG,EAAE,SAASH,EAAM,WACtC,MAAM,MAAM,uBAAuBA,EAAM,UAAU,YAAY;IAOjE,OAJI,OAAOA,EAAM,YAAa,cAC5BA,EAAM,SAASG,CAAC,GAGXA,EAAE,KAAK;GAChB;EACF,CAAC,GAEKC,IAAWC,EAAsB,GAEjCC,IAAgBC,SAAgB,EACpC,UAAUP,EAAM,YAAY,MAC9B,EAAE,GAEIQ,UAAa;GAEjB,AADA,EAAM,QAAQP,EAAM,SAAS,CAACA,EAAM,QAAQA,EAAM,QAAQJ,EAAM,OAChEI,EAAM,MAAM;EACd;E,OAEAQ,QAAgB;GACd,AAAIT,EAAM,aACRI,EAAS,OAAO,MAAM;EAE1B,CAAC,I,UAICzB,EAAA,GAAAC,EAqBM,OAAA;GApBJ,OAAKC,EAAA,CAAC,qBACEC,EAAAC,CAAA,CAAK,CAAC,SAAS,CAAA;GACtB,OAAKC,EAAEsB,EAAA,KAAa;GACrB,eAAY;E,IAEZrB,EAWM,OAAA;GAXA,OAAKJ,EAAEC,EAAAC,CAAA,CAAK,CAAC,SAAS;GAAG,SAAK,AAAAiC,EAAA,aAAQZ,EAAA,OAAU,MAAK;E,IAC7CL,EAAA,UAAZpB,EAAA,GAAAC,EAA2F,QAA3FY,GAA2FN,EAA7Ba,EAAA,OAAO,KAAI,CAAA,IAAK,QAAM,CAAA,K,WACpFX,EAAAH,EAQE,SAAA;GAPI,SAAA;GAAJ,KAAImB;GACK,uBAAA,AAAAY,EAAA,QAAA,MAAA,EAAAf,CAAA,CAAK,CAAC,QAAKmB;GACnB,aAAarB,EAAA;GACd,eAAY;GACX,YAAUS;GACV,WAAO,C,YAAS,GAAAc,MAAAxC,EAAAmB,CAAA,CAAK,CAAC,SAANnB,EAAAmB,CAAA,CAAK,CAAC,MAAK,GAAAqB,CAAA,GAAA,CAAA,QAAA,CAAA,GACX,AAAAN,EAAA,OAAA3B,GAAA,MAAQkC,EAAG,QAA6B,KAAI,GAAA,CAAA,OAAA,CAAA,C;E,kBALpD,CAAAjC,GAAAR,EAAAmB,CAAA,CAAK,CAAC,KAAK,C,SAQbnB,EAAAmB,CAAA,CAAK,CAAC,SAAjBtB,EAAA,GAAAC,EAEM,OAAA;;GAFmB,OAAKC,EAAEC,EAAAC,CAAA,CAAK,CAAC,KAAK;GAAE,eAAY;EACpD,GAAAG,EAAAJ,EAAAmB,CAAA,CAAK,CAAC,KAAK,GAAA,CAAA,K"}

package/dist/components/PlEditableTitle/index.js

@@ -1 +1 @@
-import "./PlEditableTitle.js";
+export { default as PlEditableTitle } from "./PlEditableTitle.js";

package/dist/components/PlEditableTitle/pl-editable-title.module.js

@@ -1,9 +1,9 @@
-import './pl-editable-title.css';var e = {
-	component: "_component_1w6b3_1",
-	container: "_container_1w6b3_15",
-	error: "_error_1w6b3_69"
+import './pl-editable-title.css';// src/components/PlEditableTitle/pl-editable-title.module.scss
+var e = "_component_1w6b3_1", t = "_container_1w6b3_15", n = "_error_1w6b3_69", r = {
+	component: e,
+	container: t,
+	error: n
 };
-//#endregion
-export { e as default };
+export { e as component, t as container, r as default, n as error };
 
 //# sourceMappingURL=pl-editable-title.module.js.map

package/dist/components/PlEditableTitle/pl-editable-title.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"pl-editable-title.module.js","names":[],"sources":["../../../src/components/PlEditableTitle/pl-editable-title.module.scss"],"sourcesContent":["@use \"../../assets/mixins.scss\" as *;\n\n.component {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n\n  --mask-icon-bg-color: transparent;\n  --mask-size: 24px;\n\n  &:hover {\n    --mask-icon-bg-color: var(--ic-02);\n  }\n\n  &:focus-within:not(&:hover) {\n    --mask-icon-bg-color: transparent;\n  }\n\n  .container {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    gap: 0;\n    align-items: center;\n    margin-right: calc(var(--mask-size));\n\n    span {\n      font-size: 28px;\n      font-weight: 500;\n      line-height: 32px;\n      letter-spacing: -0.56px;\n      white-space: nowrap;\n    }\n\n    input {\n      outline: none;\n      border: none;\n      text-overflow: ellipsis;\n      cursor: text;\n      field-sizing: content;\n      font-size: 28px;\n      font-weight: 500;\n      line-height: 38px;\n      letter-spacing: -0.56px;\n      padding-top: 4px;\n      padding-bottom: 4px;\n      padding-right: 4px;\n      margin: 0;\n      font-family: var(--font-family-base);\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      &::placeholder {\n        color: var(--txt-mask);\n      }\n    }\n\n    &::before {\n      content: \"\";\n      @include mask-var(url(../../assets/icons/icon-assets-min/24_edit.svg));\n      position: absolute;\n      right: calc((var(--mask-size)) * -1);\n      bottom: 6px;\n      background-color: var(--mask-icon-bg-color);\n      cursor: pointer;\n    }\n  }\n\n  .error {\n    position: absolute;\n    bottom: -4px;\n    transform: translateY(100%);\n    white-space: nowrap;\n    @include field-error();\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"pl-editable-title.module.js","names":["component","container","error","pl_editable_title_module_default"],"sources":["../../../src/components/PlEditableTitle/pl-editable-title.module.scss"],"sourcesContent":["@use \"../../assets/mixins.scss\" as *;\n\n.component {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n\n  --mask-icon-bg-color: transparent;\n  --mask-size: 24px;\n\n  &:hover {\n    --mask-icon-bg-color: var(--ic-02);\n  }\n\n  &:focus-within:not(&:hover) {\n    --mask-icon-bg-color: transparent;\n  }\n\n  .container {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    gap: 0;\n    align-items: center;\n    margin-right: calc(var(--mask-size));\n\n    span {\n      font-size: 28px;\n      font-weight: 500;\n      line-height: 32px;\n      letter-spacing: -0.56px;\n      white-space: nowrap;\n    }\n\n    input {\n      outline: none;\n      border: none;\n      text-overflow: ellipsis;\n      cursor: text;\n      field-sizing: content;\n      font-size: 28px;\n      font-weight: 500;\n      line-height: 38px;\n      letter-spacing: -0.56px;\n      padding-top: 4px;\n      padding-bottom: 4px;\n      padding-right: 4px;\n      margin: 0;\n      font-family: var(--font-family-base);\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      &::placeholder {\n        color: var(--txt-mask);\n      }\n    }\n\n    &::before {\n      content: \"\";\n      @include mask-var(url(../../assets/icons/icon-assets-min/24_edit.svg));\n      position: absolute;\n      right: calc((var(--mask-size)) * -1);\n      bottom: 6px;\n      background-color: var(--mask-icon-bg-color);\n      cursor: pointer;\n    }\n  }\n\n  .error {\n    position: absolute;\n    bottom: -4px;\n    transform: translateY(100%);\n    white-space: nowrap;\n    @include field-error();\n  }\n}\n"],"mappings":""}

package/dist/components/PlElementList/PlElementList.js

@@ -1,8 +1,7 @@
 import e from "../../_virtual/_plugin-vue_export-helper.js";
 import t from "./PlElementList.vue2.js";
 import n from "./PlElementList.style.js";
-var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
-//#endregion
+var r = /*#__PURE__*/ e(t, [["__cssModules", { $style: n }]]);
 export { r as default };
 
 //# sourceMappingURL=PlElementList.js.map

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 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":""}
+{"version":3,"file":"PlElementList.js","names":["style0","_sfc_main","_plugin_vue_export_helper_default","PlElementList_vue_vue_type_script_setup_true_lang_default","PlElementList_vue_vue_type_style_index_0_lang_module_default","PlElementList_default","\"$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":""}

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

@@ -1,9 +1,9 @@
-import './PlElementList.vue.css';var e = {
-	root: "_root_11nk6_2",
-	list: "_list_11nk6_3",
-	item: "_item_11nk6_10"
+import './PlElementList.style.css';// src/components/PlElementList/PlElementList.vue?vue&type=style&index=0&lang.module.css
+var e = "_root_11nk6_2", t = "_list_11nk6_3", n = "_item_11nk6_10", r = {
+	root: e,
+	list: t,
+	item: n
 };
-//#endregion
-export { e as default };
+export { r as default, n as item, t as list, e as root };
 
 //# sourceMappingURL=PlElementList.style.js.map

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 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":""}
+{"version":3,"file":"PlElementList.vue_vue_type_style_index_0_lang.module.js","names":["root","list","item","PlElementList_vue_vue_type_style_index_0_lang_module_default"],"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.vue2.js

@@ -3,10 +3,10 @@ import { moveElements as t } from "./utils.js";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as ee, createSlots as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, shallowRef as m, unref as h, useModel as te, useSlots as ne, watch as re, withCtx as g } from "vue";
 import { isFunction as _, shallowHash as v } from "@milaboratories/helpers";
 import { useSortable as ie } from "@vueuse/integrations/useSortable";
-//#region src/components/PlElementList/PlElementList.vue?vue&type=script&setup=true&lang.ts
-var y = /* @__PURE__ */ c({
+// src/components/PlElementList/PlElementList.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ c({
 	__name: "PlElementList",
-	props: /* @__PURE__ */ l({
+	props: /*@__PURE__*/ l({
 		getItemKey: {
 			type: Function,
 			default: (e) => JSON.stringify(e)
@@ -135,7 +135,7 @@ var y = /* @__PURE__ */ c({
 		items: { required: !0 },
 		itemsModifiers: {}
 	}),
-	emits: /* @__PURE__ */ l(["itemClick"], ["update:items"]),
+	emits: /*@__PURE__*/ l(["itemClick"], ["update:items"]),
 	setup(c, { emit: l }) {
 		let y = te(c, "items"), b = c, x = l, S = ne(), C = r(() => b.disableDragging !== !0), w = r(() => y.value.map((e, t) => [t, e]).filter(([e, t]) => V(t, e))), ae = r(() => w.value.length > 0), T = r(() => y.value.map((e, t) => [t, e]).filter(([e, t]) => !V(t, e))), E = r(() => T.value.length > 0), D = m(), O = m(), k = m(), A = (e) => `${oe.value}-${b.getItemKey(e[1], e[0])}`, j = r(() => w.value.map(A)), M = r(() => T.value.map(A)), oe = r((e) => {
 			let t = y.value.map(b.getItemKey);
@@ -367,7 +367,6 @@ var y = /* @__PURE__ */ c({
 		]))), 128))], 2)) : a("", !0)], 2));
 	}
 });
-//#endregion
 export { y as default };
 
 //# sourceMappingURL=PlElementList.vue2.js.map

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 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":"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"}
+{"version":3,"file":"PlElementList.vue_vue_type_script_setup_true_lang.js","names":["$style","_useModel","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_renderList","_createBlock","PlElementListItem","_unref","_createSlots","_withCtx","_renderSlot","_createCommentVNode","PlElementListItem_default","PlElementList_vue_vue_type_script_setup_true_lang_default","item","\"items\"","\"itemsModifiers\"","__emit","itemsRef","useModel","__props","props","emits","slots","useSlots","dndSortingEnabled","computed","pinnedItemsRef","index","isPinnedItem","hasPinnedItems","unpinnedItemsRef","hasUnpinnedItems","domProjectionItemsRef","shallowRef","pinnedContainerRef","unpinnedContainerRef","getKey","versionRef","entry","pinnedKeysRef","unpinnedKeysRef","currentKeys","oldVersion","shallowHash","domProjectionKeys","domProjectionKeysSet","i","createSortable","sortable","useSortable","elRef","evt","moveItems","getOffset","watch","toggler","disabled","on","oldIndex","newIndex","afterUpdateDom","moveElements","isActiveItem","isDraggableItem","isRemovableItem","isToggableItem","isFunction","isToggledItem","isPinnableItem","isExpandableItem","isExpandedItem","handleExpand","handleToggle","handlePin","alreadyPinned","originalIndex","handleRemove","getClassFunction","propsItemClass","getItemClass","getItemClassTitle","getItemClassContent","getItemClassBefore","getItemClassAfter","openBlock","createElementBlock","normalizeClass","_ctx","createElementVNode","Fragment","renderList","createBlock","pinnedIndex","unref","createSlots","withCtx","renderSlot","unpinnedIndex","createCommentVNode"],"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":"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"}

package/dist/components/PlElementList/PlElementListItem.js

@@ -1,8 +1,7 @@
 import e from "../../_virtual/_plugin-vue_export-helper.js";
 import t from "./PlElementListItem.vue2.js";
 import n from "./PlElementListItem.style.js";
-var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
-//#endregion
+var r = /*#__PURE__*/ e(t, [["__cssModules", { $style: n }]]);
 export { r as default };
 
 //# sourceMappingURL=PlElementListItem.js.map

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 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":""}
+{"version":3,"file":"PlElementListItem.js","names":["style0","_sfc_main","_plugin_vue_export_helper_default","PlElementListItem_vue_vue_type_script_setup_true_lang_default","PlElementListItem_vue_vue_type_style_index_0_lang_module_default","PlElementListItem_default","\"$style\""],"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

@@ -1,23 +1,23 @@
-import './PlElementListItem.vue.css';var e = {
-	root: "_root_14opm_4",
-	opened: "_opened_14opm_34",
-	disabled: "_disabled_14opm_38",
-	pinned: "_pinned_14opm_45",
-	active: "_active_14opm_49",
-	head: "_head_14opm_55",
-	headIcons: "_headIcons_14opm_65",
-	contentChevron: "_contentChevron_14opm_73",
-	title: "_title_14opm_86",
-	body: "_body_14opm_94",
-	actions: "_actions_14opm_106",
-	action: "_action_14opm_106",
-	activated: "_activated_14opm_134",
-	disable: "_disable_14opm_38",
-	clickable: "_clickable_14opm_144",
-	draggable: "_draggable_14opm_148",
-	showOnHover: "_showOnHover_14opm_152"
+import './PlElementListItem.style.css';// src/components/PlElementList/PlElementListItem.vue?vue&type=style&index=0&lang.module.css
+var e = "_root_14opm_4", t = "_opened_14opm_34", n = "_disabled_14opm_38", r = "_pinned_14opm_45", i = "_active_14opm_49", a = "_head_14opm_55", o = "_headIcons_14opm_65", s = "_contentChevron_14opm_73", c = "_title_14opm_86", l = "_body_14opm_94", u = "_actions_14opm_106", d = "_action_14opm_106", f = "_activated_14opm_134", p = "_disable_14opm_38", m = "_clickable_14opm_144", h = "_draggable_14opm_148", g = "_showOnHover_14opm_152", _ = {
+	root: e,
+	opened: t,
+	disabled: n,
+	pinned: r,
+	active: i,
+	head: a,
+	headIcons: o,
+	contentChevron: s,
+	title: c,
+	body: l,
+	actions: u,
+	action: d,
+	activated: f,
+	disable: p,
+	clickable: m,
+	draggable: h,
+	showOnHover: g
 };
-//#endregion
-export { e as default };
+export { d as action, u as actions, f as activated, i as active, l as body, m as clickable, s as contentChevron, _ as default, p as disable, n as disabled, h as draggable, a as head, o as headIcons, t as opened, r as pinned, e as root, g as showOnHover, c as title };
 
 //# sourceMappingURL=PlElementListItem.style.js.map