@histoire/controls 0.10.2 → 0.10.5

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 (5) hide show
  1. package/dist/components/design-tokens/HstColorShades.vue.d.ts +2 -2
  2. package/dist/index.d.ts +4 -4
  3. package/dist/index.es.js +9 -1
  4. package/package.json +2 -2
  5. package/src/components/design-tokens/HstColorShades.vue +11 -2
package/dist/components/design-tokens/HstColorShades.vue.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
2
- shades: Record<string, string>;
2
+ shades: Record<string, any>;
3
3
  getName?: (key: string, color: string) => string;
4
4
  search?: string;
5
5
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
6
- shades: Record<string, string>;
6
+ shades: Record<string, any>;
7
7
  getName?: (key: string, color: string) => string;
8
8
  search?: string;
9
9
  }>>>, {}>;
package/dist/index.d.ts CHANGED
@@ -150,7 +150,7 @@ export declare const HstSelect: import("@histoire/vendors/vue").DefineComponent<
150
150
  }, {}>;
151
151
  export declare const HstColorShades: import("@histoire/vendors/vue").DefineComponent<{
152
152
  shades: {
153
- type: import("@histoire/vendors/vue").PropType<Record<string, string>>;
153
+ type: import("@histoire/vendors/vue").PropType<Record<string, any>>;
154
154
  required: true;
155
155
  };
156
156
  getName: {
@@ -161,7 +161,7 @@ export declare const HstColorShades: import("@histoire/vendors/vue").DefineCompo
161
161
  };
162
162
  }, {}, unknown, {}, {}, import("@histoire/vendors/vue").ComponentOptionsMixin, import("@histoire/vendors/vue").ComponentOptionsMixin, Record<string, any>, string, import("@histoire/vendors/vue").VNodeProps & import("@histoire/vendors/vue").AllowedComponentProps & import("@histoire/vendors/vue").ComponentCustomProps, Readonly<import("@histoire/vendors/vue").ExtractPropTypes<{
163
163
  shades: {
164
- type: import("@histoire/vendors/vue").PropType<Record<string, string>>;
164
+ type: import("@histoire/vendors/vue").PropType<Record<string, any>>;
165
165
  required: true;
166
166
  };
167
167
  getName: {
@@ -415,7 +415,7 @@ export declare const components: {
415
415
  }, {}>;
416
416
  HstColorShades: import("@histoire/vendors/vue").DefineComponent<{
417
417
  shades: {
418
- type: import("@histoire/vendors/vue").PropType<Record<string, string>>;
418
+ type: import("@histoire/vendors/vue").PropType<Record<string, any>>;
419
419
  required: true;
420
420
  };
421
421
  getName: {
@@ -426,7 +426,7 @@ export declare const components: {
426
426
  };
427
427
  }, {}, unknown, {}, {}, import("@histoire/vendors/vue").ComponentOptionsMixin, import("@histoire/vendors/vue").ComponentOptionsMixin, Record<string, any>, string, import("@histoire/vendors/vue").VNodeProps & import("@histoire/vendors/vue").AllowedComponentProps & import("@histoire/vendors/vue").ComponentCustomProps, Readonly<import("@histoire/vendors/vue").ExtractPropTypes<{
428
428
  shades: {
429
- type: import("@histoire/vendors/vue").PropType<Record<string, string>>;
429
+ type: import("@histoire/vendors/vue").PropType<Record<string, any>>;
430
430
  required: true;
431
431
  };
432
432
  getName: {
package/dist/index.es.js CHANGED
@@ -524,10 +524,18 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
524
524
  },
525
525
  setup(__props) {
526
526
  const props = __props;
527
+ const flattenShades = (shades, path = "") => {
528
+ return Object.entries(shades).reduce((acc, [key, color]) => {
529
+ const nextPath = path ? key === "DEFAULT" ? path : `${path}-${key}` : key;
530
+ const obj = typeof color === "object" ? flattenShades(color, nextPath) : { [nextPath]: color };
531
+ return { ...acc, ...obj };
532
+ }, {});
533
+ };
527
534
  const shadesWithName = computed(() => {
528
535
  const shades = props.shades;
529
536
  const getName = props.getName;
530
- return Object.entries(shades).map(([key, color]) => {
537
+ const flatShades = flattenShades(shades);
538
+ return Object.entries(flatShades).map(([key, color]) => {
531
539
  const name = getName ? getName(key, color) : key;
532
540
  return {
533
541
  key,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@histoire/controls",
3
- "version": "0.10.2",
3
+ "version": "0.10.5",
4
4
  "description": "Prebuilt controls components",
5
5
  "license": "MIT",
6
6
  "author": {
@@ -31,7 +31,7 @@
31
31
  "*.vue"
32
32
  ],
33
33
  "dependencies": {
34
- "@histoire/vendors": "^0.10.2"
34
+ "@histoire/vendors": "^0.10.5"
35
35
  },
36
36
  "devDependencies": {
37
37
  "@peeky/test": "^0.13.5",
package/src/components/design-tokens/HstColorShades.vue CHANGED
@@ -10,15 +10,24 @@ import { VTooltip as vTooltip } from 'floating-vue'
10
10
  import HstCopyIcon from '../HstCopyIcon.vue'
11
11
 
12
12
  const props = defineProps<{
13
- shades: Record<string, string>
13
+ shades: Record<string, any>
14
14
  getName?: (key: string, color: string) => string
15
15
  search?: string
16
16
  }>()
17
17
 
18
+ const flattenShades = (shades: Record<string, any>, path = ''): Record<string, string> => {
19
+ return Object.entries(shades).reduce((acc, [key, color]) => {
20
+ const nextPath = path ? key === 'DEFAULT' ? path : `${path}-${key}` : key
21
+ const obj = typeof color === 'object' ? flattenShades(color, nextPath) : { [nextPath]: color }
22
+ return { ...acc, ...obj }
23
+ }, {})
24
+ }
25
+
18
26
  const shadesWithName = computed(() => {
19
27
  const shades = props.shades
20
28
  const getName = props.getName
21
- return Object.entries(shades).map(([key, color]) => {
29
+ const flatShades = flattenShades(shades)
30
+ return Object.entries(flatShades).map(([key, color]) => {
22
31
  const name = getName ? getName(key, color) : key
23
32
  return {
24
33
  key,