fds-vue-core 2.1.1 → 2.1.3

package/src/components/FdsSpinner/FdsSpinner.vue

@@ -1,90 +0,0 @@
-<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

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

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

@@ -1,148 +0,0 @@
-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

@@ -1,44 +0,0 @@
-<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

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

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

@@ -1,136 +0,0 @@
-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

@@ -1,162 +0,0 @@
-<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>