@selfeesas/shared-components 0.4.1 → 0.4.3

package/README.md

@@ -1,4 +1,4 @@
-  # 🧩 @selfeesas/shared-components
+# 🧩 @selfeesas/shared-components
 
 A component library for sharing UI components across Selfeesas company projects. Built on Vue 3 and Quasar, optimized for Vite.
 
@@ -43,7 +43,7 @@ yarn add @selfeesas/shared-components
 ## 🔧 Usage
 
 ```ts
-import { SharedButton } from "@selfeesas/shared-components";
+import { SharedButton } from '@selfeesas/shared-components'
 ```
 
 Now you can use the components in your Vue templates:
@@ -54,6 +54,13 @@ Now you can use the components in your Vue templates:
 </template>
 ```
 
+⚠️ Important: To ensure components render correctly, you must import the styles.
+Add the following import in your project's root file (e.g., main.ts or main.js):
+
+```bash
+import "@selfeesas/shared-components/dist/assets/shared-components.css";
+```
+
 ---
 
 ## 🧱 Available Components
@@ -180,34 +187,43 @@ A commit message consists of a **type**, optional **scope**, optional **!** for
 #### Examples
 
 - **Fix (Patch Release)**:
+
   ```
   fix(SharedButton): resolve alignment issue in dark mode
   ```
+
   - Triggers a patch release (e.g., `1.0.0` → `1.0.1`).
 
 - **Feature (Minor Release)**:
+
   ```
   feat(SharedDropdown): add support for multi-select
   ```
+
   - Triggers a minor release (e.g., `1.0.0` → `1.1.0`).
 
 - **Breaking Change (Major Release)**:
+
   ```
   feat(SharedModal): add new props for customization
   BREAKING CHANGE: removed deprecated `size` prop
   ```
+
   - Triggers a major release (e.g., `1.0.0` → `2.0.0`).
 
 - **Documentation Update**:
+
   ```
   docs(readme): update installation instructions
   ```
+
   - Does not trigger a release but updates the changelog.
 
 - **Scoped Chore**:
   ```
   chore(deps): update Quasar to 2.18.1
   ```
+
   - Does not trigger a release but is included in the changelog.
 
 #### Best Practices

package/dist/assets/shared-components.css

@@ -0,0 +1 @@
+.row[data-v-879abfeb]{width:100%;gap:8px}.smooth-rotate[data-v-0e12eb7b]{transition:transform .3s ease}label[data-v-4f7c1791]{width:50%}:root{--deep-blue: #001f3f;--energy-green: #00ff9d}.login-page{font-family:Poppins,sans-serif;background-color:#001f3f;color:#fff;min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.login-page .particles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden}.login-page .particles .particle{position:absolute;background:#00ff9d;border-radius:50%;opacity:.7;animation:float 5s infinite linear}.login-page .container{display:flex;width:90%;max-width:1200px;min-height:700px;background:#000f1fb3;border-radius:20px;overflow:hidden;position:relative;z-index:1;box-shadow:0 15px 35px #00000080;backdrop-filter:blur(10px)}.login-page .brand-section{flex:1;background:linear-gradient(135deg,#001f3f,#036);padding:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.login-page .brand-section .logo-container{position:relative;width:250px;height:250px;margin-bottom:40px;display:flex;align-items:center;justify-content:center}.login-page .brand-section .logo-container .logo-image{width:100%;height:100%;object-fit:contain;z-index:3;position:relative;filter:drop-shadow(0 0 10px rgba(0,255,157,.5))}.login-page .brand-section .logo-container .logo-pulse-1,.login-page .brand-section .logo-container .logo-pulse-2{position:absolute;border:2px solid #00ff9d;border-radius:50%;opacity:0}.login-page .brand-section .logo-container .logo-pulse-1{width:180px;height:180px;animation:pulse-logo 3s infinite}.login-page .brand-section .logo-container .logo-pulse-2{width:220px;height:220px;animation:pulse-logo 3s infinite .5s}.login-page .brand-section .tagline{font-size:1.5rem;font-weight:300;color:#00ff9d;text-transform:uppercase;letter-spacing:2px;margin-top:20px;z-index:2;text-align:center}.login-page .brand-section .energy-wave{position:absolute;bottom:0;left:0;width:100%;height:30%;background:linear-gradient(to top,rgba(0,255,157,.15),transparent);border-radius:50% 50% 0 0;animation:wave 8s infinite linear}.login-page .brand-section .energy-wave-2{position:absolute;bottom:0;left:0;width:100%;height:40%;background:linear-gradient(to top,rgba(0,255,157,.1),transparent);border-radius:50% 50% 0 0;animation:wave 10s infinite linear 2s}.login-page .brand-section .energy-pulse{position:absolute;width:300px;height:300px;background:radial-gradient(circle,rgba(0,255,157,.2) 0%,transparent 70%);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 4s infinite ease-in-out}.login-page .brand-section .energy-dots{position:absolute;width:100%;height:100%;top:0;left:0}.login-page .brand-section .energy-dots .energy-dot{position:absolute;background:#00ff9d;border-radius:50%;transform:translate(-50%,-50%);animation:float-dot 4s infinite ease-in-out}.login-page .login-section{flex:1;padding:50px;display:flex;flex-direction:column;justify-content:center;background:#ffffff0d}.login-page .login-section .login-header{text-align:center;margin-bottom:40px}.login-page .login-section .login-header h2{font-size:2.2rem;font-weight:600;margin-bottom:10px}.login-page .login-section .login-header p{color:#ffffffb3;font-weight:300}.login-page .login-section .login-button{transition:all .3s ease;margin-top:30px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border:2px solid rgba(255,255,255,.1)}.login-page .login-section .login-button:hover{transform:translateY(-3px);box-shadow:0 10px 20px #00ff9d80;border-color:#00ff9d}.login-page .login-section .login-button:active{transform:translateY(0)}@keyframes pulse-logo{0%{transform:scale(.8);opacity:.8}70%{opacity:0}to{transform:scale(1.3);opacity:0}}@keyframes float-dot{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.5)}}@keyframes wave{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}}@keyframes pulse{0%,to{opacity:.3;transform:translate(-50%,-50%) scale(.8)}50%{opacity:.1;transform:translate(-50%,-50%) scale(1.2)}}@keyframes float{0%{transform:translateY(100vh) translate(0)}to{transform:translateY(-100px) translate(calc(var(--random) * 100px - 50px))}}:deep(.q-field--outlined .q-field__control){background:#0003!important;border:1px solid rgba(255,255,255,.1)!important;color:#fff!important}:deep(.q-field--outlined .q-field__control:hover:before){border-color:#00ff9d!important}:deep(.q-field--outlined.q-field--highlighted .q-field__control){box-shadow:0 0 0 3px #00ff9d33!important;border-color:#00ff9d!important}:deep(.q-field__label){color:#ffffffb3!important}:deep(.q-field--highlighted .q-field__label){color:#00ff9d!important;transform:translateY(-30%) scale(.8)!important}