@code-coaching/vuetiful 0.11.2 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "license": "MIT",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",

package/src/components/atoms/VRadioGroup.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { defineEmits, provide, ref, watch } from "vue";
+
+const emits = defineEmits(["update:modelValue"]);
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number],
+    required: true,
+  },
+
+  labelledby: {
+    type: String,
+    default: "",
+  },
+});
+
+const radioGroupRef = ref<HTMLElement>();
+const selectedOption = ref(props.modelValue);
+provide("selectedOption", selectedOption);
+provide("name", props.name);
+provide("radioGroup", radioGroupRef);
+
+watch(selectedOption, (newVal) => {
+  emits("update:modelValue", newVal);
+});
+</script>
+
+<template>
+  <div
+    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"
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/components/atoms/VRadioItem.vue

@@ -0,0 +1,154 @@
+<template>
+  <!-- A11y attributes are not allowed on <label> -->
+  <label :for="id">
+    <div
+      :class="`radio-item cursor-pointer px-4 py-1 text-center text-base rounded-token ${
+        checked ? 'variant-filled' : 'hover:variant-soft'
+      } `"
+      role="radio"
+      :aria-checked="checked"
+      :tabindex="tabbable"
+      :name="name"
+      @keydown="handleKeydown"
+    >
+      <!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
+      <div class="h-0 w-0 overflow-hidden">
+        <input
+          tabindex="-1"
+          type="radio"
+          :id="id"
+          :name="name"
+          :value="value"
+          v-model="selectedOption"
+        />
+      </div>
+      <slot />
+    </div>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { ComputedRef, computed, defineProps, inject } from "vue";
+
+const props = defineProps({
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+});
+
+const radioGroup = inject("radioGroup") as ComputedRef<HTMLElement>;
+const selectedOption = inject("selectedOption") as ComputedRef<string>;
+const name = inject("name") as string;
+
+const id = `radio-${Math.random().toString(36).substring(2, 9)}`;
+const isFirst = computed(() => {
+  const idOfFirstChild = radioGroup.value?.children[0].querySelector("input")?.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: HTMLElement) => {
+  const input = target.querySelector("input");
+  input?.click();
+  input?.focus();
+};
+
+const setCheckedToNextItem = (target: HTMLElement) => {
+  const activeId = target.querySelector("input")?.id;
+  const children = radioGroup.value?.children;
+  const activeChild = Array.from(children).find((child) => {
+    const input = child.querySelector("input");
+    return input?.id === activeId;
+  });
+
+  const firstchild = children[0];
+  const isLast = activeChild === children[children.length - 1];
+  if (isLast) {
+    const input = firstchild.querySelector("input");
+    if (input) {
+      input.click();
+      input.focus();
+    }
+    return;
+  }
+
+  const nextChild = activeChild?.nextElementSibling;
+  const input = nextChild?.querySelector("input");
+  if (input) {
+    input.click();
+    input.focus();
+  }
+};
+
+const setCheckedToPreviousItem = (target: HTMLElement) => {
+  const activeId = target.querySelector("input")?.id;
+  const children = radioGroup.value?.children;
+  const activeChild = Array.from(children).find((child) => {
+    const input = child.querySelector("input");
+    return input?.id === activeId;
+  });
+
+  const lastchild = children[children.length - 1];
+  const isFirst = activeChild === children[0];
+  if (isFirst) {
+    const input = lastchild.querySelector("input");
+    if (input) {
+      input.click();
+      input.focus();
+    }
+    return;
+  }
+
+  const previousChild = activeChild?.previousElementSibling;
+  const input = previousChild?.querySelector("input");
+  if (input) {
+    input.click();
+    input.focus();
+  }
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+  const target = event.currentTarget as HTMLElement;
+  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;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+</script>

package/src/components/atoms/index.ts

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

package/src/components/index.ts

@@ -1,4 +1,4 @@
-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/src/components/molecules/VShell.vue

@@ -34,7 +34,10 @@ defineProps({
         <slot name="sidebarLeft" />
       </aside>
 
-      <div :class="`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${regionPage ?? ''}`">
+      <div
+        tabindex="-1"
+        :class="`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${regionPage ?? ''}`"
+      >
         <header
           v-if="$slots.pageHeader"
           :class="`vuetiful-page-header flex-none ${slotPageHeader}`"

package/src/utils/code-block/VCodeBlock.vue

@@ -16,11 +16,18 @@ const props = defineProps({
     default: "",
   },
 
+  preventOverflow: {
+    type: Boolean,
+    default: false,
+  },
+
   headerClass: {
     type: String as () => CssClasses,
+    default: "",
   },
   preClass: {
     type: String as () => CssClasses,
+    default: "",
   },
 
   buttonClass: {
@@ -75,7 +82,9 @@ function onCopyClick() {
       </button>
     </header>
     <pre
-      :class="`code-block-pre whitespace-pre-wrap break-all p-4 pt-1 ${preClass}`"
+      :class="`code-block-pre ${
+        preventOverflow ? 'whitespace-pre-wrap break-all' : 'overflow-auto'
+      } p-4 pt-1 ${preClass}`"
     ><code :class="`code-block-code language-${language}`" v-html="highlight(props.code, props.language)"></code></pre>
   </div>
 </template>