Merge pull request #1 from prolazydev/web

This update presents 2 new components and bug fixes

Author: prolazydev

.gitignore

@@ -36,3 +36,4 @@ dist-ssr
 *.sw?
 .DS_Store
 vue-m-ui/package-lock.json
+vue-m-ui/npmCommands.md

CHANGELOG.md

@@ -0,0 +1,68 @@
+<!-- TODO: Create comparison links on vue-m versions -->
+## 0.3.0 (06-06-2023)
+
+### Feature
+
+#### `<m-btn></m-btn>`
+
+- Added the ability to add custom colors on input with shades on `hover` and `click`
+- Added a set of custom sizes with the `size` string prop
+- Added a set of custom shapes with the `shape` string prop
+- Handle transparency with the `transparent` boolean prop
+- Ability to add `custom elements` inside the button or optionally through the `text` string prop
+- Added: `disabled` and `loading` with custom `loading-icon` with the `loading-circle` default icon
+
+#### Added the `<m-input></m-input>` component 🎉
+
+- Added the `id` prop at the input element or the `container-id` to select the whole element 
+- Optionally add the component on top of the input with the `label` string prop that contains the text, with the optional `label-id` string prop
+- Placeholder...
+- Added an icon with the `icon` string property *limited to a small set of open source icons*
+- `type` string prop **Currently supports `text` and `email` inputs**
+- Added a set of custom colors for the input element with the `color` string prop with the optional support for custom `hex` and `rgb/a` colors
+- Added a set of custom colors for the text inside of the input element with the `text-color` string prop with the optional support for custom `hex` and `rgb/a` colors
+- Added a set of custom sizes with the `size` string prop
+- Added a set of custom shapes with the `shape` string prop
+- Handle **bold text** with the `bold` boolean prop
+- Added: `disabled` and `loading` with custom `loading-icon` with the `loading-circle` default icon
+- Added automatic email validation of input of `type="email"`
+- Added persistent validation bar on email inputs **This will change to fit other types as well**
+- Autofocus... :>
+
+#### Added the `<m-switch></m-switch>` component 🎉
+
+- Added a set of custom colors for the `switch` element with the `color` string prop with the optional support for custom `hex` and `rgb/a` colors
+- Added a set of custom sizes with the `size` string prop
+- Added the custom width with the `custom-width` string prop that accepts normal css size units
+- Added: `disabled` and `loading` 
+
+#### Other
+
+- Added css minification with postcss cssnano plugin
+
+### Changed
+
+- Minor reorganizing of css with vars to better support color and style customization.
+
+### Fixed
+
+- Fixed some minor bugs on `<m-btn></m-btn>` that wasn't detecting the tab on custom colors
+
+## 0.2.0 (01-06-2023)
+
+### Feature
+
+- Added the `<m-input></m-input>` and `<m-switch></m-switch>` Components with minor styling functionality that are still in development. 
+
+### Changed
+
+- Minor reorganizing of the project structure for better scalability and maintainability.
+
+## 0.1.1 (26-05-2023)
+
+##### First of many! 🎉
+
+### Feature
+0.1.1 brings us the `<m-btn></m-btn>` button element.
+
+The docs for usage will be out in a jiffy (prolly next week - May 30ish or later...)

README.md

@@ -2,7 +2,7 @@
 
 `0.1.1 is out! 🎉🥳`
 
-![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/prolazydev/vue-m?color=blue&include_prereleases&style=for-the-badge) ![npm](https://img.shields.io/npm/dt/@prolazydev/vue-m?color=orange&label=downs&style=for-the-badge) [![license](https://img.shields.io/github/license/prolazydev/vue-m.svg?style=for-the-badge)](https://github.com/prolazydev/vue-m/blob/main/LICENSE) [![code with hearth by NHN Cloud](https://img.shields.io/badge/%3C%2F%3E%20with%20%20cooless%20%F0%9F%98%8E%20by-prolazydev-00bf76.svg?style=for-the-badge)](https://github.com/nhn)
+![npm](https://img.shields.io/npm/v/@prolazydev/vue-m?color=blue&label=release&style=for-the-badge) ![npm](https://img.shields.io/npm/dt/@prolazydev/vue-m?color=orange&label=downs&style=for-the-badge) [![license](https://img.shields.io/github/license/prolazydev/vue-m.svg?style=for-the-badge)](https://github.com/prolazydev/vue-m/blob/main/LICENSE) [![npm](https://img.shields.io/badge/-changelog-orange?style=for-the-badge)](https://github.com/prolazydev/vue-m/blob/main/CHANGELOG.md) [![code with hearth by NHN Cloud](https://img.shields.io/badge/%3C%2F%3E%20with%20%20cooless%20%F0%9F%98%8E%20by-prolazydev-00bf76.svg?style=for-the-badge)](https://github.com/nhn) 
 
 ## Introduction
 

vue-m-ui/README.md

@@ -0,0 +1,95 @@
+# vue-m ⚒ WORK IN PROGRESS
+
+[![npm](https://img.shields.io/npm/v/@prolazydev/vue-m?color=blue&label=release&style=for-the-badge)](https://github.com/prolazydev/vue-m) ![npm](https://img.shields.io/npm/dt/@prolazydev/vue-m?color=orange&label=downs&style=for-the-badge) [![license](https://img.shields.io/github/license/prolazydev/vue-m.svg?style=for-the-badge)](https://github.com/prolazydev/vue-m/blob/main/LICENSE) [![code with hearth by NHN Cloud](https://img.shields.io/badge/%3C%2F%3E%20with%20%20cooless%20%F0%9F%98%8E%20by-prolazydev-00bf76.svg?style=for-the-badge)](https://github.com/prolazydev)
+
+## Introduction
+
+`vue-m` is a Vue 3 UI component library designed to enhance the user interface of your Vue applications. It provides a collection of modern and responsive UI components that are easy to install and use.
+
+## Features
+
+- Modern and responsive UI components
+- Easy installation and usage
+- Built with Vue 3 and TypeScript
+- Highly customizable and flexible
+
+## Installation
+
+You can install the `vue-m` package using npm or Yarn:
+
+```bash
+npm install vue-m
+```
+
+or
+
+```bash
+yarn add vue-m
+```
+
+## Usage
+
+To use the components from vue-m, register them in `main.ts`:
+
+```ts
+import { createApp } from 'vue';
+import vueM from 'vue-m'; // Import the components
+import 'vue-m/dist/vue-m.css'; // Import the styling (Optional)
+import App from './App.vue';
+
+createApp(App)
+   .use(vueM)
+   .mount('#app');
+```
+
+Then use the components like this:
+
+```vue
+<template>
+  <div>
+      <m-btn text="Write here" color='success' /> <!-- color is 'primary by default' -->
+      <!-- or -->
+      <m-btn>
+         <div>
+            Custom element inside the button 
+         </div>
+      </m-btn>
+  </div>
+</template>
+```
+
+## TODO
+
+- Create the todos :> `Doing`
+
+<!--- Alert
+- Avatar
+- Breadcrumb
+- Button
+- Card
+- Checkbox
+- Chip
+- Collapse
+- Dialogs
+- Divider
+- Dropdown
+- Images
+- Input
+- List
+- Loading
+- Navbar
+- Notification
+- Number Input
+- Pagination
+- Popup
+- Progress
+- Radio
+- Select
+- Sidebar
+- Slider
+- Switch
+- Table
+- Tabs
+- Textarea
+- Tooltip
+- Upload -->