<template> <div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Password TextBox</div> <div class="dx-field-value"> <DxTextBox v-model:mode="passwordMode" value="password" :input-attr="{ 'aria-label': 'Password' }" styling-mode="filled" placeholder="password" > <DxTextBoxButton :options="passwordButton" name="password" location="after" /> </DxTextBox> </div> </div> <div class="dx-field"> <div class="dx-field-label">Multi-currency NumberBox</div> <div class="dx-field-value"> <DxNumberBox v-model:value="currencyValue" :format="currencyFormat" :show-clear-button="true" :show-spin-buttons="true" :input-attr="{ 'aria-label': 'Currency Value' }" > <DxNumberBoxButton :options="currencyButton" name="currency" location="after" /> <DxNumberBoxButton name="clear"/> <DxNumberBoxButton name="spins"/> </DxNumberBox> </div> </div> <div class="dx-field"> <div class="dx-field-label">Advanced DateBox</div> <div class="dx-field-value"> <DxDateBox v-model:value="dateValue" :input-attr="{ 'aria-label': 'Date' }" styling-mode="outlined" > <DxDateBoxButton :options="todayButton" name="today" location="before" /> <DxDateBoxButton :options="prevDateButton" name="prevDate" location="before" /> <DxDateBoxButton :options="nextDateButton" name="nextDate" location="after" /> <DxDateBoxButton name="dropDown"/> </DxDateBox> </div> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { DxTextBox, DxButton as DxTextBoxButton, type DxTextBoxTypes } from 'devextreme-vue/text-box'; import { DxNumberBox, DxButton as DxNumberBoxButton } from 'devextreme-vue/number-box'; import { DxDateBox, DxButton as DxDateBoxButton } from 'devextreme-vue/date-box'; const millisecondsInDay = 24 * 60 * 60 * 1000; const passwordMode = ref<DxTextBoxTypes.TextBoxType>('password'); const passwordButton = { icon: 'eyeopen', stylingMode: 'text', onClick: () => { passwordMode.value = passwordMode.value === 'text' ? 'password' : 'text'; }, }; const currencyFormat = ref('$ #.##'); const currencyValue = ref(14500.55); const currencyButton = { text: '€', stylingMode: 'text', width: 32, elementAttr: { class: 'currency', }, onClick: (e) => { if (e.component.option('text') === '$') { e.component.option('text', '€'); currencyFormat.value = '$ #.##'; currencyValue.value /= 0.836; } else { e.component.option('text', '$'); currencyFormat.value = '€ #.##'; currencyValue.value *= 0.836; } }, }; const dateValue = ref(new Date().getTime()); const todayButton = { text: 'Today', stylingMode: 'text', onClick: () => { dateValue.value = new Date().getTime(); }, }; const prevDateButton = { icon: 'spinprev', stylingMode: 'text', onClick: () => { dateValue.value -= millisecondsInDay; }, }; const nextDateButton = { icon: 'spinnext', stylingMode: 'text', onClick: () => { dateValue.value += millisecondsInDay; }, }; </script> <style> .dx-fieldset { min-height: 560px; width: 560px; margin: 0 auto; } .currency { min-width: 32px; } .dx-button.currency .dx-button-content { font-size: 120%; padding-left: 5px; padding-right: 5px; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, 'openai': { 'esModule': true, }, }, paths: { 'project:': '../../../../', 'npm:': 'https://cdn.jsdelivr.net/npm/', 'bundles:': '../../../../bundles/', 'externals:': '../../../../bundles/externals/', }, map: { 'vue': 'npm:vue@3.4.27/dist/vue.esm-browser.js', '@vue/shared': 'npm:@vue/shared@3.4.27/dist/shared.cjs.prod.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.2/index.js', 'demo-ts-loader': 'project:utils/demo-ts-loader.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'svg-loader': 'project:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign', 'devextreme': 'npm:devextreme@25.1.4/cjs', 'devextreme-vue': 'npm:devextreme-vue@25.1.4/cjs', 'devextreme-quill': 'npm:devextreme-quill@1.7.3/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.19/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.62/dist/dx-gantt.js', 'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', '@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme-vue/common': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/common/core/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4