🔧 NeoInputitems

components/rmrk/Create/AttributeTagInput.vue

@@ -1,59 +1,61 @@
 <template>
- <NeoField :label="$t('Tags')">
- <b-taginput
+ <NeoField :label="$t('Tags')" :addons="false">
+ <NeoInputitems
  id="search_tag"
  v-model="tags"
- type="is-grey"
  :data="allTags"
- :maxtags="max"
- ellipsis
- icon="tag"
+ :maxitems="max"
  :placeholder="placeholder"
+ variant="info"
+ item-class="my-3"
+ :autocomplete-classes="{
+ 'item-class': 'p-2',
+ inputClasses: {
+ inputClass: 'neo-input',
+ },
+ }"
  aria-close-label="Delete this tag"
- autocomplete
+ icon="tag"
  open-on-focus
+ has-counter
  allow-new
- @input="handleInput">
+ allow-autocomplete
+ expanded
+ @update:modelValue="handleInput">
  <template #header>
  <b>{{ $t('general.tagsAdd') }}</b>
  </template>
- </b-taginput>
+ </NeoInputitems>
  </NeoField>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue } from 'nuxt-property-decorator'
+<script setup lang="ts">
+import { NeoField, NeoInputitems } from '@kodadot1/brick'
 import { Attribute } from '@kodadot1/minimark/common'
-import { NeoField } from '@kodadot1/brick'
 
 const valueOf = ({ value }: Attribute) => String(value)
 
-@Component({
- components: {
- NeoField,
- },
-})
-export default class AttributeTagInput extends Vue {
- private allTags: string[] = ['audio', 'video', 'image', 'music', 'abstract']
- @Prop() public value!: Attribute[]
- @Prop({ default: 3 }) public max!: string | number
- @Prop({ default: 'Select tags or create your own' })
- public placeholder!: string
- @Prop(Boolean) public simple!: boolean
+const allTags = ref(['audio', 'video', 'image', 'music', 'abstract'])
 
- get tags() {
- return this.simple
- ? ((this.value || []) as any[] as string[])
- : (this.value || []).map(valueOf)
+const props = withDefaults(
+ defineProps<{
+ attr: []
+ max?: number
+ placeholder?: string
+ simple?: boolean
+ }>(),
+ {
+ max: 3,
+ placeholder: 'Select tags or create your own',
  }
+)
 
- set tags(value: string[]) {
- this.handleInput(value)
- }
+const tags = computed({
+ get: () => (props.simple ? props.attr || [] : props.attr?.map(valueOf) || []),
+ set: (value) => handleInput(value),
+})
 
- @Emit('input')
- handleInput(value: string[]) {
- return this.simple ? value : value.map((v) => ({ value: v }))
- }
-}
+// @Emit('input')
+const handleInput = (value) =>
+ props.simple ? value : value.map((v) => ({ value: v }))
 </script>

libs/ui/src/components/NeoInputitems/NeoInputitems.scss

@@ -0,0 +1,51 @@
+@import '@oruga-ui/oruga/src/scss/utilities/expressions.scss';
+@import '@oruga-ui/oruga/src/scss/utilities/variables.scss';
+@import '@oruga-ui/oruga/src/scss/utilities/animations.scss';
+@import '@oruga-ui/oruga/src/scss/utilities/helpers.scss';
+
+$inputitems-border-width: 0;
+$inputitems-border-radius: 0;
+$inputitems-item-border-radius: 0;
+$autocomplete-menu-border-radius: 0;
+
+@import '../NeoInput/NeoInput.scss';
+@import '@oruga-ui/oruga/src/scss/components/autocomplete.scss';
+@import '@oruga-ui/oruga/src/scss/components/inputitems.scss';
+
+.o-inputit__container {
+ padding-top: 0;
+ @include ktheme() {
+ background-color: theme('background-color');
+ }
+ .o-input.neo-input {
+ outline: none;
+ box-shadow: none;
+ @include ktheme() {
+ border: 1px solid theme('k-grey-fix');
+ background-color: theme('background-color');
+ color: theme('text-color');
+
+ &:focus {
+ border: 1px solid theme('text-color');
+ }
+ }
+ }
+}
+
+.o-acp__menu {
+ width: 100% !important;
+ @include ktheme() {
+ box-shadow: theme('primary-shadow');
+ border: 1px solid theme('border-color');
+ background: theme('background-color');
+ }
+
+ .o-acp__item {
+ color: inherit;
+ &:hover {
+ @include ktheme() {
+ color: theme('k-hovergrey');
+ }
+ }
+ }
+}

libs/ui/src/components/NeoInputitems/NeoInputitems.vue

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { OInputitems } from '@oruga-ui/oruga'
+
+export default {
+ mixins: [OInputitems],
+}
+</script>
+
+<style lang="scss">
+@import './NeoInputitems.scss';
+</style>

libs/ui/src/index.ts

@@ -24,6 +24,7 @@ export { default as NeoSkeleton } from './components/NeoSkeleton/NeoSkeleton.vue
 export { default as NeoAvatar } from './components/NeoAvatar/NeoAvatar.vue'
 export { default as NeoField } from './components/NeoInput/NeoField.vue'
 export { default as NeoInput } from './components/NeoInput/NeoInput.vue'
+export { default as NeoInputitems } from './components/NeoInputitems/NeoInputitems.vue'
 export { default as NeoCarousel } from './components/NeoCarousel/NeoCarousel.vue'
 export { default as NeoCarouselItem } from './components/NeoCarousel/NeoCarouselItem.vue'
 export { default as NeoLoading } from './components/NeoLoading/NeoLoading.vue'