@awes-io/ui 2.142.0 → 2.143.0

package/nuxt/awes.config.js

@@ -2,13 +2,13 @@ import styles from '../assets/js/styles'
 
 export default {
     logo: {
-        src: 'https://static.awes.io/logo-blue.svg',
-        alt: 'Awes.io'
+        src: 'https://storage2.easyweek.io/awescode_ui/awescode_logo.svg',
+        alt: 'AwesCode UI'
     },
 
     fullLogo: {
-        src: 'https://static.awes.io/logo-blue_white.svg',
-        alt: 'Awes.io'
+        src: 'https://storage2.easyweek.io/awescode_ui/awescode_logo_full.svg',
+        alt: 'AwesCode UI'
     },
 
     background: {
@@ -23,13 +23,14 @@ export default {
 
 export const dark = {
     logo: {
-        src: 'https://static.awes.io/logo-blue_white.svg',
-        alt: 'Awes.io'
+        src: 'https://storage2.easyweek.io/awescode_ui/awescode_logo.svg',
+        alt: 'AwesCode UI'
     },
 
     fullLogo: {
-        src: 'https://static.awes.io/logo-blue.svg',
-        alt: 'Awes.io'
+        src:
+            'https://storage2.easyweek.io/awescode_ui/awescode_logo_full_white.svg',
+        alt: 'AwesCode UI'
     },
 
     background: {

package/nuxt/icons.css

@@ -0,0 +1,26 @@
+@font-face {
+    font-family: "aw-icons";
+    src: url("../dist/fonts/aw-icons.woff2?c043a54b44365b2dd8b253e7b50afecf") format("woff2"),
+url("../dist/fonts/aw-icons.woff?c043a54b44365b2dd8b253e7b50afecf") format("woff");
+}
+
+.aw-icon {
+    display: inline-block;
+    line-height: 1;
+    vertical-align: middle;
+    text-align: center;
+}
+
+.aw-icon:before {
+    font-family: aw-icons !important;
+    font-style: normal;
+    font-weight: normal !important;
+    vertical-align: top;
+}
+
+.aw-icon-check:before {
+    content: "\f101";
+}
+.aw-icon-times:before {
+    content: "\f102";
+}

package/nuxt/index.js

@@ -52,14 +52,14 @@ async function AwesIoUi() {
      * Check store existance
      */
     if (!this.options.store) {
-        throw new Error('Awes.io/UI: Vuex store is required')
+        throw new Error('AwesCode UI: Vuex store is required')
     }
 
     /**
      * Check components enabled
      */
     if (!this.options.components) {
-        throw new Error('Awes.io/UI: Components should be enabled')
+        throw new Error('AwesCode UI: Components should be enabled')
     }
 
     /**

package/nuxt/pages/more.vue

@@ -85,7 +85,7 @@
                     <AwMobileMenuItem
                         :href="profileUrl"
                         arrow
-                        icon="awesio/profile"
+                        icon="awesio/user"
                         :text="$t('My profile')"
                         class="aw-more__user-profile"
                     />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.142.0",
+    "version": "2.143.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -92,7 +92,6 @@
         "eslint-config-prettier": "^6.9.0",
         "eslint-plugin-nuxt": "^0.5.0",
         "eslint-plugin-prettier": "^3.1.2",
-        "nuxt": "^2.17.1",
         "nuxt-i18n": "^6.4.1",
         "postcss-calc": "^7.0.1",
         "postcss-custom-properties": "^9.0.2",
@@ -114,5 +113,8 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "fee25aeae1180c058df03115e135732f9bd2dd09"
+    "peerDependencies": {
+        "nuxt": "^2.18.1"
+    },
+    "gitHead": "873b089186b8a4dc32b262df8ea1dfcea7b81790"
 }

package/readme.md

@@ -1 +1,171 @@
-Awes.io/Ui 321
+# @awes-io/ui
+
+UI component library for AwesCode UI applications built with Vue.js and Nuxt.js.
+
+## Overview
+
+This package provides a comprehensive set of reusable UI components organized using atomic design principles. Components are categorized into atoms, molecules, organisms, pages, and layouts, each serving a specific purpose in building user interfaces.
+
+## Installation
+
+```bash
+npm install @awes-io/ui
+# or
+yarn add @awes-io/ui
+```
+
+## Setup
+
+### Nuxt.js
+
+Add the module to your `nuxt.config.js`:
+
+```javascript
+export default {
+  modules: [
+    '@awes-io/ui'
+  ],
+  
+  // Required: Enable components
+  components: true,
+  
+  // Required: Enable Vuex store
+  store: true
+}
+```
+
+### Configuration
+
+Create an `awes.config.js` file in your project root to customize component defaults:
+
+```javascript
+export default {
+  // Default theme configuration
+  logo: {
+    src: '/logo.svg',
+    alt: 'My App'
+  },
+  
+  // Component-specific configuration
+  AwButton: {
+    size: 'md',
+    color: 'accent',
+    theme: 'solid'
+  },
+  
+  // Dark theme overrides
+  dark: {
+    logo: {
+      src: '/logo-dark.svg'
+    }
+  }
+}
+```
+
+## Component System
+
+### Architecture
+
+Components are organized into 5 categories:
+
+1. **Atoms** - Basic building blocks (inputs, buttons, icons)
+2. **Molecules** - Simple combinations of atoms
+3. **Organisms** - Complex, feature-specific components
+4. **Pages** - Complete page layouts
+5. **Layouts** - Root-level layout components
+
+### Import Methods
+
+- **Global**: Atoms and most molecules are automatically registered and available everywhere
+- **Dynamic**: Organisms, pages, and layouts are dynamically imported for better performance
+
+See [docs/index.md](docs/index.md) for complete component listing.
+
+## Quick Start
+
+### Basic Usage
+
+```markup
+<template>
+  <AwPage title="My Page">
+    <AwCard title="Card Title">
+      <AwInput v-model="name" label="Name" />
+      <AwButton @click="submit">Submit</AwButton>
+    </AwCard>
+  </AwPage>
+</template>
+```
+
+### With Layout
+
+```markup
+<template>
+  <AwLayout>
+    <AwPage title="Dashboard">
+      <!-- page content -->
+    </AwPage>
+  </AwLayout>
+</template>
+```
+
+## Features
+
+- **Atomic Design** - Organized component hierarchy
+- **Global & Dynamic Imports** - Optimized loading strategy
+- **Vuex Integration** - Built-in store module for navigation and state
+- **Dark Theme Support** - Automatic theme switching
+- **Responsive Design** - Mobile-first with breakpoint utilities
+- **TypeScript Ready** - Full TypeScript support
+- **Accessible** - ARIA attributes and keyboard navigation
+- **Customizable** - Extensive configuration options
+
+## Documentation
+
+- **[Component Documentation](docs/index.md)** - Complete component reference
+- **[Examples](../examples)** - Live usage examples
+- **[Configuration Guide](components/_config.js)** - Default configurations
+
+## Store Module
+
+The library includes a Vuex store module (`awesIo`) that manages:
+
+- Navigation menus
+- Route tracking
+- Dark theme state
+- Screen breakpoints
+- User profile data
+
+Access via `$store.getters['awesIo/mainMenu']` or use the provided getters.
+
+## Plugins
+
+The module automatically registers several Nuxt plugins:
+
+- **Core** - `$awes` config and `$notify` notifications
+- **Screen** - `$screen` responsive breakpoints
+- **Router** - Extended router methods
+- **Dark Theme** - Theme management
+- **Permissions** - CASL integration
+- **Day.js** - Date handling
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Development
+
+```bash
+# Install dependencies
+yarn install
+
+# Run examples
+cd examples
+yarn dev
+```
+
+## License
+
+See LICENSE file for details.

package/docs/aw-accordion-fold.md

@@ -1,46 +0,0 @@
----
-metaTitle: Accordion fold сomponent | Awes.io
-meta:
-  - name: description
-    content: The <AwAccordionFold /> component is used to render Accordion fold - UI Vue component for Awes.io.
-title: Accordion fold
----
-# Accordion fold
-
-The `AwAccordionFold` component is used to render Accordion fold.
-
-
-## Usage
-Several examples how you can use `AwAccordionFold`.
-
-### Live Example
-<iframe
-     src='https://codesandbox.io/embed/github/awes-io/client/tree/master/examples/basic-ui?autoresize=1&fontsize=14&hidenavigation=1&initialpath=%2Faw-accordion-fold&module=%2Fpages%2Faw-accordion-fold.vue&theme=dark&view=editor'
-     style='width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;'
-     title='basic-ui'
-     allow='geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb'
-     sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
-   ></iframe>
-
-## API
-Select your desired component from below and see the available props, slots, events and functions.
-
-### Props
-Below is a collection of Vue **props** for the `AwAccordionFold` component.
-<!-- @vuese:AwAccordionFold:props:start -->
-|Name|Description|Type|Required|Default|
-|---|---|---|---|---|
-|show|-|`Boolean`|`false`|-|
-|tag|-|`String`|`false`|div|
-
-<!-- @vuese:AwAccordionFold:props:end -->
-
-### Slots
-Below is a collection of Vue **slots** for the `AwAccordionFold` component.
-<!-- @vuese:AwAccordionFold:slots:start -->
-|Name|Description|Default Slot Content|
-|---|---|---|
-|default|-|-|
-
-<!-- @vuese:AwAccordionFold:slots:end -->
-

package/docs/aw-address.md

@@ -1,44 +0,0 @@
----
-metaTitle: Address сomponent | Awes.io
-meta:
-  - name: description
-    content: The <AwAddress /> component is used to render Address - UI Vue component for Awes.io.
-title: Address
----
-# Address
-
-The `AwAddress` component is used to render Address.
-
-
-## Usage
-Several examples how you can use `AwAddress`.
-
-### Live Example
-<iframe
-     src='https://codesandbox.io/embed/github/awes-io/client/tree/master/examples/basic-ui?autoresize=1&fontsize=14&hidenavigation=1&initialpath=%2Faw-address&module=%2Fpages%2Faw-address.vue&theme=dark&view=editor'
-     style='width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;'
-     title='basic-ui'
-     allow='geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb'
-     sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
-   ></iframe>
-
-## API
-Select your desired component from below and see the available props, slots, events and functions.
-
-### Props
-Below is a collection of Vue **props** for the `AwAddress` component.
-<!-- @vuese:AwAddress:props:start -->
-|Name|Description|Type|Required|Default|
-|---|---|---|---|---|
-|queryOptions|-|`Object`|`false`|-|
-
-<!-- @vuese:AwAddress:props:end -->
-
-### Events
-Below is a collection of Vue **events** for the `AwAddress` component.
-<!-- @vuese:AwAddress:events:start -->
-|Event Name|Description|Parameters|
-|---|---|---|
-|input|-|-|
-
-<!-- @vuese:AwAddress:events:end -->

package/docs/aw-avatar.md

@@ -1,51 +0,0 @@
----
-metaTitle: Avatar сomponent | Awes.io
-meta:
-  - name: description
-    content: The <AwAvatar /> component is used to render Avatar - UI Vue component for Awes.io.
-title: Avatar
----
-# Avatar
-
-The `AwAvatar` component is used to render Avatar.
-
-
-## Usage
-Several examples how you can use `AwAvatar`.
-
-
-### Live Example
-<iframe
-     src='https://codesandbox.io/embed/github/awes-io/client/tree/master/examples/basic-ui?autoresize=1&fontsize=14&hidenavigation=1&initialpath=%2Faw-avatar&module=%2Fpages%2Faw-avatar.vue&theme=dark&view=editor'
-     style='width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;'
-     title='basic-ui'
-     allow='geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb'
-     sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
-   ></iframe>
-
-## API
-Select your desired component from below and see the available props, slots, events and functions.
-
-### Props
-Below is a collection of Vue **props** for the `AwAvatar` component.
-<!-- @vuese:AwAvatar:props:start -->
-|Name|Description|Type|Required|Default|
-|---|---|---|---|---|
-|src|Full URL to the picture|`String`|`false`|-|
-|name|User name|`String`|`false`|-|
-|size|Size of the image|`Number` /  `String`|`false`|36|
-|type|Type of the rendered image.|`String`|`false`|initials , empty, no-img|
-|isColored|To bring the color to the rounded background.|`Boolean`|`false`|-|
-
-<!-- @vuese:AwAvatar:props:end -->
-
-
-## Slots
-<!-- @vuese:AwAvatar:slots:start -->
-|Name|Description|Default Slot Content|
-|---|---|---|
-|default|-|-|
-|no-img|-|-|
-
-<!-- @vuese:AwAvatar:slots:end -->
-                            

package/docs/aw-badge.md

@@ -1,32 +0,0 @@
----
-metaTitle: AwBadge | Awes.io
-meta:
-  - name: description
-    content: The <AwBadge /> component is used to render badges - UI Vue component for Awes.io.
-title: Badge
----
-# AwBadge
-
-## Props
-
-<!-- @vuese:AwBadge:props:start -->
-|Name|Description|Type|Required|Default|
-|---|---|---|---|---|
-|text|Text inside badge|`String` /  `Number`|`false`|-|
-|icon|Icon name inside badge. See AwIcon component for available names|`String`|`false`|-|
-|color|Badge background color|`String`|`false`|page-bg|
-|hideIfEmpty|When set to `true`, badge will hide if text is empty or 0|`Boolean`|`false`|-|
-
-<!-- @vuese:AwBadge:props:end -->
-
-
-## Slots
-
-<!-- @vuese:AwBadge:slots:start -->
-|Name|Description|Default Slot Content|
-|---|---|---|
-|default|Content passed to component|-|
-
-<!-- @vuese:AwBadge:slots:end -->
-
-

package/docs/aw-button-nav.md

@@ -1,44 +0,0 @@
----
-metaTitle: Button nav сomponent | Awes.io
-meta:
-  - name: description
-    content: The <AwButtonNav /> component is used to render Button nav - UI Vue component for Awes.io.
-title: Button nav
----
-# Button nav
-
-The `AwButtonNav` component is used to render Button nav.
-
-
-## Usage
-Several examples how you can use `AwButtonNav`.
-
-### Live Example
-<iframe
-     src='https://codesandbox.io/embed/github/awes-io/client/tree/master/examples/basic-ui?autoresize=1&fontsize=14&hidenavigation=1&initialpath=%2Faw-button-nav&module=%2Fpages%2Faw-button-nav.vue&theme=dark&view=editor'
-     style='width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;'
-     title='basic-ui'
-     allow='geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb'
-     sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
-   ></iframe>
-
-## API
-Select your desired component from below and see the available props, slots, events and functions.
-
-### Props
-Below is a collection of Vue **props** for the `AwButtonNav` component.
-<!-- @vuese:AwButtonNav:props:start -->
-
-<!-- @vuese:AwButtonNav:props:end -->
-
-### Slots
-Below is a collection of Vue **slots** for the `AwButtonNav` component.
-<!-- @vuese:AwButtonNav:slots:start -->
-
-<!-- @vuese:AwButtonNav:slots:end -->
-
-### Events
-Below is a collection of Vue **events** for the `AwButtonNav` component.
-<!-- @vuese:AwButtonNav:events:start -->
-
-<!-- @vuese:AwButtonNav:events:end -->

package/docs/aw-button.md

@@ -1,50 +0,0 @@
----
-metaTitle: Button сomponent | Awes.io
-meta:
-  - name: description
-    content: The <AwButton /> component is used to render Button - UI Vue component for Awes.io.
-title: Button
----
-# Button
-
-The `AwButton` component is used to render Button.
-
-
-## Usage
-Several examples how you can use `AwButton`.
-
-### Live Example
-<iframe
-     src='https://codesandbox.io/embed/github/awes-io/client/tree/master/examples/basic-ui?autoresize=1&fontsize=14&hidenavigation=1&initialpath=%2Faw-button&module=%2Fpages%2Faw-button.vue&theme=dark&view=editor'
-     style='width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;'
-     title='basic-ui'
-     allow='geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb'
-     sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
-   ></iframe>
-
-## API
-Select your desired component from below and see the available props, slots, events and functions.
-
-### Props
-Below is a collection of Vue **props** for the `AwButton` component.
-<!-- @vuese:AwButton:props:start -->
-|Name|Description|Type|Required|Default|
-|---|---|---|---|---|
-|size|Possible values: 'sm', 'md', 'lg'|`String`|`false`|-|
-|color|Background color of button. Possible values: 'info', 'success', 'warning', 'error'|`String`|`false`|-|
-|theme|Possible values: outline, ghost|`String`|`false`|-|
-|icon|Name of icon in button. Icon placed before text|`String`|`false`|-|
-|loading|Indicates if loader spinner is shown|`Boolean` /  `String`|`false`|-|
-|contentClass|CSS class for content wrapper|`String`|`false`|-|
-|active|Active state|`Boolean`|`false`|-|
-
-<!-- @vuese:AwButton:props:end -->
-
-### Slots
-Below is a collection of Vue **slots** for the `AwButton` component.
-<!-- @vuese:AwButton:slots:start -->
-|Name|Description|Default Slot Content|
-|---|---|---|
-|default|-|-|
-
-<!-- @vuese:AwButton:slots:end -->

package/docs/aw-calendar-days.md

@@ -1,46 +0,0 @@
----
-metaTitle: Calendar Days | Awes.io
-meta:
-  - name: description
-    content: The <AwCalendarDays /> component is used to render Button - UI Vue component for Awes.io.
-title: Calendar Days
----
-# Calendar Days
-
-The `AwCalendarDays` component is used to render days for calendar.
-
-
-## Props
-
-<!-- @vuese:AwCalendarDays:props:start -->
-|Name|Description|Type|Required|Default|
-|---|---|---|---|---|
-|year|-|`Number`|`false`|2020|
-|month|-|`Number`|`false`|2|
-|firstDay|-|`Number`|`false`|1|
-|weekdays|-|`Array`|`false`|-|
-|disabledDays|-|`Function`|`false`|-|
-|selected|-|`Object` /  `Date` /  `Array`|`false`|-|
-
-<!-- @vuese:AwCalendarDays:props:end -->
-
-## Events
-
-<!-- @vuese:AwCalendarDays:events:start -->
-|Event Name|Description|Parameters|
-|---|---|---|
-|click:date|-|-|
-
-<!-- @vuese:AwCalendarDays:events:end -->
-
-## Slots
-
-<!-- @vuese:AwCalendarDays:slots:start -->
-|Name|Description|Default Slot Content|
-|---|---|---|
-|before|-|-|
-|default|-|-|
-|after|-|-|
-
-<!-- @vuese:AwCalendarDays:slots:end -->
-

package/docs/aw-calendar-nav.md

@@ -1,25 +0,0 @@
----
-metaTitle: Calendar Nav | Awes.io
-meta:
-  - name: description
-    content: The <AwCalendarDays /> component is used to render Button - UI Vue component for Awes.io.
-title: Calendar Nav
----
-# Calendar Nav
-
-The `AwCalendarNav` component is used to render navigation for calendar.
-
-
-## Props
-
-<!-- @vuese:AwCalendarNav:props:start -->
-|Name|Description|Type|Required|Default|
-|---|---|---|---|---|
-|year|-|`Number`|`false`|-|
-|month|-|`Number`|`false`|-|
-|months|-|`Array`|`false`|-|
-|disabledPrev|-|`Boolean`|`false`|-|
-|disabledNext|-|`Boolean`|`false`|-|
-
-<!-- @vuese:AwCalendarNav:props:end -->
-

package/docs/aw-calendar-view.md

@@ -1,12 +0,0 @@
-# [name]
-
-## Events
-
-<!-- @vuese:[name]:events:start -->
-|Event Name|Description|Parameters|
-|---|---|---|
-|click:date|-|-|
-
-<!-- @vuese:[name]:events:end -->
-
-