@luna-park/design 1.0.0

package/src/components/form/LAutoInput.vue

@@ -0,0 +1,101 @@
+<template>
+    <component
+        :is="textInputComponent"
+        ref="input"
+        v-model="value"
+        class="input"
+        :type="inputType"
+        v-bind="$attrs"
+        @keydown="processKeyDown"
+    />
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from "vue";
+
+import LColorInput from "@/components/form/LColorInput.vue";
+import LInput from "@/components/form/LInput.vue";
+import LTextarea from "@/components/form/LTextarea.vue";
+
+const props = withDefaults(defineProps<{
+    cast?: "text" | "number";
+    forceInput?: boolean;
+    modelValue: string | number;
+    type?: "text" | "number" | "color" | "auto";
+}>(), {
+    type: "auto"
+});
+
+const emits = defineEmits<(e: "update:modelValue", value: string | number) => void>();
+
+const value = computed({
+    get: () => props.modelValue,
+    set: (newValue: string | number) => {
+        if (props.cast === "number") {
+            newValue = Number(newValue);
+        }
+
+        if (props.cast === "text") {
+            newValue = String(newValue);
+        }
+
+        emits("update:modelValue", newValue);
+    }
+});
+
+const useTextarea = ref(false);
+
+function processKeyDown(event: KeyboardEvent) {
+    useTextarea.value = (event.key === "Enter" && event.shiftKey);
+}
+
+const input = ref();
+const inputType = computed(() => {
+    if (isColor.value) {
+        return "text";
+    }
+    return props.type;
+});
+
+const isColor = computed(() => {
+    if (props.type === "color") {
+        return true;
+    }
+
+    if (["auto", "text"].includes(props.type)) {
+        const stringValue = value.value as string || "";
+        return /^#[0-9a-f]{3,8}$/i.test(stringValue);
+    }
+
+    return false;
+});
+
+const textInputComponent = computed(() => {
+    if (isColor.value) {
+        return LColorInput;
+    }
+
+    if (!props.forceInput && (useTextarea.value || value.value?.includes?.("\n"))) {
+        return LTextarea;
+    }
+
+    return LInput;
+});
+
+function getCurrentInput() {
+    return input.value.$el.querySelector("input") ?? input.value.$el.querySelector("textarea");
+}
+
+watch(textInputComponent, async () => {
+    if (document.activeElement === getCurrentInput()) {
+        await nextTick();
+        getCurrentInput()?.focus();
+    }
+});
+</script>
+
+<style scoped>
+.auto-input {
+
+}
+</style>

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

@@ -0,0 +1,147 @@
+<template>
+    <Story
+        :layout="{
+            type: 'grid',
+            width: '20%',
+        }"
+    >
+        <template #controls>
+            <HstText
+                v-model="state.name"
+                title="Name"
+            />
+        </template>
+        <Variant title="standard + icon">
+            <LButton
+                class="button"
+                :icon="faRocket"
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="standard + icon + loading">
+            <LButton
+                class="button"
+                :icon="faRocket"
+                loading
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="big">
+            <LButton big>
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="borderless">
+            <LButton borderless>
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="big borderless">
+            <LButton
+                big
+                borderless
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="transparent">
+            <LButton transparent>
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="big transparent">
+            <LButton
+                big
+                transparent
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="borderless primary">
+            <LButton
+                borderless
+                primary
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="big borderless primary">
+            <LButton
+                big
+                borderless
+                primary
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="primary">
+            <LButton
+                primary
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="big primary">
+            <LButton
+                big
+                primary
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="big error">
+            <LButton
+                big
+                error
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="big warning">
+            <LButton
+                big
+                warning
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="big info">
+            <LButton
+                big
+                info
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+        <Variant title="big success">
+            <LButton
+                big
+                success
+            >
+                {{ state.name }}
+            </LButton>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import LButton from "./LButton.vue";
+import { faRocket } from "@fortawesome/pro-solid-svg-icons";
+
+const state = reactive({
+    name: "Test"
+});
+
+defineExpose({
+    state
+});
+</script>
+
+<style scoped>
+.button {
+    width: 100%;
+}
+</style>

package/src/components/form/LButton.vue

@@ -0,0 +1,227 @@
+<template>
+    <component
+        :is="tagType"
+        ref="button"
+        class="button"
+        :class="{big, transparent, borderless, primary, disabled: disabled || loading, square, lite, error, warning, info, success, inline, small, focus, cell}"
+        :disabled="disabled"
+        :href="href"
+        :target="target"
+    >
+        <LIcon
+            v-if="loading"
+            class="icon"
+            :icon="faCircleNotch"
+            spin
+        />
+        <LIcon
+            v-else-if="icon"
+            class="icon"
+            :icon="icon"
+        />
+        <slot />
+    </component>
+</template>
+
+<script setup lang="ts">
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faCircleNotch } from "@fortawesome/pro-solid-svg-icons";
+import { computed, onMounted, useTemplateRef } from "vue";
+
+import LIcon from "@/components/misc/LIcon.vue";
+
+const props = defineProps<{
+    big?: boolean;
+    borderless?: boolean;
+    cell?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    focus?: boolean;
+    href?: string;
+    icon?: IconDefinition;
+    info?: boolean;
+    inline?: boolean;
+    lite?: boolean;
+    loading?: boolean;
+    primary?: boolean;
+    small?: boolean;
+    square?: boolean;
+    success?: boolean;
+    target?: string;
+    transparent?: boolean;
+    warning?: boolean;
+}>();
+
+const tagType = computed(() => props.href ? "a" : "button");
+const buttonTemplate = useTemplateRef<HTMLElement>("button");
+
+onMounted(() => {
+    if (props.focus && buttonTemplate.value) {
+        buttonTemplate.value.focus({ focusVisible: true });
+    }
+});
+</script>
+
+<style scoped>
+.button {
+    --button-background: var(--color-background-1);
+    --button-background-hover: var(--color-background-2);
+    --button-content: var(--color-content-lite);
+    --button-border: var(--color-soft);
+    --button-radius: var(--length-radius-s);
+    padding: 0 var(--length-xxs);
+
+    .icon {
+        color: var(--color-content-liter);
+        transition: var(--transition-fast);
+    }
+
+    &.error {
+        --button-background: var(--color-error-background);
+        --button-content: var(--color-error-content);
+        --button-border: var(--color-error);
+    }
+
+    &.warning {
+        --button-background: var(--color-warning-background);
+        --button-content: var(--color-warning-content);
+        --button-border: var(--color-warning);
+    }
+
+    &.info {
+        --button-background: var(--color-info-background);
+        --button-content: var(--color-info-content);
+        --button-border: var(--color-info);
+    }
+
+    &.success {
+        --button-background: var(--color-success-background);
+        --button-content: var(--color-success-content);
+        --button-border: var(--color-success);
+    }
+
+    &.primary:not(.disabled) {
+        --button-background: var(--color-primary-dark);
+        --button-background-hover: var(--color-primary-darker);
+        --button-border: var(--color-primary-liter);
+    }
+
+    &.error, &.warning, &.info, &.success {
+        --button-background-hover: var(--button-border);
+    }
+
+    &.transparent {
+        --button-background: transparent;
+        --button-background-hover: var(--color-background-liter);
+    }
+
+    box-sizing: border-box;
+    height: 24px;
+    font-size: 0.8rem;
+    border: 1px solid var(--button-border);
+    background-clip: border-box;
+    color: var(--button-content);
+    transition: var(--transition-fast);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:has(.icon) {
+        gap: var(--length-xs);
+    }
+
+    &:not(.cell) {
+        border-radius: var(--button-radius);
+    }
+
+    &.lite {
+        color: var(--color-content-litest);
+
+        .icon {
+            color: var(--color-content-litest);
+        }
+    }
+
+    &:not(.transparent) {
+        background: var(--button-background);
+    }
+
+    /* .focus:focus is a hack to make focus-visible on chrome */
+    /* Remove when this is available: https://caniuse.com/mdn-api_htmlelement_focus_options_focusvisible_parameter */
+    &:focus-visible, &.focus:focus {
+        outline: 2px dotted var(--color-primary);
+        outline-offset: var(--length-xxxs);
+    }
+
+    &.square {
+        width: 24px;
+    }
+
+    &.big {
+        font-size: 0.9rem;
+        height: 36px;
+        padding: 0 var(--length-xs);
+
+        &.square {
+            width: 36px;
+        }
+    }
+
+    &.small {
+        font-size: 0.7rem;
+        height: 20px;
+        --button-radius: var(--length-radius-xs);
+
+        &.square {
+            width: 20px;
+        }
+
+        &:has(.icon) {
+            gap: var(--length-xxs);
+        }
+    }
+
+    &.borderless {
+        border-color: transparent;
+    }
+
+    &.disabled {
+        --button-content: var(--color-content-litest);
+        cursor: default;
+
+        .icon {
+            color: var(--button-content);
+        }
+    }
+
+    &:hover:not(.disabled) {
+        color: var(--color-content);
+        background: var(--button-background-hover);
+
+        .icon {
+            color: var(--color-content);
+        }
+
+        &:not(.borderless).transparent {
+            border-color: var(--color-content-litest);
+        }
+    }
+
+    &.transparent.borderless {
+        &.disabled, &.disabled .icon {
+            color: var(--color-content-litest);
+        }
+
+        &.lite {
+            &.disabled, &.disabled .icon {
+                color: var(--color-soft);
+            }
+        }
+
+        &:hover:not(.disabled) {
+            background: var(--button-background-hover);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+    <Story>
+        <LCheckbox />
+    </Story>
+</template>
+
+<script setup lang="ts">
+
+import LCheckbox from "./LCheckbox.vue";
+</script>
+
+<style scoped>
+</style>

package/src/components/form/LCheckbox.vue

@@ -0,0 +1,70 @@
+<template>
+    <div
+        class="checkbox"
+        :class="{colored, small, borderless}"
+        @click="toggleValue"
+    >
+        <LIcon
+            v-if="props.modelValue"
+            :icon="faCheck"
+        />
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { faCheck } from "@fortawesome/pro-solid-svg-icons";
+import LIcon from "@/components/misc/LIcon.vue";
+
+const props = defineProps<{
+    borderless?: boolean;
+    colored?: boolean;
+    modelValue?: boolean;
+    small?: boolean;
+}>();
+
+const emits = defineEmits<(e: "update:modelValue", value: boolean) => void>();
+
+function toggleValue() {
+    emits("update:modelValue", !props.modelValue);
+}
+</script>
+
+<style scoped>
+.checkbox {
+    color: var(--color-content-lite);
+    border: 1px solid var(--color-soft);
+    border-radius: var(--length-radius-s);
+    display: flex;
+    height: 24px;
+    width: 24px;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    font-size: 0.7rem;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: var(--color-background-1);
+    transition: var(--transition-fast);
+
+    &.colored {
+        border: 1px solid var(--color-type-boolean);
+    }
+
+    &:hover {
+        background: var(--color-background-2);
+        color: var(--color-content);
+        border-color: var(--color-primary);
+    }
+
+    &.small {
+        height: 20px;
+        width: 20px;
+        border-radius: var(--length-radius-xs);
+    }
+
+    &.borderless {
+        border-color: transparent;
+    }
+}
+</style>

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

@@ -0,0 +1,28 @@
+<template>
+    <Story
+        :layout="{
+            type: 'grid',
+            width: '200px'
+        }"
+    >
+        <LColorInput v-model="state.color" />
+        <template #controls>
+            <HstText
+                v-model="state.color"
+                title="Color"
+            />
+        </template>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import LColorInput from "@/components/form/LColorInput.vue";
+
+const state = reactive({
+    color: "#ff6600"
+});
+</script>
+
+<style scoped>
+</style>

package/src/components/form/LColorInput.vue

@@ -0,0 +1,101 @@
+<template>
+    <LInput
+        v-model="value"
+        v-bind="$attrs"
+        :big="big"
+        class="color-input"
+        :small="small"
+    >
+        <template #prefix>
+            <LFloating :offset="distance">
+                <div
+                    class="color-preview-wrapper"
+                    @click.middle="eyeDropper"
+                >
+                    <div class="color-preview" />
+                </div>
+                <template #popper>
+                    <div class="color-wrapper">
+                        <LColorPicker v-model="value" />
+                    </div>
+                </template>
+            </LFloating>
+        </template>
+    </LInput>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import LInput from "@/components/form/LInput.vue";
+import LColorPicker from "@/components/form/color-picker/LColorPicker.vue";
+import LFloating from "@/components/floating/LFloating.vue";
+import { useEyeDropper } from "@vueuse/core";
+
+const props = defineProps<{
+    big?: boolean;
+    modelValue: string;
+    small?: boolean;
+}>();
+
+const emits = defineEmits<(e: "update:modelValue", value: string) => void>();
+
+const { isSupported, open: openEyeDropper } = useEyeDropper();
+
+const distance = computed(() => {
+    if (props.big) {
+        return 4;
+    }
+    if (props.small) {
+        return 6;
+    }
+    return 9;
+});
+
+const value = computed({
+    get: () => props.modelValue,
+    set: (newValue: string) => emits("update:modelValue", newValue)
+});
+
+async function eyeDropper() {
+    if (!isSupported.value) {
+        return;
+    }
+
+    const result = await openEyeDropper();
+
+    if (result?.sRGBHex) {
+        value.value = result.sRGBHex;
+    }
+}
+</script>
+
+<style scoped>
+.color-input {
+    padding-left: var(--length-xxs);
+    gap: var(--length-xxs);
+
+    .color-preview-wrapper {
+        width: 14px;
+        height: 14px;
+        border-radius: var(--length-radius-xs);
+        cursor: pointer;
+        box-sizing: border-box;
+        box-shadow: 0 0 4px var(--color-soft);
+        overflow: hidden;
+        background: repeating-conic-gradient(var(--color-background-lite) 0% 25%, var(--color-background-3) 0% 50%) 50% / 16px 16px;
+
+        .color-preview {
+            background: v-bind(modelValue);
+            height: 100%;
+            width: 100%;
+        }
+    }
+}
+
+.color-wrapper {
+    padding: var(--length-s);
+    background: var(--color-background-0-backdrop);
+    backdrop-filter: blur(16px);
+}
+</style>
+