fds-vue-core 2.1.2 → 2.1.4

package/dist/global-components.d.ts

@@ -1,37 +1,72 @@
+import type { DefineComponent } from 'vue'
+import type {
+  FdsTreeViewProps,
+  FdsButtonPrimaryProps,
+  FdsButtonSecondaryProps,
+  FdsButtonMinorProps,
+  FdsIconButtonProps,
+  FdsCopyButtonProps,
+  FdsButtonDownloadProps,
+  FdsIconProps,
+  FdsSpinnerProps,
+  FdsRadioProps,
+  FdsInputProps,
+  FdsCheckboxProps,
+  FdsTextareaProps,
+  FdsSelectProps,
+  FdsTableProps,
+  FdsTableHeadProps,
+  FdsContentBlockProps,
+  FdsBlockInfoProps,
+  FdsAlertBlockProps,
+  FdsExpanderBlockProps,
+  FdsInteractionBlockProps,
+  FdsStickerProps,
+  FdsTabsProps,
+  FdsTabsItemProps,
+  FdsModalProps,
+  FdsPaginationProps,
+  FdsSearchSelectProps,
+  FdsTruncatedTextProps,
+  FdsHeadingProps,
+  FdsTextProps,
+  FdsListHeadingProps,
+} from './index'
+
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    FdsTreeView: (typeof import('../src/components/FdsTreeView/FdsTreeView.vue'))['default']
-    FdsButtonPrimary: (typeof import('../src/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue'))['default']
-    FdsButtonSecondary: (typeof import('../src/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue'))['default']
-    FdsButtonMinor: (typeof import('../src/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue'))['default']
-    FdsButtonIcon: (typeof import('../src/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'))['default']
-    FdsButtonCopy: (typeof import('../src/components/Buttons/FdsButtonCopy/FdsButtonCopy.vue'))['default']
-    FdsButtonDownload: (typeof import('../src/components/Buttons/FdsButtonDownload/FdsButtonDownload.vue'))['default']
-    FdsIcon: (typeof import('../src/components/FdsIcon/FdsIcon.vue'))['default']
-    FdsSpinner: (typeof import('../src/components/FdsSpinner/FdsSpinner.vue'))['default']
-    FdsRadio: (typeof import('../src/components/Form/FdsRadio/FdsRadio.vue'))['default']
-    FdsInput: (typeof import('../src/components/Form/FdsInput/FdsInput.vue'))['default']
-    FdsCheckbox: (typeof import('../src/components/Form/FdsCheckbox/FdsCheckbox.vue'))['default']
-    FdsTextarea: (typeof import('../src/components/Form/FdsTextarea/FdsTextarea.vue'))['default']
-    FdsSelect: (typeof import('../src/components/Form/FdsSelect/FdsSelect.vue'))['default']
-    FdsTable: (typeof import('../src/components/Table/FdsTable/FdsTable.vue'))['default']
-    FdsTableHead: (typeof import('../src/components/Table/FdsTableHead/FdsTableHead.vue'))['default']
-    FdsBlockContent: (typeof import('../src/components/Blocks/FdsBlockContent/FdsBlockContent.vue'))['default']
-    FdsBlockInfo: (typeof import('../src/components/Blocks/FdsBlockInfo/FdsBlockInfo.vue'))['default']
-    FdsBlockAlert: (typeof import('../src/components/Blocks/FdsBlockAlert/FdsBlockAlert.vue'))['default']
-    FdsBlockExpander: (typeof import('../src/components/Blocks/FdsBlockExpander/FdsBlockExpander.vue'))['default']
-    FdsBlockLink: (typeof import('../src/components/Blocks/FdsBlockLink/FdsBlockLink.vue'))['default']
-    FdsSticker: (typeof import('../src/components/FdsSticker/FdsSticker.vue'))['default']
-    FdsTabs: (typeof import('../src/components/Tabs/FdsTabs/FdsTabs.vue'))['default']
-    FdsTabsItem: (typeof import('../src/components/Tabs/FdsTabsItem/FdsTabsItem.vue'))['default']
-    FdsModal: (typeof import('../src/components/FdsModal/FdsModal.vue'))['default']
-    FdsPagination: (typeof import('../src/components/FdsPagination/FdsPagination.vue'))['default']
-    FdsSearchSelect: (typeof import('../src/components/FdsSearchSelect/FdsSearchSelect.vue'))['default']
-    FdsTruncatedText: (typeof import('../src/components/FdsTruncatedText/FdsTruncatedText.vue'))['default']
-    FdsHeading: (typeof import('../src/components/Typography/FdsHeading/FdsHeading.vue'))['default']
-    FdsSeparator: (typeof import('../src/components/Typography/FdsSeparator/FdsSeparator.vue'))['default']
-    FdsText: (typeof import('../src/components/Typography/FdsText/FdsText.vue'))['default']
-    FdsListHeading: (typeof import('../src/components/Typography/FdsListHeading/FdsListHeading.vue'))['default']
+    FdsTreeView: DefineComponent<FdsTreeViewProps>
+    FdsButtonPrimary: DefineComponent<FdsButtonPrimaryProps>
+    FdsButtonSecondary: DefineComponent<FdsButtonSecondaryProps>
+    FdsButtonMinor: DefineComponent<FdsButtonMinorProps>
+    FdsButtonIcon: DefineComponent<FdsIconButtonProps>
+    FdsButtonCopy: DefineComponent<FdsCopyButtonProps>
+    FdsButtonDownload: DefineComponent<FdsButtonDownloadProps>
+    FdsIcon: DefineComponent<FdsIconProps>
+    FdsSpinner: DefineComponent<FdsSpinnerProps>
+    FdsRadio: DefineComponent<FdsRadioProps>
+    FdsInput: DefineComponent<FdsInputProps>
+    FdsCheckbox: DefineComponent<FdsCheckboxProps>
+    FdsTextarea: DefineComponent<FdsTextareaProps>
+    FdsSelect: DefineComponent<FdsSelectProps>
+    FdsTable: DefineComponent<FdsTableProps>
+    FdsTableHead: DefineComponent<FdsTableHeadProps>
+    FdsBlockContent: DefineComponent<FdsContentBlockProps>
+    FdsBlockInfo: DefineComponent<FdsBlockInfoProps>
+    FdsBlockAlert: DefineComponent<FdsAlertBlockProps>
+    FdsBlockExpander: DefineComponent<FdsExpanderBlockProps>
+    FdsBlockLink: DefineComponent<FdsInteractionBlockProps>
+    FdsSticker: DefineComponent<FdsStickerProps>
+    FdsTabs: DefineComponent<FdsTabsProps>
+    FdsTabsItem: DefineComponent<FdsTabsItemProps>
+    FdsModal: DefineComponent<FdsModalProps>
+    FdsPagination: DefineComponent<FdsPaginationProps>
+    FdsSearchSelect: DefineComponent<FdsSearchSelectProps>
+    FdsTruncatedText: DefineComponent<FdsTruncatedTextProps>
+    FdsHeading: DefineComponent<FdsHeadingProps>
+    FdsSeparator: DefineComponent<Record<string, never>>
+    FdsText: DefineComponent<FdsTextProps>
+    FdsListHeading: DefineComponent<FdsListHeadingProps>
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -28,7 +28,6 @@
   },
   "files": [
     "dist",
-    "src",
     "tailwind.preset.cjs",
     "configs",
     "scripts"
@@ -46,7 +45,7 @@
   },
   "scripts": {
     "serve": "vite",
-    "build": "vite build && npm run build:types && cp ./src/tokens.css ./dist/tokens.css && cp ./src/slot-styles.css ./dist/slot-styles.css && cp ./src/apply.css ./dist/apply.css && cp ./src/fonts.css ./dist/fonts.css && sed 's|\\./components|../src/components|g' ./src/global-components.ts > ./dist/global-components.d.ts && node -e \"const fs=require('fs'); const content=fs.readFileSync('./dist/index.d.ts','utf8'); fs.writeFileSync('./dist/index.d.ts','import \\\\'./global-components\\\\'\\n'+content);\" && cp -r ./public/assets ./dist/assets",
+    "build": "vite build && npm run build:types && cp ./src/tokens.css ./dist/tokens.css && cp ./src/slot-styles.css ./dist/slot-styles.css && cp ./src/apply.css ./dist/apply.css && cp ./src/fonts.css ./dist/fonts.css && cp ./src/global-components.ts ./dist/global-components.d.ts && node -e \"const fs=require('fs'); const content=fs.readFileSync('./dist/index.d.ts','utf8'); fs.writeFileSync('./dist/index.d.ts','import \\\\'./global-components\\\\'\\n'+content);\" && cp -r ./public/assets ./dist/assets",
     "build:types": "vue-tsc --project tsconfig.build.json",
     "preview": "vite preview",
     "lint": "eslint . --fix",

package/src/App.vue

@@ -1,133 +0,0 @@
-<script setup lang="ts">
-import FdsTreeView from '@/components/FdsTreeView/FdsTreeView.vue'
-import type { FdsTreeNode } from '@/components/FdsTreeView/types'
-import { ref } from 'vue'
-
-// Mock tree data
-const mockTreeData: FdsTreeNode<Record<string, unknown>>[] = [
-  {
-    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: '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 treeData: FdsTreeNode<Record<string, unknown>> = {
-  nodeId: 'root',
-  title: 'Root',
-  children: mockTreeData,
-  data: { type: 'root' },
-}
-
-type SelectedShape = Pick<FdsTreeNode, 'nodeId' | 'title' | 'data' | 'children'>
-const selectedNodes = ref<SelectedShape[]>([])
-</script>
-
-<template>
-  <div class="app p-8">
-    <div class="border border-gray-200 rounded-lg p-4 mb-8">
-      <h2 class="text-lg font-semibold mb-4">FDS Tree View Test</h2>
-      <FdsTreeView
-        :data="treeData"
-        :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"
-        v-model:selectedNodes="selectedNodes"
-      />
-    </div>
-  </div>
-</template>

package/src/apply.css

@@ -1,60 +0,0 @@
-@import './tokens.css';
-
-/** Create stencil components for this */
-@layer components {
-  h1,
-  .h1 {
-    @apply font-heading text-2xl sm:text-4xl lg:text-6xl/tight font-extrabold mb-3 mt-0;
-  }
-  h2,
-  .h2 {
-    @apply font-heading text-xl sm:text-3xl font-extrabold mt-4 mb-4;
-  }
-  .h2--small {
-    @apply font-heading text-xl font-extrabold mt-4 mb-4;
-  }
-
-  h3,
-  .h3 {
-    @apply font-heading text-xl font-extrabold mt-4 mb-4;
-  }
-
-  .h3--small {
-    @apply font-heading text-lg font-extrabold mt-4 mb-2;
-  }
-  h1:focus,
-  h2:focus,
-  h3:focus {
-    @apply focus:outline-0;
-  }
-
-  .label {
-    @apply font-bold mb-2! tracking-wide;
-  }
-  p {
-    @apply mb-4;
-  }
-  li:not(:last-child) {
-    @apply mb-2;
-  }
-  .link,
-  .html a {
-    @apply text-blue-600 hover:text-blue-700 active:text-blue-800 underline focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500;
-  }
-
-  .capitalize-first::first-letter {
-    text-transform: uppercase;
-  }
-}
-
-@layer utilities {
-  /** Override browser background color when autocomplete field */
-  input:not(input[type='checkbox'], input[type='radio']),
-  textarea {
-    box-shadow: 0 0 0 1000px #fff inset !important;
-  }
-  /** Style active router link in main nav */
-  .nav-items .router-link-active {
-    @apply bg-blue-100 text-blue-700 font-bold;
-  }
-}