@redseed/redseed-ui-vue3 8.30.1 → 8.31.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.30.1",
+    "version": "8.31.1",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",
@@ -14,6 +14,8 @@
         "@heroicons/vue": "2.2.0",
         "@vueuse/components": "14.2.1",
         "@vueuse/core": "14.2.1",
+        "@vueuse/integrations": "14.2.1",
+        "fuse.js": "7.1.0",
         "lodash": "4.17.23",
         "lottie-web": "5.13.0",
         "vue": "3.5.30"

package/src/components/FormField/FormFieldTreeSelect.vue

@@ -0,0 +1,263 @@
+<script setup>
+import { ref, computed, useAttrs } from 'vue'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import FormFieldSlot from './FormFieldSlot.vue'
+import FormFieldSearch from './FormFieldSearch.vue'
+import SelectableTree from './TreeSelectInternal/SelectableTree.vue'
+import Modal from '../Modal/Modal.vue'
+import ButtonSecondary from '../Button/ButtonSecondary.vue'
+import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    fullWidth: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    triggerPlaceholder: {
+        type: String,
+        default: 'Select an option',
+    },
+    modalHeader: {
+        type: String,
+        default: 'Select an option',
+    },
+    searchPlaceholder: {
+        type: String,
+        default: 'Search...',
+    },
+    closeLabel: {
+        type: String,
+        default: 'Close',
+    },
+})
+
+const emit = defineEmits(['change'])
+
+const attrs = useAttrs()
+const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
+
+const model = defineModel({
+    default: null,
+    validator: () => true,
+})
+
+const effectiveId = computed(() => inputId.value || attrs.id)
+
+const show = ref(false)
+function openModal() {
+    if (props.disabled) return
+    show.value = true
+}
+function closeModal() {
+    show.value = false
+}
+
+// Flatten all option trees into a linear list (excluding children references).
+const linear = computed(() => {
+    const out = []
+    const walk = (node) => {
+        const { children, ...rest } = node
+        out.push(rest)
+        if (children && children.length) children.forEach(walk)
+    }
+    props.options.forEach(walk)
+    return out
+})
+
+// Build the label shown in the trigger button.
+const triggerLabel = computed(() => {
+    if (props.multiple) {
+        const count = Array.isArray(model.value) ? model.value.length : 0
+        if (count === 0) return props.triggerPlaceholder
+        return `${count} of ${linear.value.length} selected`
+    }
+    if (model.value === null || model.value === undefined || model.value === '') return props.triggerPlaceholder
+    const found = linear.value.find((o) => o.value === model.value)
+    return found ? found.label : props.triggerPlaceholder
+})
+
+// Search ----------------------------------------------------------------
+const searchInput = ref('')
+
+const searchOptions = {
+    fuseOptions: {
+        keys: ['label'],
+        isCaseSensitive: false,
+        threshold: 0.2,
+    },
+    matchAllWhenSearchEmpty: true,
+}
+
+const { results } = useFuse(searchInput, linear, searchOptions)
+
+const loading = ref(false)
+
+const openChildren = computed(() => {
+    // Force the tree to re-render so each node's local isOpen state resets.
+    loading.value = true
+    setTimeout(() => { loading.value = false }, 1)
+    if (!searchInput.value) return false
+    return linear.value.length !== results.value.length
+})
+
+// Trim the option trees to only the branches that contain matches.
+const searchedTrees = computed(() => {
+    const matchValues = results.value.map((r) => r.item.value)
+    const check = (node) => {
+        if (matchValues.includes(node.value)) return node
+        if (node.children && node.children.length) {
+            const kept = node.children.map(check).filter(Boolean)
+            if (kept.length) return { ...node, children: kept }
+        }
+    }
+    return props.options.map(check).filter(Boolean)
+})
+
+function searchChecker(node) {
+    const matchValues = results.value.map((r) => r.item.value)
+    return matchValues.includes(node.value) && matchValues.length !== linear.value.length
+}
+
+function selectionChecker(node) {
+    if (props.multiple) {
+        return Array.isArray(model.value) && model.value.includes(node.value)
+    }
+    return model.value === node.value
+}
+
+// Selection -------------------------------------------------------------
+function selectOption(node) {
+    if (!props.multiple) {
+        model.value = node.value
+        emit('change', node.value)
+        closeModal()
+        return
+    }
+    if (selectionChecker(node)) return
+    const next = Array.isArray(model.value) ? [...model.value] : []
+    const addCascade = (n) => {
+        if (!next.includes(n.value)) next.push(n.value)
+        if (n.children && n.children.length) n.children.forEach(addCascade)
+    }
+    addCascade(node)
+    model.value = next
+    emit('change', next)
+}
+
+function deselectOption(node) {
+    if (!props.multiple) {
+        model.value = null
+        emit('change', null)
+        return
+    }
+    if (!selectionChecker(node)) return
+    const next = Array.isArray(model.value) ? [...model.value] : []
+    const removeCascade = (n) => {
+        const i = next.indexOf(n.value)
+        if (i >= 0) next.splice(i, 1)
+        if (n.children && n.children.length) n.children.forEach(removeCascade)
+    }
+    removeCascade(node)
+    model.value = next
+    emit('change', next)
+}
+</script>
+
+<template>
+<FormFieldSlot
+    :id="$attrs.id"
+    :class="[$attrs.class, 'rsui-form-field-tree-select']"
+    :required="$attrs.required"
+    :showAsterisk="$attrs.showAsterisk"
+    :compact="$attrs.compact"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+
+    <div class="rsui-form-field-tree-select__group">
+        <button
+            type="button"
+            :class="[
+                'rsui-form-field-tree-select__trigger',
+                { 'rsui-form-field-tree-select__trigger--full': fullWidth },
+                { 'rsui-form-field-tree-select__trigger--disabled': disabled },
+            ]"
+            :id="effectiveId"
+            :aria-describedby="ariaDescribedby"
+            :aria-invalid="ariaInvalid"
+            :aria-required="$attrs.required || undefined"
+            :aria-haspopup="'dialog'"
+            :aria-expanded="show"
+            :disabled="disabled"
+            @click="openModal"
+        >
+            {{ triggerLabel }}
+        </button>
+    </div>
+
+    <Modal :show="show" lg closeable @close="closeModal">
+        <template #header>
+            <div class="rsui-form-field-tree-select__modal-header">
+                <span>
+                    <slot name="modal-header">{{ modalHeader }}</slot>
+                </span>
+            </div>
+        </template>
+
+        <div class="rsui-form-field-tree-select__search">
+            <FormFieldSearch
+                v-model="searchInput"
+                :placeholder="searchPlaceholder"
+            ></FormFieldSearch>
+        </div>
+
+        <div class="rsui-form-field-tree-select__tree">
+            <template v-if="!loading">
+                <SelectableTree
+                    v-for="(tree, i) in searchedTrees"
+                    :key="tree.value ?? i"
+                    :node="tree"
+                    :top="true"
+                    :open="true"
+                    :openChildren="openChildren"
+                    :searchChecker="searchChecker"
+                    :selectionChecker="selectionChecker"
+                    @select="selectOption"
+                    @deselect="deselectOption"
+                ></SelectableTree>
+            </template>
+        </div>
+
+        <template #footer="{ close }">
+            <ButtonSecondary @click="close">
+                {{ closeLabel }}
+            </ButtonSecondary>
+        </template>
+    </Modal>
+
+    <template #help v-if="$slots.help">
+        <slot name="help"></slot>
+    </template>
+
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+</FormFieldSlot>
+</template>

package/src/components/FormField/TreeSelectInternal/SelectableItem.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { ChevronRightIcon } from '@heroicons/vue/24/outline'
+import FormFieldCheckbox from '../FormFieldCheckbox.vue'
+
+const props = defineProps({
+    showOpener: {
+        type: Boolean,
+        default: false,
+    },
+    hasChildren: {
+        type: Boolean,
+        default: false,
+    },
+    isOpen: {
+        type: Boolean,
+        default: false,
+    },
+    isSearched: {
+        type: Boolean,
+        default: false,
+    },
+    isSelected: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['change', 'open'])
+
+const selected = ref(false)
+
+watch(() => props.isSelected, value => selected.value = value, { immediate: true, flush: 'post' })
+
+function change(event) {
+    emit('change', event)
+}
+
+function open() {
+    if (!props.hasChildren) return
+    emit('open')
+}
+
+function clickName() {
+    selected.value = !selected.value
+    emit('change', { target: { checked: selected.value } })
+}
+</script>
+<template>
+<div class="rsui-form-field-tree-select-item">
+    <div class="rsui-form-field-tree-select-item__controls">
+        <div v-if="showOpener"
+            :class="[
+                'rsui-form-field-tree-select-item__opener',
+                hasChildren ? 'rsui-form-field-tree-select-item__opener--clickable' : '',
+            ]"
+            @click="open"
+        >
+            <ChevronRightIcon v-if="hasChildren"
+                :class="[
+                    'rsui-form-field-tree-select-item__opener-icon',
+                    isOpen ? 'rsui-form-field-tree-select-item__opener-icon--open' : '',
+                ]"
+            />
+        </div>
+        <div class="rsui-form-field-tree-select-item__selector">
+            <FormFieldCheckbox
+                v-model="selected"
+                @input="change"
+            >
+                <template #label>
+                    <div :class="[
+                            'rsui-form-field-tree-select-item__name',
+                            isSearched ? 'rsui-form-field-tree-select-item__name--searched' : '',
+                        ]"
+                        @click.stop="clickName"
+                    >
+                        <slot name="name"></slot>
+                    </div>
+                </template>
+            </FormFieldCheckbox>
+        </div>
+    </div>
+</div>
+</template>

package/src/components/FormField/TreeSelectInternal/SelectableTree.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref, computed } from 'vue'
+import SelectableItem from './SelectableItem.vue'
+
+const props = defineProps({
+    node: {
+        type: Object,
+        required: true,
+    },
+    top: {
+        type: Boolean,
+        default: false,
+    },
+    open: {
+        type: Boolean,
+        default: false,
+    },
+    openChildren: {
+        type: Boolean,
+        default: false,
+    },
+    searchChecker: {
+        type: Function,
+        required: true,
+    },
+    selectionChecker: {
+        type: Function,
+        required: true,
+    },
+})
+
+const emit = defineEmits(['select', 'deselect'])
+
+const hasChildren = computed(() => !!props.node.children && !!props.node.children.length)
+
+const showOpener = computed(() => {
+    return (props.top && hasChildren.value) || !props.top
+})
+
+const isOpen = ref(props.open)
+
+function toggleOpen() {
+    if (!hasChildren.value) return
+    isOpen.value = !isOpen.value
+}
+
+function toggleSelect(event) {
+    if (event.target.checked) {
+        emit('select', props.node)
+        return
+    }
+    emit('deselect', props.node)
+}
+</script>
+
+<template>
+<SelectableItem
+    :showOpener="showOpener"
+    :hasChildren="hasChildren"
+    :isOpen="isOpen"
+    :isSearched="searchChecker(node)"
+    :isSelected="selectionChecker(node)"
+    @open="toggleOpen"
+    @change="toggleSelect"
+>
+    <template #name>
+        {{ node.label }}
+    </template>
+</SelectableItem>
+
+<div v-if="hasChildren && isOpen"
+    class="rsui-form-field-tree-select-children"
+>
+    <SelectableTree v-for="child in node.children"
+        :key="child.value"
+        :node="child"
+        :open="openChildren"
+        :openChildren="openChildren"
+        :searchChecker="searchChecker"
+        :selectionChecker="selectionChecker"
+        @select="(n) => $emit('select', n)"
+        @deselect="(n) => $emit('deselect', n)"
+    >
+    </SelectableTree>
+</div>
+</template>

package/src/components/FormField/index.js

@@ -13,6 +13,7 @@ import FormFieldSlot from './FormFieldSlot.vue'
 import FormFieldText from './FormFieldText.vue'
 import FormFieldTextarea from './FormFieldTextarea.vue'
 import FormFieldTextSuffix from './FormFieldTextSuffix.vue'
+import FormFieldTreeSelect from './FormFieldTreeSelect.vue'
 import FormFieldUploaderWrapper from './FormFieldUploaderWrapper.vue'
 export {
     FormFieldCheckbox,
@@ -30,5 +31,6 @@ export {
     FormFieldText,
     FormFieldTextarea,
     FormFieldTextSuffix,
+    FormFieldTreeSelect,
     FormFieldUploaderWrapper,
 }

package/src/components/Image/Image.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
-import { useImage } from '@vueuse/core'
 import Icon from '../Icon/Icon.vue'
 import { PhotoIcon } from '@heroicons/vue/24/outline'
 
@@ -31,108 +30,70 @@ const props = defineProps({
     },
 })
 
-const imageElement = ref(null)
-
-const large = computed(() => props.largeUrl || props.originalUrl)
-const medium = computed(() => props.mediumUrl || props.originalUrl)
-const small = computed(() => props.smallUrl || props.originalUrl)
-
-const originalOptions = computed(() => ({
-    src: props.originalUrl,
-}))
-
-const largeOptions = computed(() => ({
-    src: large.value,
-}))
-
-const mediumOptions = computed(() => ({
-    src: medium.value,
-}))
-
-const smallOptions = computed(() => ({
-    src: small.value,
-}))
+const emit = defineEmits(['loading', 'error', 'ready'])
 
-const originalImage = ref(useImage(originalOptions.value))
-const largeImage = ref(useImage(largeOptions.value))
-const mediumImage = ref(useImage(mediumOptions.value))
-const smallImage = ref(useImage(smallOptions.value))
+const imageElement = ref(null)
+const isLoaded = ref(false)
+const error = ref(null)
 
 const isEmpty = computed(() => !props.originalUrl)
-
-const isLoading = computed(() => {
-    if (isEmpty.value) return false
-
-    return originalImage.value.isLoading
-        || largeImage.value.isLoading
-        || mediumImage.value.isLoading
-        || smallImage.value.isLoading
+const isLoading = computed(() => !isEmpty.value && !isLoaded.value && !error.value)
+const isReady = computed(() => isLoaded.value)
+
+// Reset state when the source URL changes so the new image goes through
+// loading → ready/error again.
+watch(() => props.originalUrl, () => {
+    isLoaded.value = false
+    error.value = null
 })
 
-const isReady = computed(() => {
-    if (isEmpty.value) return false
-
-    return originalImage.value.isReady
-        && largeImage.value.isReady
-        && mediumImage.value.isReady
-        && smallImage.value.isReady
-})
-
-const error = computed(() => {
-    if (isEmpty.value) return false
-
-    return originalImage.value.error
-        || largeImage.value.error
-        || mediumImage.value.error
-        || smallImage.value.error
-})
-
-const isLoaded = ref(false)
-
-const emit = defineEmits(['loading', 'error', 'ready'])
-
 watch(isLoading, () => {
-    if (isLoading.value) emit('loading', isLoading.value)
+    if (isLoading.value) emit('loading', true)
 }, { immediate: true, flush: 'post' })
 
 watch(error, () => {
     if (error.value) emit('error', error.value)
-}, { immediate: true, flush: 'post' })
+}, { flush: 'post' })
 
 watch(isLoaded, () => {
-    if (isLoaded.value && isReady.value) {
+    if (isLoaded.value) {
         emit('ready', {
-            ready: isReady.value,
+            ready: true,
             imageElement: imageElement.value,
         })
     }
-}, { immediate: true, flush: 'post' })
+}, { flush: 'post' })
 
-const sources = computed(() => {
-    return [
-        {
-            media: '(min-width:1280px)',
-            srcset: encodeURI(large.value)
-        },
-        {
-            media: '(min-width:640px)',
-            srcset: encodeURI(medium.value)
-        },
-        {
-            media: '(min-width:320px)',
-            srcset: encodeURI(small.value)
-        },
-    ]
-})
+function handleLoad() {
+    isLoaded.value = true
+}
+
+function handleError(event) {
+    error.value = event
+}
+
+const sources = computed(() => [
+    {
+        media: '(min-width:1280px)',
+        srcset: encodeURI(props.largeUrl || props.originalUrl),
+    },
+    {
+        media: '(min-width:640px)',
+        srcset: encodeURI(props.mediumUrl || props.originalUrl),
+    },
+    {
+        media: '(min-width:320px)',
+        srcset: encodeURI(props.smallUrl || props.originalUrl),
+    },
+])
 
 const imageClass = computed(() => [
     'rsui-image',
     {
         'rsui-image--rounded': props.rounded,
         'rsui-image--empty': isEmpty.value,
-        'rsui-image--error': error.value,
-    }
-
+        'rsui-image--error': !!error.value,
+    },
 ])
 </script>
 <template>
@@ -146,29 +107,35 @@ const imageClass = computed(() => [
             </Icon>
         </slot>
     </div>
-    <div v-else-if="isLoading"
-        class="rsui-image__message"
-    >
-        <slot name="loading"></slot>
-    </div>
-    <div v-else-if="error"
-        class="rsui-image__message"
-    >
-        <slot name="error">
-            Could not load image
-        </slot>
-    </div>
-    <picture v-else>
-        <source v-for="{ media, srcset } in sources"
-            :key="media"
-            :media="media"
-            :srcset="srcset"
+    <template v-else>
+        <!-- The <picture> stays mounted (v-show, not v-if) so the <img> drives
+             load/error state via its native events. Hidden while loading; the
+             browser still fetches the source because the element is in the DOM. -->
+        <picture v-show="isReady">
+            <source v-for="{ media, srcset } in sources"
+                :key="media"
+                :media="media"
+                :srcset="srcset"
+            >
+            <img ref="imageElement"
+                :src="originalUrl"
+                :alt="alt"
+                @load="handleLoad"
+                @error="handleError"
+            >
+        </picture>
+        <div v-if="isLoading"
+            class="rsui-image__message"
         >
-        <img ref="imageElement"
-            :src="originalUrl"
-            :alt="alt"
-            @load="isLoaded = true"
+            <slot name="loading"></slot>
+        </div>
+        <div v-else-if="error"
+            class="rsui-image__message"
         >
-    </picture>
+            <slot name="error">
+                Could not load image
+            </slot>
+        </div>
+    </template>
 </div>
 </template>