@skewedaspect/sleekspace-ui 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A Vue 3 component library with a cyberpunk aesthetic, featuring OKLCH colors, beveled corners, and a powerful design token system",
   "type": "module",
   "main": "dist/sleekspace-ui.umd.js",
@@ -68,6 +68,7 @@
     "vue-docgen-web-types": "^0.1.8"
   },
   "dependencies": {
+    "@vuelor/picker": "^0.3.1",
     "modern-normalize": "^3.0.1",
     "reka-ui": "^2.6.0"
   }

package/src/components/ColorPicker/SkColorPicker.vue

@@ -0,0 +1,355 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ColorPicker Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ColorPickerRoot
+        :model-value="modelValue ?? null"
+        :default-value="defaultValue"
+        :format="format"
+        :disabled="disabled"
+        styling="vanillacss"
+        @update:model-value="onColorChange"
+    >
+        <div :class="wrapperClasses" :style="customColorStyles">
+            <PopoverRoot>
+                <PopoverTrigger as-child :disabled="disabled">
+                    <div :class="anchorClasses">
+                        <div
+                            class="sk-color-picker-swatch"
+                            :style="{ background: modelValue || defaultValue }"
+                        />
+                        <span :class="inputClasses">
+                            {{ modelValue || placeholder }}
+                        </span>
+                        <div :class="triggerClasses">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="square"
+                                stroke-linejoin="miter"
+                                style="width: 1rem; height: 1rem;"
+                            >
+                                <polyline points="6 9 12 15 18 9" />
+                            </svg>
+                        </div>
+                    </div>
+                </PopoverTrigger>
+
+                <PopoverPortal>
+                    <PopoverContent
+                        :data-scheme="theme"
+                        :class="panelClasses"
+                        :style="customColorStyles"
+                        side="bottom"
+                        align="start"
+                        :side-offset="4"
+                    >
+                        <ColorPickerCanvas />
+                        <div class="sk-color-picker-controls">
+                            <ColorPickerEyeDropper class="sk-color-picker-eyedropper">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    style="width: 1rem; height: 1rem;"
+                                >
+                                    <path d="m2 22 1-1h3l9-9" />
+                                    <path d="M3 21v-3l9-9" />
+                                    <path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" />
+                                </svg>
+                            </ColorPickerEyeDropper>
+                            <div class="sk-color-picker-sliders">
+                                <ColorPickerSliderHue class="sk-color-picker-slider" />
+                                <ColorPickerSliderAlpha
+                                    v-if="showAlpha"
+                                    class="sk-color-picker-slider"
+                                />
+                            </div>
+                        </div>
+                        <div class="sk-color-picker-inputs">
+                            <div class="sk-color-picker-format-buttons">
+                                <button
+                                    v-for="fmt in FORMAT_OPTIONS"
+                                    :key="fmt"
+                                    :class="[
+                                        'sk-color-picker-format-btn',
+                                        { 'sk-active': displayFormat === fmt }
+                                    ]"
+                                    type="button"
+                                    @click="displayFormat = fmt"
+                                >
+                                    {{ fmt }}
+                                </button>
+                            </div>
+                            <component :is="INPUTS[displayFormat]" class="sk-color-picker-input-fields" />
+                        </div>
+                    </PopoverContent>
+                </PopoverPortal>
+            </PopoverRoot>
+        </div>
+    </ColorPickerRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Scoped attribute selector beats vuelor's un-layered CSS
+    .vuelor-picker-root
+    {
+        width: 100%;
+        background: transparent;
+        border-radius: 0;
+        padding: 0;
+        box-shadow: none;
+    }
+</style>
+
+<!-- Unscoped: vuelor overrides for portaled panel content (can't use scoped or layers) -->
+<style lang="scss">
+    @use '@/styles/mixins/cut-border' as *;
+
+    .sk-color-picker-panel
+    {
+        // Ensure panel width is set (can't rely on layered CSS)
+        width: 17rem;
+
+        .vuelor-picker-canvas-root
+        {
+            width: 100% !important;
+            height: auto !important;
+        }
+
+        // Override vuelor's inline styles on the canvas
+        .vuelor-picker-canvas-area
+        {
+            width: 100% !important;
+            height: 10rem !important;
+            border-radius: 0;
+            outline: none;
+
+            @include cut-border(
+                $cut: 0.375rem,
+                $border-width: var(--sk-border-width-thin),
+                $border-color: color-mix(in oklch, var(--sk-panel-color-base), transparent 50%),
+                $corners: (top-left)
+            );
+        }
+
+        .vuelor-picker-shared-thumb
+        {
+            border-radius: 2px;
+            border-width: 2px;
+            border-color: white;
+            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
+        }
+
+        .vuelor-picker-slider-root
+        {
+            height: 0.875rem;
+        }
+
+        .vuelor-picker-slider-track
+        {
+            height: 0.5rem;
+            border-radius: 2px;
+            box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sk-panel-color-base), transparent 60%);
+        }
+
+        .vuelor-picker-input-group
+        {
+            border-radius: 0;
+            outline: none;
+            gap: 2px;
+
+            @include cut-border(
+                $cut: 0.25rem,
+                $border-width: var(--sk-border-width-thin),
+                $border-color: color-mix(in oklch, var(--sk-panel-color-base), transparent 50%),
+                $corners: (top-right)
+            );
+
+            &:focus-within
+            {
+                border-color: var(--sk-panel-color-base);
+            }
+        }
+
+        .vuelor-picker-input-item
+        {
+            background: color-mix(in oklch, var(--sk-panel-color-base), #000 80%);
+            border-radius: 0;
+            padding: 0 var(--sk-space-xs);
+
+            &:first-child,
+            &:last-child
+            {
+                border-radius: 0;
+            }
+
+            &:last-child
+            {
+                min-width: 3rem;
+            }
+        }
+
+        .vuelor-picker-input-label
+        {
+            color: var(--sk-panel-fg);
+            opacity: 0.5;
+            font-size: 0.625rem;
+            text-transform: uppercase;
+        }
+
+        .vuelor-picker-input-field
+        {
+            color: var(--sk-panel-fg);
+            font-family: var(--sk-font-family-mono, var(--sk-font-family-base));
+            font-size: 0.75rem;
+            height: 1.75rem;
+        }
+
+        .vuelor-picker-swatch-base
+        {
+            border-radius: 2px;
+        }
+    }
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { type Component, type ComputedRef, computed, inject, ref, toRef } from 'vue';
+    import {
+        type ColorObject,
+        ColorPickerCanvas,
+        ColorPickerEyeDropper,
+        ColorPickerInputHSL,
+        ColorPickerInputHex,
+        ColorPickerInputRGB,
+        ColorPickerRoot,
+        ColorPickerSliderAlpha,
+        ColorPickerSliderHue,
+    } from '@vuelor/picker';
+    import '@vuelor/picker/style.css';
+    import {
+        PopoverContent,
+        PopoverPortal,
+        PopoverRoot,
+        PopoverTrigger,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkColorPickerFormat, SkColorPickerKind, SkColorPickerSize } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+    import { usePortalContext } from '@/composables/usePortalContext';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    type DisplayFormat = 'Hex' | 'RGB' | 'HSL';
+
+    const FORMAT_OPTIONS : DisplayFormat[] = [ 'Hex', 'RGB', 'HSL' ];
+
+    const INPUTS : Record<DisplayFormat, Component> = {
+        Hex: ColorPickerInputHex,
+        RGB: ColorPickerInputRGB,
+        HSL: ColorPickerInputHSL,
+    };
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkColorPickerComponentProps extends ComponentCustomColors
+    {
+        kind ?: SkColorPickerKind;
+        size ?: SkColorPickerSize;
+        format ?: SkColorPickerFormat;
+        showAlpha ?: boolean;
+        disabled ?: boolean;
+        placeholder ?: string;
+        defaultValue ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkColorPickerComponentProps>(), {
+        kind: undefined,
+        size: 'md',
+        format: 'hexa',
+        showAlpha: true,
+        disabled: false,
+        placeholder: 'Pick a color',
+        defaultValue: '#B63DDAFF',
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const modelValue = defineModel<string>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const { theme } = usePortalContext();
+
+    const fieldKind = inject<ComputedRef<SkColorPickerKind | undefined>>('field-kind', computed(() => undefined));
+    const displayFormat = ref<DisplayFormat>('Hex');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const wrapperClasses = computed(() => ({
+        'sk-color-picker': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ props.size }`]: true,
+        'sk-disabled': props.disabled,
+    }));
+
+    const anchorClasses = computed(() => ({
+        'sk-color-picker-anchor': true,
+    }));
+
+    const inputClasses = computed(() => ({
+        'sk-color-picker-input': true,
+    }));
+
+    const triggerClasses = computed(() => ({
+        'sk-color-picker-trigger': true,
+    }));
+
+    const panelClasses = computed(() => ({
+        'sk-color-picker-panel': true,
+        [`sk-${ effectiveKind.value }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'color-picker',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    function onColorChange(value : string | ColorObject | null) : void
+    {
+        if(typeof value === 'string')
+        {
+            modelValue.value = value;
+        }
+    }
+
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/ColorPicker/index.ts

@@ -0,0 +1,6 @@
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkColorPicker } from './SkColorPicker.vue';
+export * from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/ColorPicker/types.ts

@@ -0,0 +1,11 @@
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export type SkColorPickerKind = ComponentKind;
+export type SkColorPickerSize = ComponentSize;
+export type SkColorPickerFormat = 'hex' | 'hexa' | 'hsl' | 'hsla' | 'rgb' | 'rgba';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/ContextMenu/SkContextMenu.vue

@@ -0,0 +1,83 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ContextMenu Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ContextMenuRoot>
+        <ContextMenuTrigger as-child>
+            <slot name="trigger" />
+        </ContextMenuTrigger>
+
+        <ContextMenuPortal>
+            <ContextMenuContent
+                :data-scheme="theme"
+                :class="classes"
+                :style="customColorStyles"
+            >
+                <slot />
+            </ContextMenuContent>
+        </ContextMenuPortal>
+    </ContextMenuRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles use shared menu styles from /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed, provide, toRef } from 'vue';
+    import {
+        ContextMenuContent,
+        ContextMenuPortal,
+        ContextMenuRoot,
+        ContextMenuTrigger,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkContextMenuKind } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+    import { usePortalContext } from '@/composables/usePortalContext';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkContextMenuComponentProps extends ComponentCustomColors
+    {
+        kind ?: SkContextMenuKind;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkContextMenuComponentProps>(), {
+        kind: 'neutral',
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const { theme } = usePortalContext();
+
+    provide('context-menu-kind', computed(() => props.kind));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-menu-content': true,
+        [`sk-${ props.kind }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'menu',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/ContextMenu/SkContextMenuCheckboxItem.vue

@@ -0,0 +1,72 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ContextMenuCheckboxItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ContextMenuCheckboxItem
+        :class="classes"
+        :model-value="modelValue"
+        :disabled="disabled"
+        @update:model-value="$emit('update:modelValue', $event)"
+        @select.prevent
+    >
+        <ContextMenuItemIndicator class="sk-menu-item-indicator">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="square"
+                stroke-linejoin="miter"
+                style="width: 0.875rem; height: 0.875rem;"
+            >
+                <polyline points="4 12 10 18 20 6" />
+            </svg>
+        </ContextMenuItemIndicator>
+        <slot />
+    </ContextMenuCheckboxItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed } from 'vue';
+    import { ContextMenuCheckboxItem, ContextMenuItemIndicator } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkContextMenuCheckboxItemComponentProps
+    {
+        modelValue ?: boolean;
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkContextMenuCheckboxItemComponentProps>(), {
+        modelValue: false,
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    defineEmits<{
+        'update:modelValue' : [value : boolean];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-menu-item': true,
+        'sk-menu-checkbox-item': true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/ContextMenu/SkContextMenuItem.vue

@@ -0,0 +1,49 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ContextMenuItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ContextMenuItem :class="classes" :disabled="disabled" @click="$emit('click', $event)">
+        <slot />
+    </ContextMenuItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed } from 'vue';
+    import { ContextMenuItem } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkContextMenuItemComponentProps
+    {
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkContextMenuItemComponentProps>(), {
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    defineEmits<{
+        click : [event : Event];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-menu-item': true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/ContextMenu/SkContextMenuLabel.vue

@@ -0,0 +1,17 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ContextMenuLabel Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ContextMenuLabel class="sk-menu-label">
+        <slot />
+    </ContextMenuLabel>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { ContextMenuLabel } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/ContextMenu/SkContextMenuRadioGroup.vue

@@ -0,0 +1,36 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ContextMenuRadioGroup Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ContextMenuRadioGroup :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
+        <slot />
+    </ContextMenuRadioGroup>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { ContextMenuRadioGroup } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkContextMenuRadioGroupComponentProps
+    {
+        modelValue ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkContextMenuRadioGroupComponentProps>(), {
+        modelValue: '',
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    defineEmits<{
+        'update:modelValue' : [value : string];
+    }>();
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->