doph-js 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

package/dist/dophJs.js

@@ -0,0 +1,18 @@
+import { openBlock as n, createElementBlock as e, normalizeClass as c, renderSlot as r } from "vue";
+const p = {
+  __name: "DButton",
+  props: {
+    class: String
+  },
+  setup(t) {
+    const s = t;
+    return (o, a) => (n(), e("div", {
+      class: c(["button", s.class])
+    }, [
+      r(o.$slots, "default")
+    ], 2));
+  }
+};
+export {
+  p as DButton
+};

package/dist/dophJs.umd.cjs

@@ -0,0 +1 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.DophJs={},t.Vue))})(this,function(t,e){"use strict";const n={__name:"DButton",props:{class:String},setup(o){const s=o;return(c,p)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["button",s.class])},[e.renderSlot(c.$slots,"default")],2))}},i="",r="",l="",u="";t.DButton=n,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";.button{-webkit-user-select:none;user-select:none;cursor:pointer;display:inline-block;padding:8px 16px;border-radius:5px;transition:all .2s;font-weight:500}.label{margin-bottom:5px;font-size:.9em;opacity:.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}.d-checkbox input[type=checkbox]+label{display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none}.d-checkbox input[type=checkbox]+label:before{content:"";display:inline-block;width:1em;height:1em;flex-shrink:0;flex-grow:0;border-radius:.25em;margin-right:.5em;background-repeat:no-repeat;background-position:center center;background-size:50% 50%;transition:all .2s}.d-checkbox 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}.button{background-color:#ccc9;color:gray}.button:hover{color:#666;background-color:#cccc}.button.button-blue{background-color:#51c0e799;color:#43565c}.button.button-blue:hover{color:#2d3a3f;background-color:#51c0e7cc}.button.button-green{background-color:#90d76099;color:#4f4f4f}.button.button-green:hover{color:#363636;background-color:#90d760cc}.button.button-red{background-color:#ff929299;color:#ae4a4a}.button.button-red:hover{background-color:#ff9292cc;color:#8a3b3b}.button.button-orange{background-color:#ffc45899;color:#856a39}.button.button-orange:hover{background-color:#ffc458cc;color:#614e2a}.button.button-violet{background-color:#c2a7ff99;color:#7456b7}.button.button-violet:hover{background-color:#c2a7ffcc;color:#5c4199}.button.button-outline{outline:solid 1px rgba(0,0,0,.1);background-color:transparent}.button.button-outline:hover{background-color:#0003}.button.button-outline-blue{outline:solid 1px rgba(81,192,231,.6);background-color:transparent;color:#51c0e799}.button.button-outline-blue:hover{background-color:#51c0e7cc;color:#fff}.button.button-outline-green{background-color:#90d76099}.button.button-outline-green:hover{background-color:#90d760cc}.button.button-outline-red{background-color:#ff929299}.button.button-outline-red:hover{background-color:#ff9292cc}.button.button-outline-orange{background-color:#ffc45899}.button.button-outline-orange:hover{background-color:#ffc458cc}.button.button-outline-violet{background-color:#c2a7ff99}.button.button-outline-violet:hover{background-color:#c2a7ffcc}.dark .button{background-color:#ffffff1a;color:#e5e5e5}.dark .button:hover{color:#fff;background-color:#fff3}.dark .button.button-blue{background-color:#1685ac}.dark .button.button-blue:hover{background-color:#1996c3}.dark .button.button-green{background-color:#5d9d31}.dark .button.button-green:hover{background-color:#69b037}.dark .button.button-red{background-color:#c33737}.dark .button.button-red:hover{background-color:#cb4848}.dark .button.button-orange{background-color:#d59622}.dark .button.button-orange:hover{background-color:#dea232}.dark .button.button-violet{background-color:#7750d2}.dark .button.button-violet:hover{background-color:#8764d7}body{background-color:#fff}.dark{background-color:#34383e}.d-input input,.d-select select{color:#ccc;background-color:#262626;border-color:#fff3}.d-input input:focus,.d-select select:focus{outline:none!important;border-color:#fff6}.d-checkbox input[type=checkbox]+label:before{border:1px solid rgba(255,255,255,.2)}.d-checkbox input[type=checkbox]:checked+label:before{border-color:#666;background-color:#666}.d-checkbox input[type=checkbox]:not(:disabled):not(:checked)+label:hover:before{border-color:#fff6}.d-checkbox input[type=checkbox]:not(:disabled):active+label:before{background-color:#b3d7ff;border-color:#fff6}.d-checkbox input[type=checkbox]:focus:not(:checked)+label:before{border-color:#fff6}.d-checkbox input[type=checkbox]:disabled+label:before{background-color:#e9ecef}body{font-family:Arial,serif;font-size:1rem}

package/dist/vite.svg

@@ -0,0 +1 @@
+<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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "doph-js",
+  "version": "0.0.1",
+  "description": "Simple Vue3 component library",
+  "author": "Error202",
+  "main": "./dist/dophJs.umd.js",
+  "module": "./dist/dophJs.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/dophJs.esm.js",
+      "require": "./dist/dophJs.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vite": "^4.4.5",
+    "vite-plugin-dts": "^3.5.2",
+    "vue": "^3.3.4",
+    "sass": "^1.32.12",
+    "sass-loader": "^12.0.0"
+  }
+}

package/src/App.vue

@@ -0,0 +1,57 @@
+<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

@@ -0,0 +1 @@
+<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

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

package/src/index.js

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

package/src/main.js

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,59 @@
+.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

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

package/src/scss/themes/buttons.scss

@@ -0,0 +1,132 @@
+@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

@@ -0,0 +1,49 @@
+@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

@@ -0,0 +1,63 @@
+$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

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