@bagelink/vue 0.0.1043 → 0.0.1045

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 (7) hide show
  1. package/dist/components/form/inputs/RangeInput.vue.d.ts +46 -1
  2. package/dist/components/form/inputs/RangeInput.vue.d.ts.map +1 -1
  3. package/dist/index.cjs +48 -5
  4. package/dist/index.mjs +48 -5
  5. package/dist/style.css +10 -10
  6. package/package.json +1 -1
  7. package/src/components/form/inputs/RangeInput.vue +15 -4
package/dist/components/form/inputs/RangeInput.vue.d.ts CHANGED
@@ -11,10 +11,55 @@ export interface RangeInputProps {
11
11
  multiRange?: boolean;
12
12
  formatValue?: (value: number) => string;
13
13
  }
14
- declare const _default: import('vue').DefineComponent<RangeInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
14
+ declare function __VLS_template(): {
15
+ attrs: Partial<{}>;
16
+ slots: {
17
+ progress?(_: {
18
+ progress: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<string>;
19
+ min: string;
20
+ max: string;
21
+ }): any;
22
+ from?(_: {
23
+ from: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<string>;
24
+ to: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<string>;
25
+ min: string;
26
+ max: string;
27
+ }): any;
28
+ to?(_: {
29
+ to: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<string>;
30
+ from: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<string>;
31
+ min: string;
32
+ max: string;
33
+ }): any;
34
+ min?(_: {
35
+ max: string;
36
+ min: string;
37
+ from: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<string>;
38
+ to: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<string>;
39
+ progress: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<string>;
40
+ }): any;
41
+ max?(_: {
42
+ max: string;
43
+ min: string;
44
+ from: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<string>;
45
+ to: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<string>;
46
+ progress: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<string>;
47
+ }): any;
48
+ };
49
+ refs: {};
50
+ rootEl: HTMLDivElement;
51
+ };
52
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
53
+ declare const __VLS_component: import('vue').DefineComponent<RangeInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
15
54
  "update:modelValue": (...args: any[]) => void;
16
55
  }, string, import('vue').PublicProps, Readonly<RangeInputProps> & Readonly<{
17
56
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
18
57
  }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
58
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
19
59
  export default _default;
60
+ type __VLS_WithTemplateSlots<T, S> = T & {
61
+ new (): {
62
+ $slots: S;
63
+ };
64
+ };
20
65
  //# sourceMappingURL=RangeInput.vue.d.ts.map
package/dist/components/form/inputs/RangeInput.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RangeInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RangeInput.vue"],"names":[],"mappings":"AAgNA,MAAM,WAAW,eAAe;IAC/B,UAAU,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACvC;;;;;;AAwMD,wBAQG"}
1
+ {"version":3,"file":"RangeInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RangeInput.vue"],"names":[],"mappings":"AA2NA,MAAM,WAAW,eAAe;IAC/B,UAAU,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACvC;AAqED,iBAAS,cAAc;WAuHT,OAAO,IAA6B;;;;;;YAZpB,GAAG;;;;;;YACP,GAAG;;;;;;YACL,GAAG;;;;;;;YACF,GAAG;;;;;;;YACH,GAAG;;;;EAa3B;AA0BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;6FAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
package/dist/index.cjs CHANGED
@@ -20547,22 +20547,65 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
20547
20547
  key: 1,
20548
20548
  class: "txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0",
20549
20549
  style: vue.normalizeStyle({ "--progress": `${fromPercentage.value}` })
20550
- }, vue.toDisplayString(displayFrom.value), 5)) : vue.createCommentVNode("", true),
20550
+ }, [
20551
+ !vue.unref(multiRange) ? vue.renderSlot(_ctx.$slots, "progress", {
20552
+ key: 0,
20553
+ progress: displayFrom.value,
20554
+ min: vue.unref(formatValue)(vue.unref(min2)),
20555
+ max: vue.unref(formatValue)(vue.unref(max2))
20556
+ }, () => [
20557
+ vue.createTextVNode(vue.toDisplayString(displayFrom.value), 1)
20558
+ ], true) : vue.createCommentVNode("", true),
20559
+ vue.unref(multiRange) ? vue.renderSlot(_ctx.$slots, "from", {
20560
+ key: 1,
20561
+ from: displayFrom.value,
20562
+ to: displayTo.value,
20563
+ min: vue.unref(formatValue)(vue.unref(min2)),
20564
+ max: vue.unref(formatValue)(vue.unref(max2))
20565
+ }, () => [
20566
+ vue.createTextVNode(vue.toDisplayString(displayFrom.value), 1)
20567
+ ], true) : vue.createCommentVNode("", true)
20568
+ ], 4)) : vue.createCommentVNode("", true),
20551
20569
  vue.unref(multiRange) && validTo.value !== vue.unref(max2) ? (vue.openBlock(), vue.createElementBlock("p", {
20552
20570
  key: 2,
20553
20571
  class: "txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute",
20554
20572
  style: vue.normalizeStyle({ "--progress": `${toPercentage.value}` })
20555
- }, vue.toDisplayString(displayTo.value), 5)) : vue.createCommentVNode("", true)
20573
+ }, [
20574
+ vue.renderSlot(_ctx.$slots, "to", {
20575
+ to: displayTo.value,
20576
+ from: displayFrom.value,
20577
+ min: vue.unref(formatValue)(vue.unref(min2)),
20578
+ max: vue.unref(formatValue)(vue.unref(max2))
20579
+ }, () => [
20580
+ vue.createTextVNode(vue.toDisplayString(displayTo.value), 1)
20581
+ ], true)
20582
+ ], 4)) : vue.createCommentVNode("", true)
20556
20583
  ], 8, _hoisted_2$i),
20557
20584
  vue.createElementVNode("p", _hoisted_6$8, [
20558
- vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)(vue.unref(min2))), 1),
20559
- vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)(vue.unref(max2))), 1)
20585
+ vue.renderSlot(_ctx.$slots, "min", {
20586
+ max: vue.unref(formatValue)(vue.unref(max2)),
20587
+ min: vue.unref(formatValue)(vue.unref(min2)),
20588
+ from: displayFrom.value,
20589
+ to: displayTo.value,
20590
+ progress: displayFrom.value
20591
+ }, () => [
20592
+ vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)(vue.unref(min2))), 1)
20593
+ ], true),
20594
+ vue.renderSlot(_ctx.$slots, "max", {
20595
+ max: vue.unref(formatValue)(vue.unref(max2)),
20596
+ min: vue.unref(formatValue)(vue.unref(min2)),
20597
+ from: displayFrom.value,
20598
+ to: displayTo.value,
20599
+ progress: displayFrom.value
20600
+ }, () => [
20601
+ vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)(vue.unref(max2))), 1)
20602
+ ], true)
20560
20603
  ])
20561
20604
  ]);
20562
20605
  };
20563
20606
  }
20564
20607
  });
20565
- const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-3616fbd2"]]);
20608
+ const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-c427a28c"]]);
20566
20609
  const tableTools = [
20567
20610
  "mergeCells",
20568
20611
  "splitCells",
package/dist/index.mjs CHANGED
@@ -20545,22 +20545,65 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
20545
20545
  key: 1,
20546
20546
  class: "txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0",
20547
20547
  style: normalizeStyle({ "--progress": `${fromPercentage.value}` })
20548
- }, toDisplayString(displayFrom.value), 5)) : createCommentVNode("", true),
20548
+ }, [
20549
+ !unref(multiRange) ? renderSlot(_ctx.$slots, "progress", {
20550
+ key: 0,
20551
+ progress: displayFrom.value,
20552
+ min: unref(formatValue)(unref(min2)),
20553
+ max: unref(formatValue)(unref(max2))
20554
+ }, () => [
20555
+ createTextVNode(toDisplayString(displayFrom.value), 1)
20556
+ ], true) : createCommentVNode("", true),
20557
+ unref(multiRange) ? renderSlot(_ctx.$slots, "from", {
20558
+ key: 1,
20559
+ from: displayFrom.value,
20560
+ to: displayTo.value,
20561
+ min: unref(formatValue)(unref(min2)),
20562
+ max: unref(formatValue)(unref(max2))
20563
+ }, () => [
20564
+ createTextVNode(toDisplayString(displayFrom.value), 1)
20565
+ ], true) : createCommentVNode("", true)
20566
+ ], 4)) : createCommentVNode("", true),
20549
20567
  unref(multiRange) && validTo.value !== unref(max2) ? (openBlock(), createElementBlock("p", {
20550
20568
  key: 2,
20551
20569
  class: "txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute",
20552
20570
  style: normalizeStyle({ "--progress": `${toPercentage.value}` })
20553
- }, toDisplayString(displayTo.value), 5)) : createCommentVNode("", true)
20571
+ }, [
20572
+ renderSlot(_ctx.$slots, "to", {
20573
+ to: displayTo.value,
20574
+ from: displayFrom.value,
20575
+ min: unref(formatValue)(unref(min2)),
20576
+ max: unref(formatValue)(unref(max2))
20577
+ }, () => [
20578
+ createTextVNode(toDisplayString(displayTo.value), 1)
20579
+ ], true)
20580
+ ], 4)) : createCommentVNode("", true)
20554
20581
  ], 8, _hoisted_2$i),
20555
20582
  createElementVNode("p", _hoisted_6$8, [
20556
- createElementVNode("span", null, toDisplayString(unref(formatValue)(unref(min2))), 1),
20557
- createElementVNode("span", null, toDisplayString(unref(formatValue)(unref(max2))), 1)
20583
+ renderSlot(_ctx.$slots, "min", {
20584
+ max: unref(formatValue)(unref(max2)),
20585
+ min: unref(formatValue)(unref(min2)),
20586
+ from: displayFrom.value,
20587
+ to: displayTo.value,
20588
+ progress: displayFrom.value
20589
+ }, () => [
20590
+ createElementVNode("span", null, toDisplayString(unref(formatValue)(unref(min2))), 1)
20591
+ ], true),
20592
+ renderSlot(_ctx.$slots, "max", {
20593
+ max: unref(formatValue)(unref(max2)),
20594
+ min: unref(formatValue)(unref(min2)),
20595
+ from: displayFrom.value,
20596
+ to: displayTo.value,
20597
+ progress: displayFrom.value
20598
+ }, () => [
20599
+ createElementVNode("span", null, toDisplayString(unref(formatValue)(unref(max2))), 1)
20600
+ ], true)
20558
20601
  ])
20559
20602
  ]);
20560
20603
  };
20561
20604
  }
20562
20605
  });
20563
- const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-3616fbd2"]]);
20606
+ const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-c427a28c"]]);
20564
20607
  const tableTools = [
20565
20608
  "mergeCells",
20566
20609
  "splitCells",
package/dist/style.css CHANGED
@@ -1180,28 +1180,28 @@ pre code.hljs{
1180
1180
  color: var(--bgl-light-text);
1181
1181
  }
1182
1182
 
1183
- .range-slider-position-txt[data-v-3616fbd2]{
1183
+ .range-slider-position-txt[data-v-c427a28c]{
1184
1184
  margin-inline-start: calc((var(--progress) * 1%) - (var(--bgl-range-thumb-size) * var(--progress) / 100));
1185
1185
  top: calc(var(--bgl-range-thumb-size) / 2 ) ;
1186
1186
  transition: transform 0.1s, opacity 0.5s, top 0.5s;
1187
1187
  transform: scale(0.5);
1188
1188
  width: var(--bgl-range-thumb-size);
1189
1189
  }
1190
- .range-slider:hover .range-slider-position-txt[data-v-3616fbd2]{
1190
+ .range-slider:hover .range-slider-position-txt[data-v-c427a28c]{
1191
1191
  opacity: 1;
1192
1192
  transform: scale(1);
1193
1193
  top: calc(var(--bgl-range-thumb-size) / 1) ;
1194
1194
  }
1195
- .range-slider[data-v-3616fbd2] {
1195
+ .range-slider[data-v-c427a28c] {
1196
1196
  height: var(--bgl-range-track-size);
1197
1197
  display: flex;
1198
1198
  align-items: center;
1199
1199
  margin-top: calc(var(--bgl-range-thumb-size) / 2 + 0.5rem) ;
1200
1200
  }
1201
- .range-slider-txt[data-v-3616fbd2]{
1201
+ .range-slider-txt[data-v-c427a28c]{
1202
1202
  margin-top: calc(var(--bgl-range-thumb-size) / 2) !important;
1203
1203
  }
1204
- input[type="range"][data-v-3616fbd2] {
1204
+ input[type="range"][data-v-c427a28c] {
1205
1205
  position: absolute;
1206
1206
  width: 100%;
1207
1207
  height: 100%;
@@ -1211,7 +1211,7 @@ input[type="range"][data-v-3616fbd2] {
1211
1211
  appearance: none;
1212
1212
  margin: 0;
1213
1213
  }
1214
- input[type="range"][data-v-3616fbd2]::-webkit-slider-thumb {
1214
+ input[type="range"][data-v-c427a28c]::-webkit-slider-thumb {
1215
1215
  pointer-events: all;
1216
1216
  appearance: none;
1217
1217
  width: var(--bgl-range-thumb-size);
@@ -1224,18 +1224,18 @@ input[type="range"][data-v-3616fbd2]::-webkit-slider-thumb {
1224
1224
  cursor: grab;
1225
1225
  transition: var(--bgl-transition);
1226
1226
  }
1227
- input[type="range"][data-v-3616fbd2]::-webkit-slider-thumb:hover {
1227
+ input[type="range"][data-v-c427a28c]::-webkit-slider-thumb:hover {
1228
1228
  box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2) var(--bgl-primary-tint);
1229
1229
  filter: brightness(90%);
1230
1230
  }
1231
- input[type="range"][data-v-3616fbd2]:focus::-webkit-slider-thumb {
1231
+ input[type="range"][data-v-c427a28c]:focus::-webkit-slider-thumb {
1232
1232
  outline: none;
1233
1233
  box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2.2) var(--bgl-primary-tint);
1234
1234
  }
1235
- input[type="range"][data-v-3616fbd2]:active::-webkit-slider-thumb {
1235
+ input[type="range"][data-v-c427a28c]:active::-webkit-slider-thumb {
1236
1236
  cursor: grabbing;
1237
1237
  }
1238
- .track[data-v-3616fbd2] {
1238
+ .track[data-v-c427a28c] {
1239
1239
  height: var(--bgl-range-track-height);
1240
1240
  background: var(--bgl-bg);
1241
1241
  margin-inline-start: calc(var(--bgl-range-thumb-size) / 2);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.1043",
4
+ "version": "0.0.1045",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
package/src/components/form/inputs/RangeInput.vue CHANGED
@@ -115,19 +115,30 @@ const displayTo = $computed(() => formatValue(validTo))
115
115
  class="txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0"
116
116
  :style="{ '--progress': `${fromPercentage}` }"
117
117
  >
118
- {{ displayFrom }}
118
+ <slot v-if="!multiRange" name="progress" :progress="displayFrom" :min="formatValue(min)" :max="formatValue(max)">
119
+ {{ displayFrom }}
120
+ </slot>
121
+ <slot v-if="multiRange" name="from" :from="displayFrom" :to="displayTo" :min="formatValue(min)" :max="formatValue(max)">
122
+ {{ displayFrom }}
123
+ </slot>
119
124
  </p>
120
125
  <p
121
126
  v-if="multiRange && validTo !== max"
122
127
  class="txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute"
123
128
  :style="{ '--progress': `${toPercentage}` }"
124
129
  >
125
- {{ displayTo }}
130
+ <slot name="to" :to="displayTo" :from="displayFrom" :min="formatValue(min)" :max="formatValue(max)">
131
+ {{ displayTo }}
132
+ </slot>
126
133
  </p>
127
134
  </div>
128
135
  <p class="txt-center txt-14 user-select-none range-slider-txt flex space-between opacity-4 mx-05">
129
- <span>{{ formatValue(min) }}</span>
130
- <span>{{ formatValue(max) }}</span>
136
+ <slot name="min" :max="formatValue(max)" :min="formatValue(min)" :from="displayFrom" :to="displayTo" :progress="displayFrom">
137
+ <span>{{ formatValue(min) }}</span>
138
+ </slot>
139
+ <slot name="max" :max="formatValue(max)" :min="formatValue(min)" :from="displayFrom" :to="displayTo" :progress="displayFrom">
140
+ <span>{{ formatValue(max) }}</span>
141
+ </slot>
131
142
  </p>
132
143
  </div>
133
144
  </template>