@ldmjs/ui 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (C) 2024 by ldmjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -1 +1,417 @@
-Hello, LDM!
+# Dependencies
+
+"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",
+
+# Installation
+
+```cmd
+npm i @ldmjs/ui@latest
+```
+OR
+```cmd
+yarn add @ldmjs/ui@latest
+```
+
+# Use
+
+```js
+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 'material-design-icons-iconfont/dist/material-design-icons.css';
+import 'md-editor-v3/lib/style.css';
+import ldmui from '@ldmjs/ui';
+```
+
+```js
+const appComponent = createApp(App);
+appComponent.use(ldmui); // or appComponent.use(ldmui, options);
+appComponent.mount('#app');
+```
+
+tsconfig.json
+```json
+{
+  "compilerOptions": {
+    "include": ["node_modules/@ldmjs/ui/index.d.ts"]
+  }
+}
+```
+
+# Library
+
+## #ld-icon
+
+### use icons
+
+ ```js
+ appComponent.use(ldmui, {
+  LdIcon: {
+    path: 'path/to/icons',
+    map: {
+      icons: [
+        ['user', 'user_icon_file_name']
+      ]
+    }
+  }
+ });
+ ```
+
+ ```html
+  <ld-icon>user</ld-icon>
+ ```
+
+## #loader
+
+ ### use loader
+
+ ```html
+  <loader :options="{ transparent: false, global: true }" :visible="loading" />
+ ```
+
+## #vuetify aliases:
+  [
+    small-button,
+    square-button,
+    small-chip,
+    small-badge
+  ]
+
+### use vuetify aliases
+
+```js
+import 'vuetify/styles';
+import 'material-design-icons-iconfont/dist/material-design-icons.css';
+import { defaults, getAliases } from '@ldmjs/ui';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+
+const vuetify = createVuetify({
+  aliases: {
+    ...getAliases(components),
+  },
+  defaults: {
+    ...defaults
+  }
+})
+```
+
+## #ld-btn
+
+### use responsive buttons
+
+ ```js
+ appComponent.use(ldmui, {
+  viewport: {
+    isMobile: 'keyForGlobalMobileViewport',
+    isTablet: 'keyForGlobalTabletViewport',
+    isDesktop: 'keyForGlobalDesktopViewport'
+  }
+ });
+ ```
+
+```html
+<ld-btn
+  variant="outlined" // text, flat
+  color="primary"
+  testid="test-id"
+  :disabled="false" // non required
+  :is-desktop-view="true" // non required
+  :is-tablet-view="false" // non required
+  :is-mobile-view="false" // non required
+  @click="func()" // click handler
+>
+  <template #icon>
+    <ld-icon ... /> // some icon
+  </template>
+  <template #text>
+    button caption // some text
+  </template>
+  <template #hidden>
+    <div>...</div>
+  </template>
+</ld-btn>
+```
+
+## #ld-splitter
+
+### use splitter
+
+```html
+<ld-splitter>
+  <template #left-pane>
+    <div>Left Pane</div>
+  </template>
+  <template #right-pane>
+    <div>Right Pane</div>
+  </template>
+</ld-splitter>
+```
+
+## #ld-toggle-buttons
+
+### use toggle buttons
+
+```html
+<ld-toggle-btn
+  v-model="toggleModel"
+  :items="toggleItems"
+/>
+```
+
+```js
+toggleItems = [
+  {
+    id: 0,
+    tooltip: 'user',
+    icon: 'user',
+  },
+  {
+    id: 1,
+    tooltip: 'group',
+    icon: 'group',
+  }
+]
+```
+
+## #ld-breadcrumbs
+
+### use breadcrumbs
+
+```js
+appComponent.use(ldmui, {
+  LdBreadcrumbs: {
+    home: { // setup route for home page
+      name: 'home',
+      path: '/'
+    }
+  }
+```
+
+```html
+<ld-breadcrumbs :breadcrumbs="items" />
+```
+
+```js
+const items = [
+  {
+    text: 'Документы',
+    route: {
+      path: '/documents'
+    }
+  },
+  {
+    text: 'Входящая корреспонденция',
+    route: {
+      path: '/documents/123456'
+    }
+  }
+]
+```
+
+## #ld-edit-text
+
+### use edit text
+
+```html
+<ld-edit-text v-model="value" label="ФИО" />
+<ld-edit-text v-model="value" :only-numbers="true" label="Номер" />
+```
+
+## #ld-datepicker
+
+### use datepicker
+
+```html
+<ld-datepicker v-model="value" :dateonly="false" label="Ld datepicker" />
+```
+
+## #ld-tabs
+
+### use tabs
+
+```html
+<ld-tabs v-model="value" :mobile="false">
+  <ld-tab index="0" heading="Tab 1">Content</ld-tab>
+  <ld-tab index="1" heading="Tab 1">Content</ld-tab>
+</ld-tabs>
+```
+
+## #ld-page-toolbar
+
+### use page toolbar
+
+```html
+<ld-page-toolbar :preview="isMobile">
+  <template #breadcrumbs>
+    <ld-breadcrumbs :breadcrumbs="breadcrumbs" />
+  </template>
+  <template #content>
+    <span>Header</span>
+  </template>
+  <template #action-panel>
+    <ld-button>Button</ld-button>
+  </template>
+</ld-page-toolbar>
+```
+
+## #ld-select-list-box
+
+### use select list box
+
+```html
+<ld-select-list-box
+  ref="selectListBox"
+  v-model="selectedValue"
+  v-model:modelItems="selectedItems"
+  :handlers="handlers"
+  :multiselect="multiselect"
+  :required="required"
+  label="Ld Select List Box"
+  :persistent-hint="persistentHint"
+  :option-hint="optionHint"
+  input-hint="Select Box Hint"
+>
+  <template #tag="{ item, onRemove, canRemove }">
+    tag template
+  </template>
+  <template #option="{ item, isSelected }">
+    option template
+  </template>
+  <template #option-icon="{ item, isSelected }">
+    option icon
+  </template>
+  <template #option-hint="{ item }">
+    option hint
+  </template>
+</ld-select-list-box>
+```
+
+```js
+// methods for work with vacabularies
+const handlers = {
+  fetchData: () => { return [] },
+  fetchItem: (ids) => { return [] },
+  serverSearch: (searchTerm) => { return [] },
+  select: () => { return [] },
+}
+```
+## #ld-radiogroup
+
+### use radio inputs
+
+```html
+<ld-radiogroup v-model="radioValue" label="Ld Radio Buttons">
+  <ld-radiobutton label="Radio Button 1" :value="0" />
+  <ld-radiobutton label="Radio Button 2" :value="1" />
+</ld-radiogroup>
+```
+
+## #ld-textarea
+
+### use textarea
+
+```html
+ <ld-textarea v-model="commentValue" label="Ld Textarea" label-on-top :rows="4" />
+```
+
+## #ld-select
+
+### use select
+
+```html
+ <ld-select v-model="selectedElement" :items="elements" label="Ld select" />
+```
+
+## ld-combobox
+
+### use combobox
+
+```html
+<ld-combobox
+  v-model="comboboxValue"
+  label="Ld Combobox"
+  :multiselect="false"
+  item-title="title"
+  :items="comboboxItems"
+  required
+/>
+```
+
+```js
+const comboboxItems = [
+  {
+    id: 1,
+    title: '1'
+  },
+  {
+    id: 2,
+    title: '2'
+  }
+]
+```
+
+## ld-text-viewer
+
+### use textviewer
+
+```html
+<ld-text-viewer :text="'Link http://yandex.ru'" active-links label="Ld TextViewer" />
+```
+
+## ld-timepicker
+
+### use timepicker
+
+```html
+<ld-timepicker v-model="timeValue" label="Ld Timepicker" required />
+```
+
+## ld-edit-masked-text
+
+### use masked text
+
+```html
+<ld-edit-masked-text v-model="maskedText" mask="000-000-000 00" label="Ld Edit Masked Text" />
+```
+## ld-text-markup
+
+### use text markup
+
+```html
+<ld-text-markup v-model="textMarkup" required label="Ld Text Markup" />
+```
+
+## ld-switch
+
+### use switch
+
+```html
+<ld-switch label="Ld Switch" v-model="toggle" />
+```
+
+# Utilities
+
+ - isDefined
+ - uidGen
+ - delay
+ - deepValueGetter
+ - isObjectEmpty
+ - datetime
+
+# Directives
+ - v-active
+
+# Mixins
+
+- ValidateMixin // class-component style
+- ValidateMixinOptions // options style