@ldmjs/ui 1.0.0-dev-2 → 1.0.0-dev-4

package/dist/scss/_buttons.scss

@@ -0,0 +1,301 @@
+body {
+  .v-btn {
+    text-transform: none !important;
+    font-size: var(--font-size) !important;
+    font-weight: 400 !important;
+    letter-spacing: 0 !important;
+
+    .v-btn__overlay {
+      display: none;
+    }
+    .v-btn__underlay {
+      display: none;
+    }
+
+    &.v-btn--density-compact {
+      height: var(--input-height);
+
+      &:not(.v-btn--variant-outlined):not(.v-btn--variant-elevated) {
+        .v-btn__overlay {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &.mobile-device {
+    .v-btn:hover,
+    .v-btn.small-button:hover,
+    .v-btn.square-sm-button:hover {
+      background: none !important;
+      background-color: transparent !important;
+    }
+  }
+
+  .small-button {
+    font-size: var(--font-size) !important;
+    padding: 0 12px;
+
+    &.v-btn--variant-text {
+      padding: 0 12px !important;
+    }
+
+    &.v-btn--block {
+      height: auto;
+      min-height: var(--input-height);
+      padding: 4px 6px;
+    }
+
+    &:not(.v-btn--block) {
+      height: var(--input-height) !important;
+    }
+
+    &.bg-primary {
+      background-color: var(--primary-l-2) !important;
+
+      &:hover {
+        background-color: var(--primary-l-1) !important;
+      }
+
+      &:active {
+        background-color: var(--primary) !important;
+      }
+
+      &[disabled] {
+        background-color: var(--grey-l-5) !important;
+        color: var(--grey) !important;
+      }
+    }
+
+    &.bg-success {
+      background-color: var(--success) !important;
+      color: var(--white) !important;
+
+      &:hover {
+        background-color: var(--success-d-1) !important;
+      }
+
+      &:active {
+        background-color: var(--success-d-2) !important;
+      }
+
+      &[disabled] {
+        background-color: var(--grey-l-5) !important;
+        color: var(--grey) !important;
+      }
+    }
+
+    &.text-primary {
+      color: var(--primary) !important;
+      &:hover {
+        background-color: var(--primary-l-8) !important;
+      }
+
+      &:active {
+        background-color: var(--primary-l-7) !important;
+      }
+
+      &.--active {
+        background-color: var(--primary-l-8) !important;
+        border-color: var(--primary-l-2) !important;
+        color: var(--primary-l-2) !important;
+      }
+    }
+
+    &.text-grey {
+      &.v-btn--variant-outlined {
+        border-color: var(--grey-l-5) !important;
+        span {
+          color: var(--text) !important;
+        }
+        .v-icon {
+          color: var(--grey);
+        }
+        svg {
+          color: var(--grey);
+        }
+      }
+      &.v-btn--variant-text {
+        border: 1px solid transparent;
+      }
+      &:hover {
+        background-color: var(--grey-l-5) !important;
+      }
+
+      &:active {
+        background-color: var(--grey-l-5) !important;
+      }
+    }
+
+    &.text-success {
+      &.v-btn--variant-outlined {
+        color: var(--success-d-1) !important;
+        .v-icon {
+          color: var(--success-d-1) !important;
+        }
+      }
+      &:hover {
+        background-color: var(--success-l-6) !important;
+      }
+
+      &:active {
+        background-color: var(--success-l-5) !important;
+      }
+    }
+
+    &.text-error {
+      &.v-btn--variant-outlined {
+        color: var(--error);
+        .v-icon {
+          color: var(--error);
+        }
+      }
+      &:hover {
+        background-color: var(--error-l-6) !important;
+      }
+
+      &:active {
+        background-color: var(--error-l-5) !important;
+      }
+    }
+
+    .v-icon, svg {
+      margin-right: 4px;
+    }
+
+    svg.primary--text {
+      color: var(--primary) !important;
+    }
+
+    &:after {
+      content: unset;
+    }
+  }
+
+  .square-sm-button {
+    padding: 0 !important;
+    height: var(--input-height) !important;
+    width: var(--input-height) !important;
+    min-width: var(--input-height) !important;
+    min-height: var(--input-height) !important;
+    max-width: var(--input-height) !important;
+    max-height: var(--input-height) !important;
+    border-radius: var(--border-radius);
+
+    &.v-btn--icon {
+      border: none;
+      border-radius: var(--border-radius);
+    }
+
+    .v-icon:not(.custom-icon) {
+      transform: translate(1px, 1px);
+    }
+
+    &.bg-primary {
+      color: var(--white) !important;
+      background-color: var(--primary-l-2) !important;
+    }
+
+    &.text-primary {
+      color: var(--primary) !important;
+      &.v-btn--variant-text {
+        .v-icon:not(.text-primary):not(.text-grey):not(.text-success):not(.text-error):not(.text-warning) {
+          color: var(--primary) !important;
+        }
+        svg {
+          color: var(--primary) !important;
+        }
+      }
+      &:not(.v-btn--icon) {
+        &:hover {
+          background-color: var(--primary-l-8) !important;
+        }
+        &:active {
+          background-color: var(--primary-l-7) !important;
+        }
+      }
+
+      &.--active {
+        border-color: var(--primary-l-2);
+        background-color: var(--primary-l-8) !important;
+        svg {
+          color: var(--primary-l-2) !important;
+        }
+      }
+    }
+
+    &.text-grey {
+      &.v-btn--variant-outlined {
+        color: var(--grey-l-5) !important;
+        .v-icon {
+          color: var(--grey);
+        }
+        svg {
+          color: var(--grey);
+        }
+      }
+      &.v-btn--disabled {
+        opacity: 1;
+        background-color: var(--grey-l-6);
+
+        svg {
+          color: var(--grey-l-4);
+        }
+        &.v-btn--icon {
+          background: none;
+          opacity: 0.8;
+        }
+      }
+      &:not(.v-btn--icon) {
+        &:hover {
+          background-color: var(--grey-l-5) !important;
+        }
+
+        &:active {
+          background-color: var(--grey-l-4) !important;
+        }
+      }
+      &.--active {
+        border-color: var(--primary-l-2);
+        background-color: var(--primary-l-8) !important;
+        svg {
+          color: var(--primary-l-2) !important;
+        }
+      }
+    }
+
+    &.text-success {
+      &.v-btn--variant-outlined {
+        color: var(--success-d-1) !important;
+        .v-icon {
+          color: var(--success-d-1) !important;
+        }
+        color: var(--success-d-1) !important;
+        svg {
+          color: var(--success-d-1) !important;
+        }
+      }
+    }
+
+    &.text-error {
+      &.v-btn--variant-outlined {
+        color: var(--error) !important;
+        .v-icon {
+          color: var(--error) !important;
+        }
+        svg {
+          color: var(--error) !important;
+        }
+      }
+      &:not(.v-btn--icon) {
+        &:hover {
+          background-color: var(--error-l-6) !important;
+        }
+
+        &:active {
+          background-color: var(--error-l-5) !important;
+        }
+      }
+    }
+  }
+}

package/dist/scss/_colors.scss

@@ -0,0 +1,73 @@
+$colors: ('primary', 'secondary', 'success', 'warning', 'error', 'grey', 'dark', 'white');
+
+body,
+.v-application {
+  @each $color in $colors {
+    & .#{$color} {
+      background-color: var(--#{$color}) !important;
+      border-color: var(--#{$color}) !important;
+    }
+    & .#{$color}--text, & .text-#{$color} {
+      @if $color == 'primary' {
+        color: var(--#{$color}-l-2) !important;
+      } @else {
+        color: var(--#{$color}) !important;
+      }
+    }
+    & .#{$color}--bg, & .bg-#{$color} {
+      @if $color == 'primary' {
+        background-color: var(--#{$color}-l-8) !important;
+      } @else if $color == 'grey' {
+        background-color: var(--#{$color}-l-6) !important;
+      } @else if $color == 'secondary' {
+        background-color: var(--#{$color}-l-5) !important;
+      } @else {
+        background-color: var(--#{$color}) !important;
+      }
+    }
+    & .#{$color}--border, & .border-#{$color} {
+      @if $color == 'primary' {
+        border-color: var(--#{$color}-l-2) !important;
+      } @else if $color == 'grey' {
+        border-color: var(--#{$color}-l-5) !important;
+      } @else {
+        border-color: var(--#{$color}) !important;
+      }
+    }
+    & .#{$color}--hover {
+      transition: background 0.1s;
+      @if $color == 'grey' {
+        &:hover {
+          background-color: var(--#{$color}-l-6) !important;
+        }
+      } @else if $color == 'secondary' {
+          &:hover {
+            background-color: var(--#{$color}-l-5) !important;
+          }
+      } @else {
+        &:hover {
+          background-color: var(--#{$color}) !important;
+        }
+      }
+    }
+  }
+
+  & .text-color {
+    color: var(--text);
+  }
+
+  & .label-color {
+    color: var(--label);
+  }
+}
+
+.main-gradient-h {
+  background: var(--primary);
+  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-d-1) 100%);
+}
+
+.main-gradient-v {
+  background: var(--primary);
+  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-d-1) 100%);
+}
+

package/dist/scss/_variables.scss

@@ -0,0 +1,9 @@
+$font-size: 12px !default; // основной шрифт приложения
+$input-height: 28px !default; // высота атомарного элемента ui (button, input)
+$border-radius: 4px !default; // радиус скругления атомарного элемента ui
+
+:root {
+  --font-size: #{$font-size};
+  --input-height: #{$input-height};
+  --border-radius: #{$border-radius};
+}

package/dist/scss/index.scss

@@ -0,0 +1,3 @@
+@import 'colors';
+@import 'variables';
+@import 'buttons';

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+import { isDefined } from './index'
+export {
+  isDefined
+}

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@ldmjs/ui",
-  "version": "1.0.0-dev-2",
+  "version": "1.0.0-dev-4",
   "description": "ldm ui",
   "main": "dist/index.js",
+  "engines": {
+    "node": ">=16",
+    "npm": ">=8"
+  },
   "scripts": {
     "dev": "webpack serve --config config/webpack.config.dev.js --progress --profile",
     "build": "webpack --config config/webpack.config.build.js --stats-error-details"
@@ -16,29 +20,41 @@
     "ui"
   ],
   "author": "ldmjs <nevezhin@lanit.ru>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/ldmjs/ui/issues"
   },
   "homepage": "https://github.com/ldmjs/ui#readme",
-  "dependencies": {
-    "@typescript-eslint/eslint-plugin": "5.41.0",
-    "@typescript-eslint/parser": "5.41.0",
-    "terser-webpack-plugin": "5.3.10",
-    "typescript": "4.9.5",
-    "vue": "3.4.21",
-    "vue-loader": "17.3.1",
-    "webpack": "5.90.2",
-    "webpack-cli": "5.1.4"
-  },
+  "files": [
+    "dist/"
+  ],
   "devDependencies": {
     "@types/eslint": "^8",
+    "@typescript-eslint/eslint-plugin": "5.41.0",
+    "@typescript-eslint/parser": "5.41.0",
     "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "6.8.1",
     "eslint": "8.56.0",
     "html-webpack-plugin": "5.6.0",
+    "node-sass": "9.0.0",
+    "postcss-loader": "7.3.3",
+    "sass": "1.69.5",
+    "sass-loader": "13.3.2",
+    "style-loader": "3.3.3",
+    "terser-webpack-plugin": "5.3.10",
     "ts-loader": "9.5.1",
+    "typescript": "4.9.5",
+    "vue": "3.4.21",
     "vue-class-component": "8.0.0-rc.1",
+    "vue-loader": "17.3.1",
     "vue-property-decorator": "10.0.0-rc.3",
-    "webpack-dev-server": "4.15.1"
+    "vuetify": "3.5.9",
+    "webpack": "5.90.2",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1",
+    "webpack-plugin-vuetify": "2.0.1"
+  },
+  "volta": {
+    "node": "16.20.0"
   }
 }

package/.eslintignore

@@ -1,15 +0,0 @@
-src/lib
-src/lib/*
-coverage
-**/*.js
-**/*.html
-**/*.json
-**/*.scss
-**/*.css
-**/*.md
-**/*.mdx
-**/*.conf
-**/*.png
-**/*.jpg
-**/*.svg
-**/*.pdf