fds-vue-core 2.1.4 → 2.1.6

package/src/components/FdsSpinner/FdsSpinner.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FdsSpinnerProps } from './types'
+
+const props = withDefaults(
+  defineProps<{
+    size?: string
+    color?: FdsSpinnerProps['color']
+    label?: string
+    labelPosition?: FdsSpinnerProps['labelPosition']
+  }>(),
+  { size: '48px', color: 'inherit', label: '', labelPosition: 'bottom' },
+)
+
+const boxStyle = computed(() => ({ width: props.size, height: props.size }))
+
+const colorClass = computed(() => {
+  switch (props.color) {
+    case 'black':
+      return 'text-black'
+    case 'white':
+      return 'text-white'
+    case 'blue':
+      return 'text-blue-500'
+    case 'inherit':
+    default:
+      return 'text-inherit'
+  }
+})
+
+const wrapperClasses = computed(() =>
+  props.label
+    ? props.labelPosition === 'right'
+      ? 'flex items-center gap-2'
+      : 'inline-flex flex-col items-center gap-2'
+    : 'inline-block',
+)
+</script>
+
+<template>
+  <div
+    :class="wrapperClasses"
+    role="status"
+    :aria-label="label || 'Laddar'"
+  >
+    <div
+      class="relative"
+      :style="boxStyle"
+    >
+      <svg
+        class="animate-spin block"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        :class="colorClass"
+      >
+        <path
+          fill="none"
+          fill-rule="evenodd"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+          d="M22.942 14.523a11.42 11.42 0 01-1.087 2.848m-2.04 2.66a12.161 12.161 0 01-2.456 1.81M12.993.747c1.017.09 2.017.32 2.971.682m2.924 1.636c.81.622 1.528 1.355 2.131 2.178M22.6 8.2a10.5 10.5 0 01.614 2.984M14.25 22.972C8.162 24.215 2.218 20.286.975 14.197-.267 8.108 3.662 2.165 9.75.922"
+        />
+      </svg>
+      <svg
+        class="animate-spin-reverse absolute top-0 left-0"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        :class="colorClass"
+      >
+        <path
+          fill="none"
+          fill-rule="evenodd"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+          d="M12 4.447a7.5 7.5 0 11-7.5 7.5"
+        />
+      </svg>
+    </div>
+    <div
+      v-if="label"
+      :class="labelPosition === 'bottom' ? 'font-bold' : ''"
+    >
+      {{ label }}
+    </div>
+  </div>
+</template>

package/src/components/FdsSpinner/types.ts

@@ -0,0 +1,6 @@
+export interface FdsSpinnerProps {
+  size?: string
+  color?: 'black' | 'white' | 'blue' | 'inherit'
+  label?: string
+  labelPosition?: 'right' | 'bottom'
+}

package/src/components/FdsSticker/FdsSticker.stories.ts

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsSticker from './FdsSticker.vue'
+
+const meta: Meta<typeof FdsSticker> = {
+  title: 'FDS/FdsSticker',
+  component: FdsSticker,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'radio' },
+      options: ['blue', 'gray', 'green', 'red', 'yellow', 't_blue'],
+      description: 'Set the color variant of the sticker',
+    },
+    bullet: {
+      control: { type: 'boolean' },
+      description: 'Set the layout to bullet style',
+    },
+    default: { control: { type: 'text' } },
+  },
+  args: {
+    variant: 'blue',
+    bullet: false,
+    default: 'Stick it!',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const stickerTransform = (storyContext: { args?: { variant?: string; bullet?: boolean; default?: string } }) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.variant && args.variant !== 'blue') attrs.push(`variant="${args.variant}"`)
+  if (args.bullet) attrs.push(':bullet="true"')
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  const content = args.default || ''
+  return `<FdsSticker${attrsStr}>${content}</FdsSticker>`
+}
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsSticker },
+    setup: () => ({ args }),
+    template: `<FdsSticker v-bind="args">{{ args.default }}</FdsSticker>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        transform: stickerTransform,
+      },
+    },
+  },
+  args: {
+    variant: 'blue',
+    default: 'Stick it!',
+  },
+}
+
+export const Alert: Story = {
+  render: () => ({
+    components: { FdsSticker },
+    template: `
+      <FdsSticker variant="yellow">Alert</FdsSticker>
+    `,
+  }),
+}
+
+export const Fail: Story = {
+  render: () => ({
+    components: { FdsSticker },
+    template: `
+      <FdsSticker variant="red">Failed</FdsSticker>
+    `,
+  }),
+}
+
+export const Success: Story = {
+  render: () => ({
+    components: { FdsSticker },
+    template: `
+      <FdsSticker variant="green">Success</FdsSticker>
+    `,
+  }),
+}
+
+export const Gray: Story = {
+  render: () => ({
+    components: { FdsSticker },
+    template: `
+      <FdsSticker variant="gray">Info</FdsSticker>
+    `,
+  }),
+}
+
+export const TransparentBlue: Story = {
+  render: () => ({
+    components: { FdsSticker },
+    template: `
+      <FdsSticker variant="t_blue">Transparent</FdsSticker>
+    `,
+  }),
+}
+
+export const BulletBlue: Story = {
+  render: () => ({
+    components: { FdsSticker },
+    template: `
+      <FdsSticker variant="blue" bullet>Bullet point</FdsSticker>
+    `,
+  }),
+}
+
+export const BulletGreen: Story = {
+  render: () => ({
+    components: { FdsSticker },
+    template: `
+      <FdsSticker variant="green" bullet>Success bullet</FdsSticker>
+    `,
+  }),
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { FdsSticker },
+    template: `
+      <div class="space-y-4">
+        <div class="space-x-2">
+          <FdsSticker variant="blue">Blue</FdsSticker>
+          <FdsSticker variant="green">Green</FdsSticker>
+          <FdsSticker variant="red">Red</FdsSticker>
+          <FdsSticker variant="yellow">Yellow</FdsSticker>
+          <FdsSticker variant="gray">Gray</FdsSticker>
+          <FdsSticker variant="t_blue">Transparent Blue</FdsSticker>
+        </div>
+        <div class="space-x-2">
+          <FdsSticker variant="blue" bullet>Blue Bullet</FdsSticker>
+          <FdsSticker variant="green" bullet>Green Bullet</FdsSticker>
+          <FdsSticker variant="red" bullet>Red Bullet</FdsSticker>
+          <FdsSticker variant="yellow" bullet>Yellow Bullet</FdsSticker>
+          <FdsSticker variant="gray" bullet>Gray Bullet</FdsSticker>
+          <FdsSticker variant="t_blue" bullet>Transparent Blue Bullet</FdsSticker>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/components/FdsSticker/FdsSticker.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FdsStickerProps } from './types'
+
+const props = withDefaults(defineProps<FdsStickerProps>(), {
+  variant: 'blue',
+  bullet: false,
+})
+
+const stickerClasses = computed(() => [
+  'inline-block font-bold text-sm leading-[18px] tracking-normal py-0.5 px-3 rounded-xl border border-transparent whitespace-nowrap max-w-full',
+  props.bullet
+    ? 'text-base! bg-transparent flex-wrap justify-start items-baseline text-base font-normal text-gray-700 border-transparent p-0 mr-3'
+    : '',
+  // Variant colors
+  props.variant === 'blue' && !props.bullet && 'bg-blue-600 text-white',
+  props.variant === 'green' && !props.bullet && 'bg-green-700 text-white',
+  props.variant === 'red' && !props.bullet && 'bg-red-600 text-white',
+  props.variant === 'yellow' && !props.bullet && 'bg-yellow-200 text-gray-700 border-yellow-300',
+  props.variant === 'gray' && !props.bullet && 'bg-gray-200 text-gray-700 border-gray-300!',
+  props.variant === 't_blue' && !props.bullet && 'bg-blue_t-100 text-gray-700 border-blue_t-200!',
+])
+
+const bulletDotClasses = computed(() => [
+  'inline-block w-3 h-3 rounded-full mr-1.5',
+  // Bullet dot colors
+  props.variant === 'blue' && 'bg-blue-600',
+  props.variant === 'green' && 'bg-green-700',
+  props.variant === 'red' && 'bg-red-600',
+  props.variant === 'yellow' && 'bg-yellow-200 border border-yellow-300',
+  props.variant === 'gray' && 'bg-gray-400',
+  props.variant === 't_blue' && 'bg-blue-200 border border-blue-300',
+])
+</script>
+
+<template>
+  <span :class="stickerClasses">
+    <span
+      v-if="bullet"
+      :class="bulletDotClasses"
+    ></span>
+    <slot />
+  </span>
+</template>

package/src/components/FdsSticker/types.ts

@@ -0,0 +1,4 @@
+export interface FdsStickerProps {
+  variant?: 'blue' | 'green' | 'red' | 'yellow' | 'gray' | 't_blue'
+  bullet?: boolean
+}

package/src/components/FdsTreeView/FdsTreeView.stories.ts

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsTreeView from './FdsTreeView.vue'
+import type { FdsTreeNode as TreeNodeType } from './types'
+
+const demoTree: TreeNodeType = {
+  nodeId: 'root',
+  title: 'Root',
+  data: { type: 'root' },
+  children: [
+    {
+      nodeId: 'root-1',
+      title: 'Documents',
+      children: [
+        {
+          nodeId: 'doc-1',
+          title: 'Work',
+          children: [
+            {
+              nodeId: 'work-1',
+              title: 'Projects',
+              children: [
+                {
+                  nodeId: 'proj-1',
+                  title: 'Project Alpha',
+                  data: { type: 'project', status: 'active' },
+                },
+                {
+                  nodeId: 'proj-2',
+                  title: 'Project Beta',
+                  data: { type: 'project', status: 'completed' },
+                },
+                {
+                  nodeId: 'proj-3',
+                  title: 'Project Gamma',
+                  data: { type: 'project', status: 'planning', person_name: 'Anna Sjöström' },
+                },
+              ],
+            },
+            {
+              nodeId: 'work-2',
+              title: 'Reports',
+              children: [
+                { nodeId: 'rep-1', title: 'Q1 Report', data: { type: 'report', year: 2024 } },
+                { nodeId: 'rep-2', title: 'Q2 Report', data: { type: 'report', year: 2024 } },
+              ],
+            },
+          ],
+        },
+        {
+          nodeId: 'doc-2',
+          title: 'Personal',
+          children: [
+            { nodeId: 'pers-1', title: 'Photos', data: { type: 'folder', count: 150 } },
+            { nodeId: 'pers-2', title: 'Videos', data: { type: 'folder', count: 25 } },
+            { nodeId: 'pers-3', title: 'Music', data: { type: 'folder', count: 500 } },
+          ],
+        },
+      ],
+    },
+    {
+      nodeId: 'root-2',
+      title: 'Applications',
+      children: [
+        {
+          nodeId: 'app-1',
+          title: 'Development',
+          children: [
+            { nodeId: 'dev-1', title: 'VS Code', data: { type: 'app', category: 'editor' } },
+            { nodeId: 'dev-2', title: 'Terminal', data: { type: 'app', category: 'utility' } },
+            { nodeId: 'dev-3', title: 'Git', data: { type: 'app', category: 'version-control' } },
+          ],
+        },
+        {
+          nodeId: 'app-2',
+          title: 'Design',
+          children: [
+            { nodeId: 'design-1', title: 'Figma', data: { type: 'app', category: 'design' } },
+            { nodeId: 'design-2', title: 'Sketch', data: { type: 'app', category: 'design' } },
+          ],
+        },
+      ],
+    },
+    {
+      nodeId: 'root-3',
+      title: 'Settings',
+      children: [
+        { nodeId: 'set-1', title: 'General', data: { type: 'setting', category: 'preferences' } },
+        { nodeId: 'set-2', title: 'Privacy', data: { type: 'setting', category: 'security' } },
+        { nodeId: 'set-3', title: 'Notifications', data: { type: 'setting', category: 'alerts' } },
+      ],
+    },
+  ],
+}
+
+const meta: Meta<typeof FdsTreeView> = {
+  title: 'FDS/FdsTreeView',
+  component: FdsTreeView,
+  tags: ['autodocs'],
+  args: {
+    data: demoTree,
+    expandAllChildrenOnParentCheck: true,
+    expandChildrenOnParentCheck: true,
+    horizontalScroll: true,
+    indentation: 36,
+    nodeCollapseIcon: 'arrowUp',
+    nodeExpandIcon: 'arrowDown',
+    searchEnabled: true,
+    searchExpandNodes: true,
+    searchHighlighting: true,
+    searchLabel: 'Sök noder',
+    searchMatchParams: ['title'],
+    showIndeterminate: true,
+    showIndeterminateOnlyOnChildrenSelection: true,
+    titleTemplate: '[[title]] ([[nodeId]])',
+    searchResultNoMatchesTitle: 'Inga resultat hittades',
+    searchResultNoMatchesBody: 'Pröva sök på något annat',
+    searchCountTemplate: '[[filteredNodes]] av [[totalNodes]] avdelningar',
+    searchCountTemplateUnfiltered: '[[totalNodes]] avdelningar',
+    popoverLabels: {
+      parentAndChildren: 'Denna och alla underliggande',
+      parent: 'Endast denna nivå',
+    },
+    searchInputTriggerLength: 2,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  render: (args) => ({
+    components: { FdsTreeView },
+    setup: () => ({ args }),
+    template: '<FdsTreeView v-bind="args" />',
+  }),
+}

package/src/components/FdsTreeView/FdsTreeView.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed, provide, ref, watch } from 'vue'
+import useTreeState from './useTreeState'
+import TreeNode from './TreeNode.vue'
+import { getTitleFromProperties } from './utils'
+import type { FdsTreeNode as TreeNodeType, FdsNodeShape, WrapperProps } from './types'
+import { useElementFinalSize } from '@/composables/useElementFinalSize'
+import FdsInput from '@/components/Form/FdsInput/FdsInput.vue'
+import FdsBlockContent from '@/components/Blocks/FdsBlockContent/FdsBlockContent.vue'
+import FdsText from '@/components/Typography/FdsText/FdsText.vue'
+
+const props = withDefaults(defineProps<WrapperProps<Record<string, unknown>>>(), {
+  indentation: 36,
+  showNodeDescription: false,
+  showChildrenCount: false,
+  expandChildrenOnSelect: false,
+  showIndeterminate: false,
+  expandChildrenOnParentCheck: false,
+  expandAllChildrenOnParentCheck: true,
+  showIndeterminateOnlyOnChildrenSelection: false,
+  searchEnabled: false,
+  searchExpandNodes: false,
+  horizontalScroll: false,
+  searchMatchParams: () => ['title', 'nodeId'],
+  titleTemplate: '[[title]]',
+})
+
+const emit = defineEmits<{
+  (e: 'update:selectedNodes', value: FdsNodeShape[]): void
+  (e: 'getSearchContainerHeight', value: number): void
+}>()
+
+const rootNode = props.data
+const nodesForState = rootNode ? [rootNode] : []
+
+const treeState = useTreeState({
+  expandChildrenOnParentCheck: props.expandChildrenOnParentCheck,
+  expandAllChildrenOnParentCheck: props.expandAllChildrenOnParentCheck,
+  showIndeterminateOnlyOnChildrenSelection: props.showIndeterminateOnlyOnChildrenSelection,
+  searchExpandNodes: props.searchExpandNodes,
+  titleTemplate: props.titleTemplate,
+  nodes: nodesForState,
+  searchInputTriggerLength: props.searchInputTriggerLength,
+})
+provide('treeState', treeState)
+
+const pruneNode = (node: TreeNodeType): FdsNodeShape => ({
+  nodeId: node.nodeId,
+  title: node.title,
+  data: node.data,
+  children: Array.isArray(node.children) ? node.children.map(pruneNode) : undefined,
+})
+
+const selectedNodeObjects = computed<FdsNodeShape[]>(() => treeState.selectedNodeObjects.map(pruneNode))
+
+const searchContainerRef = ref<HTMLElement | null>(null)
+
+useElementFinalSize(searchContainerRef, (height) => {
+  emit('getSearchContainerHeight', height)
+})
+
+defineExpose({
+  selectedNodeObjects,
+  selectedNodes: treeState.selectedNodes,
+  getSearchContainerHeight: () => searchContainerRef.value?.getBoundingClientRect().height,
+})
+
+watch(
+  () => treeState.selectedNodeObjects,
+  () => {
+    emit('update:selectedNodes', selectedNodeObjects.value)
+  },
+  { deep: true },
+)
+
+// Add 1 to the total node count to include the root node
+const totalNodeCount = computed(() => 1 + (treeState?.totalNodeCount.value ?? 0))
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="props.searchEnabled"
+      ref="searchContainerRef"
+      class="pb-4"
+    >
+      <FdsInput
+        :value="treeState?.searchTerm?.value ?? ''"
+        @input="treeState?.setSearchTerm(($event.target as HTMLInputElement).value)"
+        class="w-full"
+        :label="props.searchLabel"
+        clear-button
+        @clearInput="treeState?.clearSearch()"
+      >
+        <input id="tree-view-search-input" />
+      </FdsInput>
+      <div v-if="props.searchCountTemplate || props.searchCountTemplateUnfiltered">
+        <h2
+          v-if="
+            props.searchCountTemplate &&
+            treeState?.searchTerm?.value &&
+            String(treeState?.searchTerm?.value || '').trim().length >= (treeState?.triggerLength ?? 1)
+          "
+          class="text-xl"
+        >
+          {{
+            props.searchCountTemplate
+              .replace('[[filteredNodes]]', treeState?.filteredMatchCount.value.toString())
+              .replace('[[totalNodes]]', totalNodeCount.toString())
+          }}
+        </h2>
+        <h2
+          class="text-xl"
+          v-else
+        >
+          {{
+            props.searchCountTemplateUnfiltered
+              ?.replace('[[totalNodes]]', totalNodeCount.toString())
+              .replace('[[totalNodes]]', totalNodeCount.toString())
+          }}
+        </h2>
+      </div>
+    </div>
+
+    <FdsBlockContent
+      v-if="treeState?.isEmptySearchResult?.value"
+      class="mt-4"
+    >
+      <template #header>{{ props.searchResultNoMatchesTitle }}</template>
+      <FdsText>{{ props.searchResultNoMatchesBody }}</FdsText>
+    </FdsBlockContent>
+
+    <div :class="['rounded-md', { 'overflow-x-auto bg-white-solid': props.horizontalScroll }]">
+      <TreeNode
+        v-if="props.data && !treeState?.isEmptySearchResult?.value"
+        :style="{ container: 'bg-white-solid px-3 py-2' }"
+        :nodes="props.data.children || []"
+        :title="getTitleFromProperties(props.data, props.titleTemplate)"
+        :nodeId="props.data.nodeId"
+        :data="props.data.data"
+        :indentation="props.indentation"
+        :showNodeDescription="props.showNodeDescription"
+        :showChildrenCount="props.showChildrenCount"
+        :expandChildrenOnSelect="props.expandChildrenOnSelect"
+        :showIndeterminate="props.showIndeterminate"
+        :expandChildrenOnParentCheck="props.expandChildrenOnParentCheck"
+        :expandAllChildrenOnParentCheck="props.expandAllChildrenOnParentCheck"
+        :showIndeterminateOnlyOnChildrenSelection="props.showIndeterminateOnlyOnChildrenSelection"
+        :searchEnabled="props.searchEnabled"
+        :searchLabel="props.searchLabel"
+        :searchExpandNodes="props.searchExpandNodes"
+        :searchMatchParams="props.searchMatchParams"
+        :horizontalScroll="props.horizontalScroll"
+        :nodeExpandIcon="props.nodeExpandIcon"
+        :nodeCollapseIcon="props.nodeCollapseIcon"
+        :searchHighlighting="props.searchHighlighting"
+        :titleTemplate="props.titleTemplate"
+        :popoverLabels="props.popoverLabels"
+      />
+    </div>
+  </div>
+</template>