@formkit/drag-and-drop/vue/index.mjs.map

Drag and drop package.

{"version":3,"sources":["../../src/vue/index.ts","../../src/vue/utils.ts"],"sourcesContent":["import type { Ref } from \"vue\";\nimport type { VueDragAndDropData, VueParentConfig } from \"./types\";\nimport { dragAndDrop as initParent, isBrowser, tearDown } from \"../index\";\nimport { onUnmounted, ref } from \"vue\";\nimport { handleVueElements } from \"./utils\";\nexport * from \"./types\";\n\n/**\n * Global store for parent els to values.\n */\nconst parentValues: WeakMap<HTMLElement, Ref<Array<any>> | Array<any>> =\n  new WeakMap();\n\n/**\n * Returns the values of the parent element.\n *\n * @param parent - The parent element.\n *\n * @returns The values of the parent element.\n */\nfunction getValues(parent: HTMLElement): Array<any> {\n  const values = parentValues.get(parent);\n\n  if (!values) {\n    console.warn(\"No values found for parent element\");\n\n    return [];\n  }\n\n  return \"value\" in values ? values.value : values;\n}\n\n/**\n * Sets the values of the parent element.\n *\n * @param parent - The parent element.\n *\n * @param newValues - The new values for the parent element.\n *\n * @returns void\n */\nfunction setValues(newValues: Array<any>, parent: HTMLElement): void {\n  const currentValues = parentValues.get(parent);\n\n  // Only update reactive values. If static, let's not update.\n  if (currentValues && \"value\" in currentValues)\n    currentValues.value = newValues;\n  //else if (currentValues) parentValues.set(parent, newValues);\n}\n/**\n * Entry point for Vue drag and drop.\n *\n * @param data - The drag and drop configuration.\n *\n * @returns void\n */\nexport function dragAndDrop<T>(\n  data: VueDragAndDropData<T> | Array<VueDragAndDropData<T>>\n): void {\n  if (!isBrowser) return;\n\n  if (!Array.isArray(data)) data = [data];\n\n  data.forEach((dnd) => {\n    const { parent, values, ...rest } = dnd;\n\n    handleVueElements(parent, handleParent(rest, values));\n  });\n}\n\n/**\n * Creates a new instance of drag and drop and returns the parent element and\n * a ref of the values to use in your template.\n *\n * @param initialValues - The initial values of the parent element.\n *\n * @returns The parent element and values for drag and drop.\n */\nexport function useDragAndDrop<T>(\n  initialValues: T[],\n  options: Partial<VueParentConfig<T>> = {}\n): [\n  Ref<HTMLElement | undefined>,\n  Ref<T[]>,\n  (config: Partial<VueParentConfig<T>>) => void\n] {\n  const parent = ref<HTMLElement | undefined>();\n\n  const values = ref(initialValues) as Ref<T[]>;\n\n  function updateConfig(config: Partial<VueParentConfig<T>> = {}) {\n    dragAndDrop({ parent, values, ...config });\n  }\n\n  dragAndDrop({ parent, values, ...options });\n\n  onUnmounted(() => parent.value && tearDown(parent.value));\n\n  return [parent, values, updateConfig];\n}\n\n/**\n * Sets the HTMLElement parent to weakmap with provided values and calls\n * initParent.\n *\n * @param config - The config of the parent.\n *\n * @param values - The values of the parent element.\n *\n */\nfunction handleParent<T>(\n  config: Partial<VueParentConfig<T>>,\n  values: Ref<Array<T>> | Array<T>\n) {\n  return (parent: HTMLElement) => {\n    parentValues.set(parent, values);\n\n    initParent({\n      parent,\n      getValues,\n      setValues,\n      config: {\n        ...config,\n      },\n    });\n  };\n}\n","import type { VueElement } from \"./types\";\nimport { watch } from \"vue\";\n\n/**\n * Checks if the given parent is an HTMLElement.\n *\n * @param dnd - The drag and drop configuration.\n */\nexport function getEl(parent: VueElement): HTMLElement | void {\n  if (parent instanceof HTMLElement) return parent;\n  else if (parent.value instanceof HTMLElement) return parent.value;\n  else if (\"$el\" in parent && parent.$el instanceof HTMLElement)\n    return parent.$el;\n}\n\nexport function handleVueElements(\n  elements: Array<VueElement> | VueElement,\n  cb: (el: HTMLElement) => void\n): void {\n  if (!Array.isArray(elements)) elements = [elements];\n\n  for (const element of elements) {\n    const validEl = getEl(element);\n\n    if (validEl) return cb(validEl);\n\n    const stop = watch(element, (newEl) => {\n      if (!newEl) return;\n\n      const validEl = getEl(newEl);\n\n      !validEl ? console.warn(\"Invalid parent element\", newEl) : cb(validEl);\n\n      stop();\n    });\n  }\n}\n"],"mappings":";AAEA,SAAS,eAAe,YAAY,WAAW,gBAAgB;AAC/D,SAAS,aAAa,WAAW;;;ACFjC,SAAS,aAAa;AAOf,SAAS,MAAM,QAAwC;AAC5D,MAAI,kBAAkB,YAAa,QAAO;AAAA,WACjC,OAAO,iBAAiB,YAAa,QAAO,OAAO;AAAA,WACnD,SAAS,UAAU,OAAO,eAAe;AAChD,WAAO,OAAO;AAClB;AAEO,SAAS,kBACd,UACA,IACM;AACN,MAAI,CAAC,MAAM,QAAQ,QAAQ,EAAG,YAAW,CAAC,QAAQ;AAElD,aAAW,WAAW,UAAU;AAC9B,UAAM,UAAU,MAAM,OAAO;AAE7B,QAAI,QAAS,QAAO,GAAG,OAAO;AAE9B,UAAM,OAAO,MAAM,SAAS,CAAC,UAAU;AACrC,UAAI,CAAC,MAAO;AAEZ,YAAMA,WAAU,MAAM,KAAK;AAE3B,OAACA,WAAU,QAAQ,KAAK,0BAA0B,KAAK,IAAI,GAAGA,QAAO;AAErE,WAAK;AAAA,IACP,CAAC;AAAA,EACH;AACF;;;AD1BA,IAAM,eACJ,oBAAI,QAAQ;AASd,SAAS,UAAU,QAAiC;AAClD,QAAM,SAAS,aAAa,IAAI,MAAM;AAEtC,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,oCAAoC;AAEjD,WAAO,CAAC;AAAA,EACV;AAEA,SAAO,WAAW,SAAS,OAAO,QAAQ;AAC5C;AAWA,SAAS,UAAU,WAAuB,QAA2B;AACnE,QAAM,gBAAgB,aAAa,IAAI,MAAM;AAG7C,MAAI,iBAAiB,WAAW;AAC9B,kBAAc,QAAQ;AAE1B;AAQO,SAAS,YACd,MACM;AACN,MAAI,CAAC,UAAW;AAEhB,MAAI,CAAC,MAAM,QAAQ,IAAI,EAAG,QAAO,CAAC,IAAI;AAEtC,OAAK,QAAQ,CAAC,QAAQ;AACpB,UAAM,EAAE,QAAQ,QAAQ,GAAG,KAAK,IAAI;AAEpC,sBAAkB,QAAQ,aAAa,MAAM,MAAM,CAAC;AAAA,EACtD,CAAC;AACH;AAUO,SAAS,eACd,eACA,UAAuC,CAAC,GAKxC;AACA,QAAM,SAAS,IAA6B;AAE5C,QAAM,SAAS,IAAI,aAAa;AAEhC,WAAS,aAAa,SAAsC,CAAC,GAAG;AAC9D,gBAAY,EAAE,QAAQ,QAAQ,GAAG,OAAO,CAAC;AAAA,EAC3C;AAEA,cAAY,EAAE,QAAQ,QAAQ,GAAG,QAAQ,CAAC;AAE1C,cAAY,MAAM,OAAO,SAAS,SAAS,OAAO,KAAK,CAAC;AAExD,SAAO,CAAC,QAAQ,QAAQ,YAAY;AACtC;AAWA,SAAS,aACP,QACA,QACA;AACA,SAAO,CAAC,WAAwB;AAC9B,iBAAa,IAAI,QAAQ,MAAM;AAE/B,eAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,QACN,GAAG;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH;AACF;","names":["validEl"]}