@ldmjs/ui 1.0.2 → 1.0.4

package/README.md

@@ -18,6 +18,10 @@ OR
 yarn add @ldmjs/ui@latest
 ```
 
+# Documentation
+
+http://172.19.90.47:8101
+
 # Use
 
 ```js
@@ -47,37 +51,6 @@ tsconfig.json
 }
 ```
 
-# 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,
@@ -105,299 +78,28 @@ const vuetify = createVuetify({
 })
 ```
 
-## #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
+# Library
 
-```html
-<ld-switch label="Ld Switch" v-model="toggle" />
-```
+ - ld-icon
+ - 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
 
 # Utilities