@retailcrm/embed-ui-v1-components 0.5.1 → 0.5.2-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.
@@ -11,6 +11,10 @@
11
11
  }
12
12
  }
13
13
 
14
+ .circle (@size) {
15
+ .square-rounded(@size, 50%);
16
+ }
17
+
14
18
  .square (@size) {
15
19
  width: @size;
16
20
  min-width: @size;
package/dist/host.cjs CHANGED
@@ -60,7 +60,7 @@ var VARIANT = /* @__PURE__ */ ((VARIANT2) => {
60
60
  VARIANT2["DANGER"] = "danger";
61
61
  return VARIANT2;
62
62
  })(VARIANT || {});
63
- const _sfc_main$d = vue.defineComponent({
63
+ const _sfc_main$e = vue.defineComponent({
64
64
  props: {
65
65
  /** Устанавливает тип кнопки */
66
66
  type: {
@@ -156,6 +156,172 @@ const _sfc_main$d = vue.defineComponent({
156
156
  };
157
157
  }
158
158
  });
159
+ const _hoisted_1$9 = {
160
+ xmlns: "http://www.w3.org/2000/svg",
161
+ viewBox: "0 0 24 24"
162
+ };
163
+ function render$4(_ctx, _cache) {
164
+ return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$9, _cache[0] || (_cache[0] = [
165
+ vue.createElementVNode("path", {
166
+ fill: "currentColor",
167
+ "fill-rule": "evenodd",
168
+ d: "M19.793 6.965a.77.77 0 0 1-.022 1.075l-9.815 9.607a1.224 1.224 0 0 1-1.714.006l-4.01-3.878a.77.77 0 0 1-.028-1.074l.684-.736a.735.735 0 0 1 1.053-.028l3.15 3.046 8.96-8.771a.735.735 0 0 1 1.054.022z",
169
+ "clip-rule": "evenodd"
170
+ }, null, -1)
171
+ ]));
172
+ }
173
+ const IconDone = { render: render$4 };
174
+ const expect = (value) => ({
175
+ toBeOneOf(variants) {
176
+ return Object.values(variants).includes(value);
177
+ }
178
+ });
179
+ const pick = (attrs, criteria) => {
180
+ return Object.keys(attrs).filter(criteria).reduce((picked, key) => ({
181
+ ...picked,
182
+ [key]: attrs[key]
183
+ }), {});
184
+ };
185
+ const without = (obj, exclude) => {
186
+ const newObj = {};
187
+ Object.entries(obj).forEach(([key, value]) => {
188
+ if (!exclude.includes(key)) {
189
+ newObj[key] = value;
190
+ }
191
+ });
192
+ return newObj;
193
+ };
194
+ const _hoisted_1$8 = ["id", "value", "name", "disabled", "checked"];
195
+ const _hoisted_2$3 = { class: "ui-v1-checkbox__checkmark" };
196
+ let counter$1 = 0;
197
+ const __default__ = {};
198
+ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
199
+ ...__default__,
200
+ __name: "UiCheckbox",
201
+ props: {
202
+ id: {
203
+ type: null,
204
+ validator: (id) => id === void 0 || typeof id === "string" && id.length > 0 && /^[A-Za-z]/.test(id),
205
+ default: void 0
206
+ },
207
+ /** Атрибут name нативного поля ввода */
208
+ name: {
209
+ type: String,
210
+ default: () => "ui-v1-checkbox-" + ++counter$1
211
+ },
212
+ /** Значение модели используемое с директивой v-model */
213
+ model: {
214
+ type: null,
215
+ default: void 0
216
+ },
217
+ /** Значение, добавляемое или удаляемое из модели в зависимости от флага checked, если модель является массивом */
218
+ value: {
219
+ type: null,
220
+ default: void 0
221
+ },
222
+ /** Задает значение, если флаг checked равен true, а модель не является массивом */
223
+ valueOfTruthy: {
224
+ type: null,
225
+ default: true
226
+ },
227
+ /** Задает значение, если флаг checked равен false, а модель не является массивом */
228
+ valueOfFalsy: {
229
+ type: null,
230
+ default: false
231
+ },
232
+ /** Задает "состояние" неопределенности для бокса, чье состояние "включенности" зависит от множества других боксов */
233
+ indeterminate: {
234
+ type: Boolean,
235
+ default: false
236
+ },
237
+ /** Задает стили для бокса уменьшенного размера */
238
+ small: {
239
+ type: Boolean,
240
+ default: false
241
+ },
242
+ /** Заблокированный */
243
+ disabled: {
244
+ type: Boolean,
245
+ default: false
246
+ }
247
+ },
248
+ emits: [
249
+ /** Изменение значения модели */
250
+ "change",
251
+ /** Изменение значения модели. Для v-model */
252
+ "update:model"
253
+ ],
254
+ setup(__props, { expose: __expose, emit: __emit }) {
255
+ const isArray = Array.isArray;
256
+ const props = __props;
257
+ const emit = __emit;
258
+ const checkbox = vue.ref(null);
259
+ const click = () => {
260
+ var _a;
261
+ return (_a = checkbox.value) == null ? void 0 : _a.click();
262
+ };
263
+ const focus = () => {
264
+ var _a;
265
+ return (_a = checkbox.value) == null ? void 0 : _a.focus();
266
+ };
267
+ const blur = () => {
268
+ var _a;
269
+ return (_a = checkbox.value) == null ? void 0 : _a.blur();
270
+ };
271
+ __expose({
272
+ click,
273
+ focus,
274
+ blur
275
+ });
276
+ const contains = (array, value) => array.some((v) => v === value);
277
+ const checked = vue.computed(() => {
278
+ return isArray(props.model) ? contains(props.model, props.value) : props.model === props.valueOfTruthy;
279
+ });
280
+ const calculate = (checked2) => {
281
+ if (isArray(props.model)) {
282
+ return checked2 ? contains(props.model, props.value) ? props.model : [...props.model, props.value] : [...props.model].filter((v) => v !== props.value);
283
+ }
284
+ return checked2 ? props.valueOfTruthy : props.valueOfFalsy;
285
+ };
286
+ const onChange = (event) => {
287
+ const checkbox2 = event.target;
288
+ const value = calculate(checkbox2.checked);
289
+ emit("change", value);
290
+ emit("update:model", value);
291
+ };
292
+ return (_ctx, _cache) => {
293
+ return vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
294
+ class: {
295
+ "ui-v1-checkbox": true,
296
+ "ui-v1-checkbox_small": __props.small,
297
+ "ui-v1-checkbox_checked": checked.value,
298
+ "ui-v1-checkbox_indeterminate": __props.indeterminate,
299
+ "ui-v1-checkbox_disabled": __props.disabled
300
+ }
301
+ }, vue.unref(pick)(_ctx.$attrs, (key) => !key.startsWith("aria-") && !key.startsWith("on"))), [
302
+ vue.createElementVNode("input", vue.mergeProps({
303
+ id: __props.id,
304
+ ref_key: "checkbox",
305
+ ref: checkbox,
306
+ value: vue.unref(isArray)(__props.model) ? __props.value : void 0,
307
+ name: __props.name,
308
+ disabled: __props.disabled,
309
+ checked: checked.value
310
+ }, vue.unref(pick)(_ctx.$attrs, (key) => key.startsWith("aria-") || key.startsWith("on")), {
311
+ type: "checkbox",
312
+ class: "ui-v1-checkbox__input",
313
+ onChange
314
+ }), null, 16, _hoisted_1$8),
315
+ vue.createElementVNode("span", _hoisted_2$3, [
316
+ checked.value && !__props.indeterminate ? (vue.openBlock(), vue.createBlock(vue.unref(IconDone), {
317
+ key: 0,
318
+ class: "ui-v1-checkbox__checkmark-icon"
319
+ })) : vue.createCommentVNode("", true)
320
+ ])
321
+ ], 16);
322
+ };
323
+ }
324
+ });
159
325
  var ALIGN = /* @__PURE__ */ ((ALIGN2) => {
160
326
  ALIGN2["LEFT"] = "left";
161
327
  ALIGN2["RIGHT"] = "right";
@@ -2045,20 +2211,6 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
2045
2211
  };
2046
2212
  }
2047
2213
  });
2048
- const expect = (value) => ({
2049
- toBeOneOf(variants) {
2050
- return Object.values(variants).includes(value);
2051
- }
2052
- });
2053
- const without = (obj, exclude) => {
2054
- const newObj = {};
2055
- Object.entries(obj).forEach(([key, value]) => {
2056
- if (!exclude.includes(key)) {
2057
- newObj[key] = value;
2058
- }
2059
- });
2060
- return newObj;
2061
- };
2062
2214
  var APPEARANCE = /* @__PURE__ */ ((APPEARANCE2) => {
2063
2215
  APPEARANCE2["ALERT"] = "alert";
2064
2216
  APPEARANCE2["DIALOG"] = "dialog";
@@ -2966,7 +3118,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
2966
3118
  return SIZE$4.SM;
2967
3119
  });
2968
3120
  return (_ctx, _cache) => {
2969
- return vue.openBlock(), vue.createBlock(_sfc_main$d, vue.mergeProps({
3121
+ return vue.openBlock(), vue.createBlock(_sfc_main$e, vue.mergeProps({
2970
3122
  ref_key: "root",
2971
3123
  ref: root,
2972
3124
  href: __props.href,
@@ -3237,7 +3389,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
3237
3389
  });
3238
3390
  exports.I18nPlugin = plugin;
3239
3391
  exports.ModalPlugin = plugin$1;
3240
- exports.UiButton = _sfc_main$d;
3392
+ exports.UiButton = _sfc_main$e;
3393
+ exports.UiCheckbox = _sfc_main$d;
3241
3394
  exports.UiError = _sfc_main$c;
3242
3395
  exports.UiLink = _sfc_main$b;
3243
3396
  exports.UiLoader = _sfc_main$9;
package/dist/host.css CHANGED
@@ -316,6 +316,111 @@
316
316
  .ui-v1-button_xs.ui-v1-button_has-trailing-icon {
317
317
  padding-right: 8px;
318
318
  }
319
+ .ui-v1-checkbox {
320
+ display: inline-flex;
321
+ align-items: flex-start;
322
+ font-style: normal;
323
+ cursor: pointer;
324
+ margin-bottom: 0;
325
+ position: relative;
326
+ vertical-align: text-bottom;
327
+ }
328
+ .ui-v1-checkbox,
329
+ .ui-v1-checkbox *,
330
+ .ui-v1-checkbox *::before,
331
+ .ui-v1-checkbox *::after {
332
+ box-sizing: border-box;
333
+ }
334
+ .ui-v1-checkbox_disabled {
335
+ cursor: default;
336
+ }
337
+ .ui-v1-checkbox__input {
338
+ width: 100%;
339
+ height: 100%;
340
+ appearance: none;
341
+ cursor: inherit;
342
+ outline: none;
343
+ z-index: 1;
344
+ margin: 0;
345
+ position: absolute;
346
+ left: 0;
347
+ top: 0;
348
+ }
349
+ .ui-v1-checkbox__checkmark {
350
+ display: inline-block;
351
+ width: 20px;
352
+ min-width: 20px;
353
+ height: 20px;
354
+ background: #fff;
355
+ border-radius: 4px;
356
+ border: 2px solid #DEE2E6;
357
+ color: #fff;
358
+ transition: 0.25s ease;
359
+ transition-property: color, box-shadow, background-color, border-color;
360
+ vertical-align: top;
361
+ position: relative;
362
+ }
363
+ .ui-v1-checkbox:not(.ui-v1-checkbox_checked):not(.ui-v1-checkbox_active):not(.ui-v1-checkbox_disabled) .ui-v1-checkbox__input:hover ~ .ui-v1-checkbox__checkmark {
364
+ border-color: #005EEB;
365
+ }
366
+ .ui-v1-checkbox:not(.ui-v1-checkbox_checked):not(.ui-v1-checkbox_active):not(.ui-v1-checkbox_disabled) .ui-v1-checkbox__input:active ~ .ui-v1-checkbox__checkmark {
367
+ background: #EDF4FF;
368
+ }
369
+ .ui-v1-checkbox:not(.ui-v1-checkbox_disabled) .ui-v1-checkbox__input:hover ~ .ui-v1-checkbox__checkmark {
370
+ box-shadow: 0 0 0 4px rgba(0, 94, 235, 0.12);
371
+ }
372
+ .ui-v1-checkbox:not(.ui-v1-checkbox_disabled):active .ui-v1-checkbox__checkmark {
373
+ border-color: #0052CC;
374
+ box-shadow: 0 0 0 4px rgba(0, 94, 235, 0.12) !important;
375
+ }
376
+ .ui-v1-checkbox:not(.ui-v1-checkbox_disabled):not(.ui-v1-checkbox_checked):not(.ui-v1-checkbox_indeterminate):active .ui-v1-checkbox__checkmark {
377
+ background-color: rgba(0, 94, 235, 0.12);
378
+ }
379
+ .ui-v1-checkbox_checked .ui-v1-checkbox__checkmark {
380
+ border-color: #005EEB;
381
+ background: #005EEB;
382
+ }
383
+ .ui-v1-checkbox_disabled:not(.ui-v1-checkbox_checked):not(.ui-v1-checkbox_indeterminate) .ui-v1-checkbox__checkmark {
384
+ background: #EEF1F3;
385
+ border-color: #C7CDD4;
386
+ }
387
+ .ui-v1-checkbox_disabled .ui-v1-checkbox__checkmark {
388
+ border-color: #B8DBFF;
389
+ background: #B8DBFF;
390
+ }
391
+ .ui-v1-checkbox_indeterminate .ui-v1-checkbox__checkmark,
392
+ .ui-v1-checkbox_indeterminate .ui-v1-checkbox__input:hover ~ .ui-v1-checkbox__checkmark,
393
+ .ui-v1-checkbox_indeterminate .ui-v1-checkbox__input:active ~ .ui-v1-checkbox__checkmark {
394
+ border-color: #005EEB;
395
+ background: #005EEB url("data:image/svg+xml,%3csvg width='12' height='4' viewBox='0 0 12 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.583415 3.04165C0.353296 3.04165 0.166748 2.80846 0.166748 2.52081V1.47915C0.166748 1.1915 0.353296 0.958313 0.583415 0.958313H11.4167C11.6469 0.958313 11.8334 1.1915 11.8334 1.47915V2.52081C11.8334 2.80846 11.6469 3.04165 11.4167 3.04165H0.583415Z' fill='white'/%3e %3c/svg%3e") no-repeat center !important;
396
+ }
397
+ .ui-v1-checkbox_disabled.ui-v1-checkbox_indeterminate .ui-v1-checkbox__checkmark,
398
+ .ui-v1-checkbox_disabled.ui-v1-checkbox_indeterminate .ui-v1-checkbox__input:hover ~ .ui-v1-checkbox__checkmark,
399
+ .ui-v1-checkbox_disabled.ui-v1-checkbox_indeterminate .ui-v1-checkbox__input:active ~ .ui-v1-checkbox__checkmark {
400
+ background-color: #B8DBFF !important;
401
+ border-color: #B8DBFF;
402
+ box-shadow: none;
403
+ }
404
+ .ui-v1-checkbox_small .ui-v1-checkbox__checkmark {
405
+ width: 16px;
406
+ min-width: 16px;
407
+ height: 16px;
408
+ }
409
+ .ui-v1-checkbox_small.ui-v1-checkbox_indeterminate .ui-v1-checkbox__checkmark {
410
+ background-size: 8px 4px !important;
411
+ }
412
+ .ui-v1-checkbox__checkmark-icon {
413
+ width: 22px;
414
+ height: 22px;
415
+ margin-left: -3px;
416
+ margin-top: -3px;
417
+ }
418
+ .ui-v1-checkbox_small .ui-v1-checkbox__checkmark-icon {
419
+ width: 16px;
420
+ height: 16px;
421
+ margin-left: -2px;
422
+ margin-top: -2px;
423
+ }
319
424
  .ui-v1-error {
320
425
  color: #FF5353;
321
426
  font-size: 14px;
package/dist/host.d.ts CHANGED
@@ -249,6 +249,8 @@ export declare const ModalPlugin: Plugin_2;
249
249
 
250
250
  declare type Numeric = number | string;
251
251
 
252
+ declare type Primitive = boolean | number | string | null | undefined;
253
+
252
254
  declare type ResolveProps<PropsOrPropOptions, E extends EmitsOptions> = Readonly<PropsOrPropOptions extends ComponentPropsOptions ? ExtractPropTypes<PropsOrPropOptions> : PropsOrPropOptions> & (Record<string, never> extends E ? Record<string, never> : EmitsToProps<E>);
253
255
 
254
256
  declare enum SCROLLING {
@@ -318,6 +320,26 @@ declare type UiButtonProperties = {
318
320
  locked?: boolean;
319
321
  };
320
322
 
323
+ export declare const UiCheckbox: DefineComponent<UiCheckboxProperties, UiCheckboxMethods>;
324
+
325
+ declare type UiCheckboxMethods = {
326
+ click(): void;
327
+ focus(): void;
328
+ blur(): void;
329
+ };
330
+
331
+ declare type UiCheckboxProperties = {
332
+ id?: string | undefined;
333
+ name?: string;
334
+ model?: Primitive | Primitive[];
335
+ value?: Primitive;
336
+ indeterminate?: boolean;
337
+ valueOfTruthy?: Primitive;
338
+ valueOfFalsy?: Primitive;
339
+ small?: boolean;
340
+ disabled?: boolean;
341
+ };
342
+
321
343
  export declare const UiError: DefineComponent<UiErrorProperties>;
322
344
 
323
345
  declare type UiErrorProperties = {
package/dist/host.js CHANGED
@@ -1,7 +1,7 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
3
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
- import { Text, Comment, defineComponent, ref, h, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createTextVNode, toDisplayString, createElementVNode, mergeProps, createVNode, createCommentVNode, createBlock, Transition, withCtx, resolveDynamicComponent, normalizeProps, guardReactiveProps, normalizeStyle, reactive, inject, computed, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, useAttrs, useSlots, Teleport, withDirectives, vShow, toHandlers, withModifiers, provide, createSlots } from "vue";
4
+ import { Text, Comment, defineComponent, ref, h, openBlock, createElementBlock, createElementVNode, computed, mergeProps, unref, createBlock, createCommentVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, createVNode, Transition, withCtx, resolveDynamicComponent, normalizeProps, guardReactiveProps, normalizeStyle, reactive, inject, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, useAttrs, useSlots, Teleport, withDirectives, vShow, toHandlers, withModifiers, provide, createSlots } from "vue";
5
5
  const isURL = (href) => {
6
6
  try {
7
7
  new URL(href);
@@ -58,7 +58,7 @@ var VARIANT = /* @__PURE__ */ ((VARIANT2) => {
58
58
  VARIANT2["DANGER"] = "danger";
59
59
  return VARIANT2;
60
60
  })(VARIANT || {});
61
- const _sfc_main$d = defineComponent({
61
+ const _sfc_main$e = defineComponent({
62
62
  props: {
63
63
  /** Устанавливает тип кнопки */
64
64
  type: {
@@ -154,6 +154,172 @@ const _sfc_main$d = defineComponent({
154
154
  };
155
155
  }
156
156
  });
157
+ const _hoisted_1$9 = {
158
+ xmlns: "http://www.w3.org/2000/svg",
159
+ viewBox: "0 0 24 24"
160
+ };
161
+ function render$4(_ctx, _cache) {
162
+ return openBlock(), createElementBlock("svg", _hoisted_1$9, _cache[0] || (_cache[0] = [
163
+ createElementVNode("path", {
164
+ fill: "currentColor",
165
+ "fill-rule": "evenodd",
166
+ d: "M19.793 6.965a.77.77 0 0 1-.022 1.075l-9.815 9.607a1.224 1.224 0 0 1-1.714.006l-4.01-3.878a.77.77 0 0 1-.028-1.074l.684-.736a.735.735 0 0 1 1.053-.028l3.15 3.046 8.96-8.771a.735.735 0 0 1 1.054.022z",
167
+ "clip-rule": "evenodd"
168
+ }, null, -1)
169
+ ]));
170
+ }
171
+ const IconDone = { render: render$4 };
172
+ const expect = (value) => ({
173
+ toBeOneOf(variants) {
174
+ return Object.values(variants).includes(value);
175
+ }
176
+ });
177
+ const pick = (attrs, criteria) => {
178
+ return Object.keys(attrs).filter(criteria).reduce((picked, key) => ({
179
+ ...picked,
180
+ [key]: attrs[key]
181
+ }), {});
182
+ };
183
+ const without = (obj, exclude) => {
184
+ const newObj = {};
185
+ Object.entries(obj).forEach(([key, value]) => {
186
+ if (!exclude.includes(key)) {
187
+ newObj[key] = value;
188
+ }
189
+ });
190
+ return newObj;
191
+ };
192
+ const _hoisted_1$8 = ["id", "value", "name", "disabled", "checked"];
193
+ const _hoisted_2$3 = { class: "ui-v1-checkbox__checkmark" };
194
+ let counter$1 = 0;
195
+ const __default__ = {};
196
+ const _sfc_main$d = /* @__PURE__ */ defineComponent({
197
+ ...__default__,
198
+ __name: "UiCheckbox",
199
+ props: {
200
+ id: {
201
+ type: null,
202
+ validator: (id) => id === void 0 || typeof id === "string" && id.length > 0 && /^[A-Za-z]/.test(id),
203
+ default: void 0
204
+ },
205
+ /** Атрибут name нативного поля ввода */
206
+ name: {
207
+ type: String,
208
+ default: () => "ui-v1-checkbox-" + ++counter$1
209
+ },
210
+ /** Значение модели используемое с директивой v-model */
211
+ model: {
212
+ type: null,
213
+ default: void 0
214
+ },
215
+ /** Значение, добавляемое или удаляемое из модели в зависимости от флага checked, если модель является массивом */
216
+ value: {
217
+ type: null,
218
+ default: void 0
219
+ },
220
+ /** Задает значение, если флаг checked равен true, а модель не является массивом */
221
+ valueOfTruthy: {
222
+ type: null,
223
+ default: true
224
+ },
225
+ /** Задает значение, если флаг checked равен false, а модель не является массивом */
226
+ valueOfFalsy: {
227
+ type: null,
228
+ default: false
229
+ },
230
+ /** Задает "состояние" неопределенности для бокса, чье состояние "включенности" зависит от множества других боксов */
231
+ indeterminate: {
232
+ type: Boolean,
233
+ default: false
234
+ },
235
+ /** Задает стили для бокса уменьшенного размера */
236
+ small: {
237
+ type: Boolean,
238
+ default: false
239
+ },
240
+ /** Заблокированный */
241
+ disabled: {
242
+ type: Boolean,
243
+ default: false
244
+ }
245
+ },
246
+ emits: [
247
+ /** Изменение значения модели */
248
+ "change",
249
+ /** Изменение значения модели. Для v-model */
250
+ "update:model"
251
+ ],
252
+ setup(__props, { expose: __expose, emit: __emit }) {
253
+ const isArray = Array.isArray;
254
+ const props = __props;
255
+ const emit = __emit;
256
+ const checkbox = ref(null);
257
+ const click = () => {
258
+ var _a;
259
+ return (_a = checkbox.value) == null ? void 0 : _a.click();
260
+ };
261
+ const focus = () => {
262
+ var _a;
263
+ return (_a = checkbox.value) == null ? void 0 : _a.focus();
264
+ };
265
+ const blur = () => {
266
+ var _a;
267
+ return (_a = checkbox.value) == null ? void 0 : _a.blur();
268
+ };
269
+ __expose({
270
+ click,
271
+ focus,
272
+ blur
273
+ });
274
+ const contains = (array, value) => array.some((v) => v === value);
275
+ const checked = computed(() => {
276
+ return isArray(props.model) ? contains(props.model, props.value) : props.model === props.valueOfTruthy;
277
+ });
278
+ const calculate = (checked2) => {
279
+ if (isArray(props.model)) {
280
+ return checked2 ? contains(props.model, props.value) ? props.model : [...props.model, props.value] : [...props.model].filter((v) => v !== props.value);
281
+ }
282
+ return checked2 ? props.valueOfTruthy : props.valueOfFalsy;
283
+ };
284
+ const onChange = (event) => {
285
+ const checkbox2 = event.target;
286
+ const value = calculate(checkbox2.checked);
287
+ emit("change", value);
288
+ emit("update:model", value);
289
+ };
290
+ return (_ctx, _cache) => {
291
+ return openBlock(), createElementBlock("span", mergeProps({
292
+ class: {
293
+ "ui-v1-checkbox": true,
294
+ "ui-v1-checkbox_small": __props.small,
295
+ "ui-v1-checkbox_checked": checked.value,
296
+ "ui-v1-checkbox_indeterminate": __props.indeterminate,
297
+ "ui-v1-checkbox_disabled": __props.disabled
298
+ }
299
+ }, unref(pick)(_ctx.$attrs, (key) => !key.startsWith("aria-") && !key.startsWith("on"))), [
300
+ createElementVNode("input", mergeProps({
301
+ id: __props.id,
302
+ ref_key: "checkbox",
303
+ ref: checkbox,
304
+ value: unref(isArray)(__props.model) ? __props.value : void 0,
305
+ name: __props.name,
306
+ disabled: __props.disabled,
307
+ checked: checked.value
308
+ }, unref(pick)(_ctx.$attrs, (key) => key.startsWith("aria-") || key.startsWith("on")), {
309
+ type: "checkbox",
310
+ class: "ui-v1-checkbox__input",
311
+ onChange
312
+ }), null, 16, _hoisted_1$8),
313
+ createElementVNode("span", _hoisted_2$3, [
314
+ checked.value && !__props.indeterminate ? (openBlock(), createBlock(unref(IconDone), {
315
+ key: 0,
316
+ class: "ui-v1-checkbox__checkmark-icon"
317
+ })) : createCommentVNode("", true)
318
+ ])
319
+ ], 16);
320
+ };
321
+ }
322
+ });
157
323
  var ALIGN = /* @__PURE__ */ ((ALIGN2) => {
158
324
  ALIGN2["LEFT"] = "left";
159
325
  ALIGN2["RIGHT"] = "right";
@@ -2043,20 +2209,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
2043
2209
  };
2044
2210
  }
2045
2211
  });
2046
- const expect = (value) => ({
2047
- toBeOneOf(variants) {
2048
- return Object.values(variants).includes(value);
2049
- }
2050
- });
2051
- const without = (obj, exclude) => {
2052
- const newObj = {};
2053
- Object.entries(obj).forEach(([key, value]) => {
2054
- if (!exclude.includes(key)) {
2055
- newObj[key] = value;
2056
- }
2057
- });
2058
- return newObj;
2059
- };
2060
2212
  var APPEARANCE = /* @__PURE__ */ ((APPEARANCE2) => {
2061
2213
  APPEARANCE2["ALERT"] = "alert";
2062
2214
  APPEARANCE2["DIALOG"] = "dialog";
@@ -2964,7 +3116,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
2964
3116
  return SIZE$4.SM;
2965
3117
  });
2966
3118
  return (_ctx, _cache) => {
2967
- return openBlock(), createBlock(_sfc_main$d, mergeProps({
3119
+ return openBlock(), createBlock(_sfc_main$e, mergeProps({
2968
3120
  ref_key: "root",
2969
3121
  ref: root,
2970
3122
  href: __props.href,
@@ -3236,7 +3388,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
3236
3388
  export {
3237
3389
  plugin as I18nPlugin,
3238
3390
  plugin$1 as ModalPlugin,
3239
- _sfc_main$d as UiButton,
3391
+ _sfc_main$e as UiButton,
3392
+ _sfc_main$d as UiCheckbox,
3240
3393
  _sfc_main$c as UiError,
3241
3394
  _sfc_main$b as UiLink,
3242
3395
  _sfc_main$9 as UiLoader,
package/dist/remote.cjs CHANGED
@@ -47,6 +47,11 @@ const UiButton = defineRemoteComponent(
47
47
  UiButtonType,
48
48
  ["click", "focus", "blur"]
49
49
  );
50
+ const UiCheckboxType = "UiCheckbox";
51
+ const UiCheckbox = defineRemoteComponent(
52
+ UiCheckboxType,
53
+ ["click", "focus", "blur"]
54
+ );
50
55
  const UiErrorType = "UiError";
51
56
  const UiError = defineRemoteComponent(
52
57
  UiErrorType,
@@ -122,6 +127,11 @@ const UiModalWindowSurface = defineRemoteComponent(
122
127
  "update:overlapped"
123
128
  ]
124
129
  );
130
+ const UiRadioType = "UiRadio";
131
+ const UiRadio = defineRemoteComponent(
132
+ UiRadioType,
133
+ ["click", "focus", "blur"]
134
+ );
125
135
  const UiScrollBoxType = "UiScrollBox";
126
136
  const UiScrollBox = defineRemoteComponent(
127
137
  UiScrollBoxType,
@@ -160,6 +170,8 @@ const UiYandexMap = defineRemoteComponent(
160
170
  );
161
171
  exports.UiButton = UiButton;
162
172
  exports.UiButtonType = UiButtonType;
173
+ exports.UiCheckbox = UiCheckbox;
174
+ exports.UiCheckboxType = UiCheckboxType;
163
175
  exports.UiError = UiError;
164
176
  exports.UiErrorType = UiErrorType;
165
177
  exports.UiLink = UiLink;
@@ -172,6 +184,8 @@ exports.UiModalWindow = UiModalWindow;
172
184
  exports.UiModalWindowSurface = UiModalWindowSurface;
173
185
  exports.UiModalWindowSurfaceType = UiModalWindowSurfaceType;
174
186
  exports.UiModalWindowType = UiModalWindowType;
187
+ exports.UiRadio = UiRadio;
188
+ exports.UiRadioType = UiRadioType;
175
189
  exports.UiScrollBox = UiScrollBox;
176
190
  exports.UiScrollBoxType = UiScrollBoxType;
177
191
  exports.UiTag = UiTag;
package/dist/remote.d.ts CHANGED
@@ -47,6 +47,8 @@ declare enum DIRECTION {
47
47
 
48
48
  declare type Numeric = number | string;
49
49
 
50
+ declare type Primitive = boolean | number | string | null | undefined;
51
+
50
52
  declare type RemoteProperties<T> = HTMLAttributes & T & Record<string, never>;
51
53
 
52
54
  declare enum SCROLLING {
@@ -124,6 +126,38 @@ declare type UiButtonProperties = {
124
126
 
125
127
  export declare const UiButtonType: SchemaType<"UiButton", RemoteProperties<UiButtonProperties>, RemoteCallable<UiButtonMethods>>;
126
128
 
129
+ export declare const UiCheckbox: Component< {
130
+ [x: string]: unknown;
131
+ }, RemoteProperties<UiCheckboxProperties>, {
132
+ [x: string]: never;
133
+ }, {
134
+ [x: string]: never;
135
+ }, MethodOptions, {
136
+ click: (event: SerializedEvent) => boolean;
137
+ focus: (event: SerializedFocusEvent) => boolean;
138
+ blur: (event: SerializedEvent) => boolean;
139
+ }>;
140
+
141
+ declare type UiCheckboxMethods = {
142
+ click(): void;
143
+ focus(): void;
144
+ blur(): void;
145
+ };
146
+
147
+ declare type UiCheckboxProperties = {
148
+ id?: string | undefined;
149
+ name?: string;
150
+ model?: Primitive | Primitive[];
151
+ value?: Primitive;
152
+ indeterminate?: boolean;
153
+ valueOfTruthy?: Primitive;
154
+ valueOfFalsy?: Primitive;
155
+ small?: boolean;
156
+ disabled?: boolean;
157
+ };
158
+
159
+ export declare const UiCheckboxType: SchemaType<"UiCheckbox", RemoteProperties<UiCheckboxProperties>, RemoteCallable<UiCheckboxMethods>>;
160
+
127
161
  export declare const UiError: Component< {
128
162
  [x: string]: unknown;
129
163
  }, RemoteProperties<UiErrorProperties>, {
@@ -287,6 +321,34 @@ export declare const UiModalWindowSurfaceType: SchemaType<"UiModalWindowSurface"
287
321
 
288
322
  export declare const UiModalWindowType: SchemaType<"UiModalWindow", RemoteProperties<UiModalWindowProperties>, RemoteCallable<UiModalWindowMethods>>;
289
323
 
324
+ export declare const UiRadio: Component< {
325
+ [x: string]: unknown;
326
+ }, RemoteProperties<UiRadioProperties>, {
327
+ [x: string]: never;
328
+ }, {
329
+ [x: string]: never;
330
+ }, MethodOptions, {
331
+ click: (event: SerializedEvent) => boolean;
332
+ focus: (event: SerializedFocusEvent) => boolean;
333
+ blur: (event: SerializedEvent) => boolean;
334
+ }>;
335
+
336
+ declare type UiRadioMethods = {
337
+ click(): void;
338
+ focus(): void;
339
+ blur(): void;
340
+ };
341
+
342
+ declare type UiRadioProperties = {
343
+ id?: string | undefined;
344
+ name?: string;
345
+ model?: Primitive | Primitive[];
346
+ value?: Primitive;
347
+ disabled?: boolean;
348
+ };
349
+
350
+ export declare const UiRadioType: SchemaType<"UiRadio", RemoteProperties<UiRadioProperties>, RemoteCallable<UiRadioMethods>>;
351
+
290
352
  export declare const UiScrollBox: Component< {
291
353
  [x: string]: unknown;
292
354
  }, RemoteProperties<UiScrollBoxProperties>, {
package/dist/remote.js CHANGED
@@ -45,6 +45,11 @@ const UiButton = defineRemoteComponent(
45
45
  UiButtonType,
46
46
  ["click", "focus", "blur"]
47
47
  );
48
+ const UiCheckboxType = "UiCheckbox";
49
+ const UiCheckbox = defineRemoteComponent(
50
+ UiCheckboxType,
51
+ ["click", "focus", "blur"]
52
+ );
48
53
  const UiErrorType = "UiError";
49
54
  const UiError = defineRemoteComponent(
50
55
  UiErrorType,
@@ -120,6 +125,11 @@ const UiModalWindowSurface = defineRemoteComponent(
120
125
  "update:overlapped"
121
126
  ]
122
127
  );
128
+ const UiRadioType = "UiRadio";
129
+ const UiRadio = defineRemoteComponent(
130
+ UiRadioType,
131
+ ["click", "focus", "blur"]
132
+ );
123
133
  const UiScrollBoxType = "UiScrollBox";
124
134
  const UiScrollBox = defineRemoteComponent(
125
135
  UiScrollBoxType,
@@ -159,6 +169,8 @@ const UiYandexMap = defineRemoteComponent(
159
169
  export {
160
170
  UiButton,
161
171
  UiButtonType,
172
+ UiCheckbox,
173
+ UiCheckboxType,
162
174
  UiError,
163
175
  UiErrorType,
164
176
  UiLink,
@@ -171,6 +183,8 @@ export {
171
183
  UiModalWindowSurface,
172
184
  UiModalWindowSurfaceType,
173
185
  UiModalWindowType,
186
+ UiRadio,
187
+ UiRadioType,
174
188
  UiScrollBox,
175
189
  UiScrollBoxType,
176
190
  UiTag,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@retailcrm/embed-ui-v1-components",
3
3
  "type": "module",
4
- "version": "0.5.1",
4
+ "version": "0.5.2-alpha.1",
5
5
  "license": "MIT",
6
6
  "author": "RetailDriverLLC <integration@retailcrm.ru>",
7
7
  "repository": "git@github.com:retailcrm/embed-ui.git",