@iankibetsh/sh-tailwind 0.1.0

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@iankibetsh/sh-tailwind",
+  "version": "0.1.0",
+  "description": "Vue 3 + Tailwind CSS v4 component library for Laravel backends, built on @iankibetsh/sh-core. Forms, dialogs, drawers and action components.",
+  "type": "module",
+  "main": "./dist/sh-tailwind.cjs.js",
+  "module": "./dist/sh-tailwind.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/sh-tailwind.es.js",
+      "require": "./dist/sh-tailwind.cjs.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/playground"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "vue",
+    "tailwind",
+    "laravel",
+    "forms",
+    "dialog"
+  ],
+  "author": "Iankibet",
+  "license": "ISC",
+  "peerDependencies": {
+    "@iankibetsh/sh-core": "^1",
+    "pinia": "^3",
+    "vue": "^3.5",
+    "vue-router": "^4 || ^5"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@iankibetsh/sh-core": "file:../sh-core",
+    "@tailwindcss/vite": "^4",
+    "@vitejs/plugin-vue": "^6",
+    "pinia": "^3",
+    "tailwindcss": "^4",
+    "vite": "^8",
+    "vue": "^3.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/actions/ShConfirmAction.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { ref } from 'vue'
+import { shRepo } from '@iankibetsh/sh-core'
+import { useTheme } from '../../theme/useTheme.js'
+import ShSpinner from './ShSpinner.vue'
+
+const props = defineProps({
+    url: { type: String, required: true },
+    data: Object,
+    title: String,
+    message: String,
+    loadingMessage: { type: String, default: 'Processing...' },
+    successMessage: { type: String, default: 'Action Successful' },
+    failMessage: { type: String, default: 'Action failed' },
+    tag: { type: String, default: 'button' },
+    btnClass: String
+})
+
+const emit = defineEmits([
+    'success', 'failed', 'canceled',
+    // legacy-compatible aliases
+    'actionSuccessful', 'actionFailed', 'actionCanceled'
+])
+
+const buttons = useTheme('buttons')
+const processing = ref(false)
+
+const actionSuccessful = (res) => {
+    processing.value = false
+    emit('actionSuccessful', res)
+    emit('success', res)
+    if (props.successMessage || res?.message) {
+        shRepo.showToast(res?.message ?? props.successMessage)
+    }
+}
+
+const actionFailed = (reason) => {
+    processing.value = false
+    emit('actionFailed', reason)
+    emit('failed', reason)
+    if (props.failMessage || reason?.value?.message) {
+        shRepo.showToast(reason?.value?.message ?? props.failMessage, 'error')
+    }
+}
+
+function runAction () {
+    processing.value = true
+    shRepo.runPlainRequest(props.url, props.message, props.title, props.data).then(res => {
+        if (res.isConfirmed) {
+            if (res.value?.success) {
+                actionSuccessful(res.value.response)
+            } else {
+                actionFailed(res)
+            }
+        } else {
+            processing.value = false
+            emit('actionCanceled')
+            emit('canceled')
+        }
+    }).catch(ex => {
+        actionFailed(ex)
+    })
+}
+</script>
+
+<template>
+    <component
+        :is="tag"
+        :class="[btnClass ?? buttons.link, processing ? 'pointer-events-none opacity-60' : '']"
+        @click="runAction"
+    >
+        <template v-if="processing">
+            <ShSpinner class="size-4" />
+            <span>{{ loadingMessage }}</span>
+        </template>
+        <slot v-else />
+    </component>
+</template>

package/src/components/actions/ShSilentAction.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { ref } from 'vue'
+import { shApis, shRepo } from '@iankibetsh/sh-core'
+import { useTheme } from '../../theme/useTheme.js'
+import ShSpinner from './ShSpinner.vue'
+
+const props = defineProps({
+    url: { type: String, required: true },
+    data: Object,
+    method: { type: String, default: 'POST' }, // GET | POST | PUT | DELETE
+    loadingMessage: { type: String, default: 'Processing' },
+    successMessage: { type: String, default: 'Action Successful' },
+    failMessage: { type: String, default: 'Action failed' },
+    disableSuccessMessage: Boolean,
+    tag: { type: String, default: 'button' },
+    btnClass: String
+})
+
+const emit = defineEmits([
+    'success', 'failed',
+    // legacy-compatible aliases
+    'actionSuccessful', 'actionFailed'
+])
+
+const buttons = useTheme('buttons')
+const processing = ref(false)
+
+const methods = {
+    GET: shApis.doGet,
+    POST: shApis.doPost,
+    PUT: shApis.doPut,
+    DELETE: shApis.doDelete
+}
+
+function runAction () {
+    processing.value = true
+    const send = methods[props.method.toUpperCase()] ?? shApis.doPost
+    send(props.url, props.data).then(res => {
+        processing.value = false
+        emit('actionSuccessful', res)
+        emit('success', res)
+        if (!props.disableSuccessMessage) {
+            shRepo.showToast(res.data?.message ?? props.successMessage)
+        }
+    }).catch(reason => {
+        processing.value = false
+        emit('actionFailed', reason)
+        emit('failed', reason)
+        shRepo.showToast(reason?.message ?? props.failMessage, 'error')
+    })
+}
+</script>
+
+<template>
+    <component
+        :is="tag"
+        :class="[btnClass ?? buttons.link, processing ? 'pointer-events-none opacity-60' : '']"
+        @click="runAction"
+    >
+        <template v-if="processing">
+            <ShSpinner class="size-4" />
+            <span>{{ loadingMessage }}</span>
+        </template>
+        <slot v-else />
+    </component>
+</template>

package/src/components/actions/ShSpinner.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+    </svg>
+</template>

package/src/components/form/ShForm.vue

@@ -0,0 +1,272 @@
+<script setup>
+import { computed, inject, reactive, ref, watch } from 'vue'
+import { shApis, shRepo } from '@iankibetsh/sh-core'
+import { useTheme } from '../../theme/useTheme.js'
+import { SH_TW_COMPONENTS, SH_DIALOG_CONTEXT } from '../../theme/keys.js'
+import { normalizeFields } from '../../utils/normalizeField.js'
+import ShFormSteps from './ShFormSteps.vue'
+import ShSpinner from '../actions/ShSpinner.vue'
+import TextInput from './inputs/TextInput.vue'
+import TextAreaInput from './inputs/TextAreaInput.vue'
+import EmailInput from './inputs/EmailInput.vue'
+import PasswordInput from './inputs/PasswordInput.vue'
+import NumberInput from './inputs/NumberInput.vue'
+import DateInput from './inputs/DateInput.vue'
+import SelectInput from './inputs/SelectInput.vue'
+import PhoneInput from './inputs/PhoneInput.vue'
+import ShSuggest from './inputs/ShSuggest.vue'
+
+const props = defineProps({
+    action: { type: String, required: true },
+    method: { type: String, default: 'post' }, // post | put | patch | delete
+    fields: { type: Array, required: true },   // strings or field objects
+    currentData: Object,                       // prefill for edit flows
+    steps: Array,                              // [{ title, fields: ['name', ...] }]
+    submitLabel: { type: String, default: 'Submit' },
+    successMessage: String,
+    retainData: Boolean,
+    // (data) => false aborts, object replaces payload, anything else proceeds
+    preSubmit: Function,
+    hiddenId: { type: Boolean, default: true },
+    classes: Object,
+    disabled: Boolean
+})
+
+const emit = defineEmits([
+    'success', 'error', 'fieldChanged', 'preSubmit',
+    // legacy-compatible aliases
+    'formSubmitted', 'formError'
+])
+
+const t = useTheme('form', computed(() => props.classes))
+const inputsTheme = useTheme('inputs')
+const injectedComponents = inject(SH_TW_COMPONENTS, {})
+const dialogContext = inject(SH_DIALOG_CONTEXT, null)
+
+const builtins = {
+    text: TextInput,
+    textarea: TextAreaInput,
+    email: EmailInput,
+    password: PasswordInput,
+    number: NumberInput,
+    date: DateInput,
+    select: SelectInput,
+    phone: PhoneInput,
+    suggest: ShSuggest
+}
+
+const formFields = ref([])
+const errors = reactive({})
+const submitting = ref(false)
+const currentStep = ref(0)
+const isDirty = ref(false)
+
+const buildFields = () => {
+    const normalized = normalizeFields(props.fields, props.currentData)
+    if (props.hiddenId && props.currentData?.id && !normalized.some(f => f.name === 'id')) {
+        normalized.push({ name: 'id', type: 'hidden', value: props.currentData.id })
+    }
+    formFields.value = normalized
+}
+buildFields()
+
+watch(() => props.currentData, () => {
+    // don't clobber values the user already edited
+    if (!isDirty.value) {
+        buildFields()
+    }
+}, { deep: true })
+
+watch(() => props.fields, buildFields)
+
+const formSteps = computed(() => {
+    if (!props.steps?.length) {
+        return [{ title: '', fields: formFields.value }]
+    }
+    return props.steps.map(step => ({
+        title: step.title ?? '',
+        fields: formFields.value.filter(f =>
+            (step.fields ?? []).includes(f.name) || f.type === 'hidden'
+        )
+    }))
+})
+
+const isLastStep = computed(() => currentStep.value >= formSteps.value.length - 1)
+
+const resolveComponent = (field) =>
+    field.component ?? injectedComponents[field.type] ?? builtins[field.type] ?? builtins.text
+
+const inputClass = (field) => {
+    if (errors[field.name]) {
+        return t.value.inputInvalid
+    }
+    return field.type === 'select' ? inputsTheme.value.select : t.value.input
+}
+
+const inputProps = (field) => ({
+    placeholder: field.placeholder || undefined,
+    disabled: props.disabled || field.disabled,
+    ...(field.type === 'select' || field.type === 'suggest'
+        ? {
+            options: Array.isArray(field.options) ? field.options : undefined,
+            url: Array.isArray(field.options) ? undefined : field.options?.url,
+            multiple: field.multiple,
+            allowCustom: field.allowCustom,
+            optionTemplate: field.optionTemplate
+        }
+        : {}),
+    ...(field.type === 'number' ? { min: field.min, max: field.max, step: field.step } : {}),
+    ...(field.type === 'textarea' ? { rows: field.rows } : {}),
+    ...(field.type === 'date' ? { withTime: field.withTime, min: field.min, max: field.max } : {}),
+    ...(field.type === 'phone' ? { countryCode: field.countryCode, detectCountry: field.detectCountry } : {}),
+    ...(field.props ?? {})
+})
+
+const fieldChanged = (field, value) => {
+    isDirty.value = true
+    delete errors[field.name]
+    const data = collectData()
+    emit('fieldChanged', field.name, value, data)
+}
+
+const collectData = () => {
+    const data = {}
+    formFields.value.forEach(field => {
+        if (field.value !== null && typeof field.value !== 'undefined') {
+            data[field.name] = field.value
+        }
+    })
+    return data
+}
+
+const clearValues = () => {
+    formFields.value.forEach(field => {
+        if (field.type !== 'hidden') {
+            field.value = null
+        }
+    })
+    isDirty.value = false
+}
+
+const goToErrorStep = () => {
+    const errored = Object.keys(errors)
+    if (!errored.length || !props.steps?.length) {
+        return
+    }
+    const stepIndex = formSteps.value.findIndex(step =>
+        step.fields.some(f => errored.includes(f.name))
+    )
+    if (stepIndex >= 0) {
+        currentStep.value = stepIndex
+    }
+}
+
+const submitForm = async () => {
+    if (!isLastStep.value) {
+        currentStep.value++
+        return
+    }
+    Object.keys(errors).forEach(key => delete errors[key])
+    let data = collectData()
+
+    if (props.preSubmit) {
+        const result = await props.preSubmit(data)
+        if (result === false) {
+            return
+        }
+        if (result && typeof result === 'object') {
+            data = result
+        }
+    }
+    emit('preSubmit', data)
+
+    const methods = {
+        post: shApis.doPost,
+        put: shApis.doPut,
+        patch: shApis.doPatch,
+        delete: shApis.doDelete
+    }
+    const send = methods[props.method.toLowerCase()] ?? shApis.doPost
+
+    submitting.value = true
+    try {
+        const res = await send(props.action, data)
+        if (props.successMessage) {
+            shRepo.showToast(props.successMessage)
+        }
+        emit('success', res.data)
+        emit('formSubmitted', res.data)
+        if (!props.retainData) {
+            clearValues()
+            currentStep.value = 0
+        }
+        dialogContext?.requestClose?.('success')
+    } catch (reason) {
+        if (reason.response?.status === 422) {
+            const serverErrors = reason.response.data?.errors ?? {}
+            Object.keys(serverErrors).forEach(key => {
+                const value = serverErrors[key]
+                errors[key] = Array.isArray(value) ? value[0] : value
+            })
+            goToErrorStep()
+        } else {
+            shRepo.showToast(reason.response?.data?.message ?? reason.message ?? 'Request failed', 'error')
+        }
+        emit('error', reason)
+        emit('formError', reason)
+    } finally {
+        submitting.value = false
+    }
+}
+</script>
+
+<template>
+    <form :class="t.form" @submit.prevent="submitForm">
+        <ShFormSteps v-if="formSteps.length > 1" :steps="formSteps" :current="currentStep" />
+
+        <template v-for="(step, stepIndex) in formSteps" :key="stepIndex">
+            <div v-show="currentStep === stepIndex" class="space-y-4">
+                <div v-for="field in step.fields" :key="field.name" :class="field.type === 'hidden' ? '' : t.group">
+                    <input v-if="field.type === 'hidden'" v-model="field.value" type="hidden">
+                    <template v-else>
+                        <label v-if="field.label" :class="t.label">
+                            {{ field.label }} <span v-if="field.required" :class="t.required">*</span>
+                        </label>
+                        <component
+                            :is="resolveComponent(field)"
+                            v-model="field.value"
+                            v-bind="inputProps(field)"
+                            :is-invalid="!!errors[field.name]"
+                            :class="[inputClass(field), field.class]"
+                            @update:model-value="value => fieldChanged(field, value)"
+                            @clear-validation-errors="delete errors[field.name]"
+                        />
+                        <p v-if="field.helper" :class="t.helper" v-html="field.helper" />
+                        <p v-if="errors[field.name]" :class="t.error">{{ errors[field.name] }}</p>
+                    </template>
+                </div>
+            </div>
+        </template>
+
+        <slot />
+
+        <div :class="t.nav">
+            <button
+                v-if="currentStep > 0"
+                type="button"
+                :class="t.prevBtn"
+                @click="currentStep--"
+            >
+                Back
+            </button>
+            <button
+                type="submit"
+                :class="isLastStep ? t.submitBtn : t.nextBtn"
+                :disabled="submitting || disabled"
+            >
+                <ShSpinner v-if="submitting" class="size-4" />
+                {{ isLastStep ? submitLabel : 'Next' }}
+            </button>
+        </div>
+    </form>
+</template>

package/src/components/form/ShFormSteps.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { useTheme } from '../../theme/useTheme.js'
+
+defineProps({
+    steps: { type: Array, required: true }, // [{ title }]
+    current: { type: Number, default: 0 }
+})
+
+const theme = useTheme('form')
+</script>
+
+<template>
+    <div :class="theme.steps.wrapper">
+        <div v-for="(step, index) in steps" :key="index" :class="theme.steps.step">
+            <div
+                v-if="index > 0"
+                :class="index <= current ? theme.steps.connectorDone : theme.steps.connector"
+            />
+            <div
+                :class="index < current ? theme.steps.circleDone : (index === current ? theme.steps.circleActive : theme.steps.circle)"
+            >
+                <svg v-if="index < current" xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+                </svg>
+                <template v-else>{{ index + 1 }}</template>
+            </div>
+            <span :class="index === current ? theme.steps.titleActive : theme.steps.title">{{ step.title }}</span>
+        </div>
+    </div>
+</template>

package/src/components/form/inputs/DateInput.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    modelValue: String,
+    isInvalid: Boolean,
+    disabled: Boolean,
+    withTime: Boolean,
+    min: String,
+    max: String
+})
+const emit = defineEmits(['update:modelValue', 'clearValidationErrors'])
+
+const model = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+})
+</script>
+
+<template>
+    <input
+        v-model="model"
+        :type="withTime ? 'datetime-local' : 'date'"
+        :min="min"
+        :max="max"
+        :disabled="disabled"
+        @focus="emit('clearValidationErrors')"
+    >
+</template>

package/src/components/form/inputs/EmailInput.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    modelValue: String,
+    placeholder: String,
+    isInvalid: Boolean,
+    disabled: Boolean
+})
+const emit = defineEmits(['update:modelValue', 'clearValidationErrors'])
+
+const model = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+})
+</script>
+
+<template>
+    <input
+        v-model="model"
+        type="email"
+        autocomplete="email"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @focus="emit('clearValidationErrors')"
+    >
+</template>

package/src/components/form/inputs/NumberInput.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    modelValue: [String, Number],
+    placeholder: String,
+    isInvalid: Boolean,
+    disabled: Boolean,
+    min: [Number, String],
+    max: [Number, String],
+    step: [Number, String]
+})
+const emit = defineEmits(['update:modelValue', 'clearValidationErrors'])
+
+const model = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+})
+</script>
+
+<template>
+    <input
+        v-model="model"
+        type="number"
+        :min="min"
+        :max="max"
+        :step="step"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @focus="emit('clearValidationErrors')"
+    >
+</template>

package/src/components/form/inputs/PasswordInput.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useTheme } from '../../../theme/useTheme.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+    modelValue: String,
+    placeholder: String,
+    isInvalid: Boolean,
+    disabled: Boolean,
+    autocomplete: { type: String, default: 'current-password' }
+})
+const emit = defineEmits(['update:modelValue', 'clearValidationErrors'])
+
+const t = useTheme('inputs')
+const visible = ref(false)
+
+const model = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+})
+</script>
+
+<template>
+    <div :class="t.passwordWrapper">
+        <input
+            v-bind="$attrs"
+            v-model="model"
+            :type="visible ? 'text' : 'password'"
+            :autocomplete="autocomplete"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            class="pr-9"
+            @focus="emit('clearValidationErrors')"
+        >
+        <button type="button" :class="t.passwordToggle" tabindex="-1" @click="visible = !visible">
+            <svg v-if="!visible" xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.04 12.32a1.01 1.01 0 010-.64C3.42 7.51 7.36 4.5 12 4.5c4.64 0 8.57 3.01 9.96 7.18.07.21.07.43 0 .64C20.58 16.49 16.64 19.5 12 19.5c-4.64 0-8.57-3.01-9.96-7.18z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+            </svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.22A10.48 10.48 0 002.04 11.68a1.01 1.01 0 000 .64C3.42 16.49 7.36 19.5 12 19.5c.99 0 1.95-.14 2.86-.39M6.23 6.23A10.45 10.45 0 0112 4.5c4.64 0 8.57 3.01 9.96 7.18.07.21.07.43 0 .64a10.5 10.5 0 01-4.19 5.45M6.23 6.23L3 3m3.23 3.23l3.65 3.65m7.89 7.89L21 21m-3.23-3.23l-3.65-3.65m0 0a3 3 0 10-4.24-4.24m4.24 4.24L9.88 9.88"/>
+            </svg>
+        </button>
+    </div>
+</template>