@milaboratories/uikit 2.11.5 → 2.11.7

package/dist/components/DataTable/index.js

@@ -3,6 +3,7 @@ import t from "./TableComponent.js";
 import { RawData as n } from "./adapters/RawData.js";
 import { AsyncData as r } from "./adapters/AsyncData.js";
 import { computed as i, h as a, reactive as o, unref as s } from "vue";
+//#region src/components/DataTable/index.ts
 var c = /* @__PURE__ */ e({
 	AsyncData: () => r,
 	Component: () => t,
@@ -18,7 +19,6 @@ function l(e) {
 function u(e) {
 	return a(t, { settings: Object.freeze(e) });
 }
-/** * Adapters ***/
 function d(e, t) {
 	let r = new n(e, t.resolveRowHeight, t.resolvePrimaryKey);
 	return {
@@ -29,16 +29,11 @@ function d(e, t) {
 function f(e, t) {
 	return i(() => d(s(e), s(t)));
 }
-/**
-* @deprecated
-* @param rows
-* @param raw
-* @returns
-*/
 function p(e, n) {
 	let r = o({ settings: i(() => d(s(e), s(n))) });
 	return i(() => a(t, r));
 }
+//#endregion
 export { c as DataTable_exports };
 
 //# sourceMappingURL=index.js.map

package/dist/components/DataTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/DataTable/index.ts"],"sourcesContent":["import type { TableSettings } from \"./types\";\nimport Component from \"./TableComponent.vue\";\nimport type * as Types from \"./types\";\nimport type { RawTableSettings } from \"./types\";\nimport type { ComputedRef } from \"vue\";\nimport { computed, h, reactive, unref } from \"vue\";\nimport { RawData } from \"./adapters/RawData\";\nimport type { MaybeRef } from \"../../types\";\nexport { AsyncData } from \"./adapters/AsyncData\";\n\ntype AnyRef<T> = MaybeRef<T> | ComputedRef<T>;\n\nexport function settings<D extends Types.DataRow>(tableSettings: TableSettings<D>): TableSettings {\n  return Object.freeze(tableSettings) as TableSettings;\n}\n\nexport function factory<const S extends TableSettings>(tableSettings: S) {\n  return h(Component, { settings: Object.freeze(tableSettings) });\n}\n\nexport { Component };\n\nexport { Types };\n\n/** * Adapters ***/\n\nexport function rawDataSettings<D extends Types.DataRow>(\n  rows: D[],\n  rawSettings: Types.RawTableSettings<D>,\n): TableSettings {\n  const dataSource = new RawData<D>(\n    rows,\n    rawSettings.resolveRowHeight,\n    rawSettings.resolvePrimaryKey,\n  );\n  return { ...rawSettings, dataSource } as TableSettings;\n}\n\nexport function useRawData<D extends Types.DataRow>(\n  rowsRef: AnyRef<D[]>,\n  raw: MaybeRef<RawTableSettings<D>>,\n) {\n  return computed(() => {\n    const rows = unref(rowsRef);\n    return rawDataSettings(rows, unref(raw));\n  });\n}\n\n/**\n * @deprecated\n * @param rows\n * @param raw\n * @returns\n */\nexport function useRawDataComponent<D extends Types.DataRow>(\n  rowsRef: AnyRef<D[]>,\n  raw: MaybeRef<RawTableSettings<D>>,\n) {\n  const settings = computed(() => {\n    const rows = unref(rowsRef);\n    return rawDataSettings(rows, unref(raw));\n  });\n\n  const props = reactive({\n    settings,\n  });\n\n  return computed(() => h(Component, props));\n}\n"],"mappings":";;;;;;;;;;;;;;AAYA,SAAgB,EAAkC,GAAgD;AAChG,QAAO,OAAO,OAAO,EAAc;;AAGrC,SAAgB,EAAuC,GAAkB;AACvE,QAAO,EAAE,GAAW,EAAE,UAAU,OAAO,OAAO,EAAc,EAAE,CAAC;;;AASjE,SAAgB,EACd,GACA,GACe;CACf,IAAM,IAAa,IAAI,EACrB,GACA,EAAY,kBACZ,EAAY,kBACb;AACD,QAAO;EAAE,GAAG;EAAa;EAAY;;AAGvC,SAAgB,EACd,GACA,GACA;AACA,QAAO,QAEE,EADM,EAAM,EAAQ,EACE,EAAM,EAAI,CAAC,CACxC;;;;;;;;AASJ,SAAgB,EACd,GACA,GACA;CAMA,IAAM,IAAQ,EAAS,EACrB,UANe,QAER,EADM,EAAM,EAAQ,EACE,EAAM,EAAI,CAAC,CACxC,EAID,CAAC;AAEF,QAAO,QAAe,EAAE,GAAW,EAAM,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/DataTable/index.ts"],"sourcesContent":["import type { TableSettings } from \"./types\";\nimport Component from \"./TableComponent.vue\";\nimport type * as Types from \"./types\";\nimport type { RawTableSettings } from \"./types\";\nimport type { ComputedRef } from \"vue\";\nimport { computed, h, reactive, unref } from \"vue\";\nimport { RawData } from \"./adapters/RawData\";\nimport type { MaybeRef } from \"../../types\";\nexport { AsyncData } from \"./adapters/AsyncData\";\n\ntype AnyRef<T> = MaybeRef<T> | ComputedRef<T>;\n\nexport function settings<D extends Types.DataRow>(tableSettings: TableSettings<D>): TableSettings {\n  return Object.freeze(tableSettings) as TableSettings;\n}\n\nexport function factory<const S extends TableSettings>(tableSettings: S) {\n  return h(Component, { settings: Object.freeze(tableSettings) });\n}\n\nexport { Component };\n\nexport { Types };\n\n/** * Adapters ***/\n\nexport function rawDataSettings<D extends Types.DataRow>(\n  rows: D[],\n  rawSettings: Types.RawTableSettings<D>,\n): TableSettings {\n  const dataSource = new RawData<D>(\n    rows,\n    rawSettings.resolveRowHeight,\n    rawSettings.resolvePrimaryKey,\n  );\n  return { ...rawSettings, dataSource } as TableSettings;\n}\n\nexport function useRawData<D extends Types.DataRow>(\n  rowsRef: AnyRef<D[]>,\n  raw: MaybeRef<RawTableSettings<D>>,\n) {\n  return computed(() => {\n    const rows = unref(rowsRef);\n    return rawDataSettings(rows, unref(raw));\n  });\n}\n\n/**\n * @deprecated\n * @param rows\n * @param raw\n * @returns\n */\nexport function useRawDataComponent<D extends Types.DataRow>(\n  rowsRef: AnyRef<D[]>,\n  raw: MaybeRef<RawTableSettings<D>>,\n) {\n  const settings = computed(() => {\n    const rows = unref(rowsRef);\n    return rawDataSettings(rows, unref(raw));\n  });\n\n  const props = reactive({\n    settings,\n  });\n\n  return computed(() => h(Component, props));\n}\n"],"mappings":";;;;;;;;;;;;;;;AAYA,SAAgB,EAAkC,GAAgD;AAChG,QAAO,OAAO,OAAO,EAAc;;AAGrC,SAAgB,EAAuC,GAAkB;AACvE,QAAO,EAAE,GAAW,EAAE,UAAU,OAAO,OAAO,EAAc,EAAE,CAAC;;AASjE,SAAgB,EACd,GACA,GACe;CACf,IAAM,IAAa,IAAI,EACrB,GACA,EAAY,kBACZ,EAAY,kBACb;AACD,QAAO;EAAE,GAAG;EAAa;EAAY;;AAGvC,SAAgB,EACd,GACA,GACA;AACA,QAAO,QAEE,EADM,EAAM,EAAQ,EACE,EAAM,EAAI,CAAC,CACxC;;AASJ,SAAgB,EACd,GACA,GACA;CAMA,IAAM,IAAQ,EAAS,EACrB,UANe,QAER,EADM,EAAM,EAAQ,EACE,EAAM,EAAI,CAAC,CACxC,EAID,CAAC;AAEF,QAAO,QAAe,EAAE,GAAW,EAAM,CAAC"}

package/dist/components/DataTable/keys.js

@@ -1,5 +1,7 @@
 import { inject as e } from "vue";
-const t = Symbol(), n = () => e(t);
+//#region src/components/DataTable/keys.ts
+var t = Symbol(), n = () => e(t);
+//#endregion
 export { n as injectState, t as stateKey };
 
 //# sourceMappingURL=keys.js.map

package/dist/components/DataTable/keys.js.map

@@ -1 +1 @@
-{"version":3,"file":"keys.js","names":[],"sources":["../../../src/components/DataTable/keys.ts"],"sourcesContent":["import { type InjectionKey, type ComputedRef, inject } from \"vue\";\nimport type { TableSettings } from \"./types\";\nimport type { State } from \"./state\";\n\nexport const settingsKey = Symbol() as InjectionKey<ComputedRef<TableSettings>>;\n\nexport const stateKey = Symbol() as InjectionKey<State>;\n\nexport const injectState = () => inject(stateKey)!;\n"],"mappings":";AAMA,MAAa,IAAW,QAAQ,EAEnB,UAAoB,EAAO,EAAS"}
+{"version":3,"file":"keys.js","names":[],"sources":["../../../src/components/DataTable/keys.ts"],"sourcesContent":["import { type InjectionKey, type ComputedRef, inject } from \"vue\";\nimport type { TableSettings } from \"./types\";\nimport type { State } from \"./state\";\n\nexport const settingsKey = Symbol() as InjectionKey<ComputedRef<TableSettings>>;\n\nexport const stateKey = Symbol() as InjectionKey<State>;\n\nexport const injectState = () => inject(stateKey)!;\n"],"mappings":";;AAMA,IAAa,IAAW,QAAQ,EAEnB,UAAoB,EAAO,EAAS"}

package/dist/components/DataTable/state.js

@@ -3,6 +3,7 @@ import { useTableColumns as t } from "./composition/useTableColumns.js";
 import { useTableRows as n } from "./composition/useTableRows.js";
 import { computed as r, provide as i, reactive as a, watch as o } from "vue";
 import { clamp as s, deepClone as c, deepEqual as l, delay as u, resolveAwaited as d, tap as f } from "@milaboratories/helpers";
+//#region src/components/DataTable/state.ts
 var p = async (e, t) => {
 	let { scrollTop: n, bodyHeight: r } = e;
 	return await u(0), d({
@@ -99,6 +100,7 @@ function m(u) {
 		immediate: !0
 	}), i(e, b), b;
 }
+//#endregion
 export { m as createState };
 
 //# sourceMappingURL=state.js.map

package/dist/components/DataTable/state.js.map

@@ -1 +1 @@
-{"version":3,"file":"state.js","names":[],"sources":["../../../src/components/DataTable/state.ts"],"sourcesContent":["import { computed, provide, reactive, watch } from \"vue\";\nimport type {\n  TableProps,\n  TableData,\n  DataWindow,\n  PrimaryKey,\n  Row,\n  ColumnSpecSettings,\n  DataSource,\n} from \"./types\";\nimport { deepClone, deepEqual } from \"@milaboratories/helpers\";\nimport { stateKey } from \"./keys\";\nimport { clamp, delay, resolveAwaited, tap } from \"@milaboratories/helpers\";\nimport { useTableColumns } from \"./composition/useTableColumns\";\nimport { useTableRows } from \"./composition/useTableRows\";\nimport { GAP, WINDOW_DELTA } from \"./constants\";\n\nconst loadRows = async (\n  dataWindow: { scrollTop: number; bodyHeight: number },\n  dataSource: DataSource,\n) => {\n  const { scrollTop, bodyHeight } = dataWindow;\n\n  await delay(0);\n\n  return resolveAwaited({\n    rows: dataSource.getRows(scrollTop, bodyHeight),\n    dataWindow,\n  });\n};\n\nexport function createState(props: TableProps) {\n  const data = reactive<TableData>({\n    rowIndex: -1,\n    columns: [],\n    pendingLoads: 0,\n    currentWindow: undefined,\n    rows: [],\n    resize: false,\n    resizeTh: undefined,\n    dataHeight: 0,\n    bodyHeight: props.settings.height,\n    bodyWidth: 0,\n    scrollTop: 0,\n    scrollLeft: 0,\n    selectedRows: new Set<PrimaryKey>(),\n    selectedColumns: new Set<string>(),\n  });\n\n  watch(\n    () => props.settings,\n    (newSettings) => {\n      data.columns = deepClone(newSettings.columns);\n      data.currentWindow = undefined;\n      newSettings.dataSource\n        .getHeight()\n        .then((dataHeight) => {\n          data.dataHeight = dataHeight;\n          state.updateBodyHeight();\n        })\n        .catch((err) => (data.error = err));\n    },\n    { immediate: true },\n  );\n\n  const settings = computed(() => {\n    return props.settings;\n  });\n\n  const columnsWidth = computed(() => {\n    return data.columns.reduce((acc, col) => acc + col.width + GAP, 0);\n  });\n\n  const maxScrollTop = computed(() =>\n    tap(state.data.dataHeight - state.data.bodyHeight, (v) => (v > 0 ? v : 0)),\n  );\n  const maxScrollLeft = computed(() =>\n    tap(columnsWidth.value - state.data.bodyWidth, (v) => (v > 0 ? v : 0)),\n  );\n\n  const dataDimensions = computed<DataWindow & { current?: DataWindow }>(() => {\n    return {\n      bodyHeight: data.bodyHeight,\n      scrollTop: data.scrollTop,\n      current: data.currentWindow,\n    };\n  });\n\n  const tableColumns = useTableColumns({\n    data,\n    settings,\n  });\n\n  const tableRows = useTableRows(data, tableColumns);\n\n  const adjustWidth = () => {\n    const newWidth = data.columns.reduce((acc, col) => acc + col.width + GAP, 0);\n\n    const rightOffset = data.bodyWidth + data.scrollLeft;\n\n    if (newWidth < rightOffset) {\n      const last = data.columns[data.columns.length - 1];\n      last.width = last.width + (rightOffset - newWidth);\n    }\n  };\n\n  const state = {\n    data,\n    settings,\n    tableColumns,\n    tableRows,\n    adjustWidth,\n    updateOffsets(ev: { deltaY: number; deltaX: number }) {\n      this.updateScrollTop(data.scrollTop + ev.deltaY);\n      this.updateScrollLeft(data.scrollLeft + ev.deltaX);\n    },\n    getSelectedRows(): Row[] {\n      return data.rows.filter((row) => data.selectedRows.has(row.primaryKey));\n    },\n    getSelectedColumns(): ColumnSpecSettings[] {\n      return data.columns.filter((col) => data.selectedColumns.has(col.id));\n    },\n    selectRow(rowId: PrimaryKey) {\n      data.selectedRows.add(rowId);\n    },\n    unselectRow(rowId: PrimaryKey) {\n      data.selectedRows.delete(rowId);\n    },\n    selectColumn(columnId: string) {\n      data.selectedColumns.add(columnId);\n    },\n    unselectColumn(columnId: string) {\n      data.selectedColumns.delete(columnId);\n    },\n    updateScrollTop(scrollTop: number) {\n      data.scrollTop = clamp(scrollTop, 0, maxScrollTop.value);\n    },\n    updateScrollLeft(scrollLeft: number) {\n      data.scrollLeft = clamp(scrollLeft, 0, maxScrollLeft.value);\n    },\n    updateBodyHeight() {\n      const { height } = props.settings;\n      const { dataHeight } = data;\n      const bodyHeight = height > dataHeight ? dataHeight : height;\n      data.bodyHeight = bodyHeight;\n    },\n    updateDimensions(rect: { height: number; width: number }) {\n      this.updateBodyHeight();\n      state.data.bodyWidth = rect.width;\n      state.adjustWidth();\n      data.rows = [];\n      data.currentWindow = undefined;\n    },\n  };\n\n  watch(\n    dataDimensions,\n    (n, _o) => {\n      const current = n.current;\n\n      const needToLoad =\n        !current ||\n        n.scrollTop < current.scrollTop ||\n        n.scrollTop + n.bodyHeight > current.bodyHeight + current.scrollTop;\n\n      if (needToLoad) {\n        data.currentWindow = {\n          scrollTop: n.scrollTop - WINDOW_DELTA,\n          bodyHeight: n.bodyHeight + WINDOW_DELTA * 2,\n        };\n        loadRows(deepClone(data.currentWindow), settings.value.dataSource).then(\n          ({ rows, dataWindow }) => {\n            if (deepEqual(data.currentWindow, dataWindow)) {\n              data.rows = rows;\n            }\n          },\n        );\n      }\n    },\n    { deep: true, immediate: true },\n  );\n\n  provide(stateKey, state);\n\n  return state;\n}\n\nexport type State = ReturnType<typeof createState>;\n"],"mappings":";;;;;AAiBA,IAAM,IAAW,OACf,GACA,MACG;CACH,IAAM,EAAE,cAAW,kBAAe;AAIlC,QAFA,MAAM,EAAM,EAAE,EAEP,EAAe;EACpB,MAAM,EAAW,QAAQ,GAAW,EAAW;EAC/C;EACD,CAAC;;AAGJ,SAAgB,EAAY,GAAmB;CAC7C,IAAM,IAAO,EAAoB;EAC/B,UAAU;EACV,SAAS,EAAE;EACX,cAAc;EACd,eAAe,KAAA;EACf,MAAM,EAAE;EACR,QAAQ;EACR,UAAU,KAAA;EACV,YAAY;EACZ,YAAY,EAAM,SAAS;EAC3B,WAAW;EACX,WAAW;EACX,YAAY;EACZ,8BAAc,IAAI,KAAiB;EACnC,iCAAiB,IAAI,KAAa;EACnC,CAAC;AAEF,SACQ,EAAM,WACX,MAAgB;AAGf,EAFA,EAAK,UAAU,EAAU,EAAY,QAAQ,EAC7C,EAAK,gBAAgB,KAAA,GACrB,EAAY,WACT,WAAW,CACX,MAAM,MAAe;AAEpB,GADA,EAAK,aAAa,GAClB,EAAM,kBAAkB;IACxB,CACD,OAAO,MAAS,EAAK,QAAQ,EAAK;IAEvC,EAAE,WAAW,IAAM,CACpB;CAED,IAAM,IAAW,QACR,EAAM,SACb,EAEI,IAAe,QACZ,EAAK,QAAQ,QAAQ,GAAK,MAAQ,IAAM,EAAI,QAAA,GAAa,EAAE,CAClE,EAEI,IAAe,QACnB,EAAI,EAAM,KAAK,aAAa,EAAM,KAAK,aAAa,MAAO,IAAI,IAAI,IAAI,EAAG,CAC3E,EACK,IAAgB,QACpB,EAAI,EAAa,QAAQ,EAAM,KAAK,YAAY,MAAO,IAAI,IAAI,IAAI,EAAG,CACvE,EAEK,IAAiB,SACd;EACL,YAAY,EAAK;EACjB,WAAW,EAAK;EAChB,SAAS,EAAK;EACf,EACD,EAEI,IAAe,EAAgB;EACnC;EACA;EACD,CAAC,EAeI,IAAQ;EACZ;EACA;EACA;EACA,WAjBgB,EAAa,GAAM,EAAa;EAkBhD,mBAhBwB;GACxB,IAAM,IAAW,EAAK,QAAQ,QAAQ,GAAK,MAAQ,IAAM,EAAI,QAAA,GAAa,EAAE,EAEtE,IAAc,EAAK,YAAY,EAAK;AAE1C,OAAI,IAAW,GAAa;IAC1B,IAAM,IAAO,EAAK,QAAQ,EAAK,QAAQ,SAAS;AAChD,MAAK,SAAsB,IAAc;;;EAU3C,cAAc,GAAwC;AAEpD,GADA,KAAK,gBAAgB,EAAK,YAAY,EAAG,OAAO,EAChD,KAAK,iBAAiB,EAAK,aAAa,EAAG,OAAO;;EAEpD,kBAAyB;AACvB,UAAO,EAAK,KAAK,QAAQ,MAAQ,EAAK,aAAa,IAAI,EAAI,WAAW,CAAC;;EAEzE,qBAA2C;AACzC,UAAO,EAAK,QAAQ,QAAQ,MAAQ,EAAK,gBAAgB,IAAI,EAAI,GAAG,CAAC;;EAEvE,UAAU,GAAmB;AAC3B,KAAK,aAAa,IAAI,EAAM;;EAE9B,YAAY,GAAmB;AAC7B,KAAK,aAAa,OAAO,EAAM;;EAEjC,aAAa,GAAkB;AAC7B,KAAK,gBAAgB,IAAI,EAAS;;EAEpC,eAAe,GAAkB;AAC/B,KAAK,gBAAgB,OAAO,EAAS;;EAEvC,gBAAgB,GAAmB;AACjC,KAAK,YAAY,EAAM,GAAW,GAAG,EAAa,MAAM;;EAE1D,iBAAiB,GAAoB;AACnC,KAAK,aAAa,EAAM,GAAY,GAAG,EAAc,MAAM;;EAE7D,mBAAmB;GACjB,IAAM,EAAE,cAAW,EAAM,UACnB,EAAE,kBAAe;AAEvB,KAAK,aADc,IAAS,IAAa,IAAa;;EAGxD,iBAAiB,GAAyC;AAKxD,GAJA,KAAK,kBAAkB,EACvB,EAAM,KAAK,YAAY,EAAK,OAC5B,EAAM,aAAa,EACnB,EAAK,OAAO,EAAE,EACd,EAAK,gBAAgB,KAAA;;EAExB;AA+BD,QA7BA,EACE,IACC,GAAG,MAAO;EACT,IAAM,IAAU,EAAE;AAOlB,GAJE,CAAC,KACD,EAAE,YAAY,EAAQ,aACtB,EAAE,YAAY,EAAE,aAAa,EAAQ,aAAa,EAAQ,eAG1D,EAAK,gBAAgB;GACnB,WAAW,EAAE,YAAA;GACb,YAAY,EAAE,aAAA;GACf,EACD,EAAS,EAAU,EAAK,cAAc,EAAE,EAAS,MAAM,WAAW,CAAC,MAChE,EAAE,SAAM,oBAAiB;AACxB,GAAI,EAAU,EAAK,eAAe,EAAW,KAC3C,EAAK,OAAO;IAGjB;IAGL;EAAE,MAAM;EAAM,WAAW;EAAM,CAChC,EAED,EAAQ,GAAU,EAAM,EAEjB"}
+{"version":3,"file":"state.js","names":[],"sources":["../../../src/components/DataTable/state.ts"],"sourcesContent":["import { computed, provide, reactive, watch } from \"vue\";\nimport type {\n  TableProps,\n  TableData,\n  DataWindow,\n  PrimaryKey,\n  Row,\n  ColumnSpecSettings,\n  DataSource,\n} from \"./types\";\nimport { deepClone, deepEqual } from \"@milaboratories/helpers\";\nimport { stateKey } from \"./keys\";\nimport { clamp, delay, resolveAwaited, tap } from \"@milaboratories/helpers\";\nimport { useTableColumns } from \"./composition/useTableColumns\";\nimport { useTableRows } from \"./composition/useTableRows\";\nimport { GAP, WINDOW_DELTA } from \"./constants\";\n\nconst loadRows = async (\n  dataWindow: { scrollTop: number; bodyHeight: number },\n  dataSource: DataSource,\n) => {\n  const { scrollTop, bodyHeight } = dataWindow;\n\n  await delay(0);\n\n  return resolveAwaited({\n    rows: dataSource.getRows(scrollTop, bodyHeight),\n    dataWindow,\n  });\n};\n\nexport function createState(props: TableProps) {\n  const data = reactive<TableData>({\n    rowIndex: -1,\n    columns: [],\n    pendingLoads: 0,\n    currentWindow: undefined,\n    rows: [],\n    resize: false,\n    resizeTh: undefined,\n    dataHeight: 0,\n    bodyHeight: props.settings.height,\n    bodyWidth: 0,\n    scrollTop: 0,\n    scrollLeft: 0,\n    selectedRows: new Set<PrimaryKey>(),\n    selectedColumns: new Set<string>(),\n  });\n\n  watch(\n    () => props.settings,\n    (newSettings) => {\n      data.columns = deepClone(newSettings.columns);\n      data.currentWindow = undefined;\n      newSettings.dataSource\n        .getHeight()\n        .then((dataHeight) => {\n          data.dataHeight = dataHeight;\n          state.updateBodyHeight();\n        })\n        .catch((err) => (data.error = err));\n    },\n    { immediate: true },\n  );\n\n  const settings = computed(() => {\n    return props.settings;\n  });\n\n  const columnsWidth = computed(() => {\n    return data.columns.reduce((acc, col) => acc + col.width + GAP, 0);\n  });\n\n  const maxScrollTop = computed(() =>\n    tap(state.data.dataHeight - state.data.bodyHeight, (v) => (v > 0 ? v : 0)),\n  );\n  const maxScrollLeft = computed(() =>\n    tap(columnsWidth.value - state.data.bodyWidth, (v) => (v > 0 ? v : 0)),\n  );\n\n  const dataDimensions = computed<DataWindow & { current?: DataWindow }>(() => {\n    return {\n      bodyHeight: data.bodyHeight,\n      scrollTop: data.scrollTop,\n      current: data.currentWindow,\n    };\n  });\n\n  const tableColumns = useTableColumns({\n    data,\n    settings,\n  });\n\n  const tableRows = useTableRows(data, tableColumns);\n\n  const adjustWidth = () => {\n    const newWidth = data.columns.reduce((acc, col) => acc + col.width + GAP, 0);\n\n    const rightOffset = data.bodyWidth + data.scrollLeft;\n\n    if (newWidth < rightOffset) {\n      const last = data.columns[data.columns.length - 1];\n      last.width = last.width + (rightOffset - newWidth);\n    }\n  };\n\n  const state = {\n    data,\n    settings,\n    tableColumns,\n    tableRows,\n    adjustWidth,\n    updateOffsets(ev: { deltaY: number; deltaX: number }) {\n      this.updateScrollTop(data.scrollTop + ev.deltaY);\n      this.updateScrollLeft(data.scrollLeft + ev.deltaX);\n    },\n    getSelectedRows(): Row[] {\n      return data.rows.filter((row) => data.selectedRows.has(row.primaryKey));\n    },\n    getSelectedColumns(): ColumnSpecSettings[] {\n      return data.columns.filter((col) => data.selectedColumns.has(col.id));\n    },\n    selectRow(rowId: PrimaryKey) {\n      data.selectedRows.add(rowId);\n    },\n    unselectRow(rowId: PrimaryKey) {\n      data.selectedRows.delete(rowId);\n    },\n    selectColumn(columnId: string) {\n      data.selectedColumns.add(columnId);\n    },\n    unselectColumn(columnId: string) {\n      data.selectedColumns.delete(columnId);\n    },\n    updateScrollTop(scrollTop: number) {\n      data.scrollTop = clamp(scrollTop, 0, maxScrollTop.value);\n    },\n    updateScrollLeft(scrollLeft: number) {\n      data.scrollLeft = clamp(scrollLeft, 0, maxScrollLeft.value);\n    },\n    updateBodyHeight() {\n      const { height } = props.settings;\n      const { dataHeight } = data;\n      const bodyHeight = height > dataHeight ? dataHeight : height;\n      data.bodyHeight = bodyHeight;\n    },\n    updateDimensions(rect: { height: number; width: number }) {\n      this.updateBodyHeight();\n      state.data.bodyWidth = rect.width;\n      state.adjustWidth();\n      data.rows = [];\n      data.currentWindow = undefined;\n    },\n  };\n\n  watch(\n    dataDimensions,\n    (n, _o) => {\n      const current = n.current;\n\n      const needToLoad =\n        !current ||\n        n.scrollTop < current.scrollTop ||\n        n.scrollTop + n.bodyHeight > current.bodyHeight + current.scrollTop;\n\n      if (needToLoad) {\n        data.currentWindow = {\n          scrollTop: n.scrollTop - WINDOW_DELTA,\n          bodyHeight: n.bodyHeight + WINDOW_DELTA * 2,\n        };\n        loadRows(deepClone(data.currentWindow), settings.value.dataSource).then(\n          ({ rows, dataWindow }) => {\n            if (deepEqual(data.currentWindow, dataWindow)) {\n              data.rows = rows;\n            }\n          },\n        );\n      }\n    },\n    { deep: true, immediate: true },\n  );\n\n  provide(stateKey, state);\n\n  return state;\n}\n\nexport type State = ReturnType<typeof createState>;\n"],"mappings":"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"}

package/dist/components/DropdownListItem.js

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

package/dist/components/DropdownListItem.vue2.js

@@ -1,6 +1,7 @@
 import e from "../assets/images/24_checkbox-light-enabled-unchecked.js";
 import t from "../assets/images/24_checkbox-light-enabled-checked.js";
 import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, toDisplayString as l } from "vue";
+//#region src/components/DropdownListItem.vue?vue&type=script&setup=true&lang.ts
 var u = ["innerHTML"], d = { class: "dropdown-list-item__title-container" }, f = { class: "dropdown-list-item__title text-s" }, p = {
 	key: 0,
 	class: "dropdown-list-item__description text-description"
@@ -44,6 +45,7 @@ var u = ["innerHTML"], d = { class: "dropdown-list-item__title-container" }, f =
 		], 2));
 	}
 });
+//#endregion
 export { h as default };
 
 //# sourceMappingURL=DropdownListItem.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownListItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/DropdownListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport CheckboxUncheckedSvg from \"../assets/images/24_checkbox-light-enabled-unchecked.svg?raw\";\nimport CheckboxCheckedSvg from \"../assets/images/24_checkbox-light-enabled-checked.svg?raw\";\nimport type { ListOptionNormalized } from \"../types\";\n\nconst props = withDefaults(\n  defineProps<{\n    option: ListOptionNormalized;\n    isSelected: boolean;\n    size: \"small\" | \"medium\";\n    isHovered: boolean;\n    useCheckbox?: boolean;\n  }>(),\n  {\n    size: \"small\",\n    isSelected: false,\n    isHovered: false,\n    useCheckbox: false,\n  },\n);\n\nconst classes = computed<string>(() => {\n  const classItems: string[] = [];\n  if (props.size === \"small\") {\n    classItems.push(\"dropdown-list-item__small\");\n  }\n  if (props.isSelected) {\n    classItems.push(\"dropdown-list-item__selected\");\n  }\n  if (props.isHovered) {\n    classItems.push(\"hovered-item\");\n  }\n  return classItems.join(\" \");\n});\n\nconst checkboxClasses = computed(() => {\n  const classes: string[] = [\"dropdown-list-item__checkbox\", \"flex-self-start\"];\n  if (props.isSelected) {\n    classes.push(\"checked\");\n  }\n  return classes.join(\" \");\n});\n\n// Why??\nconst checkboxSvg = computed(() => (props.isSelected ? CheckboxCheckedSvg : CheckboxUncheckedSvg));\n</script>\n\n<template>\n  <div :class=\"classes\" class=\"dropdown-list-item\">\n    <!-- eslint-disable vue/no-v-html -->\n    <div v-if=\"props.useCheckbox\" :class=\"checkboxClasses\" v-html=\"checkboxSvg\" />\n    <!--eslint-enable-->\n    <div class=\"dropdown-list-item__title-container\">\n      <div class=\"dropdown-list-item__title text-s\">\n        {{ option.label }}\n      </div>\n      <div v-if=\"option.description\" class=\"dropdown-list-item__description text-description\">\n        {{ option.description }}\n      </div>\n    </div>\n    <div\n      v-if=\"!props.useCheckbox && props.isSelected\"\n      class=\"dropdown-list-item__icon flex-self-start\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GAgBR,IAAU,QAAuB;GACrC,IAAM,IAAuB,EAAE;AAU/B,UATI,EAAM,SAAS,WACjB,EAAW,KAAK,4BAA4B,EAE1C,EAAM,cACR,EAAW,KAAK,+BAA+B,EAE7C,EAAM,aACR,EAAW,KAAK,eAAe,EAE1B,EAAW,KAAK,IAAI;IAC3B,EAEI,IAAkB,QAAe;GACrC,IAAM,IAAoB,CAAC,gCAAgC,kBAAkB;AAI7E,UAHI,EAAM,cACR,EAAQ,KAAK,UAAU,EAElB,EAAQ,KAAK,IAAI;IACxB,EAGI,IAAc,QAAgB,EAAM,aAAa,IAAqB,EAAsB;yBAIhG,EAgBM,OAAA,EAhBA,OAAK,EAAA,CAAE,EAAA,OAAe,qBAAoB,CAAA,EAAA,EAAA;GAEnC,EAAM,eAAA,GAAA,EAAjB,EAA8E,OAAA;;IAA/C,OAAK,EAAE,EAAA,MAAe;IAAE,WAAQ,EAAA;;GAE/D,EAOM,OAPN,GAOM,CANJ,EAEM,OAFN,GAEM,EADD,EAAA,OAAO,MAAK,EAAA,EAAA,EAEN,EAAA,OAAO,eAAA,GAAA,EAAlB,EAEM,OAFN,GAEM,EADD,EAAA,OAAO,YAAW,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;IAIhB,EAAM,eAAe,EAAM,cAAA,GAAA,EADpC,EAGE,OAHF,EAGE,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"DropdownListItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/DropdownListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport CheckboxUncheckedSvg from \"../assets/images/24_checkbox-light-enabled-unchecked.svg?raw\";\nimport CheckboxCheckedSvg from \"../assets/images/24_checkbox-light-enabled-checked.svg?raw\";\nimport type { ListOptionNormalized } from \"../types\";\n\nconst props = withDefaults(\n  defineProps<{\n    option: ListOptionNormalized;\n    isSelected: boolean;\n    size: \"small\" | \"medium\";\n    isHovered: boolean;\n    useCheckbox?: boolean;\n  }>(),\n  {\n    size: \"small\",\n    isSelected: false,\n    isHovered: false,\n    useCheckbox: false,\n  },\n);\n\nconst classes = computed<string>(() => {\n  const classItems: string[] = [];\n  if (props.size === \"small\") {\n    classItems.push(\"dropdown-list-item__small\");\n  }\n  if (props.isSelected) {\n    classItems.push(\"dropdown-list-item__selected\");\n  }\n  if (props.isHovered) {\n    classItems.push(\"hovered-item\");\n  }\n  return classItems.join(\" \");\n});\n\nconst checkboxClasses = computed(() => {\n  const classes: string[] = [\"dropdown-list-item__checkbox\", \"flex-self-start\"];\n  if (props.isSelected) {\n    classes.push(\"checked\");\n  }\n  return classes.join(\" \");\n});\n\n// Why??\nconst checkboxSvg = computed(() => (props.isSelected ? CheckboxCheckedSvg : CheckboxUncheckedSvg));\n</script>\n\n<template>\n  <div :class=\"classes\" class=\"dropdown-list-item\">\n    <!-- eslint-disable vue/no-v-html -->\n    <div v-if=\"props.useCheckbox\" :class=\"checkboxClasses\" v-html=\"checkboxSvg\" />\n    <!--eslint-enable-->\n    <div class=\"dropdown-list-item__title-container\">\n      <div class=\"dropdown-list-item__title text-s\">\n        {{ option.label }}\n      </div>\n      <div v-if=\"option.description\" class=\"dropdown-list-item__description text-description\">\n        {{ option.description }}\n      </div>\n    </div>\n    <div\n      v-if=\"!props.useCheckbox && props.isSelected\"\n      class=\"dropdown-list-item__icon flex-self-start\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GAgBR,IAAU,QAAuB;GACrC,IAAM,IAAuB,EAAE;AAU/B,UATI,EAAM,SAAS,WACjB,EAAW,KAAK,4BAA4B,EAE1C,EAAM,cACR,EAAW,KAAK,+BAA+B,EAE7C,EAAM,aACR,EAAW,KAAK,eAAe,EAE1B,EAAW,KAAK,IAAI;IAC3B,EAEI,IAAkB,QAAe;GACrC,IAAM,IAAoB,CAAC,gCAAgC,kBAAkB;AAI7E,UAHI,EAAM,cACR,EAAQ,KAAK,UAAU,EAElB,EAAQ,KAAK,IAAI;IACxB,EAGI,IAAc,QAAgB,EAAM,aAAa,IAAqB,EAAsB;yBAIhG,EAgBM,OAAA,EAhBA,OAAK,EAAA,CAAE,EAAA,OAAe,qBAAoB,CAAA,EAAA,EAAA;GAEnC,EAAM,eAAA,GAAA,EAAjB,EAA8E,OAAA;;IAA/C,OAAK,EAAE,EAAA,MAAe;IAAE,WAAQ,EAAA;;GAE/D,EAOM,OAPN,GAOM,CANJ,EAEM,OAFN,GAEM,EADD,EAAA,OAAO,MAAK,EAAA,EAAA,EAEN,EAAA,OAAO,eAAA,GAAA,EAAlB,EAEM,OAFN,GAEM,EADD,EAAA,OAAO,YAAW,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;IAIhB,EAAM,eAAe,EAAM,cAAA,GAAA,EADpC,EAGE,OAHF,EAGE,IAAA,EAAA,IAAA,GAAA"}

package/dist/components/HScroll.js

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

package/dist/components/HScroll.vue2.js

@@ -1,6 +1,7 @@
 import { useEventListener as e } from "../composition/useEventListener.js";
 import { eventListener as t } from "../helpers/dom.js";
 import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeStyle as s, openBlock as c, ref as l, unref as u } from "vue";
+//#region src/components/HScroll.vue?vue&type=script&setup=true&lang.ts
 var d = /* @__PURE__ */ o({
 	__name: "HScroll",
 	props: {
@@ -36,6 +37,7 @@ var d = /* @__PURE__ */ o({
 		}, null, 4)], 512)) : r("", !0);
 	}
 });
+//#endregion
 export { d as default };
 
 //# sourceMappingURL=HScroll.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HScroll.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/HScroll.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, unref } from \"vue\";\nimport { useEventListener } from \"../composition/useEventListener\";\nimport { eventListener } from \"../helpers/dom\";\n\nconst emit = defineEmits([\"update:scrollLeft\"]);\n\nconst props = defineProps<{\n  scrollLeft: number;\n  clientWidth: number;\n  scrollWidth: number;\n}>();\n\nconst scrollRef = ref<EventTarget>();\n\nconst ratioRef = computed(() => props.clientWidth / (props.scrollWidth || 1));\n\nconst visibleRef = computed(() => {\n  return ratioRef.value < 1;\n});\n\nconst scrollbarStyle = computed(() => {\n  const ratio = unref(ratioRef);\n  return {\n    left: props.scrollLeft * ratio + \"px\",\n    width: Math.floor(props.clientWidth * ratio) + \"px\",\n  };\n});\n\nuseEventListener(scrollRef, \"pointerdown\", (down: PointerEvent) => {\n  const s = {\n    clientX: down.clientX,\n  };\n\n  const update = (e: MouseEvent) => {\n    const dy = (e.clientX - s.clientX) / ratioRef.value;\n    emit(\"update:scrollLeft\", props.scrollLeft + dy);\n    s.clientX = e.clientX;\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const removePointerMove = eventListener(document as any, \"mousemove\", update);\n\n  [\"mouseup\", \"pointercancel\"].forEach((eventType) => {\n    document.addEventListener(eventType, removePointerMove, { once: true });\n  });\n});\n</script>\n\n<template>\n  <div v-if=\"visibleRef\" ref=\"scrollRef\" class=\"h-scroll\">\n    <div class=\"h-scroll__scrollbar\" :style=\"scrollbarStyle\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;EAKA,IAAM,IAAO,GAEP,IAAQ,GAMR,IAAY,GAAkB,EAE9B,IAAW,QAAe,EAAM,eAAe,EAAM,eAAe,GAAG,EAEvE,IAAa,QACV,EAAS,QAAQ,EACxB,EAEI,IAAiB,QAAe;GACpC,IAAM,IAAQ,EAAM,EAAS;AAC7B,UAAO;IACL,MAAM,EAAM,aAAa,IAAQ;IACjC,OAAO,KAAK,MAAM,EAAM,cAAc,EAAM,GAAG;IAChD;IACD;SAEF,EAAiB,GAAW,gBAAgB,MAAuB;GACjE,IAAM,IAAI,EACR,SAAS,EAAK,SACf,EASK,IAAoB,EAAc,UAAiB,cAPzC,MAAkB;IAChC,IAAM,KAAM,EAAE,UAAU,EAAE,WAAW,EAAS;AAE9C,IADA,EAAK,qBAAqB,EAAM,aAAa,EAAG,EAChD,EAAE,UAAU,EAAE;KAI6D;AAE7E,IAAC,WAAW,gBAAgB,CAAC,SAAS,MAAc;AAClD,aAAS,iBAAiB,GAAW,GAAmB,EAAE,MAAM,IAAM,CAAC;KACvE;IACF,YAIW,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;YAFqB;GAAJ,KAAI;GAAY,OAAM;MAC3C,EAA2D,OAAA;GAAtD,OAAM;GAAuB,OAAK,EAAE,EAAA,MAAc"}
+{"version":3,"file":"HScroll.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/HScroll.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, unref } from \"vue\";\nimport { useEventListener } from \"../composition/useEventListener\";\nimport { eventListener } from \"../helpers/dom\";\n\nconst emit = defineEmits([\"update:scrollLeft\"]);\n\nconst props = defineProps<{\n  scrollLeft: number;\n  clientWidth: number;\n  scrollWidth: number;\n}>();\n\nconst scrollRef = ref<EventTarget>();\n\nconst ratioRef = computed(() => props.clientWidth / (props.scrollWidth || 1));\n\nconst visibleRef = computed(() => {\n  return ratioRef.value < 1;\n});\n\nconst scrollbarStyle = computed(() => {\n  const ratio = unref(ratioRef);\n  return {\n    left: props.scrollLeft * ratio + \"px\",\n    width: Math.floor(props.clientWidth * ratio) + \"px\",\n  };\n});\n\nuseEventListener(scrollRef, \"pointerdown\", (down: PointerEvent) => {\n  const s = {\n    clientX: down.clientX,\n  };\n\n  const update = (e: MouseEvent) => {\n    const dy = (e.clientX - s.clientX) / ratioRef.value;\n    emit(\"update:scrollLeft\", props.scrollLeft + dy);\n    s.clientX = e.clientX;\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const removePointerMove = eventListener(document as any, \"mousemove\", update);\n\n  [\"mouseup\", \"pointercancel\"].forEach((eventType) => {\n    document.addEventListener(eventType, removePointerMove, { once: true });\n  });\n});\n</script>\n\n<template>\n  <div v-if=\"visibleRef\" ref=\"scrollRef\" class=\"h-scroll\">\n    <div class=\"h-scroll__scrollbar\" :style=\"scrollbarStyle\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAKA,IAAM,IAAO,GAEP,IAAQ,GAMR,IAAY,GAAkB,EAE9B,IAAW,QAAe,EAAM,eAAe,EAAM,eAAe,GAAG,EAEvE,IAAa,QACV,EAAS,QAAQ,EACxB,EAEI,IAAiB,QAAe;GACpC,IAAM,IAAQ,EAAM,EAAS;AAC7B,UAAO;IACL,MAAM,EAAM,aAAa,IAAQ;IACjC,OAAO,KAAK,MAAM,EAAM,cAAc,EAAM,GAAG;IAChD;IACD;SAEF,EAAiB,GAAW,gBAAgB,MAAuB;GACjE,IAAM,IAAI,EACR,SAAS,EAAK,SACf,EASK,IAAoB,EAAc,UAAiB,cAPzC,MAAkB;IAChC,IAAM,KAAM,EAAE,UAAU,EAAE,WAAW,EAAS;AAE9C,IADA,EAAK,qBAAqB,EAAM,aAAa,EAAG,EAChD,EAAE,UAAU,EAAE;KAI6D;AAE7E,IAAC,WAAW,gBAAgB,CAAC,SAAS,MAAc;AAClD,aAAS,iBAAiB,GAAW,GAAmB,EAAE,MAAM,IAAM,CAAC;KACvE;IACF,YAIW,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;YAFqB;GAAJ,KAAI;GAAY,OAAM;MAC3C,EAA2D,OAAA;GAAtD,OAAM;GAAuB,OAAK,EAAE,EAAA,MAAc"}

package/dist/components/InputRange.js

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

package/dist/components/InputRange.vue2.js

@@ -1,4 +1,5 @@
 import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeProps as i, openBlock as a, reactive as o, ref as s, toDisplayString as c, vModelText as l, watch as u, withDirectives as d } from "vue";
+//#region src/components/InputRange.vue?vue&type=script&setup=true&lang.ts
 var f = { class: "ui-input-range__separator" }, p = /* @__PURE__ */ r({
 	__name: "InputRange",
 	props: {
@@ -50,6 +51,7 @@ var f = { class: "ui-input-range__separator" }, p = /* @__PURE__ */ r({
 		], 16));
 	}
 });
+//#endregion
 export { p as default };
 
 //# sourceMappingURL=InputRange.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputRange.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../src/components/InputRange.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: [number, number];\n    separator?: string;\n  }>(),\n  {\n    separator: \"-\",\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", val: [number, number]): void;\n  (e: \"change\", val: [number, number]): void;\n}>();\n\nconst data = reactive({\n  left: props.modelValue[0],\n  right: props.modelValue[1],\n});\n\nconst isFocused = ref(false);\n\nconst classes = computed(() =>\n  isFocused.value ? \"ui-input-range-focused\" : \"ui-input-range-focused\",\n);\n\nconst valuesModel = computed({\n  get() {\n    return {\n      left: Math.min(...props.modelValue), // dangerous....\n      right: Math.max(...props.modelValue),\n    };\n  },\n  set() {},\n});\n\nwatch(\n  () => valuesModel.value,\n  (value) => (data.left = value.left) && (data.right = value.right),\n);\n\n// watch(\n//   () => props.modelValue,\n//   (value: [number, number]) => {\n//     console.log('model value updated');\n//     (data.left = value[0]), (data.right = value[1]);\n//   },\n// );\n\nfunction updateModel() {\n  emit(\"update:modelValue\", [+data.left, +data.right]);\n  emit(\"change\", [+data.left, +data.right]);\n}\n\nfunction validateInput(isLeft: boolean, event: Event) {\n  const value: string = (event.target as HTMLInputElement).value;\n  const result = /^[0-9]{0,2}$/.test(value);\n  // if there is more than 3 digits we cut last one\n  if (!result) {\n    if (isLeft) {\n      data.left = +value.slice(0, value.length - 1);\n    } else {\n      data.right = +value.slice(0, value.length - 1);\n    }\n  } else {\n    if (isLeft) {\n      data.left = +value;\n    } else {\n      data.right = +value;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- {{ data }} -->\n  <div :class=\"classes\" class=\"ui-input-range\" v-bind=\"$attrs\">\n    <input\n      v-model=\"valuesModel.left\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(true, $event)\"\n    />\n    <div class=\"ui-input-range__separator\">{{ props.separator }}</div>\n    <input\n      v-model=\"valuesModel.right\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(false, $event)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;EAGA,IAAM,IAAQ,GAUR,IAAO,GAKP,IAAO,EAAS;GACpB,MAAM,EAAM,WAAW;GACvB,OAAO,EAAM,WAAW;GACzB,CAAC,EAEI,IAAY,EAAI,GAAM,EAEtB,IAAU,SACd,EAAU,OAAQ,0BACnB,EAEK,IAAc,EAAS;GAC3B,MAAM;AACJ,WAAO;KACL,MAAM,KAAK,IAAI,GAAG,EAAM,WAAW;KACnC,OAAO,KAAK,IAAI,GAAG,EAAM,WAAW;KACrC;;GAEH,MAAM;GACP,CAAC;AAEF,UACQ,EAAY,QACjB,OAAW,EAAK,OAAO,EAAM,UAAU,EAAK,QAAQ,EAAM,OAC5D;EAUD,SAAS,IAAc;AAErB,GADA,EAAK,qBAAqB,CAAC,CAAC,EAAK,MAAM,CAAC,EAAK,MAAM,CAAC,EACpD,EAAK,UAAU,CAAC,CAAC,EAAK,MAAM,CAAC,EAAK,MAAM,CAAC;;EAG3C,SAAS,EAAc,GAAiB,GAAc;GACpD,IAAM,IAAiB,EAAM,OAA4B;AAGzD,GAFe,eAAe,KAAK,EAAM,GASnC,IACF,EAAK,OAAO,CAAC,IAEb,EAAK,QAAQ,CAAC,IATZ,IACF,EAAK,OAAO,CAAC,EAAM,MAAM,GAAG,EAAM,SAAS,EAAE,GAE7C,EAAK,QAAQ,CAAC,EAAM,MAAM,GAAG,EAAM,SAAS,EAAE;;yBAclD,EAoBM,OApBN,EAoBM,EApBA,OAAK,CAAE,EAAA,OAAe,iBAAgB,EAAA,EAASA,EAAAA,OAAM,EAAA;KACzD,EAQE,SAAA;6CAPS,MAAY,OAAI;IACzB,OAAM;IACN,MAAK;IACJ,UAAQ;IACR,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IAChB,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IACnB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAa,IAAO,EAAM;uBANzB,EAAA,MAAY,KAAI,CAAA,CAAA;GAQ3B,EAAkE,OAAlE,GAAkE,EAAxB,EAAM,UAAS,EAAA,EAAA;KACzD,EAQE,SAAA;6CAPS,MAAY,QAAK;IAC1B,OAAM;IACN,MAAK;IACJ,UAAQ;IACR,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IAChB,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IACnB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAa,IAAQ,EAAM;uBAN1B,EAAA,MAAY,MAAK,CAAA,CAAA"}
+{"version":3,"file":"InputRange.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../src/components/InputRange.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: [number, number];\n    separator?: string;\n  }>(),\n  {\n    separator: \"-\",\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", val: [number, number]): void;\n  (e: \"change\", val: [number, number]): void;\n}>();\n\nconst data = reactive({\n  left: props.modelValue[0],\n  right: props.modelValue[1],\n});\n\nconst isFocused = ref(false);\n\nconst classes = computed(() =>\n  isFocused.value ? \"ui-input-range-focused\" : \"ui-input-range-focused\",\n);\n\nconst valuesModel = computed({\n  get() {\n    return {\n      left: Math.min(...props.modelValue), // dangerous....\n      right: Math.max(...props.modelValue),\n    };\n  },\n  set() {},\n});\n\nwatch(\n  () => valuesModel.value,\n  (value) => (data.left = value.left) && (data.right = value.right),\n);\n\n// watch(\n//   () => props.modelValue,\n//   (value: [number, number]) => {\n//     console.log('model value updated');\n//     (data.left = value[0]), (data.right = value[1]);\n//   },\n// );\n\nfunction updateModel() {\n  emit(\"update:modelValue\", [+data.left, +data.right]);\n  emit(\"change\", [+data.left, +data.right]);\n}\n\nfunction validateInput(isLeft: boolean, event: Event) {\n  const value: string = (event.target as HTMLInputElement).value;\n  const result = /^[0-9]{0,2}$/.test(value);\n  // if there is more than 3 digits we cut last one\n  if (!result) {\n    if (isLeft) {\n      data.left = +value.slice(0, value.length - 1);\n    } else {\n      data.right = +value.slice(0, value.length - 1);\n    }\n  } else {\n    if (isLeft) {\n      data.left = +value;\n    } else {\n      data.right = +value;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- {{ data }} -->\n  <div :class=\"classes\" class=\"ui-input-range\" v-bind=\"$attrs\">\n    <input\n      v-model=\"valuesModel.left\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(true, $event)\"\n    />\n    <div class=\"ui-input-range__separator\">{{ props.separator }}</div>\n    <input\n      v-model=\"valuesModel.right\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(false, $event)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;EAGA,IAAM,IAAQ,GAUR,IAAO,GAKP,IAAO,EAAS;GACpB,MAAM,EAAM,WAAW;GACvB,OAAO,EAAM,WAAW;GACzB,CAAC,EAEI,IAAY,EAAI,GAAM,EAEtB,IAAU,SACd,EAAU,OAAQ,0BACnB,EAEK,IAAc,EAAS;GAC3B,MAAM;AACJ,WAAO;KACL,MAAM,KAAK,IAAI,GAAG,EAAM,WAAW;KACnC,OAAO,KAAK,IAAI,GAAG,EAAM,WAAW;KACrC;;GAEH,MAAM;GACP,CAAC;AAEF,UACQ,EAAY,QACjB,OAAW,EAAK,OAAO,EAAM,UAAU,EAAK,QAAQ,EAAM,OAC5D;EAUD,SAAS,IAAc;AAErB,GADA,EAAK,qBAAqB,CAAC,CAAC,EAAK,MAAM,CAAC,EAAK,MAAM,CAAC,EACpD,EAAK,UAAU,CAAC,CAAC,EAAK,MAAM,CAAC,EAAK,MAAM,CAAC;;EAG3C,SAAS,EAAc,GAAiB,GAAc;GACpD,IAAM,IAAiB,EAAM,OAA4B;AAGzD,GAFe,eAAe,KAAK,EAAM,GASnC,IACF,EAAK,OAAO,CAAC,IAEb,EAAK,QAAQ,CAAC,IATZ,IACF,EAAK,OAAO,CAAC,EAAM,MAAM,GAAG,EAAM,SAAS,EAAE,GAE7C,EAAK,QAAQ,CAAC,EAAM,MAAM,GAAG,EAAM,SAAS,EAAE;;yBAclD,EAoBM,OApBN,EAoBM,EApBA,OAAK,CAAE,EAAA,OAAe,iBAAgB,EAAA,EAASA,EAAAA,OAAM,EAAA;KACzD,EAQE,SAAA;6CAPS,MAAY,OAAI;IACzB,OAAM;IACN,MAAK;IACJ,UAAQ;IACR,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IAChB,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IACnB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAa,IAAO,EAAM;uBANzB,EAAA,MAAY,KAAI,CAAA,CAAA;GAQ3B,EAAkE,OAAlE,GAAkE,EAAxB,EAAM,UAAS,EAAA,EAAA;KACzD,EAQE,SAAA;6CAPS,MAAY,QAAK;IAC1B,OAAM;IACN,MAAK;IACJ,UAAQ;IACR,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IAChB,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IACnB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAa,IAAQ,EAAM;uBAN1B,EAAA,MAAY,MAAK,CAAA,CAAA"}

package/dist/components/LongText.js

@@ -1,6 +1,8 @@
 import e from "./LongText.vue2.js";
 import './LongText.style.css';/* empty css                                         */
+//#region src/components/LongText.vue
 var t = e;
+//#endregion
 export { t as default };
 
 //# sourceMappingURL=LongText.js.map

package/dist/components/LongText.vue2.js

@@ -1,5 +1,6 @@
 import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeProps as i, normalizeClass as a, openBlock as o, ref as s, renderSlot as c, useCssVars as l } from "vue";
 import { debounce as u, notEmpty as d } from "@milaboratories/helpers";
+//#region src/components/LongText.vue?vue&type=script&setup=true&lang.ts
 var f = /* @__PURE__ */ r({
 	__name: "LongText",
 	setup(r) {
@@ -25,6 +26,7 @@ var f = /* @__PURE__ */ r({
 		}, [c(e.$slots, "default")], 2)], 32)], 16));
 	}
 });
+//#endregion
 export { f as default };
 
 //# sourceMappingURL=LongText.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LongText.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../src/components/LongText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { debounce, notEmpty } from \"@milaboratories/helpers\";\n\nconst hasElementEllipsis = ref(false);\n\nconst span = ref<HTMLElement>();\n\nconst isHovered = ref(false);\n\nconst classes = computed(() =>\n  isHovered.value && hasElementEllipsis.value ? \"ui-lt-animate\" : \"\",\n);\n\nconst updateStatus = debounce((val: boolean) => (isHovered.value = val), 500);\n\nconst animationTime = computed(() => {\n  return span.value ? `${span.value?.innerHTML.length * 0.4}s` : \"5s\";\n});\n\nfunction isEllipsisEnabled() {\n  const el = notEmpty(span.value, \"span cannot be empty\");\n  hasElementEllipsis.value = el.clientWidth < el.scrollWidth;\n}\n\nfunction mouseoverHandler() {\n  isEllipsisEnabled();\n  updateStatus(true);\n}\n\nfunction mouseoutHandler() {\n  updateStatus(false);\n}\n</script>\n\n<template>\n  <div v-bind=\"$attrs\" class=\"ui-lt-container\">\n    <span @mouseover=\"mouseoverHandler\" @mouseleave=\"mouseoutHandler\">\n      <span ref=\"span\" :class=\"classes\"><slot /></span>\n    </span>\n  </div>\n</template>\n\n<style lang=\"scss\">\n.ui-lt-container {\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  position: relative;\n  border-radius: 5px;\n\n  span {\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    vertical-align: bottom;\n    pointer-events: all !important;\n  }\n\n  .ui-lt-animate {\n    position: relative;\n    animation: left-to-right v-bind(animationTime) infinite alternate linear;\n\n    overflow: unset !important;\n    text-overflow: unset !important;\n    width: fit-content !important;\n  }\n}\n\n@keyframes left-to-right {\n  0% {\n    transform: translateX(0%);\n    left: 0%;\n  }\n\n  100% {\n    transform: translateX(-101%);\n    left: 101%;\n  }\n}\n</style>\n"],"mappings":";;;;;;EAIA,IAAM,IAAqB,EAAI,GAAM,EAE/B,IAAO,GAAkB,EAEzB,IAAY,EAAI,GAAM,EAEtB,IAAU,QACd,EAAU,SAAS,EAAmB,QAAQ,kBAAkB,GACjE,EAEK,IAAe,GAAU,MAAkB,EAAU,QAAQ,GAAM,IAAI,EAEvE,IAAgB,QACb,EAAK,QAAQ,GAAG,EAAK,OAAO,UAAU,SAAS,GAAI,KAAK,KAC/D;EAEF,SAAS,IAAoB;GAC3B,IAAM,IAAK,EAAS,EAAK,OAAO,uBAAuB;AACvD,KAAmB,QAAQ,EAAG,cAAc,EAAG;;EAGjD,SAAS,IAAmB;AAE1B,GADA,GAAmB,EACnB,EAAa,GAAK;;EAGpB,SAAS,IAAkB;AACzB,KAAa,GAAM;;yBAKnB,EAIM,OAJN,EAAaA,EAIP,QAJa,EAAE,OAAM,mBAAiB,CAAA,EAAA,CAC1C,EAEO,QAAA;GAFA,aAAW;GAAmB,cAAY;MAC/C,EAAiD,QAAA;YAAvC;GAAJ,KAAI;GAAQ,OAAK,EAAE,EAAA,MAAO;MAAE,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"LongText.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../src/components/LongText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { debounce, notEmpty } from \"@milaboratories/helpers\";\n\nconst hasElementEllipsis = ref(false);\n\nconst span = ref<HTMLElement>();\n\nconst isHovered = ref(false);\n\nconst classes = computed(() =>\n  isHovered.value && hasElementEllipsis.value ? \"ui-lt-animate\" : \"\",\n);\n\nconst updateStatus = debounce((val: boolean) => (isHovered.value = val), 500);\n\nconst animationTime = computed(() => {\n  return span.value ? `${span.value?.innerHTML.length * 0.4}s` : \"5s\";\n});\n\nfunction isEllipsisEnabled() {\n  const el = notEmpty(span.value, \"span cannot be empty\");\n  hasElementEllipsis.value = el.clientWidth < el.scrollWidth;\n}\n\nfunction mouseoverHandler() {\n  isEllipsisEnabled();\n  updateStatus(true);\n}\n\nfunction mouseoutHandler() {\n  updateStatus(false);\n}\n</script>\n\n<template>\n  <div v-bind=\"$attrs\" class=\"ui-lt-container\">\n    <span @mouseover=\"mouseoverHandler\" @mouseleave=\"mouseoutHandler\">\n      <span ref=\"span\" :class=\"classes\"><slot /></span>\n    </span>\n  </div>\n</template>\n\n<style lang=\"scss\">\n.ui-lt-container {\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  position: relative;\n  border-radius: 5px;\n\n  span {\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    vertical-align: bottom;\n    pointer-events: all !important;\n  }\n\n  .ui-lt-animate {\n    position: relative;\n    animation: left-to-right v-bind(animationTime) infinite alternate linear;\n\n    overflow: unset !important;\n    text-overflow: unset !important;\n    width: fit-content !important;\n  }\n}\n\n@keyframes left-to-right {\n  0% {\n    transform: translateX(0%);\n    left: 0%;\n  }\n\n  100% {\n    transform: translateX(-101%);\n    left: 101%;\n  }\n}\n</style>\n"],"mappings":";;;;;;;EAIA,IAAM,IAAqB,EAAI,GAAM,EAE/B,IAAO,GAAkB,EAEzB,IAAY,EAAI,GAAM,EAEtB,IAAU,QACd,EAAU,SAAS,EAAmB,QAAQ,kBAAkB,GACjE,EAEK,IAAe,GAAU,MAAkB,EAAU,QAAQ,GAAM,IAAI,EAEvE,IAAgB,QACb,EAAK,QAAQ,GAAG,EAAK,OAAO,UAAU,SAAS,GAAI,KAAK,KAC/D;EAEF,SAAS,IAAoB;GAC3B,IAAM,IAAK,EAAS,EAAK,OAAO,uBAAuB;AACvD,KAAmB,QAAQ,EAAG,cAAc,EAAG;;EAGjD,SAAS,IAAmB;AAE1B,GADA,GAAmB,EACnB,EAAa,GAAK;;EAGpB,SAAS,IAAkB;AACzB,KAAa,GAAM;;yBAKnB,EAIM,OAJN,EAAaA,EAIP,QAJa,EAAE,OAAM,mBAAiB,CAAA,EAAA,CAC1C,EAEO,QAAA;GAFA,aAAW;GAAmB,cAAY;MAC/C,EAAiD,QAAA;YAAvC;GAAJ,KAAI;GAAQ,OAAK,EAAE,EAAA,MAAO;MAAE,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA"}

package/dist/components/PlAccordion/ExpandTransition.js

@@ -1,6 +1,8 @@
 import e from "./ExpandTransition.vue2.js";
 import './ExpandTransition.style.css';/* empty css                                                 */
+//#region src/components/PlAccordion/ExpandTransition.vue
 var t = e;
+//#endregion
 export { t as default };
 
 //# sourceMappingURL=ExpandTransition.js.map

package/dist/components/PlAccordion/ExpandTransition.vue2.js

@@ -1,4 +1,5 @@
 import { Transition as e, createBlock as t, defineComponent as n, openBlock as r, renderSlot as i, withCtx as a } from "vue";
+//#region src/components/PlAccordion/ExpandTransition.vue?vue&type=script&setup=true&lang.ts
 var o = /* @__PURE__ */ n({
 	__name: "ExpandTransition",
 	setup(n) {
@@ -19,6 +20,7 @@ var o = /* @__PURE__ */ n({
 		}));
 	}
 });
+//#endregion
 export { o as default };
 
 //# sourceMappingURL=ExpandTransition.vue2.js.map

package/dist/components/PlAccordion/ExpandTransition.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandTransition.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add(\"expand-collapse-fix\");\n  (el as HTMLElement).style.setProperty(\"--component-height\", el.scrollHeight + \"px\");\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty(\"--component-height\");\n  el.classList.remove(\"expand-collapse-fix\");\n};\n</script>\n\n<template>\n  <Transition\n    name=\"expand-collapse\"\n    @enter=\"onStart\"\n    @leave=\"onStart\"\n    @after-enter=\"onAfter\"\n    @after-leave=\"onAfter\"\n  >\n    <slot />\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"mappings":";;;;EACA,IAAM,KAAW,MAAgB;AAE9B,GADD,EAAG,UAAU,IAAI,sBAAsB,EACtC,EAAmB,MAAM,YAAY,sBAAsB,EAAG,eAAe,KAAK;KAG/E,KAAW,MAAgB;AAE/B,GADC,EAAmB,MAAM,eAAe,qBAAqB,EAC9D,EAAG,UAAU,OAAO,sBAAsB;;yBAK1C,EAQa,GAAA;GAPX,MAAK;GACJ,SAAO;GACP,SAAO;GACP,cAAa;GACb,cAAa;;oBAEN,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ExpandTransition.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add(\"expand-collapse-fix\");\n  (el as HTMLElement).style.setProperty(\"--component-height\", el.scrollHeight + \"px\");\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty(\"--component-height\");\n  el.classList.remove(\"expand-collapse-fix\");\n};\n</script>\n\n<template>\n  <Transition\n    name=\"expand-collapse\"\n    @enter=\"onStart\"\n    @leave=\"onStart\"\n    @after-enter=\"onAfter\"\n    @after-leave=\"onAfter\"\n  >\n    <slot />\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"mappings":";;;;;EACA,IAAM,KAAW,MAAgB;AAE9B,GADD,EAAG,UAAU,IAAI,sBAAsB,EACtC,EAAmB,MAAM,YAAY,sBAAsB,EAAG,eAAe,KAAK;KAG/E,KAAW,MAAgB;AAE/B,GADC,EAAmB,MAAM,eAAe,qBAAqB,EAC9D,EAAG,UAAU,OAAO,sBAAsB;;yBAK1C,EAQa,GAAA;GAPX,MAAK;GACJ,SAAO;GACP,SAAO;GACP,cAAa;GACb,cAAa;;oBAEN,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/PlAccordion/PlAccordion.js

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

package/dist/components/PlAccordion/PlAccordion.vue2.js

@@ -1,4 +1,5 @@
 import { Fragment as e, createElementBlock as t, defineComponent as n, mergeModels as r, openBlock as i, provide as a, renderSlot as o, toRef as s, useModel as c } from "vue";
+//#region src/components/PlAccordion/PlAccordion.vue?vue&type=script&setup=true&lang.ts
 var l = /* @__PURE__ */ n({
 	__name: "PlAccordion",
 	props: /* @__PURE__ */ r({ multiple: { type: Boolean } }, {
@@ -11,6 +12,7 @@ var l = /* @__PURE__ */ n({
 		return a("pl-accordion-model", r), a("pl-accordion-props", s(l)), (n, r) => (i(), t(e, null, [o(n.$slots, "header"), o(n.$slots, "default")], 64));
 	}
 });
+//#endregion
 export { l as default };
 
 //# sourceMappingURL=PlAccordion.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlAccordion.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAccordion/PlAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { provide, toRef } from \"vue\";\n\nconst model = defineModel<string>();\n\nconst props = defineProps<{\n  /**\n   * Allow multiple accordion sections to be opened at the same time\n   */\n  multiple?: boolean;\n}>();\n\nprovide(\"pl-accordion-model\", model);\nprovide(\"pl-accordion-props\", toRef(props));\n</script>\n\n<template>\n  <slot name=\"header\" />\n  <slot />\n</template>\n"],"mappings":";;;;;;;;;EAGA,IAAM,IAAQ,EAAmB,GAAA,aAAE,EAE7B,IAAQ;SAOd,EAAQ,sBAAsB,EAAM,EACpC,EAAQ,sBAAsB,EAAM,EAAM,CAAC,8BAIzC,EAAsB,EAAA,QAAA,SAAA,EACtB,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"PlAccordion.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAccordion/PlAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { provide, toRef } from \"vue\";\n\nconst model = defineModel<string>();\n\nconst props = defineProps<{\n  /**\n   * Allow multiple accordion sections to be opened at the same time\n   */\n  multiple?: boolean;\n}>();\n\nprovide(\"pl-accordion-model\", model);\nprovide(\"pl-accordion-props\", toRef(props));\n</script>\n\n<template>\n  <slot name=\"header\" />\n  <slot />\n</template>\n"],"mappings":";;;;;;;;;;EAGA,IAAM,IAAQ,EAAmB,GAAA,aAAE,EAE7B,IAAQ;SAOd,EAAQ,sBAAsB,EAAM,EACpC,EAAQ,sBAAsB,EAAM,EAAM,CAAC,8BAIzC,EAAsB,EAAA,QAAA,SAAA,EACtB,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

package/dist/components/PlAccordion/PlAccordionSection.js

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

package/dist/components/PlAccordion/PlAccordionSection.style.js

@@ -4,6 +4,7 @@ import './PlAccordionSection.vue.css';var e = {
 	chevron: "_chevron_e3dof_27",
 	down: "_down_e3dof_31"
 };
+//#endregion
 export { e as default };
 
 //# sourceMappingURL=PlAccordionSection.style.js.map

package/dist/components/PlAccordion/PlAccordionSection.vue2.js

@@ -5,6 +5,7 @@ import "../PlSectionSeparator/index.js";
 import n from "./ExpandTransition.js";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, normalizeClass as d, openBlock as f, renderSlot as p, toDisplayString as m, toRef as h, unref as g, useModel as _, withCtx as v } from "vue";
 import { uniqueId as y } from "@milaboratories/helpers";
+//#region src/components/PlAccordion/PlAccordionSection.vue?vue&type=script&setup=true&lang.ts
 var b = { class: "pl-accordion-section" }, x = /* @__PURE__ */ c({
 	__name: "PlAccordionSection",
 	props: /* @__PURE__ */ u({
@@ -43,6 +44,7 @@ var b = { class: "pl-accordion-section" }, x = /* @__PURE__ */ c({
 		})]));
 	}
 });
+//#endregion
 export { x as default };
 
 //# sourceMappingURL=PlAccordionSection.vue2.js.map

package/dist/components/PlAccordion/PlAccordionSection.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAccordionSection.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSectionSeparator } from \"../PlSectionSeparator\";\nimport ExpandTransition from \"./ExpandTransition.vue\";\nimport type { Ref } from \"vue\";\nimport { computed, inject, toRef } from \"vue\";\n\nconst $m = inject<Ref<string>>(\"pl-accordion-model\", () => toRef(\"\"), true);\n\nconst $p = inject<\n  Ref<{\n    multiple?: boolean;\n  }>\n>(\"pl-accordion-props\", () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p || $p.value.multiple);\n\nconst open = computed({\n  get() {\n    if (isMulti.value) {\n      return model.value;\n    }\n\n    return $m ? $m.value === id : model.value;\n  },\n  set(on) {\n    if (isMulti.value) {\n      model.value = on;\n    } else if ($m) {\n      $m.value = $m.value === id ? \"\" : id;\n    }\n  },\n});\n\ndefineProps<{\n  /**\n   * The label text (optional)\n   */\n  label?: string;\n  /**\n   * If `true`, remove top padding\n   */\n  compact?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-accordion-section\">\n    <PlSectionSeparator :class=\"$style.separator\" :compact=\"compact\" @click=\"open = !open\">\n      <PlMaskIcon16 name=\"chevron-right\" :class=\"[{ [$style.down]: open }, $style.chevron]\" />\n      {{ label }}\n    </PlSectionSeparator>\n    <ExpandTransition>\n      <div v-if=\"open\" :class=\"$style.content\">\n        <slot />\n      </div>\n    </ExpandTransition>\n  </div>\n</template>\n\n<style module>\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-v);\n  will-change: height, opacity;\n  /* transform: translateZ(0);\n  backface-visibility: hidden; */\n}\n\n.content > *:first-child {\n  margin-top: 24px;\n}\n\n.content > *:last-child {\n  margin-bottom: 4px;\n}\n\n.separator {\n  cursor: pointer;\n  &:hover {\n    --pl-separator-txt-color: var(--txt-01);\n    --mask-icon-bg-color: var(--ic-01);\n  }\n}\n\n.chevron {\n  transition-duration: 50ms;\n}\n\n.down {\n  transform: rotate(90deg);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAK,EAAoB,4BAA4B,EAAM,GAAG,EAAE,GAAK,EAErE,IAAK,EAIT,4BAA4B,EAAM,EAAE,UAAU,IAAO,CAAC,EAAE,GAAK,EAEzD,IAAQ,EAAoB,GAAA,aAAE,EAE9B,IAAK,GAAU,EAEf,IAAU,QAAe,CAAC,KAAM,EAAG,MAAM,SAAS,EAElD,IAAO,EAAS;GACpB,MAAM;AAKJ,WAJI,EAAQ,QACH,EAAM,QAGR,IAAK,EAAG,UAAU,IAAK,EAAM;;GAEtC,IAAI,GAAI;AACN,IAAI,EAAQ,QACV,EAAM,QAAQ,IACL,MACT,EAAG,QAAQ,EAAG,UAAU,IAAK,KAAK;;GAGvC,CAAC;yBAeA,EAUM,OAVN,GAUM,CATJ,EAGqB,EAAA,EAAA,EAAA;GAHA,OAAK,EAAEA,EAAAA,OAAO,UAAS;GAAG,SAAS,EAAA;GAAU,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAI,CAAI,EAAA;;oBACS,CAAxF,EAAwF,EAAA,EAAA,EAAA;IAA1E,MAAK;IAAiB,OAAK,EAAA,CAAA,GAAMA,EAAAA,OAAO,OAAO,EAAA,OAAI,EAAIA,EAAAA,OAAO,QAAO,CAAA;6BAAK,MACxF,EAAG,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA;;+BAEV,EAImB,GAAA,MAAA;oBADX,CAFK,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;IAFY,OAAK,EAAEA,EAAAA,OAAO,QAAO;OACrC,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"PlAccordionSection.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSectionSeparator } from \"../PlSectionSeparator\";\nimport ExpandTransition from \"./ExpandTransition.vue\";\nimport type { Ref } from \"vue\";\nimport { computed, inject, toRef } from \"vue\";\n\nconst $m = inject<Ref<string>>(\"pl-accordion-model\", () => toRef(\"\"), true);\n\nconst $p = inject<\n  Ref<{\n    multiple?: boolean;\n  }>\n>(\"pl-accordion-props\", () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p || $p.value.multiple);\n\nconst open = computed({\n  get() {\n    if (isMulti.value) {\n      return model.value;\n    }\n\n    return $m ? $m.value === id : model.value;\n  },\n  set(on) {\n    if (isMulti.value) {\n      model.value = on;\n    } else if ($m) {\n      $m.value = $m.value === id ? \"\" : id;\n    }\n  },\n});\n\ndefineProps<{\n  /**\n   * The label text (optional)\n   */\n  label?: string;\n  /**\n   * If `true`, remove top padding\n   */\n  compact?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-accordion-section\">\n    <PlSectionSeparator :class=\"$style.separator\" :compact=\"compact\" @click=\"open = !open\">\n      <PlMaskIcon16 name=\"chevron-right\" :class=\"[{ [$style.down]: open }, $style.chevron]\" />\n      {{ label }}\n    </PlSectionSeparator>\n    <ExpandTransition>\n      <div v-if=\"open\" :class=\"$style.content\">\n        <slot />\n      </div>\n    </ExpandTransition>\n  </div>\n</template>\n\n<style module>\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-v);\n  will-change: height, opacity;\n  /* transform: translateZ(0);\n  backface-visibility: hidden; */\n}\n\n.content > *:first-child {\n  margin-top: 24px;\n}\n\n.content > *:last-child {\n  margin-bottom: 4px;\n}\n\n.separator {\n  cursor: pointer;\n  &:hover {\n    --pl-separator-txt-color: var(--txt-01);\n    --mask-icon-bg-color: var(--ic-01);\n  }\n}\n\n.chevron {\n  transition-duration: 50ms;\n}\n\n.down {\n  transform: rotate(90deg);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAK,EAAoB,4BAA4B,EAAM,GAAG,EAAE,GAAK,EAErE,IAAK,EAIT,4BAA4B,EAAM,EAAE,UAAU,IAAO,CAAC,EAAE,GAAK,EAEzD,IAAQ,EAAoB,GAAA,aAAE,EAE9B,IAAK,GAAU,EAEf,IAAU,QAAe,CAAC,KAAM,EAAG,MAAM,SAAS,EAElD,IAAO,EAAS;GACpB,MAAM;AAKJ,WAJI,EAAQ,QACH,EAAM,QAGR,IAAK,EAAG,UAAU,IAAK,EAAM;;GAEtC,IAAI,GAAI;AACN,IAAI,EAAQ,QACV,EAAM,QAAQ,IACL,MACT,EAAG,QAAQ,EAAG,UAAU,IAAK,KAAK;;GAGvC,CAAC;yBAeA,EAUM,OAVN,GAUM,CATJ,EAGqB,EAAA,EAAA,EAAA;GAHA,OAAK,EAAEA,EAAAA,OAAO,UAAS;GAAG,SAAS,EAAA;GAAU,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAI,CAAI,EAAA;;oBACS,CAAxF,EAAwF,EAAA,EAAA,EAAA;IAA1E,MAAK;IAAiB,OAAK,EAAA,CAAA,GAAMA,EAAAA,OAAO,OAAO,EAAA,OAAI,EAAIA,EAAAA,OAAO,QAAO,CAAA;6BAAK,MACxF,EAAG,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA;;+BAEV,EAImB,GAAA,MAAA;oBADX,CAFK,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;IAFY,OAAK,EAAEA,EAAAA,OAAO,QAAO;OACrC,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/components/PlAlert/PlAlert.js

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

package/dist/components/PlAlert/PlAlert.vue2.js

@@ -1,6 +1,7 @@
 import './pl-alert.css';/* empty css         */
 import e from "../../utils/PlCloseModalBtn.js";
 import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
+//#region src/components/PlAlert/PlAlert.vue?vue&type=script&setup=true&lang.ts
 var d = {
 	key: 0,
 	class: "pl-alert__icon"
@@ -57,6 +58,7 @@ var d = {
 		], 6)) : n("", !0);
 	}
 });
+//#endregion
 export { h as default };
 
 //# sourceMappingURL=PlAlert.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlAlert.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-alert.scss\";\n\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated, typically when the close button is clicked.\n   *\n   * @param value - The new value of the model, generally `false` when the alert is closed.\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\nwithDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the alert component. If `true`, the alert is visible.\n     *\n     * @default true\n     */\n    modelValue?: boolean;\n    /**\n     * The type of alert, which determines the alert's style and icon.\n     * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n     */\n    type?: \"success\" | \"info\" | \"warn\" | \"error\";\n    /**\n     * An optional label that appears at the top of the alert.\n     */\n    label?: string;\n    /**\n     * If `true`, an icon corresponding to the alert type is displayed.\n     */\n    icon?: boolean;\n    /**\n     * If `true`, a close button is displayed in the alert, allowing the user to close it.\n     */\n    closeable?: boolean;\n    /**\n     * If `true`, the alert text is displayed in a monospace font.\n     */\n    monospace?: boolean;\n    /**\n     * If `true`, the alert content will preserve whitespace and line breaks.\n     */\n    whiteSpacePre?: boolean;\n\n    /**\n     * Max height (css value like '120px or 30%')\n     */\n    maxHeight?: string;\n  }>(),\n  {\n    modelValue: true,\n    type: undefined,\n    label: undefined,\n    icon: undefined,\n    closeable: undefined,\n    monospace: undefined,\n    whiteSpacePre: undefined,\n    maxHeight: undefined,\n  },\n);\n\nconst iconMap = {\n  success: \"success\",\n  warn: \"warning\",\n  info: \"edit\",\n  error: \"error\",\n};\n</script>\n\n<template>\n  <div\n    v-if=\"modelValue\"\n    class=\"pl-alert\"\n    :style=\"{ maxHeight }\"\n    :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\"\n  >\n    <div v-if=\"icon && type\" class=\"pl-alert__icon\">\n      <div :class=\"`icon-24 icon-${iconMap[type]}`\" />\n    </div>\n    <div class=\"pl-alert__main\">\n      <label v-if=\"label\">{{ label }}</label>\n      <div class=\"pl-alert__main__text\"><slot /></div>\n    </div>\n    <PlCloseModalBtn\n      v-if=\"closeable\"\n      class=\"pl-alert__close-btn\"\n      @click=\"$emit('update:modelValue', false)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;CAEE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqER,IAAM,IAAU;GACd,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACR;mBAKS,EAAA,cAAA,GAAA,EADR,EAkBM,OAAA;;GAhBJ,OAAK,EAAA,CAAC,YAAU,CAAA;IAAA,WAEL,EAAA;IAAS,eAAE,EAAA;IAAa,EAAI,EAAA,OAAI,aAAgB,EAAA,SAAI,GAAA,CAAA,CAAA;GAD9D,OAAK,EAAA,EAAA,WAAI,EAAA,WAAS,CAAA;;GAGR,EAAA,QAAQ,EAAA,QAAA,GAAA,EAAnB,EAEM,OAFN,GAEM,CADJ,EAAgD,OAAA,EAA1C,OAAK,EAAA,gBAAkB,EAAQ,EAAA,QAAI,EAAA,EAAA,MAAA,EAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAE3C,EAGM,OAHN,GAGM,CAFS,EAAA,SAAA,GAAA,EAAb,EAAuC,SAAA,GAAA,EAAhB,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAC5B,EAAgD,OAAhD,GAAgD,CAAd,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA;GAGpC,EAAA,aAAA,GAAA,EADR,EAIE,GAAA;;IAFA,OAAM;IACL,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAA,GAAA"}
+{"version":3,"file":"PlAlert.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-alert.scss\";\n\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated, typically when the close button is clicked.\n   *\n   * @param value - The new value of the model, generally `false` when the alert is closed.\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\nwithDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the alert component. If `true`, the alert is visible.\n     *\n     * @default true\n     */\n    modelValue?: boolean;\n    /**\n     * The type of alert, which determines the alert's style and icon.\n     * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n     */\n    type?: \"success\" | \"info\" | \"warn\" | \"error\";\n    /**\n     * An optional label that appears at the top of the alert.\n     */\n    label?: string;\n    /**\n     * If `true`, an icon corresponding to the alert type is displayed.\n     */\n    icon?: boolean;\n    /**\n     * If `true`, a close button is displayed in the alert, allowing the user to close it.\n     */\n    closeable?: boolean;\n    /**\n     * If `true`, the alert text is displayed in a monospace font.\n     */\n    monospace?: boolean;\n    /**\n     * If `true`, the alert content will preserve whitespace and line breaks.\n     */\n    whiteSpacePre?: boolean;\n\n    /**\n     * Max height (css value like '120px or 30%')\n     */\n    maxHeight?: string;\n  }>(),\n  {\n    modelValue: true,\n    type: undefined,\n    label: undefined,\n    icon: undefined,\n    closeable: undefined,\n    monospace: undefined,\n    whiteSpacePre: undefined,\n    maxHeight: undefined,\n  },\n);\n\nconst iconMap = {\n  success: \"success\",\n  warn: \"warning\",\n  info: \"edit\",\n  error: \"error\",\n};\n</script>\n\n<template>\n  <div\n    v-if=\"modelValue\"\n    class=\"pl-alert\"\n    :style=\"{ maxHeight }\"\n    :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\"\n  >\n    <div v-if=\"icon && type\" class=\"pl-alert__icon\">\n      <div :class=\"`icon-24 icon-${iconMap[type]}`\" />\n    </div>\n    <div class=\"pl-alert__main\">\n      <label v-if=\"label\">{{ label }}</label>\n      <div class=\"pl-alert__main__text\"><slot /></div>\n    </div>\n    <PlCloseModalBtn\n      v-if=\"closeable\"\n      class=\"pl-alert__close-btn\"\n      @click=\"$emit('update:modelValue', false)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;CAEE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqER,IAAM,IAAU;GACd,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACR;mBAKS,EAAA,cAAA,GAAA,EADR,EAkBM,OAAA;;GAhBJ,OAAK,EAAA,CAAC,YAAU,CAAA;IAAA,WAEL,EAAA;IAAS,eAAE,EAAA;IAAa,EAAI,EAAA,OAAI,aAAgB,EAAA,SAAI,GAAA,CAAA,CAAA;GAD9D,OAAK,EAAA,EAAA,WAAI,EAAA,WAAS,CAAA;;GAGR,EAAA,QAAQ,EAAA,QAAA,GAAA,EAAnB,EAEM,OAFN,GAEM,CADJ,EAAgD,OAAA,EAA1C,OAAK,EAAA,gBAAkB,EAAQ,EAAA,QAAI,EAAA,EAAA,MAAA,EAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAE3C,EAGM,OAHN,GAGM,CAFS,EAAA,SAAA,GAAA,EAAb,EAAuC,SAAA,GAAA,EAAhB,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAC5B,EAAgD,OAAhD,GAAgD,CAAd,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA;GAGpC,EAAA,aAAA,GAAA,EADR,EAIE,GAAA;;IAFA,OAAM;IACL,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAA,GAAA"}

package/dist/components/PlAutocomplete/PlAutocomplete.js

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

package/dist/components/PlAutocomplete/PlAutocomplete.vue2.js

@@ -21,6 +21,7 @@ import { useWatchFetch as l } from "../../composition/useWatchFetch.js";
 import ie from "../../assets/images/required.js";
 import { Fragment as ae, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as oe, createVNode as h, defineComponent as g, mergeModels as _, normalizeClass as v, openBlock as y, reactive as se, ref as b, renderList as ce, renderSlot as x, toDisplayString as S, unref as C, useModel as le, useSlots as ue, useTemplateRef as de, vModelText as fe, watch as w, watchPostEffect as pe, withCtx as T, withDirectives as me, withModifiers as E } from "vue";
 import { refDebounced as he } from "@vueuse/core";
+//#region src/components/PlAutocomplete/PlAutocomplete.vue?vue&type=script&setup=true&lang.ts
 var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = { class: "pl-autocomplete__field" }, D = ["disabled", "placeholder"], O = {
 	key: 0,
 	class: "input-value"
@@ -241,6 +242,7 @@ var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = { clas
 		])], 42, ge), J.value ? (y(), p("div", N, S(J.value), 1)) : G.value && g.loadingOptionsHelper ? (y(), p("div", P, S(g.loadingOptionsHelper), 1)) : g.helper ? (y(), p("div", F, S(g.helper), 1)) : f("", !0)]));
 	}
 });
+//#endregion
 export { I as default };
 
 //# sourceMappingURL=PlAutocomplete.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlAutocomplete.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a big list of options using string search request\n */\nexport default {\n  name: \"PlAutocomplete\",\n};\n</script>\n\n<script\n  lang=\"ts\"\n  setup\n  generic=\"M extends null | undefined | string | number = null | undefined | string\"\n>\nimport \"./pl-autocomplete.scss\";\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport { tap } from \"../../helpers/functions\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport type { ListOption, ListOptionNormalized } from \"../../types\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport LongText from \"../LongText.vue\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport { refDebounced } from \"@vueuse/core\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\n/**\n * The current selected value.\n */\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Lambda for requesting of available options for the dropdown by search string.\n     */\n    optionsSearch: (string: string, type: \"value\" | \"label\") => Promise<ListOption<M>[]>;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: string;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: string;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n    /**\n     * Formatter for the selected value if its label is absent\n     */\n    formatValue?: (value: M) => string;\n    /**\n     * Makes some of corners not rounded\n     * */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  {\n    modelSearch: undefined,\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: \"small\",\n    formatValue: (v: M) => String(v),\n    groupPosition: undefined,\n  },\n);\n\nconst slots = defineSlots<{\n  [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlayRef = useTemplateRef(\"overlay\");\n\nconst search = ref<string | null>(null);\nconst data = reactive({\n  activeIndex: -1,\n  open: false,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> | undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n  return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })) as (ListOptionBase<M> & { index: number; isSelected: boolean; isActive: boolean })[];\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n  return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n  return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (isLoadingError.value) {\n    return \"Data loading error\";\n  }\n\n  return undefined;\n});\n\nconst textValue = computed(() => {\n  const modelOption = unref(modelOptionRef);\n  const options = unref(renderedOptionsRef);\n\n  const item: ListOptionNormalized | undefined =\n    modelOption ??\n    options.find((o) => deepEqual(o.value, model.value)) ??\n    options.find((o) => deepEqual(o.value, model.value));\n\n  return item?.label || (model.value ? props.formatValue(model.value) : \"\");\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && model.value) {\n    return \"\";\n  }\n\n  return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n  return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: (ListOptionBase<M> & { index: number }) | undefined) => {\n  model.value = v?.value as M;\n  modelOptionRef.value = v;\n  search.value = null;\n  data.open = false;\n  rootRef?.value?.focus();\n};\n\nconst clear = () => {\n  model.value = undefined as M;\n  modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n  data.open = !data.open;\n};\n\nwatch(\n  () => data.open,\n  (v) => {\n    search.value = v ? \"\" : null;\n  },\n);\n\nconst onInputFocus = () => {\n  data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (\n    !rootRef.value?.contains(relatedTarget) &&\n    !overlayRef.value?.listRef?.contains(relatedTarget)\n  ) {\n    search.value = null;\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n      search.value = \"\";\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    search.value = null;\n    rootRef.value?.focus();\n  }\n\n  const options = unref(renderedOptionsRef);\n\n  const { length } = options;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(options.find((it) => it.index === activeIndex));\n  }\n\n  const localIndex = options.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  search.value; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    overlayRef.value?.scrollIntoActive();\n  }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(\n  () => searchDebounced.value,\n  async (v) => {\n    if (v !== null) {\n      // search is null when dropdown is closed;\n      return props.optionsSearch(v, \"label\");\n    }\n    return undefined;\n  },\n);\n\nconst modelOptionRequest = useWatchFetch(\n  () => model.value,\n  async (v) => {\n    if (v != null && !deepEqual(modelOptionRef.value?.value, v)) {\n      // load label for selected value if it was updated from outside the component\n      return (await props.optionsSearch(String(v), \"value\"))?.[0];\n    }\n    return modelOptionRef.value;\n  },\n);\n\nwatch(\n  () => optionsRequest.value,\n  (result) => {\n    if (result) {\n      loadedOptionsRef.value = result;\n      if (search.value !== null) {\n        isLoadingError.value = false;\n      }\n    }\n  },\n);\n\nwatch(\n  () => modelOptionRequest.value,\n  (result) => {\n    if (result) {\n      modelOptionRef.value = normalizeListOptions([result])[0];\n    }\n  },\n);\n\nwatch(\n  () => optionsRequest.error,\n  (err) => {\n    if (err) {\n      isLoadingError.value = Boolean(err);\n    }\n  },\n);\n\nwatch(\n  () => optionsRequest.loading || modelOptionRequest.loading,\n  (loading) => {\n    isLoadingOptions.value = loading;\n  },\n);\n</script>\n\n<template>\n  <div class=\"pl-autocomplete__envelope\" @click.stop=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-autocomplete\"\n      :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-autocomplete__container\">\n        <div class=\"pl-autocomplete__field\">\n          <input\n            ref=\"input\"\n            v-model=\"search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\">\n            <LongText> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"pl-autocomplete__controls\">\n            <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              name=\"delete-clear\"\n              @click.stop=\"clear\"\n            />\n            <slot name=\"append\" />\n            <div class=\"pl-autocomplete__arrow-wrapper\" @click.stop=\"toggleOpen\">\n              <div\n                v-if=\"arrowIconLarge\"\n                class=\"arrow-icon\"\n                :class=\"[`icon-24 ${arrowIconLarge}`]\"\n              />\n              <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n              <div v-else class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-autocomplete__options\"\n          tabindex=\"-1\"\n          :gap=\"3\"\n        >\n          <DropdownListItem\n            v-for=\"(item, index) in renderedOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :is-selected=\"item.isSelected\"\n            :is-hovered=\"item.isActive\"\n            :size=\"optionSize\"\n            @click.stop=\"selectOption(item)\"\n          />\n          <div v-if=\"!renderedOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-autocomplete__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-autocomplete__error\">{{ computedError }}</div>\n    <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-autocomplete__helper\">\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PlAutocomplete.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a big list of options using string search request\n */\nexport default {\n  name: \"PlAutocomplete\",\n};\n</script>\n\n<script\n  lang=\"ts\"\n  setup\n  generic=\"M extends null | undefined | string | number = null | undefined | string\"\n>\nimport \"./pl-autocomplete.scss\";\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport { tap } from \"../../helpers/functions\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport type { ListOption, ListOptionNormalized } from \"../../types\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport LongText from \"../LongText.vue\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport { refDebounced } from \"@vueuse/core\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\n/**\n * The current selected value.\n */\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Lambda for requesting of available options for the dropdown by search string.\n     */\n    optionsSearch: (string: string, type: \"value\" | \"label\") => Promise<ListOption<M>[]>;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: string;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: string;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n    /**\n     * Formatter for the selected value if its label is absent\n     */\n    formatValue?: (value: M) => string;\n    /**\n     * Makes some of corners not rounded\n     * */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  {\n    modelSearch: undefined,\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: \"small\",\n    formatValue: (v: M) => String(v),\n    groupPosition: undefined,\n  },\n);\n\nconst slots = defineSlots<{\n  [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlayRef = useTemplateRef(\"overlay\");\n\nconst search = ref<string | null>(null);\nconst data = reactive({\n  activeIndex: -1,\n  open: false,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> | undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n  return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })) as (ListOptionBase<M> & { index: number; isSelected: boolean; isActive: boolean })[];\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n  return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n  return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (isLoadingError.value) {\n    return \"Data loading error\";\n  }\n\n  return undefined;\n});\n\nconst textValue = computed(() => {\n  const modelOption = unref(modelOptionRef);\n  const options = unref(renderedOptionsRef);\n\n  const item: ListOptionNormalized | undefined =\n    modelOption ??\n    options.find((o) => deepEqual(o.value, model.value)) ??\n    options.find((o) => deepEqual(o.value, model.value));\n\n  return item?.label || (model.value ? props.formatValue(model.value) : \"\");\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && model.value) {\n    return \"\";\n  }\n\n  return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n  return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: (ListOptionBase<M> & { index: number }) | undefined) => {\n  model.value = v?.value as M;\n  modelOptionRef.value = v;\n  search.value = null;\n  data.open = false;\n  rootRef?.value?.focus();\n};\n\nconst clear = () => {\n  model.value = undefined as M;\n  modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n  data.open = !data.open;\n};\n\nwatch(\n  () => data.open,\n  (v) => {\n    search.value = v ? \"\" : null;\n  },\n);\n\nconst onInputFocus = () => {\n  data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (\n    !rootRef.value?.contains(relatedTarget) &&\n    !overlayRef.value?.listRef?.contains(relatedTarget)\n  ) {\n    search.value = null;\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n      search.value = \"\";\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    search.value = null;\n    rootRef.value?.focus();\n  }\n\n  const options = unref(renderedOptionsRef);\n\n  const { length } = options;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(options.find((it) => it.index === activeIndex));\n  }\n\n  const localIndex = options.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  search.value; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    overlayRef.value?.scrollIntoActive();\n  }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(\n  () => searchDebounced.value,\n  async (v) => {\n    if (v !== null) {\n      // search is null when dropdown is closed;\n      return props.optionsSearch(v, \"label\");\n    }\n    return undefined;\n  },\n);\n\nconst modelOptionRequest = useWatchFetch(\n  () => model.value,\n  async (v) => {\n    if (v != null && !deepEqual(modelOptionRef.value?.value, v)) {\n      // load label for selected value if it was updated from outside the component\n      return (await props.optionsSearch(String(v), \"value\"))?.[0];\n    }\n    return modelOptionRef.value;\n  },\n);\n\nwatch(\n  () => optionsRequest.value,\n  (result) => {\n    if (result) {\n      loadedOptionsRef.value = result;\n      if (search.value !== null) {\n        isLoadingError.value = false;\n      }\n    }\n  },\n);\n\nwatch(\n  () => modelOptionRequest.value,\n  (result) => {\n    if (result) {\n      modelOptionRef.value = normalizeListOptions([result])[0];\n    }\n  },\n);\n\nwatch(\n  () => optionsRequest.error,\n  (err) => {\n    if (err) {\n      isLoadingError.value = Boolean(err);\n    }\n  },\n);\n\nwatch(\n  () => optionsRequest.loading || modelOptionRequest.loading,\n  (loading) => {\n    isLoadingOptions.value = loading;\n  },\n);\n</script>\n\n<template>\n  <div class=\"pl-autocomplete__envelope\" @click.stop=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-autocomplete\"\n      :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-autocomplete__container\">\n        <div class=\"pl-autocomplete__field\">\n          <input\n            ref=\"input\"\n            v-model=\"search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\">\n            <LongText> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"pl-autocomplete__controls\">\n            <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              name=\"delete-clear\"\n              @click.stop=\"clear\"\n            />\n            <slot name=\"append\" />\n            <div class=\"pl-autocomplete__arrow-wrapper\" @click.stop=\"toggleOpen\">\n              <div\n                v-if=\"arrowIconLarge\"\n                class=\"arrow-icon\"\n                :class=\"[`icon-24 ${arrowIconLarge}`]\"\n              />\n              <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n              <div v-else class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-autocomplete__options\"\n          tabindex=\"-1\"\n          :gap=\"3\"\n        >\n          <DropdownListItem\n            v-for=\"(item, index) in renderedOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :is-selected=\"item.isSelected\"\n            :is-hovered=\"item.isActive\"\n            :size=\"optionSize\"\n            @click.stop=\"selectOption(item)\"\n          />\n          <div v-if=\"!renderedOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-autocomplete__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-autocomplete__error\">{{ computedError }}</div>\n    <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-autocomplete__helper\">\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":"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"}