@leaflink/stash 42.3.0 → 42.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -24,7 +24,7 @@ declare interface CloseArgs {
24
24
  name?: string;
25
25
  }
26
26
 
27
- export declare interface Modal {
27
+ export declare interface Modal<TAttributes = Record<string, unknown>> {
28
28
  /**
29
29
  * Import the modal that you want to use in your component,
30
30
  * then pass that to the composable
@@ -39,7 +39,7 @@ export declare interface Modal {
39
39
  *
40
40
  * Listeners need to be formatted as `onEventName`
41
41
  */
42
- attributes?: Record<string, unknown>;
42
+ attributes?: ToRecord<TAttributes>;
43
43
  /**
44
44
  * Dyanmic slots that you want rendered in the format of
45
45
  * { default: 'my slot content' }
@@ -62,6 +62,10 @@ export declare interface Modal {
62
62
  };
63
63
  }
64
64
 
65
+ declare type ToRecord<T> = {
66
+ [P in keyof T]: T[P];
67
+ };
68
+
65
69
  declare function useModals(): {
66
70
  active: readonly {
67
71
  readonly component: FunctionalComponent<any, any, any> | {
@@ -404,7 +408,7 @@ declare function useModals(): {
404
408
  readonly disableDefaultListeners?: boolean | undefined;
405
409
  } | undefined;
406
410
  }[];
407
- open: (modal: Modal) => void;
411
+ open: <T>(modal: Modal<T>) => void;
408
412
  close: ({ index, name }?: CloseArgs) => void;
409
413
  closeAll: () => void;
410
414
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useModals.js","sources":["../src/composables/useModals/useModals.ts"],"sourcesContent":["import merge from 'lodash-es/merge';\nimport { Component, markRaw, reactive, readonly, ref } from 'vue';\n\n// #region modal-interface\nexport interface Modal {\n /**\n * Import the modal that you want to use in your component,\n * then pass that to the composable\n */\n component: Component;\n\n /**\n * Optional identifier used to close a modal. The default value is `component.name` (if defined).\n */\n name?: string;\n\n /**\n * Props and listeners to passed through.\n *\n * Listeners need to be formatted as `onEventName`\n */\n attributes?: Record<string, unknown>;\n\n /**\n * Dyanmic slots that you want rendered in the format of\n * { default: 'my slot content' }\n *\n * The Modals component which renders this list passes the value for slots through\n * a html sanitizer to avoid XSS attacks\n */\n slots?: Record<string, string>;\n\n /**\n * Custom options to use for the given modal.\n *\n * If options are not passed in, then useModals will set the following values as defaults\n *\n * {\n * disableDefaultListeners: false\n * }\n */\n options?: {\n disableDefaultListeners?: boolean;\n };\n}\n// #endregion modal-interface\n\ninterface CloseArgs {\n index?: number;\n name?: string;\n}\n\nconst active = ref<Modal[]>([]);\n\nexport default function useModals() {\n function open(modal: Modal) {\n if (!modal.name && modal.component.name) {\n modal.name = modal.component.name;\n }\n\n //Prevent vue from making the entire component passed in reactive to avoid unnecessary performance overhead\n modal.component = markRaw(modal.component);\n\n const optionsDefaults: Modal['options'] = {\n disableDefaultListeners: false,\n };\n\n modal.options = merge({}, optionsDefaults, modal.options);\n\n active.value.push(modal);\n }\n\n function close({ index, name }: CloseArgs = {}) {\n if (index === undefined && !name) {\n active.value.pop();\n return;\n }\n\n if (index !== undefined) {\n active.value.splice(index, 1);\n return;\n }\n\n if (name) {\n const index = active.value.findIndex((modal) => modal.name === name);\n\n if (index === -1) return;\n\n active.value.splice(index, 1);\n return;\n }\n }\n\n function closeAll() {\n active.value = [];\n }\n\n return reactive({\n /**\n * The list of modals that are currently open.\n */\n active: readonly(active),\n\n /**\n * Opens the given modal.\n */\n open,\n\n /**\n * Closes a modal.\n * If no arguments are passed, then the top-most modal is closed.\n * If an index is passed, then the modal at that index is closed.\n * If a name is passed, then the modal with that name is closed.\n */\n close,\n\n /**\n * Closes all active/open modals.\n */\n closeAll,\n });\n}\n"],"names":["active","ref","useModals","open","modal","markRaw","optionsDefaults","merge","close","index","name","closeAll","reactive","readonly"],"mappings":";;;;;;;;;;;;AAoDA,MAAMA,IAASC,EAAa,CAAA,CAAE;AAE9B,SAAwBC,IAAY;AAClC,WAASC,EAAKC,GAAc;AAC1B,IAAI,CAACA,EAAM,QAAQA,EAAM,UAAU,SAC3BA,EAAA,OAAOA,EAAM,UAAU,OAIzBA,EAAA,YAAYC,EAAQD,EAAM,SAAS;AAEzC,UAAME,IAAoC;AAAA,MACxC,yBAAyB;AAAA,IAAA;AAG3B,IAAAF,EAAM,UAAUG,EAAM,CAAA,GAAID,GAAiBF,EAAM,OAAO,GAEjDJ,EAAA,MAAM,KAAKI,CAAK;AAAA,EACzB;AAEA,WAASI,EAAM,EAAE,OAAAC,GAAO,MAAAC,EAAK,IAAe,CAAA,GAAI;AAC1C,QAAAD,MAAU,UAAa,CAACC,GAAM;AAChC,MAAAV,EAAO,MAAM;AACb;AAAA,IACF;AAEA,QAAIS,MAAU,QAAW;AAChB,MAAAT,EAAA,MAAM,OAAOS,GAAO,CAAC;AAC5B;AAAA,IACF;AAEA,QAAIC,GAAM;AACFD,YAAAA,IAAQT,EAAO,MAAM,UAAU,CAACI,MAAUA,EAAM,SAASM,CAAI;AAEnE,UAAID,MAAU;AAAI;AAEX,MAAAT,EAAA,MAAM,OAAOS,GAAO,CAAC;AAC5B;AAAA,IACF;AAAA,EACF;AAEA,WAASE,IAAW;AAClB,IAAAX,EAAO,QAAQ;EACjB;AAEA,SAAOY,EAAS;AAAA;AAAA;AAAA;AAAA,IAId,QAAQC,EAASb,CAAM;AAAA;AAAA;AAAA;AAAA,IAKvB,MAAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,OAAAK;AAAA;AAAA;AAAA;AAAA,IAKA,UAAAG;AAAA,EAAA,CACD;AACH;"}
1
+ {"version":3,"file":"useModals.js","sources":["../src/composables/useModals/useModals.ts"],"sourcesContent":["import merge from 'lodash-es/merge';\nimport { Component, markRaw, reactive, readonly, ref } from 'vue';\n\n// Utility type that maps each property of T to unknown, making it compatible with Record<string, unknown>\n// this ensures that the attributes property of the Modal interface can be used with custom types defined downstream\n// while still being compatible with the Record<string, unknown> type\ntype ToRecord<T> = {\n [P in keyof T]: T[P];\n};\n\n// #region modal-interface\nexport interface Modal<TAttributes = Record<string, unknown>> {\n /**\n * Import the modal that you want to use in your component,\n * then pass that to the composable\n */\n component: Component;\n\n /**\n * Optional identifier used to close a modal. The default value is `component.name` (if defined).\n */\n name?: string;\n\n /**\n * Props and listeners to passed through.\n *\n * Listeners need to be formatted as `onEventName`\n */\n attributes?: ToRecord<TAttributes>;\n\n /**\n * Dyanmic slots that you want rendered in the format of\n * { default: 'my slot content' }\n *\n * The Modals component which renders this list passes the value for slots through\n * a html sanitizer to avoid XSS attacks\n */\n slots?: Record<string, string>;\n\n /**\n * Custom options to use for the given modal.\n *\n * If options are not passed in, then useModals will set the following values as defaults\n *\n * {\n * disableDefaultListeners: false\n * }\n */\n options?: {\n disableDefaultListeners?: boolean;\n };\n}\n// #endregion modal-interface\n\ninterface CloseArgs {\n index?: number;\n name?: string;\n}\n\nconst active = ref<Modal[]>([]);\n\nexport default function useModals() {\n // T is the custom interface of the attributes that are passed to the modal\n function open<T>(modal: Modal<T>) {\n if (!modal.name && modal.component.name) {\n modal.name = modal.component.name;\n }\n\n //Prevent vue from making the entire component passed in reactive to avoid unnecessary performance overhead\n modal.component = markRaw(modal.component);\n\n const optionsDefaults: Modal['options'] = {\n disableDefaultListeners: false,\n };\n\n modal.options = merge({}, optionsDefaults, modal.options);\n\n active.value.push(modal);\n }\n\n function close({ index, name }: CloseArgs = {}) {\n if (index === undefined && !name) {\n active.value.pop();\n return;\n }\n\n if (index !== undefined) {\n active.value.splice(index, 1);\n return;\n }\n\n if (name) {\n const index = active.value.findIndex((modal) => modal.name === name);\n\n if (index === -1) return;\n\n active.value.splice(index, 1);\n return;\n }\n }\n\n function closeAll() {\n active.value = [];\n }\n\n return reactive({\n /**\n * The list of modals that are currently open.\n */\n active: readonly(active),\n\n /**\n * Opens the given modal.\n */\n open,\n\n /**\n * Closes a modal.\n * If no arguments are passed, then the top-most modal is closed.\n * If an index is passed, then the modal at that index is closed.\n * If a name is passed, then the modal with that name is closed.\n */\n close,\n\n /**\n * Closes all active/open modals.\n */\n closeAll,\n });\n}\n"],"names":["active","ref","useModals","open","modal","markRaw","optionsDefaults","merge","close","index","name","closeAll","reactive","readonly"],"mappings":";;;;;;;;;;;;AA2DA,MAAMA,IAASC,EAAa,CAAA,CAAE;AAE9B,SAAwBC,IAAY;AAElC,WAASC,EAAQC,GAAiB;AAChC,IAAI,CAACA,EAAM,QAAQA,EAAM,UAAU,SAC3BA,EAAA,OAAOA,EAAM,UAAU,OAIzBA,EAAA,YAAYC,EAAQD,EAAM,SAAS;AAEzC,UAAME,IAAoC;AAAA,MACxC,yBAAyB;AAAA,IAAA;AAG3B,IAAAF,EAAM,UAAUG,EAAM,CAAA,GAAID,GAAiBF,EAAM,OAAO,GAEjDJ,EAAA,MAAM,KAAKI,CAAK;AAAA,EACzB;AAEA,WAASI,EAAM,EAAE,OAAAC,GAAO,MAAAC,EAAK,IAAe,CAAA,GAAI;AAC1C,QAAAD,MAAU,UAAa,CAACC,GAAM;AAChC,MAAAV,EAAO,MAAM;AACb;AAAA,IACF;AAEA,QAAIS,MAAU,QAAW;AAChB,MAAAT,EAAA,MAAM,OAAOS,GAAO,CAAC;AAC5B;AAAA,IACF;AAEA,QAAIC,GAAM;AACFD,YAAAA,IAAQT,EAAO,MAAM,UAAU,CAACI,MAAUA,EAAM,SAASM,CAAI;AAEnE,UAAID,MAAU;AAAI;AAEX,MAAAT,EAAA,MAAM,OAAOS,GAAO,CAAC;AAC5B;AAAA,IACF;AAAA,EACF;AAEA,WAASE,IAAW;AAClB,IAAAX,EAAO,QAAQ;EACjB;AAEA,SAAOY,EAAS;AAAA;AAAA;AAAA;AAAA,IAId,QAAQC,EAASb,CAAM;AAAA;AAAA;AAAA;AAAA,IAKvB,MAAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,OAAAK;AAAA;AAAA;AAAA;AAAA,IAKA,UAAAG;AAAA,EAAA,CACD;AACH;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leaflink/stash",
3
- "version": "42.3.0",
3
+ "version": "42.4.0",
4
4
  "description": "LeafLink's design system.",
5
5
  "homepage": "https://stash.leaflink.com",
6
6
  "main": "./dist/index.ts",