@code-coaching/vuetiful 0.11.3 → 0.12.1

package/dist/types/components/atoms/VRadioGroup.vue.d.ts

@@ -0,0 +1,32 @@
+declare const _default: import("vue").DefineComponent<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    labelledby: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    labelledby: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    labelledby: string;
+}>;
+export default _default;

package/dist/types/components/atoms/VRadioItem.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/components/atoms/index.d.ts

@@ -1,4 +1,6 @@
 import VBadge from "./VBadge.vue";
 import VButton from "./VButton.vue";
 import VChip from "./VChip.vue";
-export { VButton, VBadge, VChip };
+import VRadioGroup from "./VRadioGroup.vue";
+import VRadioItem from "./VRadioItem.vue";
+export { VButton, VBadge, VChip, VRadioGroup, VRadioItem };

package/dist/types/components/index.d.ts

@@ -1,3 +1,3 @@
-import { VBadge, VButton, VChip } from "./atoms";
+import { VBadge, VButton, VChip, VRadioGroup, VRadioItem } from "./atoms";
 import { VDrawer, VRail, VRailTile, VShell } from "./molecules";
-export { VButton, VRail, VRailTile, VShell, VDrawer, VBadge, VChip };
+export { VButton, VRail, VRailTile, VShell, VDrawer, VBadge, VChip, VRadioGroup, VRadioItem };

package/dist/types/components/molecules/VDrawer.vue.d.ts

@@ -34,9 +34,9 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
+    labelledby: string;
     regionBackdrop: string;
     regionDrawer: string;
-    labelledby: string;
     describedby: string;
 }>;
 export default _default;

package/dist/types/utils/code-block/VCodeBlock.vue.d.ts

@@ -71,8 +71,8 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onCopy?: (() => any) | undefined;
 }, {
-    language: string;
     code: string;
+    language: string;
     preventOverflow: boolean;
     headerClass: string;
     preClass: string;

package/dist/vuetiful.es.mjs

@@ -1,4 +1,4 @@
-import { openBlock, createElementBlock, renderSlot, normalizeClass, defineComponent, createBlock, resolveDynamicComponent, withCtx, ref, reactive, readonly, toRefs, computed, onMounted, Fragment, createVNode, Transition, unref, createCommentVNode, provide, createElementVNode, useAttrs, inject, mergeProps, toDisplayString, withDirectives, createTextVNode, resolveComponent, renderList, pushScopeId, popScopeId } from "vue";
+import { openBlock, createElementBlock, renderSlot, normalizeClass, defineComponent, createBlock, resolveDynamicComponent, withCtx, ref, provide, watch, inject, computed, createElementVNode, unref, withDirectives, isRef, vModelRadio, reactive, readonly, toRefs, onMounted, Fragment, createVNode, Transition, createCommentVNode, useAttrs, mergeProps, toDisplayString, createTextVNode, resolveComponent, renderList, pushScopeId, popScopeId } from "vue";
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -6,17 +6,17 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$9 = {};
-const _hoisted_1$7 = {
+const _sfc_main$b = {};
+const _hoisted_1$8 = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-badge badge`)
 };
 function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$7, [
+  return openBlock(), createElementBlock("div", _hoisted_1$8, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$3]]);
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$3]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "VButton",
   props: {
     icon: {
@@ -66,16 +66,198 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = {};
-const _hoisted_1$6 = {
+const _sfc_main$9 = {};
+const _hoisted_1$7 = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-chip chip`)
 };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$6, [
+  return openBlock(), createElementBlock("div", _hoisted_1$7, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$2]]);
+var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$2]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "VRadioGroup",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: [String, Number],
+      required: true
+    },
+    labelledby: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const radioGroupRef = ref();
+    const selectedOption = ref(props.modelValue);
+    provide("selectedOption", selectedOption);
+    provide("name", props.name);
+    provide("radioGroup", radioGroupRef);
+    watch(selectedOption, (newVal) => {
+      emits("update:modelValue", newVal);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "radioGroupRef",
+        ref: radioGroupRef,
+        role: "radiogroup",
+        class: "radio-group inline-flex space-x-1 p-1 bg-surface-200-700-token border-token border-surface-400-500-token rounded-token",
+        tabindex: "-1"
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512);
+    };
+  }
+});
+const _hoisted_1$6 = ["aria-checked", "tabindex", "name"];
+const _hoisted_2$4 = { class: "h-0 w-0 overflow-hidden" };
+const _hoisted_3$2 = ["name", "value"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "VRadioItem",
+  props: {
+    value: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const radioGroup = inject("radioGroup");
+    const selectedOption = inject("selectedOption");
+    const name = inject("name");
+    const id = `radio-${Math.random().toString(36).substring(2, 9)}`;
+    const isFirst = computed(() => {
+      var _a, _b;
+      const idOfFirstChild = (_b = (_a = radioGroup.value) == null ? void 0 : _a.children[0].querySelector("input")) == null ? void 0 : _b.id;
+      return idOfFirstChild === id;
+    });
+    const checked = computed(() => {
+      return selectedOption.value === props.value;
+    });
+    const tabbable = computed(() => {
+      if (!selectedOption.value)
+        return isFirst.value ? 0 : -1;
+      return selectedOption.value === props.value ? 0 : -1;
+    });
+    const setChecked = (target) => {
+      const input = target.querySelector("input");
+      input == null ? void 0 : input.click();
+      input == null ? void 0 : input.focus();
+    };
+    const setCheckedToNextItem = (target) => {
+      var _a, _b;
+      const activeId = (_a = target.querySelector("input")) == null ? void 0 : _a.id;
+      const children = (_b = radioGroup.value) == null ? void 0 : _b.children;
+      const activeChild = Array.from(children).find((child) => {
+        const input2 = child.querySelector("input");
+        return (input2 == null ? void 0 : input2.id) === activeId;
+      });
+      const firstchild = children[0];
+      const isLast = activeChild === children[children.length - 1];
+      if (isLast) {
+        const input2 = firstchild.querySelector("input");
+        if (input2) {
+          input2.click();
+          input2.focus();
+        }
+        return;
+      }
+      const nextChild = activeChild == null ? void 0 : activeChild.nextElementSibling;
+      const input = nextChild == null ? void 0 : nextChild.querySelector("input");
+      if (input) {
+        input.click();
+        input.focus();
+      }
+    };
+    const setCheckedToPreviousItem = (target) => {
+      var _a, _b;
+      const activeId = (_a = target.querySelector("input")) == null ? void 0 : _a.id;
+      const children = (_b = radioGroup.value) == null ? void 0 : _b.children;
+      const activeChild = Array.from(children).find((child) => {
+        const input2 = child.querySelector("input");
+        return (input2 == null ? void 0 : input2.id) === activeId;
+      });
+      const lastchild = children[children.length - 1];
+      const isFirst2 = activeChild === children[0];
+      if (isFirst2) {
+        const input2 = lastchild.querySelector("input");
+        if (input2) {
+          input2.click();
+          input2.focus();
+        }
+        return;
+      }
+      const previousChild = activeChild == null ? void 0 : activeChild.previousElementSibling;
+      const input = previousChild == null ? void 0 : previousChild.querySelector("input");
+      if (input) {
+        input.click();
+        input.focus();
+      }
+    };
+    const handleKeydown = (event) => {
+      const target = event.currentTarget;
+      let flag = false;
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          setChecked(target);
+          flag = true;
+          break;
+        case "Up":
+        case "ArrowUp":
+        case "Left":
+        case "ArrowLeft":
+          setCheckedToPreviousItem(target);
+          flag = true;
+          break;
+        case "Down":
+        case "ArrowDown":
+        case "Right":
+        case "ArrowRight":
+          setCheckedToNextItem(target);
+          flag = true;
+          break;
+      }
+      if (flag) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", { for: id }, [
+        createElementVNode("div", {
+          class: normalizeClass(`radio-item cursor-pointer px-4 py-1 text-center text-base rounded-token ${unref(checked) ? "variant-filled" : "hover:variant-soft"} `),
+          role: "radio",
+          "aria-checked": unref(checked),
+          tabindex: unref(tabbable),
+          name: unref(name),
+          onKeydown: handleKeydown
+        }, [
+          createElementVNode("div", _hoisted_2$4, [
+            withDirectives(createElementVNode("input", {
+              tabindex: "-1",
+              type: "radio",
+              id,
+              name: unref(name),
+              value: __props.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(selectedOption) ? selectedOption.value = $event : null)
+            }, null, 8, _hoisted_3$2), [
+              [vModelRadio, unref(selectedOption)]
+            ])
+          ]),
+          renderSlot(_ctx.$slots, "default")
+        ], 42, _hoisted_1$6)
+      ]);
+    };
+  }
+});
 const selectedRailTile = ref("");
 const useRail = () => {
   return {
@@ -355,6 +537,7 @@ const _sfc_main$3 = defineComponent({
             renderSlot(_ctx.$slots, "sidebarLeft")
           ], 2)) : createCommentVNode("", true),
           createElementVNode("div", {
+            tabindex: "-1",
             class: normalizeClass(`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${(_a = __props.regionPage) != null ? _a : ""}`)
           }, [
             _ctx.$slots.pageHeader ? (openBlock(), createElementBlock("header", {
@@ -395,13 +578,15 @@ const _sfc_main$3 = defineComponent({
 var components = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
-  VButton: _sfc_main$8,
+  VButton: _sfc_main$a,
   VRail: _sfc_main$5,
   VRailTile: _sfc_main$4,
   VShell: _sfc_main$3,
   VDrawer: _sfc_main$6,
   VBadge,
-  VChip
+  VChip,
+  VRadioGroup: _sfc_main$8,
+  VRadioItem: _sfc_main$7
 });
 var main = "";
 var tailwind = "";
@@ -47047,7 +47232,7 @@ var themeSwitcher_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main = defineComponent({
   components: {
     DarkModeSwitch,
-    VButton: _sfc_main$8
+    VButton: _sfc_main$a
   },
   props: {
     bgLight: {
@@ -47290,4 +47475,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { DarkModeSwitch, themeSwitcher as ThemeSwitcher, VBadge, _sfc_main$8 as VButton, VChip, _sfc_main$2 as VCodeBlock, _sfc_main$6 as VDrawer, _sfc_main$5 as VRail, _sfc_main$4 as VRailTile, _sfc_main$3 as VShell, index as default, useDarkMode, useDrawer, useRail, useTheme, clipboard as vClipboard };
+export { DarkModeSwitch, themeSwitcher as ThemeSwitcher, VBadge, _sfc_main$a as VButton, VChip, _sfc_main$2 as VCodeBlock, _sfc_main$6 as VDrawer, _sfc_main$8 as VRadioGroup, _sfc_main$7 as VRadioItem, _sfc_main$5 as VRail, _sfc_main$4 as VRailTile, _sfc_main$3 as VShell, index as default, useDarkMode, useDrawer, useRail, useTheme, clipboard as vClipboard };