@ldmjs/ui 1.0.0-dev-2 → 1.0.0-dev-3

package/README.md

@@ -1 +1,33 @@
-Hello, LDM!
+# Dependencies
+
+ - vue: >=3.4
+
+# Installation
+
+```cmd
+npm i @ldmjs/ui@latest
+```
+OR
+```cmd
+yarn add @ldmjs/ui@latest
+```
+
+# Use
+
+```js
+import { createApp } from 'vue';
+import '@ldmjs/ui/dist/css';
+import '@ldmjs/ui/dist/scss';
+import ldmui from '@ldmjs/ui';
+```
+
+```js
+const appComponent = createApp(App);
+appComponent.use(ldmui);
+appComponent.mount('#app');
+```
+
+# Library
+
+ - ld-icon
+ - loader

package/config/rules.js

@@ -0,0 +1,51 @@
+module.exports = {
+  rules: [
+    {
+      test: /\.vue$/,
+      use: [
+        {
+          loader: 'vue-loader',
+          options: {
+            compilerOptions: {
+              whitespace: 'preserve',
+            },
+            hotReload: true
+          }
+        }
+      ]
+    },
+    {
+      test: /\.ts$/,
+      exclude: /node_modules|\.(spec|e2e|d)\.ts$|vue\/src/,
+      use: [
+        {
+          loader: 'ts-loader',
+          options: {
+            appendTsSuffixTo: [/\.vue$/],
+            transpileOnly: true,
+            happyPackMode: false,
+          }
+        }
+      ]
+    },
+    {
+      test: /\.(css|scss)$/,
+      use: [
+        'style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            importLoaders: 1,
+          }
+        },
+        'postcss-loader',
+        {
+          loader: 'sass-loader',
+          options: {
+            implementation: require('node-sass'),
+          }
+        }
+      ],
+    },
+  ],
+}

package/config/webpack.config.build.js

@@ -3,6 +3,7 @@ const { VueLoaderPlugin } = require('vue-loader');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const DefinePlugin = require('webpack/lib/DefinePlugin');
 const path = require('path');
+const { rules } = require('./rules');
 
 module.exports = {
   mode: 'production',
@@ -31,36 +32,7 @@ module.exports = {
     },
   },
   module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        use: [
-          {
-            loader: 'vue-loader',
-            options: {
-              compilerOptions: {
-                whitespace: 'preserve',
-              },
-              hotReload: true
-            }
-          }
-        ]
-      },
-      {
-        test: /\.ts$/,
-        exclude: /node_modules|\.(spec|e2e|d)\.ts$|vue\/src/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: {
-              appendTsSuffixTo: [/\.vue$/],
-              transpileOnly: true,
-              happyPackMode: false,
-            }
-          }
-        ]
-      }
-    ],
+    rules
   },
   optimization: {
     minimize: false,
@@ -131,6 +103,18 @@ module.exports = {
         {
           from: 'src/index.d.ts',
           to: './index.d.ts'
+        },
+        {
+          from: 'src/utils.d.ts',
+          to: './utils.d.ts'
+        },
+        {
+          from: 'src/css/index.css',
+          to: './css/index.css'
+        },
+        {
+          from: 'src/scss',
+          to: './scss'
         }
       ]
     })

package/config/webpack.config.dev.js

@@ -3,6 +3,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const DefinePlugin = require('webpack/lib/DefinePlugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
+const { rules } = require('./rules');
 
 module.exports = {
   mode: 'development',
@@ -10,41 +11,12 @@ module.exports = {
     'main': './main.ts',
   },
   module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        use: [
-          {
-            loader: 'vue-loader',
-            options: {
-              compilerOptions: {
-                whitespace: 'preserve',
-              },
-              hotReload: true
-            }
-          }
-        ]
-      },
-      {
-        test: /\.ts$/,
-        exclude: /node_modules|\.(spec|e2e|d)\.ts$|vue\/src/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: {
-              appendTsSuffixTo: [/\.vue$/],
-              transpileOnly: true,
-              happyPackMode: false,
-            }
-          }
-        ]
-      }
-    ],
+    rules,
   },
   resolve: {
     symlinks: true,
     modules: [path.join(__dirname, '../'), 'node_modules'],
-    extensions: ['*', '.ts', '.js', '.vue', '.html', '.json', '.scss'],
+    extensions: ['*', '.ts', '.js', '.vue', '.html', '.json', '.scss', '.css'],
     alias: {
       'vue$': 'vue/dist/vue.esm-bundler.js',
       '@': 'src',

package/dist/css/index.css

@@ -0,0 +1,86 @@
+:root {
+  --primary-d-1: hsla(210, 100%, 18%, 100%);
+  --primary: hsla(210, 100%, 26%, 100%);
+  --primary-l-1: hsla(210, 100%, 34%, 100%);
+  --primary-l-2: hsla(210, 100%, 42%, 100%);
+  --primary-l-3: hsla(210, 100%, 50%, 100%);
+  --primary-l-4: hsla(210, 100%, 58%, 100%);
+  --primary-l-5: hsla(210, 100%, 66%, 100%);
+  --primary-l-6: hsla(210, 100%, 74%, 100%);
+  --primary-l-7: hsla(210, 100%, 82%, 100%);
+  --primary-l-8: hsla(210, 100%, 90%, 100%);
+
+  --dark: hsla(219, 83%, 14%, 100%);
+  --dark-l-1-09: hsla(219, 83%, 14%, 90%);
+  --dark-l-2-08: hsla(219, 83%, 14%, 80%);
+  --dark-l-3-07: hsla(219, 83%, 14%, 70%);
+  --dark-l-4-06: hsla(219, 83%, 14%, 60%);
+  --dark-l-5-05: hsla(219, 83%, 14%, 50%);
+  --dark-l-6-04: hsla(219, 83%, 14%, 40%);
+  --dark-l-7-03: hsla(219, 83%, 14%, 30%);
+  --dark-l-8-02: hsla(219, 83%, 14%, 20%);
+  --dark-l-9-01: hsla(219, 83%, 14%, 10%);
+
+  --secondary-d-4: hsla(204, 100%, 18%, 100%);
+  --secondary-d-3: hsla(204, 100%, 26%, 100%);
+  --secondary-d-2: hsla(204, 100%, 34%, 100%);
+  --secondary-d-1: hsla(204, 100%, 42%, 100%);
+  --secondary: hsla(204, 100%, 50%, 100%);
+  --secondary-l-1: hsla(204, 100%, 58%, 100%);
+  --secondary-l-2: hsla(204, 100%, 66%, 100%);
+  --secondary-l-3: hsla(204, 100%, 74%, 100%);
+  --secondary-l-4: hsla(204, 100%, 82%, 100%);
+  --secondary-l-5: hsla(204, 100%, 90%, 100%);
+
+  --success-d-3: hsla(135, 59%, 17%, 100%);
+  --success-d-2: hsla(135, 59%, 25%, 100%);
+  --success-d-1: hsla(135, 59%, 33%, 100%);
+  --success: hsla(135, 59%, 41%, 100%);
+  --success-l-1: hsla(135, 59%, 49%, 100%);
+  --success-l-2: hsla(135, 59%, 57%, 100%);
+  --success-l-3: hsla(135, 59%, 65%, 100%);
+  --success-l-4: hsla(135, 59%, 73%, 100%);
+  --success-l-5: hsla(135, 59%, 81%, 100%);
+  --success-l-6: hsla(135, 59%, 89%, 100%);
+
+  --error-d-3: hsla(7, 82%, 18%, 100%);
+  --error-d-2: hsla(7, 82%, 26%, 100%);
+  --error-d-1: hsla(7, 82%, 34%, 100%);
+  --error: hsla(7, 82%, 42%, 100%);
+  --error-l-1: hsla(7, 82%, 50%, 100%);
+  --error-l-2: hsla(7, 82%, 58%, 100%);
+  --error-l-3: hsla(7, 82%, 66%, 100%);
+  --error-l-4: hsla(7, 82%, 74%, 100%);
+  --error-l-5: hsla(7, 82%, 82%, 100%);
+  --error-l-6: hsla(7, 82%, 90%, 100%);
+
+  --warning-d-4: hsla(24, 100%, 18%, 100%);
+  --warning-d-3: hsla(24, 100%, 26%, 100%);
+  --warning-d-2: hsla(24, 100%, 34%, 100%);
+  --warning-d-1: hsla(24, 100%, 42%, 100%);
+  --warning: hsla(24, 100%, 50%, 100%);
+  --warning-l-1: hsla(24, 100%, 58%, 100%);
+  --warning-l-2: hsla(24, 100%, 66%, 100%);
+  --warning-l-3: hsla(24, 100%, 74%, 100%);
+  --warning-l-4: hsla(24, 100%, 82%, 100%);
+  --warning-l-5: hsla(24, 100%, 90%, 100%);
+
+  --grey-d-3: hsla(0, 0%, 14%, 100%);
+  --grey-d-2: hsla(0, 0%, 23%, 100%);
+  --grey-d-1: hsla(0, 0%, 32%, 100%);
+  --grey: hsla(0, 0%, 41%, 100%);
+  --grey-l-1: hsla(0, 0%, 50%, 100%);
+  --grey-l-2: hsla(0, 0%, 59%, 100%);
+  --grey-l-3: hsla(0, 0%, 68%, 100%);
+  --grey-l-4: hsla(0, 0%, 77%, 100%);
+  --grey-l-5: hsla(0, 0%, 86%, 100%);
+  --grey-l-6: hsla(0, 0%, 95%, 100%);
+
+  --black: hsla(0, 0%, 0%, 100%);
+
+  --white: hsla(0, 0%, 100%, 100%);
+
+  --text: hsla(0, 0%, 13%, 100%);
+
+  --label: hsla(0, 0%, 47%, 100%);
+}