Added hive-multitext

Author: AntonL9vov

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-hive-ui-kit",
   "private": false,
-  "version": "0.7.32",
+  "version": "0.8.0",
   "type": "module",
   "description": "UI kit for Vue 3",
   "files": [

src/components/hive-multitext/hive-multitext.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import HiveButton from '@/components/hive-button/hive-button.vue';
+import HiveInput from '@/components/hive-input/hive-input.vue';
+
+const props = defineProps<{
+  title?: string;
+  modelValue: (string | number)[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: (string | number)[]): void;
+}>();
+
+const currentValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+
+const addValue = () => {
+  currentValue.value.push('');
+};
+</script>
+
+<template>
+  <div class="container">
+    <slot name="title">
+      <div class="title" v-if="title">{{ title }}</div>
+    </slot>
+    <div v-for="(_, i) in currentValue" :key="i" class="input">
+      <hive-input style="width: 100%" v-model="currentValue[i]!" />
+      <hive-button @click="currentValue.splice(i, 1)" class="button">Удалить</hive-button>
+    </div>
+    <slot name="button" :add-value="addValue">
+      <hive-button @click="addValue">Добавить значение</hive-button>
+    </slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .title {
+    font-size: 18px;
+  }
+
+  .input {
+    display: flex;
+    gap: 10px;
+
+    .button {
+      width: 30%;
+    }
+  }
+}
+</style>

src/examples/components/all-widgets.vue

@@ -39,6 +39,7 @@ import { VueComponent } from '../../common/types/value';
 import hiveContextMenu from '../../components/hive-context-menu/hive-context-menu.vue';
 import { ContextMenuItems } from '../../components/hive-context-menu/types';
 import FilterNew from './components/filter-new.vue';
+import HiveMultitext from '@/components/hive-multitext/hive-multitext.vue';
 
 const text = ref('text');
 const num = ref(0);
@@ -723,6 +724,8 @@ const optionsObject1 = {
   a: 'b',
   c: 'd',
 };
+
+const multitext = ref(['1', '2', '3', '4']);
 </script>
 
 <template>
@@ -961,6 +964,9 @@ const optionsObject1 = {
       <widget-wrapper title="ContextMenu" style="height: 500px">
         <hive-context-menu :items="contextMenuItems" @context-item-click="universalLog" />
       </widget-wrapper>
+      <widget-wrapper title="HiveMultiText">
+        <hive-multitext v-model="multitext" title="Значения" />
+      </widget-wrapper>
     </div>
   </div>
 
@@ -979,6 +985,7 @@ const optionsObject1 = {
 
 <style scoped lang="scss">
 @import '@/assets/variables.scss';
+
 $bg-input: black;
 .app {
   max-width: 1280px;
@@ -989,6 +996,7 @@ $bg-input: black;
   line-height: 1.5;
   font-weight: 400;
 }
+
 .wrapper {
   display: flex;
   flex-direction: column;

src/index.ts

@@ -25,6 +25,7 @@ import HiveTreeView from './components/hive-tree-view/hive-tree-view.vue';
 import HiveTreeViewNode from './components/hive-tree-view/hive-tree-view-node.vue';
 import HiveUploadFile from '@/components/hive-upload-file/hive-upload-file.vue';
 import Notification from '@/plugins/hive-notification';
+import HiveMultitext from '@/components/hive-multitext/hive-multitext.vue';
 import { notify, useNotification } from '@/plugins/hive-notification';
 
 import type { NotificationsOptions, NotificationsPluginOptions, NotificationItem } from '@/plugins/hive-notification';
@@ -79,6 +80,7 @@ export {
   FontAwesomeIcon,
   faSearch,
   faXmark,
+  HiveMultitext,
 };
 
 export type {