Merge pull request #31 from teamseodo/feature/front-1557-add-resizeob…

…server-to-wowerlay

Add ResizeObserver Support and Refactor Code

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.4.2
+
+- `(Add)` [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) support for supporting browsers.
+
+### Demo
+
+- `(Add)` Dynamic Bounds sample.
+
+<br>
+
 ## 0.4.1
 
 - `(Fix)` Clicking Wowerlay's container causes all Wowerlays to close.

demo/demo.scss

@@ -155,6 +155,16 @@ select {
   }
 }
 
+a {
+  color: $accentColor;
+  transition: text-shadow 0.15s ease-in-out;
+  text-decoration: none;
+
+  &:hover {
+    text-shadow: 0px 0px 4px $accentColor;
+  }
+}
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;

demo/demos/dynamicBounds.tsx

@@ -0,0 +1,122 @@
+import { CSSProperties, defineComponent, ref, watch } from 'vue';
+import { defineDemo, html } from '../helpers';
+
+import { Wowerlay } from '../../src/lib';
+
+const fruits = ['Banana', 'Apple', 'Strawberry', 'Orange', 'Peach', 'Pear', 'Apricot'];
+const searchFruit = (name: string) => {
+  return fruits.filter((fruitName) => {
+    return fruitName.trim().toLowerCase().includes(name.toLowerCase());
+  });
+};
+
+const sFruitItem: CSSProperties = {
+  width: '100%',
+  padding: '5px'
+};
+
+const sFruitInput: CSSProperties = {
+  padding: '5px',
+  marginBottom: '5px'
+};
+
+const Component = defineComponent({
+  name: 'PopoverFollow',
+  setup() {
+    const targetEl = ref<HTMLElement>();
+    const isOpen = ref(false);
+    const fruitQuery = ref('');
+    const input = ref<HTMLElement>();
+
+    const handleVisibleChange = (state: boolean) => (isOpen.value = state);
+    const toggleVisible = () => (isOpen.value = !isOpen.value);
+
+    watch(
+      isOpen,
+      () => {
+        input.value?.focus();
+      },
+      { flush: 'post' }
+    );
+
+    return {
+      isOpen,
+      targetEl,
+      fruitQuery,
+      input,
+      handleVisibleChange,
+      toggleVisible
+    };
+  },
+  render() {
+    return (
+      <>
+        <span style="color: white">
+          This only works if your browser supports{' '}
+          <a
+            target="_blank"
+            href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#browser_compatibility"
+          >
+            ResizeObserver
+          </a>
+        </span>
+
+        <br />
+        <br />
+
+        <button onClick={this.toggleVisible} ref="targetEl">
+          Click to Show Popover
+          <Wowerlay
+            onUpdate:visible={this.handleVisibleChange}
+            visible={this.isOpen}
+            target={this.targetEl}
+            position="top"
+          >
+            <div style="max-width: 300px">
+              <input
+                ref="input"
+                style={sFruitInput}
+                v-model={this.fruitQuery}
+                placeholder="Search for fruits"
+                type="text"
+              />
+              {searchFruit(this.fruitQuery).map((name) => (
+                <div style={sFruitItem}>{name}</div>
+              ))}
+            </div>
+          </Wowerlay>
+        </button>
+      </>
+    );
+  }
+});
+
+export const Demo = defineDemo({
+  name: 'Dynamic Bounds',
+  component: Component,
+  template: html`
+    <template>
+      <button @click="visible = !visible" ref="target">
+        Click To Trigger Popover
+
+        <Wowerlay fixed v-model:visible="visible" :target="target">
+          <div style="max-width: 300px">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum quam, qui asperiores,
+            sed ipsa fuga, repellendus officiis labore odit temporibus quisquam necessitatibus? Illo
+            vitae quis reprehenderit sequi quae iste, fuga quasi atque et voluptatibus. Debitis,
+            facere, libero voluptate tempore omnis voluptas corporis fugiat sequi quidem cumque
+            quisquam exercitationem a doloribus.
+          </div>
+        </Wowerlay>
+      </button>
+    </template>
+  `,
+  script: html`
+    <script setup>
+      import { ref } from 'vue';
+
+      const visible = ref(false);
+      const target = ref();
+    </script>
+  `
+});

demo/helpers/index.ts

@@ -9,7 +9,7 @@ export interface IDemo {
 
 const removeBeginningIndent = (code: string) => {
   // 4 spaces always thanks to prettier
-  return code.replace(/\n    /g, '\n');
+  return code.replace(/\n\s{4}/g, '\n');
 };
 
 export const defineDemo = (demo: IDemo) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wowerlay",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "main": "./dist/wowerlay.umd.js",
   "module": "./dist/wowerlay.es.js",
   "types": "./dist/types/lib.d.ts",
@@ -22,7 +22,6 @@
     "dev": "cross-env MODE=demo vite",
     "build": "ts-node -T --project tsconfig-build.json scripts/build.ts",
     "build:demo": "cross-env MODE=demo vite build",
-    "release": "ts-node -T --project tsconfig-build.json scripts/release.ts",
     "script:build": "tsc --project tsconfig-build.json && cross-env MODE=production vite build",
     "watch": "cross-env MODE=production vite build --watch"
   },

scripts/modules/functions.ts

@@ -1,10 +1,10 @@
-import chalk, { BackgroundColor, ForegroundColor } from 'chalk';
-import execa, { Options } from 'execa';
-
+import chalk, { type BackgroundColor, type ForegroundColor } from 'chalk';
+import execa, { type Options as ExecaOptions } from 'execa';
 import fse from 'fs-extra';
+
 import { join } from 'path';
 
-export function execute(command: string, commandArguments: string[], options?: Options) {
+export function execute(command: string, commandArguments: string[], options?: ExecaOptions) {
   return execa(command, commandArguments, {
     stdio: 'inherit',
     ...options
@@ -29,22 +29,6 @@ export function sleep(ms: number): Promise<void> {
   });
 }
 
-export function indent(msg: string) {
-  const indentValue = '   ';
-  return indentValue + msg;
-}
-
-export async function readGitignore() {
-  const root = process.cwd();
-  return await fse.readFile(join(root, '.gitignore'), 'utf8');
-}
-
-export async function writeNewPackageJson(newPKG: typeof import('../../package.json')) {
-  const root = process.cwd();
-  const stringifiedPackageJSON = JSON.stringify(newPKG, undefined, 2);
-  return await fse.writeFile(join(root, 'package.json'), stringifiedPackageJSON);
-}
-
 export async function refactorTypes() {
   const dist = join(process.cwd(), 'dist');
   const basePath = join(dist, 'src');
@@ -53,7 +37,7 @@ export async function refactorTypes() {
   const toBeRemovedTypes = [
     'consts.d.ts', //
     'event',
-    join('components', 'WowerlayUtils')
+    'utils'
   ];
 
   if (await fse.pathExists(basePath)) {
@@ -66,10 +50,3 @@ export async function refactorTypes() {
   }
   throw new Error('types folder does not exist');
 }
-
-export async function getCurrentBranchName() {
-  const { stdout: branchName } = await execute('git', ['rev-parse', '--abbrev-ref', 'HEAD'], {
-    stdio: 'pipe'
-  });
-  return branchName.trim();
-}