@community-release/nx-ui 0.0.29 → 0.0.31

package/dist/module.d.mts

@@ -192,16 +192,6 @@ var module = defineNuxtModule({
       global: false,
       extensions: ["vue"]
     });
-    addComponent({
-      filePath: resolve("./runtime/components/notice/notice-item"),
-      name: "ui-notice-item",
-      global: false
-    });
-    addComponent({
-      filePath: resolve("./runtime/components/accordion/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,16 +192,6 @@ var module = defineNuxtModule({
       global: false,
       extensions: ["vue"]
     });
-    addComponent({
-      filePath: resolve("./runtime/components/notice/notice-item"),
-      name: "ui-notice-item",
-      global: false
-    });
-    addComponent({
-      filePath: resolve("./runtime/components/accordion/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.29"
+  "version": "0.0.31"
 }

package/dist/module.mjs

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

package/dist/runtime/components/checkbox.vue

@@ -22,7 +22,7 @@
 
 <script setup>
 // Imports
-	import { computed, } from 'vue';
+	import { computed } from 'vue';
 
 //
 	const props = defineProps({

package/dist/runtime/components/spoiler.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="component-ui-spoiler" :class="{'tag-active': isShown}">
+		<div class="content">
+			<div>
+				<slot></slot>
+			</div>
+		</div>
+		<div class="title" @click="handleClick">{{ isShown ? hideText : showText }}</div>
+	</div>
+</template>
+
+<script setup>
+import { watch, ref } from 'vue';
+
+// Data
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+	showText: {
+		type: String,
+		default: 'Show'
+	},
+	hideText: {
+		type: String,
+		default: 'Hide'
+	},
+	modelValue: {
+		type: [Boolean, null],
+		default: null
+	}
+});
+
+let isShown = ref(false);
+let hasModel = props.modelValue !== null;
+
+if (hasModel) {
+	watch(() => props.modelValue, (v) => {
+		isShown.value = v;
+	}, { immediate: true });
+}
+
+// Methods
+function handleClick() {
+	if (hasModel) {
+		emit('update:modelValue', !isShown.value);
+	} else {
+		isShown.value = !isShown.value;
+	}
+}
+</script>
+
+<style lang="less">
+.component-ui-spoiler {
+	@com-space-mini: var(--ui-space-mini);
+	@com-ani-ease: var(--ui-ani-ease);
+	@com-ani-time: var(--ui-ani-time);
+	@com-color-primary-text: var(--ui-color-primary-text);
+	@com-font-weight-medium: var(--ui-font-weight-medium);
+
+	> .title {
+		padding-top: @com-space-mini;
+
+		color: @com-color-primary-text;
+		font-weight: @com-font-weight-medium;
+		cursor: pointer;
+
+		-webkit-user-select: none;
+		user-select: none;
+	}
+
+	> .content {
+		transition: grid-template-rows @com-ani-time @com-ani-ease;
+		display: grid;
+		grid-template-rows: 0fr;
+
+		div {
+			overflow: hidden;
+		}
+	}
+
+	&.tag-active {
+		> .content {
+			grid-template-rows: 1fr;
+		}
+	}
+}
+</style>

package/dist/runtime/components/text-spoiler.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="component-ui-text-spoiler">
+		<div class="content">{{ computedText }}</div>
+		<div class="title" @click="handleClick">{{ isShown ? hideText : showText }}</div>
+	</div>
+</template>
+
+<script setup>
+import { watch, ref, computed } from 'vue';
+
+// Data
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+	text: {
+		type: String,
+		default: '...'
+	},
+	showText: {
+		type: String,
+		default: 'Show'
+	},
+	hideText: {
+		type: String,
+		default: 'Hide'
+	},
+	length: {
+		type: Number,
+		default: 0
+	},
+	modelValue: {
+		type: [Boolean, null],
+		default: null
+	}
+});
+
+let isShown = ref(false);
+let hasModel = props.modelValue !== null;
+
+if (hasModel) {
+	watch(() => props.modelValue, (v) => {
+		isShown.value = v;
+	}, { immediate: true });
+}
+
+const computedText = computed(() => {
+	if (!isShown.value && props.text.length > props.length) {
+		return props.text.slice(0, props.length) + '...';
+	} else {
+		return props.text;
+	}
+});
+
+// Methods
+function handleClick() {
+	if (hasModel) {
+		emit('update:modelValue', !isShown.value);
+	} else {
+		isShown.value = !isShown.value;
+	}
+}
+</script>
+
+<style lang="less">
+.component-ui-text-spoiler {
+	@com-space-mini: var(--ui-space-mini);
+	@com-ani-ease: var(--ui-ani-ease);
+	@com-ani-time: var(--ui-ani-time);
+	@com-color-primary-text: var(--ui-color-primary-text);
+	@com-font-weight-medium: var(--ui-font-weight-medium);
+
+	> .title {
+		padding-top: @com-space-mini;
+
+		color: @com-color-primary-text;
+		font-weight: @com-font-weight-medium;
+		cursor: pointer;
+
+		-webkit-user-select: none;
+		user-select: none;
+	}
+
+	> .content {
+		position: relative;
+	}
+}
+</style>

package/package.json

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