chore: wip

Author: cab-mikee

storage/framework/core/components/stepper/src/components/Example.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Modal } from '@stacksjs/modal'
-import { Stepper } from '@stacksjs/stepper'
+import Stepper from './Stepper.vue'
 import { ref } from 'vue'
 
 const props = defineProps<{
@@ -23,7 +23,7 @@ function handleClose() {
 <template>
   <div class="flex">
     <Modal close-button :visible="props.visible" @close="handleClose">
-      <div class="mt-4 w-full flex flex-col">
+      <div class="mt-4" style="width: 100%;">
         <Stepper ref="stepperRef" v-model="step" :steps="steps" />
 
         <div class="flex-center my-4">
@@ -56,19 +56,6 @@ function handleClose() {
           </button>
         </div>
       </div>
-
-      <!-- <div class="flex-center w-full">
-
-      </div>
-      <div class="flex-center" v-if="step === 1">
-        <h1>Step 1</h1>
-      </div>
-      <div class="flex-center" v-if="step === 2">
-        <h1>Step 2</h1>
-      </div>
-      <div class="flex-center" v-if="step === 3">
-        <h1>Step 3</h1>
-      </div> -->
     </Modal>
   </div>
 </template>

storage/framework/core/components/stepper/src/components/Step.vue

@@ -64,7 +64,7 @@ function handleChange() {
 </script>
 
 <template>
-  <div class="step box-border flex-1 opacity-55 transition-opacity duration-700" :class="[classes]">
+  <div class="step box-border flex-1 flex-row opacity-55 transition-opacity duration-700" :class="[classes]">
     <input
       v-show="debug"
       :id="id"
@@ -89,13 +89,16 @@ function handleChange() {
       <span v-if="defaultSlot" class="title text-white">
         <slot v-bind="scope" />
       </span>
-      <span v-if="withDivider && !isLastStep" class="ml-2 w-full border-b border-gray shadow-md" />
-      ss
+      <span v-if="withDivider && !isLastStep" class="ml-2 w-full shadow-md">
+        <span class="bg-gray h-1 block" />
+      </span>
     </label>
   </div>
 </template>
 
 <style scoped>
+/* @unocss-placeholder */
+
 .step:hover:not(.is-disabled) {
   opacity: 0.85;
 }
@@ -129,6 +132,4 @@ function handleChange() {
     margin-right: 0.5rem; /* Assuming mr-2 maps to 0.5rem */
   }
 }
-
-/* @unocss-placeholder */
 </style>

storage/framework/core/components/stepper/src/components/Stepper.vue

@@ -5,7 +5,6 @@ import Step from './Step.vue'
 
 defineOptions({
   name: 'Stepper',
-  inheritAttrs: false,
 })
 
 const props = withDefaults(defineProps<StepperProps>(), {
@@ -197,7 +196,13 @@ defineExpose({
 </script>
 
 <template>
-  <div class="box-border w-full flex select-none justify-between">
+  <div style="
+      box-sizing: border-box;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      user-select: none;
+    ">
     <Step
       v-for="(step, $index) in stepsArr"
       :key="$index"

storage/framework/core/components/stepper/src/index.ts

@@ -1,3 +1,12 @@
+import type { Plugin } from 'vue'
 import { Stepper } from './components'
 
+const plugin: Plugin = {
+  install(app) {
+    app.component('Stepper', Stepper)
+  },
+}
+
+export default plugin
+
 export { Stepper }