@ldmjs/ui 1.0.0-dev-5 → 1.0.0-dev-6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (C) 2024 by LANIT <nevezhin@lanit.ru>
+
+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,6 +1,8 @@
 # Dependencies
 
  - vue: >=3.4
+ - vuetify: >= 3.5
+ - lodash: >= 4
 
 # Installation
 
@@ -29,5 +31,114 @@ appComponent.mount('#app');
 
 # Library
 
- - ld-icon
- - loader
+## #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
+
+ ```vue
+  <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, {
+  LdBtn: {
+    isMobile: 'keyForGlobalIsMobileViewport',
+    isTablet: 'keyForGlobalIsTabletViewport',
+    isDesktop: 'keyForGlobalIsDesktopViewport'
+  }
+ });
+ ```
+
+```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>
+```
+
+# Utilities
+
+ - isDefined