From 0b91e4a46c7d733f354e6e12f9e62ae5712f9155 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Wed, 7 Jun 2023 14:41:06 +0200
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=94=A7=20wip:=20NeoTaginput?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/rmrk/Create/AttributeTagInput.vue  | 65 ++++++-------
 components/rmrk/Gallery/Item/Facts.vue        | 92 -------------------
 components/shared/ArweaveLink.vue             | 28 ------
 .../NeoInputitems/NeoInputitems.scss          | 29 ++++++
 .../NeoInputitems/NeoInputitems.vue           | 16 ++++
 libs/ui/src/index.ts                          |  1 +
 static/sitemap.xml                            |  2 +-
 7 files changed, 76 insertions(+), 157 deletions(-)
 delete mode 100644 components/rmrk/Gallery/Item/Facts.vue
 delete mode 100644 components/shared/ArweaveLink.vue
 create mode 100644 libs/ui/src/components/NeoInputitems/NeoInputitems.scss
 create mode 100644 libs/ui/src/components/NeoInputitems/NeoInputitems.vue

diff --git a/components/rmrk/Create/AttributeTagInput.vue b/components/rmrk/Create/AttributeTagInput.vue
index ee059190f2..707802e171 100644
--- a/components/rmrk/Create/AttributeTagInput.vue
+++ b/components/rmrk/Create/AttributeTagInput.vue
@@ -1,59 +1,52 @@
 <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"
       aria-close-label="Delete this tag"
-      autocomplete
+      icon="tag"
       open-on-focus
+      has-counter
       allow-new
-      @input="handleInput">
+      allow-autocomplete
+      @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: Attribute[]
+    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>
diff --git a/components/rmrk/Gallery/Item/Facts.vue b/components/rmrk/Gallery/Item/Facts.vue
deleted file mode 100644
index fc71ac9797..0000000000
--- a/components/rmrk/Gallery/Item/Facts.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <b-collapse
-    class="card"
-    animation="slide"
-    aria-id="contentIdForA11y3"
-    :open="false">
-    <template #trigger="props">
-      <div class="card-header" role="button" aria-controls="contentIdForA11y3">
-        <p class="card-header-title">
-          {{ $t('facts') }}
-        </p>
-        <a class="card-header-icon">
-          <NeoIcon :icon="props.open ? 'chevron-up' : 'chevron-down'" />
-        </a>
-      </div>
-    </template>
-    <div class="card-content">
-      <div class="content">
-        <p class="subtitle is-size-6"><b>ID:</b> {{ nft.id }}</p>
-        <p class="subtitle is-size-6">
-          <b>{{ $t('collection') }}:</b>{{ nft.collectionId }}
-        </p>
-        <p class="subtitle is-size-6"><b>SN:</b>{{ nft.sn }}</p>
-        <p class="subtitle is-size-6">
-          <b>TAGS:</b>
-          <b-taglist>
-            <b-tag v-for="(tag, index) in tags" :key="index" type="is-dark">
-              {{ tag }}
-            </b-tag>
-          </b-taglist>
-        </p>
-        <ArweaveLink v-if="meta.image_ar" :id="meta.image_ar" label="image" />
-        <ArweaveLink
-          v-if="nft.animationArId"
-          :id="nft.animationArId"
-          label="animated" />
-        <p v-if="imageId" class="subtitle is-size-6"><b>IPFS</b> :</p>
-
-        <ol>
-          <li v-for="gw in gwList" :key="gw">
-            <a :href="gw + imageId" target="_blank" rel="noopener noreferrer"
-              >Gateway</a
-            >
-          </li>
-        </ol>
-        <!-- </p> -->
-      </div>
-    </div>
-  </b-collapse>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
-import { extractCid } from '@/utils/ipfs'
-import { NFT, NFTMetadata } from '../../service/scheme'
-import { emptyObject } from '@/utils/empty'
-import { URLS } from '~/utils/constants'
-const components = {
-  ArweaveLink: () => import('@/components/shared/ArweaveLink.vue'),
-}
-
-@Component({ components })
-export default class Facts extends Vue {
-  @Prop({ default: () => emptyObject<NFT>() }) public nft!: NFT
-  @Prop({ default: () => emptyObject<NFTMetadata>() }) public meta!: NFTMetadata
-  public multimediaCid = ''
-  public showGwLinks = false
-  public gwList: any = [
-    URLS.koda.pinata,
-    URLS.providers.cloudflare,
-    'https://gateway.ipfs.io/ipfs/',
-    'https://ipfs.fleek.co/ipfs/',
-    'https://dweb.link/ipfs/',
-  ]
-
-  get tags() {
-    return this.meta.attributes
-      ?.filter(({ trait_type }) => !trait_type)
-      .map(({ value }) => value)
-  }
-
-  get imageId() {
-    return extractCid(this.meta.image)
-  }
-
-  // public created() {
-  //   this.$consola.log(this.nft)
-  //   this.multimediaCid = extractCid(this.nft.image);
-  //   this.showGwLinks = true;
-  // }
-}
-</script>
diff --git a/components/shared/ArweaveLink.vue b/components/shared/ArweaveLink.vue
deleted file mode 100644
index afcde40b74..0000000000
--- a/components/shared/ArweaveLink.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <ExternalLink :id="id" :url="link" class="is-flex">
-    <figure class="image is-24x24 icon__less-margin">
-      <img src="/arweave.svg" />
-    </figure>
-    <b class="is-align-self-center">View {{ label }} on Arweave</b>
-  </ExternalLink>
-</template>
-
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    id: string
-    label: string
-  }>(),
-  {
-    id: '',
-    label: 'content',
-  }
-)
-const link = 'https://viewblock.io/arweave/tx/'
-</script>
-
-<style scoped>
-.icon__less-margin {
-  margin: 0 0.5rem 1em 0 !important;
-}
-</style>
diff --git a/libs/ui/src/components/NeoInputitems/NeoInputitems.scss b/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
new file mode 100644
index 0000000000..e442356ee1
--- /dev/null
+++ b/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
@@ -0,0 +1,29 @@
+@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-background-color: $input-background-color !default;
+// $inputitems-border-color: $grey-lighter !default;
+// $inputitems-border-radius: $base-border-radius !default;
+// $inputitems-line-height: $base-line-height !default;
+// $inputitems-item-background-color: $primary !default;
+// $inputitems-item-color: $primary-invert !default;
+// $inputitems-item-border-radius: $base-border-radius !default;
+
+// $inputitems-height: calc(2em - 1px) !default;
+// $inputitems-padding: calc(.275em - 1px) 0 0 !default;
+// $inputitems-border-style: solid !default;
+// $inputitems-border-width: 1px !default;
+// $inputitems-color: #363636 !default;
+// $inputitems-box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1) !default;
+// $inputitems-max-width: 100% !default;
+// $inputitems-width: 100% !default;
+// $inputitems-counter-font-size: .75rem !default;
+// $inputitems-counter-margin: .25rem 0 0 .5rem !default;
+// $inputitems-item-margin: 0 0 0 0.275em !default;
+// $inputitems-item-padding: 0 .75em 0 .75em !default;
+// $inputitems-margin-icon-to-text: .1875em !default;
+
+@import '../NeoInput/NeoInput.scss';
+@import '@oruga-ui/oruga/src/scss/components/inputitems.scss';
diff --git a/libs/ui/src/components/NeoInputitems/NeoInputitems.vue b/libs/ui/src/components/NeoInputitems/NeoInputitems.vue
new file mode 100644
index 0000000000..4562854a92
--- /dev/null
+++ b/libs/ui/src/components/NeoInputitems/NeoInputitems.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { OInputitems } from '@oruga-ui/oruga'
+
+export default {
+  mixins: [OInputitems],
+  computed: {
+    rootClasses() {
+      return ['neo-inputitems']
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import './NeoInputitems.scss';
+</style>
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index bfe574c3cf..3c0d04a53c 100644
--- a/libs/ui/src/index.ts
+++ b/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'
diff --git a/static/sitemap.xml b/static/sitemap.xml
index ab96ddfcdf..2fa61c4d2d 100644
--- a/static/sitemap.xml
+++ b/static/sitemap.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>http://localhost:9090/carbonless</loc></url><url><loc>http://localhost:9090/cookie-notice</loc></url><url><loc>http://localhost:9090/e2e-login</loc></url><url><loc>http://localhost:9090/error</loc></url><url><loc>http://localhost:9090/first-time</loc></url><url><loc>http://localhost:9090/hot</loc></url><url><loc>http://localhost:9090/identity</loc></url><url><loc>http://localhost:9090/jobs</loc></url><url><loc>http://localhost:9090/qrCode</loc></url><url><loc>http://localhost:9090/sales</loc></url><url><loc>http://localhost:9090/series-insight</loc></url><url><loc>http://localhost:9090/settings</loc></url><url><loc>http://localhost:9090/spotlight</loc></url><url><loc>http://localhost:9090/sustainability</loc></url><url><loc>http://localhost:9090/teleport</loc></url><url><loc>http://localhost:9090/teleport-bridge</loc></url><url><loc>http://localhost:9090/bsx/assets</loc></url><url><loc>http://localhost:9090/bsx/claim</loc></url><url><loc>http://localhost:9090/bsx/create</loc></url><url><loc>http://localhost:9090/bsx/incomingOffers</loc></url><url><loc>http://localhost:9090/bsx/offers</loc></url><url><loc>http://localhost:9090/bsx/stats</loc></url><url><loc>http://localhost:9090/bsx/waifu</loc></url><url><loc>http://localhost:9090/ksm/create</loc></url><url><loc>http://localhost:9090/rmrk/create</loc></url><url><loc>http://localhost:9090/rmrk/mint</loc></url><url><loc>http://localhost:9090/snek/assets</loc></url><url><loc>http://localhost:9090/snek/claim</loc></url><url><loc>http://localhost:9090/snek/create</loc></url><url><loc>http://localhost:9090/snek/incomingOffers</loc></url><url><loc>http://localhost:9090/snek/offers</loc></url><url><loc>http://localhost:9090/snek/stats</loc></url><url><loc>http://localhost:9090/stmn/create/collection</loc></url><url><loc>http://localhost:9090/stmn/create/item</loc></url><url><loc>http://localhost:9090/</loc></url></urlset>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>http://localhost:9090/carbonless</loc></url><url><loc>http://localhost:9090/cookie-notice</loc></url><url><loc>http://localhost:9090/e2e-login</loc></url><url><loc>http://localhost:9090/error</loc></url><url><loc>http://localhost:9090/first-time</loc></url><url><loc>http://localhost:9090/hot</loc></url><url><loc>http://localhost:9090/identity</loc></url><url><loc>http://localhost:9090/jobs</loc></url><url><loc>http://localhost:9090/qrCode</loc></url><url><loc>http://localhost:9090/sales</loc></url><url><loc>http://localhost:9090/series-insight</loc></url><url><loc>http://localhost:9090/settings</loc></url><url><loc>http://localhost:9090/spotlight</loc></url><url><loc>http://localhost:9090/sustainability</loc></url><url><loc>http://localhost:9090/teleport</loc></url><url><loc>http://localhost:9090/teleport-bridge</loc></url><url><loc>http://localhost:9090/bsx/assets</loc></url><url><loc>http://localhost:9090/bsx/claim</loc></url><url><loc>http://localhost:9090/bsx/create</loc></url><url><loc>http://localhost:9090/bsx/incomingOffers</loc></url><url><loc>http://localhost:9090/bsx/offers</loc></url><url><loc>http://localhost:9090/bsx/stats</loc></url><url><loc>http://localhost:9090/bsx/waifu</loc></url><url><loc>http://localhost:9090/ksm/create</loc></url><url><loc>http://localhost:9090/rmrk/create</loc></url><url><loc>http://localhost:9090/rmrk/mint</loc></url><url><loc>http://localhost:9090/snek/assets</loc></url><url><loc>http://localhost:9090/snek/claim</loc></url><url><loc>http://localhost:9090/snek/create</loc></url><url><loc>http://localhost:9090/snek/incomingOffers</loc></url><url><loc>http://localhost:9090/snek/offers</loc></url><url><loc>http://localhost:9090/snek/stats</loc></url><url><loc>http://localhost:9090/stmn/waifu</loc></url><url><loc>http://localhost:9090/stmn/create/collection</loc></url><url><loc>http://localhost:9090/stmn/create/item</loc></url><url><loc>http://localhost:9090/</loc></url></urlset>
\ No newline at end of file

From 3d4cc8bafb516f87fc22871a34699bb1ec2289a9 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Wed, 7 Jun 2023 14:50:34 +0200
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=94=A7=20wip:=20NeoTaginput=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NeoInputitems/NeoInputitems.scss          | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/libs/ui/src/components/NeoInputitems/NeoInputitems.scss b/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
index e442356ee1..63b7d73716 100644
--- a/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
+++ b/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
@@ -3,27 +3,24 @@
 @import '@oruga-ui/oruga/src/scss/utilities/animations.scss';
 @import '@oruga-ui/oruga/src/scss/utilities/helpers.scss';
 
-// $inputitems-background-color: $input-background-color !default;
-// $inputitems-border-color: $grey-lighter !default;
-// $inputitems-border-radius: $base-border-radius !default;
-// $inputitems-line-height: $base-line-height !default;
-// $inputitems-item-background-color: $primary !default;
-// $inputitems-item-color: $primary-invert !default;
-// $inputitems-item-border-radius: $base-border-radius !default;
-
-// $inputitems-height: calc(2em - 1px) !default;
-// $inputitems-padding: calc(.275em - 1px) 0 0 !default;
-// $inputitems-border-style: solid !default;
-// $inputitems-border-width: 1px !default;
-// $inputitems-color: #363636 !default;
-// $inputitems-box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1) !default;
-// $inputitems-max-width: 100% !default;
-// $inputitems-width: 100% !default;
-// $inputitems-counter-font-size: .75rem !default;
-// $inputitems-counter-margin: .25rem 0 0 .5rem !default;
-// $inputitems-item-margin: 0 0 0 0.275em !default;
-// $inputitems-item-padding: 0 .75em 0 .75em !default;
-// $inputitems-margin-icon-to-text: .1875em !default;
+$inputitems-border-radius: 0;
+$inputitems-item-border-radius: 0;
 
 @import '../NeoInput/NeoInput.scss';
 @import '@oruga-ui/oruga/src/scss/components/inputitems.scss';
+
+.neo-inputitems {
+  .o-inputit__container {
+    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');
+      }
+    }
+  }
+}

From 6d3da2b936323b66f7271729dfb4977ef4122e46 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Thu, 8 Jun 2023 13:50:34 +0200
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=94=A7=20dark=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/rmrk/Create/AttributeTagInput.vue  |  5 +--
 .../NeoInputitems/NeoInputitems.scss          | 33 +++++++++++--------
 .../NeoInputitems/NeoInputitems.vue           |  5 ---
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/components/rmrk/Create/AttributeTagInput.vue b/components/rmrk/Create/AttributeTagInput.vue
index 707802e171..13c28ab52e 100644
--- a/components/rmrk/Create/AttributeTagInput.vue
+++ b/components/rmrk/Create/AttributeTagInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <NeoField :label="$t('Tags')" addons="false">
+  <NeoField :label="$t('Tags')" :addons="false">
     <NeoInputitems
       id="search_tag"
       v-model="tags"
@@ -12,6 +12,7 @@
       has-counter
       allow-new
       allow-autocomplete
+      expanded
       @update:modelValue="handleInput">
       <template #header>
         <b>{{ $t('general.tagsAdd') }}</b>
@@ -30,7 +31,7 @@ const allTags = ref(['audio', 'video', 'image', 'music', 'abstract'])
 
 const props = withDefaults(
   defineProps<{
-    attr: Attribute[]
+    attr?: []
     max?: number
     placeholder?: string
     simple?: boolean
diff --git a/libs/ui/src/components/NeoInputitems/NeoInputitems.scss b/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
index 63b7d73716..1eb01a3cbe 100644
--- a/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
+++ b/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
@@ -9,18 +9,25 @@ $inputitems-item-border-radius: 0;
 @import '../NeoInput/NeoInput.scss';
 @import '@oruga-ui/oruga/src/scss/components/inputitems.scss';
 
-.neo-inputitems {
-  .o-inputit__container {
-    outline: none;
-    box-shadow: none;
-    @include ktheme() {
-      border: 1px solid theme('k-grey-fix');
-      background-color: theme('background-color');
-      color: theme('text-color');
+.o-inputit__container {
+	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-input {
+		background-color: theme('background-color');
+		color: theme('text-color');
+		}
+
+		&:focus {
+		border: 1px solid theme('text-color');
+		}
+	}
+}
+
+.o-acp__menu{
+	width: 100%!important;
 }
diff --git a/libs/ui/src/components/NeoInputitems/NeoInputitems.vue b/libs/ui/src/components/NeoInputitems/NeoInputitems.vue
index 4562854a92..5d5f3822ee 100644
--- a/libs/ui/src/components/NeoInputitems/NeoInputitems.vue
+++ b/libs/ui/src/components/NeoInputitems/NeoInputitems.vue
@@ -3,11 +3,6 @@ import { OInputitems } from '@oruga-ui/oruga'
 
 export default {
   mixins: [OInputitems],
-  computed: {
-    rootClasses() {
-      return ['neo-inputitems']
-    },
-  },
 }
 </script>
 

From e89d366bbd42ca29b2d6c2ffe1e974a7d2a635c9 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Thu, 15 Jun 2023 10:34:34 +0200
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=94=A7=20InputeItem=20design=20autoco?=
 =?UTF-8?q?mplete?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/rmrk/Create/AttributeTagInput.vue          |  7 ++++++-
 .../src/components/NeoInputitems/NeoInputitems.scss   | 11 ++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/rmrk/Create/AttributeTagInput.vue b/components/rmrk/Create/AttributeTagInput.vue
index 13c28ab52e..30f7243807 100644
--- a/components/rmrk/Create/AttributeTagInput.vue
+++ b/components/rmrk/Create/AttributeTagInput.vue
@@ -6,6 +6,11 @@
       :data="allTags"
       :maxitems="max"
       :placeholder="placeholder"
+      variant="info"
+      item-class="my-3"
+      :autocomplete-classes="{
+        'item-class': 'p-2',
+      }"
       aria-close-label="Delete this tag"
       icon="tag"
       open-on-focus
@@ -31,7 +36,7 @@ const allTags = ref(['audio', 'video', 'image', 'music', 'abstract'])
 
 const props = withDefaults(
   defineProps<{
-    attr?: []
+    attr: []
     max?: number
     placeholder?: string
     simple?: boolean
diff --git a/libs/ui/src/components/NeoInputitems/NeoInputitems.scss b/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
index 1eb01a3cbe..e5d1adcbb3 100644
--- a/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
+++ b/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
@@ -5,8 +5,10 @@
 
 $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 {
@@ -17,17 +19,12 @@ $inputitems-item-border-radius: 0;
 		background-color: theme('background-color');
 		color: theme('text-color');
 
-		.o-input {
-		background-color: theme('background-color');
-		color: theme('text-color');
-		}
-
 		&:focus {
-		border: 1px solid theme('text-color');
+			border: 1px solid theme('text-color');
 		}
 	}
 }
 
-.o-acp__menu{
+.o-acp__menu {
 	width: 100%!important;
 }

From 577a33af40f172955ef754fe2f7d4b24932a24c8 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Thu, 15 Jun 2023 11:21:50 +0200
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=94=A7=20inputitem=20darkmode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/rmrk/Create/AttributeTagInput.vue  |  3 ++
 .../NeoInputitems/NeoInputitems.scss          | 43 ++++++++++++++-----
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/components/rmrk/Create/AttributeTagInput.vue b/components/rmrk/Create/AttributeTagInput.vue
index 30f7243807..00e08e73dc 100644
--- a/components/rmrk/Create/AttributeTagInput.vue
+++ b/components/rmrk/Create/AttributeTagInput.vue
@@ -10,6 +10,9 @@
       item-class="my-3"
       :autocomplete-classes="{
         'item-class': 'p-2',
+        inputClasses: {
+          inputClass: 'neo-input',
+        },
       }"
       aria-close-label="Delete this tag"
       icon="tag"
diff --git a/libs/ui/src/components/NeoInputitems/NeoInputitems.scss b/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
index e5d1adcbb3..d5a178ecee 100644
--- a/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
+++ b/libs/ui/src/components/NeoInputitems/NeoInputitems.scss
@@ -3,6 +3,7 @@
 @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;
@@ -12,19 +13,39 @@ $autocomplete-menu-border-radius: 0;
 @import '@oruga-ui/oruga/src/scss/components/inputitems.scss';
 
 .o-inputit__container {
-	outline: none;
-	box-shadow: none;
-	@include ktheme() {
-		border: 1px solid theme('k-grey-fix');
-		background-color: theme('background-color');
-		color: theme('text-color');
+  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');
-		}
-	}
+      &:focus {
+        border: 1px solid theme('text-color');
+      }
+    }
+  }
 }
 
 .o-acp__menu {
-	width: 100%!important;
+  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');
+      }
+    }
+  }
 }