@poppy-ui/vue 0.5.5 → 0.5.7-beta.0

package/src/components/data/toggle/Toggle.story.vue

@@ -0,0 +1,146 @@
+<script lang="ts">
+import Form from '@/components/data/form/Form.vue'
+import FormField from '@/components/data/form-field/FormField.vue'
+import { reactive, ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+import Toggle from './Toggle.vue'
+import type { ToggleProps } from './toggle.props'
+</script>
+
+<script setup lang="ts">
+const model = ref<boolean>(false)
+
+const state = reactive<ToggleProps>({
+  size: 'md',
+})
+
+const formData = ref<Record<string, unknown>>({ notifications: false })
+</script>
+
+<template>
+  <Story group="components" title="Data/Toggle" auto-props-disabled :setup-app="({ app }) => {
+    app.use(createI18n({}))
+  }">
+
+    <Variant title="Default" id="default">
+      <template #controls>
+        <HstSelect
+          v-model="state.color"
+          title="color"
+          :options="[undefined, 'neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error']"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="size"
+          :options="['xs', 'sm', 'md', 'lg', 'xl']"
+        />
+        <HstCheckbox v-model="(state.disabled as boolean)" title="disabled" />
+        <HstCheckbox v-model="(state.required as boolean)" title="required" />
+        <HstText v-model="state.description" title="description" />
+      </template>
+
+      <Toggle v-model="model" v-bind="state" />
+    </Variant>
+
+    <Variant title="Colors" id="colors">
+      <div class="flex flex-wrap gap-4 p-4">
+        <Toggle v-model="model" color="neutral" />
+        <Toggle v-model="model" color="primary" />
+        <Toggle v-model="model" color="secondary" />
+        <Toggle v-model="model" color="accent" />
+        <Toggle v-model="model" color="info" />
+        <Toggle v-model="model" color="success" />
+        <Toggle v-model="model" color="warning" />
+        <Toggle v-model="model" color="error" />
+      </div>
+    </Variant>
+
+    <Variant title="Sizes" id="sizes">
+      <div class="flex items-center gap-4 p-4">
+        <Toggle v-model="model" size="xs" />
+        <Toggle v-model="model" size="sm" />
+        <Toggle v-model="model" size="md" />
+        <Toggle v-model="model" size="lg" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled" id="disabled">
+      <div class="flex gap-4">
+        <Toggle v-model="model" disabled />
+        <Toggle :model-value="true" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="With Description" id="with-description">
+      <div class="flex flex-col gap-3">
+        <Toggle v-model="model" description="Enable email notifications" />
+        <Toggle v-model="model" color="primary" description="Dark mode" />
+      </div>
+    </Variant>
+
+    <Variant title="Inside FormField" id="inside-form-field">
+      <Form v-model="formData">
+        <FormField name="notifications" label="Notifications">
+          <Toggle required />
+        </FormField>
+      </Form>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Toggle
+
+## Description
+
+Toggle (switch) component built on the DaisyUI `toggle` element.
+Works standalone with `v-model` or inside `<FormField />` for full form integration (validation, required indicator).
+
+## API
+
+### v-model
+
+| Name      | Type      | Modifiers | Description          |
+|-----------|-----------|-----------|----------------------|
+| `v-model` | `boolean` | `-`       | Bound checked state. |
+
+### Props
+
+| Prop          | Type          | Default     | Configurable       | Description                                                |
+|---------------|---------------|-------------|--------------------|------------------------------------------------------------|
+| `color`       | `ToggleColor` | `undefined` | :white_check_mark: | Color variant.                                             |
+| `size`        | `ToggleSize`  | `'md'`      | :white_check_mark: | Size.                                                      |
+| `description` | `string`      | `undefined` | :x:                | Secondary text displayed next to the toggle.               |
+| `disabled`    | `boolean`     | `undefined` | :x:                | Native disabled.                                           |
+| `required`    | `boolean`     | `undefined` | :x:                | Native required. Signals `<FormField />` to display `"*"`. |
+
+### Events
+
+| Event     | Payload | Description                                                                           |
+|-----------|---------|---------------------------------------------------------------------------------------|
+| `@change` | `Event` | Emitted when the toggle state changes (native change event).                          |
+| `@blur`   | `Event` | Emitted when the toggle loses focus. Triggers validation when inside `<FormField />`. |
+
+### Slots
+
+| Slot          | Scope | Description                                  |
+|---------------|-------|----------------------------------------------|
+| `description` | `-`   | Secondary text displayed next to the toggle. |
+
+> **Configurable** props can be configured in the Poppy Plugin `install` function via the `Poppy` object. See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+```vue
+<!-- Standalone -->
+<Toggle v-model="enabled" color="primary" />
+
+<!-- With description -->
+<Toggle v-model="enabled" description="Enable dark mode" />
+
+<!-- Inside FormField -->
+<FormField name="notifications" label="Notifications">
+  <Toggle required />
+</FormField>
+```
+</docs>

package/src/components/data/toggle/Toggle.vue

@@ -0,0 +1,115 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import { useFormField } from '@/composables/use-form-field'
+import type { ComponentClass } from '@/types/utils.type'
+import { getClass } from '@/utils/build-class.util'
+import { isTrue } from '@/utils/is-true'
+import { computed, useSlots, useTemplateRef } from 'vue'
+import { TOGGLE_CONFIG } from './toggle.context'
+import type { ToggleProps } from './toggle.props'
+import type { ToggleColor, ToggleSize } from './toggle.types'
+
+const colors: ComponentClass<'toggle', ToggleColor> = {
+  neutral: 'toggle-neutral',
+  primary: 'toggle-primary',
+  secondary: 'toggle-secondary',
+  accent: 'toggle-accent',
+  info: 'toggle-info',
+  success: 'toggle-success',
+  warning: 'toggle-warning',
+  error: 'toggle-error',
+}
+
+const sizes: ComponentClass<'toggle', ToggleSize> = {
+  xs: 'toggle-xs',
+  sm: 'toggle-sm',
+  md: 'toggle-md',
+  lg: 'toggle-lg',
+  xl: 'toggle-xl',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<ToggleProps>()
+
+/**
+ * Whether the toggle is on or off.
+ * Use `v-model` to bind to a boolean reactive value.
+ */
+const model = defineModel<boolean>()
+
+const config = useComponentConfig(TOGGLE_CONFIG, props, { size: 'md' })
+
+const inputEl = useTemplateRef('inputEl')
+
+const slots = useSlots()
+
+// ── Form field ───────────────────────────────────────────────────────────────
+
+const { field, fieldValue, onBlur, clearError } = useFormField<boolean>({
+  required: computed(() => isTrue(props.required)),
+  inputEl,
+})
+
+// ── Value resolution ─────────────────────────────────────────────────────────
+
+const resolvedValue = computed(() => field ? fieldValue.value : model.value)
+
+function handleChange(event: Event): void {
+  const checked = (event.target as HTMLInputElement).checked
+  model.value = checked
+  field?.setValue(checked)
+  field?.setDirty(true)
+  clearError()
+}
+
+// ── Error ────────────────────────────────────────────────────────────────────
+
+const hasError = computed(() => !!field?.error.value)
+
+// ── Description presence ─────────────────────────────────────────────────────
+
+const hasDescription = computed(() => !!(props.description || slots.description))
+</script>
+
+<template>
+  <!-- Bare toggle — no description -->
+  <input
+    v-if="!hasDescription"
+    ref="inputEl"
+    type="checkbox"
+    class="toggle"
+    :class="[
+      getClass(colors, config.color),
+      getClass(sizes, config.size),
+      { 'toggle-error': hasError },
+    ]"
+    :checked="resolvedValue"
+    :disabled="disabled"
+    :required="isTrue(required)"
+    @change="handleChange"
+    @blur="onBlur"
+  />
+
+  <!-- Toggle with description -->
+  <label v-else class="flex cursor-pointer items-center gap-2">
+    <input
+      ref="inputEl"
+      type="checkbox"
+      class="toggle"
+      :class="[
+        getClass(colors, config.color),
+        getClass(sizes, config.size),
+        { 'toggle-error': hasError },
+      ]"
+      :checked="resolvedValue"
+      :disabled="disabled"
+      :required="isTrue(required)"
+      @change="handleChange"
+      @blur="onBlur"
+    />
+    <span class="label-text text-base-content/60">
+      <slot name="description">{{ description }}</slot>
+    </span>
+  </label>
+</template>

package/src/components/data/toggle/toggle.context.ts

@@ -0,0 +1,3 @@
+import { createComponentConfigKey } from '@/symbol'
+
+export const TOGGLE_CONFIG = createComponentConfigKey('toggle')

package/src/components/data/toggle/toggle.props.ts

@@ -0,0 +1,30 @@
+import type { InputHTMLAttributes } from 'vue'
+import type { ToggleColor, ToggleSize } from './toggle.types'
+
+export interface ToggleConfigurableProps {
+  /**
+   * Color of the toggle.
+   */
+  color?: ToggleColor
+
+  /**
+   * Size of the toggle.
+   *
+   * @default 'md'
+   */
+  size?: ToggleSize
+}
+
+interface NativeToggle {
+  /** Disables the toggle. */
+  disabled?: InputHTMLAttributes['disabled']
+  /** Marks the field as required — signals FormField to display "*". */
+  required?: InputHTMLAttributes['required']
+}
+
+export interface ToggleProps extends ToggleConfigurableProps, NativeToggle {
+  /**
+   * Secondary description displayed next to the toggle.
+   */
+  description?: string
+}

package/src/components/data/toggle/toggle.types.ts

@@ -0,0 +1,5 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type ToggleColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+
+export type ToggleSize = ComponentSize