@vueland/ui 0.0.1 → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Allakhverdiev Anar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,137 @@
+<div align="center">
+  <img src="https://raw.githubusercontent.com/vueland/vueland/master/logo.png" style="max-width: 100%;">
+</div>
+
+# @vueland/ui
+
+> **⚠️ Active development — not production ready**
+> The library is under active development. APIs may change between releases without notice. Use in production at your own risk.
+
+Vue 3 component library for the Vueland platform. Provides a set of UI components, a 12-column flexbox grid system, utility classes, and a single breakpoint configuration shared across all layers.
+
+## Documentation
+
+Full documentation, examples, and guides are available at:
+
+https://vueland.github.io/vueland/en/guide/getting-started
+
+## Installation
+
+::: code-group
+
+```bash [pnpm]
+pnpm add @vueland/ui
+```
+
+```bash [npm]
+npm install @vueland/ui
+```
+
+```bash [yarn]
+yarn add @vueland/ui
+```
+
+## Setup
+
+### 1. Register the library
+
+```ts
+// src/main.ts
+import { createApp } from 'vue'
+import { createVuelandUI } from '@vueland/ui'
+import * as components from '@vueland/ui/components'
+
+import '@vueland/ui/src/styles/styles.scss'
+import '@vueland/ui/src/styles/themes/default-theme.scss'
+
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(createVuelandUI({ components }))
+app.mount('#app')
+```
+
+> **Import SCSS source, not pre-compiled CSS.** The styles are compiled by Vite at build time. If you import `dist/styles.css`, custom breakpoints configured via `@vueland/utils-jit` will not be applied.
+
+### 2. Use components
+
+Components are registered globally after `app.use(vueland)`:
+
+```vue
+<template>
+  <c-row>
+    <c-col cols="12" sm="6" md="4">
+      <c-card class="pa-4 elevation-2">Hello Vueland</c-card>
+    </c-col>
+  </c-row>
+</template>
+```
+
+## Breakpoints
+
+The default breakpoint scale follows Material Design:
+
+| Name | min-width |
+|------|-----------|
+| xs   | 0         |
+| sm   | 600px     |
+| md   | 960px     |
+| lg   | 1280px    |
+| xl   | 1920px    |
+| xxl  | 2560px    |
+
+Breakpoints are shared across four layers: predefined SCSS utility classes, JIT classes, grid components (`CRow`, `CCol`), and the `useDisplay` composable.
+
+To customize them, use [`@vueland/utils-jit`](https://www.npmjs.com/package/@vueland/utils-jit) — one config in `vite.config.ts` syncs all layers automatically. See the [Breakpoints guide](https://vueland.github.io/vueland/en/guide/breakpoints) for the full step-by-step setup.
+
+## Grid system
+
+12-column flexbox grid built on `CRow`, `CCol`, and `CSpacer`:
+
+```vue
+<c-row align="center" justify="space-between">
+  <!-- full width on mobile, 6 cols on sm+, 4 cols on md+ -->
+  <c-col cols="12" sm="6" md="4">
+    <c-card class="pa-4">Card</c-card>
+  </c-col>
+</c-row>
+```
+
+Responsive column props, offset, order, and row-level alignment all follow the same breakpoint scale.
+
+## Utility classes
+
+Predefined utility classes cover spacing, colors, typography, flex, display, sizing, elevation, borders, and more. All support responsive prefixes:
+
+```html
+<div class="pa-2 md:pa-6 lg:pa-10">responsive padding</div>
+<div class="d-none md:d-flex">hidden on mobile</div>
+<div class="bg-indigo text-white radius-12 elevation-2">styled card</div>
+```
+
+## `useDisplay` composable
+
+Reactive screen state in JS/Vue, synced to the same breakpoints:
+
+```vue
+<script setup lang="ts">
+import { inject } from 'vue'
+import { $BREAKPOINTS_KEY } from '@vueland/ui/constants'
+
+const display = inject($BREAKPOINTS_KEY)!
+</script>
+
+<template>
+  <c-col :cols="display.mdAndUp.value ? 6 : 12">
+    Adaptive column
+  </c-col>
+</template>
+```
+
+## npm
+
+https://www.npmjs.com/package/@vueland/ui
+
+## License
+
+MIT

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+export { _export_sfc as default };

package/dist/components/CApp/CApp.js

@@ -4,9 +4,7 @@ import { $APP_API_KEY } from '../../constants/provide-keys.js';
 
 const _hoisted_1 = { class: "c-app__wrapper" };
 var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "CApp"
-  },
+  ...{ name: "CApp" },
   __name: "CApp",
   setup(__props) {
     const {
@@ -29,6 +27,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         {
           ref_key: "appRef",
           ref: appRef,
+          role: "application",
           class: normalizeClass(["c-app", unref(classes)])
         },
         [

package/dist/components/CAutocomplete/CAutocomplete.js

@@ -1,20 +1,21 @@
-import { defineComponent, shallowRef, useModel, watch, unref, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementVNode, toDisplayString, createVNode, renderSlot, createTextVNode, isRef, toHandlers, renderList, normalizeProps, guardReactiveProps, mergeModels } from 'vue';
+import { defineComponent, useModel, shallowRef, watch, unref, resolveComponent, openBlock, createBlock, mergeProps, withCtx, renderSlot, createElementBlock, toDisplayString, createVNode, Fragment, renderList, createTextVNode, createElementVNode, normalizeProps, guardReactiveProps, isRef, toHandlers, mergeModels } from 'vue';
 import { useAutocomplete } from '../../composables/use-autocomplete.js';
 import _sfc_main$1 from '../CInput/CInput.js';
 import _sfc_main$2 from '../CMenu/CMenu.js';
-import { CItems } from '../CItems/CItems.js';
 import _sfc_main$3 from '../CField/CField.js';
 import { IconAliases } from '../../enums/IconName.js';
+import { useKeyboard } from '../../composables/use-keyboard.js';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "CAutocomplete"
-  },
+  ...{ name: "CAutocomplete" },
   __name: "CAutocomplete",
   props: /* @__PURE__ */ mergeModels({
-    modelValue: {},
     items: {},
+    titleKey: {},
+    valueKey: {},
+    modelValue: {},
     multiple: { type: Boolean },
+    mandatory: { type: Boolean },
     options: {}
   }, {
     "modelValue": {},
@@ -24,41 +25,70 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { input, searchItems, rollbackValue } = useAutocomplete(props);
-    const inputRef = shallowRef();
     const model = useModel(__props, "modelValue", {
       get: () => props.modelValue,
       set: (val) => val
     });
-    function onCloseMenu() {
-      unref(inputRef).onBlur();
-    }
-    function onSelect(value) {
-      if (props.multiple) {
-        model.value = [...model.value, value];
-        return;
+    const {
+      inputValue,
+      searchItems,
+      chips,
+      hasValue,
+      select
+    } = useAutocomplete(props);
+    const inputRef = shallowRef();
+    const fieldRef = shallowRef();
+    const menuRef = shallowRef();
+    const menuListRef = shallowRef();
+    const { onKeydown } = useKeyboard({
+      Backspace: () => {
+        if (!unref(inputValue)) {
+          const data = unref(model);
+          model.value = props.multiple ? data.slice(0, -1) : void 0;
+        }
+      },
+      Tab: () => {
+        unref(inputRef).blur();
+        unref(menuRef).close();
+      },
+      Escape: () => {
+        unref(inputRef).blur();
+        unref(fieldRef).$el.blur();
+      },
+      ArrowDown: () => {
+        menuListRef.value.focus();
       }
-      model.value = value;
+    });
+    function clear() {
+      model.value = props.multiple ? [] : void 0;
+      inputValue.value = "";
     }
-    watch(input, (val) => {
-      emit("update:search", unref(input));
-      if (!val) {
-        model.value = props.multiple ? [] : void 0;
-      }
+    function focus() {
+      unref(inputRef).focus();
+    }
+    function blur() {
+      unref(inputRef).blur();
+    }
+    watch(inputValue, () => {
+      emit("update:search", unref(inputValue));
     });
     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({
         ref_key: "inputRef",
         ref: inputRef,
-        modelValue: model.value,
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => model.value = $event)
-      }, _ctx.$attrs, { "validate-on": "blur" }), createSlots({
-        field: withCtx(({ onInput, onFocus, focused, presets, readonly, attrs, uid }) => {
+        "model-value": model.value
+      }, _ctx.$attrs, { kind: "listbox" }), {
+        field: withCtx((field) => {
           var _a;
           return [
             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": "",
@@ -66,29 +96,72 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               "offset-y": 2,
               strategy: "reverse",
               preset: (_a = __props.options) == null ? void 0 : _a.menuPreset,
-              onClose: onCloseMenu,
-              onOpen: unref(rollbackValue)
+              onClose: blur
             }, {
               activator: withCtx(({ on, activator }) => [
                 createElementVNode(
                   "div",
-                  mergeProps({ class: "c-autocomplete" }, activator, { class: presets }),
+                  mergeProps({ class: "c-autocomplete" }, activator),
                   [
-                    createVNode(unref(_sfc_main$3), mergeProps({
-                      id: uid,
-                      modelValue: unref(input),
-                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(input) ? input.value = $event : null),
-                      class: "c-autocomplete__field",
-                      type: "text",
-                      focused
-                    }, attrs, {
-                      readonly,
-                      "aria-controls": `${uid}-menu`,
-                      "aria-expanded": focused
-                    }, toHandlers(on), {
-                      onFocus,
-                      onInput
-                    }), null, 16, ["id", "modelValue", "focused", "readonly", "aria-controls", "aria-expanded", "onFocus", "onInput"])
+                    renderSlot(_ctx.$slots, "field", normalizeProps(guardReactiveProps(field)), () => [
+                      createVNode(unref(_sfc_main$3), mergeProps({
+                        id: field.uid,
+                        ref_key: "fieldRef",
+                        ref: fieldRef,
+                        modelValue: unref(inputValue),
+                        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(inputValue) ? inputValue.value = $event : null)
+                      }, field.attrs, {
+                        class: "c-autocomplete__field",
+                        label: field.label,
+                        clearable: field.clearable,
+                        disabled: field.disabled,
+                        focused: field.focused,
+                        readonly: field.readonly,
+                        preset: field.preset,
+                        filled: unref(hasValue),
+                        error: field.hasError
+                      }, toHandlers(on), {
+                        onFocus: focus,
+                        onKeydown: unref(onKeydown),
+                        onClear: clear
+                      }), {
+                        prepend: withCtx(() => [
+                          renderSlot(_ctx.$slots, "prepend")
+                        ]),
+                        append: withCtx(() => [
+                          renderSlot(_ctx.$slots, "append", {}, () => [
+                            createVNode(_component_c_icon, {
+                              name: unref(IconAliases).DROPDOWN,
+                              size: "20"
+                            }, null, 8, ["name"])
+                          ])
+                        ]),
+                        before: withCtx(() => [
+                          renderSlot(_ctx.$slots, "chips", { items: unref(chips) }, () => [
+                            (openBlock(true), createElementBlock(
+                              Fragment,
+                              null,
+                              renderList(unref(chips), (it, i) => {
+                                return openBlock(), createElementBlock(
+                                  "div",
+                                  {
+                                    key: it,
+                                    class: "c-autocomplete__item"
+                                  },
+                                  toDisplayString(`${it}` + (i + 1 !== unref(chips).length ? "," : "")),
+                                  1
+                                  /* TEXT */
+                                );
+                              }),
+                              128
+                              /* KEYED_FRAGMENT */
+                            ))
+                          ])
+                        ]),
+                        _: 3
+                        /* FORWARDED */
+                      }, 16, ["id", "modelValue", "label", "clearable", "disabled", "focused", "readonly", "preset", "filled", "error", "onKeydown"])
+                    ])
                   ],
                   16
                   /* FULL_PROPS */
@@ -96,66 +169,85 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "menu", {
-                  onSelect,
+                  onSelect: unref(select),
                   items: unref(searchItems)
                 }, () => [
-                  createVNode(unref(CItems), {
+                  createVNode(_component_c_list, {
+                    ref_key: "menuListRef",
+                    ref: menuListRef,
                     modelValue: model.value,
                     "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
-                    options: __props.options,
-                    items: unref(searchItems),
+                    role: "listbox",
+                    selectable: "",
                     multiple: __props.multiple,
-                    mandatory: ""
+                    mandatory: __props.mandatory
                   }, {
-                    "no-items-message": withCtx(() => [
-                      renderSlot(_ctx.$slots, "no-items-message", {}, () => {
-                        var _a2, _b;
-                        return [
-                          createTextVNode(
-                            toDisplayString((_b = (_a2 = __props.options) == null ? void 0 : _a2.noItemsMessage) != null ? _b : "\u041D\u0435\u0442 \u0441\u043E\u0432\u043F\u0430\u0434\u0435\u043D\u0438\u0439"),
-                            1
-                            /* TEXT */
-                          )
-                        ];
-                      })
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(unref(searchItems), (item) => {
+                          var _a2;
+                          return openBlock(), createBlock(_component_c_list_item, {
+                            key: item.key,
+                            value: (_a2 = item.value) != null ? _a2 : 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 */
+                      ))
                     ]),
-                    _: 3
-                    /* FORWARDED */
-                  }, 8, ["modelValue", "options", "items", "multiple"])
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["modelValue", "multiple", "mandatory"])
                 ])
               ]),
               _: 2
               /* DYNAMIC */
-            }, 1032, ["id", "close-on-content-click", "preset", "onOpen"])
+            }, 1032, ["id", "close-on-content-click", "preset"])
           ];
         }),
-        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/CBtn/CBtn.js

@@ -1,49 +1,48 @@
 import { defineComponent, computed, unref, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from 'vue';
 import { useButtonPresets } from '../../composables/use-button-presets.js';
 
+const _hoisted_1 = ["disabled"];
 var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "CBtn"
-  },
+  ...{ name: "CBtn" },
   __name: "CBtn",
   props: {
     preset: {},
     variant: {},
-    block: { type: Boolean }
+    block: { type: Boolean },
+    disabled: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const preset = useButtonPresets({ props });
     const classes = computed(() => [
       {
         "c-btn--flat": !props.variant || props.variant === "flat",
         "c-btn--outlined": props.variant === "outlined",
-        "c-btn--block": props.block
+        "c-btn--block": props.block,
+        "c-btn--disabled": props.disabled
       },
       ...unref(preset).root
     ]);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "button",
-        {
-          class: normalizeClass(["c-btn", classes.value])
-        },
-        [
-          createElementVNode(
-            "div",
-            {
-              class: normalizeClass(["c-btn__label", unref(preset).label])
-            },
-            [
-              renderSlot(_ctx.$slots, "default")
-            ],
-            2
-            /* CLASS */
-          )
-        ],
-        2
-        /* CLASS */
-      );
+      return openBlock(), createElementBlock("button", {
+        class: normalizeClass(["c-btn", classes.value]),
+        disabled: __props.disabled,
+        onClick: _cache[0] || (_cache[0] = (e) => emit("click", e))
+      }, [
+        createElementVNode(
+          "div",
+          {
+            class: normalizeClass(["c-btn__label", unref(preset).label])
+          },
+          [
+            renderSlot(_ctx.$slots, "default")
+          ],
+          2
+          /* CLASS */
+        )
+      ], 10, _hoisted_1);
     };
   }
 });