@vueland/ui 0.0.1 → 0.0.2

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 */
+      );
     };
   }
 });

package/dist/components/CForm/CForm.js

@@ -1,43 +1,59 @@
 import { defineComponent, provide, openBlock, createElementBlock, withModifiers, renderSlot } from 'vue';
 import { $FORM_API_KEY } from '../../constants/provide-keys.js';
 
+const _hoisted_1 = ["aria-label"];
 var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "CForm"
-  },
+  ...{ name: "CForm" },
   __name: "CForm",
-  setup(__props, { expose: __expose }) {
+  props: {
+    label: {}
+  },
+  emits: ["submit"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
     let validators = [];
+    let resetFns = [];
     function add(fn) {
       validators.push(fn);
     }
     function remove(fn) {
       validators = validators.filter((v) => v !== fn);
     }
+    function addReset(fn) {
+      resetFns.push(fn);
+    }
+    function removeReset(fn) {
+      resetFns = resetFns.filter((v) => v !== fn);
+    }
     async function validate() {
-      return validators.map((fn) => fn()).every((v) => v);
+      const results = await Promise.all(validators.map((fn) => fn()));
+      return results.every(Boolean);
     }
-    __expose({
-      validate
-    });
+    function reset() {
+      resetFns.forEach((fn) => fn());
+    }
+    function onSubmit(event) {
+      emit("submit", event);
+    }
+    __expose({ validate, reset });
     provide($FORM_API_KEY, {
       add,
-      remove
+      remove,
+      addReset,
+      removeReset
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "form",
-        {
-          class: "c-form",
-          onSubmit: _cache[0] || (_cache[0] = withModifiers(() => {
-          }, ["prevent"]))
-        },
-        [
-          renderSlot(_ctx.$slots, "default", { validate })
-        ],
-        32
-        /* NEED_HYDRATION */
-      );
+      return openBlock(), createElementBlock("form", {
+        class: "c-form",
+        novalidate: "",
+        "aria-label": __props.label,
+        onSubmit: withModifiers(onSubmit, ["prevent"])
+      }, [
+        renderSlot(_ctx.$slots, "default", {
+          validate,
+          reset
+        })
+      ], 40, _hoisted_1);
     };
   }
 });

package/dist/components/CGrid/CCol.js

@@ -35,9 +35,7 @@ const CCol = defineComponent({
   },
   setup(props, { slots }) {
     const classes = computed(() => {
-      const cls = {
-        "c-col": true
-      };
+      const cls = { "c-col": true };
       if (isDef(props.cols)) {
         cls[`c-col-${props.cols}`] = true;
       }

package/dist/components/CGrid/CRow.js

@@ -51,9 +51,7 @@ const CRow = defineComponent({
   },
   setup(props, { slots }) {
     const classes = computed(() => {
-      const cls = {
-        "c-row": true
-      };
+      const cls = { "c-row": true };
       if (props.noGutter) {
         cls["no-gutter"] = true;
       }
@@ -61,10 +59,10 @@ const CRow = defineComponent({
         cls[`justify-${props.justify}`] = true;
       }
       if (isDef(props.align)) {
-        cls[`align-${props.align}`] = true;
+        cls[`items-${props.align}`] = true;
       }
       if (isDef(props.alignContent)) {
-        cls[`align-content-${props.alignContent}`] = true;
+        cls[`content-${props.alignContent}`] = true;
       }
       for (const bp of BREAKPOINTS) {
         const justifyVal = toCamelCase(...`justify-${bp}`.split("-"));
@@ -74,10 +72,10 @@ const CRow = defineComponent({
           cls[`${bp}:justify-${props[justifyVal]}`] = true;
         }
         if (isDef(props[alignVal])) {
-          cls[`${bp}:align-${props[alignVal]}`] = true;
+          cls[`${bp}:items-${props[alignVal]}`] = true;
         }
         if (isDef(props[contentVal])) {
-          cls[`${bp}:align-content-${props[contentVal]}`] = true;
+          cls[`${bp}:content-${props[contentVal]}`] = true;
         }
       }
       return cls;

package/dist/components/CIcon/CIcon.js

@@ -30,10 +30,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const attrs = useAttrs();
     const resolvedIcon = useIcon(props);
     const rootStyle = computed(() => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e, _f;
       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))
+        width: convertToUnit((_c = (_b = (_a = unref(resolvedIcon).size) != null ? _a : props.width) != null ? _b : props.size) != null ? _c : 16),
+        height: convertToUnit((_f = (_e = (_d = unref(resolvedIcon).size) != null ? _d : props.height) != null ? _e : props.size) != null ? _f : 16)
       };
     });
     return (_ctx, _cache) => {

package/dist/components/CInput/CInput.js

@@ -1,92 +1,128 @@
-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 { defineComponent, useSlots, useModel, shallowReactive, useAttrs, computed, unref, onBeforeMount, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, mergeProps, createVNode, Transition, withCtx, createCommentVNode, mergeModels } from 'vue';
 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';
+import { FIELD_ATTRS } from '../../constants/attrs.js';
+import { useId } from '../../composables/use-id.js';
 
-const _hoisted_1 = {
-  key: 0,
-  class: "c-input__prepend"
-};
-const _hoisted_2 = {
-  key: 1,
-  class: "c-input__append"
-};
-const _hoisted_3 = ["id"];
+const _hoisted_1 = { class: "c-input__field" };
+const _hoisted_2 = ["id"];
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "CInput",
     inheritAttrs: false
   },
   __name: "CInput",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     rules: {},
     validateOn: {},
-    disabled: { type: Boolean },
-    focused: { type: Boolean },
-    readonly: { type: Boolean },
     preset: {},
     id: {},
     modelValue: {},
     label: {},
     details: {},
     noDetails: { type: Boolean },
-    clearable: { type: Boolean }
-  },
+    clearable: { type: Boolean },
+    disabled: { type: Boolean },
+    focused: { type: Boolean },
+    readonly: { type: Boolean },
+    kind: {}
+  }, {
+    "focused": { type: Boolean, ...{ default: false } },
+    "focusedModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "update:focused"], ["update:focused"]),
   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 focusedModel = useModel(__props, "focused");
+    const INTERNAL_HANDLERS = /* @__PURE__ */ new Set(["onUpdate:modelValue", "onUpdate:focused"]);
+    const state = shallowReactive({
+      get focused() {
+        return focusedModel.value;
+      },
+      set focused(v) {
+        focusedModel.value = v;
+      },
+      isDirty: false
+    });
     const {
       errors,
+      resetValidate,
       validate
     } = useValidate(props, state);
     const formApi = useForm();
+    const attrs = useAttrs();
     const preset = useInputPresets({
       props,
+      state,
       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 fieldId = useId(props.id, { prefix: props.kind });
+    const isLisBox = props.kind === "listbox";
+    const isCheckBox = props.kind === "checkbox";
+    const isRadio = props.kind === "radio";
+    const hasDetails = computed(
+      () => !props.noDetails && (!!props.details || !!(slots == null ? void 0 : slots.details) || errors.hasError)
+    );
+    const normalizedAttrsMap = computed(() => Object.entries(attrs).reduce((acc, [k, v]) => {
+      if (FIELD_ATTRS.has(k) || k.startsWith("aria-") || k.startsWith("data-") || k.startsWith("on") && !INTERNAL_HANDLERS.has(k)) {
+        acc[k] = v;
+      }
+      return acc;
+    }, {}));
+    const fieldAttrs = computed(() => ({
+      ...props.label || isCheckBox || isRadio ? { "aria-labelledby": `${fieldId}-label` } : {},
+      ...unref(hasDetails) ? { "aria-describedby": `${fieldId}-details` } : {},
+      ...errors.hasError ? { "aria-invalid": "true" } : {},
+      ...errors.errorMessage && unref(hasDetails) ? { "aria-errormessage": `${fieldId}-details` } : {},
+      ...props.readonly ? { "aria-readonly": "true" } : {},
+      ...props.disabled ? { "aria-disabled": "true" } : {},
+      ...isLisBox ? { "aria-haspopup": "listbox" } : {},
+      ...isLisBox ? { "aria-controls": `${fieldId}-menu` } : {},
+      ...isLisBox ? { "aria-expanded": `${state.focused}` } : {},
+      ...unref(normalizedAttrsMap)
+    }));
     const classes = computed(() => [
       {
         "c-input--has-error": errors.hasError,
-        "c-input--default": !errors.hasError,
+        "c-input--default": !errors.hasError && !props.disabled && !props.readonly,
         "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
+        "c-input--clearable": props.clearable
       },
+      attrs.class,
       ...unref(preset).root
     ]);
+    function focus() {
+      if (props.disabled || props.readonly) {
+        return;
+      }
+      state.focused = true;
+    }
+    function blur() {
+      state.focused = false;
+      if (!state.isDirty) {
+        state.isDirty = true;
+      }
+    }
+    function reset() {
+      resetValidate();
+    }
     onBeforeMount(() => {
       formApi == null ? void 0 : formApi.add(validate);
+      formApi == null ? void 0 : formApi.addReset(reset);
     });
     onBeforeUnmount(() => {
       formApi == null ? void 0 : formApi.remove(validate);
+      formApi == null ? void 0 : formApi.removeReset(reset);
     });
     __expose({
       validate,
-      onFocus,
-      onBlur,
-      onInput
+      focus,
+      blur,
+      reset
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
@@ -95,76 +131,41 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           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),
+          createElementVNode("div", _hoisted_1, [
+            renderSlot(_ctx.$slots, "field", mergeProps(unref(errors), {
+              validate: unref(validate),
+              label: __props.label,
+              disabled: __props.disabled,
+              readonly: __props.readonly,
+              focused: unref(state).focused,
+              uid: unref(fieldId),
+              preset: unref(preset).field,
+              focus,
+              blur,
+              clearable: __props.clearable,
+              reset,
+              attrs: fieldAttrs.value
+            }))
+          ]),
           hasDetails.value ? (openBlock(), createElementBlock("div", {
-            key: 1,
-            id: `${uid}-details`,
+            key: 0,
+            id: `${unref(fieldId)}-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)
+            createVNode(Transition, {
+              name: "fade-in-down",
+              mode: "out-in"
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "details", mergeProps(unref(errors), {
+                  details: __props.details,
+                  uid: unref(fieldId)
+                }))
+              ]),
+              _: 3
+              /* FORWARDED */
+            })
+          ], 10, _hoisted_2)) : createCommentVNode("v-if", true)
         ],
         2
         /* CLASS */