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

package/dist/index.js

@@ -508,6 +508,8 @@ __webpack_require__.r(__webpack_exports__);
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
   "default": () => (/* binding */ src),
+  defaults: () => (/* reexport */ defaults),
+  getAliases: () => (/* reexport */ vuetify),
   getZIndex: () => (/* reexport */ getZIndex),
   isDefined: () => (/* reexport */ isDefined)
 });
@@ -942,11 +944,52 @@ function ld_loader_reg(vue) {
 }
 /* harmony default export */ const src_ld_loader = (ld_loader_reg);
 
+;// CONCATENATED MODULE: ./src/vuetify.ts
+const aliases = {
+    SmallButton: 'VBtn',
+    SquareButton: 'VBtn',
+    SmallChip: 'VChip',
+    SmallBadge: 'VChip',
+};
+const defaults = {
+    SmallButton: {
+        variant: 'flat',
+        color: 'primary',
+        class: 'small-button',
+    },
+    SquareButton: {
+        variant: 'text',
+        color: 'grey',
+        class: 'square-sm-button',
+    },
+    SmallChip: {
+        variant: 'outlined',
+        color: 'primary',
+        closable: true,
+        closeIcon: 'close',
+        class: 'small-chip',
+    },
+    SmallBadge: {
+        class: 'v-chip--badge',
+        variant: 'outlined',
+    },
+};
+function getVuetifyAliases(components) {
+    const result = {};
+    for (const key in aliases) {
+        result[key] = components[aliases[key]];
+    }
+    return result;
+}
+/* harmony default export */ const vuetify = (getVuetifyAliases);
+
+
 ;// CONCATENATED MODULE: ./src/index.ts
 
 
 
 
+
 const ldmuiPlugin = {
     install(vue, options) {
         src_ld_icon(vue, options?.LdIcon);

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/_variables.scss

@@ -1,5 +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

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

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@ldmjs/ui",
-  "version": "1.0.0-dev-3",
+  "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,15 +20,18 @@
     "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",
+  "files": [
+    "dist/"
+  ],
   "devDependencies": {
+    "@types/eslint": "^8",
     "@typescript-eslint/eslint-plugin": "5.41.0",
     "@typescript-eslint/parser": "5.41.0",
-    "@types/eslint": "^8",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "6.8.1",
     "eslint": "8.56.0",
@@ -41,8 +48,13 @@
     "vue-class-component": "8.0.0-rc.1",
     "vue-loader": "17.3.1",
     "vue-property-decorator": "10.0.0-rc.3",
+    "vuetify": "3.5.9",
     "webpack": "5.90.2",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.1"
+    "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