@community-release/nx-ui 0.0.19 → 0.0.20

package/dist/module.d.mts

@@ -192,6 +192,11 @@ var module = defineNuxtModule({
       global: false,
       extensions: ["vue"]
     });
+    addComponent({
+      filePath: resolve("./runtime/components/accordion/item"),
+      name: "ui-accordion-item",
+      global: false
+    });
     addComponent({
       filePath: resolve("./runtime/components/map/zoom"),
       name: "ui-map-zoom",

package/dist/module.d.ts

@@ -192,6 +192,11 @@ var module = defineNuxtModule({
       global: false,
       extensions: ["vue"]
     });
+    addComponent({
+      filePath: resolve("./runtime/components/accordion/item"),
+      name: "ui-accordion-item",
+      global: false
+    });
     addComponent({
       filePath: resolve("./runtime/components/map/zoom"),
       name: "ui-map-zoom",

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui",
   "configKey": "ui",
-  "version": "0.0.19"
+  "version": "0.0.20"
 }

package/dist/module.mjs

@@ -192,6 +192,11 @@ const module = defineNuxtModule({
       global: false,
       extensions: ["vue"]
     });
+    addComponent({
+      filePath: resolve("./runtime/components/accordion/item"),
+      name: "ui-accordion-item",
+      global: false
+    });
     addComponent({
       filePath: resolve("./runtime/components/map/zoom"),
       name: "ui-map-zoom",

package/dist/runtime/components/accordion/index.vue

@@ -0,0 +1,73 @@
+<template>
+	<section class="component-ui-accordion">
+		<ui-accordion-item v-if="list.length" v-for="item of list" :title="item.title">
+			{{ item.text }}
+		</ui-accordion-item>
+		<slot></slot>
+	</section>
+</template>
+
+<script setup>
+// Imports
+	import { ref, computed, provide } from 'vue';
+	import comProps from '#build/ui.accordion.mjs';
+
+// Data
+	const props = defineProps({
+		/** Icon for light theme or light & dark theme*/
+		icon: {
+			type: String,
+			default: comProps.icon
+		},
+		/** Icon for dark theme */
+		iconDark: {
+			type: String,
+			default: comProps.iconDark
+		},
+		/**
+		 * Accordion elements list, AccordionListItem = {title: '', text: ''}
+		 * @values AccordionListItem[]
+		 */
+		list: {
+			type: Array,
+			default: () => []
+		},
+		/**
+		 * Slide that is active(open) by default, null = all closed
+		 * @values 1, 2, 3, 1000, null
+		 */
+		active: {
+			type: [Number, null],
+			default: 0
+		}
+	});
+
+	const activeItem = ref(props.active);
+	const itemCounter = ref(0);
+
+	const iconLightComputed = computed(() => {
+		return props.icon !== '' ? `url(${props.icon})` : 'none';
+	});
+
+	const iconDarkComputed = computed(() => {
+		return props.iconDark !== '' ? `url(${props.iconDark})` : iconLightComputed.value;
+	});
+
+	provide('accordionData', {
+		itemCounter,
+		activeItem,
+		haveIcon: !!props.icon
+	});
+</script>
+
+<style lang="less">
+// Themes settings
+.theme-light .component-ui-accordion .icon,
+.theme-lowvision .component-ui-accordion .icon {
+	background-image: v-bind(iconLightComputed);
+}
+
+.theme-dark .component-ui-accordion .icon {
+	background-image: v-bind(iconDarkComputed);
+}
+</style>

package/dist/runtime/components/accordion/item.vue

@@ -0,0 +1,191 @@
+<template>
+	<section class="component-ui-accordion-item" 
+		:class="{'tag-active': accordionData.activeItem.value === id, 'tag-icon': accordionData.haveIcon}"
+	>
+		<div class="header" @click="accordionData.activeItem.value = id">
+			<i class="icon"></i>
+			<div class="title">{{ title }}</div>
+			<div class="btn-toggle"></div>
+		</div>
+		<div class="text">
+			<div><slot /></div>
+		</div>
+	</section>
+</template>
+
+<script setup>
+	// Import
+	import { inject } from 'vue'
+
+	// Data
+	const accordionData = inject('accordionData', null);
+	const props = defineProps({
+		title: String,
+		text: String,
+	});
+	const id = accordionData.itemCounter.value++;
+</script>
+
+<style lang="less">
+@import (less) '../styles/components.less';
+
+// Misc
+@com-icon-size: 30px;
+@com-icon-size-small: 26px;
+@com-btn-size: 20px;
+@com-btn-width: 2px;
+@com-btn-padding: 40px;
+@com-btn-padding-small: 35px;
+
+@com-ani-time: var(--ui-ani-time);
+@com-ani-ease: var(--ui-ani-ease);
+
+@com-text-line-height: var(--ui-text-line-height);
+
+// Padding
+@com-space-default: var(--ui-space-default);
+@com-space-small: var(--ui-space-small);
+@com-space-mini: var(--ui-space-mini);
+
+// Colors
+@com-color-border: var(--ui-color-border);
+@com-color-header-text: var(--ui-color-header-text);
+
+// Text
+@com-text-medium: var(--ui-text-medium);
+@com-text-default: var(--ui-text-default);
+
+// Font
+@com-font-header: var(--ui-font-header);
+
+.component-ui-accordion-item {
+	--ui-accordion-icon-size: 0;
+	--ui-accordion-btn-padding: @com-btn-padding;
+
+	padding-bottom: @com-space-small;
+	margin-top: @com-space-small;
+	border-bottom: 1px solid @com-color-border;
+	font-size: @com-text-medium;
+
+	.header {
+		position: relative;
+		padding: @com-space-small var(--ui-accordion-btn-padding) @com-space-small calc(var(--ui-accordion-icon-size) + @com-space-default);
+		margin-bottom: @com-space-mini;
+		cursor: pointer;
+	}
+
+	.icon,
+	.btn-toggle {
+		transform: translateY(-50%);
+		position: absolute;
+		top: 50%;
+		width: @com-icon-size;
+		height: @com-icon-size;
+		line-height: @com-icon-size;
+		text-align: center;
+	}
+
+	.icon {
+		left: 0;
+		background-position: center;
+		background-size: contain;
+	}
+
+	.title {
+		font-family: @com-font-header;
+		font-weight: 600;
+		color: @com-color-header-text;
+	}
+
+	.btn-toggle {
+		right: 0;
+
+		&:before,
+		&:after {
+			content: '';
+
+			transition: all @com-ani-time @com-ani-ease;
+			transform-origin: center;
+			position: absolute;
+			background: @com-color-header-text;
+		}
+
+		// |
+		&:before {
+			top: (@com-icon-size/2) - (@com-btn-size / 2);
+			left: (@com-icon-size/2) - (@com-btn-width / 2);
+			width: @com-btn-width;
+			height: @com-btn-size;
+		}
+
+		// —
+		&:after {
+			top: (@com-icon-size/2) - (@com-btn-width / 2);
+			left: (@com-icon-size/2) - (@com-btn-size / 2);
+			width: @com-btn-size;
+			height: @com-btn-width;
+		}
+	}
+
+	.text {
+		transition: grid-template-rows @com-ani-time @com-ani-ease;
+		display: grid;
+		grid-template-rows: 0fr;
+		line-height: @com-text-line-height;
+		font-size: @com-text-default;
+
+		div {
+			overflow: hidden;
+		}
+	}
+
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	// Active state
+	&.tag-active {
+		.text {
+			grid-template-rows: 1fr;
+		}
+
+		.btn-toggle {
+			&:before,
+			&:after {
+				transform: rotate(90deg);
+			}
+			&:after {
+				opacity: 0;
+			}
+		}
+	}
+
+	&.tag-icon {
+		// .header {
+		// 	position: relative;
+		// 	padding: @com-space-small var(--ui-accordion-btn-padding) @com-space-small calc(var(--ui-accordion-icon-size) + @com-space-default);
+		// 	margin-bottom: @com-space-mini;
+		// 	cursor: pointer;
+		// }
+		--ui-accordion-icon-size: @com-icon-size;
+	}
+}
+
+@media only screen and (max-width: 500px) {
+	.component-ui-accordion-item {
+		&.tag-icon {
+			--ui-accordion-icon-size: @com-icon-size-small;
+		}
+		//--ui-accordion-icon-size: @com-icon-size-small;
+		--ui-accordion-btn-padding: @com-btn-padding-small;
+
+		font-size: @com-text-default;
+
+		.icon {
+			width: 26px;
+			height: 26px;
+		}
+	}
+}
+</style>

package/dist/runtime/components/accordion/props.json

@@ -0,0 +1,4 @@
+{
+	"icon": "",
+	"iconDark": ""
+}

package/dist/runtime/components/button/index.vue.d.ts

@@ -1,81 +1,101 @@
-declare namespace _default {
-    namespace components {
-        export { UiImpulseIndicator };
-        export { UiLoading };
-    }
-    namespace props {
-        export namespace color {
-            export let type: StringConstructor;
-            let _default: any;
-            export { _default as default };
-        }
-        export namespace size {
-            let type_1: StringConstructor;
-            export { type_1 as type };
-            let _default_1: any;
-            export { _default_1 as default };
-        }
-        export namespace variant {
-            let type_2: StringConstructor;
-            export { type_2 as type };
-            let _default_2: any;
-            export { _default_2 as default };
-        }
-        export namespace shape {
-            let type_3: StringConstructor;
-            export { type_3 as type };
-            let _default_3: any;
-            export { _default_3 as default };
-        }
-        export namespace href {
-            let type_4: StringConstructor;
-            export { type_4 as type };
-            let _default_4: string;
-            export { _default_4 as default };
-        }
-        export namespace type_5 {
-            let type_6: StringConstructor;
-            export { type_6 as type };
-            let _default_5: string;
-            export { _default_5 as default };
-        }
-        export { type_5 as type };
-        export namespace block {
-            let type_7: BooleanConstructor;
-            export { type_7 as type };
-            let _default_6: boolean;
-            export { _default_6 as default };
-        }
-        export namespace loading {
-            let type_8: BooleanConstructor;
-            export { type_8 as type };
-            let _default_7: boolean;
-            export { _default_7 as default };
-        }
-        export namespace disabled {
-            let type_9: (BooleanConstructor | NumberConstructor)[];
-            export { type_9 as type };
-            let _default_8: boolean;
-            export { _default_8 as default };
-        }
-    }
-    function data(): {
-        impulse: boolean;
-    };
-    namespace computed {
-        function computedType(): any;
-        function classes(): string[];
-        function stylesHoverColor(): string;
-        function styles(): {
-            background: string;
-            color: string;
-        };
-        function buttonBgStyle(): {
-            background: string;
-        };
-    }
-    namespace methods {
-        function handleClick(e: any): void;
-    }
-}
+declare const _default: import("vue").DefineComponent<{
+    color: {
+        type: StringConstructor;
+        default: any;
+    };
+    size: {
+        type: StringConstructor;
+        default: any;
+    };
+    variant: {
+        type: StringConstructor;
+        default: any;
+    };
+    shape: {
+        type: StringConstructor;
+        default: any;
+    };
+    href: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+}, any, {
+    impulse: boolean;
+}, {
+    computedType(): any;
+    classes(): string[];
+    stylesHoverColor(): string;
+    styles(): {
+        background: string;
+        color: string;
+    };
+    buttonBgStyle(): {
+        background: string;
+    };
+}, {
+    handleClick(e: any): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: StringConstructor;
+        default: any;
+    };
+    size: {
+        type: StringConstructor;
+        default: any;
+    };
+    variant: {
+        type: StringConstructor;
+        default: any;
+    };
+    shape: {
+        type: StringConstructor;
+        default: any;
+    };
+    href: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+}>>, {
+    type: string;
+    loading: boolean;
+    color: string;
+    size: string;
+    variant: string;
+    shape: string;
+    href: string;
+    block: boolean;
+    disabled: number | boolean;
+}, {}>;
 export default _default;

package/dist/runtime/components/grid.vue.d.ts

@@ -1,56 +1,67 @@
-declare namespace _default {
-    namespace props {
-        namespace textAlign {
-            export let type: StringConstructor;
-            let _default: string;
-            export { _default as default };
-        }
-        namespace gap {
-            let type_1: (StringConstructor | ObjectConstructor)[];
-            export { type_1 as type };
-            let _default_1: string;
-            export { _default_1 as default };
-        }
-        namespace gridTemplateColumns {
-            let type_2: (StringConstructor | ObjectConstructor)[];
-            export { type_2 as type };
-            let _default_2: string;
-            export { _default_2 as default };
-        }
-        namespace gapTop {
-            let type_3: (StringConstructor | BooleanConstructor)[];
-            export { type_3 as type };
-            let _default_3: boolean;
-            export { _default_3 as default };
-        }
-        namespace gapBottom {
-            let type_4: (StringConstructor | BooleanConstructor)[];
-            export { type_4 as type };
-            let _default_4: boolean;
-            export { _default_4 as default };
-        }
-    }
-    function data(): {
-        timeout: null;
-        windowWidth: number;
-    };
-    namespace computed {
-        function getClasses(): string[];
-        function getStyle(): {
-            'grid-gap': () => any;
-            'grid-template-columns': () => any;
-            'padding-top': any;
-            'padding-bottom': any;
-        };
-        function computedItemMaxWidth(): number;
-        function computedGridTemplateColumns(): any;
-        function computedGap(): any;
-    }
-    namespace methods {
-        function handleResize(): void;
-        function onResize(): void;
-    }
-    function mounted(): void;
-    function beforeDestroy(): void;
-}
+declare const _default: import("vue").DefineComponent<{
+    textAlign: {
+        type: StringConstructor;
+        default: string;
+    };
+    gap: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    };
+    gridTemplateColumns: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    };
+    gapTop: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    gapBottom: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+}, any, {
+    timeout: null;
+    windowWidth: number;
+}, {
+    getClasses(): string[];
+    getStyle(): {
+        'grid-gap': any;
+        'grid-template-columns': any;
+        'padding-top': any;
+        'padding-bottom': any;
+    };
+    computedItemMaxWidth(): number;
+    computedGridTemplateColumns(): any;
+    computedGap(): any;
+}, {
+    handleResize(): void;
+    onResize(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    textAlign: {
+        type: StringConstructor;
+        default: string;
+    };
+    gap: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    };
+    gridTemplateColumns: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    };
+    gapTop: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    gapBottom: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+}>>, {
+    textAlign: string;
+    gap: string | Record<string, any>;
+    gridTemplateColumns: string | Record<string, any>;
+    gapTop: string | boolean;
+    gapBottom: string | boolean;
+}, {}>;
 export default _default;

package/dist/runtime/components/impulse-indicator.vue.d.ts

@@ -1,21 +1,18 @@
-declare namespace _default {
-    let name: string;
-    namespace props {
-        namespace impulse {
-            export let type: (ObjectConstructor | BooleanConstructor)[];
-            let _default: boolean;
-            export { _default as default };
-        }
-    }
-    function data(): {
-        impulseArray: never[];
+declare const _default: import("vue").DefineComponent<{
+    impulse: {
+        type: (ObjectConstructor | BooleanConstructor)[];
+        default: boolean;
     };
-    namespace watch {
-        function impulse(options: any): void;
-    }
-    namespace methods {
-        function addImpulse(options: any): void;
-    }
-    function mounted(): void;
-}
+}, any, {
+    impulseArray: never[];
+}, {}, {
+    addImpulse(options: any): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    impulse: {
+        type: (ObjectConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+}>>, {
+    impulse: boolean | Record<string, any>;
+}, {}>;
 export default _default;

package/dist/runtime/components/map/store.d.ts

@@ -16,31 +16,7 @@ export const useMapStore: import("pinia").StoreDefinition<"map", {
      * @param {string|number} id
      * @returns MapMarker
      */
-    getMarker(state: {
-        coord: never[];
-        zoom: number;
-        zoomMin: number;
-        zoomMax: number;
-        deviceZoom: boolean;
-        markerImage: string;
-        markerActiveImage: string;
-        markerDisabledImage: string;
-        markers: never[];
-        selectedMarker: null;
-        disabledMarkers: never[];
-    } & import("pinia").PiniaCustomStateProperties<{
-        coord: never[];
-        zoom: number;
-        zoomMin: number;
-        zoomMax: number;
-        deviceZoom: boolean;
-        markerImage: string;
-        markerActiveImage: string;
-        markerDisabledImage: string;
-        markers: never[];
-        selectedMarker: null;
-        disabledMarkers: never[];
-    }>): (id: any) => null;
+    getMarker(state: any): (id: any) => any;
 }, {
     /**
      * Set map zoom

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@community-release/nx-ui",
-    "version": "0.0.19",
+    "version": "0.0.20",
     "description": "nx-ui - Nuxt UI library",
     "repository": {
         "type": "git",

package/dist/runtime/components/accordion.vue

@@ -1,221 +0,0 @@
-<template>
-	<section class="component-ui-accordion">
-		<div v-for="(item, index) of list" class="item" :class="{'tag-active': activeItem === index}">
-			<div class="header" @click="toggle(index)">
-				<i class="icon"></i>
-				<div class="title">{{ item.title }}</div>
-				<div class="btn-toggle"></div>
-			</div>
-			<div class="text">
-				<div v-html="item.text"></div>
-			</div>
-		</div>
-	</section>
-</template>
-
-<script setup>
-// Imports
-	import { ref, computed } from 'vue'
-
-// Data
-	const props = defineProps({
-		/** Icon for light theme */
-		iconLight: {
-			type: String,
-		},
-		/** Icon for dark theme */
-		iconDark: {
-			type: String,
-		},
-		/**
-		 * Accordion elements list, AccordionListItem = {title: '', text: ''}
-		 * @values AccordionListItem[]
-		 */
-		list: {
-			type: Array,
-		},
-		/**
-		 * Slide that is active(open) by default, null = all closed
-		 * @values 1, 2, 3, 1000, null
-		 */
-		active: {
-			type: [Number, null],
-			default: 0
-		}
-	});
-
-	const activeItem = ref(props.active);
-
-	const iconLightComputed = computed(() => {
-		return props.iconLight ? `url(${props.iconLight})` : 'none';
-	});
-
-	const iconDarkComputed = computed(() => {
-		return props.iconDark ? `url(${props.iconDark})` : 'none';
-	});
-
-// Methods
-	function toggle(i) {
-		activeItem.value = activeItem.value === i ? null : i;
-	}
-</script>
-
-<style lang="less">
-@import (less) './styles/components.less';
-
-// Misc
-@com-icon-size: 30px;
-@com-btn-size: 20px;
-@com-btn-width: 2px;
-
-@com-ani-time: var(--ui-ani-time);
-@com-ani-ease: var(--ui-ani-ease);
-
-@com-text-line-height: var(--ui-text-line-height);
-
-// Padding
-@com-space-default: var(--ui-space-default);
-@com-space-small: var(--ui-space-small);
-@com-space-mini: var(--ui-space-mini);
-
-// Colors
-@com-color-border: var(--ui-color-border);
-@com-color-header-text: var(--ui-color-header-text);
-
-// Text
-@com-text-medium: var(--ui-text-medium);
-@com-text-default: var(--ui-text-default);
-
-// Font
-@com-font-header: var(--ui-font-header);
-
-.component-ui-accordion {
-	.item {
-		padding-bottom: @com-space-small;
-		margin-top: @com-space-small;
-		border-bottom: 1px solid @com-color-border;
-		font-size: @com-text-medium;
-
-		&:last-child {
-			border-bottom: none;
-		}
-
-		// Active state
-		&.tag-active {
-			.text {
-				grid-template-rows: 1fr;
-			}
-
-			.btn-toggle {
-				&:before,
-				&:after {
-					transform: rotate(90deg);
-				}
-				&:after {
-					opacity: 0;
-				}
-			}
-		}
-	}
-
-	.header {
-		position: relative;
-		padding: @com-space-small 40px @com-space-small calc(@com-icon-size + @com-space-default);
-		margin-bottom: @com-space-mini;
-		cursor: pointer;
-	}
-
-	.icon,
-	.btn-toggle {
-		transform: translateY(-50%);
-		position: absolute;
-		top: 50%;
-		width: @com-icon-size;
-		height: @com-icon-size;
-		line-height: @com-icon-size;
-		text-align: center;
-	}
-
-	.icon {
-		left: 0;
-		background-position: center;
-		background-size: contain;
-	}
-
-	.title {
-		font-family: @com-font-header;
-		font-weight: 600;
-		color: @com-color-header-text;
-	}
-
-	.btn-toggle {
-		right: 0;
-
-		&:before,
-		&:after {
-			content: '';
-
-			transition: all @com-ani-time @com-ani-ease;
-			transform-origin: center;
-			position: absolute;
-			background: @com-color-header-text;
-		}
-
-		// |
-		&:before {
-			top: (@com-icon-size/2) - (@com-btn-size / 2);
-			left: (@com-icon-size/2) - (@com-btn-width / 2);
-			width: @com-btn-width;
-			height: @com-btn-size;
-		}
-
-		// —
-		&:after {
-			top: (@com-icon-size/2) - (@com-btn-width / 2);
-			left: (@com-icon-size/2) - (@com-btn-size / 2);
-			width: @com-btn-size;
-			height: @com-btn-width;
-		}
-	}
-
-	.text {
-		transition: grid-template-rows @com-ani-time @com-ani-ease;
-		display: grid;
-		grid-template-rows: 0fr;
-		line-height: @com-text-line-height;
-		font-size: @com-text-default;
-
-		div {
-			overflow: hidden;
-		}
-	}
-}
-
-// Themes settings
-.theme-light .component-ui-accordion .icon,
-.theme-lowvision .component-ui-accordion .icon {
-	background-image: v-bind(iconLightComputed);
-}
-
-.theme-dark .component-ui-accordion .icon {
-	background-image: v-bind(iconDarkComputed);
-}
-
-
-@media only screen and (max-width: 500px) {
-	.component-ui-accordion {
-		.item {
-			font-size: @com-text-default;
-		}
-
-		.header {
-			padding: @com-space-small 35px @com-space-small calc(26 + @com-space-default);
-		}
-
-		.icon {
-			width: 26px;
-			height: 26px;
-		}
-	}
-}
-</style>