@ldmjs/ui 1.0.0 → 1.0.1

package/dist/scss/_inputs.scss

@@ -0,0 +1,171 @@
+.small-input {
+  .v-text-field__prefix {
+    min-height: var(--input-height);
+    padding: 0 0 0 8px;
+
+    .v-text-field__prefix__text {
+      margin: 0;
+    }
+
+    & + input.v-field__input {
+      padding-left: 0px !important;
+    }
+  }
+
+  &.v-field {
+    background-color: var(--white);
+  }
+
+  & .v-field__input {
+    min-height: var(--input-height);
+  }
+
+  &.password {
+    .v-field__input {
+      font-size: var(--title-font-size) !important;
+    }
+  }
+
+  &:not(.v-combobox):not(.v-select) {
+    .v-field__input {
+      height: var(--input-height);
+    }
+  }
+
+  .v-field-label:not(.v-field-label--floating) {
+    transform: unset !important;
+  }
+}
+
+body {
+  .v-field {
+    font-size: var(--font-size) !important;
+    background-color: var(--white);
+  }
+  .v-label.v-field-label {
+    color: var(--grey);
+    top: unset !important;
+    &:not(.v-field-label--floating) {
+      height: 100%;
+      font-size: inherit !important;
+    }
+  }
+  .v-field.v-field--disabled {
+    opacity: 1;
+  }
+  .v-field-label--floating {
+    color: var(--grey);
+    font-size: var(--body-0-font-size) !important;
+  }
+  .v-field--variant-outlined {
+    .v-field__outline__start,
+    .v-field__outline__end {
+      border-color: var(--grey-l-5);
+      opacity: 1;
+    }
+  }
+  .v-label.v-label--clickable {
+    font-size: var(--font-size);
+    color: var(--text);
+    opacity: 1;
+    letter-spacing: 0;
+  }
+  .v-input {
+    &.v-textarea {
+      .v-field {
+        padding-right: 0px;
+      }
+      .v-field__input {
+        padding: 7px 6px;
+      }
+    }
+    &:not(.v-textarea) {
+      .v-field__input {
+        min-height: var(--input-height) !important;
+        padding: 4px 6px;
+      }
+      &.v-text-field--plain-underlined {
+        .v-field__input {
+          padding: 0;
+        }
+      }
+    }
+    &:not(.v-textarea):not(.v-select):not(.v-combobox) {
+      max-height: var(--input-max-height);
+    }
+    &:not(.v-select) .v-field__input {
+      input {
+        height: 100%;
+      }
+    }
+    &.v-text-field input {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    &.v-input--disabled {
+      .v-field {
+        background-color: var(--grey-l-6);
+        color: var(--grey-l-3);
+      }
+    }
+  }
+  .v-field__input {
+    display: flex;
+    align-items: center;
+    font-size: inherit !important;
+    opacity: 1;
+  }
+  .v-input__details {
+    padding: 0 !important;
+    margin: 0 !important;
+    z-index: 1;
+    height: 20px;
+    .v-messages {
+      font-size: calc(var(--font-size) - 1px) !important;
+    }
+  }
+  .v-field--variant-outlined.v-field--focused .v-field__outline {
+    .v-field__outline__start {
+      border-top-width: 1px !important;
+      border-bottom-width: 1px !important;
+      border-inline-start-width: 1px !important;
+      border-color: var(--grey-l-4) !important;
+    }
+    .v-field__outline__end {
+      border-top-width: 1px !important;
+      border-bottom-width: 1px !important;
+      border-inline-end-width: 1px !important;
+      border-color: var(--grey-l-4) !important;
+    }
+  }
+  .v-select {
+    .v-select__selection {
+      margin: 0;
+      .v-select__selection-text {
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+  }
+}
+
+input.disabled {
+  background-color: var(--grey-l-6);
+  color: var(--grey-l-3);
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+::-webkit-input-placeholder {color: var(--grey-l-2)}
+::-moz-placeholder {color: var(--grey-l-2)}
+input:-moz-placeholder {color: var(--grey-l-2)}
+input:-ms-input-placeholder {color: var(--grey-l-2)}

package/dist/scss/_multiselect.scss

@@ -0,0 +1,164 @@
+:root {
+  --multiselect-height: calc(var(--input-height) - 2px);
+}
+
+.multiselect {
+  position: relative;
+  min-height: var(--multiselect-height);
+  flex-basis: 100%;
+  width: 100%;
+  font-family: 'Roboto';
+  font-size: var(--font-size);
+
+  &--with-right-button {
+    .multiselect__tags {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
+    & + .v-btn {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+      border-left: none;
+    }
+  }
+
+  & .multiselect__single {
+    margin-left: 12px;
+  }
+
+  &__placeholder {
+    display: flex;
+    align-items: center;
+    height: var(--multiselect-height);
+    padding-left: 4px;
+  }
+
+  &--active {
+    & .multiselect__tags {
+      border-color: var(--grey-l-4) !important;
+    }
+  }
+
+  & .multiselect__tags {
+    min-height: var(--multiselect-height);
+    border: 1px solid var(--grey-l-5);
+    border-radius: var(--border-radius);
+
+    .multiselect__strong {
+      font-size: var(--font-size);
+      color: var(--grey);
+    }
+
+    &-wrap {
+      display: flex;
+      flex-wrap: wrap;
+      min-height: var(--multiselect-height);
+      padding-top: 3px;
+
+      .v-chip {
+        margin-left: 8px !important;
+        max-width: 228px;
+      }
+    }
+
+    & > span:not(.multiselect__placeholder) {
+      padding-top: 5px;
+    }
+  }
+
+  & input {
+    height: var(--multiselect-height);
+    padding-left: 8px;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &--list-empty {
+    .multiselect__content-wrapper {
+      border: none !important;
+    }
+  }
+
+  &__content-wrapper {
+    z-index: 99;
+    width: 100%;
+    display: block;
+    background-color: var(--white);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-1);
+    overflow: auto;
+    padding: 0;
+    border: 1px solid var(--grey-l-5);
+    border-top: none;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+
+    & ul {
+      width: 100%;
+      padding: 0;
+    }
+
+    & li {
+      min-height: var(--multiselect-height);
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      width: 100%;
+      font-size: var(--font-size);
+
+      & .multiselect__option {
+        width: 100%;
+        padding-left: 10px;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        text-transform: none;
+        position: relative;
+        cursor: pointer;
+      }
+
+      & .multiselect__option--highlight {
+        background-color: var(--grey-l-4);
+      }
+    }
+  }
+
+  &.multiselect--arrow {
+    &.mobile {
+      height: 25px !important;
+    }
+    .multiselect__select {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: var(--input-height);
+      right: 1px;
+      top: 1px;
+      &:before {
+        position: relative;
+        color: var(--grey);
+        border-style: solid;
+        border-width: 5px 5px 0;
+        border-color: var(--grey) transparent transparent;
+        content: '';
+      }
+    }
+    &.multiselect--active {
+      .multiselect__select {
+        &:before {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+
+  &--disabled {
+    .multiselect__tags {
+      background-color: var(--grey-l-6);
+    }
+  }
+}

package/dist/scss/_toolbar.scss

@@ -0,0 +1,16 @@
+.v-toolbar {
+  &:not(.v-app-bar) {
+    .v-toolbar__content {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+  }
+
+  .v-toolbar__content > .v-btn:first-child {
+    margin-inline-start: 0;
+  }
+
+  .v-toolbar__content > .v-btn:last-child {
+    margin-inline-end: 0;
+  }
+}

package/dist/scss/_variables.scss

@@ -0,0 +1,25 @@
+$font-size: 12px !default; // основной шрифт приложения
+$input-height: 28px !default; // высота атомарного элемента ui (button, input)
+$border-radius: 4px !default; // радиус скругления атомарного элемента ui
+$chip-height: 20px !default; // высота элемента chip
+
+$ld-tab-height: $input-height + 10px; // высота элемента ld-tab
+
+$shadow-1: 0px 3px 4px 0px rgba(0, 0, 0, 0.14);
+$shadow-2: 0px 3px 4px 0px rgba(0, 0, 0, 0.20);
+$shadow-3: 0px 5px 6px 0px rgba(0, 0, 0, 0.30);
+$shadow-4: 0px 16px 20px 0px rgba(0, 0, 0, 0.20);
+
+:root {
+  --font-size--1: #{calc(var(--font-size) - 1px)};
+  --font-size: #{$font-size};
+  --font-size-2: #{calc(var(--font-size) + 2px)};
+  --input-height: #{$input-height};
+  --border-radius: #{$border-radius};
+  --chip-height: #{$chip-height};
+  --ld-tab-height: #{$ld-tab-height};
+  --shadow-1: #{$shadow-1};
+  --shadow-2: #{$shadow-2};
+  --shadow-3: #{$shadow-3};
+  --shadow-4: #{$shadow-4};
+}

package/dist/scss/index.scss

@@ -0,0 +1,10 @@
+@import 'fonts';
+@import 'colors';
+@import 'variables';
+@import 'buttons';
+@import 'chip';
+@import 'breadcrumbs';
+@import 'inputs';
+@import 'calendar';
+@import 'toolbar';
+@import 'multiselect';

package/dist/types/breadcrumbs.d.ts

@@ -0,0 +1,22 @@
+export interface IDictionary<TValue> {
+  [index: string]: TValue;
+}
+
+export interface IRoute {
+  path?: string;
+  name?: string;
+  hash?: string;
+  query?: IDictionary<string | Array<string>>;
+  params?: RouteParams;
+  fullPath?: string;
+  redirectedFrom?: string;
+  meta?: { transition?: symbol; state?: symbol };
+}
+
+export interface IBreadcrumbsItem {
+  text?: string;
+  remark?: string;
+  route: IRoute;
+  disabled?: boolean;
+  data?: unknown;
+}

package/dist/types/options.d.ts

@@ -0,0 +1,47 @@
+export interface ldmuiOptions {
+  aliases?: {
+    'ld-button'?: string;
+    'ld-icon'?: string;
+    'ld-splitter'?: string;
+    'ld-loader'?: string;
+    'ld-toggle-buttons'?: string;
+    'ld-breadcrumbs'?: string;
+    'ld-edit-text'?: string;
+    'ld-datepicker'?: string;
+    'ld-tab'?: string;
+    'ld-tabs'?: string;
+    'ld-page-toolbar'?: string;
+    'ld-select-list-box'?: string;
+    'ld-checkbox'?: string;
+    'ld-radiobutton'?: string;
+    'ld-radiogroup'?: string;
+    'ld-textarea'?: string;
+    'ld-select'?: string;
+    'ld-combobox'?: string;
+    'ld-timepicker'?: string;
+    'ld-text-viewer'?: string;
+    'ld-edit-masked-text'?: string;
+    'ld-text-markup'?: string;
+  },
+  viewport?: {
+    isMobile: string;
+    isTablet: string;
+    isDesktop: string;
+  },
+  language?: 'ru',
+  LdIcon?: {
+    path: string;
+    map: {
+      icons: Array<[string, string]>;
+    }
+  },
+  LdBreadcrumbs?: {
+    home: {
+      name: string;
+      path: string;
+    }
+  },
+  LdTabs?: {
+    header: string;
+  }
+}

package/dist/types/validation.d.ts

@@ -0,0 +1,16 @@
+export type ValidateFunction = (v: unknown) => boolean | string;
+
+export interface IInput {
+  uid: number;
+  validate: ValidateFunction;
+  reset: () => void;
+  resetValidation: () => void;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  __cardSection: string | number;
+}
+
+export interface IWatcher {
+  uid: number;
+  valid: () => void;
+  shouldValidate: () => void;
+}

package/package.json

@@ -1,23 +1,99 @@
 {
   "name": "@ldmjs/ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "ldm ui",
-  "main": "dist/main.js",
+  "main": "dist/index.js",
+  "engines": {
+    "node": ">=16",
+    "npm": ">=8"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "cross-env NODE_ENV=development webpack serve --config config/webpack.config.dev.js --progress --profile --stats-error-details",
+    "build": "cross-env NODE_ENV=production webpack --config config/webpack.config.build.js --stats-error-details",
+    "serve": "cross-env NODE_ENV=development webpack serve --config config/webpack.config.serve.js --progress --profile",
+    "test": "jest --runInBand --no-cache",
+    "pub": "node config/publish.js && npm publish --access=public"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ldmjs/ui.git"
+    "url": "https://github.com/ldmjs/ui.git"
   },
   "keywords": [
     "ldm",
     "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"
+  "homepage": "https://github.com/ldmjs/ui#readme",
+  "files": [
+    "dist/"
+  ],
+  "devDependencies": {
+    "@babel/core": "7.23.6",
+    "@babel/plugin-proposal-decorators": "7.23.6",
+    "@babel/plugin-proposal-export-default-from": "7.23.3",
+    "@babel/plugin-transform-class-properties": "7.23.3",
+    "@babel/plugin-transform-export-namespace-from": "7.23.4",
+    "@babel/plugin-transform-runtime": "7.23.6",
+    "@babel/plugin-transform-typescript": "7.23.6",
+    "@babel/preset-env": "7.23.6",
+    "@babel/preset-typescript": "7.23.3",
+    "@floating-ui/dom": "^1.6.3",
+    "@ldmjs/datatable": "^1.0.3",
+    "@popperjs/core": "^2.11.8",
+    "@types/babel__core": "^7",
+    "@types/babel__plugin-transform-runtime": "^7",
+    "@types/babel__preset-env": "^7",
+    "@types/eslint": "^8",
+    "@types/jest": "^29.5.12",
+    "@types/lodash-es": "^4",
+    "@typescript-eslint/eslint-plugin": "5.41.0",
+    "@typescript-eslint/parser": "5.41.0",
+    "@vue/test-utils": "2.4.3",
+    "@vue/vue3-jest": "29.2.6",
+    "@vuelidate/core": "2.0.2",
+    "@vuelidate/validators": "2.0.2",
+    "babel-jest": "29.5.0",
+    "babel-plugin-const-enum": "1.2.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "6.8.1",
+    "eslint": "8.56.0",
+    "html-webpack-plugin": "5.6.0",
+    "jest": "29.2.2",
+    "jest-environment-jsdom": "29.2.2",
+    "jest-transform-stub": "2.0.0",
+    "lodash-es": "4.17.21",
+    "material-design-icons-iconfont": "^6.7.0",
+    "md-editor-v3": "4.15.6",
+    "mini-css-extract-plugin": "2.8.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-jest": "29.0.3",
+    "ts-loader": "9.5.1",
+    "typescript": "4.9.5",
+    "v-calendar": "3.1.2",
+    "vue": "3.4.21",
+    "vue-class-component": "8.0.0-rc.1",
+    "vue-eslint-parser": "9.4.2",
+    "vue-imask": "6.6.1",
+    "vue-loader": "17.3.1",
+    "vue-property-decorator": "10.0.0-rc.3",
+    "vue-screen-utils": "1.0.0-beta.13",
+    "vuetify": "3.6.8",
+    "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"
+  }
 }