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

package/src/components/layout/drawer/Drawer.vue

@@ -0,0 +1,91 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import type { ComponentClass } from '@/types/utils.type'
+import { getClass } from '@/utils/build-class.util'
+import { isTrue } from '@/utils/is-true'
+import { inject, provide, useId, watch } from 'vue'
+import { DRAWER_CONFIG } from './drawer.context'
+import type { DrawerProps } from './drawer.props'
+import type { DrawerSide } from './drawer.types'
+
+const drawerSides: ComponentClass<'drawer', DrawerSide> = {
+  start: 'drawer-start',
+  end: 'drawer-end',
+}
+
+const BASE = 20
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DrawerProps>()
+const open = defineModel<boolean>({ default: false })
+
+const emit = defineEmits<{
+  present: []
+  close: []
+}>()
+
+const config = useComponentConfig(DRAWER_CONFIG, props, {
+  side: 'start',
+  overlay: true,
+})
+
+const parentLevel = inject('drawer-level', 0)
+const level = parentLevel + 1
+provide('drawer-level', level)
+
+const zIndex = BASE + level * 10 + 1
+const drawerId = `drawer-${useId()}`
+
+watch(open, isOpen => {
+  isOpen ? emit('present') : emit('close')
+})
+
+function present() {
+  open.value = true
+  emit('present')
+}
+
+function close() {
+  open.value = false
+  emit('close')
+}
+
+defineExpose({
+  present,
+  close,
+})
+</script>
+
+<template>
+  <div
+    class="drawer"
+    :class="getClass(drawerSides, config.side)"
+  >
+    <input
+      :id="drawerId"
+      v-model="open"
+      type="checkbox"
+      class="drawer-toggle"
+    />
+
+    <div class="drawer-content" :class="config.contentClass">
+      <slot :drawer-id="drawerId" :is-open="open" :present="present" :close="close" />
+    </div>
+
+    <aside
+      class="drawer-side"
+      :class="config.sidebarClass"
+      :style="{ zIndex }"
+    >
+      <label
+        v-if="isTrue(config.overlay)"
+        :for="drawerId"
+        aria-label="close"
+        class="drawer-overlay"
+      />
+
+      <slot name="sidebar" :drawer-id="drawerId" :is-open="open" :present="present" :close="close" />
+    </aside>
+  </div>
+</template>

package/src/components/layout/drawer/drawer.context.ts

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

package/src/components/layout/drawer/drawer.props.ts

@@ -0,0 +1,31 @@
+import type { Booleanish } from '@/types/utils.type'
+import type { ClassValue } from 'vue'
+import type { DrawerSide } from './drawer.types'
+
+export interface DrawerConfigurableProps {
+  /**
+   * Side from which the drawer opens.
+   * - `'start'`: Opens from the left (default).
+   * - `'end'`: Opens from the right.
+   */
+  side?: DrawerSide
+
+  /**
+   * When `true`, clicking the overlay closes the drawer.
+   *
+   * @default true
+   */
+  overlay?: Booleanish
+
+  /**
+   * Additional classes to apply to the drawer content container.
+   */
+  contentClass?: ClassValue
+
+  /**
+   * Additional classes to apply to the drawer sidebar container.
+   */
+  sidebarClass?: ClassValue
+}
+
+export interface DrawerProps extends DrawerConfigurableProps {}

package/src/components/layout/drawer/drawer.types.ts

@@ -0,0 +1,6 @@
+export type DrawerSide = 'start' | 'end'
+
+export type DrawerEmits = {
+  present: []
+  close: []
+}

package/src/components/layout/indicator/Indicator.story.vue

@@ -0,0 +1,264 @@
+<script lang="ts">
+import Badge from '@/components/display/badge/Badge.vue'
+import { reactive } from 'vue'
+import Indicator from './Indicator.vue'
+import type { IndicatorProps } from './indicator.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<IndicatorProps>({
+  side: 'end',
+  align: undefined,
+  hide: false,
+})
+</script>
+
+<template>
+  <Story group="components" title="Layout/Indicator" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Side" v-model="state.side" :options="['start', 'end', 'top', 'bottom']" />
+          <HstSelect title="Align" v-model="state.align" :options="[{ label: '-- default --', value: undefined }, 'start', 'end', 'center', 'middle']" />
+          <HstCheckbox title="Hide" v-model="(state.hide as boolean)" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Indicator side="end">
+              <button class="btn">Button with indicator</button>
+            </Indicator>
+          </textarea>
+        </template>
+
+        <div class="p-4">
+          <Indicator v-bind="state">
+            <template #indicator>
+              <Badge color="error" size="xs" class="badge-sm">5</Badge>
+            </template>
+            <button class="btn">Button with indicator</button>
+          </Indicator>
+        </div>
+      </Variant>
+
+      <Variant title="Sides">
+        <div class="indicator-story p-4">
+          <div v-for="side in ['start', 'end', 'top', 'bottom']" :key="side" class="indicator-story--item">
+            <Indicator :side="side">
+              <button class="btn w-40">{{ side }}</button>
+              <template #indicator>
+                <Badge color="primary" size="xs" class="badge-sm">!</Badge>
+              </template>
+            </Indicator>
+            <span class="indicator-story--label">{{ side }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Alignment">
+        <template #source>
+          <textarea v-pre>
+            <!-- End side with middle alignment -->
+            <Indicator side="end" align="middle" item>
+              <button class="btn w-40">End + Middle</button>
+              <template #indicator>
+                <Badge color="primary">5</Badge>
+              </template>
+            </Indicator>
+
+            <!-- Top side with center alignment -->
+            <Indicator side="top" align="center" item>
+              <button class="btn w-40">Top + Center</button>
+              <template #indicator>
+                <Badge color="success">new</Badge>
+              </template>
+            </Indicator>
+          </textarea>
+        </template>
+
+        <div class="flex gap-4 flex-wrap p-4">
+          <Indicator side="end" align="middle" item>
+            <button class="btn w-40">End + Middle</button>
+            <template #indicator>
+              <Badge color="primary">5</Badge>
+            </template>
+          </Indicator>
+          <Indicator side="start" align="middle" item>
+            <button class="btn w-40">Start + Middle</button>
+            <template #indicator>
+              <Badge color="warning">3</Badge>
+            </template>
+          </Indicator>
+          <Indicator side="top" align="center" item>
+            <button class="btn w-40">Top + Center</button>
+            <template #indicator>
+              <Badge color="success">new</Badge>
+            </template>
+          </Indicator>
+          <Indicator side="bottom" align="center" item>
+            <button class="btn w-40">Bottom + Center</button>
+            <template #indicator>
+              <Badge color="info">2</Badge>
+            </template>
+          </Indicator>
+        </div>
+      </Variant>
+
+      <Variant title="With Badge">
+        <template #source>
+          <textarea v-pre>
+            <Indicator side="end" item>
+              <button class="btn">Messages</button>
+              <template #indicator>
+                <Badge color="error">5</Badge>
+              </template>
+            </Indicator>
+          </textarea>
+        </template>
+
+        <div class="flex gap-4 flex-wrap p-4">
+          <Indicator side="end">
+            <button class="btn">Messages</button>
+            <template #indicator>
+              <Badge color="error">5</Badge>
+            </template>
+          </Indicator>
+          <Indicator side="start">
+            <button class="btn">Notifications</button>
+            <template #indicator>
+              <Badge color="warning">3</Badge>
+            </template>
+          </Indicator>
+          <Indicator side="top">
+            <button class="btn">Alerts</button>
+            <template #indicator>
+              <Badge color="success">1</Badge>
+            </template>
+          </Indicator>
+          <Indicator side="bottom">
+            <button class="btn">Updates</button>
+            <template #indicator>
+              <Badge color="info">2</Badge>
+            </template>
+          </Indicator>
+        </div>
+      </Variant>
+
+      <Variant title="Composition">
+        <template #source>
+          <textarea v-pre>
+            <div class="flex gap-4">
+              <Indicator side="end" align="middle">
+                <div class="w-16 h-16 bg-base-200 rounded-lg"></div>
+                <template #indicator>
+                  <Badge color="success" class="badge-sm">new</Badge>
+                </template>
+              </Indicator>
+              <Indicator side="top" align="center">
+                <div class="w-16 h-16 bg-base-200 rounded-lg"></div>
+                <template #indicator>
+                  <Badge color="warning" class="badge-sm">hot</Badge>
+                </template>
+              </Indicator>
+            </div>
+          </textarea>
+        </template>
+
+        <div class="flex gap-4 p-4">
+          <Indicator side="end" align="middle">
+            <div class="w-16 h-16 bg-base-200 rounded-lg"></div>
+            <template #indicator>
+              <Badge color="success" class="badge-sm">new</Badge>
+            </template>
+          </Indicator>
+          <Indicator side="top" align="center">
+            <div class="w-16 h-16 bg-base-200 rounded-lg"></div>
+            <template #indicator>
+              <Badge color="warning" class="badge-sm">hot</Badge>
+            </template>
+          </Indicator>
+          <Indicator side="start" align="middle">
+            <div class="w-16 h-16 bg-base-200 rounded-lg"></div>
+            <template #indicator>
+              <Badge color="error" class="badge-sm">urgent</Badge>
+            </template>
+          </Indicator>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.indicator-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  padding: 1rem;
+}
+
+.indicator-story--item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.indicator-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+</style>
+
+<docs lang="md">
+# Indicator
+
+## Description
+
+Wraps an element to add a small indicator (like a badge or notification dot) at various positions.
+Built on DaisyUI's `indicator` component. Use it to add notification badges, status markers,
+or any small visual indicator to elements.
+
+The indicator content is automatically wrapped in a `span` with the `indicator-item` class.
+
+## Props
+
+| Prop   | Type              | Default     | Required | Configurable       | Description                                                              |
+|--------|-------------------|-------------|----------|--------------------|--------------------------------------------------------------------------|
+| `side` | `IndicatorSide`   | `undefined` | :x:      | :white_check_mark: | Side where indicator is placed: `'start'`, `'end'`, `'top'`, `'bottom'`. |
+| `align`| `IndicatorAlign`  | `undefined` | :x:      | :white_check_mark: | Alignment along the side: `'start'`, `'end'`, `'center'`, `'middle'`.    |
+| `hide` | `Booleanish`      | `false`     | :x:      | :x:                | When `true`, hides the indicator content.                                |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.indicator` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+
+```vue
+<!-- Basic indicator on end side -->
+<Indicator side="end">
+  <button class="btn">Messages</button>
+  <template #indicator>
+    <Badge color="error">5</Badge>
+  </template>
+</Indicator>
+
+<!-- With alignment: centered vertically on end side -->
+<Indicator side="end" align="middle">
+  <button class="btn h-16">Settings</button>
+  <template #indicator>
+    <Badge color="primary">new</Badge>
+  </template>
+</Indicator>
+
+<!-- Top side with center alignment -->
+<Indicator side="top" align="center">
+  <div class="w-32 h-16 bg-base-200 rounded-lg"></div>
+  <template #indicator>
+    <Badge color="success">new</Badge>
+  </template>
+</Indicator>
+```
+</docs>

package/src/components/layout/indicator/Indicator.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+import ClassWrapper from '@/components/ClassWrapper.vue'
+import { useComponentConfig } from '@/composables/use-component-config'
+import type { ComponentClass } from '@/types/utils.type'
+import { getClass } from '@/utils/build-class.util'
+import { isTrue } from '@/utils/is-true'
+import { INDICATOR_CONFIG } from './indicator.context'
+import type { IndicatorProps } from './indicator.props'
+import type { IndicatorAlign, IndicatorSide } from './indicator.types'
+
+const indicatorSides: ComponentClass<'indicator', IndicatorSide> = {
+  start: 'indicator-start',
+  end: 'indicator-end',
+  top: 'indicator-top',
+  bottom: 'indicator-bottom',
+}
+
+const indicatorAligns: ComponentClass<'indicator', IndicatorAlign> = {
+  start: 'indicator-start',
+  end: 'indicator-end',
+  center: 'indicator-center',
+  middle: 'indicator-middle',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<IndicatorProps>()
+const config = useComponentConfig(INDICATOR_CONFIG, props)
+</script>
+
+<template>
+  <div
+    class="indicator"
+    :class="[
+      getClass(indicatorSides, config.side),
+      getClass(indicatorAligns, config.align),
+    ]"
+  >
+    <ClassWrapper v-if="$slots.indicator && !isTrue(config.hide)" class="indicator-item">
+      <slot name="indicator" />
+    </ClassWrapper>
+    <slot />
+  </div>
+</template>

package/src/components/layout/indicator/indicator.context.ts

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

package/src/components/layout/indicator/indicator.props.ts

@@ -0,0 +1,31 @@
+import type { Booleanish } from '@/types/utils.type'
+import type { IndicatorAlign, IndicatorSide } from './indicator.types'
+
+export interface IndicatorConfigurableProps {
+  /**
+   * Side of the element where the indicator is placed.
+   * - `'start'`: Left side of the content.
+   * - `'end'`: Right side of the content.
+   * - `'top'`: Top of the content.
+   * - `'bottom'`: Bottom of the content.
+   */
+  side?: IndicatorSide
+
+  /**
+   * Alignment of the indicator along the chosen side.
+   * - `'start'`: Aligned to the start of the side.
+   * - `'end'`: Aligned to the end of the side.
+   * - `'center'`: Centered horizontally (for top/bottom sides).
+   * - `'middle'`: Centered vertically (for start/end sides).
+   */
+  align?: IndicatorAlign
+}
+
+export interface IndicatorProps extends IndicatorConfigurableProps {
+  /**
+   * When `true`, hides the indicator content.
+   *
+   * @default false
+   */
+  hide?: Booleanish
+}

package/src/components/layout/indicator/indicator.types.ts

@@ -0,0 +1,2 @@
+export type IndicatorSide = 'start' | 'end' | 'top' | 'bottom'
+export type IndicatorAlign = 'start' | 'end' | 'center' | 'middle'

package/src/components/layout/join/Join.story.vue

@@ -0,0 +1,147 @@
+<script lang="ts">
+import Button from '@/components/actions/button/Button.vue'
+import { reactive } from 'vue'
+import Join from './Join.vue'
+import type { JoinProps } from './join.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<JoinProps>({
+  direction: 'horizontal',
+})
+</script>
+
+<template>
+  <Story group="components" title="Layout/Join" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Direction" v-model="state.direction" :options="['horizontal', 'vertical']" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Join>
+              <Button>First</Button>
+              <Button>Second</Button>
+              <Button>Third</Button>
+            </Join>
+          </textarea>
+        </template>
+
+        <Join v-bind="state">
+          <Button>First</Button>
+          <Button>Second</Button>
+          <Button>Third</Button>
+        </Join>
+      </Variant>
+
+      <Variant title="Horizontal">
+        <template #source>
+          <textarea v-pre>
+            <Join direction="horizontal">
+              <Button>Save</Button>
+              <Button>Edit</Button>
+              <Button>Delete</Button>
+            </Join>
+          </textarea>
+        </template>
+
+        <Join direction="horizontal">
+          <Button>Save</Button>
+          <Button>Edit</Button>
+          <Button>Delete</Button>
+        </Join>
+      </Variant>
+
+      <Variant title="Vertical">
+        <template #source>
+          <textarea v-pre>
+            <Join direction="vertical">
+              <Button>Item 1</Button>
+              <Button>Item 2</Button>
+              <Button>Item 3</Button>
+            </Join>
+          </textarea>
+        </template>
+
+        <Join direction="vertical">
+          <Button>Item 1</Button>
+          <Button>Item 2</Button>
+          <Button>Item 3</Button>
+        </Join>
+      </Variant>
+
+      <Variant title="Composition">
+        <template #source>
+          <textarea v-pre>
+            <div class="flex gap-4">
+              <Join>
+                <Button color="primary">Primary</Button>
+                <Button color="secondary">Secondary</Button>
+              </Join>
+              <Join direction="vertical">
+                <Button color="accent">Top</Button>
+                <Button color="info">Bottom</Button>
+              </Join>
+            </div>
+          </textarea>
+        </template>
+
+        <div class="flex gap-4">
+          <Join>
+            <Button color="primary">Primary</Button>
+            <Button color="secondary">Secondary</Button>
+          </Join>
+          <Join direction="vertical">
+            <Button color="accent">Top</Button>
+            <Button color="info">Bottom</Button>
+          </Join>
+        </div>
+      </Variant>
+    </template>
+  </Story>
+</template>
+
+<docs lang="md">
+# Join
+
+## Description
+
+Groups items together side by side or in a column with joined borders.
+Built on DaisyUI's `join` component. Use it to create button groups, segmented controls,
+or any set of elements that should visually appear connected.
+
+## Props
+
+| Prop       | Type            | Default        | Required | Configurable       | Description                                       |
+|------------|-----------------|----------------|----------|--------------------|---------------------------------------------------|
+| `direction`| `JoinDirection` | `'horizontal'` | :x:      | :white_check_mark: | Layout direction: `'horizontal'` or `'vertical'`. |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.join` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+
+```vue
+<!-- Horizontal join (default) -->
+<Join>
+  <Button>First</Button>
+  <Button>Second</Button>
+  <Button>Third</Button>
+</Join>
+
+<!-- Vertical join -->
+<Join direction="vertical">
+  <Button>Top</Button>
+  <Button>Bottom</Button>
+</Join>
+
+<!-- With custom content -->
+<Join>
+  <button class="btn">One</button>
+  <button class="btn">Two</button>
+  <button class="btn">Three</button>
+</Join>
+```
+</docs>

package/src/components/layout/join/Join.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import ClassWrapper from '@/components/ClassWrapper.vue'
+import { useComponentConfig } from '@/composables/use-component-config'
+import type { ComponentClass } from '@/types/utils.type'
+import { getClass } from '@/utils/build-class.util'
+import { JOIN_CONFIG } from './join.context'
+import type { JoinProps } from './join.props'
+import type { JoinDirection } from './join.types'
+
+const joinDirections: ComponentClass<'join', JoinDirection> = {
+  horizontal: 'join-horizontal',
+  vertical: 'join-vertical',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<JoinProps>()
+const config = useComponentConfig(JOIN_CONFIG, props, {
+  direction: 'horizontal',
+})
+</script>
+
+<template>
+  <div
+    class="join"
+    :class="getClass(joinDirections, config.direction)"
+  >
+    <ClassWrapper class="join-item">
+      <slot></slot>
+    </ClassWrapper>
+  </div>
+</template>

package/src/components/layout/join/join.context.ts

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

package/src/components/layout/join/join.props.ts

@@ -0,0 +1,14 @@
+import type { JoinDirection } from './join.types'
+
+export interface JoinConfigurableProps {
+  /**
+   * Direction in which joined items are laid out.
+   * - `'horizontal'`: Items are joined side by side.
+   * - `'vertical'`: Items are joined in a column.
+   *
+   * @default 'horizontal'
+   */
+  direction?: JoinDirection
+}
+
+export interface JoinProps extends JoinConfigurableProps {}