@vueland/ui 0.0.1 → 0.0.3

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,137 @@
-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 { useAriaField } from '../../composables/use-aria-field.js';
+import { useAriaActivator } from '../../composables/use-aria-activator.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 },
+    role: {}
+  }, {
+    "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.role });
+    const isCombobox = props.role === "combobox";
+    const isCheckBox = props.role === "checkbox";
+    const isRadio = props.role === "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 ariaField = useAriaField(() => ({
+      fieldId,
+      label: props.label || isCheckBox || isRadio,
+      hasDetails: unref(hasDetails),
+      hasError: errors.hasError,
+      errorMessage: errors.errorMessage,
+      readonly: props.readonly,
+      disabled: props.disabled
+    }));
+    const ariaActivator = useAriaActivator(() => ({
+      expanded: state.focused,
+      haspopup: "listbox",
+      controls: `${fieldId}-menu`
+    }));
+    const fieldAttrs = computed(() => ({
+      ...unref(ariaField),
+      ...isCombobox ? { role: "combobox", ...unref(ariaActivator) } : {},
+      ...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 +140,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 */

package/dist/components/CList/CList.js

@@ -1,6 +1,9 @@
-import { defineComponent, useModel, useAttrs, computed, provide, openBlock, createElementBlock, normalizeClass, renderSlot, mergeModels, unref, toRaw } from 'vue';
+import { defineComponent, useModel, useAttrs, shallowRef, computed, unref, provide, openBlock, createElementBlock, normalizeClass, renderSlot, mergeModels, toRaw, nextTick } from 'vue';
 import { $LIST_API_KEY } from '../../constants/provide-keys.js';
+import { useId } from '../../composables/use-id.js';
+import { useKeyboard } from '../../composables/use-keyboard.js';
 
+const _hoisted_1 = ["role", "tabindex", "aria-multiselectable", "aria-activedescendant"];
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "CList",
@@ -9,68 +12,137 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "CList",
   props: /* @__PURE__ */ mergeModels({
     modelValue: {},
-    multiple: { type: Boolean, default: false },
-    mandatory: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false }
+    multiple: { type: Boolean },
+    mandatory: { type: Boolean },
+    readonly: { type: Boolean },
+    selectable: { type: Boolean },
+    role: {}
   }, {
     "modelValue": { default: null },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
+    const props = __props;
     const model = useModel(__props, "modelValue");
     const attrs = useAttrs();
+    const focused = shallowRef(false);
+    const listEl = shallowRef();
+    const activeDescendant = shallowRef();
+    const listId = useId(void 0, { prefix: "c-list" });
+    let handlers = [];
+    let currentIndex = -1;
     const classes = computed(() => ({
-      "c-list--readonly": __props.readonly,
+      "c-list--readonly": props.readonly,
       [attrs.class]: !!attrs.class
     }));
-    function onSelect(listItem) {
-      if (__props.readonly) return;
-      if (__props.multiple) {
+    const role = computed(() => {
+      if (props.role) return props.role;
+      if (props.selectable) return "listbox";
+      return void 0;
+    });
+    const tabindex = computed(() => {
+      if (attrs.tabindex != null) return attrs.tabindex;
+      if (unref(focused)) return 0;
+      if (props.selectable) return -1;
+      if (props.role === "listbox") return -1;
+      if (props.role === "menu") return -1;
+      return void 0;
+    });
+    function select(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));
+    function unselect(listItem) {
+      if (props.readonly) return;
+      if (props.multiple) {
+        const current = unref(model);
+        if (props.mandatory && (current == null ? void 0 : current.length) <= 1) {
+          return;
+        }
+        model.value = current == null ? void 0 : current.filter((item) => toRaw(item) !== toRaw(listItem));
       } else {
+        if (props.mandatory) return;
         model.value = null;
       }
     }
     function isActive(listItem) {
       var _a;
-      if (__props.multiple) {
+      if (props.multiple) {
         return (_a = unref(model)) == null ? void 0 : _a.some((item) => toRaw(item) === toRaw(listItem));
       } else {
         return toRaw(model.value) === toRaw(listItem);
       }
     }
+    function register(itemControls) {
+      const idx = handlers.length;
+      handlers.push(itemControls);
+      return idx;
+    }
+    function unregister(itemControls) {
+      handlers = handlers.filter((it) => it !== itemControls);
+    }
+    function setDescendant(id) {
+      activeDescendant.value = id;
+    }
+    async function focus() {
+      focused.value = true;
+      await nextTick();
+      unref(listEl).focus();
+    }
+    function navigateDown() {
+      var _a;
+      if (!handlers.length) return;
+      const next = Math.min(handlers.length - 1, currentIndex + 1);
+      (_a = handlers[currentIndex]) == null ? void 0 : _a.blur();
+      handlers[next].focus();
+      currentIndex = next;
+    }
+    function navigateUp() {
+      var _a;
+      if (!handlers.length || currentIndex <= 0) return;
+      const prev = currentIndex - 1;
+      (_a = handlers[currentIndex]) == null ? void 0 : _a.blur();
+      handlers[prev].focus();
+      currentIndex = prev;
+    }
+    const { onKeydown } = useKeyboard({
+      ArrowDown: navigateDown,
+      ArrowUp: navigateUp
+    });
+    __expose({ focus, listId, activeDescendant, navigateDown, navigateUp });
     provide($LIST_API_KEY, {
-      model,
-      select: onSelect,
-      unselect: onUnselect,
-      isActive
+      role,
+      listId,
+      register,
+      unregister,
+      select,
+      unselect,
+      isActive,
+      setDescendant
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "ul",
-        {
-          class: normalizeClass(["c-list", classes.value])
-        },
-        [
-          renderSlot(_ctx.$slots, "default", {
-            select: onSelect,
-            unselect: onUnselect,
-            isActive
-          })
-        ],
-        2
-        /* CLASS */
-      );
+      return openBlock(), createElementBlock("ul", {
+        ref_key: "listEl",
+        ref: listEl,
+        class: normalizeClass(["c-list", classes.value]),
+        role: role.value,
+        tabindex: tabindex.value,
+        "aria-multiselectable": __props.multiple,
+        "aria-activedescendant": activeDescendant.value,
+        onKeydown: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => unref(onKeydown) && unref(onKeydown)(...args))
+      }, [
+        renderSlot(_ctx.$slots, "default", {
+          select,
+          unselect,
+          isActive
+        })
+      ], 42, _hoisted_1);
     };
   }
 });