@vueland/ui 0.0.1

package/dist/components/CMenu/CMenu.js

@@ -0,0 +1,226 @@
+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 { 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 { throttle } from '../../utils/throttle.js';
+import { useDelayedActions } from '../../composables/use-delay-actions.js';
+import { convertToUnit } from '../../utils/convert-to-unit.js';
+import { IN_BROWSER } from '../../utils/globals.js';
+
+const _hoisted_1 = { class: "c-menu__content" };
+const THROTTLE_DELAY = 50;
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CMenu",
+    inheritAttrs: false
+  },
+  __name: "CMenu",
+  props: /* @__PURE__ */ mergeModels({
+    closeOnClick: { type: Boolean },
+    openOnClick: { type: Boolean },
+    openOnHover: { type: Boolean },
+    closeOnLeave: { type: Boolean },
+    openOnFocus: { type: Boolean },
+    positionX: {},
+    positionY: {},
+    offsetX: {},
+    offsetY: {},
+    width: {},
+    height: {},
+    minWidth: {},
+    maxWidth: {},
+    minHeight: {},
+    maxHeight: {},
+    left: { type: Boolean },
+    right: { type: Boolean },
+    top: { type: Boolean },
+    bottom: { type: Boolean },
+    strategy: {},
+    openDelay: {},
+    closeDelay: {},
+    preset: {},
+    modelValue: { type: Boolean },
+    to: {},
+    closeOnClickOutside: { type: Boolean },
+    closeOnContentClick: { type: Boolean },
+    ssr: { type: Boolean },
+    transition: {}
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  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 { transition = "fade" } = props;
+    const {
+      activatorProps,
+      genListeners,
+      getActivator,
+      getActivatorElement
+    } = useActivator(props);
+    const {
+      activator,
+      content,
+      contentRef,
+      update
+    } = useAutoPosition(props);
+    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(() => {
+      var _a, _b;
+      return {
+        ...props.width || unref(activator).width ? { width: convertToUnit((_a = props.width) != null ? _a : unref(activator).width) } : {},
+        ...props.height ? { height: convertToUnit((_b = props.height) != null ? _b : unref(activator).height) } : {},
+        ...props.maxWidth || props.width ? { maxWidth: convertToUnit(props.maxWidth || props.width) } : {},
+        ...props.minWidth ? { minWidth: convertToUnit(props.minWidth) } : {},
+        ...props.minHeight ? { minHeight: convertToUnit(props.minHeight) } : {},
+        ...props.maxHeight ? { maxHeight: convertToUnit(props.maxHeight) } : {}
+      };
+    });
+    const styles = computed(() => ({
+      top: convertToUnit(unref(content).top),
+      left: convertToUnit(unref(content).left),
+      ...unref(sizesStyles)
+    }));
+    const classes = computed(() => [
+      { "c-menu--visible": unref(model) },
+      ...unref(presets).root
+    ]);
+    const open = async () => {
+      mounted.value = true;
+      openDelay(async () => {
+        if (!unref(detached)) {
+          model.value = true;
+        }
+        await update(getActivator());
+        emit("open");
+      });
+    };
+    const close = () => {
+      closeDelay(() => {
+        var _a;
+        emit("close");
+        mounted.value = (_a = props.ssr) != null ? _a : false;
+        model.value = false;
+      });
+    };
+    const toggle = () => unref(model) ? close() : open();
+    const onClickOutside = (e) => {
+      const { closeOnClickOutside } = props;
+      const { target } = e;
+      const activator2 = getActivatorElement();
+      if (closeOnClickOutside && (!activator2 || !activator2.contains(target))) {
+        close();
+        emit("outside-click");
+      }
+    };
+    const onContentClick = () => {
+      if (props.closeOnContentClick) {
+        close();
+        emit("click");
+      }
+    };
+    const listeners = genListeners({
+      open,
+      close,
+      toggle
+    });
+    const handler = throttle(() => {
+      update(getActivator());
+    }, THROTTLE_DELAY);
+    __expose({
+      open,
+      close,
+      toggle
+    });
+    provide($MENU_API_KEY, {
+      open,
+      close,
+      toggle
+    });
+    if (IN_BROWSER) {
+      watch(model, (value) => {
+        if (value) {
+          window.addEventListener("resize", handler, { passive: true });
+          window.addEventListener("scroll", handler, { passive: true });
+        } else {
+          window.removeEventListener("resize", handler);
+          window.removeEventListener("scroll", handler);
+        }
+      }, { immediate: true });
+      if (unref(detached)) {
+        watch(model, (value) => {
+          if (value) open();
+        }, { immediate: true });
+      } else {
+        onMounted(() => {
+          if (unref(model)) open();
+        });
+      }
+    }
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", handler);
+      window.removeEventListener("scroll", handler);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          renderSlot(_ctx.$slots, "activator", {
+            on: unref(listeners),
+            activator: unref(activatorProps)
+          }),
+          createVNode(unref(_sfc_main$1), {
+            modelValue: model.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event)
+          }, {
+            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 */
+                  )), [
+                    [vShow, model.value],
+                    [unref(vClickOutside), onClickOutside]
+                  ]) : createCommentVNode("v-if", true)
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["name"])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["modelValue"])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CMenu/index.js

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

package/dist/components/COverlay/COverlay.js

@@ -0,0 +1,47 @@
+import { defineComponent, useModel, shallowRef, computed, watch, onBeforeUnmount, unref, openBlock, createBlock, Teleport, renderSlot, mergeModels } from 'vue';
+import { useOverlayStack } from '../../composables/use-overlay-stack.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "COverlay",
+    inheritAttrs: false
+  },
+  __name: "COverlay",
+  props: /* @__PURE__ */ mergeModels({
+    modelValue: { type: Boolean },
+    to: {}
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const { register, unregister } = useOverlayStack();
+    const model = useModel(__props, "modelValue");
+    const zIndex = shallowRef();
+    const target = computed(() => {
+      var _a;
+      return (_a = props.to) != null ? _a : "body";
+    });
+    watch(model, (val) => {
+      if (val) {
+        zIndex.value = register();
+      } else {
+        unregister();
+      }
+    }, { immediate: true });
+    onBeforeUnmount(() => {
+      if (unref(model)) {
+        unregister();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: target.value }, [
+        renderSlot(_ctx.$slots, "default", { zIndex: zIndex.value })
+      ], 8, ["to"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/COverlay/index.js

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

package/dist/components/CRadio/CRadio.js

@@ -0,0 +1,59 @@
+import { defineComponent, useModel, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, normalizeClass, renderSlot, withMemo, createVNode, createTextVNode, toDisplayString, mergeModels } from 'vue';
+
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { class: "c-radio__label" };
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CRadio"
+  },
+  __name: "CRadio",
+  props: /* @__PURE__ */ mergeModels({
+    label: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const model = useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      const _component_c_label = resolveComponent("c-label");
+      const _component_c_select_control = resolveComponent("c-select-control");
+      return openBlock(), createBlock(_component_c_select_control, mergeProps({
+        modelValue: model.value,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event)
+      }, _ctx.$attrs), {
+        default: withCtx(({ disabled, checked, toggle, readonly }) => [
+          createElementVNode("div", {
+            class: normalizeClass(["c-radio", {
+              "c-radio--disabled": disabled,
+              "c-radio--checked": checked,
+              "c-radio--readonly": readonly
+            }]),
+            onClick: toggle
+          }, [
+            createElementVNode("div", _hoisted_2, [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                withMemo([__props.label], () => createVNode(_component_c_label, null, {
+                  default: withCtx(() => [
+                    createTextVNode(
+                      toDisplayString(__props.label),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }), _cache, 0)
+              ])
+            ])
+          ], 10, _hoisted_1)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["modelValue"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CRadio/index.js

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

package/dist/components/CScrim/index.js

@@ -0,0 +1,16 @@
+import { h } from 'vue';
+import { isDef } from '../../helpers/index.js';
+
+const CScrim = (props, ctx) => {
+  var _a, _b, _c;
+  return h(
+    (_a = props.tag) != null ? _a : "div",
+    {
+      ...ctx.attrs,
+      class: ["c-scrim", { "c-scrim--blurred": isDef(props.blur) }]
+    },
+    (_c = (_b = ctx.slots).default) == null ? void 0 : _c.call(_b)
+  );
+};
+
+export { CScrim };

package/dist/components/CSelect/CSelect.js

@@ -0,0 +1,134 @@
+import { defineComponent, shallowRef, useModel, resolveComponent, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createElementVNode, toDisplayString, createVNode, renderSlot, toHandlers, renderList, normalizeProps, guardReactiveProps, mergeModels } from 'vue';
+import { useInputValue } from '../../composables/use-input-value.js';
+import _sfc_main$1 from '../CInput/CInput.js';
+import _sfc_main$2 from '../CMenu/CMenu.js';
+import _sfc_main$3 from '../CField/CField.js';
+import { IconAliases } from '../../enums/IconName.js';
+import { CItems } from '../CItems/CItems.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CSelect"
+  },
+  __name: "CSelect",
+  props: /* @__PURE__ */ mergeModels({
+    modelValue: {},
+    items: {},
+    multiple: { type: Boolean },
+    options: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const inputRef = shallowRef();
+    const model = useModel(__props, "modelValue", {
+      get: () => props.modelValue,
+      set: (val) => val
+    });
+    const inputValue = useInputValue(props);
+    function onCloseMenu() {
+      unref(inputRef).onBlur();
+    }
+    function onSelect(value) {
+      if (props.multiple) {
+        model.value = [...model.value, value];
+        return;
+      }
+      model.value = value;
+    }
+    return (_ctx, _cache) => {
+      const _component_c_icon = resolveComponent("c-icon");
+      return openBlock(), createBlock(unref(_sfc_main$1), mergeProps(_ctx.$attrs, {
+        ref_key: "inputRef",
+        ref: inputRef,
+        modelValue: model.value,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
+        "validate-on": "blur"
+      }), createSlots({
+        field: withCtx(({ onFocus, focused, presets, attrs, uid }) => [
+          createVNode(unref(_sfc_main$2), {
+            id: `${uid}-menu`,
+            bottom: "",
+            "open-on-focus": "",
+            "close-on-click-outside": "",
+            "close-on-content-click": !__props.multiple,
+            "offset-y": 2,
+            strategy: "reverse",
+            onClose: onCloseMenu
+          }, {
+            activator: withCtx(({ on, activator }) => [
+              createElementVNode(
+                "div",
+                mergeProps(activator, {
+                  class: ["c-select", presets]
+                }),
+                [
+                  createVNode(unref(_sfc_main$3), mergeProps({
+                    id: uid,
+                    class: "c-select__field"
+                  }, attrs, {
+                    "model-value": unref(inputValue),
+                    focused,
+                    readonly: "",
+                    "aria-controls": `${uid}-menu`,
+                    "aria-expanded": focused
+                  }, toHandlers(on), { onFocus }), null, 16, ["id", "model-value", "focused", "aria-controls", "aria-expanded", "onFocus"])
+                ],
+                16
+                /* FULL_PROPS */
+              )
+            ]),
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "menu", {
+                onSelect,
+                items: __props.items
+              }, () => [
+                createVNode(unref(CItems), {
+                  modelValue: model.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+                  items: __props.items,
+                  options: __props.options,
+                  multiple: __props.multiple,
+                  mandatory: ""
+                }, null, 8, ["modelValue", "items", "options", "multiple"])
+              ])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1032, ["id", "close-on-content-click"])
+        ]),
+        append: withCtx(() => [
+          createVNode(_component_c_icon, {
+            name: unref(IconAliases).DROPDOWN,
+            size: "20"
+          }, null, 8, ["name"])
+        ]),
+        details: withCtx(({ errorMessage }) => [
+          createElementVNode(
+            "span",
+            null,
+            toDisplayString(errorMessage),
+            1
+            /* TEXT */
+          )
+        ]),
+        _: 2
+        /* DYNAMIC */
+      }, [
+        renderList(_ctx.$slots, (_, slotName) => {
+          return {
+            name: slotName,
+            fn: withCtx((data) => [
+              renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(data)))
+            ])
+          };
+        })
+      ]), 1040, ["modelValue"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CSelect/index.js

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

package/dist/components/CSelectControl/CSelectControl.js

@@ -0,0 +1,61 @@
+import { defineComponent, useModel, computed, unref, renderSlot, mergeModels } from 'vue';
+import { isDef } from '../../helpers/index.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CSelectControl",
+  props: /* @__PURE__ */ mergeModels({
+    modelValue: { type: [Array, Boolean] },
+    value: {},
+    multiple: { type: Boolean },
+    focused: { type: Boolean },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    name: {}
+  }, {
+    "modelValue": { type: [Array, Boolean], ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const model = useModel(__props, "modelValue");
+    const { isArray } = Array;
+    const isInArray = computed(() => isArray(__props.modelValue) && __props.modelValue.includes(__props.value));
+    const isEqual = computed(() => __props.value === model.value);
+    const checked = computed(() => {
+      return isDef(__props.value) ? unref(isInArray) || unref(isEqual) : !!unref(model);
+    });
+    function checkOn() {
+      if (isArray(__props.modelValue)) {
+        model.value = [...__props.modelValue, __props.value];
+      } else {
+        model.value = isDef(__props.value) ? __props.value : !__props.modelValue;
+      }
+    }
+    function checkOff() {
+      if (isArray(__props.modelValue)) {
+        model.value = __props.modelValue.filter((it) => it !== __props.value);
+      } else {
+        model.value = isDef(__props.value) ? null : !__props.modelValue;
+      }
+    }
+    function toggle() {
+      if (__props.disabled || __props.readonly) {
+        return;
+      }
+      if (unref(checked)) {
+        return checkOff();
+      }
+      checkOn();
+    }
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default", {
+        checked: checked.value,
+        disabled: __props.disabled,
+        readonly: __props.readonly,
+        toggle
+      });
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CSelectControl/index.js

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

package/dist/components/CTextField/CTextField.js

@@ -0,0 +1,71 @@
+import { defineComponent, useModel, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createElementVNode, toDisplayString, normalizeClass, createVNode, renderList, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import _sfc_main$1 from '../CInput/CInput.js';
+import _sfc_main$2 from '../CField/CField.js';
+
+const _hoisted_1 = { class: "c-text-field__details" };
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CTextField"
+  },
+  __name: "CTextField",
+  props: {
+    "modelValue": {},
+    "modelModifiers": {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const model = useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), mergeProps({
+        modelValue: model.value,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event)
+      }, _ctx.$attrs), createSlots({
+        field: withCtx(({ onFocus, onInput, onBlur, focused, presets, attrs, uid }) => [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(["c-text-field", presets])
+            },
+            [
+              createVNode(unref(_sfc_main$2), mergeProps({
+                id: uid,
+                modelValue: model.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+                class: "c-text-field__input",
+                focused
+              }, attrs, {
+                onFocus,
+                onInput,
+                onBlur
+              }), null, 16, ["id", "modelValue", "focused", "onFocus", "onInput", "onBlur"])
+            ],
+            2
+            /* CLASS */
+          )
+        ]),
+        details: withCtx(({ errorMessage }) => [
+          createElementVNode(
+            "span",
+            _hoisted_1,
+            toDisplayString(errorMessage),
+            1
+            /* TEXT */
+          )
+        ]),
+        _: 2
+        /* DYNAMIC */
+      }, [
+        renderList(_ctx.$slots, (_, slotName) => {
+          return {
+            name: slotName,
+            fn: withCtx((data) => [
+              renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(data)))
+            ])
+          };
+        })
+      ]), 1040, ["modelValue"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CTextField/index.js

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

package/dist/components/CToolbar/CToolbar.js

@@ -0,0 +1,29 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CToolbar",
+  props: {
+    fixed: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const classes = computed(() => ({
+      "c-toolbar--fixed": props.fixed
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(["c-toolbar", classes.value])
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };