init

javascript-version/plugins/iconify/build-icons.js

@@ -0,0 +1,218 @@
+/**
+ * This is an advanced example for creating icon bundles for Iconify SVG Framework.
+ *
+ * It creates a bundle from:
+ * - All SVG files in a directory.
+ * - Custom JSON files.
+ * - Iconify icon sets.
+ * - SVG framework.
+ *
+ * This example uses Iconify Tools to import and clean up icons.
+ * For Iconify Tools documentation visit https://docs.iconify.design/tools/tools2/
+ */
+import { promises as fs } from 'node:fs';
+import { dirname, join } from 'node:path';
+// Installation: npm install --save-dev @iconify/tools @iconify/utils @iconify/json @iconify/iconify
+import { cleanupSVG, importDirectory, isEmptyColor, parseColors, runSVGO } from '@iconify/tools';
+import { getIcons, getIconsCSS, stringToIcon } from '@iconify/utils';
+const sources = {
+    svg: [
+    // {
+    //   dir: 'assets/images/iconify-svg',
+    //   monotone: true,
+    //   prefix: 'custom',
+    // },
+    // {
+    //   dir: 'emojis',
+    //   monotone: false,
+    //   prefix: 'emoji',
+    // },
+    ],
+    icons: [
+    // 'mdi:home',
+    // 'mdi:account',
+    // 'mdi:login',
+    // 'mdi:logout',
+    // 'octicon:book-24',
+    // 'octicon:code-square-24',
+    ],
+    json: [
+        // Custom JSON file
+        // 'json/gg.json',
+        // Iconify JSON file (@iconify/json is a package name, /json/ is directory where files are, then filename)
+        require.resolve('@iconify-json/bx/icons.json'),
+        require.resolve('@iconify-json/bxl/icons.json'),
+        require.resolve('@iconify-json/bxs/icons.json'),
+        {
+            filename: require.resolve('@iconify-json/mdi/icons.json'),
+            icons: [
+                'close-circle',
+                'language-javascript',
+                'language-typescript',
+                'translate',
+                'arrow-bottom-left',
+                'arrow-bottom-right',
+                'arrow-top-left',
+                'arrow-top-right',
+                'arrow-collapse-all',
+                'arrow-down-left',
+            ],
+        },
+        {
+            filename: require.resolve('@iconify-json/fa/icons.json'),
+            icons: [
+                'circle',
+            ],
+        },
+        // Custom file with only few icons
+        // {
+        //   filename: require.resolve('@iconify-json/line-md/icons.json'),
+        //   icons: [
+        //     'home-twotone-alt',
+        //     'github',
+        //     'document-list',
+        //     'document-code',
+        //     'image-twotone',
+        //   ],
+        // },
+    ],
+};
+// File to save bundle to
+const target = join(__dirname, 'icons.css');
+(async function () {
+    // Create directory for output if missing
+    const dir = dirname(target);
+    try {
+        await fs.mkdir(dir, {
+            recursive: true,
+        });
+    }
+    catch (err) {
+        //
+    }
+    const allIcons = [];
+    /**
+     * Convert sources.icons to sources.json
+     */
+    if (sources.icons) {
+        const sourcesJSON = sources.json ? sources.json : (sources.json = []);
+        // Sort icons by prefix
+        const organizedList = organizeIconsList(sources.icons);
+        for (const prefix in organizedList) {
+            const filename = require.resolve(`@iconify/json/json/${prefix}.json`);
+            sourcesJSON.push({
+                filename,
+                icons: organizedList[prefix],
+            });
+        }
+    }
+    /**
+     * Bundle JSON files and collect icons
+     */
+    if (sources.json) {
+        for (let i = 0; i < sources.json.length; i++) {
+            const item = sources.json[i];
+            // Load icon set
+            const filename = typeof item === 'string' ? item : item.filename;
+            const content = JSON.parse(await fs.readFile(filename, 'utf8'));
+            for (const key in content) {
+                if (key === 'prefix' && content.prefix === 'tabler') {
+                    for (const k in content.icons)
+                        content.icons[k].body = content.icons[k].body.replace(/stroke-width="2"/g, 'stroke-width="1.5"');
+                }
+            }
+            // Filter icons
+            if (typeof item !== 'string' && item.icons?.length) {
+                const filteredContent = getIcons(content, item.icons);
+                if (!filteredContent)
+                    throw new Error(`Cannot find required icons in ${filename}`);
+                // Collect filtered icons
+                allIcons.push(filteredContent);
+            }
+            else {
+                // Collect all icons from the JSON file
+                allIcons.push(content);
+            }
+        }
+    }
+    /**
+     * Bundle custom SVG icons and collect icons
+     */
+    if (sources.svg) {
+        for (let i = 0; i < sources.svg.length; i++) {
+            const source = sources.svg[i];
+            // Import icons
+            const iconSet = await importDirectory(source.dir, {
+                prefix: source.prefix,
+            });
+            // Validate, clean up, fix palette, etc.
+            await iconSet.forEach(async (name, type) => {
+                if (type !== 'icon')
+                    return;
+                // Get SVG instance for parsing
+                const svg = iconSet.toSVG(name);
+                if (!svg) {
+                    // Invalid icon
+                    iconSet.remove(name);
+                    return;
+                }
+                // Clean up and optimise icons
+                try {
+                    // Clean up icon code
+                    await cleanupSVG(svg);
+                    if (source.monotone) {
+                        // Replace color with currentColor, add if missing
+                        // If icon is not monotone, remove this code
+                        await parseColors(svg, {
+                            defaultColor: 'currentColor',
+                            callback: (attr, colorStr, color) => {
+                                return !color || isEmptyColor(color) ? colorStr : 'currentColor';
+                            },
+                        });
+                    }
+                    // Optimise
+                    await runSVGO(svg);
+                }
+                catch (err) {
+                    // Invalid icon
+                    console.error(`Error parsing ${name} from ${source.dir}:`, err);
+                    iconSet.remove(name);
+                    return;
+                }
+                // Update icon from SVG instance
+                iconSet.fromSVG(name, svg);
+            });
+            // Collect the SVG icon
+            allIcons.push(iconSet.export());
+        }
+    }
+    // Generate CSS from collected icons
+    const cssContent = allIcons
+        .map(iconSet => getIconsCSS(iconSet, Object.keys(iconSet.icons), {
+        iconSelector: '.{prefix}-{name}',
+        mode: 'mask',
+    }))
+        .join('\n');
+    // Save the CSS to a file
+    await fs.writeFile(target, cssContent, 'utf8');
+    console.log(`Saved CSS to ${target}!`);
+})().catch(err => {
+    console.error(err);
+});
+/**
+ * Sort icon names by prefix
+ */
+function organizeIconsList(icons) {
+    const sorted = Object.create(null);
+    icons.forEach(icon => {
+        const item = stringToIcon(icon);
+        if (!item)
+            return;
+        const prefix = item.prefix;
+        const prefixList = sorted[prefix] ? sorted[prefix] : (sorted[prefix] = []);
+        const name = item.name;
+        if (!prefixList.includes(name))
+            prefixList.push(name);
+    });
+    return sorted;
+}

javascript-version/plugins/iconify/index.js

@@ -0,0 +1,4 @@
+;
+export default defineNuxtPlugin(() => {
+    // This plugin just requires icons import
+})

javascript-version/plugins/iconify/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

javascript-version/plugins/vuetify/defaults.js

@@ -0,0 +1,198 @@
+export default {
+  IconBtn: {
+    icon: true,
+    color: 'default',
+    variant: 'text',
+  },
+  VAlert: {
+    density: 'comfortable',
+    VBtn: {
+      color: undefined,
+    },
+  },
+  VAvatar: {
+    // ℹ️ Remove after next release
+    variant: 'flat',
+  },
+
+  // VImg: {
+  //   eager: true,
+  // },
+  VBadge: {
+    // set v-badge default color to primary
+    color: 'primary',
+  },
+  VBtn: {
+    // set v-btn default color to primary
+    color: 'primary',
+    ripple: false,
+  },
+  VChip: {
+    label: true,
+  },
+  VDataTable: {
+    VPagination: {
+      showFirstLastPage: true,
+      firstIcon: 'bx-chevrons-left',
+      lastIcon: 'bx-chevrons-right',
+    },
+  },
+  VTable: {
+    VCheckboxBtn: {
+      density: 'comfortable',
+    },
+  },
+  VDataTableServer: {
+    VPagination: {
+      showFirstLastPage: true,
+      firstIcon: 'bx-chevrons-left',
+      lastIcon: 'bx-chevrons-right',
+    },
+  },
+  VList: {
+    color: 'primary',
+    density: 'compact',
+    VCheckboxBtn: {
+      density: 'compact',
+    },
+    VListItem: {
+      ripple: false,
+      VAvatar: {
+        size: 38,
+      },
+    },
+  },
+  VMenu: {
+    offset: '2px',
+  },
+  VPagination: {
+    density: 'comfortable',
+    variant: 'tonal',
+  },
+  VTabs: {
+    // set v-tabs default color to primary
+    color: 'primary',
+    density: 'comfortable',
+    VSlideGroup: {
+      showArrows: true,
+    },
+  },
+  VTooltip: {
+    // set v-tooltip default location to top
+    location: 'top',
+  },
+  VCheckboxBtn: {
+    color: 'primary',
+  },
+  VCheckbox: {
+    // set v-checkbox default color to primary
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+  },
+  VRadioGroup: {
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+  },
+  VRadio: {
+    density: 'comfortable',
+    hideDetails: 'auto',
+  },
+  VSelect: {
+    variant: 'outlined',
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+    VChip: {
+      label: true,
+    },
+  },
+  VRangeSlider: {
+    // set v-range-slider default color to primary
+    color: 'primary',
+    trackSize: 6,
+    thumbSize: 22,
+    density: 'comfortable',
+    thumbLabel: true,
+    hideDetails: 'auto',
+  },
+  VRating: {
+    // set v-rating default color to primary
+    activeColor: 'warning',
+    color: 'disabled',
+    emptyIcon: 'bx-bxs-star',
+  },
+  VProgressLinear: {
+    height: 6,
+    roundedBar: true,
+    rounded: true,
+    bgColor: 'rgba(var(--v-track-bg))',
+    color: 'primary',
+  },
+  VSlider: {
+    // set v-range-slider default color to primary
+    color: 'primary',
+    thumbLabel: true,
+    hideDetails: 'auto',
+    thumbSize: 22,
+    trackSize: 6,
+    elevation: 4,
+  },
+  VTextField: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+  },
+  VAutocomplete: {
+    variant: 'outlined',
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+    menuProps: {
+      contentClass: 'app-autocomplete__content v-autocomplete__content',
+    },
+    VChip: {
+      label: true,
+    },
+  },
+  VCombobox: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+    VChip: {
+      label: true,
+    },
+  },
+  VFileInput: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+    prependIcon: '',
+    prependInnerIcon: 'bx-link',
+  },
+  VTextarea: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+  },
+  VSnackbar: {
+    VBtn: {
+      size: 'small',
+    },
+  },
+  VSwitch: {
+    // set v-switch default color to primary
+    inset: true,
+    color: 'primary',
+    hideDetails: 'auto',
+    ripple: false,
+  },
+  VNavigationDrawer: {
+    touchless: true,
+  },
+}

javascript-version/plugins/vuetify/icons.js

@@ -0,0 +1,77 @@
+import checkboxChecked from '@images/svg/checkbox-checked.svg'
+import checkboxIndeterminate from '@images/svg/checkbox-indeterminate.svg'
+import checkboxUnchecked from '@images/svg/checkbox-unchecked.svg'
+import radioChecked from '@images/svg/radio-checked.svg'
+import radioUnchecked from '@images/svg/radio-unchecked.svg'
+
+const customIcons = {
+  'mdi-checkbox-blank-outline': checkboxUnchecked,
+  'mdi-checkbox-marked': checkboxChecked,
+  'mdi-minus-box': checkboxIndeterminate,
+  'mdi-radiobox-marked': radioChecked,
+  'mdi-radiobox-blank': radioUnchecked,
+}
+
+const aliases = {
+  calendar: 'bx-calendar',
+  collapse: 'bx-chevron-up',
+  complete: 'bx-check',
+  cancel: 'bx-x',
+  close: 'bx-x',
+  delete: 'bx-bxs-x-circle',
+  clear: 'bx-x-circle',
+  success: 'bx-check-circle',
+  info: 'bx-info-circle',
+  warning: 'bx-error',
+  error: 'bx-error-circle',
+  prev: 'bx-chevron-left',
+  ratingEmpty: 'bx-star',
+  ratingFull: 'bx-bxs-star',
+  ratingHalf: 'bx-bxs-star-half',
+  next: 'bx-chevron-right',
+  delimiter: 'bx-circle',
+  sort: 'bx-up-arrow-alt',
+  expand: 'bx-chevron-down',
+  menu: 'bx-menu',
+  subgroup: 'bx-caret-down',
+  dropdown: 'bx-chevron-down',
+  edit: 'bx-pencil',
+  loading: 'bx-refresh',
+  first: 'bx-skip-previous',
+  last: 'bx-skip-next',
+  unfold: 'bx-move-vertical',
+  file: 'bx-paperclip',
+  plus: 'bx-plus',
+  minus: 'bx-minus',
+  sortAsc: 'bx-up-arrow-alt',
+  sortDesc: 'bx-down-arrow-alt',
+}
+
+export const iconify = {
+  component: props => {
+    // Load custom SVG directly instead of going through icon component
+    if (typeof props.icon === 'string') {
+      const iconComponent = customIcons[props.icon]
+      if (iconComponent)
+        return h(iconComponent)
+    }
+    
+    return h(props.tag, {
+      ...props,
+
+      // As we are using class based icons
+      class: [props.icon],
+
+      // Remove used props from DOM rendering
+      tag: undefined,
+      icon: undefined,
+    })
+  },
+}
+export const icons = {
+  defaultSet: 'iconify',
+  aliases,
+  sets: {
+    iconify,
+  },
+}

javascript-version/plugins/vuetify/index.js

@@ -0,0 +1,26 @@
+import { createVuetify } from 'vuetify'
+import { VBtn } from 'vuetify/components/VBtn'
+import defaults from './defaults'
+import { icons } from './icons'
+import { themes } from './theme'
+
+// Styles
+import '@core/scss/template/libs/vuetify/index.scss'
+import 'vuetify/styles'
+
+export default defineNuxtPlugin(nuxtApp => {
+  const vuetify = createVuetify({
+    ssr: true,
+    aliases: {
+      IconBtn: VBtn,
+    },
+    defaults,
+    icons,
+    theme: {
+      defaultTheme: 'light',
+      themes,
+    },
+  })
+
+  nuxtApp.vueApp.use(vuetify)
+})

javascript-version/plugins/vuetify/theme.js

@@ -0,0 +1,164 @@
+export const staticPrimaryColor = '#696CFF'
+export const staticPrimaryDarkenColor = '#5E61E6'
+export const themes = {
+  light: {
+    dark: false,
+    colors: {
+      'primary': staticPrimaryColor,
+      'on-primary': '#fff',
+      'primary-darken-1': staticPrimaryDarkenColor,
+      'primary-light': '#8789FF',
+      'secondary': '#8592A3',
+      'on-secondary': '#fff',
+      'secondary-darken-1': '#788393',
+      'secondary-light': '#9DA8B5',
+      'success': '#71DD37',
+      'on-success': '#fff',
+      'success-darken-1': '#66C732',
+      'success-light': '#53D28C',
+      'info': '#03C3EC',
+      'on-info': '#fff',
+      'info-darken-1': '#03AFD4',
+      'info-light': '#35CFF0',
+      'warning': '#FFAB00',
+      'on-warning': '#fff',
+      'warning-darken-1': '#E69A00',
+      'warning-light': '#FFBC33',
+      'error': '#FF3E1D',
+      'on-error': '#fff',
+      'error-darken-1': '#E6381A',
+      'error-light': '#FF654A',
+      'background': '#f5f5f9',
+      'on-background': '#22303E',
+      'surface': '#fff',
+      'on-surface': '#22303E',
+      'grey-50': '#FAFAFA',
+      'grey-100': '#F5F5F5',
+      'grey-200': '#EEEEEE',
+      'grey-300': '#E0E0E0',
+      'grey-400': '#BDBDBD',
+      'grey-500': '#9E9E9E',
+      'grey-600': '#757575',
+      'grey-700': '#616161',
+      'grey-800': '#424242',
+      'grey-900': '#212121',
+      'grey-light': '#FAFAFA',
+      'perfect-scrollbar-thumb': '#DBDADE',
+      'skin-bordered-background': '#fff',
+      'skin-bordered-surface': '#fff',
+      'expansion-panel-text-custom-bg': '#fafafa',
+    },
+    variables: {
+      'code-color': '#d400ff',
+      'overlay-scrim-background': '#22303E',
+      'tooltip-background': '#22303E',
+      'overlay-scrim-opacity': 0.5,
+      'hover-opacity': 0.06,
+      'focus-opacity': 0.1,
+      'selected-opacity': 0.08,
+      'activated-opacity': 0.16,
+      'pressed-opacity': 0.14,
+      'dragged-opacity': 0.1,
+      'disabled-opacity': 0.4,
+      'border-color': '#22303E',
+      'border-opacity': 0.12,
+      'table-header-color': '#FFFFFF',
+      'high-emphasis-opacity': 0.9,
+      'medium-emphasis-opacity': 0.7,
+      'switch-opacity': 0.2,
+      'switch-disabled-track-opacity': 0.3,
+      'switch-disabled-thumb-opacity': 0.4,
+      'switch-checked-disabled-opacity': 0.3,
+      'track-bg': '#EEF1F3',
+      'chat-bg': '#F7F8F8',
+
+      // Shadows
+      'shadow-key-umbra-color': '#22303E',
+      'shadow-xs-opacity': 0.06,
+      'shadow-sm-opacity': 0.08,
+      'shadow-md-opacity': 0.10,
+      'shadow-lg-opacity': 0.14,
+      'shadow-xl-opacity': 0.18,
+    },
+  },
+  dark: {
+    dark: true,
+    colors: {
+      'primary': staticPrimaryColor,
+      'on-primary': '#fff',
+      'primary-darken-1': staticPrimaryDarkenColor,
+      'primary-light': '#8789FF',
+      'secondary': '#8592A3',
+      'on-secondary': '#fff',
+      'secondary-darken-1': '#788393',
+      'secondary-light': '#9DA8B5',
+      'success': '#71DD37',
+      'on-success': '#fff',
+      'success-darken-1': '#66C732',
+      'success-light': '#53D28C',
+      'info': '#03C3EC',
+      'on-info': '#fff',
+      'info-darken-1': '#03AFD4',
+      'info-light': '#35CFF0',
+      'warning': '#FFAB00',
+      'on-warning': '#fff',
+      'warning-darken-1': '#E69A00',
+      'warning-light': '#FFBC33',
+      'error': '#FF3E1D',
+      'on-error': '#fff',
+      'error-darken-1': '#E6381A',
+      'error-light': '#FF654A',
+      'background': '#232333',
+      'on-background': '#E6E6F1',
+      'surface': '#2B2C40',
+      'on-surface': '#E6E6F1',
+      'grey-50': '#26293A',
+      'grey-100': '#2F3349',
+      'grey-200': '#26293A',
+      'grey-300': '#4A5072',
+      'grey-400': '#5E6692',
+      'grey-500': '#7983BB',
+      'grey-600': '#AAB3DE',
+      'grey-700': '#B6BEE3',
+      'grey-800': '#CFD3EC',
+      'grey-900': '#E7E9F6',
+      'grey-light': '#313246',
+      'perfect-scrollbar-thumb': '#4A5072',
+      'skin-bordered-background': '#2B2C40',
+      'skin-bordered-surface': '#2B2C40',
+    },
+    variables: {
+      'code-color': '#d400ff',
+      'overlay-scrim-background': '#1D1D2A',
+      'tooltip-background': '#E6E6F1',
+      'overlay-scrim-opacity': 0.6,
+      'hover-opacity': 0.06,
+      'focus-opacity': 0.1,
+      'selected-opacity': 0.08,
+      'activated-opacity': 0.16,
+      'pressed-opacity': 0.14,
+      'dragged-opacity': 0.1,
+      'disabled-opacity': 0.4,
+      'border-color': '#E6E6F1',
+      'border-opacity': 0.12,
+      'table-header-color': '#2B2C40',
+      'high-emphasis-opacity': 0.9,
+      'medium-emphasis-opacity': 0.7,
+      'switch-opacity': 0.4,
+      'switch-disabled-track-opacity': 0.4,
+      'switch-disabled-thumb-opacity': 0.8,
+      'switch-checked-disabled-opacity': 0.3,
+      'track-bg': '#41415F',
+      'chat-bg': '#20202E',
+
+      // Shadows
+      'shadow-key-umbra-color': '#14141D',
+      'shadow-xs-opacity': 0.18,
+      'shadow-sm-opacity': 0.20,
+      'shadow-md-opacity': 0.22,
+      'shadow-lg-opacity': 0.24,
+      'shadow-xl-opacity': 0.26,
+    },
+  },
+}
+export default themes

javascript-version/plugins/webfontloader.client.js

@@ -0,0 +1,17 @@
+/**
+ * plugins/webfontloader.js
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+export async function loadFonts() {
+  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */ 'webfontloader')
+
+  webFontLoader.load({
+    google: {
+      families: ['Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'],
+    },
+  })
+}
+export default defineNuxtPlugin(() => {
+  loadFonts()
+})