@vueland/ui 0.0.1 → 0.0.2

package/dist/components/CCheckbox/CCheckbox.js

@@ -1,23 +1,16 @@
-import { defineComponent, useModel, computed, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, normalizeClass, renderSlot, createVNode, withMemo, createTextVNode, toDisplayString, mergeModels } from 'vue';
+import { defineComponent, useModel, resolveComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createElementBlock, toDisplayString, renderSlot, mergeModels } from 'vue';
+import _sfc_main$2 from './CheckboxElement.js';
 import _sfc_main$1 from '../CSelectControl/CSelectControl.js';
-import _sfc_main$2 from '../CIcon/CIcon.js';
-import { useValidate } from '../../composables/use-validate.js';
-import { useForm } from '../../composables/use-form.js';
-import { IconAliases } from '../../enums/IconName.js';
-import { CLabel } from '../CLabel/CLabel.js';
 
-const _hoisted_1 = ["aria-checked", "aria-disabled", "onClick"];
-const _hoisted_2 = { class: "c-checkbox__icon" };
-const _hoisted_3 = { class: "c-checkbox__label" };
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
-    name: "CCheckbox"
+    name: "CCheckbox",
+    inheritAttrs: false
   },
   __name: "CCheckbox",
   props: /* @__PURE__ */ mergeModels({
-    rules: {},
     modelValue: { type: [Array, Boolean] },
-    label: {},
+    value: {},
     size: {}
   }, {
     "modelValue": {},
@@ -25,56 +18,45 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
     const model = useModel(__props, "modelValue");
-    const { validate, errors } = useValidate(props, {});
-    const form = useForm();
-    const { CHECKBOX_ON, CHECKBOX_OFF } = IconAliases;
-    const classes = computed(() => ({
-      "c-checkbox--error": errors.hasError
-    }));
-    onMounted(() => {
-      form == null ? void 0 : form.add(validate);
-    });
-    onBeforeUnmount(() => {
-      form == null ? void 0 : form.remove(validate);
-    });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1), mergeProps(_ctx.$attrs, {
+      const _component_c_input = resolveComponent("c-input");
+      return openBlock(), createBlock(unref(_sfc_main$1), mergeProps({
         modelValue: model.value,
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event)
-      }), {
-        default: withCtx(({ checked, toggle, disabled }) => [
-          createElementVNode("div", {
-            class: normalizeClass(["c-checkbox", classes.value]),
-            role: "checkbox",
-            "aria-checked": checked,
-            "aria-disabled": disabled,
-            onClick: toggle
-          }, [
-            createElementVNode("div", _hoisted_2, [
-              renderSlot(_ctx.$slots, "icon", { checked }, () => [
-                createVNode(unref(_sfc_main$2), {
-                  name: checked ? unref(CHECKBOX_ON) : unref(CHECKBOX_OFF)
-                }, null, 8, ["name"])
-              ])
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event)
+      }, _ctx.$attrs), {
+        default: withCtx(({ checked, toggle }) => [
+          createVNode(_component_c_input, mergeProps({ "model-value": model.value }, _ctx.$attrs, { kind: "checkbox" }), {
+            field: withCtx(({ uid, label, attrs, hasError, readonly, disabled }) => [
+              createVNode(_sfc_main$2, mergeProps({
+                id: uid,
+                error: hasError,
+                label,
+                checked,
+                readonly,
+                disabled
+              }, attrs, { onToggle: toggle }), {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 16, ["id", "error", "label", "checked", "readonly", "disabled", "onToggle"])
             ]),
-            createElementVNode("div", _hoisted_3, [
-              renderSlot(_ctx.$slots, "default", {}, () => [
-                withMemo([__props.label], () => createVNode(unref(CLabel), null, {
-                  default: withCtx(() => [
-                    createTextVNode(
-                      toDisplayString(__props.label),
-                      1
-                      /* TEXT */
-                    )
-                  ]),
-                  _: 1
-                  /* STABLE */
-                }), _cache, 0)
-              ])
-            ])
-          ], 10, _hoisted_1)
+            details: withCtx(({ errorMessage, details }) => [
+              (openBlock(), createElementBlock(
+                "span",
+                {
+                  key: errorMessage || details
+                },
+                toDisplayString(errorMessage || details),
+                1
+                /* TEXT */
+              ))
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1040, ["model-value"])
         ]),
         _: 3
         /* FORWARDED */

package/dist/components/CCheckbox/CheckboxElement.js

@@ -0,0 +1,96 @@
+import { defineComponent, useModel, computed, unref, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, mergeProps, withMemo, withCtx, createTextVNode, toDisplayString, mergeModels } from 'vue';
+import _sfc_main$1 from '../CIcon/CIcon.js';
+import { IconAliases } from '../../enums/IconName.js';
+import { CLabel } from '../CLabel/CLabel.js';
+
+const _hoisted_1 = {
+  class: "c-checkbox__icon",
+  "aria-hidden": "true"
+};
+const _hoisted_2 = ["id", "checked", "disabled", "readonly"];
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "CheckboxElement",
+  props: /* @__PURE__ */ mergeModels({
+    error: { type: Boolean },
+    checked: { type: Boolean },
+    label: {},
+    id: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean }
+  }, {
+    "focused": { type: Boolean, ...{ default: false } },
+    "focusedModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["toggle"], ["update:focused"]),
+  setup(__props) {
+    const props = __props;
+    const focused = useModel(__props, "focused");
+    const isCheckable = computed(() => !props.readonly && !props.disabled);
+    const { CHECKBOX_ON, CHECKBOX_OFF } = IconAliases;
+    const classes = computed(() => ({
+      "c-checkbox--default": !unref(focused) && !props.error && unref(isCheckable) && !props.checked,
+      "c-checkbox--focused": unref(focused),
+      "c-checkbox--disabled": props.disabled,
+      "c-checkbox--checked": props.checked,
+      "c-checkbox--readonly": props.readonly,
+      "c-checkbox--error": props.error
+    }));
+    function focus() {
+      focused.value = true;
+    }
+    function blur() {
+      focused.value = false;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(["c-checkbox", classes.value])
+        },
+        [
+          createElementVNode("div", _hoisted_1, [
+            renderSlot(_ctx.$slots, "icon", { checked: __props.checked }, () => [
+              createVNode(unref(_sfc_main$1), {
+                name: __props.checked ? unref(CHECKBOX_ON) : unref(CHECKBOX_OFF)
+              }, null, 8, ["name"])
+            ])
+          ]),
+          createElementVNode("input", mergeProps({
+            id: __props.id,
+            type: "checkbox",
+            checked: __props.checked
+          }, _ctx.$attrs, {
+            disabled: __props.disabled,
+            readonly: __props.readonly,
+            onFocus: focus,
+            onBlur: blur,
+            onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("toggle"))
+          }), null, 16, _hoisted_2),
+          withMemo([__props.label], () => createVNode(unref(CLabel), {
+            id: `${__props.id}-label`,
+            class: "c-checkbox__label",
+            tag: "label",
+            for: __props.id
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                createTextVNode(
+                  toDisplayString(__props.label),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["id", "for"]), _cache, 1)
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CCheckbox/index2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './CheckboxElement.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/CChip/CChip.js

@@ -0,0 +1,13 @@
+import { openBlock, createElementBlock, renderSlot } from 'vue';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
+
+const _sfc_main = {};
+const _hoisted_1 = { class: "c-chip" };
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var CChip = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { CChip as default };

package/dist/components/CDateInput/CDateInput.js

@@ -0,0 +1,246 @@
+import { defineComponent, useModel, ref, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createSlots, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, createElementBlock, mergeModels } from 'vue';
+import { datePickerValueToString } from '../CDatePicker/index.js';
+import _sfc_main$1 from '../CInput/CInput.js';
+import _sfc_main$2 from '../CMenu/CMenu.js';
+import _sfc_main$3 from '../CDatePicker/CDatePicker.js';
+import _sfc_main$4 from '../CField/CField.js';
+import _sfc_main$5 from '../CIcon/CIcon.js';
+import { IconAliases } from '../../enums/IconName.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CDateInput",
+    inheritAttrs: false
+  },
+  __name: "CDateInput",
+  props: /* @__PURE__ */ mergeModels({
+    rules: {},
+    validateOn: {},
+    preset: {},
+    modelValue: {},
+    label: {},
+    details: {},
+    noDetails: { type: Boolean },
+    clearable: { type: Boolean },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    typeable: { type: Boolean },
+    placeholder: {},
+    lang: {},
+    format: {},
+    mondayFirst: { type: Boolean },
+    disabledDates: {},
+    highlightedDates: {},
+    minDate: {},
+    maxDate: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "focus", "blur"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const model = useModel(__props, "modelValue");
+    const menuOpen = ref(false);
+    const inputRef = ref();
+    const fieldRef = ref();
+    const displayValue = computed(
+      () => {
+        var _a, _b;
+        return datePickerValueToString(model.value, (_a = props.format) != null ? _a : "dd.MM.yyyy", (_b = props.lang) != null ? _b : "en");
+      }
+    );
+    function onDateSelect(value) {
+      model.value = value;
+      emit("update:modelValue", value);
+      menuOpen.value = false;
+    }
+    function onFieldClear() {
+      model.value = null;
+      emit("update:modelValue", null);
+    }
+    function onCloseMenu() {
+      unref(inputRef).blur();
+    }
+    function onTypeInput(val) {
+      if (!props.typeable) {
+        return;
+      }
+      const parsed = new Date(val);
+      if (!isNaN(parsed.getTime())) {
+        model.value = parsed;
+        emit("update:modelValue", parsed);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), mergeProps({
+        ref_key: "inputRef",
+        ref: inputRef,
+        "model-value": model.value
+      }, _ctx.$attrs, {
+        kind: "input",
+        label: __props.label,
+        details: __props.details,
+        "no-details": __props.noDetails,
+        clearable: __props.clearable,
+        disabled: __props.disabled,
+        readonly: __props.readonly,
+        rules: __props.rules,
+        "validate-on": __props.validateOn,
+        preset: __props.preset,
+        onFocus: _cache[2] || (_cache[2] = ($event) => emit("focus")),
+        onBlur: _cache[3] || (_cache[3] = ($event) => emit("blur"))
+      }), {
+        field: withCtx((field) => [
+          createVNode(unref(_sfc_main$2), {
+            modelValue: menuOpen.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => menuOpen.value = $event),
+            bottom: "",
+            "offset-y": 2,
+            width: 320,
+            "close-on-click-outside": "",
+            "close-on-content-click": false,
+            strategy: "reverse",
+            onClose: onCloseMenu
+          }, {
+            activator: withCtx(({ activator }) => [
+              createElementVNode(
+                "div",
+                mergeProps({ class: "c-date-input" }, activator),
+                [
+                  createVNode(unref(_sfc_main$4), mergeProps({
+                    id: field.uid,
+                    ref_key: "fieldRef",
+                    ref: fieldRef,
+                    "model-value": displayValue.value,
+                    label: field.label,
+                    preset: field.preset,
+                    focused: field.focused,
+                    error: field.hasError,
+                    clearable: field.clearable,
+                    readonly: field.readonly,
+                    "no-input": !__props.typeable,
+                    disabled: __props.disabled
+                  }, field.attrs, {
+                    "onUpdate:modelValue": onTypeInput,
+                    onFocus: () => {
+                      field.focus();
+                      if (!__props.typeable) menuOpen.value = true;
+                    },
+                    onClear: onFieldClear
+                  }), createSlots({
+                    prepend: withCtx(() => [
+                      _ctx.$slots.prepend ? renderSlot(_ctx.$slots, "prepend", { key: 0 }) : (openBlock(), createElementBlock("span", {
+                        key: 1,
+                        style: { "cursor": "pointer" },
+                        onClick: _cache[0] || (_cache[0] = ($event) => menuOpen.value = !menuOpen.value)
+                      }, [
+                        createVNode(unref(_sfc_main$5), {
+                          name: unref(IconAliases).CALENDAR,
+                          size: 18
+                        }, null, 8, ["name"])
+                      ]))
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, [
+                    _ctx.$slots.append ? {
+                      name: "append",
+                      fn: withCtx(() => [
+                        renderSlot(_ctx.$slots, "append")
+                      ]),
+                      key: "0"
+                    } : void 0
+                  ]), 1040, ["id", "model-value", "label", "preset", "focused", "error", "clearable", "readonly", "no-input", "disabled", "onFocus"])
+                ],
+                16
+                /* FULL_PROPS */
+              )
+            ]),
+            default: withCtx(() => [
+              createVNode(unref(_sfc_main$3), {
+                "model-value": model.value,
+                lang: __props.lang,
+                format: __props.format,
+                "monday-first": __props.mondayFirst,
+                "disabled-dates": __props.disabledDates,
+                "min-date": __props.minDate,
+                "max-date": __props.maxDate,
+                "highlighted-dates": __props.highlightedDates,
+                "onUpdate:modelValue": onDateSelect,
+                onSelected: onDateSelect
+              }, createSlots({
+                _: 2
+                /* DYNAMIC */
+              }, [
+                _ctx.$slots.date ? {
+                  name: "date",
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "date", normalizeProps(guardReactiveProps(slotProps)))
+                  ]),
+                  key: "0"
+                } : void 0,
+                _ctx.$slots.week ? {
+                  name: "week",
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "week", normalizeProps(guardReactiveProps(slotProps)))
+                  ]),
+                  key: "1"
+                } : void 0,
+                _ctx.$slots.dates ? {
+                  name: "dates",
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "dates", normalizeProps(guardReactiveProps(slotProps)))
+                  ]),
+                  key: "2"
+                } : void 0,
+                _ctx.$slots["before-header"] ? {
+                  name: "before-header",
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "before-header", normalizeProps(guardReactiveProps(slotProps)))
+                  ]),
+                  key: "3"
+                } : void 0,
+                _ctx.$slots.header ? {
+                  name: "header",
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(slotProps)))
+                  ]),
+                  key: "4"
+                } : void 0,
+                _ctx.$slots["before-body"] ? {
+                  name: "before-body",
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "before-body", normalizeProps(guardReactiveProps(slotProps)))
+                  ]),
+                  key: "5"
+                } : void 0,
+                _ctx.$slots.body ? {
+                  name: "body",
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "body", normalizeProps(guardReactiveProps(slotProps)))
+                  ]),
+                  key: "6"
+                } : void 0,
+                _ctx.$slots.footer ? {
+                  name: "footer",
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(slotProps)))
+                  ]),
+                  key: "7"
+                } : void 0
+              ]), 1032, ["model-value", "lang", "format", "monday-first", "disabled-dates", "min-date", "max-date", "highlighted-dates"])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1032, ["modelValue"])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["model-value", "label", "details", "no-details", "clearable", "disabled", "readonly", "rules", "validate-on", "preset"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CDateInput/index.js

@@ -0,0 +1,5 @@
+import _sfc_main from './CDateInput.js';
+
+
+
+export { _sfc_main as default };