comand-component-library 3.1.45 → 3.1.46

package/src/documentation/data/CmdFormElementHelp.js

@@ -0,0 +1,189 @@
+export default [
+`<CmdFormElement
+    labelText="Input (type text):"
+    element="input"
+    type="text"
+    :status="formElementStatus"
+    placeholder="Type in text"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+/>`,
+`<CmdFormElement
+    labelText="Input (type number):"
+    element="input"
+    type="number"
+    :status="formElementStatus"
+    placeholder="Type in number"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+/>`,
+`<CmdFormElement
+    labelText="Input (type color):"
+    element="input"
+    type="color"
+    :status="formElementStatus"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+/>`,
+`<CmdFormElement
+    labelText="Input (type date):"
+    element="input"
+    type="date"
+    :status="formElementStatus"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+/>`,
+`<CmdFormElement
+    labelText="Input (type datetime-local):"
+    element="input"
+    type="datetime-local"
+    :status="formElementStatus"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+/>`,
+`<CmdFormElement
+    labelText="Input (type password):"
+    element="input"
+    type="password"
+    :status="formElementStatus"
+    placeholder="Type in password"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+/>`,
+`<CmdFormElement
+    labelText="Input (type file):"
+    element="input"
+    type="file"
+    :status="formElementStatus"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+/>`,
+`<CmdFormElement
+    labelText="Input (type range):"
+    element="input"
+    type="range"
+    :status="formElementStatus"
+    :useCustomTooltip="false"
+    v-model="range"
+/>`,
+`<CmdFormElement
+    :nativeButton="{ 
+        text: 'Submit', 
+        icon: {
+          iconClass: 'icon-edit', 
+          show: true
+        }
+    }"
+    element="button"
+    type="submit"
+    :status="formElementStatus"
+    :useCustomTooltip="false"
+/>`,
+`<CmdFormElement
+    :nativeButton="{ 
+      icon: {
+        iconClass: 'icon-edit', 
+        show: true, 
+        tooltip: 'I am a tooltip'
+      }
+    }"
+    element="button"
+    type="button"
+    :status="formElementStatus"
+    :useCustomTooltip="false"
+/>`,
+`<CmdFormElement
+    labelText="Input (type checkbox)"
+    element="input"
+    type="checkbox"
+    :status="formElementStatus"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+    v-model="checkbox"
+/>`,
+`<CmdFormElement
+    labelText="Input #1 (type radio)"
+    element="input"
+    type="radio"
+    name="radio-group"
+    id="example-radio1"
+    :status="formElementStatus"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+    v-model="radio"
+    inputValue="Radiobutton1"
+/>
+<CmdFormElement
+    labelText="Input #2 (type radio)"
+    element="input"
+    type="radio"
+    name="radio-group"
+    id="example-radio2"
+    :status="formElementStatus"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+    v-model="radio"
+    inputValue="Radiobutton2"
+/>`,
+`<CmdFormElement
+    labelText="Input (type checkbox)"
+    element="input"
+    type="checkbox"
+    :replace-input-type="true"
+    :status="formElementStatus"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+    v-model="checkbox"
+/>`,
+`<CmdFormElement
+    labelText="Input #1 (type radio)"
+    element="input"
+    type="radio"
+    :replace-input-type="true"
+    name="radio-group"
+    id="example-radio1"
+    :status="formElementStatus"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+    v-model="radio"
+    inputValue="Radiobutton1"
+/>
+<CmdFormElement
+    labelText="Input #2 (type radio)"
+    element="input"
+    type="radio"
+    name="radio-group"
+    :replace-input-type="true"
+    id="example-radio2"
+    :status="formElementStatus"
+    tooltipText="This is a tooltip"
+    :useCustomTooltip="false"
+    v-model="radio"
+    inputValue="Radiobutton2"
+/>`,
+`<CmdFormElement
+    labelText="Selectbox"
+    element="select"
+    required="required"
+    :status="formElementStatus"
+    v-model="select"
+    :selectOptions="selectOptions"
+/>`,
+`<CmdFormElement
+    labelText="Datalist:"
+    element="input"
+    type="text"
+    :status="formElementStatus"
+    placeholder="Type in option"
+    :datalist="datalist"
+    tooltipText="This is a tooltip"
+/>`,
+`<CmdFormElement
+    labelText="Textarea:"
+    element="textarea"
+    :status="formElementStatus"
+    placeholder="Type in text"
+    tooltipText="This is a tooltip"
+    v-model="textarea"
+/>`
+]

package/src/documentation/data/CmdFormFiltersHelp.js

@@ -0,0 +1,6 @@
+export default [
+`<CmdFormFilters
+  v-model:selectedOptions="fakeSelectFilterOptions"
+  :selectedOptionsName="getOptionName"
+/>`
+]

package/src/documentation/data/CmdFormHelp.js

@@ -0,0 +1,10 @@
+export default [
+`<CmdForm
+    :use-fieldset="true"
+    novalidate="novalidate"
+    text-legend="Legend">
+    <!-- begin slot-content -->
+    Form content (put form elements here)
+    <!-- end slot-content -->
+</CmdForm>`
+]

package/src/documentation/data/CmdGoogleMapsHelp.js

@@ -0,0 +1,5 @@
+export default [
+`<CmdGoogleMaps 
+  :address="coordinates(addressData.address)"
+/>`
+]

package/src/documentation/data/CmdImageGalleryHelp.js

@@ -0,0 +1,5 @@
+export default [
+`<CmdImageGallery 
+  :images="imageGallery"
+/>`
+]

package/src/documentation/data/CmdImageZoomHelp.js

@@ -0,0 +1,6 @@
+export default [
+`<CmdImageZoom 
+  small-image-url="media/images/content-images/logo-business-edition-landscape.jpg"
+  large-image-url="media/images/content-images/logo-business-edition-landscape-large.jpg" 
+/>`
+]

package/src/documentation/data/CmdListOfLinksHelp.js

@@ -0,0 +1,24 @@
+export default [
+`<CmdListOfLinks 
+    :links="listOfLinks" 
+    :cmdCustomHeadline="{
+      text: 'Links', 
+      level: 5
+    }" 
+/>`,
+`<CmdListOfLinks 
+    :links="listOfLinks" 
+    orientation="horizontal" 
+    :cmdCustomHeadline="{
+        headlineText: 'Links', 
+        headlineLevel: 5
+    }" 
+/>`,
+`<CmdListOfLinks 
+    :links="listOfLinks" 
+    :styleAsBox="true" 
+    :cmdCustomHeadline="{
+      headlineText: 'Links', 
+      headlineLevel: 5
+    }" />`
+]

package/src/documentation/data/CmdLoginFormHelp.js

@@ -0,0 +1,6 @@
+export default [
+`<CmdLoginForm 
+  v-model="loginData" 
+  v-focus
+/>`
+]

package/src/documentation/data/CmdMainNavigationHelp.js

@@ -0,0 +1,7 @@
+export default [
+`<CmdMainNavigation 
+  :stretchMainItems="false"
+  :persistOnMobile="false"
+  :navigationEntries="navigationEntries"
+/>`
+]

package/src/documentation/data/CmdMultistepFormProgressBarHelp.js

@@ -0,0 +1,6 @@
+export default [
+`<CmdMultistepFormProgressBar
+    :multisteps="multistepFormProgressBar"
+    @click="showPageMultistep = $event.index + 1"
+/>`
+]

package/src/documentation/data/CmdOpeningHoursHelp.js

@@ -0,0 +1,10 @@
+export default [
+`<CmdOpeningHours 
+    :openingHours="openingHoursData" 
+    :closed="true" 
+    headline="Opening hours"
+    textOpenClosed="Closed right now!"
+    textHolidaysClosed="Closed on holidays"
+    textMiscInfo="Miscellaneous information" 
+/>`
+]

package/src/documentation/data/CmdPagerHelp.js

@@ -0,0 +1,7 @@
+export default [
+`<CmdPager
+    :items="pagerData.length"
+    :itemsPerPage="1"
+    @click="showPagePager = $event"
+/>`
+]

package/src/documentation/data/CmdProgressBarHelp.js

@@ -0,0 +1,13 @@
+export default [
+`<CmdProgressBar
+    labelText="Progress Bar (with optional output):"
+    id="progress-bar"
+    max="100"
+/>`,
+`<CmdProgressBar
+    labelText="Progress Bar without output:"
+    id="progress-bar"
+    max="100"
+    :showLoadingStatus="false"
+ />`
+]

package/src/documentation/data/CmdShareButtonsHelp.js

@@ -0,0 +1,13 @@
+export default [
+`<CmdShareButtons
+  :share-buttons="shareButtonsJson"
+  :append-page="false"
+/>`,
+`<CmdShareButtons
+    :share-buttons="shareButtonsPage"
+    page="some url"
+/>`,
+`<CmdShareButtons
+  :share-buttons="shareButtonsPage"
+/>`
+]

package/src/documentation/data/CmdSiteHeaderHelp.js

@@ -0,0 +1,21 @@
+export default [
+`<CmdSiteHeader :mainNavigationEntries="navigationData" :sticky="true">
+    <!-- begin slot:top-header -->
+    <template v-slot:top-header>
+        <CmdTopHeaderNavigation 
+            :topHeaderNavigationData="topHeaderNavigationData"
+        />
+    </template>
+    <!-- end slot:top-header -->
+    <!-- begin slot:logo -->
+    <template v-slot:logo>
+        <CmdCompanyLogo 
+            :link="companyLogoData.link" 
+            altText="CoManD Logo" 
+            :pathDefaultLogo="require('@/assets/images/logo.svg')"
+            :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
+        />
+    </template>
+    <!-- end slot:logo -->
+</CmdSiteHeader>`
+]

package/src/documentation/data/CmdSlideButtonHelp.js

@@ -0,0 +1,10 @@
+export default [
+`<CmdSlideButton 
+  slideButtonType="prev"
+  @click.prevent="showPrevItem"
+/>
+<CmdSlideButton 
+    slideButtonType="next"
+    @click.prevent="showNextItem"
+ />`
+]

package/src/documentation/data/CmdSlideshowHelp.js

@@ -0,0 +1,7 @@
+export default [
+`<CmdSlideshow 
+    :slideshow-items="slideshowData" 
+    :showCounter="true" 
+    :autoplay="true"
+/>`
+]

package/src/documentation/data/CmdSwitchLanguageHelp.js

@@ -0,0 +1,6 @@
+export default [
+`<CmdSwitchLanguage 
+    :languages="switchLanguagesData"
+    @click="selectLanguage"
+/>`
+]

package/src/documentation/data/CmdSystemMessageHelp.js

@@ -0,0 +1,32 @@
+export default [
+`<CmdSystemMessage
+    validationStatus="error"
+    :fullWidth="true"
+    systemMessage="This is an error message!">
+</CmdSystemMessage>`,
+`<CmdSystemMessage
+    validationStatus="warning"
+    :fullWidth="true"
+    systemMessage="This is a warning message!">
+    <!-- begin slot-content -->
+    <p>This is additional text!</p>
+    <!-- end slot-content -->
+</CmdSystemMessage>`,
+`<CmdSystemMessage
+    validationStatus="success"
+    :fullWidth="true"
+    systemMessage="This is a success message!">
+    <!-- begin slot-content -->
+    <ul>
+        <li>Additional information #1</li>
+        <li>Additional information #2</li>
+        <li>Additional information #3</li>
+    </ul>
+    <!-- end slot-content -->
+</CmdSystemMessage>`,
+`<CmdSystemMessage
+    validationStatus="info"
+    :fullWidth="true"
+    systemMessage="This is an info message!">
+</CmdSystemMessage>`
+]

package/src/documentation/data/CmdTableHelp.js

@@ -0,0 +1,14 @@
+export default [
+`<CmdTable
+    :collapsible="true"
+    :fullWidthOnDefault="false"
+    :userCanToggleWidth="true"
+    :table-data="tableSmall"
+/>`,
+`<CmdTable
+    :collapsible="true"
+    :fullWidthOnDefault="false"
+    :userCanToggleWidth="true"
+    :table-data="tableLarge"
+/>`
+]

package/src/documentation/data/CmdTabsHelp.js

@@ -0,0 +1,10 @@
+export default [
+`<CmdTabs
+    :stretchTabs="false"
+    :tabs="tabs"
+/>`,
+`<CmdTabs
+    :stretchTabs="true"
+    :tabs="tabs"
+/>`
+]

package/src/documentation/data/CmdThumbnailScrollerHelp.js

@@ -0,0 +1,5 @@
+export default [
+`<CmdThumbnailScroller 
+    :thumbnail-scroller-items="thumbnailScroller"
+/>`
+]

package/src/documentation/data/CmdTooltipHelp.js

@@ -0,0 +1,13 @@
+export default [
+`<CmdTooltip
+    related-id="hoverme"
+>
+      Tooltip for hover
+</CmdTooltip>`,
+`<CmdTooltip
+    related-id="clickme"
+    :toggle-visibility-by-click="true"
+>
+      Tooltip for click
+</CmdTooltip>`
+]

package/src/documentation/data/CmdUploadFormHelp.js

@@ -0,0 +1,17 @@
+export default [
+`<CmdUploadForm
+    :cmdCustomHeadline="{headlineText: 'Select files to upload', headlineLevel: 5}"
+    :enableDragAndDrop="true"
+    :allowedFileExtensions="['gif','png','jpg']"
+    :allowMultipleFileUploads="true"
+    :uploadOptions="{url: 'some url'}"
+/>`,
+`<CmdUploadForm
+    :advancedMode="false"
+    :maxFileUploadSize="5242880"
+    :enableDragAndDrop="true"
+    :allowedFileExtensions="['pdf']"
+    :allowMultipleFileUploads="false"
+    :uploadOptions="{url: 'some url'}"
+/>`
+]

package/src/documentation/data/CmdWidthLimitationWrapperHelp.js

@@ -0,0 +1,7 @@
+export default [
+`<CmdWidthLimitationWrapper>
+    <!-- begin slot-content -->
+    Content
+    <!-- end slot-content -->
+</CmdWidthLimitationWrapper>`
+]

package/src/documentation/data/componentsDescription.json

@@ -0,0 +1,158 @@
+{
+  "CmdAddressData": {
+    "headline": "Address Data",
+    "shorttext": "Address data in a list and wrapped in a address-tag"
+  },
+  "CmdBackToTopButton": {
+    "headline": "Back-To-Top-Button",
+    "shorttext": "Button at the bottom of the page, to jump back to top"
+  },
+  "CmdBankAccountData": {
+    "headline": "Bank Account Data",
+    "shorttext": "Shows a list with bank data, which can be copied by click"
+  },
+  "CmdBox": {
+    "headline": "Box",
+    "shorttext": "Just a simple box for different types of content (like text, images, user-profiles, products etc.)",
+    "config": {
+      "usesSlot": true,
+      "innerComponents": ["CmdCustomHeadline"]
+    }
+  },
+  "CmdBoxSiteSearch": {
+    "headline": "Box Site Search",
+    "shorttext": "Box with search field to search the content"
+  },
+  "CmdBoxWrapper": {
+    "headline": "Box Wrapper",
+    "shorttext": "Box wrapper for different types of content arranged in a flex- or grid-container"
+  },
+  "CmdBreadcrumbs": {
+    "headline": "Breadcrumbs",
+    "shorttext": "Hierachic navigation, that shows the current page in relation to upper levels. Mostly placed at the top of the content."
+  },
+  "CmdCompanyLogo": {
+    "headline": "Company Logo",
+    "shorttext": "Main logo for the website, that can also be linked to the homepage. Also used in the site-header."
+  },
+  "CmdCookieDisclaimer": {
+    "headline": "Cookie Disclaimer",
+    "shorttext": "The required cookie disclaimer for a web sites. Must show basic information about the used cookies and the possibility to disable not necessary ones."
+  },
+  "CmdCustomHeadline": {
+    "headline": "Custom Headline",
+    "shorttext": "A custom headline, where the h-level can be defined and an optional pre-headline and icon can be set."
+  },
+  "CmdFakeSelect": {
+    "headline": "Fake Select",
+    "shorttext": "A dropdown, that looks like a native selectbox, but can also be filled with different option-types (i.e. checkboxes) or content."
+  },
+  "CmdFancyBox": {
+    "headline": "Fancy Box",
+    "shorttext": "The Fancy Box is a PopUp-Box similar to a modal, that can be filled with different content (i.e. image slider, print preview)."
+  },
+  "CmdForm": {
+    "headline": "Form",
+    "shorttext": "An empty form-wrapper with an optional fieldset and legend, which can be filled with form elements."
+  },
+  "CmdFormElement": {
+    "headline": "Form Elements",
+    "shorttext": "All types of form elements (.ie. inputs, selectboxes, checkboxes, radiobuttons etc.)."
+  },
+  "CmdFormFilters": {
+    "headline": "Form Filters",
+    "shorttext": "List of selected filters (without functionality) that can be set by a form element or a fake select."
+  },
+  "CmdGoogleMaps": {
+    "headline": "Google Maps",
+    "shorttext": "A Google Map in an iframe, that can be linked with an address."
+  },
+  "CmdImageGallery": {
+    "headline": "Image Gallery",
+    "shorttext": "A list if images arranged in a grid. The images can be enlarge in a fancybox."
+  },
+  "CmdImageZoom": {
+    "headline": "Image Zoom",
+    "shorttext": "Shows a movable section of a hovered image in a very large version."
+  },
+  "CmdListOfLinks": {
+    "headline": "List Of Links",
+    "shorttext": "Contains a list of links, mostly used for secondary content (above the header, inside the footer, for pdf-downloads)."
+  },
+  "CmdLoginForm": {
+    "headline": "Login Form",
+    "shorttext": "Shows a standard login form (with username- and password-field) and toggle form to prepare sending the password by email."
+  },
+  "CmdMainNavigation": {
+    "headline": "Main Navigation",
+    "shorttext": "This component should be us to contain the main navigation for a project. Is already wrapped in a nav-tag, that can contain up to three levels of links."
+  },
+  "CmdMultipleSwitch": {
+    "headline": "Multiple Switch",
+    "shorttext": "TEXT FEHLT"
+  },
+  "CmdMultistepFormProgressBar": {
+    "headline": "Multistep Form Progress Bar",
+    "shorttext": "A horizontal progress bar, mostly used for forms, that are separated over multiple pages."
+  },
+  "CmdOpeningHours": {
+    "headline": "Opening Hours",
+    "shorttext": "A list of opening hours with additional options."
+  },
+  "CmdPager": {
+    "headline": "Pager",
+    "shorttext": "Buttons to switch pages, mostly used for list (.i.e. search results) that are displayed of several pages."
+  },
+  "CmdProgressBar": {
+    "headline": "Progress Bar",
+    "shorttext": "Based on a native progress bar, this component can be used with a label and an output of the percentage loaded."
+  },
+  "CmdShareButtons": {
+    "headline": "Share Buttons",
+    "shorttext": "Based on a native progress bar, this component can be used with a label and an output of the percentage loaded."
+  },
+  "CmdSiteHeader": {
+    "headline": "Site Header",
+    "shorttext": "The header for the entire site. It can be configured with the main navigation inside or be filled by slot-elements."
+  },
+  "CmdSlideButton": {
+    "headline": "Slide Button",
+    "shorttext": "Button to slide content (.i.e. images, thumbnails, text) that is used in components like slideshow or thumbnail-scroller."
+  },
+  "CmdSlideshow": {
+    "headline": "Slideshow",
+    "shorttext": "This component is used as an image-slider. It also can load different images for different screen-resolutions."
+  },
+  "CmdSwitchLanguage": {
+    "headline": "Switch Language",
+    "shorttext": "A list with country flags, to symbolize switching languages on a web site."
+  },
+  "CmdSystemMessage": {
+    "headline": "System Message",
+    "shorttext": "A universal message, which can be used for global messages or form validation. It already contains the common cases 'error', 'warning', 'success' and 'info'."
+  },
+  "CmdTable": {
+    "headline": "Table",
+    "shorttext": "Based on a the native table, this table can also be configured to highlight rows or columns and has a default overflow-behavior for wide content."
+  },
+  "CmdTabs": {
+    "headline": "Tabs",
+    "shorttext": "Tabs to switch different section of content, that toggle visibility in frame below."
+  },
+  "CmdThumbnailScroller": {
+    "headline": "Thumbnail scroller",
+    "shorttext": "A horizontal image scroller for small images (thumbnails) that is also used inside if a group of images is enlarged with the fancybox."
+  },
+  "CmdTooltip": {
+    "headline": "Tooltip",
+    "shorttext": "A custom tooltip, that looks like the default tooltip (title) that appears on hovering elements. It also can be filled with customizable content and styled individually."
+  },
+  "CmdUploadForm": {
+    "headline": "Upload form",
+    "shorttext": "Can be used as a complex, configurable form or as a simple drag-and-drop area to prepare the upload of files."
+  },
+  "CmdWidthLimitationWrapper": {
+    "headline": "Width limitation wrapper",
+    "shorttext": "A simple wrapper without content, that can be used to wrap the main content and limit its width on large screens."
+  }
+}