@luna-park/design 1.0.0

package/src/components/form/LProgress.vue

@@ -0,0 +1,77 @@
+<template>
+    <div
+        class="progress"
+        :class="{big, line, borderless}"
+    >
+        <div class="value" />
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+    big?: boolean;
+    borderless?: boolean;
+    line?: boolean;
+    max: number;
+    value: number;
+}>();
+
+const percentage = computed(() => {
+    return `${ props.value / props.max * 100 }%`;
+});
+</script>
+
+<style scoped>
+.progress {
+    box-sizing: border-box;
+    height: 24px;
+    font-size: 0.8rem;
+    background: var(--color-background-1);
+    border: 1px solid var(--color-soft);
+    border-radius: var(--length-radius-s);
+    color: var(--color-content-lite);
+    transition: var(--transition-fast);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.line {
+        border-radius: var(--length-radius-xs);
+        height: 8px;
+    }
+
+    &.big {
+        font-size: .9rem;
+        border-width: 2px;
+        border-radius: var(--length-radius-m);
+        height: 36px;
+
+        &.line {
+            border-radius: var(--length-radius-s);
+            height: 12px;
+        }
+    }
+
+    &.borderless {
+        border: none;
+    }
+
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+
+    .value {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: v-bind(percentage);
+        background: var(--color-primary-dark);
+        z-index: -1;
+        transition: width var(--duration-fast);
+    }
+}
+</style>

package/src/components/form/LSelect.story.vue

@@ -0,0 +1,67 @@
+<template>
+    <Story
+        :layout="{
+            type: 'grid',
+            width: '320px',
+        }"
+    >
+        <Variant title="Default">
+            <LSelect
+                v-model="value"
+                :options="options"
+            />
+        </Variant>
+        <Variant title="Default">
+            <LSelect
+                v-model="value"
+                :options="optionsIcon"
+            />
+        </Variant>
+        <Variant title="Custom slots">
+            <LSelect
+                v-model="value"
+                :options="options"
+            >
+                <template #hover>
+                    Hello!
+                </template>
+            </LSelect>
+        </Variant>
+        <Variant title="Grid">
+            <LSelect
+                v-model="value"
+                :grid="2"
+                :options="options"
+            >
+                <template #hover>
+                    Hello!
+                </template>
+            </LSelect>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import LSelect from "@/components/form/LSelect.vue";
+import { faCar, faPlane, faRocket } from "@fortawesome/pro-solid-svg-icons";
+
+const value = ref("default");
+
+const options = [
+    "default",
+    "hover",
+    "active",
+    "focus"
+];
+
+const optionsIcon = [
+    { id: "plane", icon: faPlane, value: "Plane" },
+    { id: "car", icon: faCar, value: "Car" },
+    { id: "rocket", icon: faRocket, value: "Rocket" }
+];
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form/LSelect.vue

@@ -0,0 +1,142 @@
+<template>
+    <div
+        class="select"
+        :class="{grid, small, borderless, raw}"
+    >
+        <div
+            v-for="option in internalOptions"
+            :key="option.id"
+            class="option"
+            :class="{selected: option.id === props.modelValue}"
+            :title="option.title || option.value"
+            @click="emits('update:modelValue', option.id)"
+        >
+            <slot :name="option.id">
+                <LIcon
+                    v-if="option.icon"
+                    class="icon"
+                    :icon="option.icon"
+                />
+                {{ option.value }}
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { computed } from "vue";
+
+import LIcon from "@/components/misc/LIcon.vue";
+
+type TFullOption = { icon?: IconDefinition; id: string; title?: string; value?: string; };
+type TOptions = Array<string | TFullOption> | Record<string, string>;
+
+const props = defineProps<{
+    borderless?: boolean;
+    grid?: number;
+    modelValue?: string;
+    options: TOptions;
+    raw?: boolean;
+    small?: boolean;
+}>();
+
+const emits = defineEmits<(e: "update:modelValue", value: string) => void>();
+
+const internalOptions = computed<Array<TFullOption>>(() => {
+    if (Array.isArray(props.options)) {
+        return props.options.map((value) => {
+            if (typeof value === "string") {
+                return { id: value, value };
+            }
+
+            return value;
+        });
+    }
+
+    return Object.entries(props.options).map(([id, value]) => ({ id, value }));
+});
+
+const columnTemplate = computed(() => `repeat(${ props.grid || 1 }, 1fr)`);
+</script>
+
+<style scoped>
+.select {
+    display: flex;
+    font-size: 0.8rem;
+    color: var(--color-content-liter);
+    background: var(--color-background-1);
+    border: 1px solid var(--color-soft);
+    box-sizing: border-box;
+    align-items: center;
+    border-radius: var(--length-radius-s);
+    overflow: hidden;
+    position: relative;
+    background-clip: content-box;
+    gap: 1px;
+    z-index: 0;
+
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        background-color: var(--color-soft);
+    }
+
+    &.grid {
+        display: grid;
+        grid-template-columns: v-bind(columnTemplate);
+    }
+
+    .option {
+        box-sizing: border-box;
+        height: 22px;
+        display: flex;
+        gap: var(--length-xxs);
+        align-items: center;
+        justify-content: center;
+        flex: 1 1 0;
+        cursor: pointer;
+        transition: var(--transition-fast);
+        background: var(--color-background-1);
+        padding: 0 var(--length-xs);
+
+        .icon {
+            color: var(--color-content-litest);
+        }
+
+        &:hover {
+            background-color: var(--color-background-2);
+        }
+
+        &.selected {
+            color: var(--color-content-lite);
+            background-color: var(--color-primary-dark);
+
+            .icon {
+                color: var(--color-content-liter);
+            }
+        }
+    }
+
+    &.raw .option {
+        padding: 0;
+    }
+
+    &.small {
+        .option {
+            height: 18px;
+        }
+    }
+
+    &.borderless {
+        border-color: var(--color-background-1);
+        border-radius: var(--length-radius-xs);
+
+        &::before {
+            background-color: var(--color-background-1);
+        }
+    }
+}
+</style>

package/src/components/form/LSwitch.story.vue

@@ -0,0 +1,15 @@
+<template>
+    <Story>
+        <LSwitch v-model="value" />
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import LSwitch from "./LSwitch.vue";
+
+const value = ref(false);
+</script>
+
+<style scoped>
+</style>

package/src/components/form/LSwitch.vue

@@ -0,0 +1,79 @@
+<template>
+    <div
+        class="switch"
+        :class="{activated: modelValue, big}"
+        :title="title"
+        @click="toggle"
+    >
+        <div class="circle" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+    big?: boolean;
+    modelValue: boolean;
+}>();
+
+const emits = defineEmits<(e: "update:modelValue", value: boolean) => void>();
+
+function toggle() {
+    emits("update:modelValue", !props.modelValue);
+}
+
+const title = computed(() => props.modelValue ? "On" : "Off");
+</script>
+
+<style scoped>
+.switch {
+    --switch-size: 20px;
+    --switch-background: var(--color-background-0);
+    background: var(--switch-background);
+    width: calc(2 * var(--switch-size));
+    border-radius: var(--switch-size);
+    cursor: pointer;
+    transition: background var(--duration-fast);
+    border: 1px solid var(--color-soft);
+
+    &.big {
+        --switch-size: 32px;
+        border-width: 2px;
+    }
+
+    .circle {
+        left: 0;
+        position: relative;
+        background: var(--color-background-1);
+        border-radius: var(--switch-size);
+        border: 2px solid var(--switch-background);
+        box-sizing: border-box;
+        height: var(--switch-size);
+        width: var(--switch-size);
+        transition: background var(--duration-fast), border var(--duration-fast), left var(--duration-fast);
+    }
+
+    &:hover {
+        .circle {
+            background: var(--color-background-3);
+        }
+    }
+
+    &.activated {
+        border-color: var(--color-primary);
+        --switch-background: var(--color-primary-dark);
+
+        .circle {
+            left: var(--switch-size);
+            background: var(--color-primary);
+        }
+
+        &:hover {
+            .circle {
+                background: var(--color-primary-content-lite);
+            }
+        }
+    }
+}
+</style>

package/src/components/form/LTextarea.story.vue

@@ -0,0 +1,29 @@
+<template>
+    <Story>
+        <Variant title="standard">
+            <LTextarea
+                v-model="text"
+                class="textarea"
+            />
+        </Variant>
+        <Variant title="big">
+            <LTextarea
+                v-model="text"
+                big
+                class="textarea"
+            />
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import LTextarea from "./LTextarea.vue";
+
+const text = ref("Lorem ipsum");
+</script>
+
+<style>
+.textarea {
+}
+</style>

package/src/components/form/LTextarea.vue

@@ -0,0 +1,151 @@
+<template>
+    <label
+        class="input"
+        :class="{big, transparent, borderless, primary, 'with-label':!!label, 'with-value': hasValue, small }"
+    >
+        <span
+            v-if="label"
+            class="label"
+        >
+            {{ label }}
+        </span>
+        <textarea
+            class="text"
+            :placeholder="placeholder"
+            :title="modelValue"
+            :value="modelValue"
+            @input="emits('update:modelValue', $event.target.value)"
+            @keydown.enter="emits('enter')"
+        />
+    </label>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+    big?: boolean;
+    borderless?: boolean;
+    label?: string;
+    mask?: string; // TODO: mask (like XX/XX/XXXX)
+    modelValue: string;
+    placeholder?: string;
+    primary?: boolean;
+    small?: boolean;
+    transparent?: boolean;
+}>();
+
+const emits = defineEmits<{
+    (e: "update:modelValue", id: string): void;
+    (e: "enter"): void;
+}>();
+
+const hasValue = computed(() => {
+    return !!props.modelValue?.trim() || props.placeholder;
+});
+</script>
+
+<style scoped>
+.input {
+    font-size: 0.8rem;
+    color: var(--color-content-lite);
+    background: var(--color-background-1);
+    border: 1px solid var(--color-soft);
+    border-radius: var(--length-radius-s);
+    padding: 0 var(--length-xxs);
+    transition: var(--transition-fast);
+    cursor: text;
+    display: flex;
+    box-sizing: border-box;
+    position: relative;
+
+    .label {
+        position: absolute;
+        top: 2px;
+        left: 0;
+        transform: translate(6px, 0px);
+        transition: var(--transition-fast),transform var(--duration-fast);
+        color: var(--color-content-liter);
+        opacity: 0.5;
+    }
+
+    &.big {
+        font-size: .9rem;
+        border-width: 2px;
+        border-radius: var(--length-radius-m);
+        padding: 0 var(--length-xs);
+
+        .label {
+            transform: translate(10px, 0px);
+            top: 6px;
+        }
+    }
+
+    &.small {
+        font-size: .7rem;
+        border-radius: var(--length-radius-xs);
+        padding: 0 var(--length-xxxs);
+    }
+
+    &.with-label:focus-within, &.with-label.with-value {
+        margin-top: 18px;
+
+        .label {
+            transform: translate(0px, -24px);
+            color: var(--color-content-liter);
+            opacity: 1;
+        }
+
+        &.big {
+            margin-top: 24px;
+
+            .label {
+                transform: translate(0px, -36px);
+            }
+        }
+    }
+
+    &.with-label:focus-within {
+        .label {
+            color: var(--color-content);
+        }
+    }
+
+    &.borderless {
+        border: none;
+    }
+
+    &.primary {
+        background: var(--color-primary);
+    }
+
+    &.transparent {
+        background: none;
+    }
+
+    .text {
+        cursor: inherit;
+        width: 100%;
+
+        &::placeholder {
+            color: var(--color-content-liter);
+            opacity: 0.5;
+        }
+    }
+
+    &:hover, &:focus-within {
+        background: var(--color-background-2);
+        color: var(--color-content);
+        border-color: var(--color-primary);
+
+        &.primary {
+            background: var(--color-primary-dark);
+        }
+
+        &.transparent {
+            background: none;
+            border-color: var(--color-content-litest);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,129 @@
+<template>
+    <div
+        class="color-alpha"
+        @mousedown.left="isUpdating = true"
+    >
+        <div
+            ref="gradient"
+            class="checkerboard"
+            :style="gradientStyle"
+        >
+            <div class="gradient" />
+        </div>
+        <div
+            class="cursor"
+            :style="cursorStyle"
+        >
+            <div
+                class="color"
+                :style="colorStyle"
+            />
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { usePointer } from "@vueuse/core";
+import { clamp } from "@luna-park/utils";
+
+const props = withDefaults(defineProps<{
+    alpha: number;
+    height?: number;
+    hex: string;
+}>(), {
+    height: 120
+});
+
+const emits = defineEmits<(e: "update:alpha", value: number) => void>();
+
+const cursorStyle = computed(() => {
+    return {
+        top: `${ props.height * (1 - props.alpha) - 6 }px`
+    };
+});
+
+const colorStyle = computed(() => {
+    return {
+        background: props.hex + Math.round(props.alpha * 255).toString(16).padStart(2, "0")
+    };
+});
+
+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 alpha = clamp(1 - (mouseY.value - rect.top) / props.height, 0, 1);
+
+    emits("update:alpha", alpha);
+});
+</script>
+
+<style scoped>
+.color-alpha {
+    position: relative;
+
+    canvas {
+        width: 16px;
+        display: block;
+    }
+
+    .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);
+        background: repeating-conic-gradient(var(--color-background-lite) 0% 25%, var(--color-background-3) 0% 50%) 50% / 16px 16px;
+        overflow: hidden;
+        cursor: ns-resize;
+
+        &:hover {
+            border-color: var(--color-content-lite);
+        }
+
+        .color {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .checkerboard {
+        background: repeating-conic-gradient(var(--color-background-lite) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
+        border-radius: var(--length-radius-s);
+        overflow: hidden;
+        width: 16px;
+        height: 100%;
+
+        .gradient {
+            height: 100%;
+            background: linear-gradient(to bottom, v-bind('props.hex'), transparent);
+        }
+    }
+}
+</style>