@vueland/ui 0.0.1 → 0.0.2

package/dist/components/CList/CList.js

@@ -1,6 +1,8 @@
-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 { useKeyboard } from '../../composables/use-keyboard.js';
 
+const _hoisted_1 = ["role", "tabindex", "aria-multiselectable"];
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "CList",
@@ -9,68 +11,119 @@ 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();
+    let handlers = [];
+    let index = 0;
     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) {
+      handlers.push(itemControls);
+    }
+    function unregister(itemControls) {
+      handlers = handlers.filter((it) => it !== itemControls);
+    }
+    async function focus() {
+      focused.value = true;
+      await nextTick();
+      unref(listEl).focus();
+    }
+    const { onKeydown } = useKeyboard({
+      ArrowDown: () => {
+        var _a;
+        handlers[index].focus();
+        (_a = handlers[index - 1]) == null ? void 0 : _a.blur();
+        index = Math.min(handlers.length - 1, index + 1);
+      },
+      ArrowUp: () => {
+        var _a;
+        (_a = handlers[index]) == null ? void 0 : _a.blur();
+        index = Math.min(handlers.length - 1, Math.max(0, index - 1));
+        handlers[index].focus();
+      }
+    });
+    __expose({ focus });
     provide($LIST_API_KEY, {
-      model,
-      select: onSelect,
-      unselect: onUnselect,
+      role,
+      register,
+      unregister,
+      select,
+      unselect,
       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 */
-      );
+      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,
+        onKeydown: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => unref(onKeydown) && unref(onKeydown)(...args))
+      }, [
+        renderSlot(_ctx.$slots, "default", {
+          select,
+          unselect,
+          isActive
+        })
+      ], 42, _hoisted_1);
     };
   }
 });

package/dist/components/CList/CListItem.js

@@ -1,18 +1,18 @@
-import { defineComponent, inject, computed, unref, openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, shallowRef, computed, unref, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { useList } from '../../composables/use-list.js';
 import { isDef } from '../../helpers/index.js';
-import { $LIST_API_KEY } from '../../constants/provide-keys.js';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "CListItem"
-  },
+  ...{ name: "CListItem" },
   __name: "CListItem",
   props: {
     value: {}
   },
   setup(__props) {
     const props = __props;
-    const list = inject($LIST_API_KEY, null);
+    const list = useList();
+    const tabindex = shallowRef(-1);
+    const isInActiveList = computed(() => unref(list == null ? void 0 : list.role) === "listbox" || unref(list == null ? void 0 : list.role) === "menu");
     const isSelected = computed(
       () => {
         var _a;
@@ -20,19 +20,44 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     const classes = computed(() => ({
-      "c-list-item--active": unref(isSelected)
+      "c-list-item--active": unref(isSelected),
+      "c-list-item--focused": unref(tabindex) > -1
+    }));
+    const attrs = computed(() => ({
+      ...unref(tabindex) > -1 ? { tabindex: 0 } : {},
+      ...isInActiveList.value ? { role: "option" } : {},
+      "aria-selected": unref(isSelected)
     }));
     function onClick() {
-      const handler = unref(isSelected) ? list == null ? void 0 : list.unselect : list == null ? void 0 : list.select;
+      const handler = unref(isSelected) ? list.unselect : list.select;
       handler == null ? void 0 : handler(props.value);
     }
+    function focus() {
+      tabindex.value = 0;
+    }
+    function blur() {
+      tabindex.value = -1;
+    }
+    const handlers = {
+      focus,
+      blur
+    };
+    onMounted(() => {
+      if (unref(isInActiveList)) {
+        list.register(handlers);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (unref(isInActiveList)) {
+        list.unregister(handlers);
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "li",
-        {
-          class: normalizeClass(["c-list-item", classes.value]),
-          onClick
-        },
+        mergeProps({
+          class: ["c-list-item", classes.value]
+        }, attrs.value, { onClick }),
         [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(
@@ -42,8 +67,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             )
           ])
         ],
-        2
-        /* CLASS */
+        16
+        /* FULL_PROPS */
       );
     };
   }

package/dist/components/CMenu/CMenu.js

@@ -3,12 +3,13 @@ import { isDef } from '../../helpers/index.js';
 import { useActivator } from '../../composables/use-activator.js';
 import { useAutoPosition } from '../../composables/use-auto-position.js';
 import { useMenuPresets } from '../../composables/use-menu-presets.js';
-import { $MENU_API_KEY } from '../../constants/provide-keys.js';
 import _sfc_main$1 from '../COverlay/COverlay.js';
 import { vClickOutside } from '../../directives/v-click-outside.js';
+import { useKeyboard } from '../../composables/use-keyboard.js';
 import { throttle } from '../../utils/throttle.js';
 import { useDelayedActions } from '../../composables/use-delay-actions.js';
 import { convertToUnit } from '../../utils/convert-to-unit.js';
+import { $MENU_API_KEY } from '../../constants/provide-keys.js';
 import { IN_BROWSER } from '../../utils/globals.js';
 
 const _hoisted_1 = { class: "c-menu__content" };
@@ -25,21 +26,22 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     openOnHover: { type: Boolean },
     closeOnLeave: { type: Boolean },
     openOnFocus: { type: Boolean },
-    positionX: {},
-    positionY: {},
-    offsetX: {},
-    offsetY: {},
+    activator: {},
     width: {},
     height: {},
     minWidth: {},
     maxWidth: {},
     minHeight: {},
     maxHeight: {},
+    strategy: {},
+    positionX: {},
+    positionY: {},
+    offsetX: {},
+    offsetY: {},
     left: { type: Boolean },
     right: { type: Boolean },
     top: { type: Boolean },
     bottom: { type: Boolean },
-    strategy: {},
     openDelay: {},
     closeDelay: {},
     preset: {},
@@ -55,24 +57,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   }),
   emits: /* @__PURE__ */ mergeModels(["outside-click", "click", "open", "close", "update:modelValue"], ["update:modelValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
-    const emit = __emit;
     const props = __props;
+    const emit = __emit;
+    const model = useModel(__props, "modelValue");
     const { transition = "fade" } = props;
     const {
+      element,
       activatorProps,
-      genListeners,
-      getActivator,
-      getActivatorElement
+      genListeners
     } = useActivator(props);
     const {
       activator,
       content,
       contentRef,
       update
-    } = useAutoPosition(props);
+    } = useAutoPosition(props, element);
     const presets = useMenuPresets({ props });
     const { openDelay, closeDelay } = useDelayedActions(props);
-    const model = useModel(__props, "modelValue");
     const mounted = shallowRef(props.ssr || props.modelValue);
     const detached = computed(() => isDef(props.positionX) || isDef(props.positionY));
     const sizesStyles = computed(() => {
@@ -95,13 +96,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       { "c-menu--visible": unref(model) },
       ...unref(presets).root
     ]);
-    const open = async () => {
+    const open = () => {
       mounted.value = true;
-      openDelay(async () => {
+      openDelay(() => {
         if (!unref(detached)) {
           model.value = true;
         }
-        await update(getActivator());
         emit("open");
       });
     };
@@ -117,7 +117,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const onClickOutside = (e) => {
       const { closeOnClickOutside } = props;
       const { target } = e;
-      const activator2 = getActivatorElement();
+      const activator2 = unref(element);
       if (closeOnClickOutside && (!activator2 || !activator2.contains(target))) {
         close();
         emit("outside-click");
@@ -129,13 +129,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         emit("click");
       }
     };
+    const { onKeydown } = useKeyboard({ Escape: () => close() });
     const listeners = genListeners({
       open,
       close,
       toggle
     });
     const handler = throttle(() => {
-      update(getActivator());
+      update();
     }, THROTTLE_DELAY);
     __expose({
       open,
@@ -152,24 +153,24 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         if (value) {
           window.addEventListener("resize", handler, { passive: true });
           window.addEventListener("scroll", handler, { passive: true });
+          window.addEventListener("keydown", onKeydown);
         } else {
           window.removeEventListener("resize", handler);
           window.removeEventListener("scroll", handler);
+          window.removeEventListener("keydown", onKeydown);
         }
       }, { immediate: true });
-      if (unref(detached)) {
-        watch(model, (value) => {
-          if (value) open();
-        }, { immediate: true });
-      } else {
-        onMounted(() => {
-          if (unref(model)) open();
-        });
-      }
+      watch(model, (value) => {
+        if (value) open();
+      }, { immediate: unref(detached) });
+      onMounted(() => {
+        if (unref(model)) open();
+      });
     }
     onBeforeUnmount(() => {
       window.removeEventListener("resize", handler);
       window.removeEventListener("scroll", handler);
+      window.removeEventListener("keydown", onKeydown);
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(

package/dist/components/COverlay/COverlay.js

@@ -1,4 +1,4 @@
-import { defineComponent, useModel, shallowRef, computed, watch, onBeforeUnmount, unref, openBlock, createBlock, Teleport, renderSlot, mergeModels } from 'vue';
+import { defineComponent, useModel, shallowRef, computed, watchEffect, unref, onBeforeUnmount, openBlock, createBlock, Teleport, renderSlot, mergeModels } from 'vue';
 import { useOverlayStack } from '../../composables/use-overlay-stack.js';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
@@ -17,20 +17,21 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     const props = __props;
-    const { register, unregister } = useOverlayStack();
     const model = useModel(__props, "modelValue");
+    const { register, unregister } = useOverlayStack();
     const zIndex = shallowRef();
     const target = computed(() => {
       var _a;
       return (_a = props.to) != null ? _a : "body";
     });
-    watch(model, (val) => {
-      if (val) {
+    watchEffect(() => {
+      if (unref(model)) {
         zIndex.value = register();
       } else {
         unregister();
+        zIndex.value = void 0;
       }
-    }, { immediate: true });
+    });
     onBeforeUnmount(() => {
       if (unref(model)) {
         unregister();

package/dist/components/CRadio/CRadio.js

@@ -1,11 +1,11 @@
-import { defineComponent, useModel, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, normalizeClass, renderSlot, withMemo, createVNode, createTextVNode, toDisplayString, mergeModels } from 'vue';
+import { defineComponent, useModel, computed, unref, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, normalizeClass, createVNode, renderSlot, withMemo, createTextVNode, toDisplayString, mergeModels } from 'vue';
+import { IconAliases } from '../../enums/IconName.js';
 
 const _hoisted_1 = ["onClick"];
-const _hoisted_2 = { class: "c-radio__label" };
+const _hoisted_2 = { class: "c-radio__icon" };
+const _hoisted_3 = { class: "c-radio__label" };
 var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "CRadio"
-  },
+  ...{ name: "CRadio" },
   __name: "CRadio",
   props: /* @__PURE__ */ mergeModels({
     label: {}
@@ -16,7 +16,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     const model = useModel(__props, "modelValue");
+    const { RADIO_ON, RADIO_OFF } = IconAliases;
+    const icon = computed(() => unref(model) ? RADIO_ON : RADIO_OFF);
     return (_ctx, _cache) => {
+      const _component_c_icon = resolveComponent("c-icon");
       const _component_c_label = resolveComponent("c-label");
       const _component_c_select_control = resolveComponent("c-select-control");
       return openBlock(), createBlock(_component_c_select_control, mergeProps({
@@ -33,6 +36,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             onClick: toggle
           }, [
             createElementVNode("div", _hoisted_2, [
+              createVNode(_component_c_icon, { name: icon.value }, null, 8, ["name"])
+            ]),
+            createElementVNode("div", _hoisted_3, [
               renderSlot(_ctx.$slots, "default", {}, () => [
                 withMemo([__props.label], () => createVNode(_component_c_label, null, {
                   default: withCtx(() => [

package/dist/components/CRadio/CRadioGroup.js

@@ -0,0 +1,10 @@
+import { renderSlot } from 'vue';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
+
+const _sfc_main = {};
+function _sfc_render(_ctx, _cache) {
+  return renderSlot(_ctx.$slots, "default");
+}
+var CRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { CRadioGroup as default };