@iankibetsh/sh-tailwind 0.1.0

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

@@ -0,0 +1,190 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { shApis } from '@iankibetsh/sh-core'
+import countries from '../../../data/countries.js'
+import { useTheme } from '../../../theme/useTheme.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+    modelValue: String,
+    placeholder: { type: String, default: '712345678' },
+    isInvalid: Boolean,
+    disabled: Boolean,
+    countryCode: { type: String, default: 'KE' },
+    // opt-in backend lookup of the visitor country (GET sh-country-code)
+    detectCountry: Boolean
+})
+const emit = defineEmits(['update:modelValue', 'clearValidationErrors'])
+
+const t = useTheme('inputs')
+const root = ref(null)
+const searchEl = ref(null)
+const input = ref('')
+const open = ref(false)
+const countrySearch = ref('')
+const highlighted = ref(-1)
+const selectedCountry = ref(
+    countries.find(c => c.isoCode === props.countryCode.toUpperCase()) ?? countries[0]
+)
+
+// Emoji flags are computed from the ISO code - fully offline, no assets
+const flagFor = (isoCode) =>
+    String(isoCode ?? '')
+        .toUpperCase()
+        .split('')
+        .map(char => String.fromCodePoint(0x1F1E6 + char.charCodeAt(0) - 65))
+        .join('')
+
+const filteredCountries = computed(() => {
+    const term = countrySearch.value.trim().toLowerCase()
+    if (!term) {
+        return countries
+    }
+    return countries.filter(c =>
+        c.name.toLowerCase().includes(term) ||
+        c.dialCode.includes(term) ||
+        c.isoCode.toLowerCase().includes(term)
+    )
+})
+
+const toggleDropdown = async () => {
+    if (props.disabled) {
+        return
+    }
+    open.value = !open.value
+    if (open.value) {
+        countrySearch.value = ''
+        highlighted.value = -1
+        await nextTick()
+        searchEl.value?.focus()
+    }
+}
+
+const pickCountry = (country) => {
+    selectedCountry.value = country
+    open.value = false
+    updateValue()
+}
+
+const onSearchKeydown = (e) => {
+    if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        highlighted.value = Math.min(highlighted.value + 1, filteredCountries.value.length - 1)
+    } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        highlighted.value = Math.max(highlighted.value - 1, 0)
+    } else if (e.key === 'Enter') {
+        e.preventDefault()
+        const country = filteredCountries.value[Math.max(highlighted.value, 0)]
+        if (country) {
+            pickCountry(country)
+        }
+    } else if (e.key === 'Escape') {
+        open.value = false
+    }
+}
+
+const updateValue = () => {
+    const phone = (input.value || '').replace(/^0/, '')
+    emit('update:modelValue', phone ? selectedCountry.value.dialCode + phone : '')
+}
+
+const syncFromModel = (value) => {
+    if (!value) {
+        input.value = ''
+        return
+    }
+    const country = countries.find(c => value.startsWith(c.dialCode))
+    if (country) {
+        selectedCountry.value = country
+        input.value = value.replace(country.dialCode, '')
+    } else {
+        input.value = value
+    }
+}
+
+watch(() => props.modelValue, syncFromModel)
+
+const onOutsidePointer = (e) => {
+    if (root.value && !root.value.contains(e.target)) {
+        open.value = false
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('pointerdown', onOutsidePointer)
+    syncFromModel(props.modelValue)
+    if (props.detectCountry && !props.modelValue) {
+        shApis.doGet('sh-country-code').then(res => {
+            const iso = res.data?.countryCode
+            const country = iso && countries.find(c => c.isoCode === iso.toUpperCase())
+            if (country) {
+                selectedCountry.value = country
+            }
+        }).catch(() => {})
+    }
+})
+
+onBeforeUnmount(() => {
+    document.removeEventListener('pointerdown', onOutsidePointer)
+})
+</script>
+
+<template>
+    <div ref="root" :class="[t.phone.wrapper, isInvalid ? 'border-red-500 focus-within:ring-red-500/30' : '']">
+        <button
+            type="button"
+            :class="t.phone.trigger"
+            :disabled="disabled"
+            aria-haspopup="listbox"
+            :aria-expanded="open"
+            @click="toggleDropdown"
+        >
+            <span :class="t.phone.flag">{{ flagFor(selectedCountry.isoCode) }}</span>
+            <span :class="t.phone.dial">{{ selectedCountry.dialCode }}</span>
+            <svg xmlns="http://www.w3.org/2000/svg" :class="t.phone.chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+
+        <input
+            v-model="input"
+            type="tel"
+            :class="t.phone.input"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            @input="updateValue"
+            @focus="emit('clearValidationErrors')"
+        >
+
+        <div v-if="open" :class="t.phone.dropdown">
+            <input
+                ref="searchEl"
+                v-model="countrySearch"
+                type="text"
+                :class="t.phone.search"
+                placeholder="Search country or code..."
+                @keydown="onSearchKeydown"
+                @input="highlighted = 0"
+            >
+            <div :class="t.phone.list" role="listbox">
+                <button
+                    v-for="(country, index) in filteredCountries"
+                    :key="country.isoCode"
+                    type="button"
+                    role="option"
+                    :aria-selected="country.isoCode === selectedCountry.isoCode"
+                    :class="index === highlighted ? t.phone.optionActive : t.phone.option"
+                    @pointerdown.prevent="pickCountry(country)"
+                    @mouseenter="highlighted = index"
+                >
+                    <span :class="t.phone.flag">{{ flagFor(country.isoCode) }}</span>
+                    <span :class="t.phone.optionName">{{ country.name }}</span>
+                    <span :class="t.phone.optionDial">{{ country.dialCode }}</span>
+                </button>
+                <p v-if="!filteredCountries.length" :class="t.phone.empty">No country matches "{{ countrySearch }}"</p>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,50 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { shApis } from '@iankibetsh/sh-core'
+import { normalizeOptions } from '../../../utils/normalizeOptions.js'
+
+const props = defineProps({
+    modelValue: [String, Number],
+    placeholder: String,
+    isInvalid: Boolean,
+    disabled: Boolean,
+    // inline array of options, or omit and provide url
+    options: Array,
+    // remote source; fetched with { all: 1 } like shframework's SelectInput
+    url: String
+})
+const emit = defineEmits(['update:modelValue', 'clearValidationErrors'])
+
+const remoteOptions = ref([])
+const loading = ref(false)
+
+const items = computed(() => normalizeOptions(props.options ?? remoteOptions.value))
+
+const model = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+})
+
+onMounted(() => {
+    if (!props.options && props.url) {
+        loading.value = true
+        shApis.doGet(props.url, { all: 1 }).then(res => {
+            const rows = Array.isArray(res.data) ? res.data : (res.data?.data ?? [])
+            remoteOptions.value = rows
+        }).finally(() => {
+            loading.value = false
+        })
+    }
+})
+</script>
+
+<template>
+    <select
+        v-model="model"
+        :disabled="disabled || loading"
+        @focus="emit('clearValidationErrors')"
+    >
+        <option :value="null" disabled>{{ loading ? 'Loading...' : (placeholder || 'Select...') }}</option>
+        <option v-for="option in items" :key="option.id" :value="option.id">{{ option.label }}</option>
+    </select>
+</template>

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

@@ -0,0 +1,198 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { shApis } from '@iankibetsh/sh-core'
+import { normalizeOptions } from '../../../utils/normalizeOptions.js'
+import { useTheme } from '../../../theme/useTheme.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+    modelValue: [String, Number, Array],
+    placeholder: { type: String, default: 'Type to search...' },
+    isInvalid: Boolean,
+    disabled: Boolean,
+    // inline data array, or remote url searched with { all: 1, filter_value }
+    options: Array,
+    url: String,
+    multiple: Boolean,
+    // allow submitting free text that matches no option
+    allowCustom: Boolean,
+    // optional component rendered per option (receives :option)
+    optionTemplate: [Object, Function]
+})
+const emit = defineEmits(['update:modelValue', 'clearValidationErrors'])
+
+const t = useTheme('inputs')
+const root = ref(null)
+const search = ref('')
+const open = ref(false)
+const loading = ref(false)
+const highlighted = ref(-1)
+const remote = ref([])
+const selected = ref([]) // [{ id, label }]
+
+const items = computed(() => {
+    const source = normalizeOptions(props.options ?? remote.value)
+    const picked = new Set(selected.value.map(s => s.id))
+    let list = source.filter(option => !picked.has(option.id))
+    if (props.options && search.value) {
+        const term = search.value.toLowerCase()
+        list = list.filter(option => option.label.toLowerCase().includes(term))
+    }
+    return list
+})
+
+let debounceTimer = null
+const remoteSearch = () => {
+    if (!props.url) {
+        return
+    }
+    clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => {
+        loading.value = true
+        shApis.doGet(props.url, { all: 1, filter_value: search.value }).then(res => {
+            const rows = Array.isArray(res.data) ? res.data : (res.data?.data ?? [])
+            remote.value = rows
+        }).finally(() => {
+            loading.value = false
+        })
+    }, 300)
+}
+
+const emitValue = () => {
+    if (props.multiple) {
+        emit('update:modelValue', selected.value.map(s => s.id))
+    } else {
+        emit('update:modelValue', selected.value[0]?.id ?? null)
+    }
+}
+
+const pick = (option) => {
+    if (props.multiple) {
+        selected.value.push(option)
+    } else {
+        selected.value = [option]
+        open.value = false
+    }
+    search.value = ''
+    highlighted.value = -1
+    emitValue()
+}
+
+const remove = (option) => {
+    selected.value = selected.value.filter(s => s.id !== option.id)
+    emitValue()
+}
+
+const submitCustom = () => {
+    if (!props.allowCustom || !search.value) {
+        return
+    }
+    pick({ id: search.value, label: search.value })
+}
+
+const onInput = () => {
+    open.value = true
+    emit('clearValidationErrors')
+    if (props.url) {
+        remoteSearch()
+    }
+}
+
+const onKeydown = (e) => {
+    if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        open.value = true
+        highlighted.value = Math.min(highlighted.value + 1, items.value.length - 1)
+    } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        highlighted.value = Math.max(highlighted.value - 1, 0)
+    } else if (e.key === 'Enter') {
+        e.preventDefault()
+        if (highlighted.value >= 0 && items.value[highlighted.value]) {
+            pick(items.value[highlighted.value])
+        } else {
+            submitCustom()
+        }
+    } else if (e.key === 'Escape') {
+        open.value = false
+    } else if (e.key === 'Backspace' && !search.value && selected.value.length) {
+        remove(selected.value[selected.value.length - 1])
+    }
+}
+
+// Map incoming model ids back to badges once data is available
+const initializeExisting = () => {
+    const incoming = props.modelValue
+    if (incoming === null || typeof incoming === 'undefined' || incoming === '') {
+        return
+    }
+    const ids = Array.isArray(incoming) ? incoming : [incoming]
+    const source = normalizeOptions(props.options ?? remote.value)
+    selected.value = ids.map(id =>
+        source.find(option => option.id === id) ?? { id, label: String(id) }
+    )
+}
+
+const onOutsidePointer = (e) => {
+    if (root.value && !root.value.contains(e.target)) {
+        open.value = false
+    }
+}
+
+watch(() => props.options, initializeExisting)
+
+onMounted(() => {
+    document.addEventListener('pointerdown', onOutsidePointer)
+    initializeExisting()
+    if (props.url && !props.options) {
+        remoteSearch()
+    }
+})
+
+onBeforeUnmount(() => {
+    document.removeEventListener('pointerdown', onOutsidePointer)
+    clearTimeout(debounceTimer)
+})
+</script>
+
+<template>
+    <div ref="root" :class="t.suggest.wrapper">
+        <div v-if="multiple && selected.length" :class="t.suggest.badges">
+            <span v-for="option in selected" :key="option.id" :class="t.suggest.badge">
+                {{ option.label }}
+                <span :class="t.suggest.badgeRemove" @click="remove(option)">&times;</span>
+            </span>
+        </div>
+        <input
+            v-bind="$attrs"
+            v-model="search"
+            type="text"
+            :placeholder="!multiple && selected.length ? selected[0].label : placeholder"
+            :disabled="disabled"
+            autocomplete="off"
+            @input="onInput"
+            @keydown="onKeydown"
+            @focus="open = true; emit('clearValidationErrors')"
+        >
+        <div v-if="open && !disabled" :class="t.suggest.dropdown">
+            <div v-if="loading" :class="t.suggest.empty">Searching...</div>
+            <template v-else-if="items.length">
+                <div
+                    v-for="(option, index) in items"
+                    :key="option.id"
+                    :class="index === highlighted ? t.suggest.optionActive : t.suggest.option"
+                    @pointerdown.prevent="pick(option)"
+                    @mouseenter="highlighted = index"
+                >
+                    <component :is="optionTemplate" v-if="optionTemplate" :option="option.raw ?? option" />
+                    <template v-else>{{ option.label }}</template>
+                </div>
+            </template>
+            <div v-else-if="allowCustom && search" :class="t.suggest.option" @pointerdown.prevent="submitCustom">
+                Use "{{ search }}"
+            </div>
+            <div v-else :class="t.suggest.empty">No matches</div>
+        </div>
+    </div>
+</template>

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

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

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

@@ -0,0 +1,26 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    modelValue: [String, Number],
+    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="text"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @focus="emit('clearValidationErrors')"
+    >
+</template>

package/src/components/overlay/ShDialog.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { computed, provide, ref, watch } from 'vue'
+import { useDialog } from '../../composables/useDialog.js'
+import { useTheme } from '../../theme/useTheme.js'
+import { SH_DIALOG_CONTEXT } from '../../theme/keys.js'
+
+const props = defineProps({
+    open: Boolean,
+    title: String,
+    size: { type: String, default: 'md' }, // sm | md | lg | xl | full
+    static: Boolean,
+    hideClose: Boolean,
+    // keep the dialog open when a nested ShForm submits successfully
+    retainOnSuccess: Boolean,
+    classes: Object
+})
+const emit = defineEmits(['update:open', 'opened', 'closed'])
+
+const t = useTheme('dialog', computed(() => props.classes))
+const panel = ref(null)
+const rendered = ref(false) // keeps the teleport mounted through leave animation
+const visible = ref(false)  // drives the transitions
+const pulsing = ref(false)  // static-backdrop feedback
+
+const dialog = useDialog({
+    isStatic: () => props.static,
+    onClose: () => emit('update:open', false)
+})
+
+const show = () => {
+    rendered.value = true
+    dialog.show()
+    requestAnimationFrame(() => {
+        visible.value = true
+    })
+    if (!props.open) {
+        emit('update:open', true)
+    }
+}
+
+const close = (reason) => {
+    visible.value = false
+    dialog.close(reason)
+}
+
+const onBackdrop = () => {
+    if (props.static) {
+        // Bootstrap-style attention pulse
+        pulsing.value = true
+        setTimeout(() => { pulsing.value = false }, 150)
+        return
+    }
+    close('backdrop')
+}
+
+watch(() => props.open, (value) => {
+    if (value) {
+        show()
+    } else if (visible.value) {
+        close('prop')
+    }
+}, { immediate: true })
+
+// External Escape close happens through useDialog; sync visible state
+watch(dialog.isOpen, (value) => {
+    if (!value && visible.value) {
+        visible.value = false
+    }
+})
+
+// Nested forms can ask their host dialog to close (replaces the old
+// Bootstrap `.closest('.modal-dialog')` hack)
+provide(SH_DIALOG_CONTEXT, {
+    close: () => close('context'),
+    requestClose: (reason) => {
+        if (reason === 'success') {
+            if (props.retainOnSuccess) {
+                return
+            }
+            // brief delay so the success toast registers before the panel leaves
+            setTimeout(() => close('success'), 600)
+            return
+        }
+        close(reason)
+    }
+})
+
+defineExpose({ show, close })
+</script>
+
+<template>
+    <teleport to="body">
+        <div v-if="rendered" class="fixed inset-0" :style="{ zIndex: dialog.zIndex.value }">
+            <Transition
+                enter-active-class="transition-opacity duration-200 ease-out"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="transition-opacity duration-150 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+            >
+                <div v-show="visible" :class="t.backdrop" @click="onBackdrop" />
+            </Transition>
+            <Transition
+                enter-active-class="transition duration-200 ease-out"
+                enter-from-class="opacity-0 scale-95 translate-y-2"
+                enter-to-class="opacity-100 scale-100 translate-y-0"
+                leave-active-class="transition duration-150 ease-in"
+                leave-from-class="opacity-100 scale-100"
+                leave-to-class="opacity-0 scale-95"
+                @after-enter="panel?.focus(); emit('opened')"
+                @after-leave="rendered = false; emit('closed')"
+            >
+                <div v-show="visible" :class="t.wrapper" @click.self="onBackdrop">
+                    <div
+                        ref="panel"
+                        tabindex="-1"
+                        role="dialog"
+                        aria-modal="true"
+                        :class="[t.panel, t.sizes[size] ?? t.sizes.md, pulsing ? 'scale-[1.02] transition-transform duration-150' : '']"
+                    >
+                        <header v-if="title || $slots.title || !hideClose" :class="t.header">
+                            <slot name="title">
+                                <h3 :class="t.title">{{ title }}</h3>
+                            </slot>
+                            <button v-if="!hideClose" type="button" :class="t.closeBtn" aria-label="Close" @click="close('button')">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </header>
+                        <div :class="t.body">
+                            <slot :close="close" />
+                        </div>
+                        <footer v-if="$slots.footer" :class="t.footer">
+                            <slot name="footer" :close="close" />
+                        </footer>
+                    </div>
+                </div>
+            </Transition>
+        </div>
+    </teleport>
+</template>

package/src/components/overlay/ShDialogBtn.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { ref } from 'vue'
+import ShDialog from './ShDialog.vue'
+import { useTheme } from '../../theme/useTheme.js'
+
+defineProps({
+    title: String,
+    size: { type: String, default: 'md' },
+    static: Boolean,
+    hideClose: Boolean,
+    btnClass: String,
+    classes: Object
+})
+defineEmits(['opened', 'closed'])
+
+const buttons = useTheme('buttons')
+const open = ref(false)
+</script>
+
+<template>
+    <button type="button" :class="btnClass ?? buttons.secondary" @click="open = true">
+        <slot name="trigger">Open</slot>
+    </button>
+    <ShDialog
+        v-model:open="open"
+        :title="title"
+        :size="size"
+        :static="static"
+        :hide-close="hideClose"
+        :classes="classes"
+        @opened="$emit('opened')"
+        @closed="$emit('closed')"
+    >
+        <template #default="{ close }">
+            <slot :close="close" />
+        </template>
+        <template v-if="$slots.footer" #footer="{ close }">
+            <slot name="footer" :close="close" />
+        </template>
+    </ShDialog>
+</template>