tomit4
/
siimee
forked de fyindr/siimee
Seguir 1
Destacar 0
Cuchillo 0
Código Incidencias 0 Peticiones pull 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

:tada: first commit

master
J hace 5 años
commit
6ba402ea33
Se han modificado 25 ficheros con 3145 adiciones y 0 borrados
Dividir vista Mostrar estadísticas de diff
  1. 5
    0
      .gitignore
  2. 0
    0
      README.md
  3. 17
    0
      index.html
  4. 2561
    0
      package-lock.json
  5. 32
    0
      package.json
  6. 9
    0
      postcss.config.js
  7. BIN
      public/favicon.ico
  8. 47
    0
      src/App.vue
  9. BIN
      src/assets/logo.png
  10. 28
    0
      src/components/HelloWorld.vue
  11. 128
    0
      src/entities/_modules.js
  12. 10
    0
      src/entities/index.js
  13. 2
    0
      src/entities/profile/index.js
  14. 50
    0
      src/entities/profile/profile.js
  15. 36
    0
      src/entities/profile/profile.schema.js
  16. 1
    0
      src/entities/profile/profile.spec.js
  17. 4
    0
      src/main.js
  18. 21
    0
      src/sss/index.js
  19. 36
    0
      src/sss/partials/_helpers.sss
  20. 13
    0
      src/sss/partials/_ratios.sss
  21. 40
    0
      src/sss/partials/_reset.sss
  22. 40
    0
      src/sss/partials/_typography.sss
  23. 16
    0
      src/sss/theme.sss
  24. 37
    0
      src/sss/variables.sss
  25. 12
    0
      vite.config.js

+ 5
- 0
.gitignore Ver fichero 

@@ -0,0 +1,5 @@
1 
+node_modules
2 
+.DS_Store
3 
+dist
4 
+dist-ssr
5 
+*.local

+ 0
- 0
README.md Ver fichero


+ 17
- 0
index.html Ver fichero 

@@ -0,0 +1,17 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+  <head>
4 
+    <meta charset="UTF-8" />
5 
+    <link rel="icon" href="/favicon.ico" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <title>Vite App</title>
8 
+  </head>
9 
+  <body>
10 
+    <div id="app"></div>
11 
+    <script>
12 
+      // DUMB shim
13 
+      var global = window;
14 
+    </script>
15 
+    <script type="module" src="/src/main.js"></script>
16 
+  </body>
17 
+</html>

+ 2561
- 0
package-lock.json
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 32
- 0
package.json Ver fichero 

@@ -0,0 +1,32 @@
1 
+{
2 
+  "name": "vite-project",
3 
+  "version": "0.0.0",
4 
+  "scripts": {
5 
+    "dev": "vite",
6 
+    "build": "vite build",
7 
+    "serve": "vite preview"
8 
+  },
9 
+  "dependencies": {
10 
+    "ajv": "^8.2.0",
11 
+    "events": "^3.3.0",
12 
+    "pouchdb": "^7.2.2",
13 
+    "process": "^0.11.10",
14 
+    "vue": "^3.0.5"
15 
+  },
16 
+  "devDependencies": {
17 
+    "@vitejs/plugin-vue": "^1.2.2",
18 
+    "@vue/compiler-sfc": "^3.0.5",
19 
+    "autoprefixer": "^10.2.5",
20 
+    "postcss": "^8.2.13",
21 
+    "postcss-calc": "^8.0.0",
22 
+    "postcss-import": "^14.0.1",
23 
+    "precss": "^4.0.0",
24 
+    "pug": "^3.0.2",
25 
+    "pug-plain-loader": "^1.1.0",
26 
+    "sugarss": "^3.0.3",
27 
+    "vite": "^2.2.3"
28 
+  },
29 
+  "resolutions": {
30 
+    "postcss": "8.2.13"
31 
+  }
32 
+}

+ 9
- 0
postcss.config.js Ver fichero 

@@ -0,0 +1,9 @@
1 
+module.exports = {
2 
+    parser: 'sugarss',
3 
+    plugins: [
4 
+        require('postcss-import'),
5 
+        require('postcss-calc'),
6 
+        require('precss'),
7 
+        require('autoprefixer')
8 
+    ]
9 
+}

BIN
public/favicon.ico Ver fichero


+ 47
- 0
src/App.vue Ver fichero 

@@ -0,0 +1,47 @@
1 
+<template lang="pug">
2 
+img(alt="Vue logo" src="./assets/logo.png")
3 
+HelloWorld(msg="Hello Vue 3 + Vite")
4 
+</template>
5 
+
6 
+<script setup>
7 
+import PouchDB from 'pouchdb'
8 
+
9 
+import { Profile } from '@/entities/profile'
10 
+
11 
+const p = new Profile({
12 
+    email: 'donot@disturb.com',
13 
+    street: '123 strawberry ln',
14 
+    apt: 2,
15 
+    city: 'candyland',
16 
+    state: 'lollipop',
17 
+    zip: 90001
18 
+})
19 
+/** from ajv schema validation */
20 
+if(p.isValid()) {
21 
+    console.log('SUCCESS!', p)
22 
+} else {
23 
+    console.error('error!', p.isValid())
24 
+}
25 
+
26 
+const db = new PouchDB('kittens')
27 
+console.log('PouchDB', db)
28 
+
29 
+import HelloWorld from '@/components/HelloWorld.vue'
30 
+
31 
+// This starter template is using Vue 3 experimental <script setup> SFCs
32 
+// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
33 
+</script>
34 
+
35 
+<style lang="postcss">
36 
+@import './sss/theme.sss'
37 
+@import './sss/variables.sss'
38 
+
39 
+#app
40 
+    -webkit-font-smoothing: antialiased
41 
+    -moz-osx-font-smoothing: grayscale
42 
+    text-align: center
43 
+    color: $primary
44 
+    font-family: $sans
45 
+    margin-top: $ms-2
46 
+    background-color: $secondary
47 
+</style>

BIN
src/assets/logo.png Ver fichero


+ 28
- 0
src/components/HelloWorld.vue Ver fichero 

@@ -0,0 +1,28 @@
1 
+<template lang="pug">
2 
+h1 {{ msg }}
3 
+
4 
+p
5 
+    a(href="https://vitejs.dev/guide/features.html" target="_blank") Vite Documentation |
6 
+    a(href="https://v3.vuejs.org/" target="_blank") Vue 3 Documentation
7 
+
8 
+button(@click="state.count++") count is: {{ state.count }}
9 
+
10 
+p Edit
11 
+code components/HelloWorld.vue
12 
+p to test hot module replacement.
13 
+</template>
14 
+
15 
+<script setup>
16 
+import { defineProps, reactive } from 'vue'
17 
+
18 
+defineProps({
19 
+    msg: String
20 
+})
21 
+
22 
+const state = reactive({ count: 0 })
23 
+</script>
24 
+
25 
+<style lang="postcss">
26 
+a
27 
+    color: #42b983
28 
+</style>

+ 128
- 0
src/entities/_modules.js Ver fichero 

@@ -0,0 +1,128 @@
1 
+/** @module _modules/_baseRecord */
2 
+/** @module _modules/allModules */
3 
+
4 
+/**
5 
+ * --- BASERECORD ---
6 
+ * Data common to every single data TYPE
7 
+ * Universal fields required for storing anything
8 
+ */
9 
+ class _baseRecord {
10 
+     /**
11 
+     * Standard record to extend with more detail
12 
+     */
13 
+    constructor() {
14 
+        this.createdAt = new Date().toJSON()
15 
+        this._id = Date.now()
16 
+        this.lastUpdatedAt = null
17 
+
18 
+        /** Set in subtype (ticket, user, etc) */
19 
+        this.type = null
20 
+
21 
+        this._update()
22 
+    }
23 
+    /** Internally record update time */
24 
+    _update() {
25 
+        this.lastUpdatedAt = new Date().toJSON()
26 
+    }
27 
+}
28 
+
29 
+/**
30 
+ * --- MODULES ---
31 
+ * Reusable bits to add to data TYPES
32 
+ * Make these as generic and reusable as possible!
33 
+ *
34 
+ * TODO: Destructure all these arguements
35 
+ */
36 
+
37 
+const allModules = {
38 
+    /**
39 
+     * Use parent() for anything that has a parent
40 
+     */
41 
+    parent: ({ id = '' }) => {
42 
+        const module = {
43 
+            'parentId': id
44 
+        }
45 
+        return module
46 
+    },
47 
+
48 
+    /**
49 
+     * Use hourly() for anything that needs to track money * time
50 
+     */
51 
+    hourly: ({ hours, rate }) => {
52 
+        let module = {
53 
+            'hours': hours,
54 
+            'rate': rate,
55 
+            'total': hours * rate
56 
+        }
57 
+        return module
58 
+    },
59 
+
60 
+    /**
61 
+     * Use id() for anything that needs to store contact information
62 
+     * (People, companies, etc)
63 
+     */
64 
+    contact: ({ name, email }) => {
65 
+        const module = {
66 
+            'name': name,
67 
+            'email': email
68 
+        }
69 
+
70 
+        // This is used for checking, maybe validation in the future(?)
71 
+        if (name) {
72 
+            module.name = name
73 
+        }
74 
+        if (email) {
75 
+            module.email = email
76 
+        }
77 
+        return module
78 
+    },
79 
+
80 
+    /**
81 
+     * Use transaction() for anything that needs to track money
82 
+     * (Donations, fees, etc)
83 
+     */
84 
+    transaction: ({ amount, date }) => {
85 
+        let module = {
86 
+            'amount': amount,
87 
+            'date': date
88 
+        }
89 
+        return module
90 
+    },
91 
+
92 
+    /**
93 
+     * Use subjNote() for anything that needs just a title and short note
94 
+     * (Blog post, Quick notes, etc)
95 
+     */
96 
+    subjNote: ({ subject, note, status }) => {
97 
+        let module = {
98 
+            'subject': subject,
99 
+            'note': note,
100 
+            'status': status
101 
+        }
102 
+
103 
+        if (!status) {
104 
+            module.status = 'draft'
105 
+        } else {
106 
+            module.status = status
107 
+        }
108 
+        return module
109 
+    },
110 
+
111 
+    /**
112 
+     * Use location() for anything that needs to store location information
113 
+     * (People, companies, etc)
114 
+     */
115 
+    location: ({ street = '', apt = '', city = '', state = '', zip = 11111 }) => {
116 
+        const module = {
117 
+            'address': street,
118 
+            'apt': apt,
119 
+            'city': city,
120 
+            'state': state,
121 
+            'zip': zip
122 
+        }
123 
+
124 
+        return module
125 
+    },
126 
+}
127 
+
128 
+export { _baseRecord, allModules }

+ 10
- 0
src/entities/index.js Ver fichero 

@@ -0,0 +1,10 @@
1 
+export * from './_modules'
2 
+
3 
+/** Single instance of your schema handler */
4 
+import Ajv from 'ajv'
5 
+const ajv = new Ajv()
6 
+export { ajv }
7 
+
8 
+/** Your different entities */
9 
+export * from './profile'
10 
+

+ 2
- 0
src/entities/profile/index.js Ver fichero 

@@ -0,0 +1,2 @@
1 
+export * from './profile'
2 
+export * from './profile.schema'

+ 50
- 0
src/entities/profile/profile.js Ver fichero 

@@ -0,0 +1,50 @@
1 
+/** @module entities/profile */
2 
+
3 
+import { _baseRecord, allModules, ajv } from '..'
4 
+import { profileSchema } from './profile.schema'
5 
+
6 
+/** Class representing a profile */
7 
+class Profile extends _baseRecord {
8 
+    /**
9 
+     * Create the profile.
10 
+     * @extends _baseRecord
11 
+     * @param {string} email
12 
+     * @param {object} profile - spread destructured args
13 
+     * @return {Profile} the profile instance object
14 
+     */
15 
+    constructor({ email, ...profile }) {
16 
+        super()
17 
+
18 
+        this.type = this.constructor.name.toLowerCase()
19 
+
20 
+        /**  Fields */
21 
+        this.email = email // ! required
22 
+
23 
+        /** Pass destructured data to the module system */
24 
+        Object.assign(this, allModules.location(profile))
25 
+
26 
+        return this
27 
+    }
28 
+    /**
29 
+     * validate this record
30 
+     * @return {boolean} is it valid or not?
31 
+     */
32 
+    isValid() {
33 
+        const validate = ajv.compile(profileSchema)
34 
+
35 
+        /**
36 
+         * Log out some useful error messages
37 
+         * TODO: Send validate.errors to logging error handler
38 
+         */
39 
+        if(validate(this) !== true && validate.errors && validate.errors.length > 0) {
40 
+            validate.errors.forEach(err => {
41 
+                console.error(`error: ${err.instancePath} field ${err.message} - ${this.type} validation`)
42 
+            })
43 
+        }
44 
+
45 
+        /** validate(this) always returns something so force it to a bool */
46 
+        return validate(this) === true ? true : false
47 
+    }
48 
+}
49 
+
50 
+export { Profile }

+ 36
- 0
src/entities/profile/profile.schema.js Ver fichero 

@@ -0,0 +1,36 @@
1 
+/** @module entities/profileSchema */
2 
+import { allModules } from '..'
3 
+
4 
+/**
5 
+ * profile schema object
6 
+ * uses the module system to use common fields
7 
+ * but sets fields with our validation types
8 
+ * @constructor
9 
+*/
10 
+const profileSchema = {
11 
+    type: 'object',
12 
+    properties: {
13 
+        /** _baseRecord fields */
14 
+        createdAt: { type: 'string' },
15 
+        _id: { type: 'number' },
16 
+        lastUpdatedAt: { type: 'string' },
17 
+        type: { type: 'string' },
18 
+
19 
+        /** our fields */
20 
+        email: { type: 'string' },
21 
+
22 
+        /** tricky module system fields */
23 
+        ...allModules.location({
24 
+            street: { type: 'string' },
25 
+            apt: { type: 'string' },
26 
+            city: { type: 'string' },
27 
+            state: { type: 'string' },
28 
+            zip: { type: 'number' }
29 
+        })
30 
+    },
31 
+    /** fields required before saving */
32 
+    required: [ 'email' ],
33 
+    additionalProperties: false
34 
+}
35 
+
36 
+export { profileSchema }

+ 1
- 0
src/entities/profile/profile.spec.js Ver fichero 

@@ -0,0 +1 @@
1 
+// Write your profile test here

+ 4
- 0
src/main.js Ver fichero 

@@ -0,0 +1,4 @@
1 
+import { createApp } from 'vue'
2 
+import App from './App.vue'
3 
+
4 
+createApp(App).mount('#app')

+ 21
- 0
src/sss/index.js Ver fichero 

@@ -0,0 +1,21 @@
1 
+import './partials/_reset.sss'
2 
+import './partials/_helpers.sss'
3 
+import './partials/_typography.sss'
4 
+
5 
+import layoutVars from './variables.sss'
6 
+import themeVars from './theme.sss'
7 
+
8 
+const splitVars = varsFromSSS => {
9 
+    return varsFromSSS.split('\n').map(line => line.split(':')).reduce((vars, pair) => {
10 
+        if(pair[0][0] !== '$') return vars
11 
+        const varname = pair[0].replace('$', '')
12 
+        vars[varname] = pair[1].replace(' ', '')
13 
+        vars[varname] = vars[varname].replace(/[\n\r]/g, '')
14 
+        return vars
15 
+    }, {})
16 
+}
17 
+
18 
+const size = splitVars(layoutVars)
19 
+const theme = splitVars(themeVars)
20 
+
21 
+export { size, theme }

+ 36
- 0
src/sss/partials/_helpers.sss Ver fichero 

@@ -0,0 +1,36 @@
1 
+@import '../variables.sss'
2 
+@import '../theme.sss'
3 
+
4 
+%flexy
5 
+    display: flex
6 
+    justify-content: center
7 
+    align-items: center
8 
+
9 
+.f
10 
+    &-row, &-col
11 
+        @extend %flexy
12 
+        &.start
13 
+            align-items: flex-start
14 
+            justify-content: flex-start
15 
+        &.end
16 
+            align-items: flex-end
17 
+            justify-content: flex-end
18 
+        &.between
19 
+            justify-content: space-between
20 
+        &.around
21 
+            justify-content: space-around
22 
+        &.even
23 
+            justify-content: space-evenly
24 
+        &.stretch
25 
+            align-content: stretch
26 
+        &.center
27 
+            align-items: flex-start
28 
+            justify-content: flex-start
29 
+        &.wrap
30 
+            flex-wrap: wrap
31 
+    &-row
32 
+        flex-direction: row
33 
+    &-col
34 
+        flex-direction: column
35 
+    &-grow
36 
+        flex-grow: 1

+ 13
- 0
src/sss/partials/_ratios.sss Ver fichero 

@@ -0,0 +1,13 @@
1 
+$minor-second: 1.067
2 
+$major-second: 1.125
3 
+$minor-third: 1.2
4 
+$major-third: 1.25
5 
+$perfect-fourth: 1.333
6 
+$augmented-fourth: 1.414
7 
+$perfect-fifth: 1.5
8 
+$minor-sixth: 1.6
9 
+$golden: 1.618
10 
+$major-sixth: 1.667
11 
+$minor-seventh: 1.778
12 
+$major-seventh: 1.875
13 
+$octave: 2

+ 40
- 0
src/sss/partials/_reset.sss Ver fichero 

@@ -0,0 +1,40 @@
1 
+@import '../variables.sss'
2 
+@import '../theme.sss'
3 
+
4 
+*
5 
+    margin: 0
6 
+    padding: 0
7 
+    box-sizing: border-box
8 
+    &:before, &:after
9 
+        background-repeat: no-repeat
10 
+        box-sizing: inherit
11 
+    $:focus
12 
+        outline: none !important
13 
+
14 
+::before, ::after
15 
+    text-decoration: inherit
16 
+    vertical-align: inherit
17 
+
18 
+html
19 
+    cursor: default
20 
+    font-family: system-ui
21 
+    line-height: $ms-0
22 
+    tab-size: 4
23 
+
24 
+body
25 
+    margin: 0
26 
+    font-size: $ms-1
27 
+    font-family: $sans
28 
+
29 
+nav
30 
+    ol, ul
31 
+        list-style: none
32 
+
33 
+// Good for SPAs
34 
+html, body
35 
+    height: 100%
36 
+
37 
+button, input, select, textarea
38 
+    font-family: inherit
39 
+    font-size: inherit
40 
+    line-height: inherit

+ 40
- 0
src/sss/partials/_typography.sss Ver fichero 

@@ -0,0 +1,40 @@
1 
+@import '../variables.sss'
2 
+@import '../theme.sss'
3 
+
4 
+h1
5 
+    font-size: $ms-5
6 
+    line-height: $ms-4
7 
+h2
8 
+    font-size: $ms-3
9 
+    line-height: $ms-2
10 
+h3
11 
+    font-size: $ms-2
12 
+    line-height: $ms-1
13 
+h4
14 
+    font-size: $ms-1
15 
+    line-height: $ms-0
16 
+p
17 
+    font-size: $ms-1
18 
+    line-height: $ms-0
19 
+
20 
+.t
21 
+    &-center
22 
+        text-align: center
23 
+    &-right
24 
+        text-align: right
25 
+    &-left
26 
+        text-align: left
27 
+    &-up
28 
+        text-transform: uppercase
29 
+    &-cap
30 
+        text-transform: capitalize
31 
+    &-sans
32 
+        font-family: $sans
33 
+    &-serif
34 
+        font-family: $serif
35 
+    &-mono
36 
+        font-family: $mono
37 
+
38 
+a
39 
+    &:hover
40 
+        cursor: pointer

+ 16
- 0
src/sss/theme.sss Ver fichero 

@@ -0,0 +1,16 @@
1 
+@import './variables.sss'
2 
+
3 
+/**
4 
+  * Colors
5 
+*/
6 
+$hue: 200
7 
+$bg: calc($hue * $ms-1)
8 
+$bright: 50%
9 
+$opacity: 1
10 
+
11 
+$primary: hsla($hue, 20%, calc($bright * $ms-1), $opacity)
12 
+$secondary: hsla($bg, 20%, calc($bright * $ms-1), $opacity)
13 
+$hilite: hsla($hue, 50%, calc($bright * $ms-0), $opacity)
14 
+
15 
+$light: hsla(255, 50%, calc($bright * $ms-0), $opacity)
16 
+$dark: hsla(001, 50%, calc($bright * $ms-0), $opacity)

+ 37
- 0
src/sss/variables.sss Ver fichero 

@@ -0,0 +1,37 @@
1 
+@import './partials/_ratios.sss'
2 
+
3 
+/**
4 
+  * Misc
5 
+  */
6 
+$transition: 300ms
7 
+
8 
+/**
9 
+  * Page
10 
+  */
11 
+$max-width: 80vw
12 
+
13 
+
14 
+/**
15 
+  * Fonts
16 
+  */
17 
+$sans: 'helvetica', 'calibri', 'sans-serif'
18 
+$serif: 'georgia', 'serif'
19 
+$mono: 'input', 'consolas','monospace'
20 
+
21 
+
22 
+/**
23 
+  * Modular Scale
24 
+  */
25 
+$base: 1em
26 
+$scale: $golden
27 
+
28 
+$ms-0: calc($base)
29 
+$ms-1: calc($ms-0 * $scale)
30 
+$ms-2: calc($ms-1 * $scale)
31 
+$ms-3: calc($ms-2 * $scale)
32 
+$ms-4: calc($ms-3 * $scale)
33 
+$ms-5: calc($ms-4 * $scale)
34 
+$ms-6: calc($ms-5 * $scale)
35 
+$ms-7: calc($ms-6 * $scale)
36 
+$ms-8: calc($ms-7 * $scale)
37 
+$ms-9: calc($ms-8 * $scale)

+ 12
- 0
vite.config.js Ver fichero 

@@ -0,0 +1,12 @@
1 
+import { defineConfig } from 'vite'
2 
+import vue from '@vitejs/plugin-vue'
3 
+
4 
+// https://vitejs.dev/config/
5 
+export default defineConfig({
6 
+  plugins: [vue()],
7 
+  resolve: {
8 
+    alias: {
9 
+      '@': require('path').resolve(__dirname, 'src')
10 
+    }
11 
+  },
12 
+})

Write Preview
Loading…
Cancelar
Guardar