revert: this reverts commit b248723.

crishellco · Jun 27, 2024 · 71285b4 · 71285b4
1 parent b248723
commit 71285b4
Show file tree

Hide file tree

Showing 18 changed files with 3,294 additions and 3,745 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <p align="center"><a href="https://vue-hubble.crishell.co/" target="_blank" rel="noopener noreferrer"><img src="docs/src/.vuepress/public/assets/img/logo.png"></a><br></p>
 
 <p align="center">
-  <img src="https://github.com/crishellco/vue-hubble/actions/workflows/node-ci.yml/badge.svg?branch=master" alt="Build">
+  <img src="https://github.com/crishellco/vue-hubble/workflows/Build/badge.svg" alt="Build">
   <a href="https://codecov.io/gh/crishellco/vue-hubble"><img src="https://codecov.io/gh/crishellco/vue-hubble/branch/master/graph/badge.svg?token=IKcXpNL84k" alt="codecov"></a>
   <a href="https://codeclimate.com/github/crishellco/vue-hubble/maintainability"><img src="https://api.codeclimate.com/v1/badges/e1f2536b9be3c32e6fef/maintainability" alt="Maintainability"></a>
   <br>
@@ -17,6 +17,15 @@ about collisions, extraneous classes, etc.
 
 Check out the [demo](http://vue-hubble-demo.crishell.co)
 
+***
+
+__NOTE__
+
+This version works with __Vue 3.x and options API__ only.
+Vue 3.x composition API support coming soon.
+
+***
+
 ## Table of Contents
 
 * [Documentation](#documentation)

diff --git a/demo/.nvmrc b/demo/.nvmrc
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -1,14 +1,11 @@
 <template>
   <div id="app">
     <img v-hubble="'image'" alt="Vue logo" src="./assets/logo.png" />
-    <hello-world v-hubble="'hello-world'">
-      <buttons v-hubble="'buttons'" />
-    </hello-world>
+    <hello-world />
   </div>
 </template>
 
 <script>
-import Buttons from './components/Buttons.vue';
 import HelloWorld from './components/HelloWorld.vue';
 
 export default {
@@ -17,7 +14,6 @@ export default {
   hubble: 'parent',
 
   components: {
-    Buttons,
     HelloWorld,
   },
 };

diff --git a/demo/src/components/Buttons.vue b/demo/src/components/Buttons.vue
diff --git a/demo/src/components/HelloWorld.vue b/demo/src/components/HelloWorld.vue
@@ -2,13 +2,21 @@
   <div class="hello">
     <h1 v-hubble="'header'">Hover over elements to see and copy selectors</h1>
     <code v-hubble="'command'">$ yarn serve --mode test</code>
-
-    <slot />
+    <div style="position: fixed; bottom: 0; right: 0; padding: 1rem">
+      <button v-hubble="'submit'">Submit</button>
+    </div>
+    <div style="position: fixed; bottom: 0; left: 0; padding: 1rem">
+      <button v-hubble="'cancel'">Cancel</button>
+    </div>
   </div>
 </template>
 
-<script setup>
-const hubble = 'child';
+<script>
+export default {
+  name: 'DemoHelloWorld',
+
+  hubble: 'child',
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

diff --git a/demo/src/main.js b/demo/src/main.js
@@ -1,3 +1,4 @@
+// import Vue from 'vue';
 import { createApp, h } from 'vue';
 
 import App from './App.vue';

diff --git a/demo/yarn.lock b/demo/yarn.lock
diff --git a/docs/.nvmrc b/docs/.nvmrc
@@ -1 +1 @@
-18
+16
diff --git a/docs/package.json b/docs/package.json
@@ -10,11 +10,10 @@
   },
   "scripts": {
     "dev": "vuepress dev src",
-    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider vuepress build src -d dist"
+    "build": "vuepress build src -d dist"
   },
   "license": "MIT",
   "devDependencies": {
-    "cross-env": "^7.0.3",
     "vuepress": "1.9.10"
   },
   "dependencies": {

diff --git a/docs/src/guide/namespacing.md b/docs/src/guide/namespacing.md
@@ -15,57 +15,38 @@ ancestral namespaces.
 
 ### Example
 
-#### Options API
-
 ```html
 <!-- Form Component (child) -->
 <template>
   <div v-hubble="'attribute-selector'"></div>
 </template>
 
 <script>
-export default {
-  hubble: 'login'
-};
+  export default {
+    hubble: {
+      namespace: 'form'
+    }
+  };
 </script>
 
 <!-- Login Component (parent) -->
 <template>
-  <Form />
+  <form />
 </template>
 
 <script>
-export default {
-  hubble: 'login',
-  components: {
-    Form
-  }
-};
-</script>
-
-<div vue-hubble-selector="[vue-hubble][login--form--attribute-selector]" vue-hubble login--form--attribute-selector></div>
-```
-
-#### Composition API
-
-```html
-<!-- Form Component (child) -->
-<template>
-  <div v-hubble="'attribute-selector'"></div>
-</template>
-
-<script setup>
-const hubble = 'form';
-</script>
-
-
-<!-- Login Component (parent) -->
-<template>
-  <Form />
-</template>
-
-<script setup>
-const hubble = 'login';
+  export default {
+    components: {
+      Form
+    },
+    hubble: {
+      namespace: 'login'
+    }
+    /**
+     * Or shorthand...
+     * hubble: 'login'
+     **/
+  };
 </script>
 
 <div vue-hubble-selector="[vue-hubble][login--form--attribute-selector]" vue-hubble login--form--attribute-selector></div>
@@ -79,55 +60,38 @@ component by using only it's own component namespace.
 
 ### Example
 
-#### Options API
-
 ```html
 <!-- Form Component (child) -->
 <template>
   <div v-hubble="'attribute-selector'"></div>
 </template>
 
 <script>
-export default {
-  hubble: 'login'
-};
+  export default {
+    hubble: {
+      namespace: 'form'
+    }
+  };
 </script>
 
 <!-- Login Component (parent) -->
 <template>
-  <Form />
+  <form />
 </template>
 
 <script>
-export default {
-  hubble: 'login',
-  components: {
-    Form
-  }
-};
-</script>
-
-<div vue-hubble-selector="[vue-hubble][form--attribute-selector]" vue-hubble form--attribute-selector></div>
-```
-
-#### Composition API
-```html
-<!-- Form Component (child) -->
-<template>
-  <div v-hubble="'attribute-selector'"></div>
-</template>
-
-<script setup>
-const hubble = 'form';
-</script>
-
-<!-- Login Component (parent) -->
-<template>
-  <Form />
-</template>
-
-<script setup>
-const hubble = 'login';
+  export default {
+    components: {
+      Form
+    },
+    hubble: {
+      namespace: 'login'
+    }
+    /**
+     * Or shorthand...
+     * hubble: 'login'
+     **/
+  };
 </script>
 
 <div vue-hubble-selector="[vue-hubble][form--attribute-selector]" vue-hubble form--attribute-selector></div>

diff --git a/docs/src/guide/plugin-options.md b/docs/src/guide/plugin-options.md
@@ -1,11 +1,11 @@
 # Plugin Options
 
 | Name                     | Type              | Default | Description                                                                                                                           |
-|--------------------------|-------------------|---------|---------------------------------------------------------------------------------------------------------------------------------------|
+| ------------------------ | ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
 | `defaultSelectorType`    | `string`          | `attr`  | Defines the selector type if not passed into the directive `v-hubble:attr`                                                            |
 | `enableComments`         | `boolean`         | `false` | Enables or disables comments around elements with hubble selectors                                                                    |
 | `enableDeepNamespacing`  | `boolean`         | `true`  | Enables or disables auto recursive namespacing                                                                                        |
 | `enableSelectorPicker`   | `boolean`         | `false` | Enables or disables the selector picker feature                                                                                       |
-| `environment`            | `string or array` | `test`  | Defines the environment(s) in which these selectors are added.<br /><br />**Note:** Use `*` for all environments.                     |
+| `environment`            | `string or array` | `test`  | Defines the environment(s) in which these selectors are added                                                                         |
 | `enableGroupedSelectors` | `boolean`         | `true`  | Enables or disables grouping the `vue-hubble-selector` attribute value with `[vue-hubble]`                                            |
 | `prefix`                 | `string`          | `''`    | Prefixes all selectors with the value and `--`, if value exists. For example, if `prefix = 'qa'`, all selectors well begin with`qa--` |
diff --git a/docs/src/guide/usage.md b/docs/src/guide/usage.md
@@ -38,7 +38,7 @@ Use the directive to add test selectors to elements you wish to test.
 
 ## Writing Tests
 
-[Examples](https://github.com/crishellco/vue-hubble/blob/master/plugin/src/directive.spec.js)
+[Examples](https://github.com/crishellco/vue-hubble/blob/master/src/directive.spec.js)
 
 ```javascript
 describe('directive.js', () => {

diff --git a/docs/src/index.md b/docs/src/index.md
@@ -7,7 +7,7 @@ footer: MIT Licensed | Copyright © 2020-present Chris Mitchell
 ---
 
 <p align="center">
-  <img src="https://github.com/crishellco/vue-hubble/actions/workflows/node-ci.yml/badge.svg?branch=master" alt="Build">
+  <img src="https://github.com/crishellco/vue-hubble/workflows/Build/badge.svg" alt="Build">
   <a href="https://codecov.io/gh/crishellco/vue-hubble"><img src="https://codecov.io/gh/crishellco/vue-hubble/branch/master/graph/badge.svg?token=IKcXpNL84k" alt="codecov"></a>
   <a href="https://codeclimate.com/github/crishellco/vue-hubble/maintainability"><img src="https://api.codeclimate.com/v1/badges/e1f2536b9be3c32e6fef/maintainability" alt="Maintainability"></a>
   <br>