@skewedaspect/sleekspace-ui 0.5.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/components/Card/SkCard.vue.d.ts +13 -1
  2. package/dist/components/Panel/SkPanel.vue.d.ts +15 -1
  3. package/dist/components/Panel/types.d.ts +1 -0
  4. package/dist/components/Select/SkSelect.vue.d.ts +61 -0
  5. package/dist/components/Select/SkSelectItem.vue.d.ts +134 -0
  6. package/dist/components/Select/SkSelectSeparator.vue.d.ts +2 -0
  7. package/dist/components/Select/index.d.ts +4 -0
  8. package/dist/components/Select/types.d.ts +3 -0
  9. package/dist/components/Sidebar/SkSidebar.vue.d.ts +8 -1
  10. package/dist/components/Sidebar/types.d.ts +1 -0
  11. package/dist/components/Skeleton/SkSkeleton.vue.d.ts +1 -1
  12. package/dist/index.d.ts +7 -0
  13. package/dist/sleekspace-ui.css +444 -34
  14. package/dist/sleekspace-ui.es.js +2014 -283
  15. package/dist/sleekspace-ui.umd.js +2013 -282
  16. package/package.json +1 -1
  17. package/src/components/Card/SkCard.vue +17 -1
  18. package/src/components/Panel/SkPanel.vue +29 -4
  19. package/src/components/Panel/types.ts +3 -0
  20. package/src/components/Select/SkSelect.vue +210 -0
  21. package/src/components/Select/SkSelectItem.vue +112 -0
  22. package/src/components/Select/SkSelectSeparator.vue +40 -0
  23. package/src/components/Select/index.ts +10 -0
  24. package/src/components/Select/types.ts +10 -0
  25. package/src/components/Sidebar/SkSidebar.vue +39 -2
  26. package/src/components/Sidebar/types.ts +2 -0
  27. package/src/global.d.ts +2 -0
  28. package/src/index.ts +10 -0
  29. package/src/styles/components/_card.scss +45 -9
  30. package/src/styles/components/_index.scss +1 -0
  31. package/src/styles/components/_listbox.scss +1 -0
  32. package/src/styles/components/_panel.scss +119 -13
  33. package/src/styles/components/_select.scss +439 -0
  34. package/src/styles/components/_sidebar.scss +83 -4
  35. package/web-types.json +148 -1
@@ -1,6 +1,6 @@
1
1
  import { ComponentCustomColors } from '../../types';
2
2
  import { SkCardKind } from './types';
3
- import { SkPanelSize } from '../Panel/types';
3
+ import { SkPanelCorner, SkPanelSize } from '../Panel/types';
4
4
  export interface SkCardComponentProps extends ComponentCustomColors {
5
5
  /**
6
6
  * Semantic color kind that controls the card's border color and decorative accent stripe.
@@ -56,6 +56,16 @@ export interface SkCardComponentProps extends ComponentCustomColors {
56
56
  * @default false
57
57
  */
58
58
  scrollable?: boolean;
59
+ /**
60
+ * Which corners receive the beveled cut. Passed through to the underlying SkPanel.
61
+ * @default ['bottom-right']
62
+ */
63
+ corners?: SkPanelCorner[];
64
+ /**
65
+ * Which corner displays the decorative accent stripe. Passed through to SkPanel.
66
+ * @default 'bottom-right'
67
+ */
68
+ decorationCorner?: SkPanelCorner;
59
69
  }
60
70
  declare function __VLS_template(): {
61
71
  attrs: Partial<{}>;
@@ -75,6 +85,8 @@ declare const __VLS_component: import('vue').DefineComponent<SkCardComponentProp
75
85
  title: string;
76
86
  showDecoration: boolean;
77
87
  noBorder: boolean;
88
+ corners: SkPanelCorner[];
89
+ decorationCorner: SkPanelCorner;
78
90
  noDecoration: boolean;
79
91
  headerColor: string;
80
92
  scrollable: boolean;
@@ -1,5 +1,5 @@
1
1
  import { ComponentCustomColors } from '../../types';
2
- import { SkPanelKind, SkPanelSize } from './types';
2
+ import { SkPanelCorner, SkPanelKind, SkPanelSize } from './types';
3
3
  export interface SkPanelComponentProps extends ComponentCustomColors {
4
4
  /**
5
5
  * Semantic color kind that controls the panel's border color and decorative accent stripe.
@@ -30,6 +30,18 @@ export interface SkPanelComponentProps extends ComponentCustomColors {
30
30
  * @default false
31
31
  */
32
32
  noBorder?: boolean;
33
+ /**
34
+ * Which corners receive the beveled cut. Any combination of the four corners can be
35
+ * specified. Pass an empty array for no cut corners.
36
+ * @default ['bottom-right']
37
+ */
38
+ corners?: SkPanelCorner[];
39
+ /**
40
+ * Which corner displays the decorative accent stripe. Must be one of the active
41
+ * `corners` for the decoration to be visible.
42
+ * @default 'bottom-right'
43
+ */
44
+ decorationCorner?: SkPanelCorner;
33
45
  }
34
46
  declare function __VLS_template(): {
35
47
  attrs: Partial<{}>;
@@ -45,6 +57,8 @@ declare const __VLS_component: import('vue').DefineComponent<SkPanelComponentPro
45
57
  size: SkPanelSize;
46
58
  showDecoration: boolean;
47
59
  noBorder: boolean;
60
+ corners: SkPanelCorner[];
61
+ decorationCorner: SkPanelCorner;
48
62
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
49
63
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
50
64
  export default _default;
@@ -1,3 +1,4 @@
1
1
  import { ComponentKind } from '../../types';
2
2
  export type SkPanelKind = ComponentKind;
3
3
  export type SkPanelSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
4
+ export type SkPanelCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
@@ -0,0 +1,61 @@
1
+ import { ComponentCustomColors } from '../../types';
2
+ import { SkSelectKind, SkSelectSize } from './types';
3
+ export interface SkSelectComponentProps extends ComponentCustomColors {
4
+ /**
5
+ * Semantic color kind that controls the trigger border, focus ring, and selected
6
+ * item highlight appearance. When used inside SkField, inherits the field's
7
+ * kind if not explicitly set.
8
+ * @default 'neutral' (or inherited from parent SkField)
9
+ */
10
+ kind?: SkSelectKind;
11
+ /**
12
+ * Size of the trigger and dropdown content. Controls the trigger height,
13
+ * text size, and option item dimensions. Available sizes: 'sm' (small),
14
+ * 'md' (medium), 'lg' (large).
15
+ * @default 'md'
16
+ */
17
+ size?: SkSelectSize;
18
+ /**
19
+ * Placeholder text displayed in the trigger when no option is selected.
20
+ * Use to guide users on what type of selection to make.
21
+ * @default 'Select...'
22
+ */
23
+ placeholder?: string;
24
+ /**
25
+ * When true, the select is disabled and cannot be interacted with. The trigger
26
+ * is non-clickable and the dropdown cannot be opened. The component appears
27
+ * with reduced opacity and the cursor changes to not-allowed.
28
+ * @default false
29
+ */
30
+ disabled?: boolean;
31
+ }
32
+ type __VLS_Props = SkSelectComponentProps;
33
+ type __VLS_PublicProps = {
34
+ modelValue?: string;
35
+ } & __VLS_Props;
36
+ declare function __VLS_template(): {
37
+ attrs: Partial<{}>;
38
+ slots: {
39
+ default?(_: {}): any;
40
+ };
41
+ refs: {};
42
+ rootEl: HTMLDivElement;
43
+ };
44
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
45
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
46
+ "update:modelValue": (value: string) => any;
47
+ }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
48
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
49
+ }>, {
50
+ kind: SkSelectKind;
51
+ disabled: boolean;
52
+ size: SkSelectSize;
53
+ placeholder: string;
54
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
55
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
56
+ export default _default;
57
+ type __VLS_WithTemplateSlots<T, S> = T & {
58
+ new (): {
59
+ $slots: S;
60
+ };
61
+ };
@@ -0,0 +1,134 @@
1
+ export interface SkSelectItemComponentProps {
2
+ /**
3
+ * The value this option represents. When selected, the parent SkSelect's v-model
4
+ * will be set to this value. Must be a string and unique within the select.
5
+ */
6
+ value: string;
7
+ /**
8
+ * When true, this option is disabled and cannot be selected. The item appears
9
+ * with reduced opacity and is skipped during keyboard navigation.
10
+ * @default false
11
+ */
12
+ disabled?: boolean;
13
+ }
14
+ declare function __VLS_template(): {
15
+ attrs: Partial<{}>;
16
+ slots: {
17
+ default?(_: {}): any;
18
+ };
19
+ refs: {
20
+ textEl: ({
21
+ $: import('vue').ComponentInternalInstance;
22
+ $data: {};
23
+ $props: {
24
+ readonly asChild?: boolean | undefined;
25
+ readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
26
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
27
+ $attrs: {
28
+ [x: string]: unknown;
29
+ };
30
+ $refs: {
31
+ [x: string]: unknown;
32
+ };
33
+ $slots: Readonly<{
34
+ [name: string]: import('vue').Slot<any> | undefined;
35
+ }>;
36
+ $root: import('vue').ComponentPublicInstance | null;
37
+ $parent: import('vue').ComponentPublicInstance | null;
38
+ $host: Element | null;
39
+ $emit: (event: string, ...args: any[]) => void;
40
+ $el: any;
41
+ $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
42
+ as: import('reka-ui').AsTag | import('vue').Component;
43
+ }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
44
+ beforeCreate?: (() => void) | (() => void)[];
45
+ created?: (() => void) | (() => void)[];
46
+ beforeMount?: (() => void) | (() => void)[];
47
+ mounted?: (() => void) | (() => void)[];
48
+ beforeUpdate?: (() => void) | (() => void)[];
49
+ updated?: (() => void) | (() => void)[];
50
+ activated?: (() => void) | (() => void)[];
51
+ deactivated?: (() => void) | (() => void)[];
52
+ beforeDestroy?: (() => void) | (() => void)[];
53
+ beforeUnmount?: (() => void) | (() => void)[];
54
+ destroyed?: (() => void) | (() => void)[];
55
+ unmounted?: (() => void) | (() => void)[];
56
+ renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
57
+ renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
58
+ errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
59
+ };
60
+ $forceUpdate: () => void;
61
+ $nextTick: typeof import('vue').nextTick;
62
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
63
+ } & Readonly<{
64
+ as: import('reka-ui').AsTag | import('vue').Component;
65
+ }> & Omit<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, "as"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
66
+ $slots: {
67
+ default?: (props: {}) => any;
68
+ };
69
+ }) | null;
70
+ };
71
+ rootEl: any;
72
+ };
73
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
74
+ declare const __VLS_component: import('vue').DefineComponent<SkSelectItemComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSelectItemComponentProps> & Readonly<{}>, {
75
+ disabled: boolean;
76
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
77
+ textEl: ({
78
+ $: import('vue').ComponentInternalInstance;
79
+ $data: {};
80
+ $props: {
81
+ readonly asChild?: boolean | undefined;
82
+ readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
83
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
84
+ $attrs: {
85
+ [x: string]: unknown;
86
+ };
87
+ $refs: {
88
+ [x: string]: unknown;
89
+ };
90
+ $slots: Readonly<{
91
+ [name: string]: import('vue').Slot<any> | undefined;
92
+ }>;
93
+ $root: import('vue').ComponentPublicInstance | null;
94
+ $parent: import('vue').ComponentPublicInstance | null;
95
+ $host: Element | null;
96
+ $emit: (event: string, ...args: any[]) => void;
97
+ $el: any;
98
+ $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
99
+ as: import('reka-ui').AsTag | import('vue').Component;
100
+ }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
101
+ beforeCreate?: (() => void) | (() => void)[];
102
+ created?: (() => void) | (() => void)[];
103
+ beforeMount?: (() => void) | (() => void)[];
104
+ mounted?: (() => void) | (() => void)[];
105
+ beforeUpdate?: (() => void) | (() => void)[];
106
+ updated?: (() => void) | (() => void)[];
107
+ activated?: (() => void) | (() => void)[];
108
+ deactivated?: (() => void) | (() => void)[];
109
+ beforeDestroy?: (() => void) | (() => void)[];
110
+ beforeUnmount?: (() => void) | (() => void)[];
111
+ destroyed?: (() => void) | (() => void)[];
112
+ unmounted?: (() => void) | (() => void)[];
113
+ renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
114
+ renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
115
+ errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
116
+ };
117
+ $forceUpdate: () => void;
118
+ $nextTick: typeof import('vue').nextTick;
119
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
120
+ } & Readonly<{
121
+ as: import('reka-ui').AsTag | import('vue').Component;
122
+ }> & Omit<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, "as"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
123
+ $slots: {
124
+ default?: (props: {}) => any;
125
+ };
126
+ }) | null;
127
+ }, any>;
128
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
129
+ export default _default;
130
+ type __VLS_WithTemplateSlots<T, S> = T & {
131
+ new (): {
132
+ $slots: S;
133
+ };
134
+ };
@@ -0,0 +1,2 @@
1
+ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
2
+ export default _default;
@@ -0,0 +1,4 @@
1
+ export { default as SkSelect } from './SkSelect.vue';
2
+ export { default as SkSelectItem } from './SkSelectItem.vue';
3
+ export { default as SkSelectSeparator } from './SkSelectSeparator.vue';
4
+ export type { SkSelectKind, SkSelectSize } from './types';
@@ -0,0 +1,3 @@
1
+ import { ComponentKind, ComponentSize } from '../../types';
2
+ export type SkSelectKind = ComponentKind;
3
+ export type SkSelectSize = ComponentSize;
@@ -1,4 +1,4 @@
1
- import { SkSidebarKind } from './types';
1
+ import { SkSidebarKind, SkSidebarSide } from './types';
2
2
  import { ComponentCustomColors } from '../../types';
3
3
  export interface SkSidebarComponentProps extends ComponentCustomColors {
4
4
  /**
@@ -15,6 +15,12 @@ export interface SkSidebarComponentProps extends ComponentCustomColors {
15
15
  * @default '180px'
16
16
  */
17
17
  width?: string;
18
+ /**
19
+ * Which side of the layout the sidebar is placed on. Controls the direction of the
20
+ * panel bevel and the sidebar-item clip-path cuts so they mirror appropriately.
21
+ * @default 'left'
22
+ */
23
+ side?: SkSidebarSide;
18
24
  }
19
25
  declare function __VLS_template(): {
20
26
  attrs: Partial<{}>;
@@ -27,6 +33,7 @@ declare function __VLS_template(): {
27
33
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
28
34
  declare const __VLS_component: import('vue').DefineComponent<SkSidebarComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSidebarComponentProps> & Readonly<{}>, {
29
35
  kind: SkSidebarKind;
36
+ side: SkSidebarSide;
30
37
  width: string;
31
38
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
32
39
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
@@ -1,2 +1,3 @@
1
1
  import { ComponentKind } from '../../types';
2
2
  export type SkSidebarKind = ComponentKind;
3
+ export type SkSidebarSide = 'left' | 'right';
@@ -47,9 +47,9 @@ export interface SkSkeletonComponentProps {
47
47
  declare const _default: import('vue').DefineComponent<SkSkeletonComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSkeletonComponentProps> & Readonly<{}>, {
48
48
  bevel: string;
49
49
  variant: SkSkeletonVariant;
50
+ corners: SkSkeletonCorner[];
50
51
  width: string;
51
52
  height: string;
52
53
  animation: SkSkeletonAnimation;
53
- corners: SkSkeletonCorner[];
54
54
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
55
55
  export default _default;
package/dist/index.d.ts CHANGED
@@ -33,6 +33,9 @@ import { default as SkPopover, SkPopoverComponentProps } from './components/Popo
33
33
  import { default as SkProgress, SkProgressComponentProps } from './components/Progress/SkProgress.vue';
34
34
  import { default as SkRadio, SkRadioComponentProps } from './components/Radio/SkRadio.vue';
35
35
  import { default as SkRadioGroup, SkRadioGroupComponentProps } from './components/Radio/SkRadioGroup.vue';
36
+ import { default as SkSelect, SkSelectComponentProps } from './components/Select/SkSelect.vue';
37
+ import { default as SkSelectItem, SkSelectItemComponentProps } from './components/Select/SkSelectItem.vue';
38
+ import { default as SkSelectSeparator } from './components/Select/SkSelectSeparator.vue';
36
39
  import { default as SkSidebar, SkSidebarComponentProps } from './components/Sidebar/SkSidebar.vue';
37
40
  import { default as SkSidebarItem, SkSidebarItemComponentProps } from './components/Sidebar/SkSidebarItem.vue';
38
41
  import { default as SkSidebarSection, SkSidebarSectionComponentProps } from './components/Sidebar/SkSidebarSection.vue';
@@ -77,6 +80,7 @@ export * from './components/Panel/types';
77
80
  export * from './components/Popover/types';
78
81
  export * from './components/Progress/types';
79
82
  export * from './components/Radio/types';
83
+ export * from './components/Select/types';
80
84
  export * from './components/Sidebar/types';
81
85
  export * from './components/Skeleton/types';
82
86
  export * from './components/Slider/types';
@@ -125,6 +129,9 @@ export { SkPopover, type SkPopoverComponentProps };
125
129
  export { SkProgress, type SkProgressComponentProps };
126
130
  export { SkRadio, type SkRadioComponentProps };
127
131
  export { SkRadioGroup, type SkRadioGroupComponentProps };
132
+ export { SkSelect, type SkSelectComponentProps };
133
+ export { SkSelectItem, type SkSelectItemComponentProps };
134
+ export { SkSelectSeparator };
128
135
  export { SkSidebar, type SkSidebarComponentProps };
129
136
  export { SkSidebarItem, type SkSidebarItemComponentProps };
130
137
  export { SkSidebarSection, type SkSidebarSectionComponentProps };