comand-component-library 3.1.45 → 3.1.46

package/src/documentation/views/components/CmdTabsHelp.vue

@@ -0,0 +1,52 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdTabs from "../../../components/CmdTabs"
+import CmdCustomHeadline from "../../../components/CmdCustomHeadline"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+
+// import example-data
+import CmdCode from "../../data/CmdTabsHelp"
+import tabs from "../../../assets/data/tabs.json"
+import propertyDescriptions from "../../generated/CmdTabsPropertyDescriptions.json"
+
+const propertyStructures = {
+    tabs: [
+        {
+            "name": "<string>",
+            "headline": "<string>",
+            "htmlContent": "<string>"
+        }
+    ]
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <CmdCustomHeadline headlineText="Tabs (not stretched)" :headlineLevel="3" preHeadlineText="Example #1" />
+            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="tabs">
+                <CmdTabs
+                    :stretchTabs="false"
+                    :tabs="tabs"
+                />
+            </ViewCodeData>
+            <hr />
+            <CmdCustomHeadline headlineText="Tabs (stretched)" :headlineLevel="3" preHeadlineText="Example #2" />
+            <ViewCodeData :code="CmdCode[1]" :data="tabs">
+                <CmdTabs
+                    :stretchTabs="true"
+                    :tabs="tabs"
+                />
+            </ViewCodeData>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdTabs.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdThumbnailScrollerHelp.vue

@@ -0,0 +1,50 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdThumbnailScroller from "../../../components/CmdThumbnailScroller"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import CmdTabs from "../../../components/CmdTabs"
+import CmdCode from "../../data/CmdThumbnailScrollerHelp"
+
+// import example-data
+import thumbnailScroller from "../../../assets/data/thumbnail-scroller.json"
+import propertyDescriptions from "../../generated/CmdThumbnailScrollerPropertyDescriptions.json"
+
+const propertyStructures = {
+    thumbnailScrollerItems: [
+        {
+            "imgId": "<number>",
+            "srcImageSmall": "<string>",
+            "srcImageLarge": "<string>",
+            "alt": "<string>",
+            "figcaption": "<string>"
+        }
+    ],
+    figcaption: {
+        show: "<boolean>",
+        position: "<string>"
+    }
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="thumbnailScroller">
+                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                    <CmdThumbnailScroller
+                        :thumbnail-scroller-items="thumbnailScroller"
+                    />
+                </teleport>
+            </ViewCodeData>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdThumbnailScroller.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdTooltipHelp.vue

@@ -0,0 +1,59 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdTooltip from "../../../components/CmdTooltip"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import CmdTabs from "../../../components/CmdTabs"
+import CmdCustomHeadline from "../../../components/CmdCustomHeadline"
+
+// import example-data
+import CmdCode from "../../data/CmdTooltipHelp"
+import propertyDescriptions from "../../generated/CmdTooltipPropertyDescriptions.json"
+
+const propertyStructures = {
+    iconClose: {
+        show: "<boolean>",
+        iconClass: "<string>",
+        tooltip: "<string>"
+    }
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <CmdCustomHeadline headlineText="Tooltip opened by hover" :headlineLevel="3" preHeadlineText="Example #1" />
+            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
+                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                    <p>
+                        <a href="#" @click.prevent id="hoverme">Hover me!</a><br/>
+                    </p>
+                    <CmdTooltip
+                        related-id="hoverme">
+                        Tooltip for hover
+                    </CmdTooltip>
+                </teleport>
+            </ViewCodeData>
+            <hr />
+            <CmdCustomHeadline headlineText="Tooltip opened (and closed) by click" :headlineLevel="3" preHeadlineText="Example #2" />
+            <ViewCodeData :code="CmdCode[1]">
+                <p>
+                    <a href="#" @click.prevent id="clickme" title="Native tooltip">Click me!</a>
+                </p>
+            <CmdTooltip
+                related-id="clickme"
+                :toggle-visibility-by-click="true">
+                Tooltip for click
+            </CmdTooltip>
+            </ViewCodeData>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdTooltip.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdUploadFormHelp.vue

@@ -0,0 +1,59 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdUploadForm from "../../../components/CmdUploadForm"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import CmdTabs from "../../../components/CmdTabs"
+import CmdCustomHeadline from "../../../components/CmdCustomHeadline"
+
+// import example-data
+import CmdCode from "../../data/CmdUploadFormHelp"
+import propertyDescriptions from "../../generated/CmdUploadFormPropertyDescriptions.json"
+
+const propertyStructures = {
+    uploadOptions: {
+        url: "<string>",
+        filesParam: "<string>",
+        additionalParams: "<object>",
+    }
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <CmdCustomHeadline headlineText="Advanced mode" :headlineLevel="3" preHeadlineText="Example #1" />
+            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
+                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                <CmdUploadForm
+                    :cmdCustomHeadline="{headlineText: 'Select files to upload', headlineLevel: 5}"
+                    :enableDragAndDrop="true"
+                    :allowedFileExtensions="['gif','png','jpg']"
+                    :allowMultipleFileUploads="true"
+                    :uploadOptions="{url: 'some url'}"
+                />
+                </teleport>
+            </ViewCodeData>
+            <hr />
+            <CmdCustomHeadline headlineText="Simple mode" :headlineLevel="3" preHeadlineText="Example #2" />
+            <ViewCodeData :code="CmdCode[1]">
+                <CmdUploadForm
+                    :advancedMode="false"
+                    :maxFileUploadSize="5242880"
+                    :enableDragAndDrop="true"
+                    :allowedFileExtensions="['pdf']"
+                    :allowMultipleFileUploads="false"
+                    :uploadOptions="{url: 'some url'}"
+                />
+            </ViewCodeData>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdUploadForm.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdWidthLimitationWrapperHelp.vue

@@ -0,0 +1,46 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdWidthLimitationWrapper from "../../../components/CmdWidthLimitationWrapper"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import CmdTabs from "../../../components/CmdTabs"
+
+// import example-data
+import CmdCode from "../../data/CmdWidthLimitationWrapperHelp"
+import propertyDescriptions from "../../generated/CmdWidthLimitationWrapperPropertyDescriptions.json"
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
+                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                <CmdWidthLimitationWrapper>
+                    <!-- begin slot-content -->
+                    Content
+                    <!-- end slot-content -->
+                </CmdWidthLimitationWrapper>
+                </teleport>
+            </ViewCodeData>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdWidthLimitationWrapper.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+        </template>
+    </CmdTabs>
+</template>
+
+<style lang="scss">
+.cmd-width-limitation-wrapper {
+    border: var(--default-border);
+    border-style: dotted;
+
+    > section {
+        border: inherit;
+    }
+}
+</style>

package/src/index.js

@@ -4,19 +4,21 @@ export { default as CmdAccordion } from '@/components/CmdAccordion'
 export { default as CmdAddressData } from '@/components/CmdAddressData'
 export { default as CmdBackToTopButton } from '@/components/CmdBackToTopButton'
 export { default as CmdBox } from '@/components/CmdBox'
+export { default as CmdBoxWrapper } from '@/components/CmdBoxWrapper'
 export { default as CmdBreadcrumbs } from '@/components/CmdBreadcrumbs'
 export { default as CmdCompanyLogo } from '@/components/CmdCompanyLogo'
 export { default as CmdCookieDisclaimer } from '@/components/CmdCookieDisclaimer'
 export { default as CmdCopyrightInformation } from '@/components/CmdCopyrightInformation'
+export { default as CmdCustomHeadline } from '@/components/CmdCustomHeadline'
 export { default as CmdFakeSelect } from '@/components/CmdFakeSelect'
 export { openFancyBox, default as CmdFancyBox } from '@/components/CmdFancyBox'
 export { default as CmdFormElement } from '@/components/CmdFormElement'
 export { default as CmdFormFilters } from '@/components/CmdFormFilters'
-export { default as CmdFooterNavigation } from '@/components/CmdFooterNavigation'
+export { default as CmdGoogleMaps } from '@/components/CmdGoogleMaps'
 export { default as CmdImageGallery } from '@/components/CmdImageGallery'
 export { default as CmdImageZoom } from '@/components/CmdImageZoom'
+export { default as CmdListOfLinks } from '@/components/CmdListOfLinks'
 export { default as CmdLoginForm } from '@/components/CmdLoginForm'
-export { default as CmdMainHeadline } from '@/components/CmdMainHeadline'
 export { default as CmdMainNavigation } from '@/components/CmdMainNavigation'
 export { default as CmdMultipleSwitch } from '@/components/CmdMultipleSwitch'
 export { default as CmdMultistepFormProgressBar } from '@/components/CmdMultistepFormProgressBar'
@@ -34,7 +36,8 @@ export { default as CmdTable } from '@/components/CmdTable'
 export { default as CmdTabs } from '@/components/CmdTabs'
 export { default as CmdThumbnailScroller } from '@/components/CmdThumbnailScroller'
 export { default as CmdTooltip } from '@/components/CmdTooltip'
-export { default as CmdTopHeaderNavigation } from '@/components/CmdTopHeaderNavigation'
+export { default as CmdUploadForm } from '@/components/CmdUploadForm'
 export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimitationWrapper'
 
+export { default as DirFocus } from '@/directives/focus'
 export { default as DirTelephone } from '@/directives/telephone'

package/src/main.js

@@ -4,12 +4,16 @@ import 'comand-frontend-framework/src/assets/css/framework.css'
 import 'comand-frontend-framework/src/assets/css/framework-iconfont.css'
 
 import { createApp } from 'vue'
-import App from './App.vue'
-import { createRouter, createWebHistory } from 'vue-router'
+// import App from './App.vue'
+import ComponentLibraryHelp from './ComponentLibraryHelp'
+//import { createRouter, createWebHistory } from 'vue-router'
 import "clickout-event"
 
-/* import directive to format telephone- and fax-number */
+/* import directives */
+// directive to format telephone- and fax-number
 import directiveTelephone from "./directives/telephone"
+// directive to set focus on specific form-elements
+import directiveFocus from "./directives/focus"
 
 /* import additional iconfont containing company-logos */
 import '@/assets/styles/logos-iconfont.css'
@@ -23,18 +27,24 @@ import '@/assets/styles/transitions.scss'
 /* import css for your custom styles */
 import '@/assets/styles/template.css'
 
+/* import css for prism-library (for styling syntax) */
+import "prismjs/themes/prism.css"
+
 /* import css for demopage only */
 import 'comand-frontend-framework/public/demopage-only.css'
 
-const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes: [
-    {
-      path: '/:pathMatch(.*)*',
-      name: 'somename',
-      component: App
-    }
-  ]
-})
-
-createApp(App).use(router).directive('telephone', directiveTelephone).mount('#app')
+import router from "./router"
+
+// const router = createRouter({
+//   history: createWebHistory(process.env.BASE_URL),
+//   routes: [
+//     {
+//       path: '/:pathMatch(.*)*',
+//       name: 'somename',
+//       component: App
+//     }
+//   ]
+// })
+
+// createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
+createApp(ComponentLibraryHelp).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')

package/src/mixins/CmdAddressData/DefaultMessageProperties.js

@@ -0,0 +1,17 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "cmdaddressdata.labeltext.company": "Company:",
+        "cmdaddressdata.labeltext.address": "Address:",
+        "cmdaddressdata.labeltext.telephone": "Telephone:",
+        "cmdaddressdata.labeltext.mobile_phone": "Mobile phone:",
+        "cmdaddressdata.labeltext.fax": "Fax:",
+        "cmdaddressdata.labeltext.email": "Email:",
+        "cmdaddressdata.title.open_address_on_google_maps:": "Open address on GoogleMaps™ in new tab",
+        "cmdaddressdata.title.call_number": "Call number",
+        "cmdaddressdata.title.send_email": "Send email"
+      }
+    }
+  }
+}

package/src/mixins/CmdBox/DefaultMessageProperties.js

@@ -0,0 +1,10 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "cmdbox.productbox.new": "New",
+        "cmdbox.productbox.article_no": "Article No:"
+      }
+    }
+  }
+}

package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js

@@ -0,0 +1,9 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "cmdfakeselect.headline.requirement_for_input": "Requirement for input"
+      }
+    }
+  }
+}

package/src/mixins/CmdFormElement/DefaultMessageProperties.js

@@ -0,0 +1,9 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "cmdformelement.headline.requirement_for_input": "Requirement for input"
+      }
+    }
+  }
+}

package/src/mixins/CmdImageGallery/DefaultMessageProperties.js

@@ -0,0 +1,9 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "cmdimagegallery.tooltip.open_large_image": "Open large image"
+      }
+    }
+  }
+}

package/src/mixins/CmdSiteSearch/DefaultMessageProperties.js

@@ -0,0 +1,14 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "cmdsitesearch.labeltext.what_to_search": "What do you like to search for?",
+        "cmdsitesearch.placeholder.what_to_search": "Search",
+        "cmdsitesearch.labeltext.where_to_search": "Where do you want to search?",
+        "cmdsitesearch.placeholder.where_to_search": "Zip or city",
+        "cmdsitesearch.show_filter_options": "Show filter options",
+        "cmdsitesearch.hide_filter_options": "Hide filter options",
+      }
+    }
+  }
+}

package/src/mixins/CmdUploadForm/DefaultMessageProperties.js

@@ -42,7 +42,11 @@ export default {
         "cmduploadform.files_to_this_area": "files to this area",
         "cmduploadform.tooltip.toggle_list_of_allowed_file_types": "Toggle list of allowed file types",
         "cmduploadform.reset_upload": "Reset upload",
-        "cmduploadform.tooltip.all_files_will_be_removed": "All files will be remove from upload-list!"
+        "cmduploadform.tooltip.all_files_will_be_removed": "All files will be remove from upload-list!",
+        "cmduploadform.select_image": "Select image",
+        "cmduploadform.select_file": "Select file",
+        "cmduploadform.drag_and_drop_file_here": "Drag and drop file here",
+        "cmduploadform.max_upload_size": "Max. upload size:"
       }
     }
   }