@bagelink/vue 0.0.276 → 0.0.280

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/components/ComboBox.vue.d.ts +2 -0
  2. package/dist/components/ComboBox.vue.d.ts.map +1 -1
  3. package/dist/components/form/inputs/CheckInput.vue.d.ts +9 -4
  4. package/dist/components/form/inputs/CheckInput.vue.d.ts.map +1 -1
  5. package/dist/components/form/inputs/SelectInput.vue.d.ts.map +1 -1
  6. package/dist/index.cjs +44 -40
  7. package/dist/index.mjs +44 -40
  8. package/dist/plugins/modal.d.ts +1 -1
  9. package/dist/plugins/modal.d.ts.map +1 -1
  10. package/dist/style.css +444 -469
  11. package/package.json +1 -1
  12. package/src/components/ComboBox.vue +75 -69
  13. package/src/components/form/inputs/CheckInput.vue +55 -53
  14. package/src/components/form/inputs/SelectInput.vue +272 -284
  15. package/src/components/formkit/Toggle.vue +85 -100
  16. package/src/plugins/modal.ts +23 -23
  17. package/src/styles/buttons.css +38 -40
  18. package/src/styles/inputs.css +100 -109
  19. package/src/styles/layout.css +0 -1
  20. package/src/styles/text.css +0 -21
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.276",
4
+ "version": "0.0.280",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
package/src/components/ComboBox.vue CHANGED
@@ -1,33 +1,34 @@
1
1
  <template>
2
- <Dropdown placement="auto-start" class="bagel-input combobox">
3
- <Btn class="combobox-btn" border color="black" @click="toggle"
4
- v-bind="{ 'icon.end': open ? 'unfold_less' : 'unfold_more' }">
5
- {{
6
- valueToLabel(selectedItem) ||
7
- placeholder || 'Select' }}
8
- </Btn>
9
- <template #popper="{ hide }">
10
- <Card border thin class="combobox-options">
11
- <TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
12
- <div class="combobox-option" v-for="(option, i) in filteredOptions" :key="`${option}${i}`" @click="() => {
13
- select(option)
14
- hide();
15
- }" :class="{ selected: option === selectedItem }">
16
- <span>
17
- {{ label(option) }}
18
- </span>
19
- <Icon v-if="isSelected(option)" icon="check" />
20
- </div>
21
- </Card>
22
- </template>
23
- </Dropdown>
2
+ <Dropdown placement="auto-start" class="bagel-input combobox">
3
+ <button class="combobox-btn" @click="toggle">
4
+ {{
5
+ valueToLabel(selectedItem) ||
6
+ placeholder || 'Select' }}
7
+ <MaterialIcon v-bind="{ 'icon': open ? 'unfold_less' : 'unfold_more' }" />
8
+ </button>
9
+ <input type="hidden" v-if="required">
10
+ <template #popper="{ hide }">
11
+ <Card thin class="combobox-options">
12
+ <TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
13
+ <div class="combobox-option" v-for="(option, i) in filteredOptions" :key="`${option}${i}`" @click="() => {
14
+ select(option)
15
+ hide();
16
+ }" :class="{ selected: option === selectedItem }">
17
+ <span>
18
+ {{ label(option) }}
19
+ </span>
20
+ <Icon v-if="isSelected(option)" icon="check" />
21
+ </div>
22
+ </Card>
23
+ </template>
24
+ </Dropdown>
24
25
  </template>
25
26
 
26
27
  <script lang="ts" setup>
27
28
  import { Dropdown } from 'floating-vue';
28
29
  import 'floating-vue/style.css';
29
30
  import {
30
- TextInput, Btn, Card, Icon,
31
+ TextInput, Card, Icon, MaterialIcon,
31
32
  } from '@bagelink/vue';
32
33
 
33
34
  type Option = string | number | Record<string, any> | { label: string, value: string | number };
@@ -37,96 +38,101 @@ let selectedItem = $ref<Option>();
37
38
  const searchInput = $ref<HTMLInputElement | null>(null);
38
39
 
39
40
  const props = defineProps<{
40
- options: Option[];
41
- placeholder?: string;
42
- disabled?: boolean;
43
- modelValue?: Option;
44
- searchable?: boolean;
41
+ options: Option[];
42
+ placeholder?: string;
43
+ disabled?: boolean;
44
+ modelValue?: Option;
45
+ searchable?: boolean;
46
+ required?: boolean;
45
47
  }>();
46
48
  let search = $ref('');
47
49
 
48
50
  const toggle = () => {
49
- open = !open;
50
- if (!open) search = '';
51
- if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
51
+ open = !open;
52
+ if (!open) search = '';
53
+ if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
52
54
  };
53
55
 
54
56
  const valueToLabel = (value?: Option) => {
55
- if (!value) return '';
56
- const option = props.options.find((option) => {
57
- if (typeof option === 'string' || typeof option === 'number') return option === value;
58
- return option.value === value;
59
- });
60
- if (!option) return value;
61
- return label(option);
57
+ if (!value) return '';
58
+ const option = props.options.find((option) => {
59
+ if (typeof option === 'string' || typeof option === 'number') return option === value;
60
+ return option.value === value;
61
+ });
62
+ if (!option) return value;
63
+ return label(option);
62
64
  };
63
65
 
64
66
  const emit = defineEmits(['update:modelValue']);
65
67
 
66
68
  const label = (option: Option) => {
67
- if (typeof option === 'string') return option;
68
- if (typeof option === 'number') return `${option}`;
69
- return option.label;
69
+ if (typeof option === 'string') return option;
70
+ if (typeof option === 'number') return `${option}`;
71
+ return option.label;
70
72
  };
71
73
 
72
74
  const isSelected = (option: Option) => {
73
- if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
74
- return option.value === selectedItem;
75
+ if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
76
+ return option.value === selectedItem;
75
77
  };
76
78
 
77
79
  const filteredOptions = $computed(() => props.options.filter((option) => {
78
- const searchTerm = new RegExp(search, 'gi');
79
- if (typeof option === 'string') return option.match(searchTerm);
80
- if (typeof option === 'number') return `${option}`.match(searchTerm);
81
- return option.label.match(searchTerm);
80
+ const searchTerm = new RegExp(search, 'gi');
81
+ if (typeof option === 'string') return option.match(searchTerm);
82
+ if (typeof option === 'number') return `${option}`.match(searchTerm);
83
+ return option.label.match(searchTerm);
82
84
  }));
83
85
 
84
86
  const select = (option: Option) => {
85
- if (typeof option === 'string') selectedItem = option;
86
- else if (typeof option === 'number') selectedItem = option;
87
- else selectedItem = option.value;
88
- emit('update:modelValue', selectedItem);
89
- open = false;
87
+ if (typeof option === 'string') selectedItem = option;
88
+ else if (typeof option === 'number') selectedItem = option;
89
+ else selectedItem = option.value;
90
+ emit('update:modelValue', selectedItem);
91
+ open = false;
90
92
  };
91
93
  </script>
92
94
 
93
95
  <style scoped>
94
96
  .combobox {
95
- width: 100%;
97
+ width: 100%;
96
98
  }
97
99
 
98
100
  .combobox-option {
99
- padding: 6px 12px;
100
- cursor: pointer;
101
- border-radius: 5px;
102
- transition: all 0.2s;
103
- display: flex;
104
- justify-content: space-between;
105
- width: 300px;
101
+ padding: 6px 12px;
102
+ cursor: pointer;
103
+ border-radius: 5px;
104
+ transition: all 0.2s;
105
+ display: flex;
106
+ justify-content: space-between;
107
+ width: 100%;
106
108
  }
107
109
 
108
110
  .combobox-options {
109
- max-height: 300px;
110
- overflow-y: auto;
111
+ max-height: 300px;
112
+ overflow-y: auto;
111
113
  }
112
114
 
113
115
  .combobox-option:hover {
114
- background: var(--bgl-gray-20);
116
+ background: var(--bgl-gray-20);
115
117
  }
116
118
  </style>
117
119
 
118
120
  <style>
119
- .combobox-btn .bgl_btn-flex {
120
- justify-content: space-between;
121
+ .combobox-btn {
122
+ display: flex;
123
+ justify-content: space-between;
124
+ align-items: center;
125
+ height: var(--input-height);
126
+ border-radius: var(--input-border-radius);
121
127
  }
122
128
 
123
129
  .v-popper__arrow-container {
124
- display: none;
130
+ display: none;
125
131
  }
126
132
 
127
133
  .v-popper--theme-dropdown .v-popper__inner {
128
- border: none;
129
- background: transparent;
130
- border-radius: var(--card-border-radius);
134
+ border: none;
135
+ background: transparent;
136
+ border-radius: var(--card-border-radius);
131
137
  }
132
138
  </style>
package/src/components/form/inputs/CheckInput.vue CHANGED
@@ -1,95 +1,97 @@
1
1
  <template>
2
- <div class="bagel-input bgl-checkbox" :title="title" :class="{ small: small }">
3
- <div class="check-square" :class="{ checked: checked }" @click="checked = !checked">
4
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
5
- <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
6
- </svg>
7
- </div>
8
- <label>
9
- <input :required="required" :id="id" type="checkbox" v-model="checked">
10
- {{ label }}
11
- </label>
12
- </div>
2
+ <div class="bagel-input bgl-checkbox" :title="title" :class="{ small: small }">
3
+ <div class="check-square" :class="{ checked: checked }" @click="checked = !checked">
4
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
5
+ <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
6
+ </svg>
7
+ </div>
8
+ <label>
9
+ <input :required="required" :id="id" type="checkbox" v-model="checked">
10
+ <slot name="label">
11
+ {{ label }}
12
+ </slot>
13
+ </label>
14
+ </div>
13
15
  </template>
14
16
 
15
17
  <script setup lang="ts">
16
18
  defineProps<{
17
- label: string;
18
- id?: string;
19
- title?: string;
20
- small?: boolean;
21
- required?: boolean
19
+ label?: string;
20
+ id?: string;
21
+ title?: string;
22
+ small?: boolean;
23
+ required?: boolean
22
24
  }>();
23
25
 
24
26
  const checked = defineModel<boolean>('modelValue', { default: false });
25
27
  </script>
26
28
  <style>
27
29
  :root {
28
- --bgl-white: #fff;
29
- --input-height: 40px;
30
- --input-border-radius: 7px;
31
- --bgl-transition: all 200ms ease;
32
- --bgl-primary: #19b8ea;
30
+ --bgl-white: #fff;
31
+ --input-height: 40px;
32
+ --input-border-radius: 7px;
33
+ --bgl-transition: all 200ms ease;
34
+ --bgl-primary: #19b8ea;
33
35
 
34
36
  }
35
37
  </style>
36
38
  <style scoped>
37
39
  .bgl-checkbox {
38
- position: relative;
39
- display: flex;
40
- flex-direction: row;
41
- align-items: center;
40
+ position: relative;
41
+ display: flex;
42
+ flex-direction: row;
43
+ align-items: center;
42
44
  }
43
45
 
44
46
  .bgl-checkbox input[type=checkbox] {
45
- position: absolute;
46
- opacity: 0;
47
- z-index: -1;
47
+ position: absolute;
48
+ opacity: 0;
49
+ z-index: -1;
48
50
  }
49
51
 
50
52
  .bgl-checkbox label {
51
- padding-inline-start: 0.5rem;
52
- transition: var(--bgl-transition);
53
- cursor: pointer;
54
- user-select: none;
53
+ padding-inline-start: 0.5rem;
54
+ transition: var(--bgl-transition);
55
+ cursor: pointer;
56
+ user-select: none;
55
57
  }
56
58
 
57
59
  .bgl-checkbox:hover {
58
- filter: brightness(95%);
60
+ filter: brightness(95%);
59
61
  }
60
62
 
61
63
  .bgl-checkbox:active {
62
- filter: var(--bgl-active-filter);
64
+ filter: var(--bgl-active-filter);
63
65
  }
64
66
 
65
67
  .bgl-checkbox .check-square {
66
- width: calc(var(--input-height) / 2.5);
67
- height: calc(var(--input-height) / 2.5);
68
- background: var(--bgl-white);
69
- border-radius: calc(var(--input-border-radius) / 2);
70
- border: var(--bgl-primary) 1px solid;
71
- position: relative;
72
- display: flex;
73
- align-items: center;
74
- justify-content: center;
68
+ width: calc(var(--input-height) / 2.5);
69
+ height: calc(var(--input-height) / 2.5);
70
+ background: var(--bgl-white);
71
+ border-radius: calc(var(--input-border-radius) / 2);
72
+ border: var(--bgl-primary) 1px solid;
73
+ position: relative;
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
75
77
  }
76
78
 
77
79
  .check-square.checked {
78
- background: var(--bgl-primary);
80
+ background: var(--bgl-primary);
79
81
  }
80
82
 
81
83
  .bgl-checkbox svg {
82
- width: calc(var(--input-height) / 2.5);
83
- height: calc(var(--input-height) / 2.5);
84
- position: absolute;
85
- z-index: 2;
86
- fill: var(--bgl-white);
87
- pointer-events: none;
88
- transform: scale(0);
89
- transition: var(--bgl-transition);
84
+ width: calc(var(--input-height) / 2.5);
85
+ height: calc(var(--input-height) / 2.5);
86
+ position: absolute;
87
+ z-index: 2;
88
+ fill: var(--bgl-white);
89
+ pointer-events: none;
90
+ transform: scale(0);
91
+ transition: var(--bgl-transition);
90
92
  }
91
93
 
92
94
  .check-square.checked svg {
93
- transform: scale(1);
95
+ transform: scale(1);
94
96
  }
95
97
  </style>