@ldmjs/ui v1.0.72

Dependencies

"@ldmjs/core": "1.0.0", "vue": "3.4.21", "vue-class-component": "8.0.0-rc.1", "vue-property-decorator": "10.0.0-rc.3", "vuetify": "3.6.8", "vue-screen-utils": "1.0.0-beta.13", "lodash-es": "4.17.21", "md-editor-v3": "4.15.6", "@vuelidate/core": "2.0.2", "@vuelidate/validators": "2.0.2",

Installation

npm i @ldmjs/ui@latest

OR

yarn add @ldmjs/ui@latest

Documentation

http://172.19.93.149:8101

Use

import { createApp } from 'vue';
import '@ldmjs/ui/dist/css/index.css';
import '@ldmjs/ui/dist/css/root.css';
import '@ldmjs/ui/dist/css/calendar.css';
import '@ldmjs/ui/dist/scss';
import 'vuetify/styles';
import 'md-editor-v3/lib/style.css';
import ldmui from '@ldmjs/ui';

const appComponent = createApp(App);
appComponent.use(ldmui); // or appComponent.use(ldmui, options);
appComponent.mount('#app');

tsconfig.json

{
  "compilerOptions": {
    "include": ["node_modules/@ldmjs/ui/index.d.ts"]
  }
}

#vuetify aliases:

small-button, square-button, small-chip, small-badge

use vuetify aliases

import 'vuetify/styles';
import { defaults, getAliases } from '@ldmjs/ui';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';

const vuetify = createVuetify({
  aliases: {
    ...getAliases(components),
  },
  defaults: {
    ...defaults
  }
})

Library

• ld-icon
• ld-loader
• ld-btn
• ld-splitter
• ld-toggle-buttons
• ld-breadcrumbs
• ld-edit-text
• ld-tabs
• ld-datepicker
• ld-page-toolbar
• ld-select-list-box
• ld-radiogroup
• ld-textarea
• ld-select
• ld-combobox
• ld-text-viewer
• ld-timepicker
• ld-edit-masked-text
• ld-text-markup
• ld-switch
• ld-dialog
• ld-data-iterator
• ld-pager
• ld-edit-list-box
• ld-time

Utilities

• awaiting
• base64 .encode .decode .isValid
• cookie .get .set .delete
• delay
• deepValueGetter
• isDefined
• isObjectEmpty
• pluralizeNoun
• strings .camelCase .capitalize
• uidGen
• fileToArrayBuffer
• fileToBase64
• base64ToUint8Array
• uint8ArrayToHex
• hexToArrayBuffer
• uint8ArrayToBase64
• arrayBufferToUint8Array

Directives

• v-active

Mixins

• ValidateMixin // class-component style
• ValidateMixinOptions // options style