@vueland/ui 0.0.1

package/dist/components/CGrid/CCol.js

@@ -0,0 +1,72 @@
+import { defineComponent, computed, h } from 'vue';
+import { isDef, toCamelCase } from '../../helpers/index.js';
+import { BREAKPOINTS } from '../../constants/breakpoints.js';
+
+const CCol = defineComponent({
+  name: "CCol",
+  props: {
+    order: {
+      type: [String, Number],
+      default: null
+    },
+    cols: {
+      type: [String, Number],
+      default: null
+    },
+    offset: {
+      type: [String, Number],
+      default: null
+    },
+    ...BREAKPOINTS.reduce((props, bp) => {
+      props[bp] = {
+        type: [String, Number],
+        default: null
+      };
+      props[`order-${bp}`] = {
+        type: [String, Number],
+        default: null
+      };
+      props[`offset-${bp}`] = {
+        type: [String, Number],
+        default: null
+      };
+      return props;
+    }, {})
+  },
+  setup(props, { slots }) {
+    const classes = computed(() => {
+      const cls = {
+        "c-col": true
+      };
+      if (isDef(props.cols)) {
+        cls[`c-col-${props.cols}`] = true;
+      }
+      if (isDef(props.order)) {
+        cls[`order-${props.order}`] = true;
+      }
+      if (isDef(props.offset)) {
+        cls[`offset-${props.offset}`] = true;
+      }
+      for (const bp of BREAKPOINTS) {
+        const orderVal = toCamelCase(...`order-${bp}`.split("-"));
+        const offsetVal = toCamelCase(...`offset-${bp}`.split("-"));
+        if (isDef(props[bp])) {
+          cls[`${bp}-${props[bp]}`] = true;
+        }
+        if (isDef(props[orderVal])) {
+          cls[`${bp}:order-${props[orderVal]}`] = true;
+        }
+        if (isDef(props[offsetVal])) {
+          cls[`${bp}:offset-${props[offsetVal]}`] = true;
+        }
+      }
+      return cls;
+    });
+    return () => {
+      var _a;
+      return h("div", { class: classes.value }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+  }
+});
+
+export { CCol };

package/dist/components/CGrid/CRow.js

@@ -0,0 +1,92 @@
+import { defineComponent, computed, h } from 'vue';
+import { isDef, toCamelCase } from '../../helpers/index.js';
+import { BREAKPOINTS } from '../../constants/breakpoints.js';
+
+const positions = ["start", "center", "end"];
+const justifyValues = [...positions, "space-between", "space-around"];
+const alignValues = [...positions, "baseline", "stretch"];
+const alignContentValues = [
+  ...positions,
+  "space-between",
+  "space-around",
+  "stretch"
+];
+const CRow = defineComponent({
+  name: "CRow",
+  props: {
+    align: {
+      type: String,
+      default: null,
+      validator: (value) => alignValues.includes(value)
+    },
+    alignContent: {
+      type: String,
+      default: null,
+      validator: (value) => alignContentValues.includes(value)
+    },
+    justify: {
+      type: String,
+      default: null,
+      validator: (value) => justifyValues.includes(value)
+    },
+    noGutter: Boolean,
+    ...BREAKPOINTS.reduce((props, bp) => {
+      props[`justify-${bp}`] = {
+        type: String,
+        default: null,
+        validator: (value) => justifyValues.includes(value)
+      };
+      props[`align-${bp}`] = {
+        type: String,
+        default: null,
+        validator: (value) => alignValues.includes(value)
+      };
+      props[`align-content-${bp}`] = {
+        type: String,
+        default: null,
+        validator: (value) => alignContentValues.includes(value)
+      };
+      return props;
+    }, {})
+  },
+  setup(props, { slots }) {
+    const classes = computed(() => {
+      const cls = {
+        "c-row": true
+      };
+      if (props.noGutter) {
+        cls["no-gutter"] = true;
+      }
+      if (isDef(props.justify)) {
+        cls[`justify-${props.justify}`] = true;
+      }
+      if (isDef(props.align)) {
+        cls[`align-${props.align}`] = true;
+      }
+      if (isDef(props.alignContent)) {
+        cls[`align-content-${props.alignContent}`] = true;
+      }
+      for (const bp of BREAKPOINTS) {
+        const justifyVal = toCamelCase(...`justify-${bp}`.split("-"));
+        const alignVal = toCamelCase(...`align-${bp}`.split("-"));
+        const contentVal = toCamelCase(...`align-content-${bp}`.split("-"));
+        if (isDef(props[justifyVal])) {
+          cls[`${bp}:justify-${props[justifyVal]}`] = true;
+        }
+        if (isDef(props[alignVal])) {
+          cls[`${bp}:align-${props[alignVal]}`] = true;
+        }
+        if (isDef(props[contentVal])) {
+          cls[`${bp}:align-content-${props[contentVal]}`] = true;
+        }
+      }
+      return cls;
+    });
+    return () => {
+      var _a;
+      return h("div", { class: classes.value }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+  }
+});
+
+export { CRow };

package/dist/components/CGrid/index.js

@@ -0,0 +1,5 @@
+import { createFunctionalComponent } from '../../utils/create-simple-functional.js';
+
+const CSpacer = createFunctionalComponent("c-spacer");
+
+export { CSpacer };

package/dist/components/CIcon/CIcon.js

@@ -0,0 +1,78 @@
+import { defineComponent, useAttrs, computed, unref, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, mergeProps, createElementBlock, createCommentVNode } from 'vue';
+import { useIcon } from '../../composables/use-icon.js';
+import { convertToUnit } from '../../utils/convert-to-unit.js';
+
+const _hoisted_1 = ["viewBox"];
+const _hoisted_2 = ["href"];
+const _hoisted_3 = ["innerHTML"];
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CIcon",
+    inheritAttrs: false
+  },
+  __name: "CIcon",
+  props: {
+    name: {},
+    source: {},
+    component: {},
+    body: {},
+    viewBox: {},
+    size: {},
+    width: {},
+    height: {},
+    tag: {},
+    spritePrefix: {},
+    spritePath: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { tag = "span" } = props;
+    const attrs = useAttrs();
+    const resolvedIcon = useIcon(props);
+    const rootStyle = computed(() => {
+      var _a, _b, _c, _d;
+      return {
+        width: convertToUnit(unref((_b = (_a = props.width) != null ? _a : props.size) != null ? _b : 16)),
+        height: convertToUnit(unref((_d = (_c = props.height) != null ? _c : props.size) != null ? _d : 16))
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(tag)), {
+        class: normalizeClass(["c-icon", { "c-icon--empty": !unref(resolvedIcon).found }]),
+        style: normalizeStyle(rootStyle.value)
+      }, {
+        default: withCtx(() => [
+          unref(resolvedIcon).found && unref(resolvedIcon).kind === "component" ? (openBlock(), createBlock(
+            resolveDynamicComponent(unref(resolvedIcon).component),
+            mergeProps({
+              key: 0,
+              class: "c-icon__component"
+            }, unref(attrs)),
+            null,
+            16
+            /* FULL_PROPS */
+          )) : unref(resolvedIcon).found ? (openBlock(), createElementBlock("svg", mergeProps({
+            key: 1,
+            class: "c-icon__svg",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: unref(resolvedIcon).viewBox,
+            fill: "currentColor",
+            focusable: "false"
+          }, unref(attrs)), [
+            unref(resolvedIcon).href ? (openBlock(), createElementBlock("use", {
+              key: 0,
+              href: unref(resolvedIcon).href
+            }, null, 8, _hoisted_2)) : (openBlock(), createElementBlock("g", {
+              key: 1,
+              innerHTML: unref(resolvedIcon).body
+            }, null, 8, _hoisted_3))
+          ], 16, _hoisted_1)) : createCommentVNode("v-if", true)
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["class", "style"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CIcon/index.js

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

package/dist/components/CInput/CInput.js

@@ -0,0 +1,176 @@
+import { defineComponent, useSlots, useAttrs, computed, unref, onBeforeMount, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode, mergeProps, withMemo, createVNode, withCtx, createTextVNode, toDisplayString } from 'vue';
+import { unique } from '../../helpers/index.js';
+import { useInputState } from '../../composables/use-input-state.js';
+import { useValidate } from '../../composables/use-validate.js';
+import { useForm } from '../../composables/use-form.js';
+import { useInputPresets } from '../../composables/use-input-presets.js';
+import { useFieldAttrs } from '../../composables/use-field-attrs.js';
+import { CLabel } from '../CLabel/CLabel.js';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "c-input__prepend"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "c-input__append"
+};
+const _hoisted_3 = ["id"];
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CInput",
+    inheritAttrs: false
+  },
+  __name: "CInput",
+  props: {
+    rules: {},
+    validateOn: {},
+    disabled: { type: Boolean },
+    focused: { type: Boolean },
+    readonly: { type: Boolean },
+    preset: {},
+    id: {},
+    modelValue: {},
+    label: {},
+    details: {},
+    noDetails: { type: Boolean },
+    clearable: { type: Boolean }
+  },
+  setup(__props, { expose: __expose }) {
+    var _a;
+    const props = __props;
+    const slots = useSlots();
+    const uid = `input-${(_a = props.id) != null ? _a : unique(6)}`;
+    const {
+      state,
+      onBlur,
+      onInput,
+      onFocus
+    } = useInputState(props);
+    const {
+      errors,
+      validate
+    } = useValidate(props, state);
+    const formApi = useForm();
+    const preset = useInputPresets({
+      props,
+      errors
+    });
+    const attrs = useAttrs();
+    const fieldAttrs = useFieldAttrs({ props, attrs, errors, uid });
+    const hasLabel = computed(() => !!slots.label || !!props.label);
+    const hasPrepend = computed(() => !!(slots == null ? void 0 : slots.prepend));
+    const hasAppend = computed(() => !!(slots == null ? void 0 : slots.append));
+    const hasDetails = computed(() => !props.noDetails && (props.details || !!(slots == null ? void 0 : slots.details)));
+    const classes = computed(() => [
+      {
+        "c-input--has-error": errors.hasError,
+        "c-input--default": !errors.hasError,
+        "c-input--focused": state.focused,
+        "c-input--disabled": props.disabled,
+        "c-input--readonly": props.readonly,
+        "c-input--has-value": state.hasValue,
+        "c-input--has-prepend": unref(hasPrepend),
+        "c-input--has-append": unref(hasAppend),
+        [attrs.class]: !!attrs.class
+      },
+      ...unref(preset).root
+    ]);
+    onBeforeMount(() => {
+      formApi == null ? void 0 : formApi.add(validate);
+    });
+    onBeforeUnmount(() => {
+      formApi == null ? void 0 : formApi.remove(validate);
+    });
+    __expose({
+      validate,
+      onFocus,
+      onBlur,
+      onInput
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(["c-input", classes.value])
+        },
+        [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(["c-input__field", unref(preset).field])
+            },
+            [
+              _ctx.$slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                renderSlot(_ctx.$slots, "prepend")
+              ])) : createCommentVNode("v-if", true),
+              renderSlot(_ctx.$slots, "field", mergeProps(unref(errors), {
+                validate: unref(validate),
+                focused: unref(state).focused,
+                label: __props.label,
+                disabled: __props.disabled,
+                readonly: __props.readonly,
+                uid,
+                presets: unref(preset).field,
+                onFocus: unref(onFocus),
+                onBlur: unref(onBlur),
+                onInput: unref(onInput),
+                attrs: unref(fieldAttrs)
+              })),
+              _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "append")
+              ])) : createCommentVNode("v-if", true)
+            ],
+            2
+            /* CLASS */
+          ),
+          hasLabel.value ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: normalizeClass(["c-input__label", unref(preset).label])
+            },
+            [
+              renderSlot(_ctx.$slots, "label", { uid }, () => [
+                withMemo([__props.label], () => createVNode(unref(CLabel), {
+                  id: `${uid}-label`,
+                  tag: "label",
+                  for: uid
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(
+                      toDisplayString(__props.label),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["id"]), _cache, 0)
+              ])
+            ],
+            2
+            /* CLASS */
+          )) : createCommentVNode("v-if", true),
+          hasDetails.value ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            id: `${uid}-details`,
+            class: normalizeClass(["c-input__details", unref(preset).details])
+          }, [
+            renderSlot(_ctx.$slots, "details", mergeProps(unref(errors), { uid }), () => [
+              createTextVNode(
+                toDisplayString(__props.details),
+                1
+                /* TEXT */
+              )
+            ])
+          ], 10, _hoisted_3)) : createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CInput/index.js

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

package/dist/components/CItems/CItems.js

@@ -0,0 +1,66 @@
+import { defineComponent, h } from 'vue';
+import { CListItemTitle } from '../CList/index.js';
+import _sfc_main from '../CList/CList.js';
+import _sfc_main$1 from '../CList/CListItem.js';
+
+const CItems = defineComponent({
+  name: "CItems",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [Array, Object, String, Number],
+      default: () => []
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    mandatory: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  slots: {},
+  setup(props, { emit, slots }) {
+    var _a;
+    const { extKey, noItemsMessage } = (_a = props.options) != null ? _a : {};
+    const genItemTitle = (value) => h(CListItemTitle, {}, {
+      default: () => value
+    });
+    const genItem = (item) => h(_sfc_main$1, {
+      value: item
+    }, {
+      default: () => [
+        genItemTitle(extKey ? item[extKey] : item)
+      ]
+    });
+    const genEmptyMessage = () => h(_sfc_main$1, null, {
+      default: () => {
+        var _a2, _b;
+        return genItemTitle((_b = (_a2 = slots["no-items-message"]) == null ? void 0 : _a2.call(slots)) != null ? _b : noItemsMessage);
+      }
+    });
+    return () => h(_sfc_main, {
+      modelValue: props.modelValue,
+      items: props.items,
+      multiple: props.multiple,
+      mandatory: props.mandatory,
+      ["onUpdate:modelValue"]: (val) => {
+        emit("update:modelValue", val);
+      }
+    }, {
+      default: () => props.items.length ? props.items.map(genItem) : genEmptyMessage()
+    });
+  }
+});
+
+export { CItems };

package/dist/components/CLabel/CLabel.js

@@ -0,0 +1,15 @@
+import { h } from 'vue';
+
+const CLabel = (props, ctx) => {
+  var _a, _b, _c;
+  return h(
+    (_a = props.tag) != null ? _a : "span",
+    {
+      ...ctx.attrs,
+      class: ["c-label"]
+    },
+    (_c = (_b = ctx.slots).default) == null ? void 0 : _c.call(_b)
+  );
+};
+
+export { CLabel };

package/dist/components/CList/CList.js

@@ -0,0 +1,78 @@
+import { defineComponent, useModel, useAttrs, computed, provide, openBlock, createElementBlock, normalizeClass, renderSlot, mergeModels, unref, toRaw } from 'vue';
+import { $LIST_API_KEY } from '../../constants/provide-keys.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CList",
+    inheritAttrs: false
+  },
+  __name: "CList",
+  props: /* @__PURE__ */ mergeModels({
+    modelValue: {},
+    multiple: { type: Boolean, default: false },
+    mandatory: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: null },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const model = useModel(__props, "modelValue");
+    const attrs = useAttrs();
+    const classes = computed(() => ({
+      "c-list--readonly": __props.readonly,
+      [attrs.class]: !!attrs.class
+    }));
+    function onSelect(listItem) {
+      if (__props.readonly) return;
+      if (__props.multiple) {
+        model.value = [...unref(model), listItem];
+      } else {
+        model.value = listItem;
+      }
+    }
+    function onUnselect(listItem) {
+      var _a;
+      if (__props.mandatory && !__props.multiple || __props.readonly) return;
+      if (__props.multiple) {
+        model.value = (_a = unref(model)) == null ? void 0 : _a.filter((item) => toRaw(item) !== toRaw(listItem));
+      } else {
+        model.value = null;
+      }
+    }
+    function isActive(listItem) {
+      var _a;
+      if (__props.multiple) {
+        return (_a = unref(model)) == null ? void 0 : _a.some((item) => toRaw(item) === toRaw(listItem));
+      } else {
+        return toRaw(model.value) === toRaw(listItem);
+      }
+    }
+    provide($LIST_API_KEY, {
+      model,
+      select: onSelect,
+      unselect: onUnselect,
+      isActive
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "ul",
+        {
+          class: normalizeClass(["c-list", classes.value])
+        },
+        [
+          renderSlot(_ctx.$slots, "default", {
+            select: onSelect,
+            unselect: onUnselect,
+            isActive
+          })
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CList/CListItem.js

@@ -0,0 +1,52 @@
+import { defineComponent, inject, computed, unref, openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { isDef } from '../../helpers/index.js';
+import { $LIST_API_KEY } from '../../constants/provide-keys.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CListItem"
+  },
+  __name: "CListItem",
+  props: {
+    value: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const list = inject($LIST_API_KEY, null);
+    const isSelected = computed(
+      () => {
+        var _a;
+        return isDef(props.value) ? (_a = list == null ? void 0 : list.isActive) == null ? void 0 : _a.call(list, props.value) : false;
+      }
+    );
+    const classes = computed(() => ({
+      "c-list-item--active": unref(isSelected)
+    }));
+    function onClick() {
+      const handler = unref(isSelected) ? list == null ? void 0 : list.unselect : list == null ? void 0 : list.select;
+      handler == null ? void 0 : handler(props.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "li",
+        {
+          class: normalizeClass(["c-list-item", classes.value]),
+          onClick
+        },
+        [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(
+              toDisplayString(__props.value),
+              1
+              /* TEXT */
+            )
+          ])
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CList/index.js

@@ -0,0 +1,6 @@
+import { createFunctionalComponent } from '../../utils/create-simple-functional.js';
+
+const CListItemIcon = createFunctionalComponent("c-list-item-icon");
+const CListItemTitle = createFunctionalComponent("c-list-item-title");
+
+export { CListItemIcon, CListItemTitle };

package/dist/components/CList/index2.js

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

package/dist/components/CList/index3.js

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

package/dist/components/CMain/index.js

@@ -0,0 +1,5 @@
+import { createFunctionalComponent } from '../../utils/create-simple-functional.js';
+
+const CMain = createFunctionalComponent("c-main");
+
+export { CMain };