Merge branch 'main' into neoinput-tailwindcss

components/common/NotificationBox/NotificationItem.vue

@@ -1,7 +1,7 @@
 <template>
   <nuxt-link
     :to="`/${urlPrefix}/gallery/${event.nft.id}`"
-    class="is-flex py-3 px-6">
+    class="is-flex py-3 px-6 notify-item">
     <img
       v-if="avatar"
       :src="avatar"

libs/ui/src/components/NeoCheckbox/NeoCheckbox.scss

@@ -1,5 +1,3 @@
-@import '../../scss/variable.scss';
-@import '../../scss/theme.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/expressions.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/variables.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/animations.scss';
@@ -9,21 +7,11 @@ $checkbox-checkmark-color: #000;
 
 .neo-checkbox {
   .o-chk__check {
-    border-radius: 0;
-    @include ktheme() {
-      border: 1px solid theme('border-color');
-      color: theme('text-color');
-      background-color: theme('background-color');
-    }
+    @apply rounded-none border-default border-border-color text-text-color bg-background-color;
   }
 
   .o-chk__check--checked {
-    background-size: 10px;
-    background-repeat: no-repeat;
-    background-position: center;
-    @include ktheme() {
-      background-color: theme('k-primary');
-    }
+    @apply bg-[length:10px] bg-no-repeat bg-center bg-k-primary;
   }
 }
 

libs/ui/src/components/NeoCollapsible/NeoCollapsible.story.vue

@@ -0,0 +1,16 @@
+<template>
+  <Story title="NeoCollapsible">
+    <Variant>
+      <NeoCollapsible>
+        <div>Text</div>
+        <template #content>
+          <div>Content</div>
+        </template>
+      </NeoCollapsible>
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import NeoCollapsible from './NeoCollapsible.vue'
+</script>

libs/ui/src/components/NeoCollapsible/NeoCollapsible.vue

@@ -1,26 +1,29 @@
 <template>
   <o-collapse
-    class="neo-collapse card"
-    :class="{ disabled: disabled }"
+    class="neo-collapse max-w-full relative rounded-none shadow-none border-b border-b-border-color"
+    :class="{ 'pointer-events-none cursor-default bg-k-shade': disabled }"
     animation="slide"
     :open="false"
     content-class="collapse-content">
     <template #trigger="props">
-      <div
-        class="card-header"
-        role="button"
-        :class="{ 'active-collpase': props.open }">
+      <button
+        class="rounded-none flex items-stretch w-full cursor-pointer text-base p-0"
+        type="button"
+        :class="{
+          'bg-background-color-inverse group active': props.open,
+          'bg-transparent': !props.open,
+        }">
         <p
-          class="card-header-title is-flex is-justify-content-center is-align-items-center is-flex-grow-1 px-7">
+          class="text-text-color group-[.active]:text-text-color-inverse font-bold p-3 m-0 flex justify-center items-center grow px-7">
           <slot />
         </p>
         <a
-          class="card-header-icon is-flex is-justify-content-center is-align-items-center">
+          class="text-text-color group-[.active]:text-text-color-inverse absolute right-0 flex justify-center items-center">
           <o-icon :icon="props.open ? 'chevron-up' : 'chevron-down'"> </o-icon>
         </a>
-      </div>
+      </button>
     </template>
-    <div class="card-content">
+    <div class="p-0 bg-transparent text-text-color">
       <div class="content">
         <slot name="content" />
       </div>
@@ -34,7 +37,3 @@ defineProps<{
   disabled?: boolean
 }>()
 </script>
-
-<style lang="scss">
-@import './NeoCollapsible.scss';
-</style>