@tagplus/components 5.3.2 → 5.3.4

package/package.json

@@ -1,104 +1,91 @@
 {
   "name": "@tagplus/components",
-  "description": "Componentes customizados TagPlus",
+  "description": "Componentes customizados TagPlus Baseados no ElementUI",
   "target": "web",
   "maintainers": [
     {
-      "name": "Tagplus",
-      "email": "qualidade@tagplus.com.br"
+      "name": "Bruno Barbosa",
+      "email": "bruno@tagplus.com.br"
     }
   ],
-  "version": "5.3.2",
-  "type": "module",
-  "main": "./dist/lib/src/main.js",
-  "module": "./dist/es/src/main.mjs",
-  "exports": {
-    "require": "./dist/lib/src/main.js",
-    "import": "./dist/es/src/main.mjs"
+  "version": "5.3.4",
+  "main": "./dist/tp.common.js",
+  "directories": {
+    "lib": "src/lib"
   },
   "files": [
+    "lib",
     "dist",
-    "dist/langs"
+    "src"
   ],
   "engines": {
-    "node": ">=22.0"
+    "node": ">=14.0"
   },
   "lint-staged": {
-    "*.{js,vue}": "eslint",
-    "*.{css,vue}": "stylelint"
+    "*.{js,vue,css}": "npm run lint"
+  },
+  "jest": {
+    "testEnvironment": "node"
   },
   "license": "MIT",
   "scripts": {
-    "build:prod": "npm i && npm run build",
+    "build": "NODE_ENV=production && vue-cli-service build --target lib --name tp ./src/main.js",
+    "build:dev": "NODE_ENV=development && vue-cli-service build --mode development --target lib --name tp ./src/main.js",
     "doc": "npm run docs",
     "docs": "nodemon --exec \"vuese gen && vuese serve\" --watch ./src -e js,vue,scss",
     "docs:gen": "vuese gen",
+    "lint": "eslint --cache --ext .js,.vue --ignore-path .gitignore .",
+    "pub:major": "npm run build && npm version major && npm publish --access public",
+    "pub:minor": "npm run build && npm version minor && npm publish --access public",
+    "pub": "npm run build && npm version patch && npm publish --access public",
+    "pub:beta": "npm run build && npm version patch && npm publish --tag beta",
+    "serve": "vue-cli-service serve --open ./examples/main.js",
+    "start": "npm run serve",
     "install:clean": "rm -rf package-lock.json yarn.lock & rm -rf node_modules & npm install",
     "install:clear": "npm run install:clean",
-    "lint": "stylelint **/*.scss & eslint --cache --ext .js,.vue --ignore-path .gitignore .",
-    "lintfix": "stylelint **/*.scss --fix & eslint --cache --ext .js,.vue --ignore-path .gitignore . --fix",
-    "postversion": "git push && git push --tags",
-    "prepare": "node .husky/install.mjs",
-    "pub:beta": "build:prod && npm version patch && npm publish --tag beta && npm run postversion",
-    "pub:major": "build:prod && npm version major && npm publish --access public && npm run postversion",
-    "pub:minor": "build:prod && npm version minor && npm publish --access public && npm run postversion",
-    "pub:patch": "build:prod && npm version patch && npm publish --access public && npm run postversion",
-    "pub:version": "echo 'Execute o comando a seguir alterando a versão: \nnpm run build:prod && npm version {VERSION} && npm publish --tag beta && npm run postversion'",
-    "dev": "vite",
-    "build": "vite build",
-    "superclean": "rm -rf node_modules dist package-lock.json"
+    "test": "jest",
+    "test:coverage": "jest --collectCoverage",
+    "test:unit": "vue-cli-service test:unit",
+    "prepare": "husky install"
   },
   "dependencies": {
-    "@vue/cli": "^5.0.8",
-    "element-theme-chalk": "^2.15.14",
-    "vue": "^3.5.13"
+    "@vue/babel-preset-app": "^5.0.8",
+    "axios": "^0.27.2",
+    "core-js": "^3.25.0",
+    "element-theme-chalk": "^2.13",
+    "element-ui": "2.15.8",
+    "js-cookie": "^3.0.1",
+    "vue": "^2.7.10",
+    "vue-axios": "^2.1.5",
+    "vue-i18n": "^8.15.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/eslint-parser": "^7.24.1",
-    "@stylistic/eslint-plugin": "^1.6.1",
-    "@stylistic/eslint-plugin-migrate": "^1.7.2",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/babel-preset-app": "^5.0.8",
+    "@babel/core": "^7.18.13",
+    "@babel/eslint-parser": "^7.18.9",
     "@vue/cli-plugin-babel": "^5.0.8",
-    "@vuese/cli": "^2.14.3",
-    "axios": "^1.6.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/test-utils": "^1.0.0-beta.31",
+    "@vuese/cli": "^2.10.0",
+    "babel-jest": "^24.9.0",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "circular-dependency-plugin": "^5.2.2",
-    "css-loader": "^7.1.2",
-    "eslint": "^8.56.0",
-    "eslint-config-alloy": "^5.1.2",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-vue": "^9.31.0",
-    "husky": "^9.1.7",
-    "js-cookie": "^3.0.5",
-    "lint-staged": "^15.2.2",
-    "lodash-unified": "^1.0.3",
-    "node-sass": "^9.0.0",
-    "nodemon": "^2.0.22",
-    "sass-embedded": "^1.85.0",
-    "sass-loader": "^14.2.1",
-    "style-loader": "^4.0.0",
-    "stylelint": "^16.3.1",
-    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "vite": "^6.1.0",
-    "vite-plugin-static-copy": "^2.2.0",
-    "vue-axios": "^3.5.2",
-    "vue-eslint-parser": "^9.4.2",
-    "vue-i18n": "^9.9.1",
-    "vue-loader": "^17.4.2"
-  },
-  "optionalDependencies": {
-    "sass-embedded": "^1.83.4"
-  },
-  "peerDependencies": {
-    "element-plus": "^2.9.3",
-    "element-theme-chalk": "^2.15.14",
-    "vue-i18n": "^9.9.1"
-  },
-  "overrides": {
-    "vue": "^3.5.13"
+    "eslint": "^8.23.0",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.2.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.0.1",
+    "eslint-plugin-vue": "^9.4.0",
+    "husky": "^8.0.1",
+    "jest": "^27.1.0",
+    "lint-staged": "^13.2.2",
+    "nodemon": "^2.0.19",
+    "prettier": "^2.7.1",
+    "sass": "^1.63.4",
+    "sass-loader": "^13.0.2",
+    "vue-template-compiler": "^2.7.10",
+    "webpack": "^5.74.0"
   }
 }

package/src/assets/scss/_fonts.scss

@@ -0,0 +1,27 @@
+@font-face {
+    font-family: 'bevi';
+    src: url('/fonts/bevi-regular.woff2') format('woff2'),
+      url('/fonts/bevi-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'bevi';
+    src: url('/fonts/bevi-medium.woff2') format('woff2'),
+      url('/fonts/bevi-medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'bevi';
+    src: url('/fonts/bevi-bold.woff2') format('woff2'),
+      url('/fonts/bevi-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+  }
+  * {
+    font-family: "bevi", sans-serif;
+  }
+  

package/src/assets/scss/_functions.scss

@@ -0,0 +1,22 @@
+@function randomNum($min, $max) {
+  $rand: random();
+  $randomNum: $min + floor($rand * (($max - $min) + 1));
+
+  @return $randomNum;
+}
+
+@function number($string) {
+  // Matrices
+  $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
+  $numbers: 0 1 2 3 4 5 6 7 8 9;
+
+  // Result
+  $result: 0;
+
+  // Looping through all characters
+  @for $i from 1 through str-length($string) {
+    // Do magic
+  }
+
+  @return $result;
+}

package/src/assets/scss/_helpers.scss

@@ -0,0 +1,112 @@
+.text {
+  &--center {
+    text-align: center;
+  }
+
+  &-color {
+    &--default {
+      color: $--color-text-primary;
+    }
+    &--regular {
+      color: $--color-text-regular;
+    }
+    &--primary {
+      color: $--color-primary;
+    }
+    &--danger {
+      color: $--color-danger;
+    }
+    &--success {
+      color: $--color-success;
+    }
+  }
+}
+
+.hover {
+  &-text {
+    &--primary:not([disabled]) {
+      &:hover,&:focus {
+        color: $--color-primary !important;
+      }
+    }
+
+    &--danger:not([disabled]){
+      &:hover,&:focus {
+        color: $--color-danger !important;
+      }
+    }
+  }
+}
+
+// Helpers gerados de forma dinâmica, de acordo
+// com a medida dos measures.
+@each $name, $size in $sizes {
+  .m-t-#{$name} {
+    margin-top: $size;
+  }
+
+  .m-b-#{$name} {
+    margin-bottom: $size;
+  }
+
+  .m-r-#{$name} {
+    margin-right: $size;
+  }
+
+  .m-l-#{$name} {
+    margin-left: $size;
+  }
+
+  .p-t-#{$name} {
+    padding-top: $size;
+  }
+
+  .p-b-#{$name} {
+    padding-bottom: $size;
+  }
+
+  .p-r-#{$name} {
+    padding-right: $size;
+  }
+
+  .p-l-#{$name} {
+    padding-left: $size;
+  }
+}
+
+// Helpers para flexbox, para facilitar, podemos pegar os helpers
+// do bootstrap!
+.d-flex {
+  &:not(.mobile-flex) {
+    display: initial;
+
+    @include r(1024) {
+      display: flex;
+    }
+  }
+
+  display: flex;
+}
+
+.d-block {
+  display: block;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.text-helper-info {
+  font-size: 13px;
+  color: #565b66;
+}
+
+.no-font-weight {
+  font-weight: initial !important;
+}
+
+.no-padding-mobile {
+  @include r(767) {
+    padding: 0;
+  }
+}

package/src/assets/scss/_mixins.scss

@@ -0,0 +1,69 @@
+@mixin change-placeholder-color($color: #010101, $opacity: 1) {
+  ::placeholder {
+    /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: rgba($color, $opacity);
+    opacity: 1; /* Firefox */
+  }
+
+  :-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba($color, $opacity);
+  }
+
+  ::-ms-input-placeholder {
+    /* Microsoft Edge */
+    color: rgba($color, $opacity);
+  }
+}
+
+@mixin add-icon-to-menu-title($image: "", $width: "", $height: "") {
+  &::before {
+    content: "";
+    background: url($image);
+    width: $width;
+    height: $height;
+    display: block;
+    position: absolute;
+  }
+}
+
+@mixin default-sidebar-icon() {
+  width: 40px;
+  height: 40px;
+  background: #fff;
+  border-radius: $border-radius;
+  justify-content: center;
+  border: 1px solid #fff;
+
+  &:hover {
+    border-color: #409eff;
+  }
+}
+
+@mixin option-list-item-hover($color) {
+  &:hover {
+    border-color: $color;
+
+    .icon {
+      color: $color;
+    }
+  }
+}
+
+@mixin option-list-item-checked($color) {
+  &.active {
+    border-color: $color;
+    background: rgba($color, 0.1);
+
+    .icon {
+      color: $color;
+    }
+  }
+}
+
+@mixin center-block {
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}

package/src/assets/scss/_overrides.scss

@@ -0,0 +1,69 @@
+input,
+.el-select-dropdown__empty,
+.el-select-dropdown__list,
+.el-autosuggest-suggestion {
+  font-family: "bevi", sans-serif;
+}
+
+
+/**
+* INPUT PREPEND
+* Sobrescrita de itens quando em grupo / com prepend
+*/ 
+.el-input.el-input-group.el-input-group--prepend {
+  border: 1px solid $--border-color-light;
+  border-radius: $--border-radius-base;
+  transition: border-color 150ms ease-in-out;
+
+  &:hover,
+  &:focus-within {
+    border-color: $--color-primary;
+  }
+}
+
+.el-input-group__append {
+  background-color: transparent;
+}
+.el-input-group__prepend {
+  background: transparent;
+  position: relative;
+  padding: 0 15px;
+  border: 0;
+  cursor: default;
+
+  & + input {
+    border: 0;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    height: 70%;
+    width: 1px;
+    background: $--border-color-light;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.el-form-item {
+  &.is-error {
+    .el-input-group--prepend {
+      border-color: $--color-danger;
+    }
+  }
+}
+
+.el-select .el-input{
+  height: 48px;
+}
+
+.el-input {
+  height: 48px;
+}
+
+input.el-input__inner {
+  height: 100%;
+  margin-right: 50px;
+}

package/src/assets/scss/_resass.scss

@@ -0,0 +1,83 @@
+/**
+ * ReSass.
+ *
+ * MIXIN: Responsive Media Queries.
+ *
+ * Creates responsive media queries for seven different screen sizes.
+ * These are based on min-width which means if x is the size then your
+ * CSS will affect any device with screen width x and above.
+ *
+ * USAGE:
+ *	@include r(240)  { }
+ *	@include r(320)  { }
+ *	@include r(480)  { }
+ *	@include r(768)  { }
+ *	@include r(1024) { }
+ *	@include r(1140) { }
+ *	@include r(1280) { }
+ *  @include r(1500) { }
+ *
+ * CSS content goes inside {} brackets. These mixins should be used inside
+ * a class definition. For example:
+ *
+ * The following CSS will hide the .header on screen width 320px and above.
+ * .header {
+ * 	  @include r(320)  { display: none; }
+ * }
+ *
+ * @author  Ahmad Awais (https://github.com/ahmadawais)
+ * @link    https://github.com/ahmadawais/ReSass.git
+ * @version 1.0.0
+ */
+@mixin r( $point ) {
+  @if $point==240 {
+    @media ( min-width: 240px ) {
+      @content;
+    }
+  }
+  @if $point==320 {
+    @media ( min-width: 320px ) {
+      @content;
+    }
+  }
+  @if $point==480 {
+    @media ( min-width: 480px ) {
+      @content;
+    }
+  }
+  @if $point==600 {
+    @media ( min-width: 600px ) {
+      @content;
+    }
+  }
+  @if $point==767 {
+    @media (max-width: 767px) {
+      @content;
+    }
+  }
+  @if $point==768 {
+    @media ( min-width: 768px ) {
+      @content;
+    }
+  }
+  @if $point==1024 {
+    @media ( min-width: 1024px ) {
+      @content;
+    }
+  }
+  @if $point==1140 {
+    @media ( min-width: 1140px ) {
+      @content;
+    }
+  }
+  @if $point==1280 {
+    @media ( min-width: 1280px ) {
+      @content;
+    }
+  }
+  @if $point==1500 {
+    @media ( min-width: 1500px ) {
+      @content;
+    }
+  }
+}

package/src/assets/scss/_variables.scss

@@ -0,0 +1,27 @@
+// Sistema de medidas
+$default: 1rem;
+
+$sizes: (
+  none: 0,
+  xxs: calc(0.25 * #{$default}),
+  xs: calc(0.5 * #{$default}),
+  sm: calc(0.75 * #{$default}),
+  md: calc(1.25 * #{$default}),
+  lg: calc(2 * #{$default}),
+  xl: calc(3.25 * #{$default}),
+  xxl: calc(5.25 * #{$default})
+);
+
+// Borders
+$border-radius: 3px;
+
+// Sizes
+$default-max-width: 1440px;
+$default-side-padding: 20px;
+
+// Default font weights
+$light: 300;
+$normal: 400;
+$medium: 500;
+$semi-bold: 600;
+$bold: 700;

package/src/assets/scss/index.scss

@@ -0,0 +1,11 @@
+@import "~element-theme-chalk/src/common/var.scss";
+
+@import "variables";
+@import "mixins";
+@import "resass";
+
+@import "helpers";
+@import "functions";
+@import "fonts";
+
+@import "overrides";