@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/ColorField.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+/**
+ * A colour swatch that opens a picker: the colour square, a hex box, and
+ * (with `alpha`) an opacity number, or (with `allowNone`) a "None" choice.
+ * The value is a hex string, `#rrggbb` or `#rrggbbaa` once it is
+ * see-through, or `none`. Other text (a colour name typed in a workflow) is
+ * kept and shown as it is until a pick replaces it. Sits on the kit Popover,
+ * so it follows the swatch on scroll and closes on Escape or a click
+ * outside. Works on the canvas (`size="sm"`) and in the manager.
+ *
+ *   <ColorField v-model="labelColor" alpha allow-none size="sm" aria-label="Label band" />
+ */
+import { computed, ref, watch } from "vue";
+import HsvPicker from "./HsvPicker.vue";
+import Popover from "./Popover.vue";
+import WpNumber from "./WpNumber.vue";
+import WpButton from "./WpButton.vue";
+import { rgbToHex } from "./hsv";
+
+const props = withDefaults(defineProps<{
+  modelValue: string;
+  /** Offer an opacity number (writes `#rrggbbaa`). */
+  alpha?: boolean | undefined;
+  /** Offer "None" (writes `none`). */
+  allowNone?: boolean | undefined;
+  size?: "sm" | "md" | undefined;
+  ariaLabel?: string | undefined;
+  disabled?: boolean | undefined;
+  dataTest?: string | undefined;
+}>(), { alpha: false, allowNone: false, size: "sm", ariaLabel: "Colour", disabled: false, dataTest: undefined });
+
+const emit = defineEmits<{ "update:modelValue": [value: string] }>();
+
+const HEX = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+
+/** `#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa` → `{ rgb: "#rrggbb", alpha: 0-255 }`. */
+function parse(value: string): { rgb: string; alpha: number } | null {
+  const v = value.trim();
+  if (!HEX.test(v)) return null;
+  let h = v.slice(1).toLowerCase();
+  if (h.length <= 4) h = h.split("").map((c) => c + c).join("");
+  return { rgb: `#${h.slice(0, 6)}`, alpha: h.length === 8 ? parseInt(h.slice(6), 16) : 255 };
+}
+function compose(rgb: string, alpha: number): string {
+  const a = Math.max(0, Math.min(255, Math.round(alpha)));
+  return a >= 255 ? rgb : `${rgb}${a.toString(16).padStart(2, "0")}`;
+}
+
+const open = ref(false);
+const isNone = computed(() => props.modelValue.trim().toLowerCase() === "none");
+const parsed = computed(() => parse(props.modelValue));
+const BLACK = rgbToHex({ r: 0, g: 0, b: 0 });
+const rgb = computed(() => parsed.value?.rgb ?? BLACK);
+const alphaValue = computed(() => (parsed.value ? parsed.value.alpha : 255));
+const opacity = computed(() => Math.round((alphaValue.value / 255) * 100));
+
+const shown = computed(() => (isNone.value ? "none" : props.modelValue.trim() || "none"));
+const swatch = computed(() => {
+  if (isNone.value) return "transparent";
+  const p = parsed.value;
+  if (!p) return props.modelValue;
+  return `rgba(${parseInt(p.rgb.slice(1, 3), 16)}, ${parseInt(p.rgb.slice(3, 5), 16)}, ${parseInt(p.rgb.slice(5, 7), 16)}, ${p.alpha / 255})`;
+});
+
+const draft = ref(props.modelValue);
+watch(() => props.modelValue, (v) => { draft.value = v; });
+watch(open, (v) => { if (v) draft.value = props.modelValue; });
+
+function onHsv(hex: string): void {
+  emit("update:modelValue", compose(hex, props.alpha ? alphaValue.value : 255));
+}
+function onOpacity(pct: number | null): void {
+  if (pct === null) return;
+  emit("update:modelValue", compose(rgb.value, (pct / 100) * 255));
+}
+function onDraft(ev: Event): void {
+  const v = (ev.target as HTMLInputElement).value.trim();
+  draft.value = v;
+  const p = parse(v);
+  if (p) emit("update:modelValue", compose(p.rgb, props.alpha ? p.alpha : 255));
+}
+function pickNone(): void {
+  emit("update:modelValue", "none");
+  open.value = false;
+}
+</script>
+
+<template>
+  <Popover v-model:open="open" :label="ariaLabel">
+    <template #trigger="{ props: triggerProps }">
+      <button
+        v-bind="triggerProps"
+        type="button"
+        class="wp-color-field wp-field-box"
+        :class="[`wp-color-field--${size}`, `wp-field-box--${size}`, { 'is-none': isNone }]"
+        :disabled="disabled"
+        :aria-label="`${ariaLabel}: ${shown}`"
+        :data-test="dataTest"
+      >
+        <span class="wp-color-field__chip" aria-hidden="true">
+          <span class="wp-color-field__fill" :style="{ background: swatch }" />
+        </span>
+        <span class="wp-color-field__value" aria-hidden="true">{{ shown }}</span>
+      </button>
+    </template>
+    <div class="wp-color-field__panel" @keydown.stop>
+      <HsvPicker :model-value="rgb" :aria-label="ariaLabel" @update:model-value="onHsv" />
+      <div class="wp-color-field__row">
+        <input
+          class="wp-color-field__hex wp-field-box wp-field-box--sm"
+          :value="draft"
+          :aria-label="`${ariaLabel} hex`"
+          spellcheck="false"
+          :data-test="dataTest ? `${dataTest}-hex` : undefined"
+          @change="onDraft"
+          @keydown.enter="onDraft"
+        >
+        <WpNumber
+          v-if="alpha"
+          class="wp-color-field__alpha"
+          :model-value="isNone ? 0 : opacity"
+          :min="0"
+          :max="100"
+          suffix="%"
+          size="sm"
+          :aria-label="`${ariaLabel} opacity`"
+          :data-test="dataTest ? `${dataTest}-alpha` : undefined"
+          @update:model-value="onOpacity"
+        />
+      </div>
+      <WpButton
+        v-if="allowNone"
+        size="sm"
+        variant="ghost"
+        icon="pi-ban"
+        :pressed="isNone"
+        :data-test="dataTest ? `${dataTest}-none` : undefined"
+        @click="pickNone"
+      >None</WpButton>
+    </div>
+  </Popover>
+</template>
+
+<style scoped src="./field.css"></style>
+
+<style scoped>
+.wp-color-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  height: var(--wp-field-h);
+  padding: 0 8px 0 3px;
+  font-family: var(--wp-font-mono, monospace);
+  cursor: pointer;
+}
+.wp-color-field__chip {
+  position: relative;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  border: 1px solid var(--wp-border-strong);
+  border-radius: min(3px, var(--wp-radius-cap, 999px));
+  /* Checks show through a see-through colour. */
+  background: repeating-conic-gradient(var(--wp-bg-4) 0 25%, var(--wp-bg-1) 0 50%) 0 0 / 8px 8px;
+}
+.wp-color-field__fill { position: absolute; inset: 0; }
+.wp-color-field.is-none .wp-color-field__chip::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--wp-danger) 50%, transparent calc(50% + 1px));
+}
+.wp-color-field__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-color-field.is-none .wp-color-field__value { color: var(--wp-text-dim); font-family: var(--wp-font-sans, sans-serif); }
+
+.wp-color-field__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 200px;
+  padding: 0;
+}
+.wp-color-field__row { display: flex; gap: 6px; align-items: center; }
+.wp-color-field__hex { flex: 1; min-width: 0; height: var(--wp-field-h); padding: 0 6px; font-family: var(--wp-font-mono, monospace); }
+.wp-color-field__alpha { width: 72px; flex: none; }
+</style>

package/src/ColorPicker.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import Popover from "./Popover.vue";
+import Input from "./Input.vue";
+import HsvPicker from "./HsvPicker.vue";
+import { COLOUR_PRESETS } from "./colour-presets";
+
+interface Props {
+  modelValue: string;
+  presets?: string[] | undefined;
+  ariaLabel?: string | undefined;
+  /** Swatch and chevron only, for a tight spot such as a name row. */
+  compact?: boolean | undefined;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  presets: () => [...COLOUR_PRESETS],
+  ariaLabel: undefined,
+  compact: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const HEX_RE = /^#[0-9a-fA-F]{6}$/;
+
+const open = ref(false);
+const hexDraft = ref(props.modelValue);
+
+watch(() => props.modelValue, (v) => {
+  hexDraft.value = v;
+});
+// A fresh draft each time it opens, so a half-typed hex doesn't linger.
+watch(open, (v) => { if (v) hexDraft.value = props.modelValue; });
+
+const swatchColor = computed(() => (HEX_RE.test(props.modelValue) ? props.modelValue : "transparent"));
+const shownHex = computed(() => (HEX_RE.test(props.modelValue) ? props.modelValue.toLowerCase() : "No colour"));
+
+const swatchAriaLabel = computed(
+  () => props.ariaLabel ?? `Pick color, current ${props.modelValue}`,
+);
+
+function close() {
+  open.value = false;
+}
+
+function selectPreset(preset: string) {
+  emit("update:modelValue", preset);
+  close();
+}
+
+function onHexInput(value: string) {
+  hexDraft.value = value;
+  if (HEX_RE.test(value)) {
+    emit("update:modelValue", value);
+  }
+}
+
+function isActivePreset(preset: string): boolean {
+  return preset.toLowerCase() === props.modelValue.toLowerCase();
+}
+</script>
+
+<template>
+  <!-- A swatch button that says what it holds (colour, hex, chevron), on the
+       kit Popover so the panel follows it on scroll and closes on Escape or
+       a click outside. -->
+  <Popover v-model:open="open" :label="swatchAriaLabel">
+    <template #trigger="{ props: triggerProps }">
+      <button
+        v-bind="triggerProps"
+        type="button"
+        class="wp-color-picker__trigger"
+        :class="{ 'wp-color-picker__trigger--compact': compact }"
+        :aria-label="swatchAriaLabel"
+        data-test="color-trigger"
+      >
+        <span
+          class="wp-color-picker__swatch"
+          :style="{ background: swatchColor }"
+          data-test="color-swatch"
+          aria-hidden="true"
+        />
+        <span v-if="!compact" class="wp-color-picker__value" aria-hidden="true">{{ shownHex }}</span>
+        <i class="pi pi-chevron-down wp-color-picker__caret" aria-hidden="true" />
+      </button>
+    </template>
+    <div class="wp-color-picker__popover">
+      <div class="wp-color-picker__row">
+        <Input
+          :model-value="hexDraft"
+          aria-label="Hex color value"
+          class="wp-color-picker__hex"
+          data-test="color-hex-input"
+          @update:model-value="(v) => onHexInput(String(v ?? ''))"
+        />
+      </div>
+      <HsvPicker
+        :model-value="props.modelValue"
+        :aria-label="swatchAriaLabel"
+        @update:model-value="(v) => emit('update:modelValue', v)"
+      />
+      <div class="wp-color-picker__palette" role="listbox" aria-label="Preset colors">
+        <button
+          v-for="preset in props.presets"
+          :key="preset"
+          type="button"
+          class="wp-color-picker__chip"
+          :style="{ background: preset }"
+          :title="preset"
+          :data-active="isActivePreset(preset)"
+          :aria-label="`Use preset ${preset}`"
+          data-test="color-preset"
+          @click="selectPreset(preset)"
+        />
+      </div>
+    </div>
+  </Popover>
+</template>
+
+<style scoped>
+.wp-color-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wp-space-3);
+  height: var(--wp-control-h-md, 32px);
+  min-width: 128px;
+  padding: 0 var(--wp-space-4) 0 var(--wp-space-2);
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text);
+  font: inherit;
+  cursor: pointer;
+  transition: border-color 0.12s, box-shadow 0.12s;
+}
+.wp-color-picker__trigger--compact { min-width: 0; padding: 0 var(--wp-space-3) 0 var(--wp-space-2); gap: var(--wp-space-2); }
+.wp-color-picker__trigger:hover { border-color: var(--wp-border-strong); }
+.wp-color-picker__trigger:focus-visible { outline: none; border-color: var(--wp-accent-500); box-shadow: var(--wp-focus-ring); }
+.wp-color-picker__swatch {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  /* An inner ring keeps a dark swatch visible on a dark field. */
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-text) 22%, transparent);
+}
+.wp-color-picker__value {
+  flex: 1;
+  text-align: left;
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  color: var(--wp-text-muted);
+}
+.wp-color-picker__caret { font-size: 9px; color: var(--wp-text-dim); }
+
+.wp-color-picker__popover {
+  width: 220px;
+  padding: var(--wp-space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--wp-space-5);
+}
+.wp-color-picker__row {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-4);
+}
+
+.wp-color-picker__hex {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--wp-font-mono);
+  font-size: var(--wp-text-sm);
+}
+
+.wp-color-picker__palette {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--wp-space-3);
+}
+
+.wp-color-picker__chip {
+  /* Span the grid cell instead of locking at 32px so the swatches reach
+   * both edges of the popover. aspect-ratio keeps them square as the
+   * cell width changes with popover size. */
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  min-width: 0;
+  border-radius: var(--wp-radius-sm);
+  border: 1px solid var(--wp-border);
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.08s, box-shadow 0.12s;
+}
+.wp-color-picker__chip:hover { transform: scale(1.08); }
+.wp-color-picker__chip[data-active="true"] {
+  box-shadow: 0 0 0 2px var(--wp-bg-2), 0 0 0 4px var(--wp-accent-500);
+}
+</style>