@community-release/nx-ui 0.0.4 → 0.0.7

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

@@ -0,0 +1,166 @@
+<template>
+	<section class="component-ui-textarea" :class="classes" @click="refInput.focus()">
+		<textarea
+			ref="refInput"
+			:value="modelValue"
+			:placeholder="placeholder" 
+			:disabled="disabled" 
+
+			@change="updateValue($event.target.value)"
+			@input="updateValue($event.target.value)"
+			@blur="handleBlur($event.target.value)"
+			@keyup.enter="updateValue($event.target.value, true, true)"
+
+			@focus="haveFocus = true"
+
+			formnovalidate
+			spellcheck="false"
+		>
+		</textarea>
+	</section>
+</template>
+
+<script setup>
+// Imports
+	import { ref, computed } from 'vue';
+	import comProps from '#build/ui.textarea.mjs';
+
+// Misc
+	const emit = defineEmits(['input', 'enter', 'blur', 'update:modelValue']);
+
+// Data
+	const props = defineProps({
+		placeholder: {
+			default: comProps.placeholder,
+		},
+		shape: {
+			type: String,
+			default: comProps.shape,
+		},
+		modelValue: {
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		resize: {
+			type: String,
+			default: 'on',
+		},
+	});
+
+	const refInput = ref(null);
+	const haveFocus = ref(false);
+
+	const classes = computed(() => {
+		const ar = [
+			`tag-resize-${props.resize}`
+		];
+
+		if (props.modelValue !== '') ar.push('tag-not-empty');
+		if (haveFocus.value) ar.push('tag-focus');
+		if (props.disabled) ar.push('tag-disabled');
+		if (props.shape) ar.push(`tag-shape-${props.shape}`);
+
+		return ar;
+	});
+
+// Methods
+	function updateValue(value, doTrim = false, submit = false) {
+		const validValue = doTrim ? value.trim() : value;
+
+		if (value !== validValue)
+			refInput.value.value = validValue;
+
+		emit('update:modelValue', validValue);
+
+		if (submit) emit('enter', validValue);
+	}
+
+	function handleBlur(v) {
+		haveFocus.value = false;
+
+		emit('blur', v);
+		updateValue(v);
+	}
+</script>
+
+<style lang="less">
+// Misc
+@com-ani-ease: var(--ui-ani-ease);
+
+// Border radius
+@com-border-radius-default: var(--ui-border-radius-default);
+@com-border-radius-default-big: var(--ui-border-radius-big);
+
+// Colors
+@com-color-primary: var(--ui-color-primary);
+@com-color-bg: var(--ui-color-bg);
+@com-color-border-bolder: var(--ui-color-border-bolder);
+@com-color-header-text: var(--ui-color-header-text);
+@com-color-gray-text: var(--ui-color-gray-text);
+
+// Padding
+@com-space-default: var(--ui-space-default);
+@com-space-mini: var(--ui-space-mini);
+@com-space-small: var(--ui-space-small);
+
+// Font
+@com-font-text: var(--ui-font-text);
+
+// Text size
+@com-text-default: var(--ui-text-default);
+@com-text-small: var(--ui-text-small);
+
+.component-ui-textarea {
+	position: relative;
+	cursor: text;
+
+	textarea {
+		box-sizing: border-box;
+		
+		display: block;
+		padding: @com-space-mini;
+		width: 100%;
+		height: 100px;
+		
+		font-family: @com-font-text;
+		font-size: @com-text-default;
+		color: @com-color-header-text;
+
+		border: 1px solid @com-color-border-bolder;
+		border-radius: @com-border-radius-default;
+		background:  @com-color-bg;
+	}
+
+	// Resize
+	&.tag-resize-on textarea { resize: vertical; }
+	&.tag-resize-off textarea { resize: none; }
+	&.tag-resize-both textarea { resize: both; }
+
+	// Shapes
+	&.tag-shape-round-square textarea {
+		border-radius: @com-border-radius-default-big;
+	}
+	&.tag-shape-square textarea {
+		border-radius: 0;
+	}
+
+	// Disabled
+	&.tag-disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+
+		textarea {
+			cursor: not-allowed;
+		}
+	}
+
+	// Focus
+	&.tag-focus textarea {
+		border-color: @com-color-primary;
+		outline: 1px solid @com-color-primary;
+	}
+}
+</style>

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

@@ -0,0 +1,4 @@
+{
+	"placeholder": "",
+	"shape": ""
+}

package/dist/runtime/components/tooltip.vue

@@ -0,0 +1,137 @@
+<template>
+	<div class="component-ui component-ui-tooltip" :class="classes" @click="requestHide">
+		<slot></slot>
+	</div>
+</template>
+
+<script setup>
+// Imports
+	import { computed, watch } from 'vue';
+
+// Data
+	const props = defineProps({
+		modelValue: {
+			default: false,
+		},
+		location: {
+			type: String,
+			default: 'top'
+		},
+		textColor: {
+			type: String,
+			default: 'var(--ui-color-text-on-surface)'
+		},
+		bg: {
+			type: String,
+			default: 'var(--ui-color-surface)'
+		}
+	});
+
+	const emit = defineEmits(['update:modelValue']);
+
+	let t; // timeout
+
+	const classes = computed(() => {
+		const result = [`tag-location-${props.location}`];
+
+		if (props.modelValue) result.push('tag-active');
+
+		return result;
+	});
+
+	watch(() => props.modelValue, (v) => {
+		if (v) 
+			show(); 
+		else
+			clearTimeout(t);
+	});
+
+// Methods
+	function show() {
+		clearTimeout(t);
+		t = setTimeout(() => {
+			requestHide();
+		}, 5000);
+	}
+
+	function requestHide() {
+		emit('update:modelValue', false);
+	}
+</script>
+
+<style lang="less">
+@com-ani-time: var(--ui-ani-time);
+@com-ani-ease: var(--ui-ani-ease);
+
+@com-space-small: var(--ui-space-small);
+@com-space-mini: var(--ui-space-mini);
+
+@com-text-small: var(--ui-text-small);
+
+@com-color-border-bolder: var(--ui-color-border-bolder);
+
+@com-border-radius-default: var(--ui-border-radius-default);
+@com-bs-1: var(--ui-bs-1);
+
+.component-ui-tooltip {
+	--ui-tooltip-text-color: v-bind(textColor);
+	--ui-tooltip-bg: v-bind(bg);
+
+	transition: all @com-ani-time @com-ani-ease;
+
+	opacity: 0;
+	visibility: hidden;
+	position: absolute;
+	padding: @com-space-mini;
+	min-width: 200px;
+	line-height: 1.3;
+	font-size: @com-text-small;
+	color: var(--ui-tooltip-text-color);
+	background: var(--ui-tooltip-bg);
+	border-radius: @com-border-radius-default;
+	border: 1px solid @com-color-border-bolder;
+	box-shadow: @com-bs-1;
+
+	&:after {
+		content: '';
+
+		position: absolute;
+		width: 0;
+		height: 0;
+		border-style: solid;
+	}
+
+	&.tag-location-top {
+		transform: translate3d(-50%, calc(@com-space-small * -1), 0);
+		bottom: 100%;
+		left: 50%;
+
+		&:after {
+			transform: translate3d(-50%, 0, 0);
+			left: 50%;
+			top: 100%;
+			border-width: 10px 8px 0 8px;
+			border-color: @com-color-border-bolder transparent transparent transparent;
+		}
+	}
+
+	&.tag-location-left {
+		transform: translate3d(calc(@com-space-small * -1), -50%, 0);
+		top: 50%;
+		right: 100%;
+
+		&:after {
+			transform: translate3d(0, -50%, 0);
+			left: 100%;
+			top: 50%;
+			border-width: 8px 0 8px 10px;
+			border-color: transparent transparent transparent @com-color-border-bolder;
+		}
+	}
+
+	&.tag-active {
+		opacity: 1;
+		visibility: visible;
+	}
+}
+</style>

package/dist/runtime/plugins/methods.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/methods.mjs

@@ -0,0 +1,20 @@
+import { defineNuxtPlugin } from "#app";
+import { useUINoticeStore } from "../components/notice/store.mjs";
+export default defineNuxtPlugin(function(nuxt) {
+  const noticeStore = useUINoticeStore();
+  return {
+    provide: {
+      showNotice(duration, templateComponent, templateProps) {
+        const id = noticeStore.add({
+          duration,
+          templateComponent,
+          templateProps
+        });
+        return id;
+      },
+      hideNotice(id) {
+        noticeStore.remove(id);
+      }
+    }
+  };
+});

package/dist/runtime/plugins/variables.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/variables.mjs

@@ -0,0 +1,17 @@
+import { computed } from "vue";
+import { defineNuxtPlugin } from "#app";
+import { useHead } from "#imports";
+import style from "#build/ui.style.mjs";
+export default defineNuxtPlugin(function(nuxt) {
+  const computedStyle = computed(() => style);
+  const headData = {
+    style: [
+      {
+        innerHTML: () => computedStyle.value,
+        tagPriority: -2,
+        id: "nuxt-ui-style"
+      }
+    ]
+  };
+  useHead(headData);
+});

package/dist/types.d.mts

@@ -1,25 +1,16 @@
 
-import type { ModuleOptions, ModuleHooks, RuntimeModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.js'
+import type { ModuleOptions } from './module.js'
 
-declare module '#app' {
-  interface RuntimeNuxtHooks extends RuntimeModuleHooks, ModuleRuntimeHooks {}
-}
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['ui']?: Partial<ModuleOptions> }
   interface NuxtOptions { ['ui']?: ModuleOptions }
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
 }
 
 declare module 'nuxt/schema' {
   interface NuxtConfig { ['ui']?: Partial<ModuleOptions> }
   interface NuxtOptions { ['ui']?: ModuleOptions }
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
 }
 
 
-export type { default } from './module.js'
+export type { ModuleOptions, default } from './module.js'

package/dist/types.d.ts

@@ -1,25 +1,16 @@
 
-import type { ModuleOptions, ModuleHooks, RuntimeModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module'
+import type { ModuleOptions } from './module'
 
-declare module '#app' {
-  interface RuntimeNuxtHooks extends RuntimeModuleHooks, ModuleRuntimeHooks {}
-}
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['ui']?: Partial<ModuleOptions> }
   interface NuxtOptions { ['ui']?: ModuleOptions }
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
 }
 
 declare module 'nuxt/schema' {
   interface NuxtConfig { ['ui']?: Partial<ModuleOptions> }
   interface NuxtOptions { ['ui']?: ModuleOptions }
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
 }
 
 
-export type { default } from './module'
+export type { ModuleOptions, default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@community-release/nx-ui",
-    "version": "0.0.4",
+    "version": "0.0.7",
     "description": "nx-ui - Nuxt UI library",
     "repository": {
         "type": "git",
@@ -55,7 +55,7 @@
         "prepack": "nuxt-module-build build",
         "dev": "nuxi dev docs",
         "build": "nuxi build docs",
-        "prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare docs",
+        "prepare": "nuxt-module-build build && nuxt-module-build prepare && nuxi prepare docs",
         "release": "npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
         "test": "vitest run",
         "test:watch": "vitest watch",