gardenjs 1.6.8 → 1.7.0

package/src/client/components/stage/panel/controls/ColorPickerControl.svelte

@@ -0,0 +1,185 @@
+<script>
+  let { value, onChange } = $props()
+
+  function colorToHex(color) {
+    if (!color) return '#000000'
+
+    const str = String(color).trim()
+
+    if (/^#[0-9A-Fa-f]{6}$/.test(str)) return str
+
+    if (/^#[0-9A-Fa-f]{3}$/.test(str)) {
+      return '#' + str[1] + str[1] + str[2] + str[2] + str[3] + str[3]
+    }
+
+    const temp = document.createElement('div')
+    temp.style.color = str
+    document.body.appendChild(temp)
+    const computed = window.getComputedStyle(temp).color
+    document.body.removeChild(temp)
+
+    const match = computed.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/)
+    if (match) {
+      const [, r, g, b] = match
+      return (
+        '#' +
+        [r, g, b].map((n) => parseInt(n).toString(16).padStart(2, '0')).join('')
+      )
+    }
+
+    return '#000000'
+  }
+
+  function hasTransparency(color) {
+    if (!color) return false
+    const str = String(color).trim().toLowerCase()
+    return /rgba\s*\(/.test(str) || /hsla\s*\(/.test(str)
+  }
+
+  function handleColorPickerClick() {
+    if (isUnset) {
+      onChange('#000000')
+    }
+  }
+
+  function handleTextInput(e) {
+    const newValue = e.currentTarget.value.trim()
+    if (newValue === '') {
+      onChange(undefined)
+    } else {
+      onChange(newValue)
+    }
+  }
+
+  let isUnset = $derived(!value || value === undefined || value === null)
+  let hexValue = $derived(colorToHex(value))
+  let showPreview = $derived(hasTransparency(value))
+</script>
+
+<div class="row">
+  <div class="color-picker-wrapper" class:picker-unset={isUnset}>
+    <input
+      class="input"
+      type="color"
+      value={hexValue}
+      onfocus={handleColorPickerClick}
+      oninput={(e) => onChange(e.currentTarget.value)}
+    />
+  </div>
+  {#if showPreview}
+    <div
+      class="alpha-preview"
+      style:background-color={value || '#000000'}
+    ></div>
+  {/if}
+  <input
+    class="input"
+    type="text"
+    value={value || ''}
+    oninput={handleTextInput}
+  />
+  <div class="unset-area">
+    {#if isUnset}
+      <span class="unset-info">is not set</span>
+    {:else}
+      <button class="btn_unset" onclick={() => onChange(undefined)}>
+        <svg
+          class="close"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg
+        >
+        unset
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  @import './button_unset.scss';
+  @import './input.scss';
+
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .color-picker-wrapper {
+    position: relative;
+    width: 2.5rem;
+    height: 1.469rem;
+    /* border: 1px solid var(--c-primary); */
+    border-radius: 0.125rem;
+    overflow: hidden;
+  }
+
+  .color-picker-wrapper.picker-unset {
+    border: 1px solid var(--c-primary);
+  }
+
+  .color-picker-wrapper.picker-unset input[type='color'] {
+    opacity: 0;
+  }
+
+  .color-picker-wrapper.picker-unset::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      150deg,
+      transparent calc(50% - 1px),
+      red calc(50% - 1px),
+      red calc(50% + 1px),
+      transparent calc(50% + 1px)
+    );
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  input[type='color'] {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: none;
+    border-radius: 0.125rem;
+    cursor: pointer;
+  }
+
+  .input {
+    max-width: 12.5rem;
+  }
+  .alpha-preview {
+    width: 2.5rem;
+    height: 1.469rem;
+    border-radius: 0.125rem;
+    background-image:
+      linear-gradient(45deg, var(--c-basic-100) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--c-basic-100) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--c-basic-100) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--c-basic-100) 75%);
+    background-size: 8px 8px;
+    background-position:
+      0 0,
+      0 4px,
+      4px -4px,
+      -4px 0px;
+    overflow: hidden;
+  }
+  input[type='color']::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  input[type='color']::-webkit-color-swatch {
+    border: none;
+    border-radius: 0.063rem;
+  }
+</style>

package/src/client/components/stage/panel/controls/DateControl.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  let {
+    value,
+    onChange,
+  }: { value: string; onChange: (value: string) => void } = $props()
+
+  let isUnset = $derived(!value || value === undefined || value === null)
+</script>
+
+<div class="row">
+  <input
+    class="input"
+    type="date"
+    value={value ?? ''}
+    onchange={(e) => {
+      const newValue = (e.currentTarget as HTMLInputElement).value
+      onChange(newValue || (undefined as any))
+    }}
+  />
+  <div class="unset-area">
+    {#if isUnset}
+      <span class="unset-info">is not set</span>
+    {:else}
+      <button class="btn_unset" onclick={() => onChange(undefined as any)}>
+        <svg
+          class="close"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+        unset
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  @use './input.scss';
+  @use './button_unset.scss';
+
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  input[type='date'] {
+    cursor: pointer;
+    flex: 1;
+  }
+
+  input[type='date']::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    color: var(--c-primary);
+  }
+</style>

package/src/client/components/stage/panel/controls/DatetimeControl.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  let {
+    value,
+    onChange,
+  }: { value: string; onChange: (value: string) => void } = $props()
+
+  let isUnset = $derived(!value || value === undefined || value === null)
+</script>
+
+<div class="row">
+  <input
+    class="input"
+    type="datetime-local"
+    value={value ?? ''}
+    onchange={(e) => {
+      const newValue = (e.currentTarget as HTMLInputElement).value
+      onChange(newValue || (undefined as any))
+    }}
+  />
+  <div class="unset-area">
+    {#if isUnset}
+      <span class="unset-info">is not set</span>
+    {:else}
+      <button class="btn_unset" onclick={() => onChange(undefined as any)}>
+        <svg
+          class="close"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+        unset
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  @use './input.scss';
+  @use './button_unset.scss';
+
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  input[type='datetime-local'] {
+    cursor: pointer;
+    flex: 1;
+  }
+
+  input[type='datetime-local']::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    color: var(--c-primary);
+  }
+</style>

package/src/client/components/stage/panel/controls/JsonControl.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  let {
+    value,
+    onChange,
+  }: {
+    value: string
+    onChange: (value: string) => void
+  } = $props()
+</script>
+
+<textarea
+  class="input textarea"
+  rows="10"
+  value={JSON.stringify(value ?? '', null, 2)}
+  onchange={(e) => {
+    onChange(JSON.parse(e.currentTarget.value ?? ''))
+  }}
+></textarea>
+
+<style lang="scss">
+  @use './input.scss';
+
+  .textarea {
+    resize: vertical;
+    height: auto;
+    line-height: 1.4;
+    padding: 0.375rem 0.5rem;
+  }
+</style>

package/src/client/components/stage/panel/controls/MultiselectControl.svelte

@@ -0,0 +1,354 @@
+<script lang="ts">
+  let {
+    value,
+    onChange,
+    options = [],
+    control = 'dropdown',
+  }: {
+    value: string[]
+    onChange: (value: string[]) => void
+    options?: string[] | { label: string; value: string }[]
+    control?: 'dropdown' | 'checkboxes'
+  } = $props()
+
+  let isUnset = $derived(
+    value === undefined || value === null || value.length === 0
+  )
+
+  let normalizedOptions = $derived(
+    options.map((opt) =>
+      typeof opt === 'string' ? { label: opt, value: opt } : opt
+    )
+  )
+
+  let isOpen = $state(false)
+
+  function toggleOption(optionValue: string) {
+    const newValue = value?.includes(optionValue)
+      ? value.filter((v) => v !== optionValue)
+      : [...(value || []), optionValue]
+    onChange(newValue.length > 0 ? newValue : [])
+  }
+
+  function handleUnset() {
+    onChange([])
+    isOpen = false
+  }
+</script>
+
+{#if control === 'dropdown'}
+  <div class="row">
+    <div class="select-wrapper">
+      <button
+        class="select-button"
+        onclick={() => (isOpen = !isOpen)}
+        type="button"
+      >
+        <span class="selected-text">
+          {#if isUnset}
+            <span class="placeholder">Select...</span>
+          {:else}
+            {value.length} selected
+          {/if}
+        </span>
+        <svg
+          class="arrow"
+          class:open={isOpen}
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </button>
+      {#if isOpen}
+        <div class="dropdown">
+          {#each normalizedOptions as option (option.value)}
+            <label class="dropdown-item">
+              <input
+                type="checkbox"
+                checked={value?.includes(option.value) || false}
+                onchange={() => toggleOption(option.value)}
+              />
+              <span>{option.label}</span>
+            </label>
+          {/each}
+        </div>
+      {/if}
+    </div>
+    <div class="unset-area">
+      {#if !isUnset}
+        <button class="btn_unset" onclick={handleUnset}>
+          <svg
+            class="close"
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+          unset
+        </button>
+      {:else}
+        <span class="unset-info">is not set</span>
+      {/if}
+    </div>
+  </div>
+{:else if control === 'checkboxes'}
+  <div class="checkboxes-container">
+    {#each normalizedOptions as option (option.value)}
+      <label class="checkbox-item">
+        <input
+          type="checkbox"
+          checked={value?.includes(option.value) || false}
+          onchange={() => toggleOption(option.value)}
+        />
+        <span>{option.label}</span>
+      </label>
+    {/each}
+  </div>
+  <div class="unset-area">
+    {#if !isUnset}
+      <button class="btn_unset checkboxes-btn-unset" onclick={handleUnset}>
+        <svg
+          class="close"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+        unset
+      </button>
+    {:else}
+      <div class="unset-info checkboxes-unset">is not set</div>
+    {/if}
+  </div>
+{/if}
+
+<style lang="scss">
+  @use './button_unset.scss';
+
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .select-wrapper {
+    flex: 1;
+    position: relative;
+  }
+
+  .select-button {
+    width: 100%;
+    height: 1.5rem;
+    padding: 0.125rem 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid var(--c-primary);
+    border-radius: 0.125rem;
+    background-color: var(--c-basic-0);
+    font-size: 0.938rem;
+    color: var(--c-basic-800);
+    cursor: pointer;
+  }
+
+  .select-button:focus {
+    outline: none;
+    background-color: var(--c-primary-bg);
+    box-shadow: 0 0 0 1px var(--c-primary);
+  }
+
+  .selected-text {
+    flex: 1;
+    text-align: left;
+  }
+
+  .placeholder {
+    color: var(--c-basic-500);
+  }
+
+  .arrow {
+    transition: transform 0.2s;
+    color: var(--c-basic-600);
+  }
+
+  .arrow.open {
+    transform: rotate(180deg);
+  }
+
+  .dropdown {
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    right: 0;
+    max-height: 200px;
+    overflow-y: auto;
+    background: var(--c-basic-0);
+    border: 1px solid var(--c-primary);
+    border-radius: 0.125rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+  }
+
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    cursor: pointer;
+    font-size: 0.938rem;
+    color: var(--c-basic-700);
+  }
+
+  .dropdown-item:hover {
+    background-color: var(--c-primary-bg);
+    color: var(--c-basic-800);
+  }
+
+  .dropdown-item span {
+    user-select: none;
+  }
+
+  .dropdown-item input[type='checkbox'] {
+    cursor: pointer;
+    margin: 0;
+    width: 1.125rem;
+    height: 1.125rem;
+    border: 1px solid var(--c-primary);
+    background-color: var(--c-basic-0);
+  }
+
+  @supports (appearance: none) {
+    .dropdown-item input[type='checkbox'] {
+      appearance: none;
+      position: relative;
+      border-radius: 0.125rem;
+      transition: all 0.15s ease;
+    }
+
+    .dropdown-item input[type='checkbox']:hover {
+      border-color: var(--c-primary);
+    }
+
+    .dropdown-item input[type='checkbox']:checked {
+      border-color: var(--c-primary);
+      background: var(--c-primary);
+    }
+
+    .dropdown-item input[type='checkbox']:checked::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(45deg);
+      width: 0.313rem;
+      height: 0.563rem;
+      border: 0.125rem solid var(--c-basic-0);
+      border-top: 0;
+      border-left: 0;
+    }
+
+    .dropdown-item input[type='checkbox']:focus {
+      outline: none;
+      box-shadow: 0 0 0 1px var(--c-primary);
+    }
+  }
+
+  .checkboxes-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 0.938rem;
+    color: var(--c-basic-700);
+  }
+
+  .checkbox-item:hover {
+    color: var(--c-basic-800);
+  }
+
+  .checkbox-item span {
+    user-select: none;
+  }
+
+  .checkbox-item input[type='checkbox'] {
+    cursor: pointer;
+    margin: 0;
+    width: 1.125rem;
+    height: 1.125rem;
+    border: 1px solid var(--c-primary);
+    background-color: var(--c-basic-0);
+  }
+
+  @supports (appearance: none) {
+    .checkbox-item input[type='checkbox'] {
+      appearance: none;
+      position: relative;
+      border-radius: 0.125rem;
+      transition: all 0.15s ease;
+    }
+
+    .checkbox-item input[type='checkbox']:hover {
+      border-color: var(--c-primary);
+    }
+
+    .checkbox-item input[type='checkbox']:checked {
+      border-color: var(--c-primary);
+      background: var(--c-primary);
+    }
+
+    .checkbox-item input[type='checkbox']:checked::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(45deg);
+      width: 0.313rem;
+      height: 0.563rem;
+      border: 0.125rem solid var(--c-basic-0);
+      border-top: 0;
+      border-left: 0;
+    }
+
+    .checkbox-item input[type='checkbox']:focus {
+      outline: none;
+      box-shadow: 0 0 0 1px var(--c-primary);
+    }
+  }
+
+  .checkboxes-unset,
+  .checkboxes-btn-unset {
+    margin: 0.75rem 0 0;
+  }
+
+  .checkboxes-unset {
+    line-height: 1.25rem;
+  }
+</style>