@luna-park/design 1.0.0

package/src/components/form/color-picker/LColorHue.vue

@@ -0,0 +1,109 @@
+<template>
+    <div
+        class="color-hue"
+        @mousedown.left="isUpdating = true"
+    >
+        <div
+            ref="gradient"
+            class="gradient"
+            :style="gradientStyle"
+        />
+        <div
+            class="cursor"
+            :style="cursorStyle"
+        />
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { usePointer, watchTriggerable } from "@vueuse/core";
+import { clamp } from "@luna-park/utils";
+
+const props = withDefaults(defineProps<{
+    height?: number;
+    hex: string;
+    hue: number;
+    luminosity: number;
+    saturation: number;
+}>(), {
+    height: 120
+});
+
+const emits = defineEmits<(e: "update:hue", value: number) => void>();
+
+const cursorStyle = computed(() => {
+    return {
+        top: `${ props.height * (1 - props.hue / 360) - 6 }px`,
+        background: props.hex
+    };
+});
+
+const gradient = ref<HTMLCanvasElement>();
+const isUpdating = ref(false);
+const { pressure: mouseClick, x: mouseX, y: mouseY } = usePointer();
+
+const gradientStyle = computed(() => {
+    return {
+        height: `${ props.height }px`
+    };
+});
+
+watch([isUpdating, mouseClick, mouseX, mouseY], () => {
+    if (!isUpdating.value) {
+        return;
+    }
+
+    if (!mouseClick.value) {
+        isUpdating.value = false;
+        return;
+    }
+
+    if (!gradient.value) {
+        return;
+    }
+
+    const rect = gradient.value.getBoundingClientRect();
+    const hue = clamp(1 - (mouseY.value - rect.top) / props.height, 0, 1) * 360;
+
+    emits("update:hue", hue);
+});
+</script>
+
+<style scoped>
+.color-hue {
+    position: relative;
+
+    .gradient {
+        --gradient-saturation: calc(v-bind('props.saturation') * 100%);
+        --gradient-luminosity: calc(v-bind('props.luminosity') * 100%);
+
+        border-radius: var(--length-radius-s);
+        width: 16px;
+        background: linear-gradient(to bottom,
+        hsl(360, var(--gradient-saturation), var(--gradient-luminosity)),
+        hsl(270, var(--gradient-saturation), var(--gradient-luminosity)),
+        hsl(180, var(--gradient-saturation), var(--gradient-luminosity)),
+        hsl(90, var(--gradient-saturation), var(--gradient-luminosity)),
+        hsl(0, var(--gradient-saturation), var(--gradient-luminosity))
+        );
+    }
+
+    .cursor {
+        left: -4px;
+        box-sizing: border-box;
+        width: 24px;
+        height: 12px;
+        border: 2px solid var(--color-content-liter);
+        border-radius: 8px;
+        position: absolute;
+        box-shadow: 0 0 4px var(--color-background-lite);
+        cursor: ns-resize;
+
+        &:hover {
+            border-color: var(--color-content-lite);
+        }
+    }
+}
+</style>

package/src/components/form/color-picker/LColorModels.vue

@@ -0,0 +1,223 @@
+<template>
+    <div class="color-models">
+        <LInput
+            v-model="hex"
+            @update:model-value="updateValue('hex')"
+        >
+            <template #prefix>
+                <span class="prefix">Hex:</span>
+            </template>
+        </LInput>
+        <div class="rgb">
+            <LInput
+                v-model="rgb.r"
+                :filter="maxFilter(255)"
+                type="number"
+                @update:model-value="updateValue('rgb')"
+            >
+                <template #prefix>
+                    <span class="prefix">R:</span>
+                </template>
+            </LInput>
+            <LInput
+                v-model="rgb.g"
+                :filter="maxFilter(255)"
+                type="number"
+                @update:model-value="updateValue('rgb')"
+            >
+                <template #prefix>
+                    <span class="prefix">G:</span>
+                </template>
+            </LInput>
+            <LInput
+                v-model="rgb.b"
+                :filter="maxFilter(255)"
+                type="number"
+                @update:model-value="updateValue('rgb')"
+            >
+                <template #prefix>
+                    <span class="prefix">B:</span>
+                </template>
+            </LInput>
+        </div>
+        <div class="hsl">
+            <LInput
+                v-model="hsl.h"
+                :filter="maxFilter(360)"
+                type="number"
+                @update:model-value="updateValue('hsl')"
+            >
+                <template #prefix>
+                    <span class="prefix">H:</span>
+                </template>
+                <template #suffix>
+                    <span class="suffix">°</span>
+                </template>
+            </LInput>
+            <LInput
+                v-model="hsl.s"
+                :filter="maxFilter(100)"
+                type="number"
+                @update:model-value="updateValue('hsl')"
+            >
+                <template #prefix>
+                    <span class="prefix">S:</span>
+                </template>
+                <template #suffix>
+                    <span class="suffix">%</span>
+                </template>
+            </LInput>
+            <LInput
+                v-model="hsl.l"
+                :filter="maxFilter(100)"
+                type="number"
+                @update:model-value="updateValue('hsl')"
+            >
+                <template #prefix>
+                    <span class="prefix">L:</span>
+                </template>
+                <template #suffix>
+                    <span class="suffix">%</span>
+                </template>
+            </LInput>
+        </div>
+        <LInput
+            v-model="alpha"
+            :filter="maxFilter(100)"
+            type="number"
+            @update:model-value="updateValue('alpha')"
+        >
+            <template #prefix>
+                <span class="prefix">Alpha:</span>
+            </template>
+            <template #suffix>
+                <span class="suffix">%</span>
+            </template>
+        </LInput>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { SColor } from "synth-color";
+import { ref, watch } from "vue";
+import { clamp } from "@luna-park/utils";
+import LInput from "@/components/form/LInput.vue";
+
+const props = defineProps<{
+    color: string;
+}>();
+
+const emits = defineEmits<(e: "update:color", value: string) => void>();
+
+type TModel = "hex" | "rgb" | "hsl" | "alpha";
+
+const sColor = new SColor();
+
+const hex = ref("");
+const alpha = ref(0);
+const rgb = ref({ b: 0, g: 0, r: 0 });
+const hsl = ref({ h: 0, l: 0, s: 0 });
+
+watch(() => props.color, updateInternals, { immediate: true });
+
+function updateInternals() {
+    if (props.color === sColor.hex) {
+        return;
+    }
+
+    sColor.hex = props.color;
+    updateHex();
+    updateRgb();
+    updateHsl();
+    updateAlpha();
+}
+
+function updateHex() {
+    hex.value = sColor.hex;
+}
+
+function updateRgb() {
+    rgb.value = {
+        b: Math.round(sColor.rgb.b * 255),
+        g: Math.round(sColor.rgb.g * 255),
+        r: Math.round(sColor.rgb.r * 255)
+    };
+}
+
+function updateHsl() {
+    hsl.value = {
+        h: Math.round(sColor.hsl.h),
+        l: Math.round(sColor.hsl.l * 100),
+        s: Math.round(sColor.hsl.s * 100)
+    };
+}
+
+function updateAlpha() {
+    alpha.value = Math.round(sColor.alpha * 100);
+}
+
+function maxFilter(max: number) {
+    return (value: string) => clamp(parseInt(value), 0, max).toString();
+}
+
+function updateValue(model: TModel) {
+    switch (model) {
+    case "hex":
+        sColor.hex = hex.value;
+        emits("update:color", sColor.hex);
+        break;
+    case "rgb":
+        sColor.rgb = { b: rgb.value.b / 255, g: rgb.value.g / 255, r: rgb.value.r / 255 };
+        emits("update:color", sColor.hex);
+        break;
+    case "hsl":
+        sColor.hsl = { h: hsl.value.h, l: hsl.value.l / 100, s: hsl.value.s / 100 };
+        emits("update:color", sColor.hex);
+        break;
+    case "alpha":
+        sColor.alpha = alpha.value;
+        emits("update:color", sColor.hex);
+        break;
+    }
+
+    if (model !== "hex") {
+        updateHex();
+    }
+
+    if (model !== "rgb") {
+        updateRgb();
+    }
+
+    if (model !== "hsl") {
+        updateHsl();
+    }
+
+    if (model !== "alpha") {
+        updateAlpha();
+    }
+}
+
+</script>
+
+<style scoped>
+.color-models {
+    width: 192px;
+    display: flex;
+    gap: var(--length-xs);
+    flex-direction: column;
+
+    .rgb, .hsl {
+        display: flex;
+        gap: var(--length-xs);
+
+        > * {
+            flex: 1 1 0;
+        }
+    }
+
+    .prefix, .suffix {
+        color: var(--color-content-litest);
+    }
+}
+</style>

package/src/components/form/color-picker/LColorPicker.story.vue

@@ -0,0 +1,44 @@
+<template>
+    <Story
+        :layout="{
+            type: 'grid',
+            width: '480px'
+        }"
+    >
+        <Variant title="Default">
+            <LColorPicker
+                v-model="state.color"
+                class="picker"
+            />
+        </Variant>
+        <Variant title="Gradient">
+            <LColorPickerGradient
+                v-model="state.color"
+                class="picker"
+            />
+        </Variant>
+        <template #controls>
+            <HstText
+                v-model="state.color"
+                title="Color"
+            />
+        </template>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import LColorPicker from "./LColorPicker.vue";
+import LColorPickerGradient from "@/components/form/color-picker/LImagePicker.vue";
+
+const state = reactive({
+    color: "#ff6600"
+});
+</script>
+
+<style scoped>
+.picker {
+    padding: var(--length-m);
+    height: 220px;
+}
+</style>

package/src/components/form/color-picker/LColorPicker.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="color-picker">
+        <LColorShade
+            v-model:saturation="saturation"
+            v-model:value="value"
+            :hex="internalColorNoAlpha"
+            :hue="hue"
+        />
+        <LColorHue
+            v-model:hue="hue"
+            :hex="internalColorNoAlpha"
+            :luminosity="luminosity"
+            :saturation="saturation"
+        />
+        <LColorAlpha
+            v-model:alpha="alpha"
+            :hex="internalColorNoAlpha"
+        />
+        <LColorModels
+            :color="internalColor"
+            @update:color="updateColor"
+        />
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { SColor } from "synth-color";
+import LColorShade from "@/components/form/color-picker/LColorShade.vue";
+import LColorHue from "@/components/form/color-picker/LColorHue.vue";
+import LColorAlpha from "@/components/form/color-picker/LColorAlpha.vue";
+import LColorModels from "@/components/form/color-picker/LColorModels.vue";
+
+const props = defineProps<{
+    gradient?: boolean;
+    modelValue: string;
+}>();
+
+const emits = defineEmits<(e: "update:modelValue", value: string) => void>();
+
+const internalColor = ref("");
+const internalColorNoAlpha = computed(() => internalColor.value.slice(0, 7));
+const inputColor = ref("");
+
+const hue = ref(0);
+const saturation = ref(0);
+const value = ref(0);
+const luminosity = ref(0);
+const alpha = ref(1);
+
+let color = new SColor("");
+
+watch(() => props.modelValue, () => {
+    color = new SColor(props.modelValue);
+    inputColor.value = color.hex;
+
+    if (inputColor.value === internalColor.value) {
+        return;
+    }
+
+    updateInternals();
+}, {
+    immediate: true
+});
+
+function updateColor(newColor: string) {
+    color.hex = newColor;
+    updateInternals();
+}
+
+function updateInternals() {
+    internalColor.value = color.hex;
+    hue.value = color.hsv.h;
+    saturation.value = color.hsv.s;
+    value.value = color.hsv.v;
+    alpha.value = color.alpha;
+    luminosity.value = color.hsl.l;
+}
+
+watch([hue, saturation, value, alpha], () => {
+    color.hsva = {
+        alpha: alpha.value,
+        h: hue.value,
+        s: saturation.value,
+        v: value.value
+    };
+    luminosity.value = color.hsl.l;
+    internalColor.value = color.hex;
+
+    if (internalColor.value === inputColor.value) {
+        return;
+    }
+
+    emits("update:modelValue", internalColor.value);
+});
+</script>
+
+<style scoped>
+.color-picker {
+    height: 120px;
+    display: flex;
+    gap: var(--length-m);
+}
+</style>

package/src/components/form/color-picker/LColorShade.vue

@@ -0,0 +1,114 @@
+<template>
+    <div
+        class="color-shade"
+        @mousedown.left="isUpdating = true"
+    >
+        <div
+            ref="gradient"
+            class="gradient"
+            :style="gradientStyle"
+        />
+        <div
+            class="cursor"
+            :style="cursorStyle"
+        />
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { usePointer, watchThrottled } from "@vueuse/core";
+import { clamp } from "@luna-park/utils";
+
+const props = withDefaults(defineProps<{
+    height?: number;
+    hex: string;
+    hue: number;
+    saturation: number;
+    value: number;
+    width?: number;
+}>(), {
+    height: 120,
+    width: 120
+});
+
+const emits = defineEmits<{
+    (e: "update:value", value: number): void;
+    (e: "update:saturation", value: number): void;
+}>();
+
+const gradient = ref<HTMLCanvasElement>();
+const isUpdating = ref(false);
+const { pressure: mouseClick, x: mouseX, y: mouseY } = usePointer();
+
+const cursorStyle = computed(() => {
+    return {
+        top: `${ props.height * (1 - props.value) - 6 }px`,
+        left: `${ props.height * props.saturation - 6 }px`,
+        background: props.hex
+    };
+});
+
+const gradientStyle = computed(() => {
+    return {
+        height: `${ props.height }px`,
+        width: `${ props.width }px`
+    };
+});
+
+watchThrottled([isUpdating, mouseClick, mouseX, mouseY], () => {
+    if (!isUpdating.value) {
+        return;
+    }
+
+    if (!mouseClick.value) {
+        isUpdating.value = false;
+        return;
+    }
+
+    if (!gradient.value) {
+        return;
+    }
+
+    const rect = gradient.value.getBoundingClientRect();
+    const saturation = clamp((mouseX.value - rect.left) / props.width, 0, 1);
+    const value = clamp(1 - (mouseY.value - rect.top) / props.height, 0, 1);
+
+    emits("update:saturation", saturation);
+    emits("update:value", value);
+}, {
+    throttle: 1000 / 60
+});
+</script>
+
+<style scoped>
+.color-shade {
+    position: relative;
+
+    .gradient {
+        border-radius: var(--length-radius-s);
+        background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 100%)),
+        linear-gradient(to right, hsl(v-bind('props.hue'), 100%, 100%), hsl(v-bind('props.hue'), 100%, 50%));
+    }
+
+    canvas {
+        border-radius: var(--length-radius-s);
+    }
+
+    .cursor {
+        box-sizing: border-box;
+        width: 12px;
+        height: 12px;
+        border: 2px solid var(--color-content-liter);
+        border-radius: 8px;
+        position: absolute;
+        box-shadow: 0 0 4px var(--color-background-lite);
+        cursor: move;
+
+        &:hover {
+            border-color: var(--color-content-lite);
+        }
+    }
+}
+</style>