@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/Input.vue

@@ -1,99 +1,99 @@
-<script setup lang="ts">
-/**
- * Text field. Number fields use WpNumber (`WpNumber.vue`)
- * and search boxes use SearchInput; this one no longer has a number mode.
- */
-import { computed } from "vue";
-import Icon from "./Icon.vue";
-
-interface Props {
-  modelValue: string;
-  type?: "text" | "email" | "url" | "password" | "tel" | undefined;
-  placeholder?: string | undefined;
-  disabled?: boolean | undefined;
-  /** Shown but not editable: dimmer fill, no focus ring, a lock icon. */
-  readonly?: boolean | undefined;
-  error?: boolean | undefined;
-  /** Height on the control scale: sm 24 / md 32 / lg 40. */
-  size?: "sm" | "md" | "lg" | undefined;
-  /** Icon before the text (a search glass). Drawn inline, no box. */
-  icon?: string | undefined;
-  /** Text before the value, e.g. `$` for a variable name. */
-  prefix?: string | undefined;
-  /** Text after the value, e.g. a unit. */
-  suffix?: string | undefined;
-  id?: string | undefined;
-  ariaLabel?: string | undefined;
-}
-const props = withDefaults(defineProps<Props>(), {
-  type: "text",
-  size: "md",
-});
-
-const emit = defineEmits<{
-  (e: "update:modelValue", v: string): void;
-  (e: "blur", evt: FocusEvent): void;
-  (e: "focus", evt: FocusEvent): void;
-}>();
-
-const inputClasses = computed(() => [
-  "wp-input",
-  props.size === "sm" && "wp-input--sm",
-  props.size === "lg" && "wp-input--lg",
-]);
-
-const wrapped = computed(() => Boolean(props.icon || props.prefix || props.suffix || props.readonly));
-const groupClasses = computed(() => [
-  "wp-input-group",
-  props.size === "sm" && "wp-input-group--sm",
-  props.size === "lg" && "wp-input-group--lg",
-  props.readonly && "wp-input-group--readonly",
-  props.disabled && "wp-input-group--disabled",
-]);
-
-function onInput(e: Event) {
-  emit("update:modelValue", (e.target as HTMLInputElement).value);
-}
-</script>
-
-<template>
-  <div v-if="wrapped" :class="groupClasses" :aria-invalid="error || undefined">
-    <span v-if="icon" class="wp-input-group__icon" aria-hidden="true">
-      <Icon :name="icon" />
-    </span>
-    <span v-if="prefix" class="wp-input-group__affix wp-input-group__affix--prefix" aria-hidden="true">{{ prefix }}</span>
-    <input
-      :id="id"
-      :class="inputClasses"
-      :type="type"
-      :value="modelValue"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      :aria-label="ariaLabel"
-      :aria-invalid="error || undefined"
-      @input="onInput"
-      @blur="(e) => emit('blur', e)"
-      @focus="(e) => emit('focus', e)"
-    />
-    <span v-if="suffix" class="wp-input-group__affix wp-input-group__affix--suffix" aria-hidden="true">{{ suffix }}</span>
-    <span v-if="readonly" class="wp-input-group__lock" aria-hidden="true">
-      <Icon name="pi-lock" :size="11" />
-    </span>
-  </div>
-  <input
-    v-else
-    :id="id"
-    :class="inputClasses"
-    :type="type"
-    :value="modelValue"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :readonly="readonly"
-    :aria-label="ariaLabel"
-    :aria-invalid="error || undefined"
-    @input="onInput"
-    @blur="(e) => emit('blur', e)"
-    @focus="(e) => emit('focus', e)"
-  />
-</template>
+<script setup lang="ts">
+/**
+ * Text field. Number fields use WpNumber (`WpNumber.vue`)
+ * and search boxes use SearchInput; this one no longer has a number mode.
+ */
+import { computed } from "vue";
+import Icon from "./Icon.vue";
+
+interface Props {
+  modelValue: string;
+  type?: "text" | "email" | "url" | "password" | "tel" | undefined;
+  placeholder?: string | undefined;
+  disabled?: boolean | undefined;
+  /** Shown but not editable: dimmer fill, no focus ring, a lock icon. */
+  readonly?: boolean | undefined;
+  error?: boolean | undefined;
+  /** Height on the control scale: sm 24 / md 32 / lg 40. */
+  size?: "sm" | "md" | "lg" | undefined;
+  /** Icon before the text (a search glass). Drawn inline, no box. */
+  icon?: string | undefined;
+  /** Text before the value, e.g. `$` for a variable name. */
+  prefix?: string | undefined;
+  /** Text after the value, e.g. a unit. */
+  suffix?: string | undefined;
+  id?: string | undefined;
+  ariaLabel?: string | undefined;
+}
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+  size: "md",
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: string): void;
+  (e: "blur", evt: FocusEvent): void;
+  (e: "focus", evt: FocusEvent): void;
+}>();
+
+const inputClasses = computed(() => [
+  "wp-input",
+  props.size === "sm" && "wp-input--sm",
+  props.size === "lg" && "wp-input--lg",
+]);
+
+const wrapped = computed(() => Boolean(props.icon || props.prefix || props.suffix || props.readonly));
+const groupClasses = computed(() => [
+  "wp-input-group",
+  props.size === "sm" && "wp-input-group--sm",
+  props.size === "lg" && "wp-input-group--lg",
+  props.readonly && "wp-input-group--readonly",
+  props.disabled && "wp-input-group--disabled",
+]);
+
+function onInput(e: Event) {
+  emit("update:modelValue", (e.target as HTMLInputElement).value);
+}
+</script>
+
+<template>
+  <div v-if="wrapped" :class="groupClasses" :aria-invalid="error || undefined">
+    <span v-if="icon" class="wp-input-group__icon" aria-hidden="true">
+      <Icon :name="icon" />
+    </span>
+    <span v-if="prefix" class="wp-input-group__affix wp-input-group__affix--prefix" aria-hidden="true">{{ prefix }}</span>
+    <input
+      :id="id"
+      :class="inputClasses"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :aria-label="ariaLabel"
+      :aria-invalid="error || undefined"
+      @input="onInput"
+      @blur="(e) => emit('blur', e)"
+      @focus="(e) => emit('focus', e)"
+    />
+    <span v-if="suffix" class="wp-input-group__affix wp-input-group__affix--suffix" aria-hidden="true">{{ suffix }}</span>
+    <span v-if="readonly" class="wp-input-group__lock" aria-hidden="true">
+      <Icon name="pi-lock" :size="11" />
+    </span>
+  </div>
+  <input
+    v-else
+    :id="id"
+    :class="inputClasses"
+    :type="type"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :aria-label="ariaLabel"
+    :aria-invalid="error || undefined"
+    @input="onInput"
+    @blur="(e) => emit('blur', e)"
+    @focus="(e) => emit('focus', e)"
+  />
+</template>

package/src/Kbd.vue

@@ -1,56 +1,56 @@
-<script setup lang="ts">
-/**
- * Kbd: a keyboard shortcut drawn as keys. `Mod` reads ⌘ on a Mac and Ctrl
- * elsewhere (from `platform-keys.ts`), so one string fits everyone. Works on
- * the canvas and in the manager.
- *
- *   <Kbd keys="Mod+K" />
- *   <Kbd :keys="['Shift', 'Enter']" />
- *
- * Screen readers hear the whole chord once ("Control plus K"); the key caps
- * themselves are hidden from them.
- */
-import { computed } from "vue";
-import { isApplePlatform } from "./platform-keys";
-
-const props = withDefaults(defineProps<{
-  /** "Mod+Shift+P" or ["Mod", "Shift", "P"]. */
-  keys: string | string[];
-  size?: "sm" | "md" | undefined;
-}>(), { size: "md" });
-
-const MAC: Record<string, string> = { Mod: "⌘", Ctrl: "⌃", Alt: "⌥", Shift: "⇧", Enter: "↵" };
-const SPOKEN: Record<string, string> = {
-  "⌘": "Command", Ctrl: "Control", "⌃": "Control", Alt: "Alt", "⌥": "Option", Shift: "Shift", "⇧": "Shift",
-  Enter: "Enter", "↵": "Enter", Esc: "Escape", "↑": "Up", "↓": "Down", "←": "Left", "→": "Right",
-};
-
-const caps = computed(() => {
-  const list = Array.isArray(props.keys) ? props.keys : props.keys.split(/\+(?!$)/);
-  const mac = isApplePlatform();
-  return list.map((k) => k.trim()).filter(Boolean).map((k) => (k === "Mod" ? (mac ? "⌘" : "Ctrl") : mac ? MAC[k] ?? k : k));
-});
-const spoken = computed(() => caps.value.map((k) => SPOKEN[k] ?? k).join(" plus "));
-</script>
-
-<template>
-  <kbd class="wp-kbd-keys" :data-size="size" :aria-label="spoken">
-    <template v-for="(k, i) in caps" :key="i">
-      <span v-if="i > 0" class="wp-kbd-keys__plus" aria-hidden="true">+</span>
-      <kbd class="wp-kbd-keys__cap" aria-hidden="true">{{ k }}</kbd>
-    </template>
-  </kbd>
-</template>
-
-<style scoped>
-.wp-kbd-keys { display: inline-flex; align-items: center; gap: 2px; font: inherit; vertical-align: baseline; }
-.wp-kbd-keys__plus { color: var(--wp-text-dim); font-size: var(--wp-text-xs); }
-.wp-kbd-keys__cap {
-  display: inline-grid; place-items: center; box-sizing: border-box;
-  min-width: 20px; height: 20px; padding: 0 5px;
-  border: 1px solid var(--wp-border-strong); border-bottom-width: 2px; border-radius: var(--wp-radius-sm);
-  background: var(--wp-bg-2); color: var(--wp-text-muted);
-  font: 500 11px/1 var(--wp-font-mono); white-space: nowrap;
-}
-.wp-kbd-keys[data-size="sm"] .wp-kbd-keys__cap { min-width: 16px; height: 16px; padding: 0 3px; font-size: 10px; }
-</style>
+<script setup lang="ts">
+/**
+ * Kbd: a keyboard shortcut drawn as keys. `Mod` reads ⌘ on a Mac and Ctrl
+ * elsewhere (from `platform-keys.ts`), so one string fits everyone. Works on
+ * the canvas and in the manager.
+ *
+ *   <Kbd keys="Mod+K" />
+ *   <Kbd :keys="['Shift', 'Enter']" />
+ *
+ * Screen readers hear the whole chord once ("Control plus K"); the key caps
+ * themselves are hidden from them.
+ */
+import { computed } from "vue";
+import { isApplePlatform } from "./platform-keys";
+
+const props = withDefaults(defineProps<{
+  /** "Mod+Shift+P" or ["Mod", "Shift", "P"]. */
+  keys: string | string[];
+  size?: "sm" | "md" | undefined;
+}>(), { size: "md" });
+
+const MAC: Record<string, string> = { Mod: "⌘", Ctrl: "⌃", Alt: "⌥", Shift: "⇧", Enter: "↵" };
+const SPOKEN: Record<string, string> = {
+  "⌘": "Command", Ctrl: "Control", "⌃": "Control", Alt: "Alt", "⌥": "Option", Shift: "Shift", "⇧": "Shift",
+  Enter: "Enter", "↵": "Enter", Esc: "Escape", "↑": "Up", "↓": "Down", "←": "Left", "→": "Right",
+};
+
+const caps = computed(() => {
+  const list = Array.isArray(props.keys) ? props.keys : props.keys.split(/\+(?!$)/);
+  const mac = isApplePlatform();
+  return list.map((k) => k.trim()).filter(Boolean).map((k) => (k === "Mod" ? (mac ? "⌘" : "Ctrl") : mac ? MAC[k] ?? k : k));
+});
+const spoken = computed(() => caps.value.map((k) => SPOKEN[k] ?? k).join(" plus "));
+</script>
+
+<template>
+  <kbd class="wp-kbd-keys" :data-size="size" :aria-label="spoken">
+    <template v-for="(k, i) in caps" :key="i">
+      <span v-if="i > 0" class="wp-kbd-keys__plus" aria-hidden="true">+</span>
+      <kbd class="wp-kbd-keys__cap" aria-hidden="true">{{ k }}</kbd>
+    </template>
+  </kbd>
+</template>
+
+<style scoped>
+.wp-kbd-keys { display: inline-flex; align-items: center; gap: 2px; font: inherit; vertical-align: baseline; }
+.wp-kbd-keys__plus { color: var(--wp-text-dim); font-size: var(--wp-text-xs); }
+.wp-kbd-keys__cap {
+  display: inline-grid; place-items: center; box-sizing: border-box;
+  min-width: 20px; height: 20px; padding: 0 5px;
+  border: 1px solid var(--wp-border-strong); border-bottom-width: 2px; border-radius: var(--wp-radius-sm);
+  background: var(--wp-bg-2); color: var(--wp-text-muted);
+  font: 500 11px/1 var(--wp-font-mono); white-space: nowrap;
+}
+.wp-kbd-keys[data-size="sm"] .wp-kbd-keys__cap { min-width: 16px; height: 16px; padding: 0 3px; font-size: 10px; }
+</style>