@vueland/ui 0.0.1 → 0.0.2

package/dist/components/CSelect/CSelect.js

@@ -1,20 +1,22 @@
-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 { defineComponent, useModel, shallowRef, resolveComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, toDisplayString, createVNode, Fragment, renderList, createTextVNode, createElementVNode, normalizeProps, guardReactiveProps, toHandlers, mergeModels } from 'vue';
+import { useNormalizedItems } from '../../composables/use-normalized-items.js';
+import { useSelectedChips } from '../../composables/use-selected-chips.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';
+import { useKeyboard } from '../../composables/use-keyboard.js';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "CSelect"
-  },
+  ...{ name: "CSelect" },
   __name: "CSelect",
   props: /* @__PURE__ */ mergeModels({
     modelValue: {},
-    items: {},
     multiple: { type: Boolean },
+    mandatory: { type: Boolean },
+    items: {},
+    titleKey: {},
+    valueKey: {},
     options: {}
   }, {
     "modelValue": {},
@@ -23,59 +25,113 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   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;
+    const inputRef = shallowRef();
+    const menuRef = shallowRef();
+    const normalizedItems = useNormalizedItems(props);
+    const {
+      chips: selectedItems,
+      hasValue,
+      select
+    } = useSelectedChips(props);
+    const { onKeydown } = useKeyboard({
+      Tab: () => {
+        unref(inputRef).blur();
+        unref(menuRef).close();
       }
-      model.value = value;
+    });
+    function onBlur() {
+      unref(inputRef).blur();
+    }
+    function onClear() {
+      model.value = props.multiple ? [] : void 0;
+    }
+    function onFocus() {
+      unref(inputRef).focus();
     }
     return (_ctx, _cache) => {
       const _component_c_icon = resolveComponent("c-icon");
+      const _component_c_list_item_title = resolveComponent("c-list-item-title");
+      const _component_c_list_item = resolveComponent("c-list-item");
+      const _component_c_list = resolveComponent("c-list");
       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 }) => [
+        "model-value": model.value,
+        "validate-on": "blur",
+        kind: "listbox"
+      }), {
+        field: withCtx((field) => [
           createVNode(unref(_sfc_main$2), {
-            id: `${uid}-menu`,
+            id: `${field.uid}-menu`,
+            ref_key: "menuRef",
+            ref: menuRef,
             bottom: "",
             "open-on-focus": "",
             "close-on-click-outside": "",
             "close-on-content-click": !__props.multiple,
             "offset-y": 2,
             strategy: "reverse",
-            onClose: onCloseMenu
+            onClose: onBlur
           }, {
             activator: withCtx(({ on, activator }) => [
               createElementVNode(
                 "div",
-                mergeProps(activator, {
-                  class: ["c-select", presets]
-                }),
+                mergeProps({ class: "c-select" }, activator),
                 [
-                  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"])
+                  renderSlot(_ctx.$slots, "field", normalizeProps(guardReactiveProps(field)), () => [
+                    createVNode(unref(_sfc_main$3), mergeProps({
+                      id: field.uid
+                    }, field.attrs, {
+                      focused: field.focused,
+                      "model-value": "",
+                      class: "c-select__field",
+                      label: field.label,
+                      clearable: field.clearable,
+                      filled: unref(hasValue),
+                      preset: field.preset,
+                      error: field.hasError,
+                      "no-input": ""
+                    }, toHandlers(on), {
+                      onFocus,
+                      onClear,
+                      onKeydown: unref(onKeydown)
+                    }), {
+                      before: withCtx(() => [
+                        renderSlot(_ctx.$slots, "selects", { items: unref(selectedItems) }, () => [
+                          (openBlock(true), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList(unref(selectedItems), (it, i) => {
+                              return openBlock(), createElementBlock(
+                                "div",
+                                {
+                                  key: it,
+                                  class: "c-selected__item"
+                                },
+                                toDisplayString(`${it}` + (i + 1 !== unref(selectedItems).length ? "," : "")),
+                                1
+                                /* TEXT */
+                              );
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ])
+                      ]),
+                      append: withCtx(() => [
+                        createVNode(_component_c_icon, {
+                          name: unref(IconAliases).DROPDOWN,
+                          size: "20"
+                        }, null, 8, ["name"])
+                      ]),
+                      _: 3
+                      /* FORWARDED */
+                    }, 16, ["id", "focused", "label", "clearable", "filled", "preset", "error", "onKeydown"])
+                  ])
                 ],
                 16
                 /* FULL_PROPS */
@@ -83,50 +139,83 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "menu", {
-                onSelect,
-                items: __props.items
+                onSelect: unref(select),
+                items: unref(normalizedItems)
               }, () => [
-                createVNode(unref(CItems), {
+                createVNode(_component_c_list, {
+                  ref: "menuListRef",
                   modelValue: model.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
-                  items: __props.items,
-                  options: __props.options,
+                  role: "listbox",
+                  selectable: "",
                   multiple: __props.multiple,
-                  mandatory: ""
-                }, null, 8, ["modelValue", "items", "options", "multiple"])
+                  mandatory: __props.mandatory
+                }, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(unref(normalizedItems), (item) => {
+                        var _a;
+                        return openBlock(), createBlock(_component_c_list_item, {
+                          key: item.key,
+                          value: (_a = item.value) != null ? _a : item.raw
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(
+                              _component_c_list_item_title,
+                              null,
+                              {
+                                default: withCtx(() => [
+                                  createTextVNode(
+                                    toDisplayString(item.title),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ]),
+                                _: 2
+                                /* DYNAMIC */
+                              },
+                              1024
+                              /* DYNAMIC_SLOTS */
+                            )
+                          ]),
+                          _: 2
+                          /* DYNAMIC */
+                        }, 1032, ["value"]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["modelValue", "multiple", "mandatory"])
               ])
             ]),
             _: 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 */
-          )
+        details: withCtx(({ errorMessage, details }) => [
+          renderSlot(_ctx.$slots, "details", {
+            errorMessage,
+            details
+          }, () => [
+            (openBlock(), createElementBlock(
+              "span",
+              {
+                key: errorMessage || details
+              },
+              toDisplayString(errorMessage || details),
+              1
+              /* TEXT */
+            ))
+          ])
         ]),
-        _: 2
-        /* DYNAMIC */
-      }, [
-        renderList(_ctx.$slots, (_, slotName) => {
-          return {
-            name: slotName,
-            fn: withCtx((data) => [
-              renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(data)))
-            ])
-          };
-        })
-      ]), 1040, ["modelValue"]);
+        _: 3
+        /* FORWARDED */
+      }, 16, ["model-value"]);
     };
   }
 });

package/dist/components/CSelectControl/CSelectControl.js

@@ -1,5 +1,6 @@
-import { defineComponent, useModel, computed, unref, renderSlot, mergeModels } from 'vue';
+import { defineComponent, useModel, computed, unref, provide, renderSlot, mergeModels } from 'vue';
 import { isDef } from '../../helpers/index.js';
+import { $SELECT_CONTROL_API_KEY } from '../../constants/provide-keys.js';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "CSelectControl",
@@ -16,7 +17,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const model = useModel(__props, "modelValue");
     const { isArray } = Array;
     const isInArray = computed(() => isArray(__props.modelValue) && __props.modelValue.includes(__props.value));
@@ -47,6 +48,17 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       checkOn();
     }
+    provide($SELECT_CONTROL_API_KEY, {
+      checked,
+      toggle,
+      checkOn,
+      checkOff
+    });
+    __expose({
+      checkOn,
+      checkOff,
+      toggle
+    });
     return (_ctx, _cache) => {
       return renderSlot(_ctx.$slots, "default", {
         checked: checked.value,

package/dist/components/CTextField/CTextField.js

@@ -1,69 +1,96 @@
-import { defineComponent, useModel, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createElementVNode, toDisplayString, normalizeClass, createVNode, renderList, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import { defineComponent, useModel, shallowRef, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, toDisplayString, createElementVNode, createVNode, createSlots, mergeModels } 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" };
+const _hoisted_1 = { class: "c-text-field" };
 var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "CTextField"
-  },
+  ...{ name: "CTextField" },
   __name: "CTextField",
   props: {
     "modelValue": {},
     "modelModifiers": {}
   },
-  emits: ["update:modelValue"],
-  setup(__props) {
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue"], ["update:modelValue"]),
+  setup(__props, { expose: __expose }) {
     const model = useModel(__props, "modelValue");
+    const inputRef = shallowRef();
+    function validate() {
+      var _a;
+      return (_a = inputRef.value) == null ? void 0 : _a.validate();
+    }
+    function reset() {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.reset();
+    }
+    function onClear() {
+      model.value = void 0;
+    }
+    __expose({ validate, reset });
     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 */
-          )
+        ref_key: "inputRef",
+        ref: inputRef,
+        "model-value": model.value
+      }, _ctx.$attrs, { kind: "input" }), {
+        field: withCtx(({ focus, blur, focused, preset, attrs, uid, label, clearable, readonly, disabled, hasError }) => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(unref(_sfc_main$2), mergeProps({
+              id: uid,
+              modelValue: model.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+              focused,
+              label,
+              preset,
+              readonly,
+              disabled,
+              clearable,
+              error: hasError
+            }, attrs, {
+              onFocus: focus,
+              onBlur: blur,
+              onClear
+            }), createSlots({
+              _: 2
+              /* DYNAMIC */
+            }, [
+              _ctx.$slots.prepend ? {
+                name: "prepend",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "prepend")
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.append ? {
+                name: "append",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "append")
+                ]),
+                key: "1"
+              } : void 0
+            ]), 1040, ["id", "modelValue", "focused", "label", "preset", "readonly", "disabled", "clearable", "error", "onFocus", "onBlur"])
+          ])
         ]),
-        details: withCtx(({ errorMessage }) => [
-          createElementVNode(
-            "span",
-            _hoisted_1,
-            toDisplayString(errorMessage),
-            1
-            /* TEXT */
-          )
+        details: withCtx(({ errorMessage, details, hasError }) => [
+          renderSlot(_ctx.$slots, "details", {
+            errorMessage,
+            details,
+            hasError
+          }, () => [
+            (openBlock(), createElementBlock(
+              "span",
+              {
+                key: errorMessage || details,
+                class: "c-text-field__details"
+              },
+              toDisplayString(errorMessage || details),
+              1
+              /* TEXT */
+            ))
+          ])
         ]),
-        _: 2
-        /* DYNAMIC */
-      }, [
-        renderList(_ctx.$slots, (_, slotName) => {
-          return {
-            name: slotName,
-            fn: withCtx((data) => [
-              renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(data)))
-            ])
-          };
-        })
-      ]), 1040, ["modelValue"]);
+        _: 3
+        /* FORWARDED */
+      }, 16, ["model-value"]);
     };
   }
 });

package/dist/components/CTextField/index.js

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

package/dist/components/CTextField/index2.js

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

package/dist/components/CToolbar/CToolbar.js

@@ -7,9 +7,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const classes = computed(() => ({
-      "c-toolbar--fixed": props.fixed
-    }));
+    const classes = computed(() => ({ "c-toolbar--fixed": props.fixed }));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",

package/dist/components/CTooltip/CTooltip.js

@@ -3,9 +3,7 @@ import _sfc_main$1 from '../CMenu/CMenu.js';
 
 const _hoisted_1 = { class: "c-tooltip" };
 var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "CTooltip"
-  },
+  ...{ name: "CTooltip" },
   __name: "CTooltip",
   setup(__props) {
     const attrs = useAttrs();

package/dist/components/global-components.d.ts

@@ -0,0 +1,44 @@
+export {}
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        CApp: typeof import('./CApp').CApp
+        CAutocomplete: typeof import('./CAutocomplete').CAutocomplete
+        CBtn: typeof import('./CBtn').CBtn
+        CCard: typeof import('./CCard').CCard
+        CCardHeader: typeof import('./CCard').CCardHeader
+        CCardBody: typeof import('./CCard').CCardBody
+        CCardFooter: typeof import('./CCard').CCardFooter
+        CCheckbox: typeof import('./CCheckbox').CCheckbox
+        CChip: typeof import('./CChip').CChip
+        CDialog: typeof import('./CDialog').CDialog
+        CDialogsStack: typeof import('./CDialog').CDialogsStack
+        CDatePicker: typeof import('./CDatePicker').CDatePicker
+        CDateInput: typeof import('./CDateInput').CDateInput
+        COverlay: typeof import('./COverlay').COverlay
+        CField: typeof import('./CField').CField
+        CForm: typeof import('./CForm').CForm
+        CRow: typeof import('./CGrid').CRow
+        CCol: typeof import('./CGrid').CCol
+        CSpacer: typeof import('./CGrid').CSpacer
+        CIcon: typeof import('./CIcon').CIcon
+        CInput: typeof import('./CInput').CInput
+        CItems: typeof import('./CItems').CItems
+        CLabel: typeof import('./CLabel').CLabel
+        CList: typeof import('./CList').CList
+        CListItem: typeof import('./CList').CListItem
+        CListItemTitle: typeof import('./CList').CListItemTitle
+        CListItemIcon: typeof import('./CList').CListItemIcon
+        CMain: typeof import('./CMain').CMain
+        CMenu: typeof import('./CMenu').CMenu
+        CRadio: typeof import('./CRadio').CRadio
+        CSelect: typeof import('./CSelect').CSelect
+        CSelectControl: typeof import('./CSelectControl').CSelectControl
+        CTextField: typeof import('./CTextField').CTextField
+        CToolbar: typeof import('./CToolbar').CToolbar
+        CToolbarLogo: typeof import('./CToolbar').CToolbarLogo
+        CToolbarItems: typeof import('./CToolbar').CToolbarItems
+        CTooltip: typeof import('./CTooltip').CTooltip
+        CScrim: typeof import('./CScrim').CScrim
+    }
+}