@hyvor/design 0.0.30 → 0.0.32

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 (8) hide show
  1. package/dist/components/ColorPicker/ColorPicker.svelte +42 -0
  2. package/dist/components/ColorPicker/ColorPicker.svelte.d.ts +20 -0
  3. package/dist/components/Modal/Modal.svelte +9 -3
  4. package/dist/components/Modal/Modal.svelte.d.ts +1 -0
  5. package/dist/components/SplitControl/SplitControl.svelte +1 -0
  6. package/dist/components/index.d.ts +1 -0
  7. package/dist/components/index.js +1 -0
  8. package/package.json +6 -6
package/dist/components/ColorPicker/ColorPicker.svelte ADDED
@@ -0,0 +1,42 @@
1
+ <script>export let color = "#000000";
2
+ export let size = 30;
3
+ let inputEl;
4
+ function handleClick() {
5
+ inputEl.click();
6
+ }
7
+ </script>
8
+
9
+ <span>
10
+ <button
11
+ style:width="{size}px"
12
+ style:height="{size}px"
13
+ style:background-color={color}
14
+ on:click={handleClick}
15
+ ></button>
16
+
17
+ <input
18
+ type="color"
19
+ bind:value={color}
20
+ bind:this={inputEl}
21
+
22
+ on:change
23
+ on:input
24
+ />
25
+ </span>
26
+
27
+ <style>
28
+ span {
29
+ position: relative;
30
+ }
31
+ button {
32
+ border-radius: 50%;
33
+ }
34
+ input {
35
+ position: absolute;
36
+ left: 100%;
37
+ bottom: 50%;
38
+ transform: translate(0, 50%);
39
+ width: 0;
40
+ opacity: 0;
41
+ }
42
+ </style>
package/dist/components/ColorPicker/ColorPicker.svelte.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import { SvelteComponent } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ color?: string | undefined;
5
+ size?: number | undefined;
6
+ };
7
+ events: {
8
+ change: Event;
9
+ input: Event;
10
+ } & {
11
+ [evt: string]: CustomEvent<any>;
12
+ };
13
+ slots: {};
14
+ };
15
+ export type ColorPickerProps = typeof __propDef.props;
16
+ export type ColorPickerEvents = typeof __propDef.events;
17
+ export type ColorPickerSlots = typeof __propDef.slots;
18
+ export default class ColorPicker extends SvelteComponent<ColorPickerProps, ColorPickerEvents, ColorPickerSlots> {
19
+ }
20
+ export {};
package/dist/components/Modal/Modal.svelte CHANGED
@@ -31,7 +31,11 @@ export let closeOnEscape = true;
31
31
  <div class="header">
32
32
 
33
33
  <div class="title">
34
- {title}
34
+ {#if $$slots.title}
35
+ <slot name="title" />
36
+ {:else}
37
+ <span>{title}</span>
38
+ {/if}
35
39
  </div>
36
40
 
37
41
  <div class="close-wrap">
@@ -94,8 +98,6 @@ export let closeOnEscape = true;
94
98
  .header {
95
99
  padding: 20px 25px;
96
100
  border-bottom: 1px solid var(--box-border);
97
- font-size: 1.2em;
98
- font-weight: 600;
99
101
  display: flex;
100
102
  align-items: center;
101
103
  }
@@ -103,6 +105,10 @@ export let closeOnEscape = true;
103
105
  .title {
104
106
  flex: 1;
105
107
  }
108
+ .title span {
109
+ font-size: 1.2em;
110
+ font-weight: 600;
111
+ }
106
112
 
107
113
  .content {
108
114
  padding: 20px 25px;
package/dist/components/Modal/Modal.svelte.d.ts CHANGED
@@ -11,6 +11,7 @@ declare const __propDef: {
11
11
  [evt: string]: CustomEvent<any>;
12
12
  };
13
13
  slots: {
14
+ title: {};
14
15
  default: {};
15
16
  footer: {};
16
17
  };
package/dist/components/SplitControl/SplitControl.svelte CHANGED
@@ -57,6 +57,7 @@ export let caption = "";
57
57
  padding-top: 0;
58
58
  padding-left: 15px;
59
59
  border-left: 2px solid var(--accent-light);
60
+ margin-bottom: 15px;
60
61
  }
61
62
 
62
63
  .left {
package/dist/components/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export { default as ButtonGroup } from './Button/ButtonGroup.svelte';
10
10
  export { default as Callout } from './Callout/Callout.svelte';
11
11
  export { default as Checkbox } from './Checkbox/Checkbox.svelte';
12
12
  export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
13
+ export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
13
14
  export { default as DarkToggle } from './Dark/DarkToggle.svelte';
14
15
  export { default as Dropdown } from './Dropdown/Dropdown.svelte';
15
16
  export { default as Divider } from './Divider/Divider.svelte';
package/dist/components/index.js CHANGED
@@ -10,6 +10,7 @@ export { default as ButtonGroup } from './Button/ButtonGroup.svelte';
10
10
  export { default as Callout } from './Callout/Callout.svelte';
11
11
  export { default as Checkbox } from './Checkbox/Checkbox.svelte';
12
12
  export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
13
+ export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
13
14
  export { default as DarkToggle } from './Dark/DarkToggle.svelte';
14
15
  export { default as Dropdown } from './Dropdown/Dropdown.svelte';
15
16
  export { default as Divider } from './Divider/Divider.svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyvor/design",
3
- "version": "0.0.30",
3
+ "version": "0.0.32",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "scripts": {
@@ -28,9 +28,9 @@
28
28
  "!dist/**/*.spec.*"
29
29
  ],
30
30
  "peerDependencies": {
31
- "svelte": "^4.0.0",
32
31
  "@sveltejs/kit": "^2.0.0",
33
- "sass": "^1.68.0"
32
+ "sass": "^1.68.0",
33
+ "svelte": "^4.0.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@sveltejs/adapter-static": "^3.0.0",
@@ -45,11 +45,11 @@
45
45
  },
46
46
  "dependencies": {
47
47
  "@fontsource/readex-pro": "^5.0.8",
48
- "highlight.js": "^11.9.0",
49
- "@hyvor/icons": "^0.0.3"
48
+ "@hyvor/icons": "^0.0.3",
49
+ "highlight.js": "^11.9.0"
50
50
  },
51
51
  "type": "module",
52
52
  "publishConfig": {
53
53
  "access": "public"
54
54
  }
55
- }
55
+ }