@vueland/ui 0.0.1 → 0.0.3

package/dist/components/CList/CListItem.js

@@ -1,18 +1,22 @@
-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 myIndex = shallowRef(-1);
+    const focused = shallowRef(false);
+    const isInActiveList = computed(() => unref(list == null ? void 0 : list.role) === "listbox" || unref(list == null ? void 0 : list.role) === "menu");
+    const myId = computed(
+      () => isInActiveList.value && (list == null ? void 0 : list.listId) && myIndex.value >= 0 ? `${list.listId}-option-${myIndex.value}` : void 0
+    );
     const isSelected = computed(
       () => {
         var _a;
@@ -20,19 +24,45 @@ 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(focused)
+    }));
+    const attrs = computed(() => ({
+      ...unref(myId) ? { id: unref(myId) } : {},
+      ...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() {
+      var _a;
+      (_a = list == null ? void 0 : list.setDescendant) == null ? void 0 : _a.call(list, unref(myId));
+      focused.value = true;
+    }
+    function blur() {
+      var _a;
+      (_a = list == null ? void 0 : list.setDescendant) == null ? void 0 : _a.call(list, void 0);
+      focused.value = false;
+    }
+    const handlers = { focus, blur };
+    onMounted(() => {
+      if (unref(isInActiveList)) {
+        myIndex.value = 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 +72,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             )
           ])
         ],
-        2
-        /* CLASS */
+        16
+        /* FULL_PROPS */
       );
     };
   }

package/dist/components/CMenu/CMenu.js

@@ -1,17 +1,19 @@
-import { defineComponent, useModel, shallowRef, computed, unref, provide, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, renderSlot, createVNode, withCtx, Transition, withDirectives, mergeProps, createElementVNode, vShow, createCommentVNode, mergeModels } from 'vue';
+import { defineComponent, useModel, useAttrs, shallowRef, computed, unref, provide, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, renderSlot, createVNode, withCtx, Transition, withDirectives, mergeProps, createElementVNode, vShow, createCommentVNode, mergeModels } from 'vue';
 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';
+import { useId } from '../../composables/use-id.js';
 
-const _hoisted_1 = { class: "c-menu__content" };
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { class: "c-menu__content" };
 const THROTTLE_DELAY = 50;
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -25,24 +27,21 @@ 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: {},
-    left: { type: Boolean },
-    right: { type: Boolean },
-    top: { type: Boolean },
-    bottom: { type: Boolean },
     strategy: {},
+    positionX: {},
+    positionY: {},
+    offsetX: {},
+    offsetY: {},
+    align: {},
     openDelay: {},
     closeDelay: {},
-    preset: {},
     modelValue: { type: Boolean },
     to: {},
     closeOnClickOutside: { type: Boolean },
@@ -55,25 +54,29 @@ 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 attrs = useAttrs();
     const {
+      element,
       activatorProps,
-      genListeners,
-      getActivator,
-      getActivatorElement
+      genListeners
     } = useActivator(props);
     const {
       activator,
       content,
       contentRef,
       update
-    } = useAutoPosition(props);
-    const presets = useMenuPresets({ props });
+    } = useAutoPosition(props, element);
     const { openDelay, closeDelay } = useDelayedActions(props);
-    const model = useModel(__props, "modelValue");
     const mounted = shallowRef(props.ssr || props.modelValue);
+    const _generatedId = useId(void 0, { prefix: "c-menu" });
+    const menuId = computed(() => {
+      var _a;
+      return (_a = attrs.id) != null ? _a : _generatedId;
+    });
     const detached = computed(() => isDef(props.positionX) || isDef(props.positionY));
     const sizesStyles = computed(() => {
       var _a, _b;
@@ -91,17 +94,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       left: convertToUnit(unref(content).left),
       ...unref(sizesStyles)
     }));
-    const classes = computed(() => [
-      { "c-menu--visible": unref(model) },
-      ...unref(presets).root
-    ]);
-    const open = async () => {
+    const classes = computed(() => ({ "c-menu--visible": unref(model) }));
+    const open = () => {
       mounted.value = true;
-      openDelay(async () => {
+      openDelay(() => {
         if (!unref(detached)) {
           model.value = true;
         }
-        await update(getActivator());
+        update();
         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,16 @@ 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 +155,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(
@@ -187,23 +190,19 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             default: withCtx(({ zIndex }) => [
               createVNode(Transition, { name: unref(transition) }, {
                 default: withCtx(() => [
-                  mounted.value ? withDirectives((openBlock(), createElementBlock(
-                    "div",
-                    mergeProps({
-                      key: 0,
-                      ref_key: "contentRef",
-                      ref: contentRef,
-                      class: ["c-menu", classes.value],
-                      style: { ...styles.value, zIndex }
-                    }, _ctx.$attrs, { onClick: onContentClick }),
-                    [
-                      createElementVNode("div", _hoisted_1, [
-                        renderSlot(_ctx.$slots, "default")
-                      ])
-                    ],
-                    16
-                    /* FULL_PROPS */
-                  )), [
+                  mounted.value ? withDirectives((openBlock(), createElementBlock("div", mergeProps({ key: 0 }, _ctx.$attrs, {
+                    id: menuId.value,
+                    ref_key: "contentRef",
+                    ref: contentRef,
+                    class: ["c-menu", classes.value],
+                    style: { ...styles.value, zIndex },
+                    tabindex: "-1",
+                    onClick: onContentClick
+                  }), [
+                    createElementVNode("div", _hoisted_2, [
+                      renderSlot(_ctx.$slots, "default")
+                    ])
+                  ], 16, _hoisted_1)), [
                     [vShow, model.value],
                     [unref(vClickOutside), onClickOutside]
                   ]) : createCommentVNode("v-if", true)

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 };