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

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,5 @@
+$font-size: 12px !default; // основной шрифт приложения
+
+:root {
+  --font-size: #{$font-size};
+}

package/dist/scss/index.scss

@@ -0,0 +1,2 @@
+@import 'colors';
+@import 'variables';

package/dist/utils.d.ts

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

package/main.ts

@@ -1,10 +1,32 @@
+import '@/css';
+import '@/scss';
+
 import { createApp } from 'vue';
 import App from './src/app.vue';
 import ldmui from './src/index';
 
-const appComponent = createApp(App);
+async function start() {
+  const appComponent = createApp(App);
+  const promise = new Promise(resolve => {
+    fetch('/icons.json')
+      .then(res => res.json())
+      .then(data => {
+        appComponent.use(ldmui, {
+          LdIcon: {
+            path: 'icons',
+            map: data
+          }
+        });
+        return resolve(true)
+      })
+      .catch(e => {
+        //
+      })
+  })
 
-appComponent.use(ldmui);
+  await promise;
 
-appComponent.mount('#app');
+  appComponent.mount('#app');
+}
 
+start()

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@ldmjs/ui",
-  "version": "1.0.0-dev-1",
+  "version": "1.0.0-dev-3",
   "description": "ldm ui",
-  "main": "dist/main.umd.js",
+  "main": "dist/index.js",
   "scripts": {
     "dev": "webpack serve --config config/webpack.config.dev.js --progress --profile",
     "build": "webpack --config config/webpack.config.build.js --stats-error-details"
@@ -21,24 +21,28 @@
     "url": "https://github.com/ldmjs/ui/issues"
   },
   "homepage": "https://github.com/ldmjs/ui#readme",
-  "dependencies": {
+  "devDependencies": {
     "@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"
-  },
-  "devDependencies": {
     "@types/eslint": "^8",
     "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": "5.90.2",
+    "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1"
   }
 }

package/src/app.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ld-icon>user</ld-icon>
+    <ld-icon color="primary">user</ld-icon>
+    <div style="position: relative; width: 100%; height: 65px;">
+      <loader :options="{ transparent: true, global: false }" :visible="true" />
+    </div>
   </div>
 </template>
 <script>

package/src/css/index.css

@@ -0,0 +1,86 @@
+:root {
+  --primary-d-1: hsla(210, 100%, 18%, 100%);
+  --primary: hsla(210, 100%, 26%, 100%);
+  --primary-l-1: hsla(210, 100%, 34%, 100%);
+  --primary-l-2: hsla(210, 100%, 42%, 100%);
+  --primary-l-3: hsla(210, 100%, 50%, 100%);
+  --primary-l-4: hsla(210, 100%, 58%, 100%);
+  --primary-l-5: hsla(210, 100%, 66%, 100%);
+  --primary-l-6: hsla(210, 100%, 74%, 100%);
+  --primary-l-7: hsla(210, 100%, 82%, 100%);
+  --primary-l-8: hsla(210, 100%, 90%, 100%);
+
+  --dark: hsla(219, 83%, 14%, 100%);
+  --dark-l-1-09: hsla(219, 83%, 14%, 90%);
+  --dark-l-2-08: hsla(219, 83%, 14%, 80%);
+  --dark-l-3-07: hsla(219, 83%, 14%, 70%);
+  --dark-l-4-06: hsla(219, 83%, 14%, 60%);
+  --dark-l-5-05: hsla(219, 83%, 14%, 50%);
+  --dark-l-6-04: hsla(219, 83%, 14%, 40%);
+  --dark-l-7-03: hsla(219, 83%, 14%, 30%);
+  --dark-l-8-02: hsla(219, 83%, 14%, 20%);
+  --dark-l-9-01: hsla(219, 83%, 14%, 10%);
+
+  --secondary-d-4: hsla(204, 100%, 18%, 100%);
+  --secondary-d-3: hsla(204, 100%, 26%, 100%);
+  --secondary-d-2: hsla(204, 100%, 34%, 100%);
+  --secondary-d-1: hsla(204, 100%, 42%, 100%);
+  --secondary: hsla(204, 100%, 50%, 100%);
+  --secondary-l-1: hsla(204, 100%, 58%, 100%);
+  --secondary-l-2: hsla(204, 100%, 66%, 100%);
+  --secondary-l-3: hsla(204, 100%, 74%, 100%);
+  --secondary-l-4: hsla(204, 100%, 82%, 100%);
+  --secondary-l-5: hsla(204, 100%, 90%, 100%);
+
+  --success-d-3: hsla(135, 59%, 17%, 100%);
+  --success-d-2: hsla(135, 59%, 25%, 100%);
+  --success-d-1: hsla(135, 59%, 33%, 100%);
+  --success: hsla(135, 59%, 41%, 100%);
+  --success-l-1: hsla(135, 59%, 49%, 100%);
+  --success-l-2: hsla(135, 59%, 57%, 100%);
+  --success-l-3: hsla(135, 59%, 65%, 100%);
+  --success-l-4: hsla(135, 59%, 73%, 100%);
+  --success-l-5: hsla(135, 59%, 81%, 100%);
+  --success-l-6: hsla(135, 59%, 89%, 100%);
+
+  --error-d-3: hsla(7, 82%, 18%, 100%);
+  --error-d-2: hsla(7, 82%, 26%, 100%);
+  --error-d-1: hsla(7, 82%, 34%, 100%);
+  --error: hsla(7, 82%, 42%, 100%);
+  --error-l-1: hsla(7, 82%, 50%, 100%);
+  --error-l-2: hsla(7, 82%, 58%, 100%);
+  --error-l-3: hsla(7, 82%, 66%, 100%);
+  --error-l-4: hsla(7, 82%, 74%, 100%);
+  --error-l-5: hsla(7, 82%, 82%, 100%);
+  --error-l-6: hsla(7, 82%, 90%, 100%);
+
+  --warning-d-4: hsla(24, 100%, 18%, 100%);
+  --warning-d-3: hsla(24, 100%, 26%, 100%);
+  --warning-d-2: hsla(24, 100%, 34%, 100%);
+  --warning-d-1: hsla(24, 100%, 42%, 100%);
+  --warning: hsla(24, 100%, 50%, 100%);
+  --warning-l-1: hsla(24, 100%, 58%, 100%);
+  --warning-l-2: hsla(24, 100%, 66%, 100%);
+  --warning-l-3: hsla(24, 100%, 74%, 100%);
+  --warning-l-4: hsla(24, 100%, 82%, 100%);
+  --warning-l-5: hsla(24, 100%, 90%, 100%);
+
+  --grey-d-3: hsla(0, 0%, 14%, 100%);
+  --grey-d-2: hsla(0, 0%, 23%, 100%);
+  --grey-d-1: hsla(0, 0%, 32%, 100%);
+  --grey: hsla(0, 0%, 41%, 100%);
+  --grey-l-1: hsla(0, 0%, 50%, 100%);
+  --grey-l-2: hsla(0, 0%, 59%, 100%);
+  --grey-l-3: hsla(0, 0%, 68%, 100%);
+  --grey-l-4: hsla(0, 0%, 77%, 100%);
+  --grey-l-5: hsla(0, 0%, 86%, 100%);
+  --grey-l-6: hsla(0, 0%, 95%, 100%);
+
+  --black: hsla(0, 0%, 0%, 100%);
+
+  --white: hsla(0, 0%, 100%, 100%);
+
+  --text: hsla(0, 0%, 13%, 100%);
+
+  --label: hsla(0, 0%, 47%, 100%);
+}

package/src/index.d.ts

@@ -0,0 +1 @@
+declare module '@ldmjs/ui'

package/src/index.ts

@@ -1,5 +1,9 @@
-import { App, defineComponent } from 'vue';
-import ldicon from '@/ld-icon/ld-icon.vue';
+import { App } from 'vue';
+import ldiconReg from './ld-icon';
+import ldLoaderReg from './ld-loader';
+
+import { isDefined } from '@/utils/isDefined';
+import { getZIndex } from '@/utils/zIndex';
 
 const ldmuiPlugin = {
   install(vue: App, options?: {
@@ -10,36 +14,21 @@ const ldmuiPlugin = {
       }
     }
   }) {
-    if ($DEV) {
-      ldicon.props = {
-        ...ldicon.props,
-        path: {
-          default: options?.LdIcon?.path ?? 'icons',
-        },
-        map: {
-          default: options?.LdIcon?.map ?? { icons: [] }
-        }
-      }
-      vue.component('ld-icon', ldicon);
-      return;
+    ldiconReg(vue, options?.LdIcon)
+    ldLoaderReg(vue)
+
+    vue.config.globalProperties.$utils = {
+      isDefined
     }
-    let cmp: any = defineComponent(ldicon);
-    cmp = cmp.setup.__vccOpts;
-    cmp = {
-      ...cmp,
-      props: {
-        ...cmp.props,
-        path: {
-          default: options.LdIcon.path
-        },
-        map: {
-          default: options.LdIcon.map
-        }
-      }
-    };
-    vue.component('ld-icon', defineComponent(cmp));
   },
 };
 
 export default ldmuiPlugin;
 
+export {
+  isDefined,
+  getZIndex
+}
+
+
+

package/src/ld-icon/icons.md

@@ -1,2 +1,2 @@
 Все иконки можно посмотреть, открыв страничку по адресу:
-localhost:3000/assets/icons/icons.html
+localhost:4000/assets/icons/icons.html

package/src/ld-icon/index.ts

@@ -0,0 +1,35 @@
+import { App, defineComponent } from 'vue';
+import ldicon from '@/ld-icon/ld-icon.vue';
+
+function reg(vue: App, options?: { path: string; map: { icons: Array<[string, string]> } }) {
+  if ($DEV) {
+    ldicon.props = {
+      ...ldicon.props,
+      path: {
+        default: options?.path ?? 'icons',
+      },
+      map: {
+        default: options?.map ?? { icons: [] }
+      }
+    }
+    vue.component('ld-icon', ldicon);
+    return;
+  }
+  let cmp: any = defineComponent(ldicon);
+  cmp = cmp.setup.__vccOpts;
+  cmp = {
+    ...cmp,
+    props: {
+      ...cmp.props,
+      path: {
+        default: options?.path ?? 'icons',
+      },
+      map: {
+        default: options?.map ?? { icons: [] }
+      }
+    }
+  };
+  vue.component('ld-icon', defineComponent(cmp));
+}
+
+export default reg;

package/src/ld-loader/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue';
+import loader from '@/ld-loader/ld-loader.vue';
+
+function reg(vue: App) {
+  vue.component('loader', loader)
+}
+
+export default reg;

package/src/ld-loader/ld-loader.ts

@@ -0,0 +1,123 @@
+import { isDefined } from '@/utils/isDefined';
+import { getZIndex } from '@/utils/zIndex';
+import { Prop, Vue } from 'vue-property-decorator';
+
+enum LoaderType {
+  SandGlass = 0,
+  Clock = 1,
+  Circle = 2,
+  Css = 3,
+}
+
+interface ILoaderOptions {
+  type?: LoaderType;
+  transparent: boolean;
+  global: boolean;
+  size?: 'small' | 'big';
+  color?: 'primary' | 'white';
+  relative?: boolean;
+  bg?: boolean;
+}
+
+export default class Loader extends Vue {
+  @Prop({ type: Object, default: { size: 'big', bg: true } }) options: ILoaderOptions;
+  @Prop({ type: Boolean, default: 'false' }) visible: boolean;
+  @Prop({
+    type: String,
+    default: 'circle',
+    validator: value => ['sand', 'circle', 'clock', 'css'].includes(value as string),
+  })
+  indicator: string;
+  @Prop({ type: String, default: '' }) css: string;
+
+  created() {
+    if (!this.options.size) {
+      this.options.size = 'big';
+    }
+    if (this.indicator) {
+      switch (this.indicator) {
+        case 'circle':
+          this.options.type = LoaderType.Circle;
+          break;
+        case 'sand':
+          this.options.type = LoaderType.SandGlass;
+          break;
+        case 'clock':
+          this.options.type = LoaderType.Clock;
+          break;
+        case 'css':
+          this.options.type = LoaderType.Css;
+          break;
+        default:
+          this.options.type = LoaderType.SandGlass;
+          break;
+      }
+    }
+  }
+
+  get isSandGlass() {
+    return this.indicator === 'sand' || this.options.type === LoaderType.SandGlass;
+  }
+
+  get isCircle() {
+    return this.indicator === 'circle' || this.options.type === LoaderType.Circle;
+  }
+
+  get isCssClass() {
+    return this.indicator === 'css' || this.options.type === LoaderType.Css;
+  }
+
+  get imgClass() {
+    return this.css;
+  }
+
+  get isTransparent() {
+    return this.options.transparent;
+  }
+
+  get noBackground() {
+    return isDefined(this.options.bg) && !this.options.bg;
+  }
+
+  get isGlobal() {
+    return Boolean(this.options.global);
+  }
+
+  get styles() {
+    return {
+      'z-index': getZIndex(this.$parent.$el) + 2,
+    };
+  }
+
+  get size() {
+    return this.options?.size ?? 'big';
+  }
+
+  get color() {
+    return this.options?.color ?? 'primary';
+  }
+
+  get isRelative() {
+    return this.options?.relative;
+  }
+
+  get cssClasses(): string[] {
+    const classes = [];
+    if (!this.isTransparent) {
+      classes.push('loader__white-bg');
+    }
+    if (this.isGlobal) {
+      classes.push('loading-mask-global');
+    }
+    if (this.isRelative) {
+      classes.push('loader__relative');
+    } else {
+      classes.push('loading-mask');
+    }
+    if (this.noBackground) {
+      classes.push('loader__transparent');
+    }
+    classes.push(`loader__color-${this.color}`);
+    return classes;
+  }
+}

package/src/ld-loader/ld-loader.vue

@@ -0,0 +1,133 @@
+<template>
+  <div v-show="visible" class="loader" :class="cssClasses" :style="styles">
+    <i v-if="isSandGlass" class="fa fa-spin fa-hourglass-o fa-3x fa-fw loader__icon"></i>
+    <div v-else-if="isCircle" class="circle" :class="size"></div>
+    <div v-else-if="isCssClass" :class="imgClass"></div>
+    <i v-else class="fa fa-clock-o fa-3x fa-fw loader__icon loader__icon-gray"></i>
+  </div>
+</template>
+<script src="./ld-loader.ts" lang="ts"></script>
+<style lang="scss" scoped>
+  .loader {
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    transition: opacity 0.15s linear;
+
+    &__icon {
+      vertical-align: middle;
+      height: 48px;
+    }
+
+    &__icon-gray {
+      color: var(--grey-l-5);
+    }
+
+    $small: calc(var(--font-size) + 4px);
+    $normal: calc(var(--font-size) * 2);
+    $big: calc(var(--font-size) * 3);
+
+    .circle.small {
+      width: $small;
+      height: $small;
+      border-width: 3px;
+    }
+
+    .circle.big {
+      width: $big;
+      height: $big;
+      border-width: 3px;
+    }
+
+    .circle {
+      animation: rotating 0.7s linear infinite;
+      width: $normal;
+      height: $normal;
+      border-radius: 50%;
+      border: 2px solid transparent;
+    }
+
+    &.loader__color-primary {
+      &:not(.loader__transparent) {
+        background: rgba(255, 255, 255, 0.5);
+      }
+      .circle {
+        border-right-color: var(--primary);
+        border-bottom-color: var(--primary);
+      }
+    }
+    &.loader__color-white {
+      background: none;
+      .circle {
+        border-right-color: var(--white);
+        border-bottom-color: var(--white);
+      }
+    }
+    &.loader__white-bg {
+      &:not(.loader__transparent) {
+        background: rgba(255, 255, 255, 1);
+      }
+    }
+  }
+
+  .loading-mask-global {
+    position: fixed !important;
+    width: 100vw !important;
+    height: 100vh !important;
+  }
+
+  .loading-mask {
+    position: absolute;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
+
+  .loader__relative {
+    position: relative;
+  }
+
+  @-moz-keyframes rotating {
+    0% {
+      transform: rotate(0);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @-webkit-keyframes rotating {
+    0% {
+      transform: rotate(0);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @-o-keyframes rotating {
+    0% {
+      transform: rotate(0);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes rotating {
+    0% {
+      transform: rotate(0);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>