@vueland/ui 0.0.1 → 0.0.3

package/dist/components/CDatePicker/CDatePickerMonths.js

@@ -0,0 +1,114 @@
+import { defineComponent, computed, openBlock, createElementBlock, renderSlot, Fragment, renderList, mergeProps, normalizeClass, toDisplayString } from 'vue';
+
+const _hoisted_1 = { class: "c-date-picker-months" };
+const _hoisted_2 = ["onClick"];
+const CELLS_IN_ROW = 3;
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "CDatePickerMonths" },
+  __name: "CDatePickerMonths",
+  props: {
+    month: {},
+    year: {},
+    locale: {},
+    minDate: {},
+    maxDate: {}
+  },
+  emits: ["update:month", "update:year"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+    const CURRENT_YEAR = (/* @__PURE__ */ new Date()).getFullYear();
+    const CURRENT_MONTH = (/* @__PURE__ */ new Date()).getMonth();
+    function isDisabled(m) {
+      if (props.minDate) {
+        if (props.year < props.minDate.year) return true;
+        if (props.year === props.minDate.year && m < props.minDate.month) return true;
+      }
+      if (props.maxDate) {
+        if (props.year > props.maxDate.year) return true;
+        if (props.year === props.maxDate.year && m > props.maxDate.month) return true;
+      }
+      return false;
+    }
+    const enrichedMonths = computed(
+      () => MONTHS.map((m) => {
+        var _a, _b;
+        return {
+          month: m,
+          label: (_b = (_a = props.locale) == null ? void 0 : _a[m]) != null ? _b : "",
+          disabled: isDisabled(m),
+          isSelected: m === props.month,
+          isCurrent: m === CURRENT_MONTH && props.year === CURRENT_YEAR,
+          onSelect: () => {
+            if (!isDisabled(m)) emit("update:month", m);
+          }
+        };
+      })
+    );
+    const rows = computed(() => {
+      const result = [];
+      for (let i = 0; i < enrichedMonths.value.length; i += CELLS_IN_ROW) {
+        result.push(enrichedMonths.value.slice(i, i + CELLS_IN_ROW));
+      }
+      return result;
+    });
+    __expose({
+      onNext: () => emit("update:year", props.year + 1),
+      onPrev: () => emit("update:year", props.year - 1)
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.$slots.months ? renderSlot(_ctx.$slots, "months", {
+          key: 0,
+          months: enrichedMonths.value
+        }) : (openBlock(true), createElementBlock(
+          Fragment,
+          { key: 1 },
+          renderList(rows.value, (row, ri) => {
+            return openBlock(), createElementBlock("div", {
+              key: ri,
+              class: "c-date-picker-months__row"
+            }, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(row, (item) => {
+                  return openBlock(), createElementBlock(
+                    Fragment,
+                    {
+                      key: item.month
+                    },
+                    [
+                      _ctx.$slots.month ? renderSlot(_ctx.$slots, "month", mergeProps({
+                        key: 0,
+                        ref_for: true
+                      }, item)) : (openBlock(), createElementBlock("div", {
+                        key: 1,
+                        class: normalizeClass([
+                          "c-date-picker-months__cell",
+                          item.isSelected && "c-date-picker-months__cell--selected",
+                          item.isCurrent && "c-date-picker-months__cell--current",
+                          item.disabled && "c-date-picker-months__cell--disabled"
+                        ]),
+                        onClick: item.onSelect
+                      }, toDisplayString(item.label), 11, _hoisted_2))
+                    ],
+                    64
+                    /* STABLE_FRAGMENT */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CDatePicker/CDatePickerYears.js

@@ -0,0 +1,143 @@
+import { defineComponent, shallowRef, computed, openBlock, createElementBlock, renderSlot, createBlock, Transition, withCtx, Fragment, renderList, mergeProps, normalizeClass, toDisplayString } from 'vue';
+import { isDef } from '../../helpers/index.js';
+
+const _hoisted_1 = { class: "c-date-picker-years" };
+const _hoisted_2 = ["onClick"];
+const CELLS_IN_ROW = 4;
+const ON_TABLE = 20;
+const LIMIT = 100;
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "CDatePickerYears" },
+  __name: "CDatePickerYears",
+  props: {
+    year: {},
+    minYear: {},
+    maxYear: {}
+  },
+  emits: ["update:year"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    var _a;
+    const props = __props;
+    const emit = __emit;
+    const CURRENT_YEAR = (/* @__PURE__ */ new Date()).getFullYear();
+    const allPages = [];
+    const fromYear = CURRENT_YEAR - LIMIT;
+    let page = [];
+    for (let i = 0; i <= LIMIT * 2; i++) {
+      page.push(fromYear + i);
+      if (page.length === ON_TABLE) {
+        allPages.push(page);
+        page = [];
+      }
+    }
+    if (page.length) allPages.push(page);
+    const pageIndex = shallowRef((_a = allPages.findIndex((p) => p.includes(props.year))) != null ? _a : 0);
+    const transitionName = shallowRef("c-date-slide-left");
+    const enrichedYears = computed(
+      () => {
+        var _a2;
+        return ((_a2 = allPages[pageIndex.value]) != null ? _a2 : []).map((y) => {
+          const disabled = isDef(props.minYear) && y < props.minYear || isDef(props.maxYear) && y > props.maxYear;
+          return {
+            year: y,
+            disabled,
+            isSelected: y === props.year,
+            isCurrent: y === CURRENT_YEAR,
+            onSelect: () => {
+              if (!disabled) emit("update:year", y);
+            }
+          };
+        });
+      }
+    );
+    const rows = computed(() => {
+      const result = [];
+      for (let i = 0; i < enrichedYears.value.length; i += CELLS_IN_ROW) {
+        result.push(enrichedYears.value.slice(i, i + CELLS_IN_ROW));
+      }
+      return result;
+    });
+    __expose({
+      onNext() {
+        if (pageIndex.value < allPages.length - 1) {
+          transitionName.value = "c-date-slide-left";
+          pageIndex.value++;
+        }
+      },
+      onPrev() {
+        if (pageIndex.value > 0) {
+          transitionName.value = "c-date-slide-right";
+          pageIndex.value--;
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.$slots.years ? renderSlot(_ctx.$slots, "years", {
+          key: 0,
+          years: enrichedYears.value
+        }) : (openBlock(), createBlock(Transition, {
+          key: 1,
+          name: transitionName.value,
+          mode: "out-in"
+        }, {
+          default: withCtx(() => [
+            (openBlock(), createElementBlock("div", {
+              key: pageIndex.value,
+              class: "c-date-picker-years__grid"
+            }, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(rows.value, (row, ri) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: ri,
+                    class: "c-date-picker-years__row"
+                  }, [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(row, (item) => {
+                        return openBlock(), createElementBlock(
+                          Fragment,
+                          {
+                            key: item.year
+                          },
+                          [
+                            _ctx.$slots.year ? renderSlot(_ctx.$slots, "year", mergeProps({
+                              key: 0,
+                              ref_for: true
+                            }, item)) : (openBlock(), createElementBlock("div", {
+                              key: 1,
+                              class: normalizeClass([
+                                "c-date-picker-years__cell",
+                                item.isSelected && "c-date-picker-years__cell--selected",
+                                item.isCurrent && "c-date-picker-years__cell--current",
+                                item.disabled && "c-date-picker-years__cell--disabled"
+                              ]),
+                              onClick: item.onSelect
+                            }, toDisplayString(item.year), 11, _hoisted_2))
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        );
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]))
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["name"]))
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CDatePicker/helpers.js

@@ -0,0 +1,17 @@
+import { getDay, getDate, getMonth, getFullYear } from './utils.js';
+
+function toDateString(date) {
+  return new Date(date.year, date.month, date.date);
+}
+function parseDate(selectedDate) {
+  const date = new Date(selectedDate);
+  return {
+    year: getFullYear(date),
+    month: getMonth(date),
+    date: getDate(date),
+    mls: date.getTime(),
+    day: getDay(date)
+  };
+}
+
+export { parseDate, toDateString };

package/dist/components/CDatePicker/index.js

@@ -0,0 +1,14 @@
+import { LOCALE } from './locales/index.js';
+import { formatDate } from './utils.js';
+
+function datePickerValueToString(value, format, lang) {
+  var _a;
+  if (!value) return "";
+  try {
+    return formatDate(new Date(value), format, (_a = LOCALE[lang]) != null ? _a : LOCALE["en"]);
+  } catch (e) {
+    return "";
+  }
+}
+
+export { datePickerValueToString };

package/dist/components/CDatePicker/index2.js

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

package/dist/components/CDatePicker/index3.js

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

package/dist/components/CDatePicker/index4.js

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

package/dist/components/CDatePicker/index5.js

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

package/dist/components/CDatePicker/index6.js

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

package/dist/components/CDatePicker/locales/en.json.js

@@ -0,0 +1,44 @@
+var months = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+var monthsAbbr = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+var week = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+var en = {
+	months: months,
+	monthsAbbr: monthsAbbr,
+	week: week
+};
+
+export { en as default, months, monthsAbbr, week };

package/dist/components/CDatePicker/locales/index.js

@@ -0,0 +1,9 @@
+import en from './en.json.js';
+import ru from './ru.json.js';
+
+const LOCALE = {
+  en,
+  ru
+};
+
+export { LOCALE };

package/dist/components/CDatePicker/locales/ru.json.js

@@ -0,0 +1,44 @@
+var months = [
+	"Январь",
+	"Февраль",
+	"Март",
+	"Апрель",
+	"Май",
+	"Июнь",
+	"Июль",
+	"Август",
+	"Сентябрь",
+	"Октябрь",
+	"Ноябрь",
+	"Декабрь"
+];
+var monthsAbbr = [
+	"Янв",
+	"Фев",
+	"Мар",
+	"Апр",
+	"Май",
+	"Июн",
+	"Июл",
+	"Авг",
+	"Сен",
+	"Окт",
+	"Ноя",
+	"Дек"
+];
+var week = [
+	"Вс",
+	"Пн",
+	"Вт",
+	"Ср",
+	"Чт",
+	"Пт",
+	"Сб"
+];
+var ru = {
+	months: months,
+	monthsAbbr: monthsAbbr,
+	week: week
+};
+
+export { ru as default, months, monthsAbbr, week };

package/dist/components/CDatePicker/utils.js

@@ -0,0 +1,20 @@
+function getMonth(date) {
+  return date.getMonth();
+}
+function getFullYear(date) {
+  return date.getFullYear();
+}
+function getDate(date) {
+  return date.getDate();
+}
+function getDay(date) {
+  return date.getDay();
+}
+function formatDate(date, format, locale) {
+  const year = getFullYear(date);
+  const month = getMonth(date) + 1;
+  const day = getDate(date);
+  return format.replace(/dd/, ("0" + day).slice(-2)).replace(/d/, `${day}`).replace(/yyyy/, `${year}`).replace(/yy/, String(year).slice(2)).replace(/MMMM/, locale.months[getMonth(date)]).replace(/MMM/, locale.monthsAbbr[getMonth(date)]).replace(/MM/, ("0" + month).slice(-2)).replace(/M(?!a|ä|e)/, `${month}`).replace(/D(?!e|é|i)/, locale.week[getDay(date)]);
+}
+
+export { formatDate, getDate, getDay, getFullYear, getMonth };

package/dist/components/CDialog/CDialog.js

@@ -5,9 +5,7 @@ import { vClickOutside } from '../../directives/v-click-outside.js';
 
 const _hoisted_1 = { class: "c-dialog__content" };
 var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "CDialog"
-  },
+  ...{ name: "CDialog" },
   __name: "CDialog",
   props: /* @__PURE__ */ mergeModels({
     modelValue: { type: Boolean },
@@ -20,8 +18,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     const props = __props;
-    const { blockScroll, unblockScroll } = useApplication();
     const model = useModel(__props, "modelValue");
+    const { blockScroll, unblockScroll } = useApplication();
     const onOutsideClick = () => {
       if (props.closeOnClickOutside) {
         model.value = false;

package/dist/components/CField/CField.js

@@ -1,49 +1,181 @@
-import { defineComponent, useModel, shallowRef, useAttrs, computed, unref, onMounted, openBlock, createBlock, resolveDynamicComponent, normalizeClass, mergeModels } from 'vue';
+import { defineComponent, useModel, shallowRef, useSlots, computed, unref, onMounted, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, renderSlot, createCommentVNode, createVNode, withCtx, createTextVNode, createBlock, resolveDynamicComponent, mergeProps, Transition, mergeModels } from 'vue';
+import { useFieldPresets } from '../../composables/use-field-presets.js';
+import { CLabel } from '../CLabel/CLabel.js';
+import _sfc_main$1 from '../CIcon/CIcon.js';
+import { IconAliases } from '../../enums/IconName.js';
 
+const _hoisted_1 = {
+  "aria-hidden": "true",
+  class: "c-field__outline"
+};
+const _hoisted_2 = { class: "c-field__outline-notch" };
+const _hoisted_3 = {
+  key: 0,
+  class: "c-field__prepend"
+};
+const _hoisted_4 = { class: "c-field__core" };
+const _hoisted_5 = {
+  key: 1,
+  class: "c-field__append"
+};
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
-    name: "CField"
+    name: "CField",
+    inheritAttrs: false
   },
   __name: "CField",
   props: /* @__PURE__ */ mergeModels({
-    tag: { default: "input" },
-    focused: { type: Boolean }
+    tag: {},
+    label: {},
+    filled: { type: Boolean },
+    preset: {},
+    focused: { type: Boolean },
+    clearable: { type: Boolean },
+    error: { type: Boolean },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    noInput: { type: Boolean },
+    modelValue: {}
   }, {
     "modelValue": {},
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["focus"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ mergeModels(["clear"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
+    const props = __props;
     const emit = __emit;
-    const input = useModel(__props, "modelValue");
+    const value = useModel(__props, "modelValue");
     const inputRef = shallowRef();
-    const attrs = useAttrs();
-    const classes = computed(() => ({
-      "c-field--focused": __props.focused,
-      "c-field--filled": !!unref(input)
-    }));
-    const onFocus = () => {
-      if (attrs.readonly || attrs.disabled) {
-        return;
+    const slots = useSlots();
+    const hasValue = computed(() => props.filled || !!unref(value));
+    const presets = useFieldPresets({
+      slots,
+      props,
+      hasValue
+    });
+    const clearable = computed(() => props.clearable && props.focused && unref(hasValue));
+    const classes = computed(() => [
+      {
+        "c-field--focused": props.focused,
+        "c-field--filled": unref(hasValue),
+        "c-field--has-prepend": !!slots.prepend,
+        "c-field--disabled": props.disabled,
+        "c-field--readonly": props.readonly,
+        "c-field--error": props.error,
+        "c-field--default": !props.focused && !props.error && !props.disabled
+      },
+      ...unref(presets).root
+    ]);
+    function clear() {
+      emit("clear");
+    }
+    function onInput(e) {
+      value.value = e.target.value;
+    }
+    function onMousedown(e) {
+      var _a;
+      e.preventDefault();
+      if (document.activeElement !== unref(inputRef)) {
+        (_a = unref(inputRef)) == null ? void 0 : _a.focus();
       }
-      emit("focus");
-    };
-    const onInput = (e) => {
-      input.value = e.target.value;
-    };
+    }
     onMounted(() => {
       var _a;
-      if (__props.focused) (_a = unref(inputRef)) == null ? void 0 : _a.focus();
+      if (props.focused) (_a = unref(inputRef)) == null ? void 0 : _a.focus();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-        ref_key: "inputRef",
-        ref: inputRef,
-        class: normalizeClass(["c-field", classes.value]),
-        value: input.value,
-        onInput,
-        onFocus
-      }, null, 40, ["class", "value"]);
+      var _a;
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(["c-field", classes.value]),
+          onMousedown
+        },
+        [
+          createElementVNode("div", _hoisted_1, [
+            _cache[0] || (_cache[0] = createElementVNode(
+              "div",
+              { class: "c-field__outline-start" },
+              null,
+              -1
+              /* CACHED */
+            )),
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode(
+                "span",
+                {
+                  class: normalizeClass(unref(presets).label)
+                },
+                toDisplayString(__props.label),
+                3
+                /* TEXT, CLASS */
+              )
+            ]),
+            _cache[1] || (_cache[1] = createElementVNode(
+              "div",
+              { class: "c-field__outline-end" },
+              null,
+              -1
+              /* CACHED */
+            ))
+          ]),
+          _ctx.$slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "prepend")
+          ])) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_4, [
+            createVNode(unref(CLabel), {
+              id: `${_ctx.$attrs.id}-label`,
+              for: _ctx.$attrs.id,
+              tag: "label",
+              class: normalizeClass(["c-field-label", unref(presets).label])
+            }, {
+              default: withCtx(() => [
+                createTextVNode(
+                  toDisplayString(__props.label),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["id", "for", "class"]),
+            renderSlot(_ctx.$slots, "before"),
+            (openBlock(), createBlock(resolveDynamicComponent((_a = __props.tag) != null ? _a : "input"), mergeProps(_ctx.$attrs, {
+              ref_key: "inputRef",
+              ref: inputRef,
+              value: value.value,
+              disabled: __props.disabled,
+              readonly: __props.readonly || __props.noInput,
+              class: ["c-field-input", unref(presets).input],
+              onInput
+            }), null, 16, ["value", "disabled", "readonly", "class"])),
+            renderSlot(_ctx.$slots, "after")
+          ]),
+          createVNode(Transition, { name: "fade" }, {
+            default: withCtx(() => [
+              clearable.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "c-field__clear",
+                onClick: clear
+              }, [
+                renderSlot(_ctx.$slots, "clear", {}, () => [
+                  createVNode(unref(_sfc_main$1), {
+                    name: unref(IconAliases).CLOSE,
+                    size: 24
+                  }, null, 8, ["name"])
+                ])
+              ])) : createCommentVNode("v-if", true)
+            ]),
+            _: 3
+            /* FORWARDED */
+          }),
+          _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            renderSlot(_ctx.$slots, "append")
+          ])) : createCommentVNode("v-if", true)
+        ],
+        34
+        /* CLASS, NEED_HYDRATION */
+      );
     };
   }
 });