fuzzy-ui - npm Package Compare versions

Comparing version 0.0.21 to 0.0.22

docs/index.md

@@ -145,3 +145,12 @@ # Home
     <FUIColumn header="Phone" sortable editable width="200" />
-    <FUIColumn header="Date of Birth" sortable editable type="date" :getter="toDate" :setter="fromDate" getter-on-edit  width="200" />
+    <FUIColumn
+      header="Date of Birth"
+      sortable
+      editable
+      type="date"
+      :getter="toDate"
+      :setter="fromDate"
+      getter-on-edit
+      width="200"
+    />
     <FUIColumn header="Status" fixed="right" :options="statusOptions" editable width="200" />
@@ -160,3 +169,3 @@ </FUITable>
 const fromDate = (row, value) => {
-  return row.dateOfBirth = value.split('-').reverse().join('.')
+  return (row.dateOfBirth = value.split('-').reverse().join('.'))
 }
@@ -188,3 +197,3 @@
     status: '', // show placeholder
-  }
+  },
 ])
@@ -213,1 +222,35 @@
 </FUITable>
+
+## useMountOutsidec()
+
+On some occasions you want to mount an element outside of the usual Vue app. This is useful for example when you want to open a modal programatically without the need to put it in the template and use Teleport.
+
+`useMountOutsidec()` gives you the ability to do so.
+It returns an function that mounts the specified component and returns an object with the `component` and an `unmount` function.
+
+`useMountOutside` takes 2 additional optional arguments:
+
+- `props` - an object with props that will be passed to the component
+- `children` - an array of children that will be passed to the component
+
+The mounting function can take an additional argument which will be passed to the component as additional props.
+
+```vue
+<template>
+  <div>
+    <button @click="openModal">Open Modal</button>
+  </div>
+</template>
+
+<script setup>
+import { useMountOutsidec } from '../src/index'
+import Modal from './Modal.vue'
+
+const mountComponent = useMountOutsidec(Modal, props, children)
+
+const openModal = () => {
+  const { component, unmoun } = mountComponent(extraProps)
+  // do something with the component
+}
+</script>
+```

package.json

 {
   "name": "fuzzy-ui",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "main": "src/index.ts",
@@ -5,0 +5,0 @@ "scripts": {

src/index.ts

@@ -7,1 +7,2 @@ export { default as FUITable } from './components/Table/Table.vue'
 export type { ColConfig, Row } from './components/Table/types'
+export * from './useMountOutside'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110625

increased by3.37%

Number of package files

40

increased by2.56%

Lines of code

349

increased by28.78%

No dependency changes