|
| 1 | +<!-- |
| 2 | + ~ Copyright 2025 - 2026 Zigflow authors <https://github.com/zigflow/studio/graphs/contributors> |
| 3 | + ~ |
| 4 | + ~ Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | + ~ you may not use this file except in compliance with the License. |
| 6 | + ~ You may obtain a copy of the License at |
| 7 | + ~ |
| 8 | + ~ http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | + ~ |
| 10 | + ~ Unless required by applicable law or agreed to in writing, software |
| 11 | + ~ distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | + ~ See the License for the specific language governing permissions and |
| 14 | + ~ limitations under the License. |
| 15 | + --> |
| 16 | + |
| 17 | +<!-- |
| 18 | + Two-part value selector: [ Source ▼ ] [ Value input ] |
| 19 | +
|
| 20 | + Source modes: |
| 21 | + input — dropdown of input schema paths → stored as ${ $input.<path> } |
| 22 | + literal — plain text input → stored verbatim |
| 23 | + expression — text input → stored verbatim (full ${ } allowed) |
| 24 | +--> |
| 25 | + |
| 26 | +<script lang="ts"> |
| 27 | + import { t } from '$lib/i18n/index.svelte'; |
| 28 | +
|
| 29 | + import { |
| 30 | + type ValueSource, |
| 31 | + buildInputValue, |
| 32 | + detectSource, |
| 33 | + parseInputPath, |
| 34 | + } from './value-source'; |
| 35 | +
|
| 36 | + interface Props { |
| 37 | + /** The stored value string (e.g. `${ $input.items }` or `"hello"`). */ |
| 38 | + value: string; |
| 39 | + /** Flat dot-notation paths extracted from the input schema. */ |
| 40 | + inputPaths: string[]; |
| 41 | + /** Emitted whenever the stored value changes. */ |
| 42 | + onchange: (value: string) => void; |
| 43 | + /** Optional aria-label for the value input / select. */ |
| 44 | + ariaLabel?: string; |
| 45 | + } |
| 46 | +
|
| 47 | + let { value, inputPaths, onchange, ariaLabel = '' }: Props = $props(); |
| 48 | +
|
| 49 | + // --------------------------------------------------------------------------- |
| 50 | + // Derive initial source + inner value from the incoming stored value. |
| 51 | + // Re-derived whenever `value` changes from the outside (e.g. on reload). |
| 52 | + // --------------------------------------------------------------------------- |
| 53 | +
|
| 54 | + // Initialize with defaults; $effect below sets real values on first run |
| 55 | + // and re-syncs whenever the parent `value` prop changes. |
| 56 | + let source: ValueSource = $state('literal'); |
| 57 | + let innerValue: string = $state(''); |
| 58 | +
|
| 59 | + // Sync local state from the external `value` prop. |
| 60 | + // Only reads `value` (the prop) — no circular dependency. |
| 61 | + $effect(() => { |
| 62 | + const newSource = detectSource(value); |
| 63 | + source = newSource; |
| 64 | + innerValue = newSource === 'input' ? parseInputPath(value) : value; |
| 65 | + }); |
| 66 | +
|
| 67 | + // --------------------------------------------------------------------------- |
| 68 | + // Handlers |
| 69 | + // --------------------------------------------------------------------------- |
| 70 | +
|
| 71 | + function handleSourceChange(newSource: ValueSource): void { |
| 72 | + source = newSource; |
| 73 | + // Reset inner value and emit a sensible stored value. |
| 74 | + if (newSource === 'input') { |
| 75 | + const firstPath = inputPaths[0] ?? ''; |
| 76 | + innerValue = firstPath; |
| 77 | + onchange(firstPath ? buildInputValue(firstPath) : ''); |
| 78 | + } else { |
| 79 | + innerValue = ''; |
| 80 | + onchange(''); |
| 81 | + } |
| 82 | + } |
| 83 | +
|
| 84 | + function handleInputPathChange(path: string): void { |
| 85 | + innerValue = path; |
| 86 | + onchange(path ? buildInputValue(path) : ''); |
| 87 | + } |
| 88 | +
|
| 89 | + function handleTextChange(text: string): void { |
| 90 | + innerValue = text; |
| 91 | + onchange(text); |
| 92 | + } |
| 93 | +</script> |
| 94 | + |
| 95 | +<div class="vss"> |
| 96 | + <select |
| 97 | + class="vss-source" |
| 98 | + aria-label={t('valueSource.sourceLabel')} |
| 99 | + value={source} |
| 100 | + onchange={(e) => handleSourceChange(e.currentTarget.value as ValueSource)} |
| 101 | + > |
| 102 | + <option value="input">{t('valueSource.input')}</option> |
| 103 | + <option value="literal">{t('valueSource.literal')}</option> |
| 104 | + <option value="expression">{t('valueSource.expression')}</option> |
| 105 | + </select> |
| 106 | + |
| 107 | + {#if source === 'input'} |
| 108 | + {#if inputPaths.length === 0} |
| 109 | + <span class="vss-no-paths">{t('valueSource.noInputPaths')}</span> |
| 110 | + {:else} |
| 111 | + <select |
| 112 | + class="vss-value vss-value--select" |
| 113 | + aria-label={ariaLabel || t('valueSource.valueLabel')} |
| 114 | + value={innerValue} |
| 115 | + onchange={(e) => handleInputPathChange(e.currentTarget.value)} |
| 116 | + > |
| 117 | + {#each inputPaths as path (path)} |
| 118 | + <option value={path}>{path}</option> |
| 119 | + {/each} |
| 120 | + </select> |
| 121 | + {/if} |
| 122 | + {:else} |
| 123 | + <input |
| 124 | + class="vss-value vss-value--text" |
| 125 | + type="text" |
| 126 | + aria-label={ariaLabel || t('valueSource.valueLabel')} |
| 127 | + value={innerValue} |
| 128 | + oninput={(e) => handleTextChange(e.currentTarget.value)} |
| 129 | + /> |
| 130 | + {/if} |
| 131 | +</div> |
| 132 | + |
| 133 | +<style> |
| 134 | + .vss { |
| 135 | + display: flex; |
| 136 | + gap: 0.375rem; |
| 137 | + align-items: center; |
| 138 | + width: 100%; |
| 139 | + } |
| 140 | +
|
| 141 | + .vss-source { |
| 142 | + flex-shrink: 0; |
| 143 | + padding: 0.2rem 0.375rem; |
| 144 | + border: 1px solid #ddd; |
| 145 | + border-radius: 4px; |
| 146 | + font-size: 0.78rem; |
| 147 | + color: #444; |
| 148 | + background: #fafafa; |
| 149 | + cursor: pointer; |
| 150 | + } |
| 151 | +
|
| 152 | + .vss-source:focus { |
| 153 | + outline: none; |
| 154 | + border-color: #1a56cc; |
| 155 | + box-shadow: 0 0 0 2px rgba(26, 86, 204, 0.15); |
| 156 | + } |
| 157 | +
|
| 158 | + .vss-value { |
| 159 | + flex: 1; |
| 160 | + min-width: 0; |
| 161 | + padding: 0.2rem 0.375rem; |
| 162 | + border: 1px solid #ddd; |
| 163 | + border-radius: 4px; |
| 164 | + font-size: 0.78rem; |
| 165 | + box-sizing: border-box; |
| 166 | + } |
| 167 | +
|
| 168 | + .vss-value--text { |
| 169 | + font-family: monospace; |
| 170 | + color: #111; |
| 171 | + background: #fff; |
| 172 | + } |
| 173 | +
|
| 174 | + .vss-value--select { |
| 175 | + color: #111; |
| 176 | + background: #fff; |
| 177 | + cursor: pointer; |
| 178 | + } |
| 179 | +
|
| 180 | + .vss-value:focus { |
| 181 | + outline: none; |
| 182 | + border-color: #1a56cc; |
| 183 | + box-shadow: 0 0 0 2px rgba(26, 86, 204, 0.15); |
| 184 | + } |
| 185 | +
|
| 186 | + .vss-no-paths { |
| 187 | + flex: 1; |
| 188 | + font-size: 0.75rem; |
| 189 | + color: #999; |
| 190 | + font-style: italic; |
| 191 | + padding: 0.2rem 0; |
| 192 | + } |
| 193 | +</style> |
0 commit comments