@community-release/nx-ui 0.0.6 → 0.0.7

package/dist/module.d.mts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -1,2 +1,7 @@
-export * from "E:/Work/Programming/Projects/nx-ui/src/module";
-export { default } from "E:/Work/Programming/Projects/nx-ui/src/module";
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui",
   "configKey": "ui",
-  "version": "0.0.6"
+  "version": "0.0.7"
 }

package/dist/module.mjs

@@ -1,12 +1,233 @@
-import jiti from "file:///E:/Work/Programming/Projects/nx-ui/node_modules/jiti/lib/index.js";
+import { defineNuxtModule, createResolver, addTemplate, addPlugin, addComponentsDir, addComponent } from '@nuxt/kit';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-/** @type {import("E:/Work/Programming/Projects/nx-ui/src/module")} */
-const _module = jiti(null, {
-  "esmResolve": true,
-  "interopDefault": true,
-  "alias": {
-    "@community-release/nx-ui": "E:/Work/Programming/Projects/nx-ui"
+
+
+// -- Unbuild CommonJS Shims --
+import __cjs_url__ from 'url';
+import __cjs_path__ from 'path';
+import __cjs_mod__ from 'module';
+const __filename = __cjs_url__.fileURLToPath(import.meta.url);
+const __dirname = __cjs_path__.dirname(__filename);
+const require = __cjs_mod__.createRequire(import.meta.url);
+const defaultStyle = {
+  "content-width": "1400px",
+  // website content width
+  // Border radius
+  "border-radius-big": "18px",
+  "border-radius-default": "8px",
+  "border-radius-small": "3px",
+  // Inputs height
+  "input-height-large": "60px",
+  "input-height-big": "52px",
+  "input-height-medium": "48px",
+  "input-height-default": "42px",
+  "input-height-small": "32px",
+  "input-height-mini": "24px",
+  // Line height
+  "text-line-height": 1.4,
+  // Colors
+  "color-text": "rgba(0,0,0,0.8)",
+  "color-header-text": "rgba(0,0,0,1)",
+  "color-primary": "blue",
+  "color-primary-text": "blue",
+  "color-text-on-primary": "#fff",
+  "color-secondary": "cyan",
+  "color-secondary-text": "cyan",
+  "color-text-on-secondary": "#fff",
+  "color-gray": "rgba(56,60,68, 0.8)",
+  "color-gray-text": "rgba(56,60,68, 1)",
+  "color-text-on-gray": "#fff",
+  "color-red": "red",
+  "color-red-text": "var(--color-red)",
+  "color-text-on-red": "#fff",
+  "color-error": "var(--color-red)",
+  "color-surface": "#ccc",
+  "color-surface-text": "#aaa",
+  "color-text-on-surface": "var(--color-text)",
+  "color-neutral": "#ccc",
+  "color-neutral-text": "#aaa",
+  "color-text-on-neutral": "var(--color-text)",
+  "color-bg": "#fff",
+  "color-bg-text": "#fff",
+  "color-text-on-bg": "var(--color-text)",
+  "color-border": "#e8e8e8",
+  "color-border-bolder": "#e0e0e0",
+  // Text
+  "text-large": "32px",
+  "text-big": "24px",
+  "text-medium": "18px",
+  "text-default": "16px",
+  "text-small": "14px",
+  "text-mini": "12px",
+  // Font
+  "font-text": '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";',
+  "font-header": "var(--font-text)",
+  "font-accent": "var(--font-text)",
+  "font-icons": "FontAwesome",
+  "font-mono": "Consolas, SF Mono",
+  // Font weight
+  "font-weight-medium": "600",
+  // Padding
+  "space-extra-large": "100px",
+  "space-large": "50px",
+  "space-big": "32px",
+  "space-medium": "25px",
+  "space-default": "20px",
+  "space-small": "15px",
+  "space-mini": "10px",
+  "space-micro": "5px",
+  // Box shadow
+  "bs-1": "0 3px 8px rgba(13,72,177, 0.03), 0 6px 16px rgba(13,72,177, 0.03)",
+  "bs-2": "0 1px 3px rgba(13,72,177, 0.07), 0 1px 2px rgba(13,72,177, 0.1)",
+  "bs-3": "0 0.4px 0.6px rgba(13,72,177, 0.019), 0 1px 1.6px rgba(13,72,177, 0.027), 0 2.1px 3.2px rgba(13,72,177, 0.033),  4.4px 6.6px rgba(13,72,177, 0.041), 0 12px 18px rgba(13,72,177, 0.06)",
+  // Animation
+  "ani-time": "0.3s",
+  "ani-ease": "ease"
+};
+
+const generateStyle = (options) => {
+  let result = ":root {";
+  const userStyle = options?.style ? options.style : {};
+  for (let key in userStyle) {
+    if (key in defaultStyle)
+      defaultStyle[key] = userStyle[key];
+    else
+      console.error(`UI: Unknown css variable defined in ui config "${key}"`);
+  }
+  for (let key in defaultStyle) {
+    result += `--ui-${key}:${defaultStyle[key]};`;
+  }
+  result += "}";
+  return result;
+};
+
+const defaultComponentsStyle = {
+  accordion: {
+    "title-font-size": "var(--ui-text-medium)",
+    "text-font-size": "var(--ui-text-default)"
+  },
+  button: {
+    "border-radius": "var(--ui-input-height-large)"
+  }
+};
+
+const generateComponentsDefaults = (options) => {
+  let result = "";
+  const components = options?.components ? options.components : {};
+  for (let name in defaultComponentsStyle) {
+    const style = Object.assign(defaultComponentsStyle[name], components[name] ? components[name] : {});
+    for (let prop in style) {
+      result += `@ui-${name}-${prop}: ${style[prop]};
+`;
+    }
+  }
+  return result;
+};
+
+const __dirname__ = path.dirname(fileURLToPath(import.meta.url));
+const readComponentsProps = (options = {}) => {
+  const dirComponents = path.resolve(__dirname__, "../runtime/components/");
+  const result = {};
+  let files = fs.readdirSync(dirComponents, { recursive: true });
+  files = files.filter((v) => v.indexOf("props.json") !== -1);
+  for (let file of files) {
+    const componentName = file.split("\\")[0];
+    const propsJSON = fs.readFileSync(path.resolve(dirComponents, file), { encoding: "utf-8" });
+    const props = JSON.parse(propsJSON);
+    result[componentName] = props;
+  }
+  if (options?.componentsProps) {
+    for (let componentName in options.componentsProps) {
+      if (!(componentName in result)) {
+        console.error(`Reading user defined components props error: component "${componentName}" does not exist`);
+        continue;
+      }
+      const userDefinedProps = options.componentsProps[componentName];
+      for (let prop in userDefinedProps) {
+        if (!(prop in result[componentName])) {
+          console.error(`Reading user defined components props error: prop "${prop}" does not exist in "${componentName}"`);
+          continue;
+        }
+        result[componentName][prop] = userDefinedProps[prop];
+      }
+    }
+  }
+  return result;
+};
+
+const module = defineNuxtModule({
+  meta: {
+    name: "ui",
+    configKey: "ui"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    addTemplate({
+      filename: "ui.style.mjs",
+      getContents: () => "export default " + JSON.stringify(generateStyle(options))
+      //write: true
+    });
+    addTemplate({
+      dst: "./src/runtime/components/styles/components.less",
+      write: true,
+      filename: "components.less",
+      getContents: () => generateComponentsDefaults(options)
+    });
+    const componentsProps = readComponentsProps(options);
+    for (let componentName in componentsProps) {
+      addTemplate({
+        filename: `ui.${componentName}.mjs`,
+        // @ts-ignore
+        getContents: () => "export default " + JSON.stringify(componentsProps[componentName])
+      });
+    }
+    addPlugin({
+      src: resolve("./runtime/plugins/variables"),
+      mode: "server"
+    });
+    addPlugin({
+      src: resolve("./runtime/plugins/methods"),
+      mode: "all"
+    });
+    addComponentsDir({
+      path: resolve("./runtime/components"),
+      // watch: true,
+      prefix: "ui",
+      pathPrefix: false,
+      global: false,
+      extensions: ["vue"]
+    });
+    addComponent({
+      filePath: resolve("./runtime/components/map/zoom"),
+      name: "ui-map-zoom",
+      global: false
+    });
+    addComponent({
+      filePath: resolve("./runtime/components/map/device-zoom-switch"),
+      name: "ui-map-device-zoom-switch",
+      global: false
+    });
+    addComponent({
+      filePath: resolve("./runtime/components/map/location/index"),
+      name: "ui-map-location",
+      global: false
+    });
+    addComponent({
+      filePath: resolve("./runtime/components/map/location/list"),
+      name: "ui-map-location-list",
+      global: false
+    });
+    addComponent({
+      filePath: resolve("./runtime/components/map/location/nearest"),
+      name: "ui-map-location-nearest",
+      global: false
+    });
   }
-})("E:/Work/Programming/Projects/nx-ui/src/module.ts");
+});
 
-export default _module;
+export { module as default };

package/dist/runtime/components/accordion.vue

@@ -0,0 +1,221 @@
+<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>

package/dist/runtime/components/animated-number/animateValue.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Animate value
+ * @param {Function} callback
+ * @param {number} start
+ * @param {number} end
+ * @param {number} duration
+ * @example
+ *
+ * animateValue((value) => {
+ *     console.log('value', value);
+ * }, 0, 100, 10000);
+ */
+export default function _default(callback: Function, start: number, end: number, duration: number): void;

package/dist/runtime/components/animated-number/animateValue.mjs

@@ -0,0 +1,56 @@
+// function outSine(n) {
+// 	return Math.sin(n * Math.PI / 2);
+// };
+
+// function inOutSine(n) {
+// 	return .5 * (1 - Math.cos(Math.PI * n));
+// };
+
+// function outCube(n) {
+// 	return --n * n * n + 1;
+// };
+
+// function outQuad(n){
+// 	return n * (2 - n);
+// };
+
+// function outQuart(n) {
+// 	return 1 - (--n * n * n * n);
+// };
+
+function inOutQuart(n) {
+	n *= 2;
+	if (n < 1) return 0.5 * n * n * n * n;
+	return -0.5 * ((n -= 2) * n * n * n - 2);
+};
+
+/**
+ * Animate value
+ * @param {Function} callback 
+ * @param {number} start 
+ * @param {number} end 
+ * @param {number} duration 
+ * @example
+ * 
+ * animateValue((value) => {
+ *     console.log('value', value);
+ * }, 0, 100, 10000);
+ */
+export default function(callback, start, end, duration) {
+	const fn = inOutQuart;
+	let startTimestamp = null; 
+	let val = start; 
+
+	const step = (timestamp) => {
+		if (!startTimestamp) startTimestamp = timestamp;
+
+		const progress = fn(Math.min((timestamp - startTimestamp) / duration, 1));
+
+		val = Math.floor(progress * (end - start) + start);
+		callback(val);
+
+		if (progress < 1) requestAnimationFrame(step);
+	};
+
+	requestAnimationFrame(step);
+}

package/dist/runtime/components/animated-number/index.vue

@@ -0,0 +1,43 @@
+<template>
+	<span class="component-ui-animated-number">
+		{{ val }}
+	</span>
+</template>
+
+<script setup>
+// Imports
+	import { ref, watch } from 'vue';
+	import animateValue from './animateValue';
+
+// Data
+	const props = defineProps({
+		n: [Number, String],
+		active: Boolean,
+		delay: {
+			type: Number,
+			default: 0
+		},
+		duration: {
+			type: Number,
+			default: 4000
+		},
+	});
+
+	const val = ref(0);
+	let activated = false;
+
+	watch(() => props.active, (v) => {
+		if (!v || activated) return;
+
+		activated = true;
+
+		setTimeout(() => {
+			animateValue(
+				(v) => { val.value = v; },
+				0,
+				props.n,
+				props.duration
+			);
+		}, props.delay);
+	}, { immediate: true });
+</script>