@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system92.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system92.js","names":["$slots"],"sources":["../src/components/BFloatButton/BFloatButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport { type BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { computed } from 'vue';\nimport type { BFloatButtonBadgeProps } from './types.ts';\nimport { BFloatButtonShape, BFloatButtonType } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  icon,\n  description,\n  tooltip,\n  type = BFloatButtonType.Default,\n  shape = BFloatButtonShape.Circle,\n  href,\n  target = '_blank',\n  htmlType = 'button',\n  badge,\n  disabled = false,\n  ariaLabel,\n} = defineProps<{\n  /**\n   * Icon name for the float button.\n   * @example 'arrow-up', 'plus', 'question'\n   */\n  icon?: `${BIconName}`;\n  /**\n   * Description text shown below the icon (square shape only).\n   */\n  description?: string;\n  /**\n   * Tooltip text shown on hover.\n   */\n  tooltip?: string;\n  /**\n   * Visual type of the button.\n   * @default 'default'\n   */\n  type?: `${BFloatButtonType}`;\n  /**\n   * Shape of the button.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * When set, renders as an anchor element with this href.\n   */\n  href?: string;\n  /**\n   * Link target attribute (only used with href).\n   * @default '_blank'\n   */\n  target?: string;\n  /**\n   * HTML button type attribute (only used when not href).\n   * @default 'button'\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  /**\n   * Badge configuration to display on the button.\n   */\n  badge?: BFloatButtonBadgeProps;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Accessible label for the button (important when no visible text).\n   */\n  ariaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the button is clicked. */\n  (e: 'click', event: MouseEvent): void;\n}>();\n\ndefineSlots<{\n  /** Custom icon content. */\n  icon?(): unknown;\n  /** Description content (square shape only). */\n  description?(): unknown;\n  /** Tooltip content. */\n  tooltip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Computed helpers\n// ─────────────────────────────────────────────\nconst isType = (value: `${BFloatButtonType}`) => type === value;\nconst isShape = (value: `${BFloatButtonShape}`) => shape === value;\n\nconst badgeCount = computed(() => {\n  if (!badge) return undefined;\n  if (badge.dot) return undefined;\n  return badge.count;\n});\n\nconst showBadgeDot = computed(() => badge?.dot ?? false);\n\nconst badgeOverflow = computed(() => badge?.overflowCount ?? 99);\n\nconst badgeDisplayCount = computed(() => {\n  const count = badgeCount.value;\n  if (count === undefined) return undefined;\n  if (count === 0 && !badge?.showZero) return undefined;\n  return count > badgeOverflow.value ? `${badgeOverflow.value}+` : String(count);\n});\n\nconst showBadge = computed(() => {\n  return showBadgeDot.value || badgeDisplayCount.value !== undefined;\n});\n\nfunction handleClick(event: MouseEvent) {\n  if (disabled) return;\n  emit('click', event);\n}\n\nconst rootTag = computed(() => (href ? 'a' : 'button'));\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    :href=\"href\"\n    :target=\"href ? target : undefined\"\n    :type=\"!href ? htmlType : undefined\"\n    :disabled=\"!href && disabled ? true : undefined\"\n    :aria-disabled=\"href && disabled ? 'true' : undefined\"\n    :aria-label=\"ariaLabel ?? tooltip\"\n    :title=\"tooltip\"\n    :class=\"[\n      'b-float-button',\n      {\n        'b-float-button--circle': isShape('circle'),\n        'b-float-button--square': isShape('square'),\n        'b-float-button--default': isType('default'),\n        'b-float-button--primary': isType('primary'),\n        'b-float-button--disabled': disabled,\n      },\n    ]\"\n    @click=\"handleClick\"\n  >\n    <!-- Badge -->\n    <span\n      v-if=\"showBadge\"\n      class=\"b-float-button__badge\"\n      :class=\"{\n        'b-float-button__badge--dot': showBadgeDot,\n        'b-float-button__badge--count': !showBadgeDot,\n      }\"\n      :style=\"badge?.color ? { backgroundColor: badge.color } : undefined\"\n      aria-hidden=\"true\"\n    >\n      <template v-if=\"!showBadgeDot\">{{ badgeDisplayCount }}</template>\n    </span>\n\n    <!-- Body -->\n    <span class=\"b-float-button__body\">\n      <!-- Icon -->\n      <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n        <slot name=\"icon\">\n          <BIcon v-if=\"icon\" :icon=\"icon\" size=\"md\" />\n          <!-- Default plus icon when no icon prop or slot is provided -->\n          <svg\n            v-else\n            width=\"1em\"\n            height=\"1em\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n          </svg>\n        </slot>\n      </span>\n\n      <!-- Description (square shape only) -->\n      <span\n        v-if=\"($slots.description || description) && isShape('square')\"\n        class=\"b-float-button__description\"\n      >\n        <slot name=\"description\">{{ description }}</slot>\n      </span>\n    </span>\n\n    <!-- Tooltip overlay -->\n    <span\n      v-if=\"$slots.tooltip || (tooltip && !ariaLabel)\"\n      class=\"b-float-button__tooltip\"\n      role=\"tooltip\"\n    >\n      <slot name=\"tooltip\">{{ tooltip }}</slot>\n    </span>\n  </component>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   scoped to .b-float-button — never on :root\n   ──────────────────────────────────────────── */\n.b-float-button {\n  /* Size tokens — AntD: floatButtonSize (40px) */\n  --b-float-button-size: 40px;\n  /* Icon size — AntD: floatButtonIconSize (21px) */\n  --b-float-button-icon-size: 1.3125rem;\n  /* Background — AntD: colorBgContainer */\n  --b-float-button-bg: #fff;\n  /* Primary background */\n  --b-float-button-primary-bg: oklch(55% 0.2 264);\n  /* Primary hover background */\n  --b-float-button-primary-bg-hover: oklch(62% 0.2 264);\n  /* Default hover background */\n  --b-float-button-bg-hover: oklch(96% 0 0);\n  /* Text / icon color — AntD: colorText */\n  --b-float-button-color: oklch(20% 0 0);\n  /* Primary text color */\n  --b-float-button-primary-color: #fff;\n  /* Border radius (circle: 50%, square: 8px) */\n  --b-float-button-border-radius-circle: 50%;\n  --b-float-button-border-radius-square: 0.5rem;\n  /* Shadow — AntD: boxShadowSecondary */\n  --b-float-button-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  /* Bottom inset — AntD: floatButtonInsetBlockEnd (48px) */\n  --b-float-button-inset-block-end: 3rem;\n  /* Inline inset — AntD: floatButtonInsetInlineEnd (24px) */\n  --b-float-button-inset-inline-end: 1.5rem;\n  /* z-index — AntD: zIndexPopupBase (1000) */\n  --b-float-button-z-index: 1000;\n  /* Transition */\n  --b-float-button-transition-duration: 200ms;\n  /* Description font size (sm) */\n  --b-float-button-description-font-size: 0.75rem;\n  /* Badge */\n  --b-float-button-badge-bg: oklch(57% 0.22 25);\n  --b-float-button-badge-color: #fff;\n  --b-float-button-badge-font-size: 0.6875rem;\n  /* Tooltip */\n  --b-float-button-tooltip-bg: oklch(20% 0.02 260);\n  --b-float-button-tooltip-color: oklch(96% 0 0);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-float-button,\n[data-prefers-color='dark'].b-float-button {\n  --b-float-button-bg: oklch(20% 0.02 260);\n  --b-float-button-bg-hover: oklch(28% 0.02 260);\n  --b-float-button-color: oklch(88% 0.01 260);\n  --b-float-button-primary-bg: oklch(50% 0.2 264);\n  --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n  --b-float-button-shadow:\n    0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n    0 9px 28px 8px oklch(0% 0 0 / 25%);\n  --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n  --b-float-button-tooltip-color: oklch(88% 0.01 260);\n  --b-float-button-badge-bg: oklch(55% 0.22 25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'].b-float-button {\n    --b-float-button-bg: oklch(20% 0.02 260);\n    --b-float-button-bg-hover: oklch(28% 0.02 260);\n    --b-float-button-color: oklch(88% 0.01 260);\n    --b-float-button-primary-bg: oklch(50% 0.2 264);\n    --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n    --b-float-button-shadow:\n      0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n      0 9px 28px 8px oklch(0% 0 0 / 25%);\n    --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n    --b-float-button-tooltip-color: oklch(88% 0.01 260);\n    --b-float-button-badge-bg: oklch(55% 0.22 25);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base button\n   ───────────────────────────────────────────── */\n.b-float-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--b-float-button-size);\n  height: var(--b-float-button-size);\n  min-height: var(--b-float-button-size);\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  box-shadow: var(--b-float-button-shadow);\n  text-decoration: none;\n  transition:\n    background-color var(--b-float-button-transition-duration) ease,\n    color var(--b-float-button-transition-duration) ease,\n    box-shadow var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n  outline-offset: 2px;\n\n  /* Tooltip hidden by default */\n  &:hover .b-float-button__tooltip {\n    opacity: 1;\n    pointer-events: auto;\n    transform: translateX(-50%) scale(1);\n  }\n}\n\n/* ── Shape: circle ── */\n.b-float-button--circle {\n  border-radius: var(--b-float-button-border-radius-circle);\n}\n\n/* ── Shape: square ── */\n.b-float-button--square {\n  border-radius: var(--b-float-button-border-radius-square);\n  height: auto;\n  min-height: var(--b-float-button-size);\n  padding: 0.5rem;\n}\n\n/* ── Type: default ── */\n.b-float-button--default {\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-bg-hover);\n  }\n}\n\n/* ── Type: primary ── */\n.b-float-button--primary {\n  background-color: var(--b-float-button-primary-bg);\n  color: var(--b-float-button-primary-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-primary-bg-hover);\n  }\n}\n\n/* ── Disabled state ── */\n.b-float-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ── Focus visible ring ── */\n.b-float-button:focus-visible {\n  outline: 2px solid var(--b-float-button-primary-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Body (icon + description wrapper)\n   ───────────────────────────────────────────── */\n.b-float-button__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.125rem;\n}\n\n/* ─────────────────────────────────────────────\n   Icon\n   ───────────────────────────────────────────── */\n.b-float-button__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--b-float-button-icon-size);\n  line-height: 1;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-float-button__description {\n  font-size: var(--b-float-button-description-font-size);\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* ─────────────────────────────────────────────\n   Tooltip overlay\n   ───────────────────────────────────────────── */\n.b-float-button__tooltip {\n  position: absolute;\n  right: calc(100% + 0.75rem);\n  top: 50%;\n  transform: translateX(-50%) scale(0.95);\n  white-space: nowrap;\n  background: var(--b-float-button-tooltip-bg);\n  color: var(--b-float-button-tooltip-color);\n  font-size: 0.875rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.375rem;\n  pointer-events: none;\n  opacity: 0;\n  transition:\n    opacity var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n\n  /* Arrow */\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 100%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n    border-left-color: var(--b-float-button-tooltip-bg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Badge\n   ───────────────────────────────────────────── */\n.b-float-button__badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  z-index: 1;\n  background: var(--b-float-button-badge-bg);\n  color: var(--b-float-button-badge-color);\n  font-size: var(--b-float-button-badge-font-size);\n  line-height: 1;\n  border-radius: 10px;\n  padding: 2px 5px;\n  min-width: 1.25rem;\n  text-align: center;\n  box-shadow: 0 0 0 2px var(--b-float-button-bg);\n}\n\n.b-float-button__badge--dot {\n  width: 8px;\n  height: 8px;\n  min-width: 0;\n  padding: 0;\n  border-radius: 50%;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button,\n  .b-float-button__tooltip {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,IAAM,IAAO,GAiBP,KAAU,MAAiC,EAAA,SAAS,GACpD,KAAW,MAAkC,EAAA,UAAU,GAEvD,IAAa,QAAe;AAC3B,SAAA,SACD,GAAA,MAAM,IACV,QAAO,EAAA,MAAM;IACb,EAEI,IAAe,QAAe,EAAA,OAAO,OAAO,GAAM,EAElD,IAAgB,QAAe,EAAA,OAAO,iBAAiB,GAAG,EAE1D,IAAoB,QAAe;GACvC,IAAM,IAAQ,EAAW;AACrB,aAAU,KAAA,KACV,QAAU,KAAK,CAAC,EAAA,OAAO,UAC3B,QAAO,IAAQ,EAAc,QAAQ,GAAG,EAAc,MAAM,KAAK,OAAO,EAAM;IAC9E,EAEI,IAAY,QACT,EAAa,SAAS,EAAkB,UAAU,KAAA,EACzD;EAEF,SAAS,EAAY,GAAmB;AAClC,KAAA,YACJ,EAAK,SAAS,EAAM;;EAGtB,IAAM,IAAU,QAAgB,EAAA,OAAO,MAAM,SAAU;yBAIrD,EAwEY,EAvEL,EAAA,MAAO,EAAA;GACX,MAAM,EAAA;GACN,QAAQ,EAAA,OAAO,EAAA,SAAS,KAAA;GACxB,MAAO,EAAA,OAAkB,KAAA,IAAX,EAAA;GACd,UAAQ,CAAG,EAAA,QAAQ,EAAA,WAAQ,KAAU,KAAA;GACrC,iBAAe,EAAA,QAAQ,EAAA,WAAQ,SAAY,KAAA;GAC3C,cAAY,EAAA,aAAa,EAAA;GACzB,OAAO,EAAA;GACP,OAAK,EAAA,CAAA,kBAAA;8BAAsE,EAAO,SAAA;8BAA8C,EAAO,SAAA;+BAA+C,EAAM,UAAA;+BAAgD,EAAM,UAAA;gCAAiD,EAAA;;GAUnS,SAAO;;oBAcD;IAVC,EAAA,SAAA,GAAA,EADR,EAWO,QAAA;;KATL,OAAK,EAAA,CAAC,yBAAuB;oCACmB,EAAA;uCAAuD,EAAA;;KAItG,OAAK,EAAE,EAAA,OAAO,QAAK,EAAA,iBAAsB,EAAA,MAAM,OAAK,GAAK,KAAA,EAAS;KACnE,eAAY;QAEK,EAAA,QAAkC,EAAA,IAAA,GAAA,IAAlC,GAAA,EAAjB,EAAiE,GAAA,EAAA,KAAA,GAAA,EAAA,CAAA,EAAA,EAA/B,EAAA,MAAiB,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAIrD,EA0BO,QA1BP,GA0BO,CAxBL,EAeO,QAfP,GAeO,CAdL,EAaO,EAAA,QAAA,QAAA,EAAA,QAAA,CAZQ,EAAA,QAAA,GAAA,EAAb,EAA4C,GAAA;;KAAxB,MAAM,EAAA;KAAM,MAAK;mCAErC,EASM,OATN,GASM,CAAA,GAAA,AAAA,EAAA,OAAA,CADJ,EAAgD,QAAA,EAA1C,GAAE,uCAAqC,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,GAO1CA,EAAAA,OAAO,eAAe,EAAA,gBAAgB,EAAO,SAAA,IAAA,GAAA,EADtD,EAKO,QALP,GAKO,CADL,EAAiD,EAAA,QAAA,eAAA,EAAA,QAAA,CAAA,EAAA,EAArB,EAAA,YAAW,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;IAMnCA,EAAAA,OAAO,WAAY,EAAA,WAAO,CAAK,EAAA,aAAA,GAAA,EADvC,EAMO,QANP,GAMO,CADL,EAAyC,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EAAjB,EAAA,QAAO,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}