@cfasim-ui/components 0.1.9 → 0.2.0

package/src/TextInput/TextInput.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import Hint from "../Hint/Hint.vue";
-
-const model = defineModel<string>();
-const local = ref(model.value);
-
-watch(model, (v) => {
-  local.value = v;
-});
-
-function commit() {
-  model.value = local.value;
-}
-
-const props = defineProps<{
-  label?: string;
-  placeholder?: string;
-  hint?: string;
-}>();
-</script>
-
-<template>
-  <label v-if="props.label" class="input-label">
-    <span class="input-label-row">
-      {{ props.label }}
-      <Hint v-if="props.hint" :text="props.hint" />
-    </span>
-    <input
-      type="text"
-      v-model="local"
-      :placeholder="props.placeholder"
-      @blur="commit"
-      @keydown.enter="commit"
-    />
-  </label>
-  <div v-else>
-    <input
-      type="text"
-      v-model="local"
-      :placeholder="props.placeholder"
-      @blur="commit"
-      @keydown.enter="commit"
-    />
-  </div>
-</template>
-
-<style scoped>
-.input-label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-  font-size: var(--font-size-sm);
-}
-
-.input-label-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-input {
-  display: block;
-  width: 100%;
-  height: 2.5em;
-  padding: 0 0.75em;
-  font-size: inherit;
-  background-color: var(--color-bg-0);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  border-radius: 0.375em;
-  transition:
-    border-color var(--transition-fast),
-    box-shadow var(--transition-fast);
-}
-
-input:hover {
-  border-color: var(--color-border-hover);
-}
-
-input:focus {
-  outline: none;
-  border-color: var(--color-border-focus);
-  box-shadow: var(--shadow-focus);
-}
-
-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-</style>

package/src/Toggle/Toggle.md

@@ -1,68 +0,0 @@
-# Toggle
-
-A boolean switch built on reka-ui.
-
-## Examples
-
-<script setup>
-import { ref } from 'vue'
-const enabled = ref(false)
-const disabled = ref(true)
-</script>
-
-### Basic
-
-<ComponentDemo>
-  <Toggle v-model="enabled" label="Enable vaccination" />
-
-<template #code>
-
-```vue
-<script setup>
-import { ref } from "vue";
-const enabled = ref(false);
-</script>
-
-<Toggle v-model="enabled" label="Enable vaccination" />
-```
-
-  </template>
-</ComponentDemo>
-
-### With hint
-
-<ComponentDemo>
-  <Toggle
-    v-model="enabled"
-    label="Enable isolation"
-    hint="Whether symptomatic individuals are isolated"
-  />
-
-<template #code>
-
-```vue
-<Toggle
-  v-model="enabled"
-  label="Enable isolation"
-  hint="Whether symptomatic individuals are isolated"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Disabled
-
-<ComponentDemo>
-  <Toggle v-model="disabled" label="Locked setting" :disabled="true" />
-
-<template #code>
-
-```vue
-<Toggle v-model="value" label="Locked setting" :disabled="true" />
-```
-
-  </template>
-</ComponentDemo>
-
-<!--@include: ./_api/toggle.md-->

package/src/Toggle/Toggle.spec.ts

@@ -1,13 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("Toggle page renders demos", async ({ page }) => {
-  await page.goto("./cfasim-ui/components/toggle");
-  await expect(page.locator("h1")).toBeVisible();
-  const demos = page.locator(".demo-preview");
-  await expect(demos.first()).toBeVisible();
-  const toggle = demos.first().getByRole("switch");
-  await expect(toggle).toBeVisible();
-  await expect(toggle).toHaveAttribute("data-state", "unchecked");
-  await toggle.click();
-  await expect(toggle).toHaveAttribute("data-state", "checked");
-});

package/src/Toggle/Toggle.test.ts

@@ -1,35 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import Toggle from "./Toggle.vue";
-
-describe("Toggle", () => {
-  it("renders with label", () => {
-    const wrapper = mount(Toggle, {
-      props: { label: "Dark mode" },
-    });
-    expect(wrapper.text()).toContain("Dark mode");
-  });
-
-  it("toggles on click", async () => {
-    const wrapper = mount(Toggle, {
-      props: {
-        label: "Enable",
-        modelValue: false,
-        "onUpdate:modelValue": (e: boolean | undefined) =>
-          wrapper.setProps({ modelValue: e }),
-      },
-    });
-    const switchEl = wrapper.find("button");
-    expect(switchEl.attributes("data-state")).toBe("unchecked");
-    await switchEl.trigger("click");
-    expect(switchEl.attributes("data-state")).toBe("checked");
-  });
-
-  it("renders as disabled", () => {
-    const wrapper = mount(Toggle, {
-      props: { label: "Disabled toggle", disabled: true },
-    });
-    const switchEl = wrapper.find("button");
-    expect(switchEl.attributes("data-disabled")).toBeDefined();
-  });
-});

package/src/Toggle/Toggle.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import { SwitchRoot, SwitchThumb, useId } from "reka-ui";
-import Hint from "../Hint/Hint.vue";
-
-const model = defineModel<boolean>();
-
-const props = defineProps<{
-  label: string;
-  hint?: string;
-  disabled?: boolean;
-}>();
-
-const id = useId();
-</script>
-
-<template>
-  <div class="toggle">
-    <label :for="id">{{ label }}</label>
-    <Hint v-if="props.hint" :text="props.hint" />
-    <SwitchRoot :id="id" v-model="model" :disabled="disabled" class="switch">
-      <SwitchThumb class="thumb" />
-    </SwitchRoot>
-  </div>
-</template>
-
-<style scoped>
-.toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-}
-
-.toggle label {
-  user-select: none;
-}
-
-.switch {
-  --switch-w: 2.25em;
-  --switch-h: 1.25em;
-  --thumb-size: 1em;
-  --thumb-offset: 0.125em;
-
-  position: relative;
-  width: var(--switch-w);
-  height: var(--switch-h);
-  flex-shrink: 0;
-  background: var(--color-border-hover);
-  border-radius: var(--switch-h);
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.switch[data-state="checked"] {
-  background: var(--color-primary);
-}
-
-.switch[data-disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.thumb {
-  display: block;
-  width: var(--thumb-size);
-  height: var(--thumb-size);
-  background: white;
-  border-radius: 50%;
-  position: absolute;
-  top: var(--thumb-offset);
-  left: var(--thumb-offset);
-  transition: transform 0.15s;
-}
-
-.switch[data-state="checked"] .thumb {
-  transform: translateX(
-    calc(var(--switch-w) - var(--thumb-size) - var(--thumb-offset) * 2)
-  );
-}
-</style>

package/src/index.ts

@@ -1,15 +0,0 @@
-export { default as Box } from "./Box/Box.vue";
-export type { BoxVariant } from "./Box/Box.vue";
-export { default as Button } from "./Button/Button.vue";
-export { default as Expander } from "./Expander/Expander.vue";
-export { default as Hint } from "./Hint/Hint.vue";
-export { default as Icon } from "./Icon/Icon.vue";
-export { default as LightDarkToggle } from "./LightDarkToggle/LightDarkToggle.vue";
-export { default as NumberInput } from "./NumberInput/NumberInput.vue";
-export { default as SelectBox } from "./SelectBox/SelectBox.vue";
-export type { SelectOption } from "./SelectBox/SelectBox.vue";
-export { default as SidebarLayout } from "./SidebarLayout/SidebarLayout.vue";
-export type { Tab } from "./SidebarLayout/SidebarLayout.vue";
-export { default as Spinner } from "./Spinner/Spinner.vue";
-export { default as TextInput } from "./TextInput/TextInput.vue";
-export { default as Toggle } from "./Toggle/Toggle.vue";