initial

Author: lucasferreiralimax

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.cjs

@@ -0,0 +1,21 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended'
+  ],
+  overrides: [
+    {
+      files: [
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:cypress/recommended'
+      ]
+    }
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

README.md

@@ -0,0 +1,81 @@
+# voicecapture-vue
+
+A component darkmode injection in your document page with vue.js
+
+<a href="https://voicecapture-vue.web.app" target="_blank">Live Preview</a>
+
+Install
+```js
+npm install --save voicecapture-vue
+```
+
+Usage basic
+```vue
+import VoiceCaptureVue from 'voicecapture-vue';
+
+<VoiceCaptureVue />
+```
+
+Prop hiddenLabel
+```vue
+<VoiceCaptureVue :hiddenLabel="true" />
+```
+
+Prop hiddenIcon
+```vue
+<VoiceCaptureVue :hiddenIcon="true" />
+```
+
+Prop labelDark and labelLight
+```vue
+<VoiceCaptureVue labelDark="Tema escuro" labelLight="Tema claro" />
+```
+
+Slot change icon and label custom
+```vue
+<VoiceCaptureVue>
+  <template #iconDark>
+    <svg></svg>
+  </template>
+  <template #iconLight>
+    <svg></svg>
+  </template>
+  <template #labelDark>
+    Off
+  </template>
+  <template #labelLight>
+    On
+  </template>
+</VoiceCaptureVue>
+```
+
+Usage useVoiceCaptureVue with toggleMode and mode value
+```vue
+import { useVoiceCaptureVue } from 'voicecapture-vue';
+
+const { mode, toggleMode } = useVoiceCaptureVue();
+
+<button @click="toggleMode">VoiceCaptureVue {{ mode }}</button>
+```
+
+Style modification and usage in your styles
+```css
+body {
+  --dm-color-primary: #41b883;
+  --dm-color-secondary: #34495e;
+  --dm-color-text: #222;
+  --dm-color-background: #fff;
+}
+
+body.darkmode {
+  --dm-color-text: #fff;
+  --dm-color-background: #222;
+}
+```
+Create your variable colors and update this with class .darkmode.
+
+### Description class of components
+If VoiceCaptureVue usage in a page, a class in body document is update with class darkmode.
+In LocalStorage is created a key store with value current mode.
+Do you usage children body.darkmode styles for your application.
+I recomend create a variables colors in css and update this with toggle class of body document.

cypress.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173',
+    testIsolation: false
+  },
+});

cypress/e2e/VoiceCapture.cy.js

@@ -0,0 +1,5 @@
+describe('Test VoiceCapture', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+});

cypress/e2e/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  },
+  "include": ["./**/*", "../support/**/*"]
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })