@skewedaspect/sleekspace-ui 0.5.1 → 0.7.0

package/src/components/Toolbar/SkToolbar.vue

@@ -0,0 +1,69 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Toolbar Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ToolbarRoot :orientation="orientation" :class="classes" :style="customColorStyles">
+        <slot />
+    </ToolbarRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_toolbar.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed, toRef } from 'vue';
+    import { ToolbarRoot } from 'reka-ui';
+
+    // Types
+    import type { SkToolbarCorner, SkToolbarKind, SkToolbarOrientation } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkToolbarComponentProps
+    {
+        kind ?: SkToolbarKind;
+        orientation ?: SkToolbarOrientation;
+        corners ?: SkToolbarCorner[];
+        baseColor ?: string;
+        textColor ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkToolbarComponentProps>(), {
+        kind: 'neutral',
+        orientation: 'horizontal',
+        corners: () => [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ],
+        baseColor: undefined,
+        textColor: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'toolbar',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+
+    const classes = computed(() => ({
+        'sk-toolbar': true,
+        [`sk-${ props.kind }`]: true,
+        [`sk-${ props.orientation }`]: true,
+        'sk-cut-top-left': props.corners.includes('top-left'),
+        'sk-cut-top-right': props.corners.includes('top-right'),
+        'sk-cut-bottom-right': props.corners.includes('bottom-right'),
+        'sk-cut-bottom-left': props.corners.includes('bottom-left'),
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Toolbar/SkToolbarButton.vue

@@ -0,0 +1,36 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ToolbarButton Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ToolbarButton class="sk-toolbar-button" :disabled="disabled">
+        <slot />
+    </ToolbarButton>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_toolbar.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { ToolbarButton } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkToolbarButtonComponentProps
+    {
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkToolbarButtonComponentProps>(), {
+        disabled: false,
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Toolbar/SkToolbarSeparator.vue

@@ -0,0 +1,15 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ToolbarSeparator Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ToolbarSeparator class="sk-toolbar-separator" />
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { ToolbarSeparator } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Toolbar/SkToolbarToggleGroup.vue

@@ -0,0 +1,49 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ToolbarToggleGroup Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ToolbarToggleGroup
+        class="sk-toolbar-toggle-group"
+        :model-value="modelValue"
+        :type="type"
+        :disabled="disabled"
+        @update:model-value="$emit('update:modelValue', $event as string | string[])"
+    >
+        <slot />
+    </ToolbarToggleGroup>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { ToolbarToggleGroup } from 'reka-ui';
+
+    // Types
+    import type { SkToolbarToggleType } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkToolbarToggleGroupComponentProps
+    {
+        modelValue ?: string | string[];
+        type ?: SkToolbarToggleType;
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkToolbarToggleGroupComponentProps>(), {
+        modelValue: undefined,
+        type: 'single',
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    defineEmits<{
+        'update:modelValue' : [value : string | string[]];
+    }>();
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Toolbar/SkToolbarToggleItem.vue

@@ -0,0 +1,37 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ToolbarToggleItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ToolbarToggleItem class="sk-toolbar-toggle-item" :value="value" :disabled="disabled">
+        <slot />
+    </ToolbarToggleItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_toolbar.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { ToolbarToggleItem } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkToolbarToggleItemComponentProps
+    {
+        value : string;
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkToolbarToggleItemComponentProps>(), {
+        disabled: false,
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Toolbar/index.ts

@@ -0,0 +1,12 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Toolbar Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkToolbar } from './SkToolbar.vue';
+export { default as SkToolbarButton } from './SkToolbarButton.vue';
+export { default as SkToolbarSeparator } from './SkToolbarSeparator.vue';
+export { default as SkToolbarToggleGroup } from './SkToolbarToggleGroup.vue';
+export { default as SkToolbarToggleItem } from './SkToolbarToggleItem.vue';
+export type { SkToolbarCorner, SkToolbarKind, SkToolbarOrientation, SkToolbarToggleType } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Toolbar/types.ts

@@ -0,0 +1,12 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Toolbar Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind } from '@/types';
+
+export type SkToolbarKind = ComponentKind;
+export type SkToolbarOrientation = 'horizontal' | 'vertical';
+export type SkToolbarToggleType = 'single' | 'multiple';
+export type SkToolbarCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/TreeView/SkTreeItem.vue

@@ -0,0 +1,84 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - TreeItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <TreeItem
+        v-slot="{ isExpanded, isSelected }"
+        class="sk-tree-item"
+        v-bind="item.bind"
+        :value="item.value"
+        :level="item.level"
+        :disabled="disabled"
+        :data-level="item.level"
+        :style="{ '--sk-tree-level': item.level, marginLeft: `calc(${ item.level } * var(--sk-tree-indent))` }"
+    >
+        <!-- Expand chevron -->
+        <div v-if="showChevron && item.hasChildren" :class="['sk-tree-item-chevron', { 'sk-expanded': isExpanded }]">
+            <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: 0.75rem; height: 0.75rem;"
+            >
+                <polyline points="9 6 15 12 9 18" />
+            </svg>
+        </div>
+        <!-- Spacer for leaf nodes when chevron is shown (keeps text aligned with branches) -->
+        <div v-else-if="showChevron" class="sk-tree-item-chevron-spacer" />
+
+        <!-- Leading slot (icons, checkboxes, etc.) -->
+        <div v-if="$slots.leading" class="sk-tree-item-leading">
+            <slot name="leading" :is-expanded="isExpanded" :is-selected="isSelected" />
+        </div>
+
+        <!-- Content -->
+        <div class="sk-tree-item-content">
+            <slot
+                :is-expanded="isExpanded"
+                :is-selected="isSelected"
+                :has-children="item.hasChildren"
+                :level="item.level"
+            />
+        </div>
+
+        <!-- Trailing slot -->
+        <div v-if="$slots.trailing" class="sk-tree-item-trailing">
+            <slot name="trailing" :is-expanded="isExpanded" :is-selected="isSelected" />
+        </div>
+    </TreeItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_tree-view.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { type FlattenedItem, TreeItem } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkTreeItemComponentProps
+    {
+        item : FlattenedItem<Record<string, unknown>>;
+        disabled ?: boolean;
+        showChevron ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkTreeItemComponentProps>(), {
+        disabled: false,
+        showChevron: true,
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/TreeView/SkTreeView.vue

@@ -0,0 +1,120 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - TreeView Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <TreeRoot
+        :items="items"
+        :get-key="getKey"
+        :model-value="modelValue"
+        :multiple="multiple"
+        :propagate-select="propagateSelect"
+        :default-expanded="expandedKeys"
+        :class="classes"
+        :style="customColorStyles"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <template #default="{ flattenItems }">
+            <slot :flatten-items="flattenItems" />
+        </template>
+    </TreeRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_tree-view.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+    import { computed, toRef } from 'vue';
+    import { TreeRoot } from 'reka-ui';
+
+    // Types
+    import type { SkTreeViewDefaultExpanded, SkTreeViewKind } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkTreeViewComponentProps
+    {
+        items : T[];
+        getKey : (item : T) => string;
+        modelValue ?: T | T[];
+        multiple ?: boolean;
+        propagateSelect ?: boolean;
+        kind ?: SkTreeViewKind;
+        defaultExpanded ?: SkTreeViewDefaultExpanded;
+        baseColor ?: string;
+        textColor ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkTreeViewComponentProps>(), {
+        modelValue: undefined,
+        multiple: false,
+        propagateSelect: false,
+        kind: 'neutral',
+        defaultExpanded: 'none',
+        baseColor: undefined,
+        textColor: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    defineEmits<{
+        'update:modelValue' : [value : T | T[]];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    function getAllKeys(items : T[]) : string[]
+    {
+        const keys : string[] = [];
+        for(const item of items)
+        {
+            keys.push(props.getKey(item));
+            if(item.children && Array.isArray(item.children))
+            {
+                keys.push(...getAllKeys(item.children as T[]));
+            }
+        }
+
+        return keys;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const expandedKeys = computed(() =>
+    {
+        if(props.defaultExpanded === 'all')
+        {
+            return getAllKeys(props.items);
+        }
+
+        if(props.defaultExpanded === 'none')
+        {
+            return [];
+        }
+
+        return props.defaultExpanded;
+    });
+
+    const customColorStyles = useCustomColors(
+        'tree',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+
+    const classes = computed(() => ({
+        'sk-tree-view': true,
+        [`sk-${ props.kind }`]: true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/TreeView/index.ts

@@ -0,0 +1,9 @@
+//----------------------------------------------------------------------------------------------------------------------
+// TreeView Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkTreeItem } from './SkTreeItem.vue';
+export { default as SkTreeView } from './SkTreeView.vue';
+export type { SkTreeViewDefaultExpanded, SkTreeViewKind } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/TreeView/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// TreeView Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind } from '@/types';
+
+export type SkTreeViewKind = ComponentKind;
+export type SkTreeViewDefaultExpanded = 'all' | 'none' | string[];
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/global.d.ts

@@ -29,9 +29,19 @@ declare module '@vue/runtime-core' {
         SkCard: DefineComponent<import('./components/Card/SkCard.vue').SkCardComponentProps>;
         SkCheckbox: DefineComponent<import('./components/Checkbox/SkCheckbox.vue').SkCheckboxComponentProps>;
         SkCollapsible: DefineComponent<import('./components/Collapsible/SkCollapsible.vue').SkCollapsibleComponentProps>;
+        SkColorPicker: DefineComponent<import('./components/ColorPicker/SkColorPicker.vue').SkColorPickerComponentProps>;
+        SkContextMenu: DefineComponent<import('./components/ContextMenu/SkContextMenu.vue').SkContextMenuComponentProps>;
+        SkContextMenuCheckboxItem: DefineComponent<import('./components/ContextMenu/SkContextMenuCheckboxItem.vue').SkContextMenuCheckboxItemComponentProps>;
+        SkContextMenuItem: DefineComponent<import('./components/ContextMenu/SkContextMenuItem.vue').SkContextMenuItemComponentProps>;
+        SkContextMenuRadioGroup: DefineComponent<import('./components/ContextMenu/SkContextMenuRadioGroup.vue').SkContextMenuRadioGroupComponentProps>;
+        SkContextMenuRadioItem: DefineComponent<import('./components/ContextMenu/SkContextMenuRadioItem.vue').SkContextMenuRadioItemComponentProps>;
+        SkContextMenuSubmenu: DefineComponent<import('./components/ContextMenu/SkContextMenuSubmenu.vue').SkContextMenuSubmenuComponentProps>;
         SkDivider: DefineComponent<import('./components/Divider/SkDivider.vue').SkDividerComponentProps>;
         SkDropdown: DefineComponent<import('./components/Dropdown/SkDropdown.vue').SkDropdownComponentProps>;
+        SkDropdownCheckboxItem: DefineComponent<import('./components/Dropdown/SkDropdownCheckboxItem.vue').SkDropdownCheckboxItemComponentProps>;
         SkDropdownMenuItem: DefineComponent<import('./components/Dropdown/SkDropdownMenuItem.vue').SkDropdownMenuItemComponentProps>;
+        SkDropdownRadioGroup: DefineComponent<import('./components/Dropdown/SkDropdownRadioGroup.vue').SkDropdownRadioGroupComponentProps>;
+        SkDropdownRadioItem: DefineComponent<import('./components/Dropdown/SkDropdownRadioItem.vue').SkDropdownRadioItemComponentProps>;
         SkDropdownSubmenu: DefineComponent<import('./components/Dropdown/SkDropdownSubmenu.vue').SkDropdownSubmenuComponentProps>;
         SkField: DefineComponent<import('./components/Field/SkField.vue').SkFieldComponentProps>;
         SkGroup: DefineComponent<import('./components/Group/SkGroup.vue').SkGroupComponentProps>;
@@ -49,12 +59,18 @@ declare module '@vue/runtime-core' {
         SkProgress: DefineComponent<import('./components/Progress/SkProgress.vue').SkProgressComponentProps>;
         SkRadio: DefineComponent<import('./components/Radio/SkRadio.vue').SkRadioComponentProps>;
         SkRadioGroup: DefineComponent<import('./components/Radio/SkRadioGroup.vue').SkRadioGroupComponentProps>;
+        SkScrollArea: DefineComponent<import('./components/ScrollArea/SkScrollArea.vue').SkScrollAreaComponentProps>;
+        SkSelect: DefineComponent<import('./components/Select/SkSelect.vue').SkSelectComponentProps>;
+        SkSelectItem: DefineComponent<import('./components/Select/SkSelectItem.vue').SkSelectItemComponentProps>;
         SkSidebar: DefineComponent<import('./components/Sidebar/SkSidebar.vue').SkSidebarComponentProps>;
         SkSidebarItem: DefineComponent<import('./components/Sidebar/SkSidebarItem.vue').SkSidebarItemComponentProps>;
         SkSidebarSection: DefineComponent<import('./components/Sidebar/SkSidebarSection.vue').SkSidebarSectionComponentProps>;
         SkSkeleton: DefineComponent<import('./components/Skeleton/SkSkeleton.vue').SkSkeletonComponentProps>;
         SkSlider: DefineComponent<import('./components/Slider/SkSlider.vue').SkSliderComponentProps>;
         SkSpinner: DefineComponent<import('./components/Spinner/SkSpinner.vue').SkSpinnerComponentProps>;
+        SkSplitter: DefineComponent<import('./components/Splitter/SkSplitter.vue').SkSplitterComponentProps>;
+        SkSplitterHandle: DefineComponent<import('./components/Splitter/SkSplitterHandle.vue').SkSplitterHandleComponentProps>;
+        SkSplitterPanel: DefineComponent<import('./components/Splitter/SkSplitterPanel.vue').SkSplitterPanelComponentProps>;
         SkSwitch: DefineComponent<import('./components/Switch/SkSwitch.vue').SkSwitchComponentProps>;
         SkTab: DefineComponent<import('./components/Tabs/SkTab.vue').SkTabComponentProps>;
         SkTable: DefineComponent<import('./components/Table/SkTable.vue').SkTableComponentProps>;
@@ -67,7 +83,13 @@ declare module '@vue/runtime-core' {
         SkTextarea: DefineComponent<import('./components/Textarea/SkTextarea.vue').SkTextareaComponentProps>;
         SkTheme: DefineComponent<import('./components/Theme/SkTheme.vue').SkThemeComponentProps>;
         SkToastProvider: DefineComponent<import('./components/Toast/SkToastProvider.vue').SkToastProviderComponentProps>;
+        SkToolbar: DefineComponent<import('./components/Toolbar/SkToolbar.vue').SkToolbarComponentProps>;
+        SkToolbarButton: DefineComponent<import('./components/Toolbar/SkToolbarButton.vue').SkToolbarButtonComponentProps>;
+        SkToolbarToggleGroup: DefineComponent<import('./components/Toolbar/SkToolbarToggleGroup.vue').SkToolbarToggleGroupComponentProps>;
+        SkToolbarToggleItem: DefineComponent<import('./components/Toolbar/SkToolbarToggleItem.vue').SkToolbarToggleItemComponentProps>;
         SkTooltip: DefineComponent<import('./components/Tooltip/SkTooltip.vue').SkTooltipComponentProps>;
+        SkTreeItem: DefineComponent<import('./components/TreeView/SkTreeItem.vue').SkTreeItemComponentProps>;
+        SkTreeView: DefineComponent<import('./components/TreeView/SkTreeView.vue').SkTreeViewComponentProps>;
     }
 }