@hakumi-dev/hakumi-components 0.1.18-pre → 0.1.19-pre

package/app/javascript/hakumi_components/core/render_component.js

@@ -31,32 +31,48 @@ const isInIframe = () => {
 }
 
 
-const cacheKeyFor = (normalizedName, format) => `hakumi:rcache:${format}:${normalizedName}`
-const cacheMetaKeyFor = (normalizedName, format) => `hakumi:rcachemeta:${format}:${normalizedName}`
+const stableParamHash = (params) => {
+    const sorted = Object.keys(params).sort().map(k => `${k}=${params[k]}`).join("&")
+    if (!sorted) return ""
+    let h = 0
+    for (let i = 0; i < sorted.length; i++) {
+        h = ((h << 5) - h + sorted.charCodeAt(i)) | 0
+    }
+    return h.toString(36)
+}
+
+const cacheKeyFor = (normalizedName, format, params = {}) => {
+    const ph = stableParamHash(params)
+    return `hakumi:rcache:${format}:${normalizedName}${ph ? `:${ph}` : ""}`
+}
+const cacheMetaKeyFor = (normalizedName, format, params = {}) => {
+    const ph = stableParamHash(params)
+    return `hakumi:rcachemeta:${format}:${normalizedName}${ph ? `:${ph}` : ""}`
+}
 
 const resolveComponentData = (element) => element?.hakumiComponent
 
-const loadCache = (normalizedName, format, ttlMs) => {
-    const metaRaw = safeSessionGet(cacheMetaKeyFor(normalizedName, format))
+const loadCache = (normalizedName, format, ttlMs, params = {}) => {
+    const metaRaw = safeSessionGet(cacheMetaKeyFor(normalizedName, format, params))
     if (!metaRaw) return null
 
     let meta
     try {
         meta = JSON.parse(metaRaw)
     } catch {
-        safeSessionRemove(cacheMetaKeyFor(normalizedName, format))
+        safeSessionRemove(cacheMetaKeyFor(normalizedName, format, params))
         return null
     }
 
     if (!meta?.ts || typeof meta.ts !== "number") return null
     if (ttlMs != null && Date.now() - meta.ts > ttlMs) return null
 
-    return safeSessionGet(cacheKeyFor(normalizedName, format))
+    return safeSessionGet(cacheKeyFor(normalizedName, format, params))
 }
 
-const saveCache = (normalizedName, format, html) => {
-    safeSessionSet(cacheKeyFor(normalizedName, format), html)
-    safeSessionSet(cacheMetaKeyFor(normalizedName, format), JSON.stringify({ ts: Date.now() }))
+const saveCache = (normalizedName, format, html, params = {}) => {
+    safeSessionSet(cacheKeyFor(normalizedName, format, params), html)
+    safeSessionSet(cacheMetaKeyFor(normalizedName, format, params), JSON.stringify({ ts: Date.now() }))
 }
 
 export const renderComponent = async (
@@ -112,11 +128,12 @@ export const renderComponent = async (
 
         let optimisticElement = null
         if (cache && mode !== "replace") {
-            const cachedHtml = loadCache(normalizedName, format, cacheTtlMs)
+            const cachedHtml = loadCache(normalizedName, format, cacheTtlMs, finalParams)
             if (cachedHtml) {
                 try {
                     optimisticElement = elementFromHtml(cachedHtml, name)
                     optimisticElement.setAttribute("data-hakumi-render-cache", "1")
+                    optimisticElement.setAttribute("data-hakumi-render-pending", "")
                     resolvedTarget.appendChild(optimisticElement)
                     ensureId(optimisticElement, `hakumi-${name}`)
                 } catch {}
@@ -129,9 +146,14 @@ export const renderComponent = async (
 
         const html = format === "json" ? (await response.json()).html : await response.text()
 
-        if (cache) saveCache(normalizedName, format, html)
+        if (cache) saveCache(normalizedName, format, html, finalParams)
 
         const element = elementFromHtml(html, name)
+        const optimisticWasReady = optimisticElement?.dataset.hakumiReady === "true"
+
+        if (!optimisticWasReady) {
+            element.setAttribute("data-hakumi-render-pending", "")
+        }
 
         if (mode === "replace") {
             resolvedTarget.innerHTML = ""
@@ -156,6 +178,10 @@ export const renderComponent = async (
 
         await nextFrame()
 
+        if (element.dataset.hakumiRenderPending !== undefined && element.dataset.hakumiReady !== "true") {
+            element.dataset.hakumiReady = "true"
+        }
+
         let instance = get(id)
         if (!instance) {
             register(id, element)

package/app/javascript/hakumi_components/utils/color_helper.js

@@ -0,0 +1,262 @@
+const DEFAULT_HSV = Object.freeze({ h: 215, s: 91, v: 100 })
+
+export function defaultHsv() {
+  return { ...DEFAULT_HSV }
+}
+
+export function formatHsvColor(hsv, alpha, format, { disabledAlpha = false } = {}) {
+  switch (format) {
+    case "hex":
+      return hsvToHex(hsv.h, hsv.s, hsv.v, alpha, { disabledAlpha })
+    case "rgb":
+      return hsvToRgbString(hsv.h, hsv.s, hsv.v, alpha, { disabledAlpha })
+    case "hsl":
+      return hsvToHslString(hsv.h, hsv.s, hsv.v, alpha, { disabledAlpha })
+    case "hsb":
+      return hsvToHsbString(hsv.h, hsv.s, hsv.v, alpha, { disabledAlpha })
+    default:
+      return hsvToHex(hsv.h, hsv.s, hsv.v, alpha, { disabledAlpha })
+  }
+}
+
+export function parseColorToHsv(color) {
+  if (!color) return defaultHsv()
+
+  const normalizedColor = color.trim()
+
+  if (normalizedColor.startsWith("#")) {
+    return hexToHsv(normalizedColor)
+  }
+
+  if (normalizedColor.startsWith("rgb")) {
+    return rgbStringToHsv(normalizedColor)
+  }
+
+  if (normalizedColor.startsWith("hsl")) {
+    return hslStringToHsv(normalizedColor)
+  }
+
+  if (normalizedColor.startsWith("hsb")) {
+    return hsbStringToHsv(normalizedColor)
+  }
+
+  return defaultHsv()
+}
+
+export function extractAlpha(color) {
+  if (!color) return 1
+
+  const normalizedColor = color.trim()
+
+  if (normalizedColor.startsWith("rgba")) {
+    const match = normalizedColor.match(/rgba?\(([^)]+)\)/)
+    if (match) {
+      const parts = match[1].split(",").map(part => part.trim())
+      if (parts[3]) return parseFloat(parts[3])
+    }
+  }
+
+  if (normalizedColor.startsWith("hsla")) {
+    const match = normalizedColor.match(/hsla?\(([^)]+)\)/)
+    if (match) {
+      const parts = match[1].split(",").map(part => part.trim())
+      if (parts[3]) return parseFloat(parts[3])
+    }
+  }
+
+  if (normalizedColor.startsWith("#") && normalizedColor.length === 9) {
+    const alpha = parseInt(normalizedColor.slice(7, 9), 16)
+    return Math.round((alpha / 255) * 100) / 100
+  }
+
+  return 1
+}
+
+export function hsvToRgb(h, s, v) {
+  const normalizedH = h / 360
+  const normalizedS = s / 100
+  const normalizedV = v / 100
+
+  const i = Math.floor(normalizedH * 6)
+  const f = normalizedH * 6 - i
+  const p = normalizedV * (1 - normalizedS)
+  const q = normalizedV * (1 - f * normalizedS)
+  const t = normalizedV * (1 - (1 - f) * normalizedS)
+
+  let r
+  let g
+  let b
+
+  switch (i % 6) {
+    case 0: r = normalizedV; g = t; b = p; break
+    case 1: r = q; g = normalizedV; b = p; break
+    case 2: r = p; g = normalizedV; b = t; break
+    case 3: r = p; g = q; b = normalizedV; break
+    case 4: r = t; g = p; b = normalizedV; break
+    case 5: r = normalizedV; g = p; b = q; break
+  }
+
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  }
+}
+
+export function isValidColor(color) {
+  if (!color) return false
+
+  const normalizedColor = color.trim()
+
+  if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(normalizedColor)) return true
+  if (/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*[\d.]+\s*)?\)$/.test(normalizedColor)) return true
+  if (/^hsla?\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*[\d.]+\s*)?\)$/.test(normalizedColor)) return true
+  if (/^hsba?\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*[\d.]+\s*)?\)$/.test(normalizedColor)) return true
+
+  return false
+}
+
+function rgbToHsv(r, g, b) {
+  const normalizedR = r / 255
+  const normalizedG = g / 255
+  const normalizedB = b / 255
+
+  const max = Math.max(normalizedR, normalizedG, normalizedB)
+  const min = Math.min(normalizedR, normalizedG, normalizedB)
+  const delta = max - min
+
+  let h = 0
+  const s = max === 0 ? 0 : delta / max
+  const v = max
+
+  if (delta !== 0) {
+    if (max === normalizedR) {
+      h = ((normalizedG - normalizedB) / delta + (normalizedG < normalizedB ? 6 : 0)) / 6
+    } else if (max === normalizedG) {
+      h = ((normalizedB - normalizedR) / delta + 2) / 6
+    } else {
+      h = ((normalizedR - normalizedG) / delta + 4) / 6
+    }
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    v: Math.round(v * 100)
+  }
+}
+
+function hexToHsv(hex) {
+  const normalizedHex = hex.replace("#", "")
+
+  const r = parseInt(normalizedHex.slice(0, 2), 16)
+  const g = parseInt(normalizedHex.slice(2, 4), 16)
+  const b = parseInt(normalizedHex.slice(4, 6), 16)
+
+  return rgbToHsv(r, g, b)
+}
+
+function hsvToHex(h, s, v, alpha = 1, { disabledAlpha = false } = {}) {
+  const rgb = hsvToRgb(h, s, v)
+  const hex = `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`
+
+  if (alpha < 1 && !disabledAlpha) {
+    const alphaHex = toHex(Math.round(alpha * 255))
+    return `${hex}${alphaHex}`
+  }
+
+  return hex
+}
+
+function toHex(n) {
+  const hex = n.toString(16)
+  return hex.length === 1 ? "0" + hex : hex
+}
+
+function rgbStringToHsv(rgbString) {
+  const match = rgbString.match(/rgba?\(([^)]+)\)/)
+  if (!match) return defaultHsv()
+
+  const [r, g, b] = match[1].split(",").map(part => parseInt(part.trim()))
+  return rgbToHsv(r, g, b)
+}
+
+function hsvToRgbString(h, s, v, alpha = 1, { disabledAlpha = false } = {}) {
+  const rgb = hsvToRgb(h, s, v)
+
+  if (alpha < 1 && !disabledAlpha) {
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`
+  }
+
+  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
+}
+
+function hslStringToHsv(hslString) {
+  const match = hslString.match(/hsla?\(([^)]+)\)/)
+  if (!match) return defaultHsv()
+
+  const parts = match[1].split(",").map(part => part.trim())
+  const h = parseFloat(parts[0])
+  const s = parseFloat(parts[1])
+  const l = parseFloat(parts[2])
+
+  return hslToHsv(h, s, l)
+}
+
+function hslToHsv(h, s, l) {
+  const normalizedS = s / 100
+  const normalizedL = l / 100
+
+  const v = normalizedL + normalizedS * Math.min(normalizedL, 1 - normalizedL)
+  const sv = v === 0 ? 0 : 2 * (1 - normalizedL / v)
+
+  return {
+    h: Math.round(h),
+    s: Math.round(sv * 100),
+    v: Math.round(v * 100)
+  }
+}
+
+function hsvToHsl(h, s, v) {
+  const normalizedS = s / 100
+  const normalizedV = v / 100
+
+  const l = normalizedV * (1 - normalizedS / 2)
+  const sl = l === 0 || l === 1 ? 0 : (normalizedV - l) / Math.min(l, 1 - l)
+
+  return {
+    h: Math.round(h),
+    s: Math.round(sl * 100),
+    l: Math.round(l * 100)
+  }
+}
+
+function hsvToHslString(h, s, v, alpha = 1, { disabledAlpha = false } = {}) {
+  const hsl = hsvToHsl(h, s, v)
+
+  if (alpha < 1 && !disabledAlpha) {
+    return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha})`
+  }
+
+  return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`
+}
+
+function hsbStringToHsv(hsbString) {
+  const match = hsbString.match(/hsba?\(([^)]+)\)/)
+  if (!match) return defaultHsv()
+
+  const parts = match[1].split(",").map(part => part.trim())
+  return {
+    h: Math.round(parseFloat(parts[0])),
+    s: Math.round(parseFloat(parts[1])),
+    v: Math.round(parseFloat(parts[2]))
+  }
+}
+
+function hsvToHsbString(h, s, v, alpha = 1, { disabledAlpha = false } = {}) {
+  if (alpha < 1 && !disabledAlpha) {
+    return `hsba(${h}, ${s}%, ${v}%, ${alpha})`
+  }
+
+  return `hsb(${h}, ${s}%, ${v}%)`
+}

package/app/javascript/stylesheets/_base.scss

@@ -31,6 +31,15 @@ body {
   display: none !important;
 }
 
+[data-hakumi-render-pending]:not([data-hakumi-ready="true"]) {
+  opacity: 0;
+}
+
+[data-hakumi-render-pending][data-hakumi-ready="true"] {
+  opacity: 1;
+  transition: opacity 0.15s ease;
+}
+
 .hakumi-fade-enter,
 .hakumi-fade-appear {
   animation-duration: $transition-duration-base;

package/app/javascript/stylesheets/_hakumi_components.scss

@@ -27,6 +27,7 @@
 @use "components/splitter";
 @use 'components/modal';
 @use 'components/drawer';
+@use "components/form_item";
 @use "components/input";
 @use "components/input_number";
 @use "components/date_picker";

package/app/javascript/stylesheets/components/_breadcrumb.scss

@@ -27,7 +27,7 @@
 .hakumi-breadcrumb-link {
   color: var(--color-text-secondary);
   text-decoration: none;
-  transition: all 0.2s;
+  transition: all $transition-duration-base;
 }
 
 a.hakumi-breadcrumb-link {
@@ -63,7 +63,7 @@ a.hakumi-breadcrumb-link {
   padding: 2px 6px;
   border-radius: var(--border-radius-sm);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all $transition-duration-base;
 
   &:hover {
     color: var(--color-text);

package/app/javascript/stylesheets/components/_calendar.scss

@@ -93,7 +93,7 @@
       margin: 0 4px;
       border-top: 2px solid transparent;
       border-radius: var(--border-radius);
-      transition: background 0.2s;
+      transition: background $transition-duration-base;
       box-sizing: border-box;
 
       &:hover {
@@ -119,7 +119,7 @@
 
     .hakumi-calendar-cell-today .hakumi-calendar-date-value {
       background: var(--color-primary);
-      color: #fff;
+      color: var(--color-text-inverse);
       border-radius: 50%;
       width: 24px;
       height: 24px;
@@ -138,7 +138,7 @@
     .hakumi-calendar-cell-range-start .hakumi-calendar-date-value,
     .hakumi-calendar-cell-range-end .hakumi-calendar-date-value {
       background: var(--color-primary);
-      color: #fff;
+      color: var(--color-text-inverse);
       border-radius: 50%;
       width: 24px;
       height: 24px;
@@ -184,7 +184,7 @@
       height: 80px;
       padding: 8px 12px;
       border-radius: var(--border-radius);
-      transition: background 0.2s;
+      transition: background $transition-duration-base;
       cursor: pointer;
 
       &:hover {
@@ -301,7 +301,7 @@
       line-height: 32px;
       border-radius: var(--border-radius);
       cursor: pointer;
-      transition: all 0.2s;
+      transition: all $transition-duration-base;
 
       &:hover {
         background: var(--color-bg-spot);
@@ -318,7 +318,7 @@
 
     .hakumi-calendar-cell-selected .hakumi-calendar-date {
       background: var(--color-primary);
-      color: #fff;
+      color: var(--color-text-inverse);
 
       &:hover {
         background: var(--color-primary-hover);
@@ -350,7 +350,7 @@
       justify-content: center;
       border-radius: var(--border-radius);
       cursor: pointer;
-      transition: all 0.2s;
+      transition: all $transition-duration-base;
 
       &:hover {
         background: var(--color-bg-spot);
@@ -359,7 +359,7 @@
 
     .hakumi-calendar-cell-month.hakumi-calendar-cell-selected .hakumi-calendar-month-cell-inner {
       background: var(--color-primary);
-      color: #fff;
+      color: var(--color-text-inverse);
     }
 
     .hakumi-calendar-month-value {
@@ -375,7 +375,7 @@
     .hakumi-calendar-cell-range-end {
       .hakumi-calendar-date {
         background: var(--color-primary);
-        color: #fff;
+        color: var(--color-text-inverse);
 
         &:hover {
           background: var(--color-primary-hover);
@@ -494,7 +494,7 @@
   position: relative;
   cursor: pointer;
   color: var(--color-text);
-  transition: background 0.2s, color 0.2s;
+  transition: background $transition-duration-base, color $transition-duration-base;
 
   &-in-view {
     color: var(--color-text);
@@ -547,7 +547,7 @@
   color: var(--color-text-tertiary);
   font-size: 12px;
   cursor: pointer;
-  transition: background 0.2s, color 0.2s;
+  transition: background $transition-duration-base, color $transition-duration-base;
 }
 
 .hakumi-calendar-week-number {
@@ -644,7 +644,7 @@
   padding: 16px;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-lg);
-  transition: all 0.2s;
+  transition: all $transition-duration-base;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -699,7 +699,7 @@
   height: 60px;
   padding: 8px;
   border-radius: var(--border-radius);
-  transition: all 0.2s;
+  transition: all $transition-duration-base;
   cursor: pointer;
   display: flex;
   align-items: center;

package/app/javascript/stylesheets/components/_cascader.scss

@@ -25,7 +25,7 @@
         background-color: var(--color-bg-container);
         border: 1px solid var(--color-border);
         border-radius: 6px;
-        transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: all $transition-duration-base $ease-in-out;
         width: 100%;
         height: 32px;
         padding: 0 30px 0 11px;
@@ -126,7 +126,7 @@
         margin-top: -6px;
         font-size: 12px;
         pointer-events: none;
-        transition: transform 0.3s;
+        transition: transform $transition-duration-slow;
 
         .hakumi-cascader-open & {
             transform: rotate(180deg);
@@ -149,7 +149,7 @@
         background: var(--color-bg-container);
         cursor: pointer;
         opacity: 0;
-        transition: color 0.3s ease, opacity 0.15s ease;
+        transition: color $transition-duration-slow ease, opacity 0.15s ease;
 
         &:hover {
             color: var(--color-text-tertiary);
@@ -173,7 +173,7 @@
         margin-top: 4px;
         background-color: var(--color-bg-elevated);
         border-radius: 8px;
-        box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+        box-shadow: var(--shadow-lg);
         display: flex;
         flex-direction: row;
         overflow: hidden;
@@ -217,7 +217,7 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         cursor: pointer;
-        transition: all 0.3s;
+        transition: all $transition-duration-slow;
         color: var(--color-text);
 
         &:hover {

package/app/javascript/stylesheets/components/_checkbox.scss

@@ -78,15 +78,15 @@
             &::after {
                 opacity: 1;
                 transform: rotate(45deg) scale(1) translate(-50%, -50%);
-                transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+                transition: all $transition-duration-base cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
             }
         }
     }
 
     &-indeterminate {
         .hakumi-checkbox-inner {
-            background-color: #fff;
-            border-color: #d9d9d9;
+            background-color: var(--color-bg-container);
+            border-color: var(--color-border);
 
             &::after {
                 top: 50%;
@@ -153,7 +153,7 @@
         border: 1px solid var(--color-border);
         border-radius: var(--border-radius-sm);
         border-collapse: separate;
-        transition: all 0.3s;
+        transition: all $transition-duration-slow;
 
         &:after {
             position: absolute;
@@ -162,7 +162,7 @@
             display: table;
             width: 5.7142857142857135px;
             height: 9.142857142857142px;
-            border: 2px solid #fff;
+            border: 2px solid var(--color-text-inverse);
             border-top: 0;
             border-left: 0;
             transform: rotate(45deg) scale(0) translate(-50%, -50%);
@@ -197,20 +197,18 @@
 }
 
 
-[data-theme='dark'] {
+[data-theme="dark"] {
     .hakumi-checkbox-inner {
         background-color: transparent;
     }
 
     .hakumi-checkbox-disabled {
         .hakumi-checkbox-inner {
-            background-color: rgba(255, 255, 255, 0.08);
-            
-            border-color: #434343;
-            
+            background-color: var(--color-fill-secondary);
+            border-color: var(--color-border);
 
             &::after {
-                border-color: rgba(255, 255, 255, 0.25);
+                border-color: var(--color-disabled);
             }
         }
     }