@luna-park/design 1.0.0

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

@@ -0,0 +1,477 @@
+<template>
+    <div class="color-picker-gradient">
+        <div class="header">
+            <div class="preview">
+                <LDropdown
+                    v-model="imageType"
+                    class="gradient-type"
+                    :options="gradientOptions"
+                />
+                <div class="color-preview">
+                    <div class="current-color" />
+                </div>
+            </div>
+            <div
+                v-if="imageType !== EImageType.Image"
+                class="gradient-bar"
+            >
+                <div class="checkerboard">
+                    <canvas
+                        ref="gradient"
+                        height="16"
+                        title="Double click to add"
+                        width="184"
+                        @dblclick="createColor"
+                    />
+                </div>
+                <div
+                    v-for="(color, index) in colors"
+                    :key="index"
+                    class="cursor"
+                    :class="{ selected: index === selectedCursor }"
+                    :style="{ left: `${ colors[index].stop * 184 / 100 - 6 }px`, }"
+                    title="Double click to remove"
+                    @mousedown.left="startDragging(index)"
+                >
+                    <div
+                        class="color"
+                        :style="{ background: color.value }"
+                        @dblclick="removeColor(index)"
+                    />
+                </div>
+            </div>
+            <div
+                v-if="[EImageType.Linear, EImageType.Conic].includes(imageType)"
+                class="orientation"
+            >
+                <LInput
+                    v-model="angle"
+                    :filter="maxFilter(360)"
+                    :step="{step:5}"
+                    type="number"
+                >
+                    <template #prefix>
+                        <span class="prefix">α:</span>
+                    </template>
+                    <template #suffix>
+                        <span class="suffix">°</span>
+                    </template>
+                </LInput>
+            </div>
+            <div
+                v-if="imageType === EImageType.Image"
+                class="url"
+            >
+                <LInput
+                    v-model="imageUrl"
+                    type="text"
+                >
+                    <template #prefix>
+                        <span class="prefix">URL:</span>
+                    </template>
+                </LInput>
+            </div>
+        </div>
+        <div
+            v-if="imageType === EImageType.Radial"
+            class="radial-options"
+        >
+            <LDropdown
+                v-model="endingShape"
+                class="shape"
+                :options="shapeOptions"
+            >
+                <template #prefix>
+                    <span class="prefix">Shape:</span>
+                </template>
+            </LDropdown>
+            <div class="space" />
+            <LDropdown
+                v-if="imageType === EImageType.Radial"
+                v-model="radialSize"
+                class="size"
+                :options="radialOptions"
+            >
+                <template #prefix>
+                    <span class="prefix">Size:</span>
+                </template>
+            </LDropdown>
+            <LInput
+                v-model="location.x"
+                class="input"
+                type="number"
+            >
+                <template #prefix>
+                    <span class="prefix">X:</span>
+                </template>
+                <template #suffix>
+                    <span class="suffix">%</span>
+                </template>
+            </LInput>
+            <LInput
+                v-model="location.y"
+                class="input"
+                type="number"
+            >
+                <template #prefix>
+                    <span class="prefix">Y:</span>
+                </template>
+                <template #suffix>
+                    <span class="suffix">%</span>
+                </template>
+            </LInput>
+        </div>
+        <LColorPicker
+            v-if="imageType !== EImageType.Image"
+            v-model="colors[selectedCursor].value"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { clamp, startCase } from "@luna-park/utils";
+import { usePointer, watchThrottled, watchTriggerable } from "@vueuse/core";
+import LColorPicker from "@/components/form/color-picker/LColorPicker.vue";
+import LDropdown from "@/components/form/dropdown/LDropdown.vue";
+import LInput from "@/components/form/LInput.vue";
+
+enum EImageType {
+    Linear = "linear",
+    Conic = "conic",
+    Radial = "radial",
+    Image = "image"
+}
+
+enum EEndingShape {
+    Circle = "circle",
+    Ellipse = "ellipse"
+}
+
+enum ERadialSize {
+    ClosestSide = "closest-side",
+    ClosestCorner = "closest-corner",
+    FarthestSide = "farthest-side",
+    FarthestCorner = "farthest-corner"
+}
+
+type TColorStop = {
+    stop: number;
+    value: string;
+}
+
+const props = defineProps<{
+    modelValue: string;
+}>();
+
+const emits = defineEmits<(e: "update:modelValue", value: string) => void>();
+
+const gradient = ref<HTMLCanvasElement>();
+const colors = ref<Array<TColorStop>>([
+    { stop: 0, value: "#ff6600" },
+    { stop: 100, value: "#ffffff" }
+]);
+const imageUrl = ref("");
+const selectedCursor = ref(0);
+const angle = ref(0);
+const imageType = ref(EImageType.Linear);
+const endingShape = ref(EEndingShape.Circle);
+const radialSize = ref(ERadialSize.FarthestCorner);
+const location = reactive({
+    x: 50,
+    y: 50
+});
+
+const { pressure: mouseClick, x: mouseX } = usePointer();
+const isDragging = ref(false);
+const startMouseX = ref(0);
+const startStop = ref(0);
+
+const gradientOptions = Object.values(EImageType).map((id) => ({ id, value: startCase(id) }));
+const shapeOptions = Object.values(EEndingShape).map((id) => ({ id, value: startCase(id) }));
+const radialOptions = Object.values(ERadialSize).map((id) => ({ id, value: startCase(id) }));
+
+onMounted(() => {
+    drawCanvas();
+});
+
+function startDragging(index: number) {
+    selectedCursor.value = index;
+    isDragging.value = true;
+    startMouseX.value = mouseX.value;
+    startStop.value = colors.value[index].stop;
+}
+
+function createColor(event: MouseEvent) {
+    const rect = gradient.value?.getBoundingClientRect();
+
+    if (!rect) {
+        return;
+    }
+
+    const stop = clamp((event.clientX - rect.left) * 100 / 184, 0, 100);
+    const value = colors.value[selectedCursor.value].value;
+    colors.value.splice(selectedCursor.value + 1, 0, { stop, value });
+    selectedCursor.value++;
+}
+
+function removeColor(index: number) {
+    if (colors.value.length <= 2) {
+        return;
+    }
+    colors.value.splice(index, 1);
+    selectedCursor.value = clamp(selectedCursor.value, 0, colors.value.length - 1);
+}
+
+watchThrottled([isDragging, mouseClick, mouseX], () => {
+    if (!isDragging.value) {
+        return;
+    }
+
+    if (!mouseClick.value) {
+        isDragging.value = false;
+        return;
+    }
+
+    const delta = mouseX.value - startMouseX.value;
+    colors.value[selectedCursor.value].stop = Math.round(clamp(startStop.value + delta * 100 / 184, 0, 100));
+}, {
+    deep: true,
+    throttle: 1000 / 60
+});
+
+function maxFilter(max: number) {
+    return (value: string) => clamp(parseFloat(value), 0, max).toString();
+}
+
+watch(() => props.modelValue, () => {
+    loadValues();
+}, {
+    immediate: true
+});
+
+function loadValues() {
+    const gradient = props.modelValue.match(/^(\S+)\((.*)\)$/);
+
+    if (!gradient) {
+        return;
+    }
+
+
+    if (gradient[1] === "linear-gradient") {
+        imageType.value = EImageType.Linear;
+        const angleMatch = gradient[2].match(/^(\S+)deg, (.+)$/);
+
+        if (!angleMatch) {
+            return;
+        }
+
+        angle.value = parseFloat(angleMatch[1]);
+        colors.value = angleMatch[2].split(", ").map((color) => {
+            const [value, stop] = color.split(" ");
+            return { stop: parseFloat(stop), value };
+        });
+    }
+
+    if (gradient[1] === "radial-gradient") {
+        imageType.value = EImageType.Radial;
+        const radialMatch = gradient[2].match(/^(\S+) (\S+) at (\S+)% (\S+)%, (.+)$/);
+
+        if (!radialMatch) {
+            return;
+        }
+
+        endingShape.value = radialMatch[1] as EEndingShape;
+        radialSize.value = radialMatch[2] as ERadialSize;
+        location.x = parseFloat(radialMatch[3]);
+        location.y = parseFloat(radialMatch[4]);
+        colors.value = radialMatch[5].split(", ").map((color) => {
+            const [value, stop] = color.split(" ");
+            return { stop: parseFloat(stop), value };
+        });
+
+    }
+
+    if (gradient[1] === "conic-gradient") {
+        imageType.value = EImageType.Conic;
+        const angleMatch = gradient[2].match(/^from (\S+)deg, (.+)$/);
+
+        if (!angleMatch) {
+            return;
+        }
+
+        angle.value = parseFloat(angleMatch[1]);
+        colors.value = angleMatch[2].split(", ").map((color) => {
+            const [value, stop] = color.split(" ");
+            return { stop: parseFloat(stop), value };
+        });
+    }
+
+    if (gradient[1] === "url") {
+        imageType.value = EImageType.Image;
+        imageUrl.value = gradient[2];
+    }
+}
+
+const cssValue = computed(() => {
+    if (imageType.value === EImageType.Linear) {
+        return `linear-gradient(${ angle.value }deg, ${ [...colors.value].sort((a, b) => a.stop - b.stop)
+            .map((color) => `${ color.value } ${ color.stop }%`).join(", ") })`;
+    }
+    if (imageType.value === EImageType.Radial) {
+        return `radial-gradient(${ endingShape.value } ${ radialSize.value } at ${ location.x }% ${ location.y }%, ${ [...colors.value].sort((a, b) => a.stop - b.stop)
+            .map((color) => `${ color.value } ${ color.stop }%`).join(", ") })`;
+    }
+    if (imageType.value === EImageType.Conic) {
+        return `conic-gradient(from ${ angle.value }deg, ${ [...colors.value].sort((a, b) => a.stop - b.stop)
+            .map((color) => `${ color.value } ${ color.stop }%`).join(", ") })`;
+    }
+    if (imageType.value === EImageType.Image) {
+        return `url(${ imageUrl.value })`;
+    }
+    return "";
+});
+
+watch(cssValue, () => {
+    if (cssValue.value !== props.modelValue) {
+        emits("update:modelValue", cssValue.value);
+    }
+});
+
+const { trigger: drawCanvas } = watchTriggerable(() => [colors, imageType], async () => {
+    await nextTick();
+    const context = gradient.value?.getContext("2d");
+
+    if (!context) {
+        return;
+    }
+
+    context.clearRect(0, 0, 184, 16);
+
+    const hueGradient = context.createLinearGradient(0, 0, 184, 0);
+    for (const color of colors.value) {
+        try {
+            hueGradient.addColorStop(color.stop / 100, color.value);
+        }
+        catch (e) {
+            // noop
+        }
+    }
+    context.fillStyle = hueGradient;
+    context.fillRect(0, 0, 184, 16);
+}, {
+    deep: true
+});
+</script>
+
+<style scoped>
+.color-picker-gradient {
+    display: flex;
+    flex-direction: column;
+    gap: var(--length-xs);
+    width: 396px;
+
+    .header {
+        display: flex;
+        align-items: center;
+        gap: var(--length-m);
+
+        .preview {
+            display: flex;
+            align-items: center;
+            gap: var(--length-xs);
+
+            .gradient-type {
+                width: 88px;
+            }
+
+            .color-preview {
+                background: repeating-conic-gradient(var(--color-background-0) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
+                overflow: hidden;
+                height: 24px;
+                width: 24px;
+                border-radius: var(--length-radius-s);
+                box-shadow: 0 0 4px var(--color-soft);
+
+                .current-color {
+                    background: v-bind(cssValue);
+                    height: 100%;
+                    width: 100%;
+                    background-size: cover;
+                }
+            }
+        }
+
+        .gradient-bar {
+            width: 184px;
+            display: flex;
+            align-items: center;
+            position: relative;
+
+            .checkerboard {
+                background: repeating-conic-gradient(var(--color-background-0) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
+                overflow: hidden;
+                border-radius: var(--length-radius-s);
+                height: 16px;
+            }
+
+            .cursor {
+                top: -4px;
+                box-sizing: border-box;
+                width: 12px;
+                height: 24px;
+                border: 2px solid var(--color-content-liter);
+                border-radius: 8px;
+                position: absolute;
+                box-shadow: 0 0 4px var(--color-background-lite);
+                cursor: ew-resize;
+                background: repeating-conic-gradient(var(--color-background-0) 0% 25%, var(--color-background-3) 0% 50%) 50% / 16px 16px;
+                overflow: hidden;
+
+                &:hover {
+                    border-color: var(--color-content-lite);
+                }
+
+                &.selected {
+                    border-color: var(--color-content);
+                }
+
+                .color {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        .orientation {
+            width: 60px;
+        }
+
+        .ending-shape {
+            width: 60px;
+        }
+    }
+
+    .radial-options {
+        display: flex;
+        align-items: center;
+        gap: var(--length-xs);
+
+        .shape {
+            width: 120px;
+        }
+
+        .size {
+            width: 124px;
+        }
+
+        .input {
+            width: 60px;
+        }
+    }
+
+    .prefix, .suffix {
+        color: var(--color-content-litest);
+    }
+}
+</style>

package/src/components/form/dropdown/LDropdown.story.vue

@@ -0,0 +1,123 @@
+<template>
+    <Story
+        :layout="{
+            type: 'grid',
+            width: '256',
+        }"
+    >
+        <Variant title="standard">
+            <LDropdown
+                v-model="value"
+                :options="options"
+            />
+        </Variant>
+        <Variant title="disabled">
+            <LDropdown
+                v-model="value"
+                disabled
+                :options="options"
+            />
+        </Variant>
+        <Variant title="label">
+            <LDropdown
+                v-model="value"
+                label="Label"
+                :options="options"
+            />
+        </variant>
+        <Variant title="big">
+            <LDropdown
+                v-model="value"
+                big
+                :options="options"
+            />
+        </Variant>
+        <Variant title="big label">
+            <LDropdown
+                v-model="value"
+                big
+                label="Label"
+                :options="options"
+            />
+        </Variant>
+        <Variant title="icon color">
+            <LDropdown
+                v-model="valueIcon"
+                :options="optionsIcon"
+            />
+        </Variant>
+        <Variant title="deep">
+            <LDropdown
+                v-model="valueDeep"
+                :options="optionsDeep"
+            />
+        </Variant>
+        <Variant title="input">
+            <LDropdown
+                v-model="value"
+                custom
+                :options="options"
+            />
+        </Variant>
+        <Variant title="standard search">
+            <LDropdown
+                v-model="value"
+                :options="options"
+                search
+            />
+        </Variant>
+        <Variant title="deep search">
+            <LDropdown
+                v-model="valueDeep"
+                :options="optionsDeep"
+                search
+            />
+        </Variant>
+        <Variant title="deep search inside">
+            <LDropdown
+                v-model="valueDeep"
+                :options="optionsDeep"
+                search-inside
+            />
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { faCar, faPlane, faRocket } from "@fortawesome/pro-solid-svg-icons";
+import LDropdown from "./LDropdown.vue";
+
+const options = [
+    { id: "test", value: "Test" },
+    { id: "abc", value: "Abc" },
+    { id: "def", value: "Def" }
+];
+
+const optionsIcon = [
+    { id: "rocket", icon: { color: "#ff0000", icon: faRocket }, value: "Test" },
+    { id: "plane", icon: { color: "#00ff00", icon: faPlane }, value: "Abc" },
+    { id: "car", icon: { color: "#0000ff", icon: faCar }, value: "Def" }
+];
+
+const optionsDeep = [
+    { id: "child1", value: "Child 1" },
+    { id: "child2", disabled: true, value: "Child 2" },
+    { id: "parent1", children: [
+        { id: "child3", value: "Child 3 Child 3 Child 3 Child 3 Child 3 Child 3 Child 3 Child 3 Child 3 Child 3 " },
+        { id: "child4", disabled: true, value: "Child 4" },
+        { id: "child5", value: "Child 5" },
+        { id: "child6", value: "Child 6" }
+    ], value: "Parent 1" },
+    { id: "parent2", children: [
+        { id: "child7", value: "Child 7" },
+        { id: "child8", disabled: true, value: "Child 8" },
+        { id: "child9", value: "Child 9" },
+        { id: "child10", value: "Child 10" }
+    ], disabled: true, value: "Parent 2" }
+];
+
+const value = ref("");
+const valueIcon = ref("");
+const valueDeep = ref("");
+</script>