@histoire/controls 0.17.17 → 1.0.0-alpha.1

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 (96) hide show
  1. package/.histoire/dist/__sandbox.html +16 -0
  2. package/.histoire/dist/assets/BaseEmpty.d30f3079.js +11 -0
  3. package/.histoire/dist/assets/HomeView.8e044be6.js +24 -0
  4. package/.histoire/dist/assets/HstCheckbox.story.3d04d85b.js +144 -0
  5. package/.histoire/dist/assets/HstColorShades.story.68cf74d1.js +532 -0
  6. package/.histoire/dist/assets/HstCopyIcon.e40e725e.js +51 -0
  7. package/.histoire/dist/assets/HstNumber.story.1e1964ff.js +160 -0
  8. package/.histoire/dist/assets/HstSelect.story.04860383.js +277 -0
  9. package/.histoire/dist/assets/HstText.story.c915d831.js +137 -0
  10. package/.histoire/dist/assets/HstTextarea.story.802b9c26.js +105 -0
  11. package/.histoire/dist/assets/HstTokenGrid.story.025819d6.js +148 -0
  12. package/.histoire/dist/assets/HstTokenList.story.d3aa6575.js +176 -0
  13. package/.histoire/dist/assets/HstWrapper.246b6982.js +56 -0
  14. package/.histoire/dist/assets/SearchPane.daa2675c.js +426 -0
  15. package/.histoire/dist/assets/StoryView.2f64dad1.js +2260 -0
  16. package/.histoire/dist/assets/bundle-main.784e5bf7.js +1156 -0
  17. package/.histoire/dist/assets/bundle-sandbox.5e153933.js +84 -0
  18. package/.histoire/dist/assets/const.268165fd.js +658 -0
  19. package/.histoire/dist/assets/global-components.6736b2a9.js +5722 -0
  20. package/.histoire/dist/assets/search-docs-data.b9a75539.js +6 -0
  21. package/.histoire/dist/assets/style.04507241.css +2504 -0
  22. package/.histoire/dist/assets/vendor.2833ae3d.js +28970 -0
  23. package/.histoire/dist/index.html +16 -0
  24. package/dist/components/HstCopyIcon.vue.d.ts +3 -12
  25. package/dist/components/HstWrapper.vue.d.ts +4 -27
  26. package/dist/components/button/HstButton.story.vue.d.ts +1 -1
  27. package/dist/components/button/HstButton.vue.d.ts +5 -145
  28. package/dist/components/button/HstButtonGroup.story.vue.d.ts +1 -1
  29. package/dist/components/button/HstButtonGroup.vue.d.ts +6 -15
  30. package/dist/components/checkbox/HstCheckbox.story.vue.d.ts +1 -1
  31. package/dist/components/checkbox/HstCheckbox.vue.d.ts +5 -14
  32. package/dist/components/checkbox/HstCheckboxList.story.vue.d.ts +1 -1
  33. package/dist/components/checkbox/HstCheckboxList.vue.d.ts +6 -15
  34. package/dist/components/checkbox/HstSimpleCheckbox.story.vue.d.ts +1 -1
  35. package/dist/components/checkbox/HstSimpleCheckbox.vue.d.ts +5 -14
  36. package/dist/components/colorselect/HstColorSelect.story.vue.d.ts +1 -1
  37. package/dist/components/colorselect/HstColorSelect.vue.d.ts +5 -14
  38. package/dist/components/design-tokens/HstColorShades.story.vue.d.ts +1 -1
  39. package/dist/components/design-tokens/HstColorShades.vue.d.ts +3 -12
  40. package/dist/components/design-tokens/HstTokenGrid.story.vue.d.ts +1 -1
  41. package/dist/components/design-tokens/HstTokenGrid.vue.d.ts +4 -27
  42. package/dist/components/design-tokens/HstTokenList.story.vue.d.ts +1 -1
  43. package/dist/components/design-tokens/HstTokenList.vue.d.ts +3 -12
  44. package/dist/components/json/HstJson.story.vue.d.ts +1 -1
  45. package/dist/components/json/HstJson.vue.d.ts +5 -14
  46. package/dist/components/number/HstNumber.story.vue.d.ts +1 -1
  47. package/dist/components/number/HstNumber.vue.d.ts +5 -14
  48. package/dist/components/radio/HstRadio.story.vue.d.ts +1 -1
  49. package/dist/components/radio/HstRadio.vue.d.ts +6 -15
  50. package/dist/components/select/CustomSelect.vue.d.ts +6 -15
  51. package/dist/components/select/HstSelect.story.vue.d.ts +1 -1
  52. package/dist/components/select/HstSelect.vue.d.ts +6 -15
  53. package/dist/components/slider/HstSlider.story.vue.d.ts +1 -1
  54. package/dist/components/slider/HstSlider.vue.d.ts +5 -14
  55. package/dist/components/text/HstText.story.vue.d.ts +1 -1
  56. package/dist/components/text/HstText.vue.d.ts +5 -14
  57. package/dist/components/textarea/HstTextarea.story.vue.d.ts +1 -1
  58. package/dist/components/textarea/HstTextarea.vue.d.ts +5 -14
  59. package/dist/index.d.ts +732 -2488
  60. package/dist/index.es.css +1 -0
  61. package/dist/index.es.js +5279 -4823
  62. package/dist/style-standalone.css +74 -66
  63. package/dist/utils.d.ts +1 -1
  64. package/package.json +25 -25
  65. package/src/components/HstCopyIcon.vue +1 -1
  66. package/src/components/HstWrapper.vue +1 -1
  67. package/src/components/button/HstButtonGroup.vue +1 -1
  68. package/src/components/checkbox/HstCheckboxList.vue +1 -1
  69. package/src/components/design-tokens/HstColorShades.vue +2 -2
  70. package/src/components/design-tokens/HstTokenGrid.vue +1 -1
  71. package/src/components/json/HstJson.vue +12 -12
  72. package/src/components/radio/HstRadio.vue +1 -1
  73. package/src/components/select/CustomSelect.vue +3 -3
  74. package/src/components/select/HstSelect.vue +1 -1
  75. package/src/components/slider/HstSlider.vue +1 -1
  76. package/src/index.ts +8 -8
  77. package/tsconfig.json +1 -0
  78. package/vite.config.ts +1 -1
  79. package/dist/style.css +0 -1
  80. package/histoire-dist/__sandbox.html +0 -15
  81. package/histoire-dist/assets/BaseEmpty.a84c14c8.js +0 -1
  82. package/histoire-dist/assets/HomeView.f524bd4b.js +0 -1
  83. package/histoire-dist/assets/HstCheckbox.story.9f622545.js +0 -1
  84. package/histoire-dist/assets/HstInput.story.945401ce.js +0 -1
  85. package/histoire-dist/assets/SearchModal.76c035f2.js +0 -1
  86. package/histoire-dist/assets/StoryView.e4c41518.js +0 -15
  87. package/histoire-dist/assets/global-components.84d0ab22.js +0 -1
  88. package/histoire-dist/assets/histoire-text-dark.a529813a.svg +0 -89
  89. package/histoire-dist/assets/histoire-text.1d4474b5.svg +0 -89
  90. package/histoire-dist/assets/index.58f51dd0.js +0 -1
  91. package/histoire-dist/assets/preview-settings.a634d101.js +0 -1
  92. package/histoire-dist/assets/sandbox.2c60450a.js +0 -1
  93. package/histoire-dist/assets/style.7657d2ac.css +0 -1
  94. package/histoire-dist/assets/vendor.70a554f6.js +0 -9
  95. package/histoire-dist/index.html +0 -15
  96. /package/{histoire-dist/assets/histoire.8af7bd1f.svg → .histoire/dist/histoire.svg} +0 -0
@@ -0,0 +1,160 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ import { ax as _export_sfc, d as defineComponent, c as computed, r as ref, o as onUnmounted, a as openBlock, j as createBlock, k as withCtx, f as renderSlot, M as withDirectives, Z as vModelText, i as unref, e as createBaseVNode, x as mergeProps, P as isRef, n as normalizeClass, h as normalizeStyle, q as resolveComponent, l as createVNode } from "./vendor.2833ae3d.js";
21
+ import { H as HstWrapper } from "./HstWrapper.246b6982.js";
22
+ const __default__ = {
23
+ name: "HstNumber",
24
+ inheritAttrs: false
25
+ };
26
+ const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
27
+ props: {
28
+ title: { type: String, required: false },
29
+ modelValue: { type: Number, required: true }
30
+ },
31
+ emits: {
32
+ "update:modelValue": (newValue) => true
33
+ },
34
+ setup(__props, { emit }) {
35
+ const props = __props;
36
+ const numberModel = computed({
37
+ get: () => props.modelValue,
38
+ set: (value) => {
39
+ emit("update:modelValue", value);
40
+ }
41
+ });
42
+ const input = ref();
43
+ function focusAndSelect() {
44
+ input.value.focus();
45
+ input.value.select();
46
+ }
47
+ const isDragging = ref(false);
48
+ let startX;
49
+ let startValue;
50
+ function onMouseDown(event) {
51
+ isDragging.value = true;
52
+ startX = event.clientX;
53
+ startValue = numberModel.value;
54
+ window.addEventListener("mousemove", onMouseMove);
55
+ window.addEventListener("mouseup", stopDragging);
56
+ }
57
+ function onMouseMove(event) {
58
+ let step = parseFloat(input.value.step);
59
+ if (isNaN(step)) {
60
+ step = 1;
61
+ }
62
+ numberModel.value = startValue + Math.round((event.clientX - startX) / 10 / step) * step;
63
+ }
64
+ function stopDragging() {
65
+ isDragging.value = false;
66
+ window.removeEventListener("mousemove", onMouseMove);
67
+ window.removeEventListener("mouseup", stopDragging);
68
+ }
69
+ onUnmounted(() => {
70
+ stopDragging();
71
+ });
72
+ return (_ctx, _cache) => {
73
+ return openBlock(), createBlock(HstWrapper, {
74
+ class: normalizeClass(["htw-cursor-ew-resize htw-items-center", [
75
+ _ctx.$attrs.class,
76
+ { "htw-select-none": isDragging.value }
77
+ ]]),
78
+ title: __props.title,
79
+ style: normalizeStyle(_ctx.$attrs.style),
80
+ onClick: focusAndSelect,
81
+ onMousedown: onMouseDown
82
+ }, {
83
+ actions: withCtx(() => [
84
+ renderSlot(_ctx.$slots, "actions")
85
+ ]),
86
+ default: withCtx(() => [
87
+ withDirectives(createBaseVNode("input", mergeProps({
88
+ ref_key: "input",
89
+ ref: input
90
+ }, __spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
91
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(numberModel) ? numberModel.value = $event : null),
92
+ type: "number",
93
+ class: [{
94
+ "htw-select-none": isDragging.value
95
+ }, "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize"]
96
+ }), null, 16), [
97
+ [
98
+ vModelText,
99
+ unref(numberModel),
100
+ void 0,
101
+ { number: true }
102
+ ]
103
+ ])
104
+ ]),
105
+ _: 3
106
+ }, 8, ["title", "class", "style"]);
107
+ };
108
+ }
109
+ }));
110
+ _sfc_main$1.__file = "src/components/number/HstNumber.vue";
111
+ var HstNumber = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/number/HstNumber.vue"]]);
112
+ const _sfc_main = /* @__PURE__ */ defineComponent({
113
+ name: "HstNumber.story",
114
+ setup(__props) {
115
+ function initState() {
116
+ return {
117
+ count: 20,
118
+ step: 1
119
+ };
120
+ }
121
+ return (_ctx, _cache) => {
122
+ const _component_Variant = resolveComponent("Variant");
123
+ const _component_Story = resolveComponent("Story");
124
+ return openBlock(), createBlock(_component_Story, { title: "HstNumber" }, {
125
+ default: withCtx(() => [
126
+ createVNode(_component_Variant, {
127
+ title: "default",
128
+ "init-state": initState
129
+ }, {
130
+ default: withCtx(({ state }) => [
131
+ createVNode(HstNumber, {
132
+ modelValue: state.count,
133
+ "onUpdate:modelValue": ($event) => state.count = $event,
134
+ step: state.step,
135
+ title: "Count"
136
+ }, null, 8, ["modelValue", "onUpdate:modelValue", "step"])
137
+ ]),
138
+ controls: withCtx(({ state }) => [
139
+ createVNode(HstNumber, {
140
+ modelValue: state.count,
141
+ "onUpdate:modelValue": ($event) => state.count = $event,
142
+ title: "Count"
143
+ }, null, 8, ["modelValue", "onUpdate:modelValue"]),
144
+ createVNode(HstNumber, {
145
+ modelValue: state.step,
146
+ "onUpdate:modelValue": ($event) => state.step = $event,
147
+ title: "Step"
148
+ }, null, 8, ["modelValue", "onUpdate:modelValue"])
149
+ ]),
150
+ _: 1
151
+ })
152
+ ]),
153
+ _: 1
154
+ });
155
+ };
156
+ }
157
+ });
158
+ _sfc_main.__file = "src/components/number/HstNumber.story.vue";
159
+ var HstNumber_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/number/HstNumber.story.vue"]]);
160
+ export { HstNumber_story as default };
@@ -0,0 +1,277 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ import { d as defineComponent, c as computed, a as openBlock, j as createBlock, k as withCtx, e as createBaseVNode, b as createElementBlock, J as renderList, i as unref, F as Fragment, f as renderSlot, l as createVNode, I as Icon, as as Dropdown, ax as _export_sfc, x as mergeProps, t as toDisplayString, R as createTextVNode, r as ref, n as normalizeClass, h as normalizeStyle, q as resolveComponent } from "./vendor.2833ae3d.js";
21
+ import { H as HstWrapper } from "./HstWrapper.246b6982.js";
22
+ var CustomSelect_vue_vue_type_style_index_0_lang = "";
23
+ const _hoisted_1$1 = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal" };
24
+ const _hoisted_2$1 = { class: "htw-flex-1 htw-truncate" };
25
+ const _hoisted_3 = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" };
26
+ const _hoisted_4 = ["onClick"];
27
+ const __default__$1 = {
28
+ name: "CustomSelect"
29
+ };
30
+ const _sfc_main$2 = defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
31
+ props: {
32
+ modelValue: { type: String, required: true },
33
+ options: { type: [Object, Array], required: true }
34
+ },
35
+ emits: ["update:modelValue"],
36
+ setup(__props, { emit: emits }) {
37
+ const props = __props;
38
+ const formattedOptions = computed(() => {
39
+ if (Array.isArray(props.options)) {
40
+ return Object.fromEntries(props.options.map((value) => {
41
+ if (typeof value === "string") {
42
+ return [value, value];
43
+ } else {
44
+ return [value.value, value.label];
45
+ }
46
+ }));
47
+ }
48
+ return props.options;
49
+ });
50
+ const selectedLabel = computed(() => formattedOptions.value[props.modelValue]);
51
+ function selectValue(value, hide) {
52
+ emits("update:modelValue", value);
53
+ hide();
54
+ }
55
+ return (_ctx, _cache) => {
56
+ return openBlock(), createBlock(unref(Dropdown), { "auto-size": "" }, {
57
+ popper: withCtx(({ hide }) => [
58
+ createBaseVNode("div", _hoisted_3, [
59
+ (openBlock(true), createElementBlock(Fragment, null, renderList(unref(formattedOptions), (label, value) => {
60
+ return openBlock(), createElementBlock("div", mergeProps(__spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
61
+ key: label,
62
+ class: ["htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700", {
63
+ "htw-bg-primary-200 dark:htw-bg-primary-800": props.modelValue === value
64
+ }],
65
+ onClick: ($event) => selectValue(value, hide)
66
+ }), toDisplayString(label), 17, _hoisted_4);
67
+ }), 128))
68
+ ])
69
+ ]),
70
+ default: withCtx(() => [
71
+ createBaseVNode("div", _hoisted_1$1, [
72
+ createBaseVNode("div", _hoisted_2$1, [
73
+ renderSlot(_ctx.$slots, "default", { label: unref(selectedLabel) }, () => [
74
+ createTextVNode(toDisplayString(unref(selectedLabel)), 1)
75
+ ])
76
+ ]),
77
+ createVNode(unref(Icon), {
78
+ icon: "carbon:chevron-sort",
79
+ class: "htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
80
+ })
81
+ ])
82
+ ]),
83
+ _: 3
84
+ });
85
+ };
86
+ }
87
+ }));
88
+ _sfc_main$2.__file = "src/components/select/CustomSelect.vue";
89
+ var CustomSelect = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/select/CustomSelect.vue"]]);
90
+ const __default__ = {
91
+ name: "HstSelect"
92
+ };
93
+ const _sfc_main$1 = defineComponent(__spreadProps(__spreadValues({}, __default__), {
94
+ props: {
95
+ title: { type: String, required: false },
96
+ modelValue: { type: String, required: true },
97
+ options: { type: [Object, Array], required: true }
98
+ },
99
+ emits: ["update:modelValue"],
100
+ setup(__props, { emit: emits }) {
101
+ ref();
102
+ return (_ctx, _cache) => {
103
+ return openBlock(), createBlock(HstWrapper, {
104
+ title: __props.title,
105
+ class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
106
+ style: normalizeStyle(_ctx.$attrs.style)
107
+ }, {
108
+ actions: withCtx(() => [
109
+ renderSlot(_ctx.$slots, "actions")
110
+ ]),
111
+ default: withCtx(() => [
112
+ createVNode(CustomSelect, {
113
+ options: __props.options,
114
+ "model-value": __props.modelValue,
115
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emits("update:modelValue", $event))
116
+ }, null, 8, ["options", "model-value"])
117
+ ]),
118
+ _: 3
119
+ }, 8, ["title", "class", "style"]);
120
+ };
121
+ }
122
+ }));
123
+ _sfc_main$1.__file = "src/components/select/HstSelect.vue";
124
+ var HstSelect = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/select/HstSelect.vue"]]);
125
+ const _hoisted_1 = { class: "htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4" };
126
+ const _hoisted_2 = { class: "htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4" };
127
+ const _sfc_main = /* @__PURE__ */ defineComponent({
128
+ name: "HstSelect.story",
129
+ setup(__props) {
130
+ const options = {
131
+ "crash-bandicoot": "Crash Bandicoot",
132
+ "the-last-of-us": "The Last of Us",
133
+ "ghost-of-tsushima": "Ghost of Tsushima"
134
+ };
135
+ const flatOptions = Object.keys(options);
136
+ const objectOptions = Object.keys(options).map((key) => ({
137
+ label: options[key],
138
+ value: key
139
+ }));
140
+ function initState() {
141
+ return {
142
+ label: "My really long label",
143
+ select: "crash-bandicoot"
144
+ };
145
+ }
146
+ return (_ctx, _cache) => {
147
+ const _component_Variant = resolveComponent("Variant");
148
+ const _component_Story = resolveComponent("Story");
149
+ return openBlock(), createBlock(_component_Story, {
150
+ title: "HstSelect",
151
+ layout: {
152
+ type: "grid",
153
+ width: "100%"
154
+ }
155
+ }, {
156
+ default: withCtx(() => [
157
+ createVNode(_component_Variant, {
158
+ title: "default",
159
+ "init-state": initState
160
+ }, {
161
+ default: withCtx(({ state }) => [
162
+ createVNode(HstSelect, {
163
+ modelValue: state.select,
164
+ "onUpdate:modelValue": ($event) => state.select = $event,
165
+ title: state.label,
166
+ options
167
+ }, null, 8, ["modelValue", "onUpdate:modelValue", "title"])
168
+ ]),
169
+ controls: withCtx(({ state }) => [
170
+ createVNode(HstSelect, {
171
+ modelValue: state.select,
172
+ "onUpdate:modelValue": ($event) => state.select = $event,
173
+ title: "Select",
174
+ options
175
+ }, null, 8, ["modelValue", "onUpdate:modelValue"])
176
+ ]),
177
+ _: 1
178
+ }),
179
+ createVNode(_component_Variant, {
180
+ title: "no-label",
181
+ "init-state": initState
182
+ }, {
183
+ default: withCtx(({ state }) => [
184
+ createVNode(HstSelect, {
185
+ modelValue: state.select,
186
+ "onUpdate:modelValue": ($event) => state.select = $event,
187
+ options
188
+ }, null, 8, ["modelValue", "onUpdate:modelValue"])
189
+ ]),
190
+ controls: withCtx(({ state }) => [
191
+ createVNode(HstSelect, {
192
+ modelValue: state.select,
193
+ "onUpdate:modelValue": ($event) => state.select = $event,
194
+ title: "Select",
195
+ options
196
+ }, null, 8, ["modelValue", "onUpdate:modelValue"])
197
+ ]),
198
+ _: 1
199
+ }),
200
+ createVNode(_component_Variant, {
201
+ title: "options-as-object",
202
+ "init-state": initState
203
+ }, {
204
+ default: withCtx(({ state }) => [
205
+ createBaseVNode("pre", { class: "htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4" }, toDisplayString(options)),
206
+ createVNode(HstSelect, {
207
+ modelValue: state.select,
208
+ "onUpdate:modelValue": ($event) => state.select = $event,
209
+ title: "Games",
210
+ options
211
+ }, null, 8, ["modelValue", "onUpdate:modelValue"])
212
+ ]),
213
+ controls: withCtx(({ state }) => [
214
+ createVNode(HstSelect, {
215
+ modelValue: state.select,
216
+ "onUpdate:modelValue": ($event) => state.select = $event,
217
+ title: "Games",
218
+ options
219
+ }, null, 8, ["modelValue", "onUpdate:modelValue"])
220
+ ]),
221
+ _: 1
222
+ }),
223
+ createVNode(_component_Variant, {
224
+ title: "options-as-array-of-objects",
225
+ "init-state": initState
226
+ }, {
227
+ default: withCtx(({ state }) => [
228
+ createBaseVNode("pre", _hoisted_1, toDisplayString(unref(objectOptions)), 1),
229
+ createVNode(HstSelect, {
230
+ modelValue: state.select,
231
+ "onUpdate:modelValue": ($event) => state.select = $event,
232
+ title: "Games",
233
+ options: unref(objectOptions)
234
+ }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
235
+ ]),
236
+ controls: withCtx(({ state }) => [
237
+ createVNode(HstSelect, {
238
+ modelValue: state.select,
239
+ "onUpdate:modelValue": ($event) => state.select = $event,
240
+ title: "Games",
241
+ options: unref(objectOptions)
242
+ }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
243
+ ]),
244
+ _: 1
245
+ }),
246
+ createVNode(_component_Variant, {
247
+ title: "options-as-array-of-strings",
248
+ "init-state": initState
249
+ }, {
250
+ default: withCtx(({ state }) => [
251
+ createBaseVNode("pre", _hoisted_2, toDisplayString(unref(flatOptions)), 1),
252
+ createVNode(HstSelect, {
253
+ modelValue: state.select,
254
+ "onUpdate:modelValue": ($event) => state.select = $event,
255
+ title: "Select",
256
+ options: unref(flatOptions)
257
+ }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
258
+ ]),
259
+ controls: withCtx(({ state }) => [
260
+ createVNode(HstSelect, {
261
+ modelValue: state.select,
262
+ "onUpdate:modelValue": ($event) => state.select = $event,
263
+ title: "Select",
264
+ options: unref(flatOptions)
265
+ }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
266
+ ]),
267
+ _: 1
268
+ })
269
+ ]),
270
+ _: 1
271
+ });
272
+ };
273
+ }
274
+ });
275
+ _sfc_main.__file = "src/components/select/HstSelect.story.vue";
276
+ var HstSelect_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/select/HstSelect.story.vue"]]);
277
+ export { HstSelect_story as default };
@@ -0,0 +1,137 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ import { ax as _export_sfc, d as defineComponent, r as ref, a as openBlock, j as createBlock, k as withCtx, f as renderSlot, e as createBaseVNode, x as mergeProps, n as normalizeClass, h as normalizeStyle, q as resolveComponent, l as createVNode } from "./vendor.2833ae3d.js";
21
+ import { H as HstWrapper } from "./HstWrapper.246b6982.js";
22
+ const _hoisted_1 = ["value"];
23
+ const __default__ = {
24
+ name: "HstText"
25
+ };
26
+ const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
27
+ props: {
28
+ title: { type: String, required: false },
29
+ modelValue: { type: String, required: true }
30
+ },
31
+ emits: {
32
+ "update:modelValue": (newValue) => true
33
+ },
34
+ setup(__props, { emit }) {
35
+ const input = ref();
36
+ return (_ctx, _cache) => {
37
+ return openBlock(), createBlock(HstWrapper, {
38
+ title: __props.title,
39
+ class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
40
+ style: normalizeStyle(_ctx.$attrs.style),
41
+ onClick: _cache[1] || (_cache[1] = ($event) => input.value.focus())
42
+ }, {
43
+ actions: withCtx(() => [
44
+ renderSlot(_ctx.$slots, "actions")
45
+ ]),
46
+ default: withCtx(() => [
47
+ createBaseVNode("input", mergeProps({
48
+ ref_key: "input",
49
+ ref: input
50
+ }, __spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
51
+ type: "text",
52
+ value: __props.modelValue,
53
+ class: "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm",
54
+ onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
55
+ }), null, 16, _hoisted_1)
56
+ ]),
57
+ _: 3
58
+ }, 8, ["title", "class", "style"]);
59
+ };
60
+ }
61
+ }));
62
+ _sfc_main$1.__file = "src/components/text/HstText.vue";
63
+ var HstText = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/text/HstText.vue"]]);
64
+ const _sfc_main = /* @__PURE__ */ defineComponent({
65
+ name: "HstText.story",
66
+ setup(__props) {
67
+ function initState() {
68
+ return {
69
+ label: "My really long label",
70
+ text: ""
71
+ };
72
+ }
73
+ return (_ctx, _cache) => {
74
+ const _component_Variant = resolveComponent("Variant");
75
+ const _component_Story = resolveComponent("Story");
76
+ return openBlock(), createBlock(_component_Story, {
77
+ title: "HstText",
78
+ layout: {
79
+ type: "grid",
80
+ width: "100%"
81
+ }
82
+ }, {
83
+ default: withCtx(() => [
84
+ createVNode(_component_Variant, {
85
+ title: "default",
86
+ "init-state": initState
87
+ }, {
88
+ default: withCtx(({ state }) => [
89
+ createVNode(HstText, {
90
+ modelValue: state.text,
91
+ "onUpdate:modelValue": ($event) => state.text = $event,
92
+ title: state.label
93
+ }, null, 8, ["modelValue", "onUpdate:modelValue", "title"])
94
+ ]),
95
+ controls: withCtx(({ state }) => [
96
+ createVNode(HstText, {
97
+ modelValue: state.label,
98
+ "onUpdate:modelValue": ($event) => state.label = $event,
99
+ title: "Label"
100
+ }, null, 8, ["modelValue", "onUpdate:modelValue"]),
101
+ createVNode(HstText, {
102
+ modelValue: state.text,
103
+ "onUpdate:modelValue": ($event) => state.text = $event,
104
+ title: "Text"
105
+ }, null, 8, ["modelValue", "onUpdate:modelValue"])
106
+ ]),
107
+ _: 1
108
+ }),
109
+ createVNode(_component_Variant, {
110
+ title: "no-label",
111
+ "init-state": initState
112
+ }, {
113
+ default: withCtx(({ state }) => [
114
+ createVNode(HstText, {
115
+ modelValue: state.text,
116
+ "onUpdate:modelValue": ($event) => state.text = $event,
117
+ placeholder: "Enter some text..."
118
+ }, null, 8, ["modelValue", "onUpdate:modelValue"])
119
+ ]),
120
+ controls: withCtx(({ state }) => [
121
+ createVNode(HstText, {
122
+ modelValue: state.text,
123
+ "onUpdate:modelValue": ($event) => state.text = $event,
124
+ title: "Text"
125
+ }, null, 8, ["modelValue", "onUpdate:modelValue"])
126
+ ]),
127
+ _: 1
128
+ })
129
+ ]),
130
+ _: 1
131
+ });
132
+ };
133
+ }
134
+ });
135
+ _sfc_main.__file = "src/components/text/HstText.story.vue";
136
+ var HstText_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/text/HstText.story.vue"]]);
137
+ export { HstText_story as default };
@@ -0,0 +1,105 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ import { ax as _export_sfc, d as defineComponent, r as ref, a as openBlock, j as createBlock, k as withCtx, f as renderSlot, e as createBaseVNode, x as mergeProps, n as normalizeClass, h as normalizeStyle, q as resolveComponent, l as createVNode } from "./vendor.2833ae3d.js";
21
+ import { H as HstWrapper } from "./HstWrapper.246b6982.js";
22
+ const _hoisted_1 = ["value"];
23
+ const __default__ = {
24
+ name: "HstTextarea",
25
+ inheritAttrs: false
26
+ };
27
+ const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
28
+ props: {
29
+ title: { type: String, required: false },
30
+ modelValue: { type: String, required: true }
31
+ },
32
+ emits: {
33
+ "update:modelValue": (newValue) => true
34
+ },
35
+ setup(__props, { emit }) {
36
+ const input = ref();
37
+ return (_ctx, _cache) => {
38
+ return openBlock(), createBlock(HstWrapper, {
39
+ title: __props.title,
40
+ class: normalizeClass(["htw-cursor-text", _ctx.$attrs.class]),
41
+ style: normalizeStyle(_ctx.$attrs.style),
42
+ onClick: _cache[1] || (_cache[1] = ($event) => input.value.focus())
43
+ }, {
44
+ actions: withCtx(() => [
45
+ renderSlot(_ctx.$slots, "actions")
46
+ ]),
47
+ default: withCtx(() => [
48
+ createBaseVNode("textarea", mergeProps({
49
+ ref_key: "input",
50
+ ref: input
51
+ }, __spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
52
+ value: __props.modelValue,
53
+ class: "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-box-border htw-resize-y htw-min-h-[26px]",
54
+ onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
55
+ }), null, 16, _hoisted_1)
56
+ ]),
57
+ _: 3
58
+ }, 8, ["title", "class", "style"]);
59
+ };
60
+ }
61
+ }));
62
+ _sfc_main$1.__file = "src/components/textarea/HstTextarea.vue";
63
+ var HstTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/textarea/HstTextarea.vue"]]);
64
+ const _sfc_main = /* @__PURE__ */ defineComponent({
65
+ name: "HstTextarea.story",
66
+ setup(__props) {
67
+ function initState() {
68
+ return {
69
+ text: ""
70
+ };
71
+ }
72
+ return (_ctx, _cache) => {
73
+ const _component_Variant = resolveComponent("Variant");
74
+ const _component_Story = resolveComponent("Story");
75
+ return openBlock(), createBlock(_component_Story, { title: "HstTextarea" }, {
76
+ default: withCtx(() => [
77
+ createVNode(_component_Variant, {
78
+ title: "default",
79
+ "init-state": initState
80
+ }, {
81
+ default: withCtx(({ state }) => [
82
+ createVNode(HstTextarea, {
83
+ modelValue: state.text,
84
+ "onUpdate:modelValue": ($event) => state.text = $event,
85
+ title: "Textarea"
86
+ }, null, 8, ["modelValue", "onUpdate:modelValue"])
87
+ ]),
88
+ controls: withCtx(({ state }) => [
89
+ createVNode(HstTextarea, {
90
+ modelValue: state.text,
91
+ "onUpdate:modelValue": ($event) => state.text = $event,
92
+ title: "Text"
93
+ }, null, 8, ["modelValue", "onUpdate:modelValue"])
94
+ ]),
95
+ _: 1
96
+ })
97
+ ]),
98
+ _: 1
99
+ });
100
+ };
101
+ }
102
+ });
103
+ _sfc_main.__file = "src/components/textarea/HstTextarea.story.vue";
104
+ var HstTextarea_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/textarea/HstTextarea.story.vue"]]);
105
+ export { HstTextarea_story as default };