doph-js 0.0.5 → 0.0.6

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "doph-js",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Simple Vue3 component library",
   "author": "Error202",
-  "main": "./dist/dophJs.umd.js",
+  "main": "./dist/dophJs.umd.cjs",
   "module": "./dist/dophJs.js",
   "exports": {
     ".": {
-      "import": "./dist/dophJs.umd.cjs",
+      "import": "./dist/dophJs.esm.js",
       "require": "./dist/dophJs.js"
     }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
 
   "type": "module",

package/src/App.vue

@@ -1,57 +0,0 @@
-<script setup>
-
-import DButton from "./components/DButton.vue";
-</script>
-
-<template>
-  <div style="display: flex; flex-direction: row;">
-    <div class="dark" style="width: 50%; height: 100vh; padding: 20px;">
-      <div class="h-list">
-        <d-button>Кнопка</d-button>
-        <d-button class="button-blue">Кнопка</d-button>
-        <d-button class="button-green">Кнопка</d-button>
-        <d-button class="button-red">Кнопка</d-button>
-        <d-button class="button-orange">Кнопка</d-button>
-        <d-button class="button-violet">Кнопка</d-button>
-      </div>
-
-      <div class="h-list">
-        <d-button class="button-outline">Кнопка</d-button>
-        <d-button class="button-outline-blue">Кнопка</d-button>
-        <d-button class="button-outline-green">Кнопка</d-button>
-        <d-button class="button-outline-red">Кнопка</d-button>
-        <d-button class="button-outline-orange">Кнопка</d-button>
-        <d-button class="button-outline-violet">Кнопка</d-button>
-      </div>
-    </div>
-    <div style="width: 50%; height: 100vh; padding: 20px;">
-      <div class="h-list">
-        <d-button>Кнопка</d-button>
-        <d-button class="button-blue">Кнопка</d-button>
-        <d-button class="button-green">Кнопка</d-button>
-        <d-button class="button-red">Кнопка</d-button>
-        <d-button class="button-orange">Кнопка</d-button>
-        <d-button class="button-violet">Кнопка</d-button>
-      </div>
-
-      <div class="h-list">
-        <d-button class="button-outline">Кнопка</d-button>
-        <d-button class="button-outline-blue">Кнопка</d-button>
-        <d-button class="button-outline-green">Кнопка</d-button>
-        <d-button class="button-outline-red">Кнопка</d-button>
-        <d-button class="button-outline-orange">Кнопка</d-button>
-        <d-button class="button-outline-violet">Кнопка</d-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-  .h-list {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: 5px;
-    margin-bottom: 20px;
-  }
-</style>

package/src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/DButton.vue

@@ -1,12 +0,0 @@
-<script setup>
-const props = defineProps({
-  class: String
-})
-</script>
-
-<template>
-<div class="button" :class="props.class"><slot></slot></div>
-</template>
-
-<style scoped>
-</style>

package/src/components.js

@@ -1,8 +0,0 @@
-import DButton from "./components/DButton.vue";
-
-import './scss/variables.scss'
-import './scss/components.scss'
-import './scss/themes.scss'
-import './scss/global.scss'
-
-export default { DButton }

package/src/index.js

@@ -1,14 +0,0 @@
-import components from'./components'
-
-const plugin = {
-    install (Vue) {
-        for (const prop in components) {
-            if (components.hasOwnProperty(prop)) {
-                const component = components[prop]
-                Vue.component(component.name, component)
-            }
-        }
-    }
-}
-
-export default plugin

package/src/main.js

@@ -1,9 +0,0 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
-import './scss/variables.scss'
-import './scss/components.scss'
-import './scss/themes.scss'
-import './scss/global.scss'
-
-createApp(App).mount('#app')

package/src/scss/components.scss

@@ -1,59 +0,0 @@
-.button {
-  user-select: none;
-  cursor: pointer;
-  display: inline-block;
-  padding: 8px 16px;
-  border-radius: 5px;
-  transition: all 200ms;
-  font-weight: 500;
-}
-
-.label {
-  margin-bottom: 5px;
-  font-size: 0.9em;
-  opacity: 0.7;
-}
-
-.d-input, .d-select, .d-checkbox {
-  margin-bottom: 15px;
-}
-
-.d-input input, select {
-  font-size: 1.1em;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 5px;
-  padding: 5px 10px;
-}
-
-.d-checkbox {
-  input[type=checkbox] {
-    position: absolute;
-    z-index: -1;
-    opacity: 0;
-  }
-  input[type=checkbox]+label {
-    display: inline-flex;
-    align-items: center;
-    user-select: none;
-  }
-  input[type=checkbox]+label::before {
-    content: '';
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-    flex-grow: 0;
-    border-radius: 0.25em;
-    margin-right: 0.5em;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 50% 50%;
-    transition: all 200ms;
-  }
-
-  input[type=checkbox]:checked+label::before {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
-    background-size: 10px;
-  }
-}

package/src/scss/global.scss

@@ -1,4 +0,0 @@
-body {
-  font-family: Arial, serif;
-  font-size: 1rem;
-}

package/src/scss/themes/buttons.scss

@@ -1,132 +0,0 @@
-@import "../variables";
-
-.button {
-  background-color: $light-background-gray;
-  color: $light-text-gray;
-  &:hover {
-    color: darken($light-text-gray, 10);
-    background-color: $light-background-gray-hover;
-  }
-  &.button-blue {
-    background-color: $light-background-blue;
-    color: $light-text-blue;
-    &:hover {
-      color: darken($light-text-blue, 10);
-      background-color: $light-background-blue-hover;
-    }
-  }
-  &.button-green {
-    background-color: $light-background-green;
-    color: $light-text-green;
-    &:hover {
-      color: darken($light-text-green, 10);
-      background-color: $light-background-green-hover;
-    }
-  }
-  &.button-red {
-    background-color: $light-background-red;
-    color: $light-text-red;
-    &:hover {
-      background-color: $light-background-red-hover;
-      color: darken($light-text-red, 10);
-    }
-  }
-  &.button-orange {
-    background-color: $light-background-orange;
-    color: $light-text-orange;
-    &:hover {
-      background-color: $light-background-orange-hover;
-      color: darken($light-text-orange, 10);
-    }
-  }
-  &.button-violet {
-    background-color: $light-background-violet;
-    color: $light-text-violet;
-    &:hover {
-      background-color: $light-background-violet-hover;
-      color: darken($light-text-violet, 10);
-    }
-  }
-  // OUTLINED
-  &.button-outline {
-    outline: solid 1px rgba(0,0,0,0.1);
-    background-color: transparent;
-    &:hover {
-      background-color: rgba(0,0,0,0.2);
-    }
-  }
-  &.button-outline-blue {
-    outline: solid 1px $light-background-blue;
-    background-color: transparent;
-    color: $light-background-blue;
-    &:hover {
-      background-color: $light-background-blue-hover;
-      color: white;
-    }
-  }
-  &.button-outline-green {
-    background-color: $light-background-green;
-    &:hover {
-      background-color: $light-background-green-hover;
-    }
-  }
-  &.button-outline-red {
-    background-color: $light-background-red;
-    &:hover {
-      background-color: $light-background-red-hover;
-    }
-  }
-  &.button-outline-orange {
-    background-color: $light-background-orange;
-    &:hover {
-      background-color: $light-background-orange-hover;
-    }
-  }
-  &.button-outline-violet {
-    background-color: $light-background-violet;
-    &:hover {
-      background-color: $light-background-violet-hover;
-    }
-  }
-}
-
-// DARK ////////////////////////////
-
-.dark .button {
-  background-color: rgba(255,255,255,0.1);
-  color: $black-10;
-  &:hover {
-    color: $dark-text-default-hover;
-    background-color: rgba(255,255,255,0.2);
-  }
-  &.button-blue {
-    background-color: $dark-background-blue;
-    &:hover {
-      background-color: $dark-background-blue-hover;
-    }
-  }
-  &.button-green {
-    background-color: $dark-background-green;
-    &:hover {
-      background-color: $dark-background-green-hover;
-    }
-  }
-  &.button-red {
-    background-color: $dark-background-red;
-    &:hover {
-      background-color: $dark-background-red-hover;
-    }
-  }
-  &.button-orange {
-    background-color: $dark-background-orange;
-    &:hover {
-      background-color: $dark-background-orange-hover;
-    }
-  }
-  &.button-violet {
-    background-color: $dark-background-violet;
-    &:hover {
-      background-color: $dark-background-violet-hover;
-    }
-  }
-}

package/src/scss/themes.scss

@@ -1,49 +0,0 @@
-@import "variables";
-@import "themes/buttons";
-
-body {
-  background-color: $light-background-default;
-}
-
-.dark {
-  background-color: $dark-background-default;
-}
-
-.d-input input, .d-select select {
-  color: $dark-text-default;
-  background-color: $black-85;
-  border-color: rgba(255,255,255,0.2);
-  &:focus {
-    outline: none !important;
-    border-color: rgba(255,255,255,0.4);
-  }
-}
-
-.d-checkbox {
-  input[type=checkbox]+label::before {
-    border: 1px solid rgba(255,255,255,0.2);
-  }
-
-  input[type=checkbox]:checked+label::before {
-    border-color: $black-60;
-    background-color: $black-60;
-  }
-
-  /* стили при наведении курсора на checkbox */
-  input[type=checkbox]:not(:disabled):not(:checked)+label:hover::before {
-    border-color: rgba(255,255,255,0.4);
-  }
-  /* стили для активного состояния чекбокса (при нажатии на него) */
-  input[type=checkbox]:not(:disabled):active+label::before {
-    background-color: #b3d7ff;
-    border-color: rgba(255,255,255,0.4);
-  }
-  /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
-  input[type=checkbox]:focus:not(:checked)+label::before {
-    border-color: rgba(255,255,255,0.4);
-  }
-  /* стили для чекбокса, находящегося в состоянии disabled */
-  input[type=checkbox]:disabled+label::before {
-    background-color: #e9ecef;
-  }
-}

package/src/scss/variables.scss

@@ -1,63 +0,0 @@
-$gray: #cccccc;
-$blue: #51c0e7;
-$green: #90d760;
-$red: #ff9292;
-$orange: #ffc458;
-$violet: #c2a7ff;
-
-$light-text-default: #333333;
-$light-text-default-hover: #000000;
-
-$light-text-gray: darken($gray, 30);
-$light-text-blue: darken(desaturate($blue, 60), 30);
-$light-text-green: darken(desaturate($green, 60), 30);
-$light-text-red: darken(desaturate($red, 60), 30);
-$light-text-orange: darken(desaturate($orange, 60), 30);
-$light-text-violet: darken(desaturate($violet, 60), 30);
-
-$light-background-default: #ffffff;
-
-$light-background-gray: rgba($gray, 0.6);
-$light-background-blue: rgba($blue, 0.6);
-$light-background-green: rgba($green, 0.6);
-$light-background-red: rgba($red, 0.6);
-$light-background-orange: rgba($orange, 0.6);
-$light-background-violet: rgba($violet, 0.6);
-
-$light-background-gray-hover: rgba($gray, 0.8);
-$light-background-blue-hover: rgba($blue, 0.8);
-$light-background-green-hover: rgba($green, 0.8);
-$light-background-red-hover: rgba($red, 0.8);
-$light-background-orange-hover: rgba($orange, 0.8);
-$light-background-violet-hover: rgba($violet, 0.8);
-
-// DARK ///////////////////////////
-
-$dark-text-default: #cccccc;
-$dark-text-default-hover: #ffffff;
-
-$dark-background-default: #34383e;
-
-$dark-background-blue: #1685ac;
-$dark-background-green: #5d9d31;
-$dark-background-red: #c33737;
-$dark-background-orange: #d59622;
-$dark-background-violet: #7750d2;
-
-$dark-background-blue-hover: lighten($dark-background-blue, 5);
-$dark-background-green-hover: lighten($dark-background-green, 5);
-$dark-background-red-hover: lighten($dark-background-red, 5);
-$dark-background-orange-hover: lighten($dark-background-orange, 5);
-$dark-background-violet-hover: lighten($dark-background-violet, 5);
-
-$black   : rgb(0,0,0);
-$black-90: rgb(25,25,25);
-$black-85: rgb(38,38,38);
-$black-80: rgb(51,51,51);
-$black-70: rgb(74,74,74);
-$black-60: rgb(102,102,102);
-$black-50: rgb(127,127,127);
-$black-40: rgb(153,153,153);
-$black-30: rgb(178,178,178);
-$black-20: rgb(204,204,204);
-$black-10: rgb(229,229,229);

package/src/style.css

@@ -1,4 +0,0 @@
-html, body {
-  margin: 0;
-  padding: 0;
-}