@zap-wunschlachen/wl-shared-components 1.0.0

package/src/index.ts

@@ -0,0 +1,31 @@
+// src/index.ts
+
+// Import global CSS files
+import './assets/css/base.css';
+import './assets/css/variables.css';
+
+// Import all components
+import * as components from './components';
+
+// Import the App type from Vue
+import type { App } from 'vue';
+import { createInternalI18n } from './i18n/i18n';
+
+// Define the install function with proper typing
+const install = (app: App) => {
+  if (!app?.config?.globalProperties?.$i18n) {
+    const i18n = createInternalI18n();
+    app.use(i18n);
+  }
+
+  const prefix = 'WL'; // Hardcoded prefix
+  for (const [componentName, component] of Object.entries(components)) {
+    app.component(`${prefix}${componentName}`, component);
+  }
+};
+
+// Export the install function as a named export
+export const WlSharedComponents = { install };
+
+// Export each individual component
+export * from './components';

package/src/main.ts

@@ -0,0 +1,11 @@
+import { createApp } from 'vue';
+import App from '../App.vue';
+import vuetify from './plugins/vuetify'; // Import the Vuetify plugin
+import { createInternalI18n } from './i18n/i18n';
+import './assets/css/base.css';
+import './assets/css/variables.css';
+
+const app = createApp(App);
+app.use(vuetify); // Register Vuetify here
+app.use(createInternalI18n());
+app.mount('#app');

package/src/plugins/vuetify.ts

@@ -0,0 +1,131 @@
+import { createVuetify } from 'vuetify';
+import type { ThemeDefinition } from 'vuetify';
+import 'vuetify/styles';
+import '@mdi/font/css/materialdesignicons.css'; // Import Material Design Icons CSS
+import heroicons from '../../heroicons';
+import { aliases as mdiAliases, mdi } from 'vuetify/iconsets/mdi'; // Import mdi icons
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+
+// Define light and dark themes using direct hex color values with PascalCase
+const lightTheme: ThemeDefinition = {
+  variables: {
+    'activated-opacity': '0.2', // Adjust to your desired opacity
+    'hover-opacity': '0.2',
+  },
+  dark: false,
+  colors: {
+    'Dental-Blue-0': '#172774',
+    'Dental-Blue-1': '#111c54',
+    'Dental-Blue--1': '#4f5b95',
+    'Dental-Blue--2': '#7079a8',
+    'Dental-Blue--3': '#9198bc',
+    'Dental-Blue--4': '#cacdde',
+    'Dental-Blue--5': '#e5e6ee',
+    'Dental-Blue--6': '#f6f6f8',
+    'Dental-Light-Blue-4': '#293e52',
+    'Dental-Light-Blue-3': '#69849e',
+    'Dental-Light-Blue-2': '#93b1cf',
+    'Dental-Light-Blue-1': '#adcbe9',
+    'Dental-Light-Blue-0': '#c5e1fc',
+    'Dental-Light-Blue--1': '#dcecfc',
+    'Dental-Light-Blue--2': '#edf5fc',
+    'Dental-Light-Blue--3': '#f8fafd',
+    'Dental-Air-5': '#2e3133',
+    'Dental-Air-4': '#70767b',
+    'Dental-Air-3': '#99a2a9',
+    'Dental-Air-2': '#c5d1d9',
+    'Dental-Air-1': '#dbe8f1',
+    'Dental-Air-0': '#e4f2fb',
+    'Dental-Air--1': '#f4f9fd',
+    'Dental-Air--2': '#f9fbfd',
+    'Power-Red-3': '#1e050f',
+    'Power-Red-2': '#4a0d26',
+    'Power-Red-1': '#891747',
+    'Power-Red-0': '#f4297e',
+    'Power-Red--1': '#f769a5',
+    'Power-Red--2': '#fa9fc5',
+    'Power-Red--3': '#fcc9df',
+    'Power-Red--4': '#feeaf2',
+    'Light-Gum-4': '#1f1c1b',
+    'Light-Gum-3': '#4c4444',
+    'Light-Gum-2': '#b6a3a2',
+    'Light-Gum-1': '#edd4d2',
+    'Light-Gum-0': '#fce2df',
+    'Light-Gum--1': '#fdeeec',
+    'Light-Gum--2': '#fef3f2',
+    'Light-Gum--3': '#fef9f9',
+    'Warm-Light-5': '#10100e',
+    'Warm-Light-4': '#34322e',
+    'Warm-Light-3': '#5c5952',
+    'Warm-Light-2': '#cec7b8',
+    'Warm-Light-1': '#f0e8d6',
+    'Warm-Light-0': '#fff6e4',
+    'Warm-Light--1': '#fff8eb',
+    'Warm-Light--2': '#fffbf4',
+    'Soft-Concrete-5': '#1e1e1e',
+    'Soft-Concrete-4': '#4a4a4b',
+    'Soft-Concrete-3': '#676769',
+    'Soft-Concrete-2': '#c1c1c2',
+    'Soft-Concrete-1': '#dddddf',
+    'Soft-Concrete-0': '#f5f5f7',
+    'Soft-Concrete--1': '#f9f9fb',
+    'Soft-Concrete--2': '#fbfbfc',
+    'Error-Red-1': '#630112',
+    'Error-Red-0': '#b00020',
+    'Error-Red--1': '#e3a6b1',
+    'Success-Green-1': '#037a72',
+    'Success-Green-0': '#03dac6',
+    'Success-Green--1': '#f3fdfc',
+    'Warning-1': '#4f4700',
+    'Warning-0': '#ffe600',
+    'Warning--1': '#fff8db',
+    'Check-1': '#037a2c',
+    'Check-0': '#01d449',
+    'Check--1': '#d8fde4',
+    Trkis: '#bae6ea',
+  },
+};
+
+const darkTheme: ThemeDefinition = {
+  dark: true,
+  colors: {
+    'Dental-Blue-0': '#111c54',
+    'Dental-Light-Blue-0': '#adcbe9',
+    'Dental-Air-0': '#2e3133',
+    'Power-Red-0': '#4a0d26',
+    'Light-Gum-0': '#b6a3a2',
+    'Warm-Light-0': '#34322e',
+    'Soft-Concrete-0': '#4a4a4b',
+    'Error-Red-0': '#630112',
+    'Success-Green-0': '#037a72',
+    'Warning-0': '#4f4700',
+  },
+};
+
+export default createVuetify({
+  icons: {
+    // Set 'mdi' or 'heroicons' as the default set
+    defaultSet: 'mdi', // You can change this to 'heroicons' if you prefer
+
+    // Aliases for common icons (default aliases from mdi)
+    aliases: {
+      ...mdiAliases,
+    },
+
+    // Define both icon sets
+    sets: {
+      mdi, // Material Design Icons
+      heroicons, // Custom Heroicons set
+    },
+  },
+  components,
+  directives,
+  theme: {
+    defaultTheme: 'light',
+    themes: {
+      light: lightTheme,
+      dark: darkTheme,
+    },
+  },
+});

package/src/shims-vue.d.ts

@@ -0,0 +1,10 @@
+// src/shims-vue.d.ts
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<
+    Record<string, unknown>,
+    Record<string, unknown>,
+    any
+  >;
+  export default component;
+}