vueless 1.3.7-beta.8 → 1.3.7

package/components.d.ts

@@ -37,6 +37,7 @@ export { default as UNumber } from "./ui.text-number/UNumber.vue";
 export { default as UFile } from "./ui.text-file/UFile.vue";
 export { default as UFiles } from "./ui.text-files/UFiles.vue";
 export { default as UBadge } from "./ui.text-badge/UBadge.vue";
+export { default as UKey } from "./ui.text-key/UKey.vue";
 /* Containers */
 export { default as UDivider } from "./ui.container-divider/UDivider.vue";
 export { default as UCol } from "./ui.container-col/UCol.vue";

package/components.ts

@@ -37,6 +37,7 @@ export { default as UNumber } from "./ui.text-number/UNumber.vue";
 export { default as UFile } from "./ui.text-file/UFile.vue";
 export { default as UFiles } from "./ui.text-files/UFiles.vue";
 export { default as UBadge } from "./ui.text-badge/UBadge.vue";
+export { default as UKey } from "./ui.text-key/UKey.vue";
 /* Containers */
 export { default as UDivider } from "./ui.container-divider/UDivider.vue";
 export { default as UCol } from "./ui.container-col/UCol.vue";

package/constants.d.ts

@@ -178,6 +178,7 @@ export namespace COMPONENTS {
     let UFile: string;
     let UFiles: string;
     let UBadge: string;
+    let UKey: string;
     let UDivider: string;
     let UCol: string;
     let URow: string;

package/constants.js

@@ -286,6 +286,7 @@ export const COMPONENTS = {
   UFile: "ui.text-file",
   UFiles: "ui.text-files",
   UBadge: "ui.text-badge",
+  UKey: "ui.text-key",
 
   /* Containers */
   UDivider: "ui.container-divider",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.7-beta.8",
+  "version": "1.3.7",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.text-key/UKey.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useTemplateRef, computed } from "vue";
+
+import { useUI } from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+
+import { COMPONENT_NAME, KEY_SYMBOLS } from "./constants";
+import defaultConfig from "./config";
+
+import type { Props, Config } from "./types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+});
+
+const keyRef = useTemplateRef<HTMLElement>("key");
+
+defineExpose({
+  /**
+   * A reference to the key element for direct DOM manipulation.
+   * @property {HTMLElement}
+   */
+  keyRef,
+});
+
+const keys = computed(() => {
+  if (!props.value) return [];
+
+  if (props.value.includes(" + ")) {
+    return props.value.split(" + ").map((key) => key.trim());
+  }
+
+  return [props.value];
+});
+
+const getDisplayValue = (key: string) => {
+  const lowerValue = key.toLowerCase();
+
+  return KEY_SYMBOLS[lowerValue as keyof typeof KEY_SYMBOLS] || key;
+};
+
+const displayValue = computed(() => {
+  if (keys.value.length === 0) return "";
+  if (keys.value.length === 1) return getDisplayValue(keys.value[0]);
+
+  return keys.value.map(getDisplayValue).join(" + ");
+});
+
+const { getDataTest, keyAttrs } = useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <kbd ref="key" v-bind="keyAttrs" :data-test="getDataTest()">
+    <!--
+      @slot Use it to add custom content.
+      @binding {string} value
+    -->
+    <slot :value="displayValue">
+      <template v-if="keys.length > 1">
+        <template v-for="(key, index) in keys" :key="index">
+          {{ getDisplayValue(key) }}<span v-if="index < keys.length - 1">+</span>
+        </template>
+      </template>
+      <template v-else>
+        {{ displayValue }}
+      </template>
+    </slot>
+  </kbd>
+</template>

package/ui.text-key/config.ts

@@ -0,0 +1,26 @@
+export default /*tw*/ {
+  key: {
+    base: `
+      inline-flex items-center justify-center gap-1 border border-solid
+      rounded-small font-medium font-mono !leading-none outline-hidden
+    `,
+    variants: {
+      variant: {
+        solid: "border-transparent text-inverted bg-{color}",
+        outlined: "border-{color} text-{color}",
+        subtle: "border-{color}/15 text-{color} bg-{color}/10",
+        soft: "border-transparent text-{color} bg-{color}/10",
+      },
+      size: {
+        sm: "px-1 min-w-5 h-5 text-tiny",
+        md: "px-1.5 min-w-6 h-6 text-tiny",
+        lg: "px-1.5 min-w-7 h-7 text-small",
+      },
+    },
+  },
+  defaults: {
+    color: "grayscale",
+    variant: "outlined",
+    size: "md",
+  },
+};

package/ui.text-key/constants.ts

@@ -0,0 +1,30 @@
+export const COMPONENT_NAME = "UKey";
+
+export const KEY_SYMBOLS = {
+  command: "⌘",
+  cmd: "⌘",
+  meta: "⌘",
+  shift: "⇧",
+  alt: "⌥",
+  option: "⌥",
+  ctrl: "⌃",
+  control: "⌃",
+  enter: "↵",
+  return: "↵",
+  delete: "⌫",
+  backspace: "⌫",
+  escape: "⎋",
+  esc: "⎋",
+  tab: "⇥",
+  capslock: "⇪",
+  caps: "⇪",
+  up: "↑",
+  down: "↓",
+  left: "←",
+  right: "→",
+  pageup: "⇞",
+  pagedown: "⇟",
+  home: "↖",
+  end: "↘",
+  space: "␣",
+} as const;

package/ui.text-key/storybook/stories.ts

@@ -0,0 +1,154 @@
+import {
+  getArgs,
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook";
+
+import UKey from "../../ui.text-key/UKey.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Props } from "../types";
+
+interface UKeyArgs extends Props {
+  slotTemplate?: string;
+  enum: "variant" | "size" | "color";
+  outerEnum: "variant";
+}
+
+export default {
+  id: "4096",
+  title: "Text & Content / Key",
+  component: UKey,
+  args: {
+    value: "⌘",
+  },
+  argTypes: {
+    ...getArgTypes(UKey.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UKey.__name),
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UKeyArgs> = (args: UKeyArgs) => ({
+  components: { UKey },
+  setup: () => ({ args, slots: getSlotNames(UKey.__name) }),
+  template: `
+    <UKey v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UKey>
+  `,
+});
+
+const EnumTemplate: StoryFn<UKeyArgs> = (args: UKeyArgs, { argTypes }) => ({
+  components: { UKey, URow },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <URow>
+      <UKey
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        :key="option"
+      />
+    </URow>
+  `,
+});
+
+const MultiEnumTemplate: StoryFn<UKeyArgs> = (args: UKeyArgs, { argTypes }) => ({
+  components: { UKey, URow, UCol },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <UCol>
+      <URow v-for="outerOption in argTypes?.[args.outerEnum]?.options" :key="outerOption">
+        <UKey
+          v-for="option in argTypes?.[args.enum]?.options"
+          v-bind="getArgs(args, option, outerOption)"
+          :key="option"
+        />
+      </URow>
+    </UCol>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant" };
+
+export const Sizes = EnumTemplate.bind({});
+Sizes.args = { enum: "size" };
+
+export const Colors = MultiEnumTemplate.bind({});
+Colors.args = { outerEnum: "variant", enum: "color", value: "K" };
+
+export const SystemKeys: StoryFn<UKeyArgs> = (args) => ({
+  components: { UKey, URow, UCol },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCol>
+      <URow>
+        <UKey value="command" />
+        <UKey value="shift" />
+        <UKey value="alt" />
+        <UKey value="ctrl" />
+      </URow>
+      <URow>
+        <UKey value="enter" />
+        <UKey value="delete" />
+        <UKey value="escape" />
+        <UKey value="tab" />
+      </URow>
+      <URow>
+        <UKey value="up" />
+        <UKey value="down" />
+        <UKey value="left" />
+        <UKey value="right" />
+      </URow>
+      <URow>
+        <UKey value="pageup" />
+        <UKey value="pagedown" />
+        <UKey value="home" />
+        <UKey value="end" />
+      </URow>
+    </UCol>
+  `,
+});
+
+export const Shortcuts: StoryFn<UKeyArgs> = (args) => ({
+  components: { UKey, URow, UCol },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCol>
+      <UKey value="command + K" />
+      <UKey value="ctrl + shift + P" />
+      <UKey value="alt + F4" />
+    </UCol>
+  `,
+});
+
+export const Slots: StoryFn<UKeyArgs> = (args) => ({
+  components: { UKey, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow>
+      <UKey value="command + K">
+        <template #default="{ value }">
+          Shortcut: {{ value }}
+        </template>
+      </UKey>
+    </URow>
+  `,
+});

package/ui.text-key/tests/UKey.test.ts

@@ -0,0 +1,148 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+
+import UKey from "../UKey.vue";
+
+import type { Props } from "../types";
+import type { ComponentPublicInstance } from "vue";
+
+describe("UKey.vue", () => {
+  describe("Props", () => {
+    it("Value – displays the correct value", () => {
+      const value = "K";
+
+      const component = mount(UKey, {
+        props: {
+          value,
+        },
+      });
+
+      expect(component.text()).toBe(value);
+    });
+
+    it("Value – displays system key symbols", () => {
+      const systemKeys = {
+        command: "⌘",
+        shift: "⇧",
+        alt: "⌥",
+        ctrl: "⌃",
+        enter: "↵",
+        escape: "⎋",
+        tab: "⇥",
+      };
+
+      Object.entries(systemKeys).forEach(([key, symbol]) => {
+        const component = mount(UKey, {
+          props: {
+            value: key,
+          },
+        });
+
+        expect(component.text()).toBe(symbol);
+      });
+    });
+
+    it("Size – applies the correct size class", () => {
+      const sizes = {
+        sm: "h-5",
+        md: "h-6",
+        lg: "h-7",
+      };
+
+      Object.entries(sizes).forEach(([size, classes]) => {
+        const component = mount(UKey, {
+          props: {
+            size: size as Props["size"],
+            value: "K",
+          },
+        });
+
+        expect(component.attributes("class")).toContain(classes);
+      });
+    });
+
+    it("Variant – applies the correct variant class", () => {
+      const variants = ["solid", "outlined", "subtle", "soft"];
+
+      variants.forEach((variant) => {
+        const component = mount(UKey, {
+          props: {
+            variant: variant as Props["variant"],
+            value: "K",
+          },
+        });
+
+        expect(component.attributes("class")).toBeDefined();
+      });
+    });
+
+    it("Color – applies the correct color class", () => {
+      const colors = [
+        "primary",
+        "secondary",
+        "error",
+        "warning",
+        "success",
+        "info",
+        "notice",
+        "neutral",
+        "grayscale",
+      ];
+
+      colors.forEach((color) => {
+        const component = mount(UKey, {
+          props: {
+            color: color as Props["color"],
+            value: "K",
+          },
+        });
+
+        expect(component.attributes("class")).toContain(color);
+      });
+    });
+
+    it("DataTest – applies the correct data-test attribute", () => {
+      const dataTest = "test-key";
+
+      const component = mount(UKey, {
+        props: {
+          dataTest,
+          value: "K",
+        },
+      });
+
+      expect(component.attributes("data-test")).toBe(dataTest);
+    });
+  });
+
+  describe("Slots", () => {
+    it("Default – renders content from default slot", () => {
+      const slotContent = "Custom Key";
+
+      const component = mount(UKey, {
+        props: {
+          value: "K",
+        },
+        slots: {
+          default: slotContent,
+        },
+      });
+
+      expect(component.text()).toBe(slotContent);
+    });
+  });
+
+  describe("Exposed refs", () => {
+    it("keyRef – exposes keyRef", () => {
+      const component = mount(UKey, {
+        props: {
+          value: "K",
+        },
+      });
+
+      expect(
+        (component.vm as ComponentPublicInstance & { keyRef: HTMLElement }).keyRef,
+      ).toBeDefined();
+    });
+  });
+});

package/ui.text-key/types.ts

@@ -0,0 +1,45 @@
+import defaultConfig from "./config";
+import type { ComponentConfig } from "../types";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Key value to display.
+   */
+  value?: string;
+
+  /**
+   * Kbd variant.
+   */
+  variant?: "solid" | "outlined" | "subtle" | "soft";
+
+  /**
+   * Kbd size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Kbd color.
+   */
+  color?:
+    | "primary"
+    | "secondary"
+    | "error"
+    | "warning"
+    | "success"
+    | "info"
+    | "notice"
+    | "neutral"
+    | "grayscale";
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}