Skip to content

V
vue-custom-button
Commit 5b9ed822 authored by Sanga Raju Gupta Bonagiri's avatar Sanga Raju Gupta Bonagiri
Browse files
Options

Push existing project to GitLab

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 615 additions and 0 deletions
.eslintrc.cjs 0 → 100644
View file @ 5b9ed822
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
}
}
.gitignore 0 → 100644
View file @ 5b9ed822
# 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?
*.tsbuildinfo
.prettierrc.json 0 → 100644
View file @ 5b9ed822
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}
\ No newline at end of file
.vscode/extensions.json 0 → 100644
View file @ 5b9ed822
{
"recommendations": [
"Vue.volar",
"Vue.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}
README.md 0 → 100644
View file @ 5b9ed822
# test vue sample
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
### Run Unit Tests with [Vitest](https://vitest.dev/)
```sh
npm run test:unit
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```
index.html 0 → 100644
View file @ 5b9ed822
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
jsconfig.json 0 → 100644
View file @ 5b9ed822
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
package-lock.json 0 → 100644
View file @ 5b9ed822
This diff is collapsed.
package.json 0 → 100644
View file @ 5b9ed822
{
"name": "@sangarajuguptanisum/vue-custom-components",
"version": "0.0.3",
"private": false,
"type": "module",
"files": [
"dist"
],
"main": "dist/vue-custom-components.cjs.cjs",
"module": "dist/vue-custom-components.es.js",
"scripts": {
"dev": "vite",
"build": "vite build && npm run build:styles",
"build:styles": "postcss src/tailwind.css -o dist/index.css",
"preview": "vite preview",
"test:unit": "vitest",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"axios": "^1.6.2",
"pinia": "^2.1.7",
"vue": "^3.3.11",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",
"@vitejs/plugin-vue": "^4.5.2",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/test-utils": "^2.4.3",
"autoprefixer": "^10.4.16",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"jsdom": "^23.0.1",
"postcss": "^8.4.32",
"postcss-cli": "^11.0.0",
"prettier": "^3.0.3",
"tailwindcss": "^3.3.6",
"vite": "^5.0.10",
"vitest": "^1.0.4"
},
"peerdependencies": {
"vue": "^3.3.11"
}
}
postcss.config.js 0 → 100644
View file @ 5b9ed822
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
src/App.vue 0 → 100644
View file @ 5b9ed822
<script >
import SButton from '../src/components/Button/Button.vue';
import SLogin from'../src/components/Login/Login.vue';
export default {
name: "App",
components: {
SButton,
SLogin
},
}
</script>
<template>
<div class = "bg-teal-500">
<SLogin loginText="test"></SLogin>
<SButton isLoading=true ></SButton>
</div>
</template>
<style scoped>
</style>
src/assets/logo.svg 0 → 100644
View file @ 5b9ed822
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
src/components/Button/Button.vue 0 → 100644
View file @ 5b9ed822
<template>
<p>future skeleton button code here</p>
<div v-if="isLoading" role="progressbar" class=" w-28 h-12 rounded-full bg-gray-300 animate-pulse dark:bg-gray-400">
</div>
</template>
<script>
export default {
name:"Button",
data() {
return {
}
},
props:['isLoading']
}
</script>
src/components/Button/index.js 0 → 100644
View file @ 5b9ed822
import SButton from './Button.vue';
export { SButton}
export default SButton
\ No newline at end of file
src/components/CustomInput/CustomInput.vue 0 → 100644
View file @ 5b9ed822
<template>
<label>
{{ label }}
<input
class="border w-full py-2 px-2 rounded shadow hover:border-teal-600 ring-1 ring-inset ring-gray-300 font-mono"
:name="name" :type="type" :value="value" @input="updateValue" />
</label>
</template>
<script >
export default {
name: "CustomInput",
props: {
label: String,
name: String,
type: {
type: String,
default: 'text',
},
value: String
},
methods: {
updateValue(event) {
console.log("testttt custim", event.target.value)
this.$emit('input-test', event.target.value)
},
},
data() {
return {
}
}
}
</script>
\ No newline at end of file
src/components/Login/Login.vue 0 → 100644
View file @ 5b9ed822
<template>
<div class="fixed right-0 inline-block " @mouseover="isVisible = true" @mouseleave="isVisible = false"
@keydown.enter="isVisible = !isVisible">
<button type="button"
class="inline-block relative -top-4 right-2 text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
<span class="flex-shrink-0">{{ loginText }}</span>
</button>
<transition enter-active-class="transition duration-300 ease-out transform"
enter-class="-translate-y-3 scale-95 opacity-0" enter-to-class="translate-y-0 scale-100 opacity-100"
leave-active-class="transition duration-150 ease-in transform" leave-class="translate-y-0 opacity-100"
leave-to-class="-translate-y-3 opacity-0">
<div v-show="isVisible" class="fixed right-0 pt-2">
<div class="relative py-1 bg-white border border-gray-200 rounded-md shadow-xl">
<div class="relative">
<p class="relative top-20 text-center text-2xl text-teal-500">Shopping Cart Login</p>
<div class='flyout-width flex items-center justify-center min-h-screen'>
<div class='w-full max-w-lg px-10 py-8 mx-auto bg-teal-500 border rounded-lg shadow-2xl'>
<div class='max-w-md mx-auto space-y-3'>
<h3 class="text-lg font-semibold">Account {{ this.buttonName.toLowerCase() === 'proceed'
?
'' : this.buttonName }} Form</h3>
<div>
<form>
<CustomInput label="Email:" name="email" :value="email"
@input-test="updateEmail">
</CustomInput>
<CustomInput v-if="userRegistration === true" label="username" name="username"
:value="username" @input-test="updateuserName"></CustomInput>
<CustomInput v-if="userLogin === true || userRegistration === true"
label="Password" name="password" :value="password" type="password"
@input-test="updatePassword"></CustomInput>
<CustomInput v-if="userRegistration === true" label="Confirm Password"
name="confirm password" :value="confirmPassword" type="password"
@input-test="updateConfirmPassword">
</CustomInput>
</form>
</div>
<div class="flex gap-3 pt-3 items-center">
<button
class="border hover:border-teal-600 px-4 py-2 rounded-lg shadow ring-1 ring-inset ring-gray-300"
@click="handle_function_call(buttonName)">{{ buttonName }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
import axios from "axios";
import CustomInput from '../CustomInput/CustomInput.vue'
export default {
name: "Login",
components: {
CustomInput
},
props: {
loginText: {
type: String,
default: 'login',
}
},
data() {
return {
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
"X-Binarybox-Api-Key": "binarybox_api_key_VzO8M31mfzUAW58MBuDkyVX68IWufWJWW7m5BqqSi3FSXHHwKeHjuXQzOC7QdACzffplQ93npFb6Q3sMQLeImXxkz3IHQDkWy1yt"
},
buttonName: "proceed",
isVisible: false,
email: "",
password: "",
confirmPassword: "",
username: "",
userLogin: false,
userRegistration: false,
testingEmails: ['sanga@gmail.com', 'raju@gmail.com', 'gupta@gmail.com']
}
},
methods: {
updateEmail(val) {
this.email = val;
console.log("email", this.email);
},
updatePassword(val) {
this.password = val;
},
updateuserName(val) {
this.username = val
},
updateConfirmPassword(val) {
this.confirmPassword = val
},
proceed() {
console.log("proceed entered", this.email)
if (this.testingEmails.includes(this.email)) {
this.buttonName = "Login"
this.userLogin = true;
this.userRegistration = false;
}
else {
this.buttonName = "Register"
this.userLogin = false;
this.userRegistration = true;
}
},
async register() {
const postData = JSON.stringify({
"name": this.username,
"email": this.email,
"password": this.password,
"password_confirmation": this.confirmPassword
});
const { data } = await axios.post("https://mock-api.binaryboxtuts.com/api/register", postData, { headers: this.headers });
console.log(data, "dataaaaa registerrr")
this.$emit('user-login', data);
this.password = "";
this.email = "";
this.username = "";
this.confirmPassword = ""
},
async login() {
const postData = JSON.stringify({ "email": this.email, "password": this.password });;
const { data } = await axios.post("https://mock-api.binaryboxtuts.com/api/login", postData, { headers: this.headers });
this.$emit('user-login', data);
console.log(data, "dataaaaa")
this.password = "";
this.email = "";
},
handle_function_call(function_name) {
this[function_name.toLowerCase()]();
},
},
}
</script>
<style scoped>
.flyout-width {
width: 35rem;
}
</style>
\ No newline at end of file
src/components/Login/index.js 0 → 100644
View file @ 5b9ed822
import SLogin from './Login.vue';
export { SLogin}
export default SLogin
\ No newline at end of file
src/components/LoginForm/LoginForm.vue 0 → 100644
View file @ 5b9ed822
<template>
<div class="fixed inset-0" @click="isVisible = false"></div>
<div class="fixed right-0 inline-block" @mouseover="isVisible = true" @mouseleave="isVisible = false"
@keydown.enter="isVisible = !isVisible">
<button type="button"
class="inline-flex items-center justify-between px-2 py-1 font-medium text-gray-700 transition-all duration-500 rounded-md focus:outline-none focus:text-brand-900 sm:focus:shadow-outline">
<span class="flex-shrink-0">Login</span>
<svg fill="currentColor" viewBox="0 0 20 20" class="flex-shrink-0 w-5 h-5 ml-1">
<path :class="{ 'rotate-180': isVisible }"
class="transition duration-300 ease-in-out origin-center transform" fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
<transition enter-active-class="transition duration-300 ease-out transform"
enter-class="-translate-y-3 scale-95 opacity-0" enter-to-class="translate-y-0 scale-100 opacity-100"
leave-active-class="transition duration-150 ease-in transform" leave-class="translate-y-0 opacity-100"
leave-to-class="-translate-y-3 opacity-0">
<div v-show="isVisible" class="fixed right-0 pt-2">
<div class="relative py-1 bg-white border border-gray-200 rounded-md shadow-xl">
<div class="relative">
<div
class='flyout-width flex items-center justify-center min-h-screen from-green-900 via-teal-800 to-teal-500 bg-gradient-to-br'>
<div class='w-full max-w-lg px-10 py-8 mx-auto bg-white border rounded-lg shadow-2xl'>
<div class='max-w-md mx-auto space-y-3'>
<h3 class="text-lg font-semibold">Account Login Form</h3>
<div>
<label class="block py-1">Your UserName</label>
<input type="text" name="username" v-model="input.username"
class="border w-full py-2 px-2 rounded shadow hover:border-teal-600 ring-1 ring-inset ring-gray-300 font-mono">
<p class="text-sm mt-2 px-2 hidden text-gray-600">Text helper</p>
</div>
<!-- <div>
<label class="block py-1">Your email</label>
<input type="email" class="border w-full py-2 px-2 rounded shadow hover:border-teal-600 ring-1 ring-inset ring-gray-300 font-mono">
<p class="text-sm mt-2 px-2 hidden text-gray-600">Text helper</p>
</div> -->
<div>
<label class="block py-1">Password</label>
<input type="password" name="password" v-model="input.password"
class="border w-full py-2 px-2 rounded shadow hover:border-teal-600 ring-1 ring-inset ring-gray-300 font-mono">
</div>
<div class="flex gap-3 pt-3 items-center">
<button
class="border hover:border-teal-600 px-4 py-2 rounded-lg shadow ring-1 ring-inset ring-gray-300">Login</button>
<!-- <a href="#">Forgot Password</a> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
name: "LoginForm",
data() {
return {
isVisible: false,
input: {
username: "",
password: ""
}
}
},
methods: {
async validateLogin() {
const res = await axios.post("https://dummyjson.com/auth/login", {
email: this.input.username,
password: this.input.password
})
}
}
}
</script>
<style scoped>
.flyout-width {
width: 40rem;
}
</style>
\ No newline at end of file
src/components/index.js 0 → 100644
View file @ 5b9ed822
import {SButton} from './Button'
import {SLogin} from './Login'
export default {SButton,SLogin}
\ No newline at end of file
src/index.js 0 → 100644
View file @ 5b9ed822
import * as components from './components';
const defualtComponents = components?.default;
const vueComponents = {
install(Vue){
Object.keys(defualtComponents).forEach(name=>{
Vue.component(name, defualtComponents[name]);
});
},
}
export default vueComponents;
export {SButton} from './components/Button';
export {SLogin} from './components/Login'
src/main.js 0 → 100644
View file @ 5b9ed822
import './tailwind.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './tailwind.css'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
src/stores/counter.js 0 → 100644
View file @ 5b9ed822
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
src/tailwind.css 0 → 100644
View file @ 5b9ed822
@tailwind base;
@tailwind components;
@tailwind utilities;
\ No newline at end of file
tailwind.config.js 0 → 100644
View file @ 5b9ed822
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{js,ts,jsx,tsx,vue}"],
theme: {
extend: {},
},
plugins: [],
}
vite.config.js 0 → 100644
View file @ 5b9ed822
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [
vue(),
],
build: {
lib: {
entry: resolve(__dirname, 'src/index.js'),
formats: ['es', 'cjs'],
fileName: (format) => `vue-custom-components.${format}.js`
},
rollupOptions: {
external: ['vue'],
output: {
preserveModules: true,
exports: 'named'
}
}
}
})
\ No newline at end of file
vitest.config.js 0 → 100644
View file @ 5b9ed822
import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(
viteConfig,
defineConfig({
test: {
environment: 'jsdom',
exclude: [...configDefaults.exclude, 'e2e/*'],
root: fileURLToPath(new URL('./', import.meta.url))
}
})
)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment