@code-coaching/vuetiful 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "license": "MIT",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
@@ -18,6 +18,7 @@
     "vue": "^3.2.25"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.13",
     "highlight.js": "^11.7.0"
   },
   "devDependencies": {

package/src/components/atoms/VRadio/VRadioDescription.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { RadioGroupDescription } from '@headlessui/vue';
+
+defineProps({
+  as: RadioGroupDescription.props['as'],
+});
+</script>
+
+<template>
+  <RadioGroupDescription :as="as"><slot /></RadioGroupDescription>
+</template>

package/src/components/atoms/VRadio/VRadioGroup.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { RadioGroup } from '@headlessui/vue';
+import { provide, ref, watch } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+  as: RadioGroup.props['as'],
+  disabled: RadioGroup.props['disabled'],
+  by: RadioGroup.props['by'],
+  modelValue: RadioGroup.props['modelValue'],
+
+  active: {
+    type: String,
+    default: 'variant-filled',
+  },
+  hover: {
+    type: String,
+    default: 'hover:variant-ghost',
+  },
+
+  background: {
+    type: String,
+    default: 'bg-surface-200-700-token',
+  },
+  text: {
+    type: String,
+    default: 'text-surface-900 dark:text-surface-50',
+  },
+});
+
+const parentModelValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    parentModelValue.value = newValue;
+  }
+);
+watch(
+  () => parentModelValue.value,
+  (newValue) => {
+    console.log('test: ', newValue)
+    emit('update:modelValue', newValue);
+  }
+);
+
+provide('active', props.active);
+provide('hover', props.hover);
+</script>
+
+<template>
+  <radio-group
+    v-model="parentModelValue"
+    :as="as"
+    :disabled="disabled"
+    :by="by"
+    :class="`radio-group inline-flex gap-1 p-1 ${background} ${text} border-token border-surface-400-500-token rounded-container-token`"
+  >
+    <slot></slot>
+  </radio-group>
+</template>

package/src/components/atoms/VRadio/VRadioItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { RadioGroupOption } from '@headlessui/vue';
+import { inject } from 'vue';
+
+defineProps({
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+});
+
+const active = (inject('active') as string) || 'variant-filled';
+const hover = (inject('hover') as string) || 'hover:variant-ghost';
+</script>
+
+<template>
+  <RadioGroupOption v-slot="{ checked, disabled }" :value="value">
+    <span
+      :class="`radio-item px-4 py-1 text-center text-base rounded-token ${checked ? active : hover} ${
+        disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+      }`"
+    >
+      <slot />
+    </span>
+  </RadioGroupOption>
+</template>

package/src/components/atoms/VRadio/VRadioLabel.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { RadioGroupLabel } from '@headlessui/vue';
+
+defineProps({
+  as: {
+    type: RadioGroupLabel.props['as'].type,
+    default: 'p'
+  }
+});
+
+
+</script>
+
+<template>
+  <RadioGroupLabel :as="as"><slot /></RadioGroupLabel>
+</template>

package/src/components/atoms/index.ts

@@ -1,7 +1,10 @@
 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, VRadioGroup, VRadioItem };
+import VRadioDescription from "./VRadio/VRadioDescription.vue";
+import VRadioGroup from "./VRadio/VRadioGroup.vue";
+import VRadioItem from "./VRadio/VRadioItem.vue";
+import VRadioLabel from "./VRadio/VRadioLabel.vue";
+
+export { VButton, VBadge, VChip, VRadioGroup, VRadioItem, VRadioLabel, VRadioDescription };

package/src/components/index.ts

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

package/src/components/atoms/VRadioGroup.vue

@@ -1,42 +0,0 @@
-<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

@@ -1,154 +0,0 @@
-<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>