@community-release/nx-ui 0.0.18 → 0.0.20

package/dist/module.d.mts

@@ -1,7 +1,228 @@
-import * as _nuxt_schema from '@nuxt/schema';
+import { defineNuxtModule, createResolver, addTemplate, addPlugin, addComponentsDir, addComponent } from '@nuxt/kit';
+import fs from 'node:fs';
+import path from 'node:path';
 
-interface ModuleOptions {
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+var 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"
+};
 
-export { type ModuleOptions, _default as default };
+var 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;
+};
+
+var defaultComponentsStyle = {
+  accordion: {
+    "title-font-size": "var(--ui-text-medium)",
+    "text-font-size": "var(--ui-text-default)"
+  },
+  button: {
+    "border-radius": "var(--ui-input-height-large)"
+  }
+};
+
+var 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;
+};
+
+var readComponentsProps = (resolve, srcDir, options = {}) => {
+  const dirComponents = resolve(srcDir, "./runtime/components/");
+  const result = {};
+  let files = fs.readdirSync(dirComponents, { recursive: true, encoding: "utf-8" });
+  files = files.filter((v) => v.indexOf("props.json") !== -1);
+  for (let file of files) {
+    const componentName = file.split(path.sep)[0];
+    const propsJSON = fs.readFileSync(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;
+};
+
+var module = defineNuxtModule({
+  meta: {
+    name: "ui",
+    configKey: "ui"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const srcDir = resolve("./");
+    addTemplate({
+      filename: "ui.style.mjs",
+      getContents: () => "export default " + JSON.stringify(generateStyle(options))
+      //write: true
+    });
+    addTemplate({
+      dst: resolve("./runtime/components/styles/components.less"),
+      write: true,
+      filename: "components.less",
+      getContents: () => generateComponentsDefaults(options)
+    });
+    const componentsProps = readComponentsProps(resolve, srcDir, 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/accordion/item"),
+      name: "ui-accordion-item",
+      global: false
+    });
+    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
+    });
+  }
+});
+
+export { module as default };

package/dist/module.d.ts

@@ -1,7 +1,228 @@
-import * as _nuxt_schema from '@nuxt/schema';
+import { defineNuxtModule, createResolver, addTemplate, addPlugin, addComponentsDir, addComponent } from '@nuxt/kit';
+import fs from 'node:fs';
+import path from 'node:path';
 
-interface ModuleOptions {
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+var 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"
+};
 
-export { type ModuleOptions, _default as default };
+var 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;
+};
+
+var defaultComponentsStyle = {
+  accordion: {
+    "title-font-size": "var(--ui-text-medium)",
+    "text-font-size": "var(--ui-text-default)"
+  },
+  button: {
+    "border-radius": "var(--ui-input-height-large)"
+  }
+};
+
+var 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;
+};
+
+var readComponentsProps = (resolve, srcDir, options = {}) => {
+  const dirComponents = resolve(srcDir, "./runtime/components/");
+  const result = {};
+  let files = fs.readdirSync(dirComponents, { recursive: true, encoding: "utf-8" });
+  files = files.filter((v) => v.indexOf("props.json") !== -1);
+  for (let file of files) {
+    const componentName = file.split(path.sep)[0];
+    const propsJSON = fs.readFileSync(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;
+};
+
+var module = defineNuxtModule({
+  meta: {
+    name: "ui",
+    configKey: "ui"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const srcDir = resolve("./");
+    addTemplate({
+      filename: "ui.style.mjs",
+      getContents: () => "export default " + JSON.stringify(generateStyle(options))
+      //write: true
+    });
+    addTemplate({
+      dst: resolve("./runtime/components/styles/components.less"),
+      write: true,
+      filename: "components.less",
+      getContents: () => generateComponentsDefaults(options)
+    });
+    const componentsProps = readComponentsProps(resolve, srcDir, 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/accordion/item"),
+      name: "ui-accordion-item",
+      global: false
+    });
+    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
+    });
+  }
+});
+
+export { module as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -120,7 +120,7 @@ const generateComponentsDefaults = (options) => {
 const readComponentsProps = (resolve, srcDir, options = {}) => {
   const dirComponents = resolve(srcDir, "./runtime/components/");
   const result = {};
-  let files = fs.readdirSync(dirComponents, { recursive: true });
+  let files = fs.readdirSync(dirComponents, { recursive: true, encoding: "utf-8" });
   files = files.filter((v) => v.indexOf("props.json") !== -1);
   for (let file of files) {
     const componentName = file.split(path.sep)[0];
@@ -169,7 +169,6 @@ const module = defineNuxtModule({
       getContents: () => generateComponentsDefaults(options)
     });
     const componentsProps = readComponentsProps(resolve, srcDir, options);
-    console.log("nx-ui componentsProps", componentsProps);
     for (let componentName in componentsProps) {
       addTemplate({
         filename: `ui.${componentName}.mjs`,
@@ -193,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>