Button options (#22)

Author: d0rich

app.vue

@@ -30,9 +30,11 @@ const fanItems = ref<ActionFanItem<CharacterPose>[]>([
         </h2>
         <div class="not-prose flex flex-wrap gap-3">
           <DBtn>Just Button</DBtn>
+          <DBtn no-rotate>No Rotate</DBtn>
           <DBtn href="https://d0rich.me" target="_blank">Link Button</DBtn>
           <DBtn highlight="negative-tile">Default highlight</DBtn>
           <DBtn highlight="list-item">List highlight</DBtn>
+          <DBtn highlight="list-item" color-class="bg-blue-600">Custom color</DBtn>
           <DBtn highlight="negative-list-item">List highlight (negative)</DBtn>
         </div>
       </section>

components/d/Btn.vue

@@ -18,14 +18,16 @@ const props = defineProps({
   },
   exact: Boolean,
   noPassiveHl: Boolean,
+  noRotate: Boolean,
   tag: {
     type: String,
     default: 'button'
   },
   highlight: {
     type: String as () => HighlightVariant,
     default: undefined
-  }
+  },
+  colorClass: [String, Object as () => Record<string, boolean>]
 })
 
 const currentComponent = computed(() => {
@@ -35,11 +37,19 @@ const currentComponent = computed(() => {
 </script>
 
 <template>
-  <Component :is="currentComponent" class="d-btn" v-bind="props">
+  <Component
+    :is="currentComponent"
+    class="d-btn"
+    :class="{
+      '-rotate-6': !noRotate
+    }"
+    v-bind="props"
+  >
     <DWrapFocusHighlight
       :variant="highlight"
       :link-exact="exact"
       :no-passive-link="noPassiveHl"
+      :color-class="colorClass"
     >
       <slot />
     </DWrapFocusHighlight>
@@ -48,6 +58,6 @@ const currentComponent = computed(() => {
 
 <style>
 .d-btn {
-  @apply font-extrabold uppercase -rotate-6 select-none relative inline-block;
+  @apply font-extrabold uppercase select-none relative inline-block;
 }
 </style>

components/d/wrap/FocusHighlight.vue

@@ -20,6 +20,10 @@ const props = defineProps({
   tag: {
     type: String,
     default: 'div'
+  },
+  colorClass: {
+    type: [String, Object as () => Record<string, boolean>],
+    default: 'bg-red-600'
   }
 })
 
@@ -49,6 +53,7 @@ const currentComponent = computed(() => {
       <div
         v-else-if="variant === 'list-item'"
         class="d-focus-hl__hl--list-item"
+        :class="colorClass"
       />
       <div
         v-else-if="variant === 'negative-list-item'"
@@ -119,10 +124,10 @@ const currentComponent = computed(() => {
 @keyframes hl--negative-tile-animation {
   0%,
   100% {
-    transform: skew(0deg) rotate(12deg);
+    transform: skew(0deg) rotate(6deg);
   }
   50% {
-    transform: skew(-40deg) rotate(-28deg);
+    transform: skew(-40deg) rotate(-6deg) scaleX(0.8);
   }
 }
 </style>
@@ -140,7 +145,7 @@ const currentComponent = computed(() => {
   left: 0;
   content: '';
   clip-path: polygon(1rem 0, 0% 100%, 100% 50%);
-  @apply absolute bg-red-600  transition-all -z-10;
+  @apply absolute transition-all -z-10;
 }
 
 .d-focus-hl:hover > .d-focus-hl__hl--list-item,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@d0rich/nuxt-design-system",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "main": "./nuxt.config.ts",
   "description": "🖼️ Design system for d0rich's projects based on Nuxt 3 and Tailwind CSS",
   "keywords": [