chore: wip

* feat:stepper component

* chore: wip

* chore: wip

* chore: remove scss

* fix: remove unused package

* chore: wip

* chore: wip

* chore: wip

* chore: wip

* chore: wip

* fix: bun conflict

* fix: remove bun file due to conflict

* chore: wip

* chore: wip

* chore: wip

---------

chore: wip
Co-Authored-By: chrisbbreuer <chrisbreuer93@gmail.com>
Co-Authored-By: Michael Vincent Caballero <mike.cabz32@gmail.com>

Author: cab-mikee

app/Notifications/Welcome.ts

@@ -6,7 +6,7 @@ export default new Email({
   // or Sms or Push or Webhook or Chat
   name: 'welcome', // optional, defaults to the file name
   subject: 'Welcome to Stacks', // optional, but recommended
-  to: 'some@email.com', // required
+  to: 'some@email.com', // optional, has to be defined here or set when sending
   from: config.email.from, // optional, defaults to the config value
   template: 'Welcome', // resources/emails/Welcome.stx
 

storage/framework/core/components/stepper/components.d.ts

@@ -13,6 +13,5 @@ declare module 'vue' {
     StarportCarrier: typeof import('vue-starport')['StarportCarrier']
     Step: typeof import('./src/components/Step.vue')['default']
     Stepper: typeof import('./src/components/Stepper.vue')['default']
-    StepperRoot: typeof import('./src/components/StepperRoot.vue')['default']
   }
 }

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

@@ -17,14 +17,36 @@ const reset = () => {
     stepperRef.value.reset()
   }
 }
+
+
+const previous = () => {
+  if(stepperRef.value) {
+    stepperRef.value.previous()
+  }
+}
+
 </script>
 
 <template>
-  <div class="bg-neutral-100/66 dark:bg-neutral-900 px-4 ">
+  <div class="bg-neutral-100/66 dark:bg-neutral-900 px-4">
     <div class="container mx-auto max-w-full sm:max-w-2xl relative">
-      <Stepper ref='stepperRef' :steps="steps" v-model="step"/>
+      <header class="py-20 flex-center flex-col">
+        Stacks Stepper
+      </header>
+      <main
+        class="grid grid-cols-1 gap-8 text-xs 2xl:text-sm text-primary pb-20"
+      >
+
+        <Stepper ref='stepperRef' :steps="steps" v-model="step"/>
+        <div class="w-full mx-auto text-center">
+          <button class="mx-5 rounded-md bg-indigo-50 px-3.5 py-2.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100" type="button" @click="next()">Next</button>
+          <button class="text-sm font-semibold mx-5" type="button" @click="reset()">Reset</button>
+          <button class="mx-5 rounded-md bg-indigo-50 px-3.5 py-2.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100" type="button" @click="previous()">Previous</button>
+        </div>
+
+
+      </main>
     </div>
-    <!-- <button type="button" @click="next">Next</button>
-    <button type="button" @click="reset">Reset</button> -->
+
   </div>
 </template>

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

@@ -14,6 +14,7 @@ interface Props {
   disabled: boolean
   withDivider: boolean
   debug: boolean
+  isLastStep: boolean
 }
 
 const props = defineProps<Props>()
@@ -46,13 +47,22 @@ const scope = computed(() => ({
 }))
 
 const classes = computed(() => ({
-  'is-active': props.active,
-  'is-visited': props.visited,
-  'is-disabled': props.disabled,
+    'is-active': props.active,
+    'is-visited': props.visited,
+    'is-disabled': props.disabled
 }))
 
+const indexClasses = computed(() => {
+
+  const defaultClass = ' '
+  const additionalClass = props.active  ? 'text-blue-500 bg-blue-500' : 'text-gray-500 bg-gray-300'
+
+  return defaultClass + additionalClass
+})
+
+
+
 function handleChange() {
-  console.log('step handle changed')
   emit('change', props.index)
 }
 </script>
@@ -70,7 +80,10 @@ function handleChange() {
     >
     <label class="label flex flex-row items-center" :for="id">
       <slot name="index-root" v-bind="scope">
-        <span class="index w-14 h-14 flex flex-shrink-0 text-xl rounded-full mr-2 text-white items-center justify-center bg-transparent border border-gray-200">
+        <span :class="[
+            'w-14 h-14 flex flex-shrink-0 text-xl rounded-full mr-2 text-white items-center justify-center border border-gray-200',
+            props.active  ? 'text-blue-500 bg-blue-500' : 'text-gray-500 bg-gray-300'
+          ]">
           <slot name="index" v-bind="scope">
             {{ scope.displayIndex }}
           </slot>
@@ -79,7 +92,7 @@ function handleChange() {
       <span class="title text-white" v-if="defaultSlot">
         <slot v-bind="scope"></slot>
       </span>
-      <span class="w-full ml-2 border-b border-white shadow-md" v-if="withDivider"></span>
+      <span class="w-full ml-2 border-b border-gray shadow-md" v-if="withDivider && !isLastStep"></span>
     </label>
   </div>
 </template>
@@ -105,23 +118,10 @@ function handleChange() {
   cursor: pointer;
 }
 
-.step.is-active .index {
-  color: #4b5563;
-}
-
 .step.is-active {
   opacity: 1;
 }
 
-.step.is-active .title {
-  color: #1e6b73;
-}
-
-.step.is-active .label .index {
-  border-color: rgba(244, 244, 244, 0.2);
-  background-color: #12525e;
-}
-
 .step.is-visited .index {
   background-color: #ffffff;
 }

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

@@ -12,7 +12,7 @@ import {
   watch,
   withDefaults,
 } from 'vue'
-import type { OptionParams, StepperEmitValue, StepperProps, StepperValue } from '../types'
+import type { StepperProps, OptionParams } from '../types'
 import Step from './Step.vue'
 
 defineOptions({
@@ -21,10 +21,7 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<StepperProps>(), {
-  value: {
-    value: 2,
-    id: undefined,
-  },
+  stepperId: undefined,
   steps: 0,
   linear: true,
   persist: false,
@@ -33,70 +30,34 @@ const props = withDefaults(defineProps<StepperProps>(), {
   debug: false,
 })
 
-const emit = defineEmits(['input', 'reset'])
+const modelValue =  defineModel()
+
+const emit = defineEmits(['reset'])
 
 const namespace = { kebab: 'stepper', capitalize: 'Stepper' }
 const stepsArr = ref(getStepsArr())
-const index = ref(toIndex(props.value.value))
+const currentIndex = ref(toIndex(modelValue.value))
+
 const slots = useSlots()
-const id = computed(() => `${namespace.kebab}-${Math.random().toString(36).substr(2, 9)}`)
-const lastIndex = computed(() => stepsArr.value.length - 1)
-const random = computed(() => props.linear === false)
-
-const queries = computed(() => {
-  const { steps } = props
-
-  return Array.from(Array(steps)).reduce(
-    (queries, step, $index) => {
-      const query = `isStep${$index + 1}`
-      queries[query] = index.value === $index
-      return queries
-    },
-    {} as Record<string, boolean>,
-  )
-})
+const id = computed(() => `${namespace.kebab}-${Math.random().toString(36).substring(2, 9)}`)
 
-watch(
-  () => props.value,
-  (newValue) => {
-    index.value = toIndex(newValue.value)
-    if (props.persist) {
-      setStorage()
-    }
-  },
-)
-
-watch(
-  index,
-  (newValue) => {
-    emitValue(toValue(newValue))
-  },
-  { immediate: true },
-)
-
-const scope = computed(() => ({
-  index: index.value,
-  displayIndex: index.value + 1,
-  defaultSlot: slots.default ? slots.default() : undefined,
-  flags: {
-    isActive: true,
-    isVisited: false,
-    isDisabled: false,
-  },
-}))
-
-const classes = computed(() => ({
-  'is-active': true,
-  'is-visited': false,
-  'is-disabled': false,
-}))
+watch(() => modelValue.value, (step) => {
+  currentIndex.value = toIndex(step)
+  if (props.persist) {
+    setStorage();
+  }
+});
+
+watch(currentIndex, (stepIndex) => {
+  emitValue(toValue(stepIndex));
+}, { immediate: true });
 
 onMounted(() => {
   if (props.persist) {
     const storage = getStorage()
     if (storage) {
       stepsArr.value = storage.stepsArr
-      index.value = storage.index
+      currentIndex.value = storage.index
     } else {
       setStorage()
     }
@@ -153,9 +114,9 @@ function doesStepExist(index: number) {
 }
 
 function handleChange(stepIndex: number) {
-  const isNext = stepIndex === index.value + 1
-  const isPrevious = stepIndex === index.value - 1
-  const oldIndex = toIndex(props.value.value)
+  const isNext = stepIndex === currentIndex.value + 1
+  const isPrevious = stepIndex === currentIndex.value - 1
+  const oldIndex = toIndex(modelValue.value)
 
   if (props.linear) {
     if (isNext || isPrevious) {
@@ -195,7 +156,7 @@ function getStepsArr() {
 }
 
 function offset(offset: number) {
-  const stepIndex = index.value + offset
+  const stepIndex = currentIndex.value + offset
   if (doesStepExist(stepIndex)) {
     handleChange(stepIndex)
   }
@@ -211,7 +172,7 @@ function previous() {
 
 function reset() {
   stepsArr.value = getStepsArr()
-  index.value = 0
+  currentIndex.value = 0
   emit('reset')
 }
 
@@ -220,15 +181,15 @@ function setStep(stepIndex: number, prop: string, value: any) {
 }
 
 function setStorage() {
-  window[props.storekeeper].setItem(id.value, JSON.stringify({ index: index.value, stepsArr: stepsArr.value }))
+  window[props.storekeeper].setItem(id.value, JSON.stringify({ index: currentIndex.value, stepsArr: stepsArr.value }))
 }
 
 function getStorage() {
   return JSON.parse(window[props.storekeeper].getItem(id.value) || 'null')
 }
 
 function emitValue(value: number) {
-  emit('input', { id: id.value, value, queries: queries.value })
+  modelValue.value = value
 }
 
 defineExpose({
@@ -238,40 +199,39 @@ defineExpose({
 })
 </script>
 <template>
-  <div class="v-stepper">
-    <stepper-root>
-      <step
-        v-for="(step, $index) in stepsArr"
-        :name="id"
-        :key="$index"
-        :debug="debug"
-        :index="$index"
-        @change="handleChange"
-        :visited="step.visited"
-        :disabled="step.disabled"
-        :with-divider="withDivider"
-        :active="step.index === toIndex(value.value)"
-      >
-         <template
-          v-slot:index-root="scope"
-          v-if="withSlot(getSlotName('index-root', $index + 1))"
-          >
-          <slot :name="getSlotName('index-root', scope.displayIndex)" v-bind="scope"></slot>
-        </template>
-
+  <div class="flex w-full select-none box-border justify-between ">
+    <step
+      v-for="(step, $index) in stepsArr"
+      :name="id"
+      :key="$index"
+      :debug="debug"
+      :index="$index"
+      @change="handleChange"
+      :visited="step.visited"
+      :disabled="step.disabled"
+      :with-divider="withDivider"
+      :active="step.index === toIndex(modelValue)"
+      :isLastStep="steps === ($index + 1)"
+    >
         <template
-          v-if="withoutSlot(getSlotName('index-root', $index + 1))"
-          v-slot:index="scope">
-          <slot :name="getSlotName('index', scope.displayIndex)" v-bind="scope">
-            {{ scope.displayIndex }}
-          </slot>
-        </template>
-
-         <template v-slot:defaultSlot="scope" >
-          <slot :name="getSlotName('', scope.displayIndex)" v-bind="scope">2</slot>
-        </template>
-
-      </step>
-    </stepper-root>
+        v-slot:index-root="scope"
+        v-if="withSlot(getSlotName('index-root', $index + 1))"
+        >
+        <slot :name="getSlotName('index-root', scope.displayIndex)" v-bind="scope"></slot>
+      </template>
+
+      <template
+        v-if="withoutSlot(getSlotName('index-root', $index + 1))"
+        v-slot:index="scope">
+        <slot :name="getSlotName('index', scope.displayIndex)" v-bind="scope">
+          {{ scope.displayIndex }}
+        </slot>
+      </template>
+
+        <template v-slot:defaultSlot="scope" >
+        <slot :name="getSlotName('', scope.displayIndex)" v-bind="scope">2</slot>
+      </template>
+
+    </step>
   </div>
 </template>